Feat: Filter and improved UI

app/Http/Controllers/ActivitiesAttendedController.php

@@ -108,7 +108,7 @@ class ActivitiesAttendedController extends Controller
         return response()->json(['success' => 'Record deleted successfully']);
     }
 
-    public function getActivitiesAttendedResponses()
+    public function getActivitiesAttendedResponses(Request $request)
     {
         $user = auth()->user();
         $isAdmin = $user->role->name === 'Admin';
@@ -130,6 +130,25 @@ class ActivitiesAttendedController extends Controller
                 ->where('faculty_id', $user->id);
         }
 
+        // Apply filters
+        if ($request->has('department') && !empty($request->department)) {
+            $responses->whereHas('department', function ($query) use ($request) {
+                $query->where('id', $request->department);
+            });
+        }
+
+        if ($request->has('category') && !empty($request->category)) {
+            $responses->where('category', $request->category);
+        }
+
+        if ($request->has('dateFrom') && !empty($request->dateFrom)) {
+            $responses->where('start_date', '>=', $request->dateFrom);
+        }
+
+        if ($request->has('dateTo') && !empty($request->dateTo)) {
+            $responses->where('end_date', '<=', $request->dateTo);
+        }
+
         return DataTables::of($responses)
             ->addColumn('user_name', function ($response) {
                 return $response->user->name ?? 'Unknown';
@@ -175,7 +194,6 @@ class ActivitiesAttendedController extends Controller
                 $deleteRoute = route('activitiesAttended.destroy', $response->id);
                 $actions[] = '<button type="button" class="btn btn-sm btn-danger delete-btn" data-id="' . $response->id . '" data-url="' . $deleteRoute . '">Delete</button>';
 
-
                 return implode(' ', $actions);
             })
             ->rawColumns(['action'])

app/Http/Controllers/AdminController.php

@@ -7,6 +7,7 @@ namespace App\Http\Controllers;
 use Illuminate\Http\Request;
 use Yajra\DataTables\Facades\DataTables;
 use App\Models\ActivitiesAttended;
+use App\Models\Department;
 use Illuminate\Support\Facades\Storage;
 
 class AdminController extends Controller
@@ -20,7 +21,8 @@ class AdminController extends Controller
     // View responses submitted by users
     public function viewActivitiesAttendedResponses()
     {
-        return view('activities-attended.index');
+        $departments = Department::all();
+        return view('activities-attended.index', compact('departments'));
     }
     public function viewActivitiesOrganisedResponses()
     {

app/Http/Controllers/CoordinatorController.php

@@ -6,6 +6,7 @@ use Illuminate\Http\Request;
 use Yajra\DataTables\Facades\DataTables;
 use Illuminate\Support\Facades\Auth;
 use App\Models\ActivitiesAttended;
+use App\Models\Department;
 
 class CoordinatorController extends Controller
 {
@@ -18,7 +19,8 @@ class CoordinatorController extends Controller
     // View responses submitted by users
     public function viewActivitiesAttendedResponses()
     {
-        return view('activities-attended.index');
+        $departments = Department::all();
+        return view('activities-attended.index', compact('departments'));
     }
 
     public function viewActivitiesOrganisedResponses()
@@ -53,5 +55,4 @@ class CoordinatorController extends Controller
     {
         return view('patents.index');
     }
-
 }

app/Http/Controllers/DepartmentController.php

@@ -73,4 +73,10 @@ class DepartmentController extends Controller
         $department->delete();
         return response()->noContent();
     }
+
+    public function getDepartments()
+    {
+        $departments = Department::all();
+        return response()->json($departments);
+    }
 }

app/Http/Controllers/FacultyController.php

@@ -6,6 +6,7 @@ use Illuminate\Http\Request;
 use App\Models\ActivitiesAttended;
 use App\Models\ActivitiesOrganised;
 use App\Models\BooksPublished;
+use App\Models\Department;
 use App\Models\ExternalEngagement;
 use App\Models\IvOrganised;
 use App\Models\OnlineCourse;
