    <style>
        :root {
            --primary: #2c3e50;
            --secondary: #3498db;
            --success: #27ae60;
            --warning: #f39c12;
            --danger: #e74c3c;
            --light: #ecf0f1;
            --dark: #2c3e50;
        }
        
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .main-content {
            padding: 20px;
        }
        
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            margin-bottom: 20px;
            transition: transform 0.3s;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .card-header {
            background-color: white;
            border-bottom: 1px solid #eee;
            border-radius: 10px 10px 0 0 !important;
            padding: 15px 20px;
            font-weight: 600;
        }
        
        .status-badge {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .status-pending {
            background-color: rgba(243, 156, 18, 0.2);
            color: #b06c0f;
        }
        
        .status-in-progress {
            background-color: rgba(52, 152, 219, 0.2);
            color: #1a5a8a;
        }
        
        .status-resolved {
            background-color: rgba(39, 174, 96, 0.2);
            color: #1a6b3a;
        }
        
        .status-urgent {
            background-color: rgba(231, 76, 60, 0.2);
            color: #a83224;
        }
        
        .complaint-item {
            border-bottom: 1px solid #eee;
            padding: 15px 0;
            transition: background-color 0.2s;
        }
        
        .complaint-item:hover {
            background-color: #f8f9fa;
        }
        
        .complaint-item:last-child {
            border-bottom: none;
        }
        
        .resident-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #eee;
        }
        
        .priority-indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 5px;
        }
        
        .priority-high {
            background-color: var(--danger);
        }
        
        .priority-medium {
            background-color: var(--warning);
        }
        
        .priority-low {
            background-color: var(--success);
        }
        
        .stats-card {
            text-align: center;
            padding: 20px;
        }
        
        .stats-card i {
            font-size: 2rem;
            margin-bottom: 10px;
        }
        
        .stats-value {
            font-size: 2rem;
            font-weight: 700;
            margin: 10px 0;
        }
        
        .stats-label {
            color: #6c757d;
            font-size: 0.9rem;
        }
        
        .filter-btn.active {
            background-color: var(--secondary);
            color: white;
        }
        
        .action-btn {
            padding: 5px 10px;
            font-size: 0.85rem;
            margin-right: 5px;
            margin-bottom: 5px;
        }
        
        .complaint-details {
            background-color: #f8f9fa;
            border-radius: 5px;
            padding: 15px;
            margin-top: 10px;
        }
        
        @media (max-width: 768px) {
            .sidebar {
                min-height: auto;
                position: relative;
                top: 0;
            }
            
            .resident-avatar {
                width: 40px;
                height: 40px;
            }
        }
    </style>

    <div class="container-fluid">
        <div class="row">
            <!-- Sidebar -->
        

            <!-- Main Content -->
            <div class="col-lg-10 col-md-9 main-content">
                <!-- Page Header -->
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div>
                        <h2 class="mb-1">Resident Complaints</h2>
                        <p class="text-muted mb-0">Manage and track complaints from your assigned residents</p>
                    </div>
                    <button class="btn btn-primary">
                        <i class="fas fa-plus mr-1"></i> New Report
                    </button>
                </div>

           
                <!-- Filters and Search -->
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="form-inline">
                                    <div class="form-group mr-3 mb-2">
                                        <label for="statusFilter" class="mr-2">Status:</label>
                                        <select class="form-control" id="statusFilter">
                                            <option value="all">All Status</option>
                                            <option value="pending">Pending</option>
                                            <option value="in-progress">In Progress</option>
                                            <option value="resolved">Resolved</option>
                                            <option value="urgent">Urgent</option>
                                        </select>
                                    </div>
                                    <div class="form-group mr-3 mb-2">
                                        <label for="priorityFilter" class="mr-2">Priority:</label>
                                        <select class="form-control" id="priorityFilter">
                                            <option value="all">All Priority</option>
                                            <option value="high">High</option>
                                            <option value="medium">Medium</option>
                                            <option value="low">Low</option>
                                        </select>
                                    </div>
                                    <div class="form-group mb-2">
                                        <label for="dateFilter" class="mr-2">Date:</label>
                                        <input type="date" class="form-control" id="dateFilter">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Search complaints...">
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary" type="button">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Complaints List -->
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Recent Complaints</h5>
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-outline-secondary active">All</button>
                            <button class="btn btn-outline-secondary">My Assignments</button>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Complaint 1 -->
                        <div class="complaint-item">
                            <div class="row">
                                <div class="col-md-1 text-center">
                                    <img src="https://ui-avatars.com/api/?name=Juan+Delos+Santos&background=3498db&color=fff" class="resident-avatar" alt="Resident Avatar">
                                </div>
                                <div class="col-md-7">
                                    <h6 class="mb-1">Noisy Neighbors During Night Time</h6>
                                    <p class="mb-1 text-muted">Submitted by: Juan Delos Santos • Zone 5, Block 2</p>
                                    <p class="mb-1">Complaint about neighbors playing loud music past 10 PM, disturbing the peace of the neighborhood.</p>
                                    <small class="text-muted">
                                        <i class="far fa-clock mr-1"></i> Submitted on: June 15, 2023
                                    </small>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex flex-column h-100 justify-content-between">
                                        <div class="mb-2">
                                            <span class="status-badge status-pending">Pending</span>
                                            <span class="priority-indicator priority-high"></span> High Priority
                                        </div>
                                        <div class="mt-auto">
                                            <button class="btn btn-sm btn-primary action-btn">
                                                <i class="fas fa-eye mr-1"></i> View Details
                                            </button>
                                            <button class="btn btn-sm btn-success action-btn">
                                                <i class="fas fa-check mr-1"></i> Mark In Progress
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Complaint 2 -->
                        <div class="complaint-item">
                            <div class="row">
                                <div class="col-md-1 text-center">
                                    <img src="https://ui-avatars.com/api/?name=Maria+Clara&background=e74c3c&color=fff" class="resident-avatar" alt="Resident Avatar">
                                </div>
                                <div class="col-md-7">
                                    <h6 class="mb-1">Garbage Collection Issues</h6>
                                    <p class="mb-1 text-muted">Submitted by: Maria Clara • Zone 3, Block 1</p>
                                    <p class="mb-1">Garbage hasn't been collected for 3 days, causing foul odor and potential health hazards.</p>
                                    <small class="text-muted">
                                        <i class="far fa-clock mr-1"></i> Submitted on: June 14, 2023
                                    </small>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex flex-column h-100 justify-content-between">
                                        <div class="mb-2">
                                            <span class="status-badge status-in-progress">In Progress</span>
                                            <span class="priority-indicator priority-medium"></span> Medium Priority
                                        </div>
                                        <div class="mt-auto">
                                            <button class="btn btn-sm btn-primary action-btn">
                                                <i class="fas fa-eye mr-1"></i> View Details
                                            </button>
                                            <button class="btn btn-sm btn-success action-btn">
                                                <i class="fas fa-check mr-1"></i> Mark Resolved
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Complaint 3 -->
                        <div class="complaint-item">
                            <div class="row">
                                <div class="col-md-1 text-center">
                                    <img src="https://ui-avatars.com/api/?name=Pedro+Penduko&background=27ae60&color=fff" class="resident-avatar" alt="Resident Avatar">
                                </div>
                                <div class="col-md-7">
                                    <h6 class="mb-1">Streetlight Not Working</h6>
                                    <p class="mb-1 text-muted">Submitted by: Pedro Penduko • Zone 7, Block 4</p>
                                    <p class="mb-1">Streetlight in front of house has been out for a week, making the area dark and unsafe at night.</p>
                                    <small class="text-muted">
                                        <i class="far fa-clock mr-1"></i> Submitted on: June 13, 2023
                                    </small>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex flex-column h-100 justify-content-between">
                                        <div class="mb-2">
                                            <span class="status-badge status-resolved">Resolved</span>
                                            <span class="priority-indicator priority-low"></span> Low Priority
                                        </div>
                                        <div class="mt-auto">
                                            <button class="btn btn-sm btn-primary action-btn">
                                                <i class="fas fa-eye mr-1"></i> View Details
                                            </button>
                                            <button class="btn btn-sm btn-secondary action-btn">
                                                <i class="fas fa-undo mr-1"></i> Reopen
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Complaint 4 -->
                        <div class="complaint-item">
                            <div class="row">
                                <div class="col-md-1 text-center">
                                    <img src="https://ui-avatars.com/api/?name=Ana+Santos&background=f39c12&color=fff" class="resident-avatar" alt="Resident Avatar">
                                </div>
                                <div class="col-md-7">
                                    <h6 class="mb-1">Stray Dogs Causing Disturbance</h6>
                                    <p class="mb-1 text-muted">Submitted by: Ana Santos • Zone 2, Block 3</p>
                                    <p class="mb-1">Group of stray dogs barking loudly at night and chasing residents, especially children.</p>
                                    <small class="text-muted">
                                        <i class="far fa-clock mr-1"></i> Submitted on: June 12, 2023
                                    </small>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex flex-column h-100 justify-content-between">
                                        <div class="mb-2">
                                            <span class="status-badge status-urgent">Urgent</span>
                                            <span class="priority-indicator priority-high"></span> High Priority
                                        </div>
                                        <div class="mt-auto">
                                            <button class="btn btn-sm btn-primary action-btn">
                                                <i class="fas fa-eye mr-1"></i> View Details
                                            </button>
                                            <button class="btn btn-sm btn-success action-btn">
                                                <i class="fas fa-check mr-1"></i> Mark In Progress
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <nav aria-label="Complaints navigation">
                            <ul class="pagination justify-content-center mb-0">
                                <li class="page-item disabled">
                                    <a class="page-link" href="#">Previous</a>
                                </li>
                                <li class="page-item active">
                                    <a class="page-link" href="#">1</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="#">2</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="#">3</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="#">Next</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
