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 { Badge, Text } from '@repo/ui/components';
|
||||||
import { Activity, LayoutDashboard } from 'lucide-react';
|
import { Activity, LayoutDashboard } from 'lucide-react';
|
||||||
import { FullPageModuleConfig } from '../../domain/constants';
|
import { FullPageModuleConfig } from '../../domain/constants';
|
||||||
|
import { DataTable } from '../components/data-table';
|
||||||
|
|
||||||
export default function FullPagePageIndex() {
|
export default function FullPagePageIndex() {
|
||||||
const { t } = useEnterpriseModuleTranslationContext();
|
const { t } = useEnterpriseModuleTranslationContext();
|
||||||
@@ -40,348 +41,7 @@ export default function FullPagePageIndex() {
|
|||||||
],
|
],
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ textAlign: 'justify' }}>
|
<DataTable />
|
||||||
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>
|
|
||||||
</EnterpriseIndexPageProvider>
|
</EnterpriseIndexPageProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user