@@ -29,7 +30,8 @@ class FacultyController extends Controller
 
     public function viewActivitiesAttendedResponses()
     {
-        return view('activities-attended.index');
+        $departments = Department::all();
+        return view('activities-attended.index', compact('departments'));
     }
     public function ActivitiesOrganisedForm()
     {

resources/views/activities-attended/index.blade.php

@@ -1,69 +1,209 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
+<div class="container py-4">
-    <div class="bg-white overflow-hidden shadow sm:rounded-lg">
+    <div class="row">
-        <div class="px-4 py-5 sm:px-6">
+        <div class="col-12">
-            <h3 class="text-xl leading-6 font-semibold text-gray-900">
+            <div class="card shadow-sm">
-                All Responses
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <h3 class="page-title m-0">
+                        <i class="fas fa-list-alt me-2 text-primary"></i>All Responses
                     </h3>
+                    @if(auth()->user()->role->name === 'Admin')
+                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#missingProofsModal">
+                        <i class="fas fa-search me-1"></i> Check Missing Proofs
+                    </button>
+                    @endif
                 </div>
-        <div class="px-4 py-5 sm:px-6">
+                <div class="card-body">
-            <!-- <div class="overflow-x-auto w-full"> -->
+                    <!-- Filter Controls -->
-            <div class="overflow-x-auto w-full max-w-screen-lg mx-auto">
+                    <div class="row mb-4">
-                <table id="responses-table" class="table-auto w-full table-striped border-collapse border border-gray-200 rounded-lg">
+                        <div class="col-md-4">
-                    <thead class="bg-gray-100">
+                            <div class="input-group">
+                                <span class="input-group-text bg-light">Department</span>
+                                <select id="department-filter" class="form-select">
+                                    <option value="">All Departments</option>
+                                    @foreach($departments as $department)
+                                    <option value="{{ $department->id }}">{{ $department->name }}</option>
+                                    @endforeach
+                                </select>
+                            </div>
+                        </div>
+
+                        <div class="col-md-4">
+                            <div class="input-group">
+                                <span class="input-group-text bg-light">Category</span>
+                                <select id="category-filter" class="form-select">
+                                    <option value="">All Categories</option>
+                                    <!-- Category options would be populated dynamically -->
+                                </select>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="input-group">
+                                <span class="input-group-text bg-light">Date Range</span>
+                                <input type="date" id="date-from" class="form-control">
+                                <span class="input-group-text bg-light">to</span>
+                                <input type="date" id="date-to" class="form-control">
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Table -->
+                    <div class="table-responsive">
+                        <table id="responses-table" class="table table-striped table-hover">
+                            <thead>
                                 <tr>
-                            <th class="px-4 py-2 border border-gray-200">ID</th>
+                                    <th>ID</th>
-                            <th class="px-4 py-2 border border-gray-200">Title</th>
+                                    <th>Title</th>
-                            <th class="px-4 py-2 border border-gray-200">Organising Institute</th>
+                                    <th>Organising Institute</th>
-                            <th class="px-4 py-2 border border-gray-200">Address</th>
+                                    <th>Address</th>
-                            <th class="px-4 py-2 border border-gray-200">Department</th>
+                                    <th>Department</th>
-                            <th class="px-4 py-2 border border-gray-200">Faculty</th>
+                                    <th>Faculty</th>
-                            <th class="px-4 py-2 border border-gray-200">Start Date</th>
+                                    <th>Start Date</th>
-                            <!-- <th class="px-4 py-2 border border-gray-200">Start Time</th> -->
+                                    <th>End Date</th>
-                            <th class="px-4 py-2 border border-gray-200">End Date</th>
+                                    <th>Days</th>
-                            <!-- <th class="px-4 py-2 border border-gray-200">End Time</th> -->
+                                    <th>Activity Type</th>
-                            <th class="px-4 py-2 border border-gray-200">Num Days</th>
+                                    <th>Category</th>
-                            <th class="px-4 py-2 border border-gray-200">Activity Type</th>
+                                    <th>Level</th>
-                            <th class="px-4 py-2 border border-gray-200">Category</th>
+                                    <th>Actions</th>
-                            <th class="px-4 py-2 border border-gray-200">Level</th>
-                            <!-- <th class="px-4 py-2 border border-gray-200">Faculty</th> -->
-                            <th class="px-4 py-2 border border-gray-200">Proof</th>
                                 </tr>
                             </thead>
                             <tbody>
+                                <!-- Data will be loaded via AJAX -->
                             </tbody>
                         </table>
                     </div>
                 </div>
             </div>
+        </div>
+    </div>
 </div>
+
+<!-- Missing Proofs Modal -->
+@if(auth()->user()->role->name === 'Admin')
+<div class="modal fade" id="missingProofsModal" tabindex="-1" aria-labelledby="missingProofsModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header bg-light">
+                <h5 class="modal-title" id="missingProofsModalLabel">
+                    <i class="fas fa-check-square me-2 text-primary"></i>Select Categories to Check
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <form id="missingProofsForm" action="{{ route('missing-proofs.check') }}" method="POST">
+                @csrf
+                <div class="modal-body">
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="form-check mb-3">
+                                <input class="form-check-input" type="checkbox" name="categories[]" value="activities_attended" id="checkActivitiesAttended">
+                                <label class="form-check-label" for="checkActivitiesAttended">
+                                    1. Activities Attended
+                                </label>
+                            </div>
+                            <div class="form-check mb-3">
+                                <input class="form-check-input" type="checkbox" name="categories[]" value="activities_organised" id="checkActivitiesOrganised">
+                                <label class="form-check-label" for="checkActivitiesOrganised">
+                                    2. Activities Organised
+                                </label>
+                            </div>
+                            <div class="form-check mb-3">
+                                <input class="form-check-input" type="checkbox" name="categories[]" value="iv_organised" id="checkIVOrganised">
+                                <label class="form-check-label" for="checkIVOrganised">
+                                    3. IV Organised
+                                </label>
+                            </div>
+                            <div class="form-check mb-3">
+                                <input class="form-check-input" type="checkbox" name="categories[]" value="publications" id="checkPublications">
+                                <label class="form-check-label" for="checkPublications">
+                                    4. Publications
+                                </label>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-check mb-3">
+                                <input class="form-check-input" type="checkbox" name="categories[]" value="books_published" id="checkBooksPublished">
+                                <label class="form-check-label" for="checkBooksPublished">
+                                    5. Books Published
+                                </label>
+                            </div>
+                            <div class="form-check mb-3">
+                                <input class="form-check-input" type="checkbox" name="categories[]" value="external_engagement" id="checkExternalEngagement">
+                                <label class="form-check-label" for="checkExternalEngagement">
+                                    6. External Engagement
+                                </label>
+                            </div>
+                            <div class="form-check mb-3">
+                                <input class="form-check-input" type="checkbox" name="categories[]" value="online_courses" id="checkOnlineCourses">
+                                <label class="form-check-label" for="checkOnlineCourses">
+                                    7. Online Courses
+                                </label>
+                            </div>
+                            <div class="form-check mb-3">
+                                <input class="form-check-input" type="checkbox" name="categories[]" value="patents_copyrights" id="checkPatentsCopyrights">
+                                <label class="form-check-label" for="checkPatentsCopyrights">
+                                    8. Patents/Copyrights
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-check mb-2">
+                        <input class="form-check-input" type="checkbox" id="selectAll">
+                        <label class="form-check-label" for="selectAll">
+                            <strong>Select All Categories</strong>
+                        </label>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
+                        <i class="fas fa-times me-1"></i>Close
+                    </button>
+                    <button type="submit" class="btn btn-primary">
+                        <i class="fas fa-paper-plane me-1"></i>Send Email
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+@endif
+
 @endsection
 
 @section('scripts')
-<!-- DataTables JS -->
+<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
-
-<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
-<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css">
-<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
-<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
-<script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
-
-<!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css">
-<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
-<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script> -->
-<!-- <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script> -->
 <script>
     $(document).ready(function() {
+        // Handle "Select All" checkbox
+        $('#selectAll').change(function() {
+            const isChecked = $(this).prop('checked');
+            $('input[name="categories[]"]').prop('checked', isChecked);
+        });
 
-        // let selectedDepartment = "";
+        // Update "Select All" when individual checkboxes change
-        const sheetName = "Provisional Sheet";
+        $('input[name="categories[]"]').change(function() {
+            const totalCheckboxes = $('input[name="categories[]"]').length;
+            const checkedCheckboxes = $('input[name="categories[]"]:checked').length;
+            $('#selectAll').prop('checked', totalCheckboxes === checkedCheckboxes);
+        });
 
 
+        // Form validation for the modal
+        const form = document.getElementById('missingProofsForm');
+        if (form) {
+            form.addEventListener('submit', function(e) {
+                const checkboxes = form.querySelectorAll('input[type="checkbox"]:checked');
+
+                if (checkboxes.length === 0) {
+                    e.preventDefault();
+                    alert('Please select at least one category before sending emails.');
+                }
+            });
+        }
+
+        const sheetName = "Responses Report";
+
         var initAjaxRoute = function(route) {
             table = $("#responses-table").DataTable({
                 fnDestroy: true,
@@ -72,13 +212,17 @@
                 responsive: true,
                 ajax: {
                     url: route,
-                    // data: function(d){
+                    data: function(d) {
-                    //     d.department = selectedDepartment;
+                        d.department = $('#department-filter').val();
-                    // }
+                        d.category = $('#category-filter').val();
+                        d.dateFrom = $('#date-from').val();
+                        d.dateTo = $('#date-to').val();
+                    }
                 },
                 columns: [{
                         data: 'id',
                         name: 'id',
+                        searchable: false
                     },
                     {
                         data: 'title',
@@ -97,8 +241,10 @@
                     },
                     {
                         data: 'department_name',
-                        name: 'department',
+                        name: 'department_name',
-                        orderable: false
+                        orderable: false,
+                        searchable: false
+
                     },
                     {
                         data: 'user_name',
@@ -130,7 +276,8 @@
                     {
                         data: 'category',
                         name: 'category',
-                        orderable: false
+                        orderable: false,
+                        searchable: false
                     },
                     {
                         data: 'level',
@@ -142,118 +289,97 @@
                         name: 'proof',
                         orderable: false,
                         searchable: false
-                    }, // View button for proof
+                    }
                 ],
                 columnDefs: [{
-                        targets: 0,
+                        targets: '_all',
-                        // width: '170px', 
+                        className: 'text-center wrap-text'
-                        className: 'text-center wrap-text',
                     },
                     {
-                        targets: 1,
+                        targets: 12,
-                        // width: '150px', 
+                        render: function(data, type, row) {
-                        className: 'text-center wrap-text',
+                            return '<div class="btn-group" role="group">' +
-                    },
+                                data +
-                    {
+                                '</div>';
-                        targets: 2,
+                        }
-                        // maxWidth: '150px', 
+                    }
-                        className: 'text-center wrap-text',
-                    },
-                    {
-                        targets: 3,
-                        // maxWidth: '100px', 
-                        className: 'text-center wrap-text',
-                    },
-                    {
-                        targets: 4,
-                        // maxWidth: '300px', 
-                        className: 'text-center wrap-text',
-                    },
-                    {
-                        targets: 5,
-                        // maxWidth: '150px', 
-                        className: 'text-center wrap-text',
-                    },
-                    {
-                        targets: 6,
-                        // maxWidth: '100px', 
-                        className: 'text-center wrap-text',
-                    },
-                    {
-                        targets: 7,
-                        // maxWidth: '100px', 
-                        className: 'text-center wrap-text',
-                    },
-                    {
-                        targets: 8,
-                        // width: '100px', 
-                        className: 'text-center wrap-text',
-                    },
-                    {
-                        targets: 9,
-                        // width: '50px', 
-                        className: 'text-center wrap-text',
-                    },
-                    {
-                        targets: 10,
-                        // width: '120px', 
-                        className: 'text-center wrap-text',
-                    },
-                    {
-                        targets: 11,
-                        // width: '120px', 
-                        className: 'text-center wrap-text',
-                    },
                 ],
-                dom: 'Bfrtip',
+                dom: '<"d-flex justify-content-between align-items-center mb-3"<"d-flex align-items-center"l><"d-flex"f<"ms-2"B>>>rtip',
                 buttons: [{
                         extend: 'copy',
+                        text: '<i class="fas fa-copy me-1"></i> Copy',
+                        className: 'btn btn-sm btn-outline-white',
                         title: sheetName,
                         exportOptions: exportOptions()
                     },
                     {
                         extend: 'csv',
+                        text: '<i class="fas fa-file-csv me-1"></i> CSV',
+                        className: 'btn btn-sm btn-outline-white',
                         title: sheetName,
                         exportOptions: exportOptions()
                     },
                     {
                         extend: 'excel',
+                        text: '<i class="fas fa-file-excel me-1"></i> Excel',
+                        className: 'btn btn-sm btn-outline-white',
                         title: sheetName,
                         exportOptions: exportOptions()
                     },
                     {
                         extend: 'pdf',
+                        text: '<i class="fas fa-file-pdf me-1"></i> PDF',
+                        className: 'btn btn-sm btn-outline-white',
                         title: sheetName,
                         exportOptions: exportOptions()
                     },
                     {
                         extend: 'print',
+                        text: '<i class="fas fa-print me-1"></i> Print',
+                        className: 'btn btn-sm btn-outline-white',
                         title: sheetName,
                         exportOptions: exportOptions()
                     }
-                ]
+                ],
-                // order: [[4, 'asc']],
+                language: {
+                    search: "<i class='fas fa-search'></i> _INPUT_",
+                    searchPlaceholder: "Search records...",
+                    lengthMenu: "<i class='fas fa-list me-1'></i> _MENU_ records per page",
+                    info: "Showing _START_ to _END_ of _TOTAL_ entries",
+                    paginate: {
+                        first: "<i class='fas fa-angle-double-left'></i>",
+                        last: "<i class='fas fa-angle-double-right'></i>",
+                        next: "<i class='fas fa-angle-right'></i>",
+                        previous: "<i class='fas fa-angle-left'></i>"
+                    }
+                }
+            });
+
+            // Apply filters when they change
+            $('#department-filter, #category-filter, #date-from, #date-to').change(function() {
+                table.ajax.reload();
             });
         };
-        // Replace this event handler in your script
+
+        // Delete button handler
         $('#responses-table').on('click', '.delete-btn', function() {
             if (confirm('Are you sure you want to delete this record?')) {
                 const id = $(this).data('id');
-                const url = $(this).data('url'); // Use the data-url attribute instead of hardcoded path
+                const url = $(this).data('url');
 
                 $.ajax({
-                    url: url, // This will use the correct URL based on user role
+                    url: url,
                     type: 'DELETE',
                     data: {
                         "_token": "{{ csrf_token() }}"
                     },
                     success: function(result) {
                         table.ajax.reload();
-                        alert('Record deleted successfully');
+                        showToast('Record deleted successfully', 'success');
                     },
                     error: function(error) {
                         console.error(error);
-                        alert('Error deleting record');
+                        showToast('Error deleting record', 'danger');
                     }
                 });
             }
@@ -273,7 +399,43 @@
             };
         }
 
-        // Add this before initAjaxRoute call at the end of your script
+        // Toast notification function
+        function showToast(message, type) {
+            const toastContainer = document.createElement('div');
+            toastContainer.className = 'position-fixed bottom-0 start-0 p-3';
+            toastContainer.style.zIndex = '1050';
+
+            const toastEl = document.createElement('div');
+            toastEl.className = `toast align-items-center text-white bg-${type} border-0`;
+            toastEl.setAttribute('role', 'alert');
+            toastEl.setAttribute('aria-live', 'assertive');
+            toastEl.setAttribute('aria-atomic', 'true');
+
+            toastEl.innerHTML = `
+            <div class="d-flex">
+                <div class="toast-body">
+                    ${message}
+                </div>
+                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+        `;
+
+            toastContainer.appendChild(toastEl);
+            document.body.appendChild(toastContainer);
+
+            const toast = new bootstrap.Toast(toastEl, {
+                autohide: true,
+                delay: 3000
+            });
+
+            toast.show();
+
+            toastEl.addEventListener('hidden.bs.toast', function() {
+                document.body.removeChild(toastContainer);
+            });
+        }
+
+        // Set the appropriate data route based on user role
         const userRole = "{{ auth()->user()->role->name }}";
         let dataRoute = "{{ route('admin.ActivitiesAttendedResponses.data') }}";
 
@@ -284,8 +446,8 @@
             dataRoute = "{{ route('faculty.ActivitiesAttendedResponses.data') }}";
         }
 
