feat: add date filters to restock index and update pagination logic

app/Http/Controllers/Admin/Manage/RestockController.php

@@ -24,10 +24,14 @@ public function __construct(
 
     public function index(PaginatedRequest $request): Response
     {
+        $filters = $request->only(['date_from', 'date_to']);
+
         return Inertia::render('admin/manage/restock/index', [
             'restocks' => $this->service->paginated(
                 ...$request->validatedWithDefaults(),
+                filters: $filters,
             ),
+            'filters' => $filters,
             'highlight' => $request->input('highlight'),
         ]);
     }

app/Services/Admin/Manage/RestockService.php

@@ -23,7 +23,7 @@ public function __construct(
         private S3PresignedService $s3Service,
     ) {}
 
-    public function paginated(int $perPage = 25, string $search = '', string $sort = 'created_at', string $direction = 'desc', ?int $highlight = null): LengthAwarePaginator
+    public function paginated(int $perPage = 25, string $search = '', string $sort = 'created_at', string $direction = 'desc', array $filters = [], ?int $highlight = null): LengthAwarePaginator
     {
         $itemsCountQuery = '(SELECT COUNT(*) FROM restock_items WHERE restock_items.restock_id = restocks.id AND restock_items.deleted_at IS NULL)';
         $totalQtyQuery = '(SELECT IFNULL(SUM(quantity), 0) FROM restock_items WHERE restock_items.restock_id = restocks.id AND restock_items.deleted_at IS NULL)';
@@ -43,6 +43,8 @@ public function paginated(int $perPage = 25, string $search = '', string $sort =
                 $q->whereHas('restockItems.productVariant.product', fn ($sq) => $sq->where('name', 'like', "%{$search}%"))
                     ->orWhere('notes', 'like', "%{$search}%");
             })
+            ->when($filters['date_from'] ?? null, fn ($q, $dateFrom) => $q->whereDate('created_at', '>=', $dateFrom))
+            ->when($filters['date_to'] ?? null, fn ($q, $dateTo) => $q->whereDate('created_at', '<=', $dateTo))
             ->orderBy($sort, $direction)
             ->paginate($perPage);
 

resources/js/pages/admin/manage/restock/index.tsx

@@ -1,9 +1,11 @@
 import { Head, Link, router } from '@inertiajs/react';
+import { format } from 'date-fns';
 import { Plus } from 'lucide-react';
 import { useCallback, useState } from 'react';
-import { CardTable } from '@/components/data-display';
+import { CardTable, FilterPopover } from '@/components/data-display';
 import { DeleteConfirmDialog } from '@/components/dialogs';
 import { useCardTableExpand } from '@/components/hooks/use-card-table-expand';
+import { DatePicker } from '@/components/inputs';
 import { PageHeader } from '@/components/layout';
 import { Button } from '@/components/ui/button';
 import { useCan } from '@/hooks/use-can';
@@ -27,10 +29,14 @@ type Props = {
         per_page: number;
         total: number;
     };
+    filters: {
+        date_from?: string;
+        date_to?: string;
+    };
     highlight?: number;
 };
 
-export default function RestockIndex({ restocks, highlight }: Props) {
+export default function RestockIndex({ restocks, filters, highlight }: Props) {
     const { can } = useCan();
     const [deleting, setDeleting] = useState<Restock | null>(null);
     const [loadedItems, setLoadedItems] = useState<Record<number, RestockItem[]>>({});
@@ -46,12 +52,17 @@ export default function RestockIndex({ restocks, highlight }: Props) {
 
     const {
         search,
+        filterOpen,
+        setFilterOpen,
         handlePageChange,
         handlePerPageChange,
         handleSearchChange,
+        applyFilter,
+        clearFilters,
     } = useServerTable({
         route: () => restockIndex.url(),
         pagination,
+        filters,
     });
 
     const fetchItems = useCallback((restock: Restock) => {
@@ -87,6 +98,33 @@ export default function RestockIndex({ restocks, highlight }: Props) {
         });
     }
 
+    const filterToolbar = (
+        <FilterPopover
+            open={filterOpen}
+            onOpenChange={setFilterOpen}
+            filters={filters}
+            hasActiveFilters={Boolean(filters.date_from) || Boolean(filters.date_to)}
+            onClear={clearFilters}
+        >
+            <div className="flex flex-col gap-2">
+                <label className="text-xs text-muted-foreground">Dari Tanggal</label>
+                <DatePicker
+                    value={filters.date_from ?? null}
+                    onChange={(date) => applyFilter('date_from', date ? format(date, 'yyyy-MM-dd') : '')}
+                    placeholder="Pilih tanggal mulai"
+                />
+            </div>
+            <div className="flex flex-col gap-2">
+                <label className="text-xs text-muted-foreground">Sampai Tanggal</label>
+                <DatePicker
+                    value={filters.date_to ?? null}
+                    onChange={(date) => applyFilter('date_to', date ? format(date, 'yyyy-MM-dd') : '')}
+                    placeholder="Pilih tanggal akhir"
+                />
+            </div>
+        </FilterPopover>
+    );
+
     return (
         <>
             <Head title="Restock" />
@@ -143,6 +181,7 @@ export default function RestockIndex({ restocks, highlight }: Props) {
                     searchValue={search}
                     onSearchChange={handleSearchChange}
 
+                    toolbar={filterToolbar}
                     pagination={pagination}
                     onPageChange={handlePageChange}
                     onPerPageChange={handlePerPageChange}