feat: Draft transaction page

apps/backoffice/src/app/accounts/page.tsx

@@ -46,7 +46,7 @@ export const Components: FC = (): ReactElement => {
 
   return (
     <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
-      {/* Dashboard Header */}
+      {/* Header */}
       <header className="bg-white py-4 px-8 rounded-md shadow p-4">
         <h1 className="text-p2 font-semibold">Data Akun</h1>
       </header>

apps/backoffice/src/app/transactions/page.tsx

@@ -1,17 +1,92 @@
-import { ArrowDownOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { FC, ReactElement } from 'react';
+import { FC, ReactElement, useState } from 'react';
+import { FilterOutlined, SearchOutlined } from '@ant-design/icons';
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+import { Pagination } from '@imphnen-frontend-service/ui/molecules';
+import { DataTable } from '@imphnen-frontend-service/ui/organisms';
+
+// Mock data for demonstration
+const mockData = Array.from({ length: 20 }, (_, i) => ({
+  id: i + 1,
+  name: i === 0 ? 'Ahmad Wijuana' : 'Nama Lengkap',
+  email: 'Fullname23@gmail.com',
+  phone: '081904423804',
+  address: 'Jl. Pantai Cibaduyut Indonesia',
+}));
 
 export const Components: FC = (): ReactElement => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 9;
+
+  // Filter data based on search query
+  const filteredData = mockData.filter(
+    (item) =>
+      item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      item.email.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  // Paginate data
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentItems = filteredData.slice(indexOfFirstItem, indexOfLastItem);
+
+  const handleEdit = (id: number) => {
+    console.log(`Edit item with id: ${id}`);
+    // Implement edit functionality
+  };
+
+  const handlePageChange = (pageNumber: number) => {
+    setCurrentPage(pageNumber);
+  };
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+    setCurrentPage(1); // Reset to first page when searching
+  };
+
   return (
     <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
-      {/* Dashboard Header */}
+      {/* Header */}
       <header className="bg-white py-4 px-8 rounded-md shadow p-4">
         <h1 className="text-p2 font-semibold">Validasi Transaksi</h1>
       </header>
 
-      {/* Accounts Table Section */}
-      <div className="flex justify-between gap-[40px] p-8 bg-white rounded-md"></div>
+      {/* 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"
+              value={searchQuery}
+              onChange={handleSearch}
+              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>
+
+          <Button
+            variant="primary"
+            size="md"
+            className="flex items-center gap-3"
+          >
+            <FilterOutlined />
+            Filters
+          </Button>
+        </div>
+
+        {/* Table */}
+        <DataTable data={currentItems} onEdit={handleEdit} />
+
+        {/* Pagination */}
+        <Pagination
+          currentPage={currentPage}
+          totalPages={Math.ceil(filteredData.length / itemsPerPage)}
+          onPageChange={handlePageChange}
+        />
+      </section>
     </main>
   );
 };