From 3b979119ed76407f31135dc1b166ac38ac09d76c Mon Sep 17 00:00:00 2001
From: Hafid Nur <hafidnurazis@gmail.com>
Date: Mon, 31 Mar 2025 17:32:30 +0700
Subject: [PATCH] feat: slicing modal for backoffice 'data pengiriman hadiah'
 page

---
 .../prizes/_components/modal-process-item.tsx |  71 ++++
 apps/backoffice/src/app/prizes/page.tsx       | 306 +++++++++---------
 2 files changed, 227 insertions(+), 150 deletions(-)
 create mode 100644 apps/backoffice/src/app/prizes/_components/modal-process-item.tsx

diff --git a/apps/backoffice/src/app/prizes/_components/modal-process-item.tsx b/apps/backoffice/src/app/prizes/_components/modal-process-item.tsx
new file mode 100644
index 0000000..3472c45
--- /dev/null
+++ b/apps/backoffice/src/app/prizes/_components/modal-process-item.tsx
@@ -0,0 +1,71 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
+
+interface IModalProcessDelivery {
+  isOpen: boolean;
+  onClose: () => void;
+  onProcessDelivery?: () => void;
+}
+
+const ModalProcessDelivery = ({ isOpen, onClose }: IModalProcessDelivery) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={isOpen}
+      onClose={onClose}
+      disableEscapeKeyDown={true}
+    >
+      <Modal.Header>
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Delivery Process
+        </h2>
+        <p className="text-p3 text-neutral-400">
+          Lakukan pengiriman hadiah gacha untuk pengguna di bawah ini, jika
+          sudah ubah status menjadi “Delivered”.
+        </p>
+      </Modal.Header>
+      <Modal.Content className="flex flex-col gap-8">
+        <div className="flex flex-col gap-4">
+          <InputForm
+            label="Nama Lengkap"
+            type="text"
+            placeholder="Masukkan Nama Lengkap"
+            value="Ahmad Wiyana"
+            size="lg"
+            className="w-full"
+          />
+          <InputForm
+            label="Item yang didapatkan"
+            type="text"
+            placeholder="Masukkan Nama Item"
+            value="Lanyard + ID Card"
+            size="lg"
+            className="w-full"
+          />
+          <InputForm
+            label="Alamat Pengiriman"
+            type="text"
+            placeholder="Masukkan Alamat Pengiriman"
+            value="Jl. Pantai Cibaduyut Indah"
+            size="lg"
+            className="w-full"
+          />
+          <InputForm
+            label="Status"
+            type="text"
+            placeholder="Isi Status Pengiriman"
+            value="Lanyard + ID Card"
+            size="lg"
+            className="w-full"
+          />
+        </div>
+
+        <Button variant="primary" size="lg" className="w-full">
+          Proses Pengiriman
+        </Button>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+export default ModalProcessDelivery;
diff --git a/apps/backoffice/src/app/prizes/page.tsx b/apps/backoffice/src/app/prizes/page.tsx
index f7828c4..ffac78d 100644
--- a/apps/backoffice/src/app/prizes/page.tsx
+++ b/apps/backoffice/src/app/prizes/page.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { FC, ReactElement, useState } from 'react';
+import { FC, Fragment, ReactElement, useState } from 'react';
 import {
   FilterOutlined,
   SearchOutlined,
@@ -17,13 +17,15 @@ import {
   useReactTable,
   RowSelectionState,
 } from '@tanstack/react-table';
+import ModalProcessDelivery from './_components/modal-process-item';
 
-type Status = 'valid' | 'invalid' | 'unchecked';
+type OrderValid = 'valid' | 'invalid' | 'unchecked';
+type Status = 'undelivered' | 'delivered';
 
 interface Prize {
   id: number;
   name: string;
-  orderValid: Status;
+  orderValid: OrderValid;
   items: string;
   address: string;
   status: Status;
@@ -46,119 +48,16 @@ const mockData: Prize[] = Array.from({ length: 90 }, (_, i) => ({
     ? 'invalid'
     : i % 5 === 0
     ? 'unchecked'
-    : 'valid') as Status,
+    : 'valid') as OrderValid,
   items: items[i % items.length],
   address: 'Jl. Pantai Cibaduyut Indah',
-  status: (i % 3 === 0
-    ? 'unchecked'
-    : i % 5 === 0
-    ? 'invalid'
-    : 'valid') as Status,
+  status: (i % 3 === 0 ? 'undelivered' : 'delivered') as Status,
 }));
 
