upd: tampilan
This commit is contained in:
278
src/frontend/routes/apps.$appId.manage.tsx
Normal file
278
src/frontend/routes/apps.$appId.manage.tsx
Normal file
@@ -0,0 +1,278 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
Badge,
|
||||
Container,
|
||||
Group,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
Paper,
|
||||
Table,
|
||||
Button,
|
||||
ActionIcon,
|
||||
TextInput,
|
||||
Select,
|
||||
Tooltip,
|
||||
SimpleGrid,
|
||||
Modal,
|
||||
Avatar,
|
||||
Box,
|
||||
NumberInput,
|
||||
} from '@mantine/core'
|
||||
import { useDisclosure } from '@mantine/hooks'
|
||||
import { createFileRoute, useParams } from '@tanstack/react-router'
|
||||
import {
|
||||
TbPlus,
|
||||
TbSearch,
|
||||
TbPencil,
|
||||
TbTrash,
|
||||
TbUserPlus,
|
||||
TbCircleCheck,
|
||||
TbRefresh,
|
||||
TbUser,
|
||||
TbBuildingCommunity,
|
||||
} from 'react-icons/tb'
|
||||
import { StatsCard } from '@/frontend/components/StatsCard'
|
||||
|
||||
export const Route = createFileRoute('/apps/$appId/manage')({
|
||||
component: AppManagePage,
|
||||
})
|
||||
|
||||
const mockDevelopers = [
|
||||
{ value: 'john-doe', label: 'John Doe', avatar: null },
|
||||
{ value: 'amel', label: 'Amel', avatar: null },
|
||||
{ value: 'jane-smith', label: 'Jane Smith', avatar: null },
|
||||
{ value: 'rahmat', label: 'Rahmat Hidayat', avatar: null },
|
||||
]
|
||||
|
||||
function AppManagePage() {
|
||||
const { appId } = useParams({ from: '/apps/$appId' })
|
||||
const [initModalOpened, { open: openInit, close: closeInit }] = useDisclosure(false)
|
||||
const [assignModalOpened, { open: openAssign, close: closeAssign }] = useDisclosure(false)
|
||||
const [selectedVillage, setSelectedVillage] = useState<any>(null)
|
||||
|
||||
const isDesaPlus = appId === 'desa-plus'
|
||||
|
||||
const mockVillages = [
|
||||
{ id: 1, name: 'Sukatani', kecamatan: 'Tapos', population: 4500, status: 'fully integrated', developer: 'John Doe', lastUpdate: '2 mins ago' },
|
||||
{ id: 2, name: 'Sukamaju', kecamatan: 'Cilodong', population: 3800, status: 'sync active', developer: 'Amel', lastUpdate: '15 mins ago' },
|
||||
{ id: 3, name: 'Cikini', kecamatan: 'Menteng', population: 2100, status: 'sync pending', developer: 'Jane Smith', lastUpdate: '-' },
|
||||
{ id: 4, name: 'Bojong Gede', kecamatan: 'Bojong Gede', population: 6700, status: 'fully integrated', developer: 'Rahmat', lastUpdate: '1 hour ago' },
|
||||
]
|
||||
|
||||
if (!isDesaPlus) {
|
||||
return (
|
||||
<Container size="xl" py="xl">
|
||||
<Paper p="xl" radius="xl" className="glass" style={{ textAlign: 'center' }}>
|
||||
<TbBuildingCommunity size={48} color="gray" opacity={0.5} />
|
||||
<Title order={3} mt="md">General Management</Title>
|
||||
<Text c="dimmed">This feature is currently customized for Desa+. Other apps coming soon.</Text>
|
||||
</Paper>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack gap="xl">
|
||||
{/* Metrics Row */}
|
||||
<SimpleGrid cols={{ base: 1, sm: 4 }} spacing="lg">
|
||||
<StatsCard
|
||||
title="Total Integrations"
|
||||
value={140}
|
||||
icon={TbBuildingCommunity}
|
||||
color="brand-blue"
|
||||
trend={{ value: '12%', positive: true }}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Daily Sync Rate"
|
||||
value="94.2%"
|
||||
icon={TbRefresh}
|
||||
color="teal"
|
||||
trend={{ value: '2.5%', positive: true }}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Avg. Sync Delay"
|
||||
value="45s"
|
||||
icon={TbRefresh}
|
||||
color="orange"
|
||||
/>
|
||||
<StatsCard
|
||||
title="Pending Documents"
|
||||
value={124}
|
||||
icon={TbUser}
|
||||
color="red"
|
||||
/>
|
||||
</SimpleGrid>
|
||||
|
||||
<Group justify="space-between" align="flex-end">
|
||||
<Stack gap={0}>
|
||||
<Title order={3}>Village Deployment Center</Title>
|
||||
<Text size="sm" c="dimmed">Monitor and configure **Desa+** village instances across all districts.</Text>
|
||||
</Stack>
|
||||
<Button
|
||||
variant="gradient"
|
||||
gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
|
||||
leftSection={<TbPlus size={18} />}
|
||||
radius="md"
|
||||
onClick={openInit}
|
||||
>
|
||||
Initialize New Village
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
<Paper withBorder radius="2xl" className="glass" p="md">
|
||||
<Group mb="md">
|
||||
<TextInput
|
||||
placeholder="Search village or district..."
|
||||
leftSection={<TbSearch size={16} />}
|
||||
style={{ flex: 1 }}
|
||||
radius="md"
|
||||
/>
|
||||
</Group>
|
||||
|
||||
<Table className="data-table" verticalSpacing="md" highlightOnHover>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Village Profile</Table.Th>
|
||||
<Table.Th>District</Table.Th>
|
||||
<Table.Th>Integration Status</Table.Th>
|
||||
<Table.Th>Lead Developer</Table.Th>
|
||||
<Table.Th>Last Sync</Table.Th>
|
||||
<Table.Th>Actions</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{mockVillages.map((village) => (
|
||||
<Table.Tr key={village.id}>
|
||||
<Table.Td>
|
||||
<Stack gap={0}>
|
||||
<Text fw={700} size="sm">{village.name}</Text>
|
||||
<Text size="xs" c="dimmed">{village.population.toLocaleString()} Residents</Text>
|
||||
</Stack>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="sm" fw={500}>{village.kecamatan}</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge
|
||||
color={
|
||||
village.status === 'fully integrated' ? 'teal' :
|
||||
village.status === 'sync active' ? 'brand-blue' : 'orange'
|
||||
}
|
||||
variant={village.status === 'sync pending' ? 'outline' : 'light'}
|
||||
leftSection={village.status !== 'sync pending' && <TbCircleCheck size={12} />}
|
||||
radius="sm"
|
||||
style={{ textTransform: 'uppercase', fontVariant: 'small-caps' }}
|
||||
>
|
||||
{village.status}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Group gap="xs">
|
||||
<Avatar size="xs" radius="xl" color="brand-blue" src={null} />
|
||||
<Text size="sm">{village.developer}</Text>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
onClick={() => { setSelectedVillage(village); openAssign(); }}
|
||||
>
|
||||
<TbUserPlus size={12} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="xs" fw={500} c={village.lastUpdate === '-' ? 'dimmed' : 'teal'}>
|
||||
{village.lastUpdate}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Group gap="xs">
|
||||
{village.status === 'sync pending' && (
|
||||
<Button variant="light" size="compact-xs" color="blue" onClick={openInit}>
|
||||
START SYNC
|
||||
</Button>
|
||||
)}
|
||||
<Tooltip label="Village Settings">
|
||||
<ActionIcon variant="light" size="sm" color="gray">
|
||||
<TbPencil size={14} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Tooltip label="Unlink Village">
|
||||
<ActionIcon variant="light" size="sm" color="red">
|
||||
<TbTrash size={14} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</Paper>
|
||||
|
||||
{/* MODALS */}
|
||||
<Modal
|
||||
opened={initModalOpened}
|
||||
onClose={closeInit}
|
||||
title={<Title order={4}>Desa+ Instance Initialization</Title>}
|
||||
radius="xl"
|
||||
centered
|
||||
padding="xl"
|
||||
>
|
||||
<Stack gap="md">
|
||||
<SimpleGrid cols={2}>
|
||||
<TextInput label="Village Name" placeholder="e.g. Sukatani" radius="md" required />
|
||||
<TextInput label="Kecamatan" placeholder="e.g. Tapos" radius="md" required />
|
||||
</SimpleGrid>
|
||||
<Group grow>
|
||||
<Select
|
||||
label="Population Data Source"
|
||||
placeholder="Select source..."
|
||||
data={['SIAK Terpusat', 'BPS Proyeksi', 'Manual Upload']}
|
||||
radius="md"
|
||||
/>
|
||||
<NumberInput label="Target Residents" placeholder="1000" radius="md" />
|
||||
</Group>
|
||||
<Box>
|
||||
<Text size="xs" fw={700} c="dimmed" mb="xs">INITIAL SYNC MODULES</Text>
|
||||
<Group gap="xs">
|
||||
<Badge variant="outline" color="blue">PENDUDUK</Badge>
|
||||
<Badge variant="outline" color="teal">KEUANGAN</Badge>
|
||||
<Badge variant="outline" color="brand-purple">PELAYANAN</Badge>
|
||||
<Badge variant="outline" color="orange">APBDes</Badge>
|
||||
</Group>
|
||||
</Box>
|
||||
<Group justify="flex-end" mt="md">
|
||||
<Button variant="subtle" color="gray" onClick={closeInit}>Cancel</Button>
|
||||
<Button variant="gradient" gradient={{ from: '#2563EB', to: '#7C3AED' }} radius="md">Deploy Instance</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
opened={assignModalOpened}
|
||||
onClose={closeAssign}
|
||||
title={<Title order={4}>Assign Lead Developer</Title>}
|
||||
radius="xl"
|
||||
centered
|
||||
padding="xl"
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Text size="sm">Assign a dedicated reviewer for <b>{selectedVillage?.name}</b> instance stability.</Text>
|
||||
<Select
|
||||
label="Technical Lead"
|
||||
placeholder="Search developer..."
|
||||
data={mockDevelopers}
|
||||
leftSection={<TbUser size={16} />}
|
||||
radius="md"
|
||||
searchable
|
||||
/>
|
||||
<Group justify="flex-end" mt="md">
|
||||
<Button variant="subtle" color="gray" onClick={closeAssign}>Cancel</Button>
|
||||
<Button variant="gradient" gradient={{ from: '#2563EB', to: '#7C3AED' }} radius="md">Set Lead</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user