feat: add category filter (wip)

ainunns · Nov 28, 2024 · be3f453 · be3f453
1 parent 5db56c3
commit be3f453
Showing 1 changed file with 42 additions and 2 deletions.
diff --git a/resources/js/Pages/Transaction/Index.tsx b/resources/js/Pages/Transaction/Index.tsx
@@ -9,24 +9,58 @@ import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { cn, numberToCurrency } from "@/Lib/utils";
 import { CartType } from "@/types/entities/cart";
 import { TransactionType } from "@/types/entities/transaction";
-import { Head } from "@inertiajs/react";
+import { Head, router } from "@inertiajs/react";
 import { format } from "date-fns";
 import { Search, XCircle } from "lucide-react";
 import * as React from "react";
 import NotFound from "./container/NotFound";
+import { CategoryType } from "@/types/entities/category";
+import PopupFilter, {
+  PopupFilterProps,
+} from "../Product/Components/PopupFilter";
+
+type CategoryFilter = {
+  category: string[];
+};
+
+type TransactionIndexProps = {
+  transaction: TransactionType[];
+  category: CategoryType[];
+};
 
 export default function TransactionIndex({
   transaction,
-}: { transaction: TransactionType[] }) {
+  category,
+}: TransactionIndexProps) {
   const [filter, setFilter] = React.useState<string>("");
 
+  const [filterQuery, setFilterQuery] = React.useState<CategoryFilter>({
+    category: [],
+  });
+
+  const filterOption: PopupFilterProps<CategoryFilter>["filterOption"] =
+    React.useMemo(
+      () => [
+        {
+          id: "category",
+          name: "Category",
+          options: category,
+        },
+      ],
+      [],
+    );
+
   const filteredTransaction = transaction.filter((t) => {
     const matchesText = t.cart_product.some((cp) =>
       cp.product.name.toLowerCase().includes(filter.toLowerCase()),
     );
     return matchesText;
   });
 
+  React.useEffect(() => {
+    router.replace("/transaction");
+  });
+
   return (
     <AuthenticatedLayout>
       <Head title="Order List" />
@@ -68,6 +102,12 @@ export default function TransactionIndex({
                 </div>
               )}
             </div>
+            <div className="flex gap-2">
+              <PopupFilter
+                filterOption={filterOption}
+                setFilterQuery={setFilterQuery}
+              />
+            </div>
           </div>
           <div className="flex flex-col w-full gap-4">
             {filteredTransaction.map((t) => (