feat: Draft Data Akun page

- Vibes coding untuk siapkan base dari halaman Data Akun

apps/backoffice/src/app/accounts/components/DataTable.tsx

@@ -0,0 +1,68 @@
+import { FC, ReactElement } from 'react';
+import { EditOutlined } from '@ant-design/icons';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+
+interface DataTableProps {
+  data: Array<{
+    id: number;
+    name: string;
+    email: string;
+    phone: string;
+    address: string;
+  }>;
+  onEdit: (id: number) => void;
+}
+
+export const DataTable: FC<DataTableProps> = ({
+  data,
+  onEdit,
+}): ReactElement => {
+  return (
+    <div className="w-full overflow-x-auto">
+      <table className="w-full min-w-full">
+        <thead>
+          <tr className="border-b border-gray-200">
+            <th className="p-4 text-left">
+              <input type="checkbox" className="rounded" />
+            </th>
+            <th className="p-4 text-left">No.</th>
+            <th className="p-4 text-left">Nama Lengkap</th>
+            <th className="p-4 text-left">Email</th>
+            <th className="p-4 text-left">Nomor Telp</th>
+            <th className="p-4 text-left">Alamat Pengiriman</th>
+            <th className="p-4 text-left">Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((item, index) => (
+            <tr
+              key={item.id}
+              className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}
+            >
+              <td className="p-4">
+                <input type="checkbox" className="rounded" />
+              </td>
+              <td className="p-4">{index + 1}</td>
+              <td className="p-4">{item.name}</td>
+              <td className="p-4">{item.email}</td>
+              <td className="p-4">{item.phone}</td>
+              <td className="p-4">{item.address}</td>
+              <td className="p-4">
+                <Button
+                  variant="primary"
+                  size="sm"
+                  onClick={() => onEdit(item.id)}
+                  className="flex items-center gap-1"
+                >
+                  <EditOutlined /> Edit
+                </Button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default DataTable;

apps/backoffice/src/app/accounts/components/Pagination.tsx

@@ -0,0 +1,92 @@
+import { FC, ReactElement } from 'react';
+import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+export const Pagination: FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+}): ReactElement => {
+  // Generate page numbers to display
+  const getPageNumbers = () => {
+    const pages = [];
+    const maxPagesToShow = 5;
+
+    // Always show first page
+    if (currentPage > 3) {
+      pages.push(1);
+      if (currentPage > 4) {
+        pages.push('...');
+      }
+    }
+
+    // Calculate range of pages to show around current page
+    const startPage = Math.max(1, currentPage - 1);
+    const endPage = Math.min(totalPages, currentPage + 1);
+
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+
+    // Always show last page
+    if (currentPage < totalPages - 2) {
+      if (currentPage < totalPages - 3) {
+        pages.push('...');
+      }
+      pages.push(totalPages);
+    }
+
+    return pages;
+  };
+
+  return (
+    <div className="flex items-center justify-center mt-4 gap-2">
+      <button
+        onClick={() => currentPage > 1 && onPageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+        className="p-2 rounded-md border border-gray-200 disabled:opacity-50"
+        aria-label="Previous page"
+      >
+        <LeftOutlined />
+      </button>
+
+      {getPageNumbers().map((page, index) =>
+        typeof page === 'number' ? (
+          <button
+            key={index}
+            onClick={() => onPageChange(page)}
+            className={`w-8 h-8 flex items-center justify-center rounded-md ${
+              currentPage === page
+                ? 'bg-primary-500 text-white'
+                : 'border border-gray-200 hover:bg-gray-50'
+            }`}
+          >
+            {page}
+          </button>
+        ) : (
+          <span key={index} className="px-1">
+            {page}
+          </span>
+        )
+      )}
+
+      <button
+        onClick={() =>
+          currentPage < totalPages && onPageChange(currentPage + 1)
+        }
+        disabled={currentPage === totalPages}
+        className="p-2 rounded-md border border-gray-200 disabled:opacity-50"
+        aria-label="Next page"
+      >
+        <RightOutlined />
+      </button>
+    </div>
+  );
+};
+
+export default Pagination;

apps/backoffice/src/app/accounts/components/index.ts

@@ -0,0 +1,2 @@
+export * from './DataTable';
+export * from './Pagination';

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

@@ -1,6 +1,48 @@
-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 { DataTable, Pagination } from './components';
+
+// 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 */}
@@ -8,8 +50,38 @@ export const Components: FC = (): ReactElement => {
         <h1 className="text-p2 font-semibold">Data Akun</h1>
       </header>
 
-      {/* Transaction 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">
+          <div className="relative w-full max-w-[400px]">
+            <Input
+              placeholder="Cari berdasarkan nama lengkap, email"
+              value={searchQuery}
+              onChange={handleSearch}
+              className="pl-10"
+            />
+            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
+              <SearchOutlined />
+            </div>
+          </div>
+
+          <Button variant="secondary" className="flex items-center gap-2">
+            <FilterOutlined />
+            Filters
+          </Button>
+        </div>
+
+        {/* Table */}
+        <DataTable data={currentItems} onEdit={handleEdit} />
+
+        {/* Pagination */}
+        <Pagination
+          currentPage={currentPage}
+          totalPages={Math.ceil(filteredData.length / itemsPerPage)}
+          onPageChange={handlePageChange}
+        />
+      </section>
     </main>
   );
 };