+        // Initialize the data table
         initAjaxRoute(dataRoute);
     });
 </script>
-
 @endsection

resources/views/layouts/app.blade.php

@@ -1,20 +1,163 @@
 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-    <head>
+<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="csrf-token" content="{{ csrf_token() }}">
 
-        <title>{{ config('app.name', 'Laravel') }}</title>
+    <title>{{ config('app.name', 'Faculty Portal') }}</title>
 
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.bunny.net">
-        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
+    <link href="https://fonts.bunny.net/css?family=inter:300,400,500,600,700&display=swap" rel="stylesheet" />
+    
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- DataTables CSS -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.bootstrap5.min.css">
+    
+    <!-- Custom CSS -->
+    <style>
+        :root {
+            --primary-color: #3b82f6;
+            --secondary-color: #1e40af;
+            --accent-color: #93c5fd;
+            --success-color: #10b981;
+            --warning-color: #f59e0b;
+            --danger-color: #ef4444;
+            --light-bg: #f9fafb;
+            --dark-bg: #1f2937;
+        }
+        
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #f3f4f6;
+        }
+        
+        .navbar {
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        }
+        
+        .card {
+            border-radius: 0.75rem;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+            transition: all 0.3s ease;
+        }
+        
+        .card:hover {
+            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+        }
+        
+        .card-header {
+            background-color: white;
+            border-bottom: 1px solid #e5e7eb;
+            border-top-left-radius: 0.75rem !important;
+            border-top-right-radius: 0.75rem !important;
+            padding: 1.25rem;
+        }
+        
+        .table {
+            --bs-table-striped-bg: rgba(59, 130, 246, 0.05);
+        }
+        
+        .table th {
+            font-weight: 600;
+            background-color: #f8fafc;
+            color: #334155;
+        }
+        
+        .btn-primary {
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+        }
+        
+        .btn-primary:hover {
+            background-color: var(--secondary-color);
+            border-color: var(--secondary-color);
+        }
+        
+        .dropdown-menu {
+            border-radius: 0.5rem;
+            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+        }
+        
+        .page-title {
+            color: #1e293b;
+            font-weight: 600;
+        }
+        
+        .dataTables_wrapper .dataTables_length, 
+        .dataTables_wrapper .dataTables_filter {
+            margin-bottom: 1.5rem;
+        }
+        
+        .dataTables_wrapper .dataTables_length select, 
+        .dataTables_wrapper .dataTables_filter input {
+            border: 1px solid #d1d5db;
+            border-radius: 0.375rem;
+            padding: 0.375rem 0.75rem;
+        }
+        
+        .dataTables_wrapper .dataTables_paginate .paginate_button {
+            margin: 0 0.25rem;
+            border-radius: 0.375rem;
+        }
+        
+        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
+            background: var(--primary-color) !important;
+            border-color: var(--primary-color) !important;
+            color: white !important;
+        }
+        
+        .dt-buttons {
+            margin-bottom: 1rem;
+        }
+        
+        .dt-button {
+            background-color: #f3f4f6 !important;
+            border-color: #d1d5db !important;
+            color: #374151 !important;
+            border-radius: 0.375rem !important;
+            padding: 0.375rem 0.75rem !important;
+            font-size: 0.875rem !important;
+        }
+        
+        .dt-button:hover {
+            background-color: #e5e7eb !important;
+            border-color: #9ca3af !important;
+        }
+        
+        .modal-content {
+            border-radius: 0.75rem;
+            border: none;
+        }
+        
+        .modal-header {
+            border-top-left-radius: 0.75rem;
+            border-top-right-radius: 0.75rem;
+            background-color: #f8fafc;
+        }
+        
+        .form-check-input:checked {
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+        }
+        
+        .wrap-text {
+            white-space: normal;
+            word-wrap: break-word;
+            max-width: 250px;
+        }
+    </style>
 
     <!-- Scripts -->
     @vite(['resources/css/app.css', 'resources/js/app.js'])
-    </head>
+</head>
-    <body class="font-sans antialiased">
+
+<body class="font-sans antialiased">
     <div class="min-h-screen bg-gray-100">
         @include('layouts.navigation')
 
@@ -28,10 +171,35 @@
         @endif
 
         <!-- Page Content -->
-            <main>
+        <main class="py-6">
             @yield('content')
         </main>
+        
+        <!-- Footer -->
+        <footer class="bg-white py-4 shadow-inner mt-auto">
+            <div class="container text-center text-gray-500">
+                <p class="text-sm">© {{ date('Y') }} {{ config('app.name', 'Faculty Portal') }}. All rights reserved.</p>
             </div>
-    </body>
+        </footer>
+    </div>
+    
+    <!-- jQuery -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- DataTables JS -->
+    <script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
+    <script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>
+    <script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
+    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.bootstrap5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
+    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
+    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
+    
     @yield('scripts')
+</body>
 </html>