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

libs/ui/src/molecules/index.ts

@@ -1 +1,2 @@
 export * from './input-form';
+export * from './pagination';

libs/ui/src/molecules/pagination/index.ts

@@ -0,0 +1 @@
+export * from './pagination';

libs/ui/src/molecules/pagination/pagination.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Pagination from './pagination';
+
+import { PaginationProps } from './index'; // Import PaginationProps
+
+const meta = {
+  title: 'Molecules/Pagination',
+  component: Pagination,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+
+export const Default: StoryObj<PaginationProps> = {
+  args: {
+    currentPage: 1,
+    totalPages: 5,
+    onPageChange: (page: number) => console.log('Page changed to:', page),
+  },
+};

libs/ui/src/molecules/pagination/pagination.tsx

@@ -0,0 +1,92 @@
+import { FC, ReactElement } from 'react';
+import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+
+export 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;