diff --git a/apps/web/src/apps/modules/example/full-page/presentation/components/data-table.tsx b/apps/web/src/apps/modules/example/full-page/presentation/components/data-table.tsx new file mode 100644 index 0000000..4076718 --- /dev/null +++ b/apps/web/src/apps/modules/example/full-page/presentation/components/data-table.tsx @@ -0,0 +1,263 @@ +import { useState, useCallback } from 'react'; +import { + Table, + Box, + Paper, + Badge, + Text, + Group, + Button, + Divider, + TextInput, + Pagination, + Select, + ScrollArea, +} from '@repo/ui/components'; +import { PageActions } from '@repo/ui/components'; +import { useEnterpriseModuleTranslationContext, useEnterpriseModuleNavigationContext } from '@repo/ui/foundations'; +import { FullPageEntity } from '../../domain/entities'; +import { Edit2, Eye, Copy, Trash2, Search, Filter, Plus, CheckCircle2, Ban } from 'lucide-react'; + +// TODO: Replace this mock data with real API data loaded from DataService via useEnterpriseModuleDataServiceContext +const MOCK_DATA: FullPageEntity[] = Array.from({ length: 50 }).map((_, i) => ({ + id: String(i + 1), + name: `Database Cluster ${i + 1}`, + code: `DB-PROD-${String(i + 1).padStart(3, '0')}`, + status: i % 7 === 0 ? 'MAINTENANCE' : i % 4 === 0 ? 'INACTIVE' : 'ACTIVE', + description: `Managed PostgreSQL cluster instance in region us-east-${(i % 3) + 1}`, +})); + +export function DataTable() { + const { t } = useEnterpriseModuleTranslationContext(); + const { navigateToDetail, navigateToEdit, navigateToDuplicate, navigateToCreate } = + useEnterpriseModuleNavigationContext(); + + const [page, setPage] = useState(1); + const [pageSize, setPageSize] = useState(10); + + const totalRecords = MOCK_DATA.length; + const totalPages = Math.ceil(totalRecords / pageSize); + const paginatedData = MOCK_DATA.slice((page - 1) * pageSize, page * pageSize); + + const getRowActions = useCallback( + (row: FullPageEntity) => [ + { + key: 'view', + label: t('common:view'), + icon: , + onClick: () => navigateToDetail(row.id as string), + }, + { + key: 'edit', + label: t('common:edit'), + icon: , + onClick: () => navigateToEdit(row.id as string), + }, + { + key: 'duplicate', + label: t('common:duplicate'), + icon: , + onClick: () => navigateToDuplicate(row.id as string), + }, + { + type: 'divider' as const, + key: 'div-1', + }, + { + key: 'delete', + label: t('common:delete'), + icon: , + intent: 'destructive' as const, + onClick: () => { + // Mock delete action + alert(`Delete ${row.name}`); + }, + }, + ], + [t, navigateToDetail, navigateToEdit, navigateToDuplicate], + ); + + const rows = paginatedData.map((item) => ( + + + + {item.code} + + + + + {item.name} + + + + + {item.status} + + + + + {item.description} + + + + + + + )); + + return ( + + {/* --- TABLE TOOLBAR --- */} + + + + } + size="sm" + radius="md" + w={280} + /> + + + + + + + + + + + + + {/* --- END TABLE TOOLBAR --- */} + + + + + + + {t('fields.code')} + + + {t('fields.name')} + + + {t('fields.status')} + + + {t('fields.description')} + + + Actions + + + + {rows} +
+ + + {/* --- PAGINATION FOOTER --- */} + + + + Showing{' '} + + {(page - 1) * pageSize + 1} + {' '} + to{' '} + + {Math.min(page * pageSize, totalRecords)} + {' '} + of{' '} + + {totalRecords} + {' '} + entries + + + + + Rows per page: + + -