feat: add DataTable component to FullPagePageIndex and remove placeholder content
This commit is contained in:
Firman Ramdhani
@@ -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: <Eye size={14} />,
|
||||
onClick: () => navigateToDetail(row.id as string),
|
||||
},
|
||||
{
|
||||
key: 'edit',
|
||||
label: t('common:edit'),
|
||||
icon: <Edit2 size={14} />,
|
||||
onClick: () => navigateToEdit(row.id as string),
|
||||
},
|
||||
{
|
||||
key: 'duplicate',
|
||||
label: t('common:duplicate'),
|
||||
icon: <Copy size={14} />,
|
||||
onClick: () => navigateToDuplicate(row.id as string),
|
||||
},
|
||||
{
|
||||
type: 'divider' as const,
|
||||
key: 'div-1',
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
label: t('common:delete'),
|
||||
icon: <Trash2 size={14} />,
|
||||
intent: 'destructive' as const,
|
||||
onClick: () => {
|
||||
// Mock delete action
|
||||
alert(`Delete ${row.name}`);
|
||||
},
|
||||
},
|
||||
],
|
||||
[t, navigateToDetail, navigateToEdit, navigateToDuplicate],
|
||||
);
|
||||
|
||||
const rows = paginatedData.map((item) => (
|
||||
<Table.Tr key={item.id}>
|
||||
<Table.Td>
|
||||
<Text
|
||||
size="sm"
|
||||
fw={600}
|
||||
style={{ color: 'light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0))' }}
|
||||
>
|
||||
{item.code}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="sm" fw={500}>
|
||||
{item.name}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge
|
||||
variant={item.status === 'ACTIVE' ? 'light' : item.status === 'MAINTENANCE' ? 'outline' : 'dot'}
|
||||
color={item.status === 'ACTIVE' ? 'teal' : item.status === 'MAINTENANCE' ? 'orange' : 'gray'}
|
||||
size="sm"
|
||||
radius="sm"
|
||||
fw={600}
|
||||
>
|
||||
{item.status}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="sm" c="dimmed">
|
||||
{item.description}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td ta="right">
|
||||
<PageActions actions={getRowActions(item)} />
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
));
|
||||
|
||||
return (
|
||||
<Paper withBorder shadow="sm" radius="md" style={{ overflow: 'hidden' }}>
|
||||
{/* --- TABLE TOOLBAR --- */}
|
||||
<Box
|
||||
p="md"
|
||||
style={{ borderBottom: '1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-7))' }}
|
||||
>
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Group gap="sm" wrap="nowrap">
|
||||
<TextInput
|
||||
placeholder="Search items..."
|
||||
leftSection={<Search size={16} strokeWidth={2} style={{ color: 'var(--mantine-color-dimmed)' }} />}
|
||||
size="sm"
|
||||
radius="md"
|
||||
w={280}
|
||||
/>
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
radius="md"
|
||||
leftSection={<Filter size={16} strokeWidth={2} style={{ color: 'var(--mantine-color-dimmed)' }} />}
|
||||
>
|
||||
Filters
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
<Group gap="sm" wrap="nowrap">
|
||||
<Group gap="xs">
|
||||
<Button
|
||||
variant="light"
|
||||
color="teal"
|
||||
size="sm"
|
||||
radius="md"
|
||||
leftSection={<CheckCircle2 size={14} strokeWidth={2.5} />}
|
||||
>
|
||||
Activate
|
||||
</Button>
|
||||
<Button
|
||||
variant="light"
|
||||
color="gray"
|
||||
size="sm"
|
||||
radius="md"
|
||||
leftSection={<Ban size={14} strokeWidth={2.5} />}
|
||||
>
|
||||
Deactivate
|
||||
</Button>
|
||||
<Button
|
||||
variant="light"
|
||||
color="red"
|
||||
size="sm"
|
||||
radius="md"
|
||||
leftSection={<Trash2 size={14} strokeWidth={2.5} />}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
</Group>
|
||||
</Box>
|
||||
{/* --- END TABLE TOOLBAR --- */}
|
||||
|
||||
<ScrollArea.Autosize mah="calc(100vh - 350px)" offsetScrollbars>
|
||||
<Table
|
||||
stickyHeader
|
||||
stickyHeaderOffset={-1}
|
||||
striped
|
||||
highlightOnHover
|
||||
verticalSpacing="sm"
|
||||
horizontalSpacing="md"
|
||||
>
|
||||
<Table.Thead bg="light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8))">
|
||||
<Table.Tr>
|
||||
<Table.Th fw={700} style={{ letterSpacing: '0.5px', textTransform: 'uppercase' }} fz="xs" c="dimmed">
|
||||
{t('fields.code')}
|
||||
</Table.Th>
|
||||
<Table.Th fw={700} style={{ letterSpacing: '0.5px', textTransform: 'uppercase' }} fz="xs" c="dimmed">
|
||||
{t('fields.name')}
|
||||
</Table.Th>
|
||||
<Table.Th fw={700} style={{ letterSpacing: '0.5px', textTransform: 'uppercase' }} fz="xs" c="dimmed">
|
||||
{t('fields.status')}
|
||||
</Table.Th>
|
||||
<Table.Th fw={700} style={{ letterSpacing: '0.5px', textTransform: 'uppercase' }} fz="xs" c="dimmed">
|
||||
{t('fields.description')}
|
||||
</Table.Th>
|
||||
<Table.Th
|
||||
fw={700}
|
||||
style={{ letterSpacing: '0.5px', textTransform: 'uppercase' }}
|
||||
fz="xs"
|
||||
c="dimmed"
|
||||
w={80}
|
||||
ta="right"
|
||||
>
|
||||
Actions
|
||||
</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>{rows}</Table.Tbody>
|
||||
</Table>
|
||||
</ScrollArea.Autosize>
|
||||
|
||||
{/* --- PAGINATION FOOTER --- */}
|
||||
<Box
|
||||
p="md"
|
||||
style={{ borderTop: '1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-7))' }}
|
||||
>
|
||||
<Group justify="space-between" align="center">
|
||||
<Text size="sm" c="dimmed" fw={500}>
|
||||
Showing{' '}
|
||||
<Text span fw={600} c="var(--mantine-color-text)">
|
||||
{(page - 1) * pageSize + 1}
|
||||
</Text>{' '}
|
||||
to{' '}
|
||||
<Text span fw={600} c="var(--mantine-color-text)">
|
||||
{Math.min(page * pageSize, totalRecords)}
|
||||
</Text>{' '}
|
||||
of{' '}
|
||||
<Text span fw={600} c="var(--mantine-color-text)">
|
||||
{totalRecords}
|
||||
</Text>{' '}
|
||||
entries
|
||||
</Text>
|
||||
<Group gap="md">
|
||||
<Group gap="xs">
|
||||
<Text size="sm" c="dimmed" fw={500}>
|
||||
Rows per page:
|
||||
</Text>
|
||||
<Select
|
||||
size="sm"
|
||||
radius="md"
|
||||
data={['10', '20', '50']}
|
||||
value={String(pageSize)}
|
||||
onChange={(val) => {
|
||||
setPageSize(Number(val));
|
||||
setPage(1);
|
||||
}}
|
||||
w={75}
|
||||
/>
|
||||
</Group>
|
||||
<Pagination total={totalPages} value={page} onChange={setPage} size="sm" radius="md" color="indigo" />
|
||||
</Group>
|
||||
</Group>
|
||||
</Box>
|
||||
{/* --- END PAGINATION FOOTER --- */}
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
-131
@@ -1,131 +0,0 @@
|
||||
import { Paper, SimpleGrid, Box, Text, Group, Badge, Divider, Breadcrumbs, Anchor, Flex, Title, ActionIcon, Button } from '@repo/ui/components';
|
||||
import { useEnterpriseModuleTranslationContext } from '@repo/ui/foundations';
|
||||
import { ChevronRight, CheckCircle2, Trash2, Edit2, Play } from 'lucide-react';
|
||||
|
||||
export default function FullPagePageDetail() {
|
||||
const { t } = useEnterpriseModuleTranslationContext();
|
||||
|
||||
return (
|
||||
<Box pb="xl">
|
||||
{/* --- INLINED PAGE HEADER --- */}
|
||||
<Box mb="xl" mt="xs">
|
||||
<Breadcrumbs
|
||||
mb="md"
|
||||
separator={<ChevronRight size={12} strokeWidth={3} style={{ color: 'var(--mantine-color-gray-5)' }} />}
|
||||
>
|
||||
<Anchor href="#" c="dimmed" size="xs" fw={500} style={{ transition: 'color 0.2s ease', letterSpacing: '0.2px' }}>
|
||||
Acme Corp
|
||||
</Anchor>
|
||||
<Anchor href="#" c="dimmed" size="xs" fw={500} style={{ transition: 'color 0.2s ease', letterSpacing: '0.2px' }}>
|
||||
Infrastructure
|
||||
</Anchor>
|
||||
<Anchor href="#" c="dimmed" size="xs" fw={500} style={{ transition: 'color 0.2s ease', letterSpacing: '0.2px' }}>
|
||||
Database Clusters
|
||||
</Anchor>
|
||||
<Text size="xs" fw={600} style={{ color: 'light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0))', letterSpacing: '0.2px' }}>
|
||||
prod-db-01
|
||||
</Text>
|
||||
</Breadcrumbs>
|
||||
|
||||
<Group justify="space-between" align="center" wrap="nowrap">
|
||||
<Flex gap="md" align="center">
|
||||
<Box>
|
||||
<Group gap="xs" align="center" mb={4}>
|
||||
<Title
|
||||
order={2}
|
||||
fw={600}
|
||||
style={{
|
||||
color: 'light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0))',
|
||||
letterSpacing: '-0.3px',
|
||||
}}
|
||||
>
|
||||
prod-db-01
|
||||
</Title>
|
||||
<Badge
|
||||
variant="light"
|
||||
color="teal"
|
||||
size="sm"
|
||||
radius="sm"
|
||||
fw={600}
|
||||
leftSection={<CheckCircle2 size={10} strokeWidth={3} />}
|
||||
style={{ textTransform: 'capitalize' }}
|
||||
>
|
||||
Running
|
||||
</Badge>
|
||||
</Group>
|
||||
|
||||
<Text size="sm" c="dimmed" fw={400}>
|
||||
PostgreSQL v15.4 · <Text span fw={500} c="var(--mantine-color-text)">us-east-1</Text> · Created Oct 12, 2023
|
||||
</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
|
||||
<Group gap="sm">
|
||||
<ActionIcon variant="light" color="red" size="lg" radius="md" aria-label="Delete">
|
||||
<Trash2 size={18} strokeWidth={2} />
|
||||
</ActionIcon>
|
||||
<Button
|
||||
variant="default"
|
||||
radius="md"
|
||||
leftSection={<Edit2 size={16} strokeWidth={2} style={{ color: 'var(--mantine-color-dimmed)' }} />}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
variant="filled"
|
||||
color="indigo"
|
||||
radius="md"
|
||||
leftSection={<Play size={16} strokeWidth={2.5} />}
|
||||
style={{ boxShadow: '0 4px 14px 0 rgba(76, 110, 245, 0.39)' }}
|
||||
>
|
||||
Restart
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
|
||||
<Divider mt={28} mb={0} color="light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))" />
|
||||
</Box>
|
||||
{/* --- END INLINED PAGE HEADER --- */}
|
||||
|
||||
<Paper withBorder shadow="sm" radius="md" p="xl">
|
||||
<Text size="lg" fw={600} mb="xs" style={{ color: 'light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0))', letterSpacing: '-0.3px' }}>
|
||||
General Information
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed" mb="xl">
|
||||
View the complete details and configuration for this entity.
|
||||
</Text>
|
||||
|
||||
<Divider mb="xl" color="light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))" />
|
||||
|
||||
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="xl" verticalSpacing="xl">
|
||||
<Box>
|
||||
<Text size="xs" tt="uppercase" fw={700} c="dimmed" mb={4} style={{ letterSpacing: '0.5px' }}>
|
||||
{t('fields.code')}
|
||||
</Text>
|
||||
<Text size="sm" fw={500}>WID-001</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size="xs" tt="uppercase" fw={700} c="dimmed" mb={4} style={{ letterSpacing: '0.5px' }}>
|
||||
{t('fields.name')}
|
||||
</Text>
|
||||
<Text size="sm" fw={500}>Dashboard Widget</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size="xs" tt="uppercase" fw={700} c="dimmed" mb={4} style={{ letterSpacing: '0.5px' }}>
|
||||
{t('fields.status')}
|
||||
</Text>
|
||||
<Badge variant="light" color="teal" size="sm" radius="sm" fw={600}>
|
||||
ACTIVE
|
||||
</Badge>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size="xs" tt="uppercase" fw={700} c="dimmed" mb={4} style={{ letterSpacing: '0.5px' }}>
|
||||
{t('fields.description')}
|
||||
</Text>
|
||||
<Text size="sm" fw={500}>Main dashboard widget</Text>
|
||||
</Box>
|
||||
</SimpleGrid>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
-110
@@ -1,110 +0,0 @@
|
||||
import { Paper, Box, Text, Divider, TextInput, Select, Textarea, Stack, Breadcrumbs, Anchor, Flex, Title, Button, Group } from '@repo/ui/components';
|
||||
import { useEnterpriseModuleTranslationContext } from '@repo/ui/foundations';
|
||||
import { ChevronRight, Database } from 'lucide-react';
|
||||
|
||||
export default function FullPagePageForm({ formPageType }: { formPageType: 'edit' | 'create' | 'duplicate' }) {
|
||||
const { t } = useEnterpriseModuleTranslationContext();
|
||||
|
||||
return (
|
||||
<Box pb="xl">
|
||||
{/* --- INLINED PAGE HEADER --- */}
|
||||
<Box mb="xl" mt="xs">
|
||||
<Breadcrumbs
|
||||
mb="md"
|
||||
separator={<ChevronRight size={12} strokeWidth={3} style={{ color: 'var(--mantine-color-gray-5)' }} />}
|
||||
>
|
||||
<Anchor href="#" c="dimmed" size="xs" fw={500} style={{ transition: 'color 0.2s ease', letterSpacing: '0.2px' }}>
|
||||
Database Clusters
|
||||
</Anchor>
|
||||
<Text size="xs" fw={600} style={{ color: 'light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0))', letterSpacing: '0.2px' }}>
|
||||
{formPageType === 'create' ? 'Create Cluster' : 'Edit Cluster'}
|
||||
</Text>
|
||||
</Breadcrumbs>
|
||||
|
||||
<Group justify="space-between" align="center" wrap="nowrap">
|
||||
<Flex gap="md" align="center">
|
||||
<Box>
|
||||
<Title
|
||||
order={2}
|
||||
fw={600}
|
||||
mb={4}
|
||||
style={{
|
||||
color: 'light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0))',
|
||||
letterSpacing: '-0.3px',
|
||||
}}
|
||||
>
|
||||
{formPageType === 'create' ? 'Create New Cluster' : 'Edit Cluster Configuration'}
|
||||
</Title>
|
||||
<Text size="sm" c="dimmed" fw={400}>
|
||||
Configure and provision a new highly available database cluster.
|
||||
</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
|
||||
<Group gap="sm">
|
||||
<Button variant="default" radius="md">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="filled"
|
||||
color="indigo"
|
||||
radius="md"
|
||||
leftSection={<Database size={16} strokeWidth={2.5} />}
|
||||
style={{ boxShadow: '0 4px 14px 0 rgba(76, 110, 245, 0.39)' }}
|
||||
>
|
||||
{formPageType === 'create' ? 'Deploy Cluster' : 'Save Changes'}
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
|
||||
<Divider mt={28} mb={0} color="light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))" />
|
||||
</Box>
|
||||
{/* --- END INLINED PAGE HEADER --- */}
|
||||
|
||||
<Paper withBorder shadow="sm" radius="md" p="xl">
|
||||
<Text size="lg" fw={600} mb="xs" style={{ color: 'light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0))', letterSpacing: '-0.3px' }}>
|
||||
{formPageType === 'create' ? 'Create Entity' : 'Edit Entity'}
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed" mb="xl">
|
||||
Fill in the required information to configure your entity properly. Fields marked with * are required.
|
||||
</Text>
|
||||
|
||||
<Divider mb="xl" color="light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))" />
|
||||
|
||||
<Box maw={600}>
|
||||
<Stack gap="lg">
|
||||
<TextInput
|
||||
label={t('fields.code')}
|
||||
placeholder="e.g. WID-001"
|
||||
required
|
||||
defaultValue={formPageType === 'edit' ? 'WID-001' : ''}
|
||||
radius="md"
|
||||
/>
|
||||
<TextInput
|
||||
label={t('fields.name')}
|
||||
placeholder="e.g. Dashboard Widget"
|
||||
required
|
||||
defaultValue={formPageType === 'edit' ? 'Dashboard Widget' : ''}
|
||||
radius="md"
|
||||
/>
|
||||
<Select
|
||||
label={t('fields.status')}
|
||||
placeholder="Select status"
|
||||
data={['ACTIVE', 'INACTIVE']}
|
||||
defaultValue="ACTIVE"
|
||||
required
|
||||
radius="md"
|
||||
/>
|
||||
<Textarea
|
||||
label={t('fields.description')}
|
||||
placeholder="Enter a detailed description..."
|
||||
minRows={4}
|
||||
defaultValue={formPageType === 'edit' ? 'Main dashboard widget' : ''}
|
||||
radius="md"
|
||||
/>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
-424
@@ -1,424 +0,0 @@
|
||||
import { useState, useCallback } from 'react';
|
||||
import {
|
||||
Table,
|
||||
Box,
|
||||
Paper,
|
||||
Badge,
|
||||
Text,
|
||||
Breadcrumbs,
|
||||
Anchor,
|
||||
Group,
|
||||
Flex,
|
||||
ThemeIcon,
|
||||
Title,
|
||||
ActionIcon,
|
||||
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,
|
||||
ChevronRight,
|
||||
Database,
|
||||
Activity,
|
||||
MoreHorizontal,
|
||||
Settings,
|
||||
Play,
|
||||
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 default function FullPagePageIndex() {
|
||||
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: <Eye size={14} />,
|
||||
onClick: () => navigateToDetail(row.id as string),
|
||||
},
|
||||
{
|
||||
key: 'edit',
|
||||
label: t('common:edit'),
|
||||
icon: <Edit2 size={14} />,
|
||||
onClick: () => navigateToEdit(row.id as string),
|
||||
},
|
||||
{
|
||||
key: 'duplicate',
|
||||
label: t('common:duplicate'),
|
||||
icon: <Copy size={14} />,
|
||||
onClick: () => navigateToDuplicate(row.id as string),
|
||||
},
|
||||
{
|
||||
type: 'divider' as const,
|
||||
key: 'div-1',
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
label: t('common:delete'),
|
||||
icon: <Trash2 size={14} />,
|
||||
intent: 'destructive' as const,
|
||||
onClick: () => {
|
||||
// Mock delete action
|
||||
alert(`Delete ${row.name}`);
|
||||
},
|
||||
},
|
||||
],
|
||||
[t, navigateToDetail, navigateToEdit, navigateToDuplicate],
|
||||
);
|
||||
|
||||
const rows = paginatedData.map((item) => (
|
||||
<Table.Tr key={item.id}>
|
||||
<Table.Td>
|
||||
<Text
|
||||
size="sm"
|
||||
fw={600}
|
||||
style={{ color: 'light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0))' }}
|
||||
>
|
||||
{item.code}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="sm" fw={500}>
|
||||
{item.name}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge
|
||||
variant={item.status === 'ACTIVE' ? 'light' : item.status === 'MAINTENANCE' ? 'outline' : 'dot'}
|
||||
color={item.status === 'ACTIVE' ? 'teal' : item.status === 'MAINTENANCE' ? 'orange' : 'gray'}
|
||||
size="sm"
|
||||
radius="sm"
|
||||
fw={600}
|
||||
>
|
||||
{item.status}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="sm" c="dimmed">
|
||||
{item.description}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td ta="right">
|
||||
<PageActions actions={getRowActions(item)} />
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
));
|
||||
|
||||
return (
|
||||
<Box pb="xl">
|
||||
{/* --- INLINED PAGE HEADER --- */}
|
||||
<Box mb="xl" mt="xs">
|
||||
<Breadcrumbs
|
||||
mb="md"
|
||||
separator={<ChevronRight size={12} strokeWidth={3} style={{ color: 'var(--mantine-color-gray-5)' }} />}
|
||||
>
|
||||
<Anchor
|
||||
href="#"
|
||||
c="dimmed"
|
||||
size="xs"
|
||||
fw={500}
|
||||
style={{ transition: 'color 0.2s ease', letterSpacing: '0.2px' }}
|
||||
>
|
||||
Acme Corp
|
||||
</Anchor>
|
||||
<Anchor
|
||||
href="#"
|
||||
c="dimmed"
|
||||
size="xs"
|
||||
fw={500}
|
||||
style={{ transition: 'color 0.2s ease', letterSpacing: '0.2px' }}
|
||||
>
|
||||
Infrastructure
|
||||
</Anchor>
|
||||
<Text
|
||||
size="xs"
|
||||
fw={600}
|
||||
style={{
|
||||
color: 'light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0))',
|
||||
letterSpacing: '0.2px',
|
||||
}}
|
||||
>
|
||||
Database Clusters
|
||||
</Text>
|
||||
</Breadcrumbs>
|
||||
|
||||
<Group justify="space-between" align="center" wrap="nowrap">
|
||||
<Flex gap="md" align="center">
|
||||
<ThemeIcon
|
||||
size={54}
|
||||
radius="md"
|
||||
variant="light"
|
||||
color="indigo"
|
||||
style={{
|
||||
border: '1px solid light-dark(var(--mantine-color-indigo-1), var(--mantine-color-indigo-9))',
|
||||
boxShadow: '0 4px 12px rgba(0,0,0,0.03)',
|
||||
}}
|
||||
>
|
||||
<Database size={26} strokeWidth={1.5} />
|
||||
</ThemeIcon>
|
||||
|
||||
<Box>
|
||||
<Group gap="xs" align="center" mb={4}>
|
||||
<Title
|
||||
order={2}
|
||||
fw={600}
|
||||
style={{
|
||||
color: 'light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0))',
|
||||
letterSpacing: '-0.3px',
|
||||
}}
|
||||
>
|
||||
PostgreSQL Primary
|
||||
</Title>
|
||||
<Badge
|
||||
variant="light"
|
||||
color="teal"
|
||||
size="sm"
|
||||
radius="sm"
|
||||
fw={600}
|
||||
leftSection={<Activity size={10} strokeWidth={3} />}
|
||||
style={{ textTransform: 'capitalize' }}
|
||||
>
|
||||
Healthy
|
||||
</Badge>
|
||||
<Badge variant="outline" color="gray" size="sm" radius="sm" fw={600} style={{ textTransform: 'none' }}>
|
||||
v15.4
|
||||
</Badge>
|
||||
</Group>
|
||||
|
||||
<Text size="sm" c="dimmed" fw={400}>
|
||||
Managed relational database cluster in{' '}
|
||||
<Text span fw={500} c="var(--mantine-color-text)">
|
||||
us-east-1
|
||||
</Text>{' '}
|
||||
region. Last automated backup was 2 hours ago.
|
||||
</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
|
||||
<Group gap="sm">
|
||||
<ActionIcon variant="default" size="lg" radius="md" aria-label="More Options">
|
||||
<MoreHorizontal size={18} strokeWidth={2} style={{ color: 'var(--mantine-color-dimmed)' }} />
|
||||
</ActionIcon>
|
||||
<Button
|
||||
variant="default"
|
||||
radius="md"
|
||||
leftSection={<Settings size={16} strokeWidth={2} style={{ color: 'var(--mantine-color-dimmed)' }} />}
|
||||
>
|
||||
Configure
|
||||
</Button>
|
||||
<Button
|
||||
variant="filled"
|
||||
color="indigo"
|
||||
radius="md"
|
||||
leftSection={<Play size={16} strokeWidth={2.5} />}
|
||||
style={{ boxShadow: '0 4px 14px 0 rgba(76, 110, 245, 0.39)' }}
|
||||
>
|
||||
Start Cluster
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
|
||||
<Divider mt={28} mb={0} color="light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))" />
|
||||
</Box>
|
||||
{/* --- END INLINED PAGE HEADER --- */}
|
||||
|
||||
<Paper withBorder shadow="sm" radius="md" style={{ overflow: 'hidden' }}>
|
||||
{/* --- TABLE TOOLBAR --- */}
|
||||
<Box
|
||||
p="md"
|
||||
style={{ borderBottom: '1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-7))' }}
|
||||
>
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Group gap="sm" wrap="nowrap">
|
||||
<TextInput
|
||||
placeholder="Search items..."
|
||||
leftSection={<Search size={16} strokeWidth={2} style={{ color: 'var(--mantine-color-dimmed)' }} />}
|
||||
size="sm"
|
||||
radius="md"
|
||||
w={280}
|
||||
/>
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
radius="md"
|
||||
leftSection={<Filter size={16} strokeWidth={2} style={{ color: 'var(--mantine-color-dimmed)' }} />}
|
||||
>
|
||||
Filters
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
<Group gap="sm" wrap="nowrap">
|
||||
<Group gap="xs">
|
||||
<Text size="sm" c="dimmed" fw={500} mr="xs">
|
||||
Bulk Actions:
|
||||
</Text>
|
||||
<Button
|
||||
variant="light"
|
||||
color="teal"
|
||||
size="sm"
|
||||
radius="md"
|
||||
leftSection={<CheckCircle2 size={14} strokeWidth={2.5} />}
|
||||
>
|
||||
Activate
|
||||
</Button>
|
||||
<Button
|
||||
variant="light"
|
||||
color="gray"
|
||||
size="sm"
|
||||
radius="md"
|
||||
leftSection={<Ban size={14} strokeWidth={2.5} />}
|
||||
>
|
||||
Deactivate
|
||||
</Button>
|
||||
<Button
|
||||
variant="light"
|
||||
color="red"
|
||||
size="sm"
|
||||
radius="md"
|
||||
leftSection={<Trash2 size={14} strokeWidth={2.5} />}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
<Divider
|
||||
orientation="vertical"
|
||||
mx="xs"
|
||||
color="light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-6))"
|
||||
/>
|
||||
|
||||
<Button
|
||||
variant="filled"
|
||||
color="indigo"
|
||||
size="sm"
|
||||
radius="md"
|
||||
leftSection={<Plus size={16} strokeWidth={2.5} />}
|
||||
onClick={navigateToCreate}
|
||||
style={{ boxShadow: '0 4px 12px 0 rgba(76, 110, 245, 0.28)' }}
|
||||
>
|
||||
Create New
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
</Box>
|
||||
{/* --- END TABLE TOOLBAR --- */}
|
||||
|
||||
<ScrollArea.Autosize mah="calc(100vh - 350px)" offsetScrollbars>
|
||||
<Table
|
||||
stickyHeader
|
||||
stickyHeaderOffset={-1}
|
||||
striped
|
||||
highlightOnHover
|
||||
verticalSpacing="sm"
|
||||
horizontalSpacing="md"
|
||||
>
|
||||
<Table.Thead bg="light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8))">
|
||||
<Table.Tr>
|
||||
<Table.Th fw={700} style={{ letterSpacing: '0.5px', textTransform: 'uppercase' }} fz="xs" c="dimmed">
|
||||
{t('fields.code')}
|
||||
</Table.Th>
|
||||
<Table.Th fw={700} style={{ letterSpacing: '0.5px', textTransform: 'uppercase' }} fz="xs" c="dimmed">
|
||||
{t('fields.name')}
|
||||
</Table.Th>
|
||||
<Table.Th fw={700} style={{ letterSpacing: '0.5px', textTransform: 'uppercase' }} fz="xs" c="dimmed">
|
||||
{t('fields.status')}
|
||||
</Table.Th>
|
||||
<Table.Th fw={700} style={{ letterSpacing: '0.5px', textTransform: 'uppercase' }} fz="xs" c="dimmed">
|
||||
{t('fields.description')}
|
||||
</Table.Th>
|
||||
<Table.Th
|
||||
fw={700}
|
||||
style={{ letterSpacing: '0.5px', textTransform: 'uppercase' }}
|
||||
fz="xs"
|
||||
c="dimmed"
|
||||
w={80}
|
||||
ta="right"
|
||||
>
|
||||
Actions
|
||||
</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>{rows}</Table.Tbody>
|
||||
</Table>
|
||||
</ScrollArea.Autosize>
|
||||
|
||||
{/* --- PAGINATION FOOTER --- */}
|
||||
<Box
|
||||
p="md"
|
||||
style={{ borderTop: '1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-7))' }}
|
||||
>
|
||||
<Group justify="space-between" align="center">
|
||||
<Text size="sm" c="dimmed" fw={500}>
|
||||
Showing{' '}
|
||||
<Text span fw={600} c="var(--mantine-color-text)">
|
||||
{(page - 1) * pageSize + 1}
|
||||
</Text>{' '}
|
||||
to{' '}
|
||||
<Text span fw={600} c="var(--mantine-color-text)">
|
||||
{Math.min(page * pageSize, totalRecords)}
|
||||
</Text>{' '}
|
||||
of{' '}
|
||||
<Text span fw={600} c="var(--mantine-color-text)">
|
||||
{totalRecords}
|
||||
</Text>{' '}
|
||||
entries
|
||||
</Text>
|
||||
<Group gap="md">
|
||||
<Group gap="xs">
|
||||
<Text size="sm" c="dimmed" fw={500}>
|
||||
Rows per page:
|
||||
</Text>
|
||||
<Select
|
||||
size="sm"
|
||||
radius="md"
|
||||
data={['10', '20', '50']}
|
||||
value={String(pageSize)}
|
||||
onChange={(val) => {
|
||||
setPageSize(Number(val));
|
||||
setPage(1);
|
||||
}}
|
||||
w={75}
|
||||
/>
|
||||
</Group>
|
||||
<Pagination total={totalPages} value={page} onChange={setPage} size="sm" radius="md" color="indigo" />
|
||||
</Group>
|
||||
</Group>
|
||||
</Box>
|
||||
{/* --- END PAGINATION FOOTER --- */}
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
+2
-342
@@ -3,6 +3,7 @@ import { Trans } from '@repo/core-i18n';
|
||||
import { Badge, Text } from '@repo/ui/components';
|
||||
import { Activity, LayoutDashboard } from 'lucide-react';
|
||||
import { FullPageModuleConfig } from '../../domain/constants';
|
||||
import { DataTable } from '../components/data-table';
|
||||
|
||||
export default function FullPagePageIndex() {
|
||||
const { t } = useEnterpriseModuleTranslationContext();
|
||||
@@ -40,348 +41,7 @@ export default function FullPagePageIndex() {
|
||||
],
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<div style={{ textAlign: 'justify' }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae aut minus doloremque mollitia quis,
|
||||
consequatur enim dolorum sunt itaque quia perferendis cumque accusantium reprehenderit laboriosam, voluptate,
|
||||
voluptas voluptates neque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis dolorum
|
||||
excepturi sunt. Omnis eaque, laborum adipisci unde est architecto deserunt fugit eos pariatur dicta? Cumque
|
||||
autem repellat distinctio ullam necessitatibus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
|
||||
placeat voluptas, aliquam non delectus ratione labore illo, ipsa voluptate exercitationem repellendus
|
||||
consequatur blanditiis ullam autem excepturi molestias porro velit facere.
|
||||
</div>
|
||||
<DataTable />
|
||||
</EnterpriseIndexPageProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user