-const columns: ColumnDef<Prize>[] = [
-  {
-    id: 'select',
-    header: ({ table }) => (
-      <input
-        type="checkbox"
-        className="rounded"
-        checked={table.getIsAllRowsSelected()}
-        onChange={table.getToggleAllRowsSelectedHandler()}
-      />
-    ),
-    cell: ({ row }) => (
-      <input
-        type="checkbox"
-        className="rounded"
-        checked={row.getIsSelected()}
-        onChange={row.getToggleSelectedHandler()}
-      />
-    ),
-  },
-  {
-    header: 'No',
-    accessorKey: 'id',
-  },
-  {
-    header: 'Nama Lengkap',
-    accessorKey: 'name',
-  },
-  {
-    header: 'Order Valid?',
-    accessorKey: 'orderValid',
-    cell: ({ row }) => {
-      const status = row.original.orderValid;
-      const statusColors: Record<Status, string> = {
-        valid: 'bg-success-200 text-success-500',
-        invalid: 'bg-danger-200 text-danger-500',
-        unchecked: 'bg-warning-200 text-warning-900',
-      };
-      const statusText: Record<Status, string> = {
-        valid: 'Valid',
-        invalid: 'Invalid',
-        unchecked: 'Unchecked',
-      };
-      return (
-        <div
-          className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
-        >
-          {statusText[status]}
-        </div>
-      );
-    },
-  },
-  {
-    header: 'Items',
-    accessorKey: 'items',
-  },
-  {
-    header: 'Alamat Pengiriman',
-    accessorKey: 'address',
-  },
-  {
-    header: 'Status',
-    accessorKey: 'status',
-    cell: ({ row }) => {
-      const status = row.original.status;
-      const statusColors: Record<Status, string> = {
-        valid: 'bg-success-200 text-success-500',
-        invalid: 'bg-danger-200 text-danger-500',
-        unchecked: 'bg-warning-200 text-warning-900',
-      };
-      const statusText: Record<Status, string> = {
-        valid: 'Valid',
-        invalid: 'Invalid',
-        unchecked: 'Unchecked',
-      };
-      return (
-        <div
-          className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
-        >
-          {statusText[status]}
-        </div>
-      );
-    },
-  },
-  {
-    header: 'Action',
-    cell: ({ row }) => (
-      <Button
-        variant="primary"
-        size="sm"
-        onClick={(e) => {
-          e.stopPropagation();
-          // handleUpdate(row.id);
-        }}
-        className="flex items-center gap-2 w-full"
-      >
-        <AuditOutlined className="text-[16px]" /> Process
-      </Button>
-    ),
-  },
-];
-
 export const Components: FC = (): ReactElement => {
+  const [showModalProcessDelivery, setShowModalProcessDelivery] =
+    useState(false);
+
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
     pageSize: 9,
@@ -167,6 +66,105 @@ export const Components: FC = (): ReactElement => {
   const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
   const [showFilter, setShowFilter] = useState(false);
 
+  const columns: ColumnDef<Prize>[] = [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      header: 'No',
+      accessorKey: 'id',
+    },
+    {
+      header: 'Nama Lengkap',
+      accessorKey: 'name',
+    },
+    {
+      header: 'Order Valid?',
+      accessorKey: 'orderValid',
+      cell: ({ row }) => {
+        const status = row.original.orderValid;
+        const statusColors: Record<OrderValid, string> = {
+          valid: 'bg-success-200 text-success-500',
+          invalid: 'bg-danger-200 text-danger-500',
+          unchecked: 'bg-warning-200 text-warning-900',
+        };
+        const statusText: Record<OrderValid, string> = {
+          valid: 'Valid',
+          invalid: 'Invalid',
+          unchecked: 'Unchecked',
+        };
+        return (
+          <div
+            className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
+          >
+            {statusText[status]}
+          </div>
+        );
+      },
+    },
+    {
+      header: 'Items',
+      accessorKey: 'items',
+    },
+    {
+      header: 'Alamat Pengiriman',
+      accessorKey: 'address',
+    },
+    {
+      header: 'Status',
+      accessorKey: 'status',
+      cell: ({ row }) => {
+        const status = row.original.status;
+        const statusColors: Record<Status, string> = {
+          delivered: 'bg-success-200 text-success-500',
+          undelivered: 'bg-danger-200 text-danger-500',
+        };
+        const statusText: Record<Status, string> = {
+          delivered: 'Delivered',
+          undelivered: 'Undelivered',
+        };
+        return (
+          <div
+            className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
+          >
+            {statusText[status]}
+          </div>
+        );
+      },
+    },
+    {
+      header: 'Action',
+      cell: ({ row }) => (
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={(e) => {
+            setShowModalProcessDelivery(true);
+          }}
+          className="flex items-center gap-2 w-full"
+        >
+          <AuditOutlined className="text-[16px]" /> Process
+        </Button>
+      ),
+    },
+  ];
+
   const table = useReactTable({
     data: mockData,
     columns,
@@ -184,48 +182,56 @@ export const Components: FC = (): ReactElement => {
   });
 
   return (
-    <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
-      {/* Header */}
-      <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
-        <h1 className="text-p2 font-semibold">Data Pengiriman Hadiah</h1>
-      </header>
-
-      {/* Account Table Section */}
-      <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
-        {/* Search and Filter */}
-        <div className="flex justify-between items-center gap-8 mb-2">
-          <div className="relative w-full">
-            <Input
-              placeholder="Cari berdasarkan nama lengkap, nomor order Shopee"
-              className="pl-12 w-full max-h-full"
-            />
-            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
-              <SearchOutlined />
+    <Fragment>
+      <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
+        {/* Header */}
+        <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
+          <h1 className="text-p2 font-semibold">Data Pengiriman Hadiah</h1>
+        </header>
+        {/* Account Table Section */}
+        <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
+          {/* Search and Filter */}
+          <div className="flex justify-between items-center gap-8 mb-2">
+            <div className="relative w-full">
+              <Input
+                placeholder="Cari berdasarkan nama lengkap, nomor order Shopee"
+                className="pl-12 w-full max-h-full"
+              />
+              <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
+                <SearchOutlined />
+              </div>
+            </div>
+            <div className="relative">
+              <Button
+                variant="primary"
+                size="md"
+                className="flex items-center gap-3"
+                onClick={() => setShowFilter(!showFilter)}
+              >
+                <FilterOutlined />
+                Filters
+              </Button>
+              {showFilter && (
+                <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
+                  <Filter onClose={() => setShowFilter(false)} />
+                </div>
+              )}
             </div>
           </div>
+          {/* Table */}
+          <DataTable data={mockData} columns={columns} table={table} />
+        </section>
+      </main>
 
-          <div className="relative">
-            <Button
-              variant="primary"
-              size="md"
-              className="flex items-center gap-3"
-              onClick={() => setShowFilter(!showFilter)}
-            >
-              <FilterOutlined />
-              Filters
-            </Button>
-            {showFilter && (
-              <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
-                <Filter onClose={() => setShowFilter(false)} />
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Table */}
-        <DataTable data={mockData} columns={columns} table={table} />
-      </section>
-    </main>
+      {/* Modal Process Delivery */}
+      <ModalProcessDelivery
+        isOpen={showModalProcessDelivery}
+        onClose={() => setShowModalProcessDelivery(false)}
+        onProcessDelivery={() => {
+          console.log('Item added');
+        }}
+      />
+    </Fragment>
   );
 };