feat: enhance cutting management with product name and status filters in the index view

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

@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers\Admin\Manage;
 
+use App\Enums\CuttingStatus;
 use App\Http\Controllers\Controller;
 use App\Http\Requests\Admin\Manage\CuttingRequest;
 use App\Http\Requests\PaginatedRequest;
@@ -24,7 +25,13 @@ public function index(PaginatedRequest $request): Response
         return Inertia::render('admin/manage/cutting/index', [
             'cuttings' => $this->service->paginated(
                 ...$request->validatedWithDefaults(),
+                filters: $request->only(['product_name', 'status']),
             ),
+            'filters' => $request->only(['product_name', 'status']),
+            'filterOptions' => [
+                'statusOptions' => CuttingStatus::toSelect(),
+                'productNames' => $this->service->getProductNames(),
+            ],
         ]);
     }
 

app/Services/Admin/Manage/CuttingService.php

@@ -10,6 +10,7 @@
 use App\Services\Concerns\RegistersMedia;
 use App\Services\S3PresignedService;
 use Illuminate\Contracts\Pagination\LengthAwarePaginator;
+use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Validation\ValidationException;
 
@@ -21,7 +22,7 @@ public function __construct(
         private S3PresignedService $s3Service,
     ) {}
 
-    public function paginated(int $perPage = 25, string $search = '', string $sort = 'created_at', string $direction = 'desc'): LengthAwarePaginator
+    public function paginated(int $perPage = 25, string $search = '', string $sort = 'created_at', string $direction = 'desc', array $filters = []): LengthAwarePaginator
     {
         $paginator = Cutting::query()
             ->select(['id', 'created_by_id', 'status', 'description', 'total_material_cost', 'cost_per_unit', 'created_at'])
@@ -38,6 +39,8 @@ public function paginated(int $perPage = 25, string $search = '', string $sort =
                 $q->whereHas('cuttingResults', fn ($rq) => $rq->where('product_name', 'like', "%{$search}%"))
                     ->orWhere('description', 'like', "%{$search}%");
             })
+            ->when($filters['product_name'] ?? null, fn ($q, $productName) => $q->whereHas('cuttingResults', fn ($rq) => $rq->where('product_name', $productName)))
+            ->when($filters['status'] ?? null, fn ($q, $status) => $q->where('status', $status))
             ->orderBy($sort, $direction)
             ->paginate($perPage);
 
@@ -66,6 +69,17 @@ public function paginated(int $perPage = 25, string $search = '', string $sort =
         return $paginator;
     }
 
+    public function getProductNames(): Collection
+    {
+        return CuttingResult::query()
+            ->select('product_name')
+            ->whereNotNull('product_name')
+            ->where('product_name', '!=', '')
+            ->distinct()
+            ->orderBy('product_name')
+            ->get();
+    }
+
     public function getForEdit(Cutting $cutting): array
     {
         $cutting->load([

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

@@ -1,11 +1,27 @@
 import { Head, Link, router } from '@inertiajs/react';
 import { Plus } from 'lucide-react';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { CardTable } from '@/components/data-display';
 import { DeleteConfirmDialog } from '@/components/dialogs';
+import { FilterPopover } from '@/components/data-display';
 import { useCardTableExpand } from '@/components/hooks/use-card-table-expand';
 import { PageHeader } from '@/components/layout';
 import { Button } from '@/components/ui/button';
+import {
+    Combobox,
+    ComboboxContent,
+    ComboboxEmpty,
+    ComboboxInput,
+    ComboboxItem,
+    ComboboxList,
+} from '@/components/ui/combobox';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
 import { useCan } from '@/hooks/use-can';
 import { useServerTable } from '@/hooks/use-server-table';
 import {
@@ -26,9 +42,21 @@ type Props = {
         per_page: number;
         total: number;
     };
+    filters: {
+        product_name?: string;
+        status?: string;
+    };
+    filterOptions: {
+        statusOptions: Array<{ value: string; label: string }>;
+        productNames: Array<{ product_name: string }>;
+    };
 };
 
-export default function CuttingIndex({ cuttings }: Props) {
+export default function CuttingIndex({
+    cuttings,
+    filters,
+    filterOptions,
+}: Props) {
     const { can } = useCan();
     const [deleting, setDeleting] = useState<Cutting | null>(null);
     const expand = useCardTableExpand(true);
@@ -42,14 +70,22 @@ export default function CuttingIndex({ cuttings }: Props) {
 
     const {
         search,
+        filterOpen,
+        setFilterOpen,
         handlePageChange,
         handlePerPageChange,
         handleSearchChange,
+        applyFilter,
+        clearFilters,
     } = useServerTable({
         route: () => cuttingIndex.url(),
         pagination,
+        filters,
+        filterWithParams: false,
     });
 
+    const hasActiveFilters = Boolean(filters.product_name || filters.status);
+
     function handleDelete() {
         if (!deleting) {
             return;
@@ -60,6 +96,80 @@ export default function CuttingIndex({ cuttings }: Props) {
         });
     }
 
+    const selectedProductName = useMemo(
+        () =>
+            filterOptions.productNames.find(
+                (p) => p.product_name === filters.product_name,
+            ) ?? null,
+        [filterOptions.productNames, filters.product_name],
+    );
+
+    const filterToolbar = (
+        <FilterPopover
+            open={filterOpen}
+            onOpenChange={setFilterOpen}
+            filters={filters}
+            hasActiveFilters={hasActiveFilters}
+            onClear={clearFilters}
+        >
+            <div className="flex flex-col gap-2">
+                <label className="text-xs text-muted-foreground">
+                    Nama Produk
+                </label>
+                <Combobox
+                    items={filterOptions.productNames}
+                    itemToStringLabel={(product) => product.product_name}
+                    value={selectedProductName}
+                    onValueChange={(value) =>
+                        applyFilter(
+                            'product_name',
+                            value ? value.product_name : '',
+                        )
+                    }
+                >
+                    <ComboboxInput
+                        placeholder="Pilih nama produk..."
+                        className="w-full"
+                    />
+                    <ComboboxContent>
+                        <ComboboxEmpty>
+                            Tidak ada produk ditemukan.
+                        </ComboboxEmpty>
+                        <ComboboxList>
+                            {(product) => (
+                                <ComboboxItem value={product}>
+                                    {product.product_name}
+                                </ComboboxItem>
+                            )}
+                        </ComboboxList>
+                    </ComboboxContent>
+                </Combobox>
+            </div>
+            <div className="flex flex-col gap-2">
+                <label className="text-xs text-muted-foreground">
+                    Status
+                </label>
+                <Select
+                    value={filters.status ?? ''}
+                    onValueChange={(value) =>
+                        applyFilter('status', value)
+                    }
+                >
+                    <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Semua status" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {filterOptions.statusOptions.map((opt) => (
+                            <SelectItem key={opt.value} value={opt.value}>
+                                {opt.label}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            </div>
+        </FilterPopover>
+    );
+
     return (
         <>
             <Head title="Cutting" />
@@ -87,6 +197,7 @@ export default function CuttingIndex({ cuttings }: Props) {
                     searchValue={search}
                     onSearchChange={handleSearchChange}
 
+                    toolbar={filterToolbar}
                     pagination={pagination}
                     onPageChange={handlePageChange}
                     onPerPageChange={handlePerPageChange}