feat: Refactor datatable and pagination component and add storybook

- Refactor nama component dari datatable dan pagination mengikuti codebase
- Buat storybook untuk preview dari masing-masing komponen

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

@@ -1,68 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

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

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

@@ -1,7 +1,8 @@
 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';
+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) => ({