Merge pull request 'amalia/18-mei-26' (#23) from amalia/18-mei-26 into main

Reviewed-on: #23

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bun-react-template",
-  "version": "0.1.3",
+  "version": "0.1.9",
   "private": true,
   "type": "module",
   "scripts": {

prisma/schema.prisma

@@ -149,6 +149,3 @@ model BugLog {
   @@map("bug_log")
 }
 
-
-
-

src/app.ts

@@ -11,6 +11,9 @@ import { getMinioDownloadUrl, uploadBugImage } from './lib/minio'
 import { addConnection, broadcastToAdmins, getOnlineUserIds, removeConnection } from './lib/presence'
 import { parseSchema } from './lib/schema-parser'
 
+const isProduction = process.env.NODE_ENV === 'production'
+const cookieFlags = isProduction ? '; Secure' : ''
+
 function getPublicOrigin(request: Request): string {
   if (process.env.BUN_PUBLIC_BASE_URL) return process.env.BUN_PUBLIC_BASE_URL.replace(/\/$/, '')
   const url = new URL(request.url)
@@ -127,7 +130,7 @@ export function createApp() {
       })
       const headers = new Headers()
       headers.set('Location', `https://accounts.google.com/o/oauth2/v2/auth?${params}`)
-      headers.set('Set-Cookie', `oauth_state=${state}; Path=/; HttpOnly; SameSite=Lax; Max-Age=600`)
+      headers.set('Set-Cookie', `oauth_state=${state}; Path=/; HttpOnly; SameSite=Lax; Max-Age=600${cookieFlags}`)
       return new Response(null, { status: 302, headers })
     }, {
       detail: {
@@ -212,8 +215,8 @@ export function createApp() {
       const redirectPath = user.role === 'DEVELOPER' ? '/dev' : user.role === 'USER' ? '/profile' : '/dashboard'
       const headers = new Headers()
       headers.append('Location', redirectPath)
-      headers.append('Set-Cookie', `session=${token}; Path=/; HttpOnly; SameSite=Lax; Max-Age=86400`)
+      headers.append('Set-Cookie', `session=${token}; Path=/; HttpOnly; SameSite=Lax; Max-Age=86400${cookieFlags}`)
-      headers.append('Set-Cookie', 'oauth_state=; Path=/; HttpOnly; Max-Age=0')
+      headers.append('Set-Cookie', `oauth_state=; Path=/; HttpOnly; Max-Age=0${cookieFlags}`)
       return new Response(null, { status: 302, headers })
     }, {
       detail: {
@@ -241,7 +244,7 @@ export function createApp() {
       const token = crypto.randomUUID()
       const expiresAt = new Date(Date.now() + 24 * 60 * 60 * 1000) // 24 hours
       await prisma.session.create({ data: { token, userId: user.id, expiresAt } })
-      set.headers['set-cookie'] = `session=${token}; Path=/; HttpOnly; SameSite=Lax; Max-Age=86400`
+      set.headers['set-cookie'] = `session=${token}; Path=/; HttpOnly; SameSite=Lax; Max-Age=86400${cookieFlags}`
       await createSystemLog(user.id, 'LOGIN', 'Logged in successfully')
       return { user: { id: user.id, name: user.name, email: user.email, role: user.role, image: user.image } }
     }, {
@@ -266,7 +269,7 @@ export function createApp() {
           await prisma.session.deleteMany({ where: { token } })
         }
       }
-      set.headers['set-cookie'] = 'session=; Path=/; HttpOnly; Max-Age=0'
+      set.headers['set-cookie'] = `session=; Path=/; HttpOnly; Max-Age=0${cookieFlags}`
       return { ok: true }
     }, {
       detail: {
@@ -1637,6 +1640,73 @@ export function createApp() {
       return { sessions: result, summary: { totalSessions: result.length, activeSessions: active, expiredSessions: expired, onlineUsers: onlineIds.size, byRole } }
     })
 
+    // ─── API Keys (proxied to desa-plus /api/monitoring/api-keys) ─────────────
+
+    .get('/api/admin/api-keys', async ({ request, set }) => {
+      const auth = await requireDeveloper(request, set)
+      if (!auth) return { error: set.status === 401 ? 'Unauthorized' : 'Forbidden' }
+      const app = await prisma.app.findUnique({ where: { id: 'desa-plus' } })
+      if (!app?.urlApi) { set.status = 503; return { error: 'desa-plus belum dikonfigurasi' } }
+      const res = await fetch(`${app.urlApi.replace(/\/$/, '')}/api/monitoring/api-keys`, {
+        headers: { 'x-api-key': app.apiKey ?? '' },
+      })
+      const json = await res.json()
+      return { keys: json.data ?? [] }
+    })
+
+    .post('/api/admin/api-keys', async ({ request, set }) => {
+      const auth = await requireDeveloper(request, set)
+      if (!auth) return { error: set.status === 401 ? 'Unauthorized' : 'Forbidden' }
+      const body = await request.json() as { name?: string }
+      if (!body.name?.trim()) { set.status = 400; return { error: 'name wajib diisi' } }
+      const app = await prisma.app.findUnique({ where: { id: 'desa-plus' } })
+      if (!app?.urlApi) { set.status = 503; return { error: 'desa-plus belum dikonfigurasi: urlApi kosong' } }
+      if (!app?.apiKey) { set.status = 503; return { error: 'desa-plus belum dikonfigurasi: apiKey kosong' } }
+      try {
+        const res = await fetch(`${app.urlApi.replace(/\/$/, '')}/api/monitoring/api-keys`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', 'x-api-key': app.apiKey },
+          body: JSON.stringify({ name: body.name.trim() }),
+        })
+        const json = await res.json()
+        set.status = res.status
+        return { key: json.data ?? null }
+      } catch (e) {
+        set.status = 502
+        return { error: `Gagal menghubungi desa-plus: ${String(e)}` }
+      }
+    })
+
+    .patch('/api/admin/api-keys/:id', async ({ request, set, params }) => {
+      const auth = await requireDeveloper(request, set)
+      if (!auth) return { error: set.status === 401 ? 'Unauthorized' : 'Forbidden' }
+      const body = await request.json() as { isActive?: boolean }
+      const app = await prisma.app.findUnique({ where: { id: 'desa-plus' } })
+      if (!app?.urlApi) { set.status = 503; return { error: 'desa-plus belum dikonfigurasi' } }
+      const res = await fetch(`${app.urlApi.replace(/\/$/, '')}/api/monitoring/api-keys/${params.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json', 'x-api-key': app.apiKey ?? '' },
+        body: JSON.stringify({ isActive: body.isActive }),
+      })
+      const json = await res.json()
+      set.status = res.status
+      return json
+    })
+
+    .delete('/api/admin/api-keys/:id', async ({ request, set, params }) => {
+      const auth = await requireDeveloper(request, set)
+      if (!auth) return { error: set.status === 401 ? 'Unauthorized' : 'Forbidden' }
+      const app = await prisma.app.findUnique({ where: { id: 'desa-plus' } })
+      if (!app?.urlApi) { set.status = 503; return { error: 'desa-plus belum dikonfigurasi' } }
+      const res = await fetch(`${app.urlApi.replace(/\/$/, '')}/api/monitoring/api-keys/${params.id}`, {
+        method: 'DELETE',
+        headers: { 'x-api-key': app.apiKey ?? '' },
+      })
+      const json = await res.json()
+      set.status = res.status
+      return json
+    })
+
     // ─── Desa Plus Proxy ───────────────────────────────────────────────────────
 
     .all('/api/proxy/desa-plus/*', async ({ request, set }) => {

src/frontend/components/StatsCard.tsx

@@ -14,18 +14,21 @@ interface StatsCardProps {
 }
 
 export function StatsCard({ title, value, description, icon: Icon, color, trend }: StatsCardProps) {
+  const accentColor = `var(--mantine-color-${color ?? 'brand-blue'}-5)`
+
   return (
     <Card
       withBorder
       padding="lg"
       radius="xl"
       className="premium-card"
-      styles={(theme) => ({
+      styles={{
         root: {
           backgroundColor: 'var(--mantine-color-body)',
           borderColor: 'rgba(128,128,128,0.1)',
+          borderTop: `3px solid ${accentColor}`,
         },
-      })}
+      }}
     >
       <Group justify="space-between" mb="xs">
         <ThemeIcon

src/frontend/routes/apps.$appId.errors.tsx

@@ -37,11 +37,10 @@ import {
   TbCircleX,
   TbDeviceDesktop,
   TbDeviceMobile,
-  TbFilter,
   TbHistory,
   TbPhoto,
   TbPlus,
-  TbSearch,
+  TbSearch
 } from 'react-icons/tb'
 import { API_URLS } from '../config/api'
 
@@ -431,10 +430,9 @@ function AppErrorsPage() {
           />
           <Stack justify="flex-end">
             <Button
-              variant="subtle"
+              variant="filled"
-              color="gray"
+              color="violet"
               size="sm"
-              leftSection={<TbFilter size={16} />}
               onClick={() => { setSearch(''); setStatus('all') }}
             >
               Reset Filters

src/frontend/routes/apps.$appId.users.index.tsx

@@ -57,6 +57,7 @@ interface APIUser {
   gender: string
   isWithoutOTP: boolean
   isActive: boolean
+  isApprover: boolean
   role: string
   village: string
   group: string
@@ -118,7 +119,8 @@ function UsersIndexPage() {
     idGroup: '',
     idPosition: '',
     isActive: true,
-    isWithoutOTP: false
+    isWithoutOTP: false,
+    isApprover: false
   })
 
   // Options Data (Shared for both Add and Edit modals)
@@ -212,7 +214,8 @@ function UsersIndexPage() {
       idGroup: user.idGroup,
       idPosition: user.idPosition,
       isActive: user.isActive,
-      isWithoutOTP: user.isWithoutOTP
+      isWithoutOTP: user.isWithoutOTP,
+      isApprover: user.isApprover
     })
     setVillageSearch(user.village)
     openEdit()
@@ -544,6 +547,12 @@ function UsersIndexPage() {
               checked={editForm.isWithoutOTP}
               onChange={(event) => setEditForm(f => ({ ...f, isWithoutOTP: event.currentTarget.checked }))}
             />
+            <Switch
+              label="Approver"
+              description="Grant approver privileges to this user"
+              checked={editForm.isApprover}
+              onChange={(event) => setEditForm(f => ({ ...f, isApprover: event.currentTarget.checked }))}
+            />
           </SimpleGrid>
 
           <Button

src/frontend/routes/apps.$appId.villages.$villageId.tsx

@@ -1,5 +1,6 @@
 import { AreaChart } from '@mantine/charts'
 import {
+  Badge,
   Box,
   Button,
   Card,
@@ -10,6 +11,7 @@ import {
   SegmentedControl,
   SimpleGrid,
   Stack,
+  Switch,
   Text,
   Textarea,
   TextInput,
@@ -31,6 +33,7 @@ import {
   TbLayoutKanban,
   TbMapPin,
   TbPower,
+  TbTestPipe,
   TbUser,
   TbUsers,
   TbUsersGroup,
@@ -153,7 +156,7 @@ function VillageDetailPage() {
   const [editModalOpened, { open: openEditModal, close: closeEditModal }] = useDisclosure(false)
   const [isUpdating, setIsUpdating] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
-  const [editForm, setEditForm] = useState({ name: '', desc: '' })
+  const [editForm, setEditForm] = useState({ name: '', desc: '', isDummy: false })
 
   const village = infoRes?.data
   const stats = gridRes?.data
@@ -161,7 +164,8 @@ function VillageDetailPage() {
   const openEdit = () => {
     setEditForm({
       name: village?.name || '',
-      desc: village?.desc || ''
+      desc: village?.desc || '',
+      isDummy: village?.isDummy ?? false,
     })
     openEditModal()
   }
@@ -188,7 +192,8 @@ function VillageDetailPage() {
         body: JSON.stringify({
           id: village.id,
           name: editForm.name,
-          desc: editForm.desc
+          desc: editForm.desc,
+          isDummy: editForm.isDummy,
         })
       })
 
@@ -361,7 +366,20 @@ function VillageDetailPage() {
             </ThemeIcon>
 
             <Stack gap={6}>
+              <Group gap="xs" align="center">
                 <Title order={2} style={{ color: 'white', lineHeight: 1.1 }}>{village.name}</Title>
+                {village.isDummy && (
+                  <Badge
+                    size="sm"
+                    variant="light"
+                    color="yellow"
+                    leftSection={<TbTestPipe size={11} />}
+                    style={{ textTransform: 'none' }}
+                  >
+                    Dummy
+                  </Badge>
+                )}
+              </Group>
 
               <Group gap={6}>
                 <TbMapPin size={14} color="rgba(255,255,255,0.8)" />
@@ -526,6 +544,12 @@ function VillageDetailPage() {
             value={editForm.desc}
             onChange={(e) => setEditForm(prev => ({ ...prev, desc: e.currentTarget.value }))}
           />
+          <Switch
+            label="Dummy Village"
+            description="Tandai desa ini sebagai data dummy"
+            checked={editForm.isDummy}
+            onChange={(e) => setEditForm(prev => ({ ...prev, isDummy: e.currentTarget.checked }))}
+          />
           <Group justify="flex-end" gap="sm" mt="md">
             <Button variant="light" color="gray" onClick={closeEditModal} radius="md">
               Cancel

src/frontend/routes/apps.$appId.villages.index.tsx

@@ -36,6 +36,7 @@ import {
   TbMapPin,
   TbPlus,
   TbSearch,
+  TbTestPipe,
   TbUser,
   TbX,
 } from 'react-icons/tb'
@@ -50,6 +51,7 @@ interface APIVillage {
   id: string
   name: string
   isActive: boolean
+  isDummy: boolean
   createdAt: string
   perbekel: string | null
 }
@@ -95,10 +97,17 @@ function VillageGridCard({ village, onClick }: { village: APIVillage; onClick: (
         >
           <TbHome2 size={22} />
         </ThemeIcon>
+        <Group gap={6}>
+          {village.isDummy && (
+            <Badge color="yellow" variant="light" radius="sm" size="sm" leftSection={<TbTestPipe size={11} />}>
+              Dummy
+            </Badge>
+          )}
           <Badge color={cfg.color} variant="light" radius="sm" size="sm">
             {cfg.label}
           </Badge>
         </Group>
+      </Group>
 
       <Text fw={800} size="lg" mb={2}>
         {village.name}
@@ -175,6 +184,11 @@ function VillageListRow({ village, onClick }: { village: APIVillage; onClick: ()
           <Stack gap={2}>
             <Group gap="sm">
               <Text fw={700} size="sm">{village.name}</Text>
+              {village.isDummy && (
+                <Badge color="yellow" variant="light" radius="sm" size="xs" leftSection={<TbTestPipe size={10} />}>
+                  Dummy
+                </Badge>
+              )}
               <Badge color={cfg.color} variant="light" radius="sm" size="xs">
                 {cfg.label}
               </Badge>
@@ -408,7 +422,7 @@ function AppVillagesIndexPage() {
             <Select 
               label="Gender" 
               placeholder="Select gender"
-              data={['Male', 'Female']}
+              data={[{ label: 'Male', value: 'M' }, { label: 'Female', value: 'F' }]}
               mt="sm"
               required
               value={form.gender}

src/frontend/routes/dev.tsx

@@ -77,7 +77,7 @@ import { notifications } from '@mantine/notifications'
 import { type Role, useLogout, useSession } from '@/frontend/hooks/useAuth'
 import { usePresence } from '@/frontend/hooks/usePresence'
 
-const validTabs = ['overview', 'operators', 'bugs', 'app-logs', 'activity-logs', 'database', 'project', 'settings'] as const
+const validTabs = ['overview', 'operators', 'bugs', 'app-logs', 'activity-logs', 'database', 'project', 'api-keys', 'settings'] as const
 
 export const Route = createFileRoute('/dev')({
   validateSearch: (search: Record<string, unknown>) => ({
@@ -117,6 +117,7 @@ const navItems = [
   // { label: 'Activity Logs', icon: TbActivity, key: 'activity-logs' },
   { label: 'Database', icon: TbDatabase, key: 'database' },
   { label: 'Project', icon: TbSitemap, key: 'project' },
+  { label: 'API Keys', icon: TbKey, key: 'api-keys' },
   { label: 'Settings', icon: TbSettings, key: 'settings' },
 ]
 
@@ -274,6 +275,7 @@ function DevPage() {
           {active === 'activity-logs' && <ActivityLogsPanel />}
           {active === 'database' && <DatabasePanel />}
           {active === 'project' && <ProjectPanel />}
+          {active === 'api-keys' && <ApiKeysPanel />}
           {active === 'settings' && <SettingsPanel />}
         </Container>
       </AppShell.Main>
@@ -1711,6 +1713,221 @@ function SettingsPanel() {
   )
 }
 
+// ─── API Keys Panel ────────────────────────────────────────────────────────────
+
+interface ApiKeyItem {
+  id: string
+  name: string
+  key: string
+  isActive: boolean
+  createdAt: string
+  updatedAt: string
+}
+
+function ApiKeysPanel() {
+  const qc = useQueryClient()
+  const [createOpened, { open: openCreate, close: closeCreate }] = useDisclosure(false)
+  const [newKeyName, setNewKeyName] = useState('')
+  const [createdKey, setCreatedKey] = useState<string | null>(null)
+  const [keyCopied, setKeyCopied] = useState(false)
+  const [revealedOpened, { open: openRevealed, close: closeRevealed }] = useDisclosure(false)
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['admin', 'api-keys'],
+    queryFn: () => fetch('/api/admin/api-keys', { credentials: 'include' }).then((r) => r.json()),
+  })
+  const keys: ApiKeyItem[] = data?.keys ?? []
+
+  const createMutation = useMutation({
+    mutationFn: async (name: string) => {
+      const r = await fetch('/api/admin/api-keys', {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name }),
+      })
+      const json = await r.json()
+      if (!r.ok) throw new Error(json.error ?? 'Gagal membuat API key')
+      return json
+    },
+    onSuccess: (res) => {
+      qc.invalidateQueries({ queryKey: ['admin', 'api-keys'] })
+      closeCreate()
+      setNewKeyName('')
+      if (res.key?.key) {
+        setCreatedKey(res.key.key)
+        setKeyCopied(false)
+        openRevealed()
+      }
+    },
+    onError: (err: Error) => notifications.show({ color: 'red', title: 'Gagal', message: err.message }),
+  })
+
+  const toggleMutation = useMutation({
+    mutationFn: ({ id, isActive }: { id: string; isActive: boolean }) =>
+      fetch(`/api/admin/api-keys/${id}`, {
+        method: 'PATCH',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ isActive }),
+      }).then((r) => r.json()),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['admin', 'api-keys'] }),
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) =>
+      fetch(`/api/admin/api-keys/${id}`, { method: 'DELETE', credentials: 'include' }).then((r) => r.json()),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['admin', 'api-keys'] }),
+  })
+
+  const confirmDelete = (key: ApiKeyItem) => {
+    modals.openConfirmModal({
+      title: 'Hapus API Key',
+      children: (
+        <Text size="sm">
+          Yakin hapus key <strong>{key.name}</strong>? Semua klien yang menggunakan key ini akan kehilangan akses.
+        </Text>
+      ),
+      labels: { confirm: 'Hapus', cancel: 'Batal' },
+      confirmProps: { color: 'red' },
+      onConfirm: () => deleteMutation.mutate(key.id),
+    })
+  }
+
+  return (
+    <Stack>
+      <Group justify="space-between">
+        <div>
+          <Title order={3}>API Keys</Title>
+          <Text size="sm" c="dimmed">Kelola API key untuk akses endpoint /api/ai/*</Text>
+        </div>
+        <Button leftSection={<TbKey size={14} />} onClick={openCreate}>
+          Buat Key Baru
+        </Button>
+      </Group>
+
+      {isLoading ? (
+        <Center><Loader /></Center>
+      ) : keys.length === 0 ? (
+        <Paper withBorder p="xl" radius="md">
+          <Center>
+            <Stack align="center" gap="xs">
+              <ThemeIcon size="xl" variant="light" color="gray"><TbKey size={24} /></ThemeIcon>
+              <Text c="dimmed" size="sm">Belum ada API key. Buat key pertama untuk mengakses API.</Text>
+            </Stack>
+          </Center>
+        </Paper>
+      ) : (
+        <Table.ScrollContainer minWidth={600}>
+          <Table striped highlightOnHover>
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th>Nama</Table.Th>
+                <Table.Th>Key</Table.Th>
+                <Table.Th>Status</Table.Th>
+                <Table.Th>Dibuat</Table.Th>
+                <Table.Th w={100}>Aksi</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {keys.map((k) => (
+                <Table.Tr key={k.id}>
+                  <Table.Td fw={500}>{k.name}</Table.Td>
+                  <Table.Td>
+                    <Text size="xs" ff="monospace" c="dimmed">{k.key}</Text>
+                  </Table.Td>
+                  <Table.Td>
+                    <Badge color={k.isActive ? 'green' : 'gray'} variant="light">
+                      {k.isActive ? 'Aktif' : 'Nonaktif'}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td>
+                    <Text size="xs" c="dimmed">{new Date(k.createdAt).toLocaleDateString('id-ID')}</Text>
+                  </Table.Td>
+                  <Table.Td>
+                    <Group gap={4}>
+                      <Tooltip label={k.isActive ? 'Nonaktifkan' : 'Aktifkan'}>
+                        <ActionIcon
+                          variant="subtle"
+                          color={k.isActive ? 'orange' : 'green'}
+                          size="sm"
+                          loading={toggleMutation.isPending}
+                          onClick={() => toggleMutation.mutate({ id: k.id, isActive: !k.isActive })}
+                        >
+                          <TbRefresh size={14} />
+                        </ActionIcon>
+                      </Tooltip>
+                      <Tooltip label="Hapus">
+                        <ActionIcon
+                          variant="subtle"
+                          color="red"
+                          size="sm"
+                          loading={deleteMutation.isPending}
+                          onClick={() => confirmDelete(k)}
+                        >
+                          <TbTrash size={14} />
+                        </ActionIcon>
+                      </Tooltip>
+                    </Group>
+                  </Table.Td>
+                </Table.Tr>
+              ))}
+            </Table.Tbody>
+          </Table>
+        </Table.ScrollContainer>
+      )}
+
+      {/* ── Create Key Modal ── */}
+      <Modal opened={createOpened} onClose={closeCreate} title="Buat API Key Baru" radius="md">
+        <Stack gap="sm">
+          <TextInput
+            label="Nama Key"
+            description="Label untuk mengidentifikasi key ini (misal: Jenna Mobile App)"
+            placeholder="Nama key..."
+            value={newKeyName}
+            onChange={(e) => setNewKeyName(e.target.value)}
+            required
+          />
+          <Group justify="flex-end" mt="xs">
+            <Button variant="subtle" color="gray" onClick={closeCreate}>Batal</Button>
+            <Button
+              loading={createMutation.isPending}
+              disabled={!newKeyName.trim()}
+              onClick={() => createMutation.mutate(newKeyName)}
+            >
+              Buat Key
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
+      {/* ── Reveal Key Modal ── */}
+      <Modal opened={revealedOpened} onClose={closeRevealed} title="API Key Berhasil Dibuat" radius="md">
+        <Stack gap="sm">
+          <Text size="sm" c="dimmed">Salin key ini sekarang — key tidak akan ditampilkan kembali setelah dialog ini ditutup.</Text>
+          <Box
+            p="sm"
+            style={{ background: 'var(--mantine-color-dark-6)', borderRadius: 6, fontFamily: 'monospace', fontSize: 13, wordBreak: 'break-all' }}
+          >
+            {createdKey}
+          </Box>
+          <Group justify="flex-end">
+            <Button
+              variant="light"
+              color={keyCopied ? 'green' : 'blue'}
+              leftSection={<TbCopy size={14} />}
+              onClick={() => { if (createdKey) { navigator.clipboard.writeText(createdKey); setKeyCopied(true) } }}
+            >
+              {keyCopied ? 'Tersalin!' : 'Salin Key'}
+            </Button>
+            <Button variant="subtle" color="gray" onClick={() => { closeRevealed(); setCreatedKey(null) }}>Tutup</Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </Stack>
+  )
+}
+
 void TbFileText
 void TbCode
 void TbUser

src/frontend/routes/index.tsx

@@ -1,7 +1,7 @@
-import { Button, Container, Group, Stack, Text, Title } from '@mantine/core'
+import { Button, Box, Center, Stack, Text, Title } from '@mantine/core'
 import { Link, createFileRoute } from '@tanstack/react-router'
-import { SiBun } from 'react-icons/si'
+import { TbLogin } from 'react-icons/tb'
-import { TbBrandReact, TbLogin, TbRocket } from 'react-icons/tb'
+import logoUrl from '../../logo.svg'
 
 export const Route = createFileRoute('/')({
   component: HomePage,
@@ -9,28 +9,67 @@ export const Route = createFileRoute('/')({
 
 function HomePage() {
   return (
-    <Container size="sm" py="xl">
+    <Box style={{ minHeight: '100vh', background: '#1a1a2e', position: 'relative', overflow: 'hidden' }}>
-      <Stack align="center" gap="lg">
+      {/* background blobs */}
-        <Group gap="lg">
+      <Box style={{
-          <SiBun size={64} color="#fbf0df" />
+        position: 'absolute', top: '-15%', left: '-10%',
-          <TbBrandReact size={64} color="#61dafb" />
+        width: 500, height: 500, borderRadius: '50%',
-        </Group>
+        background: 'radial-gradient(circle, rgba(124,58,237,0.25) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
+      <Box style={{
+        position: 'absolute', bottom: '-20%', right: '-10%',
+        width: 600, height: 600, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(79,70,229,0.2) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
+      <Box style={{
+        position: 'absolute', top: '50%', left: '60%',
+        width: 300, height: 300, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(168,85,247,0.1) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
 
-        <Title order={1}>Bun + Elysia + Vite + React</Title>
+      <Center mih="100vh" style={{ position: 'relative', zIndex: 1 }}>
+        <Stack align="center" gap="xl">
+          <img
+            src={logoUrl}
+            width={72}
+            height={72}
+            alt="logo"
+            style={{ borderRadius: 20, boxShadow: '0 4px 32px rgba(124,58,237,0.5)', display: 'block' }}
+          />
 
-        <Text c="dimmed" ta="center" maw={480}>
+          <Stack align="center" gap={8}>
-          Full-stack starter template with Mantine UI, TanStack Router, and session-based auth.
+            <Title
+              order={1}
+              c="white"
+              fw={800}
+              ta="center"
+              style={{ fontSize: '2.6rem', letterSpacing: '-0.5px', lineHeight: 1.15 }}
+            >
+              Monitoring System
+            </Title>
+            <Text c="dimmed" ta="center" size="md" maw={320} lh={1.6}>
+              Pantau semua aplikasi dalam satu tempat, real-time.
             </Text>
-
-        <Group>
-          <Button component={Link} to="/login" leftSection={<TbLogin size={18} />} variant="filled">
-            Login
-          </Button>
-          <Button component={Link} to="/dashboard" leftSection={<TbRocket size={18} />} variant="light">
-            Dashboard
-          </Button>
-        </Group>
           </Stack>
-    </Container>
+
+          <Button
+            component={Link}
+            to="/login"
+            leftSection={<TbLogin size={18} />}
+            size="md"
+            style={{
+              background: 'linear-gradient(135deg, #4f46e5, #7c3aed)',
+              border: 'none',
+              paddingInline: 32,
+            }}
+          >
+            Masuk
+          </Button>
+        </Stack>
+      </Center>
+    </Box>
   )
 }

src/frontend/routes/login.tsx

@@ -1,10 +1,11 @@
 import { useLogin } from '@/frontend/hooks/useAuth'
+import logoUrl from '../../logo.svg'
 import {
   Alert,
+  Box,
   Button,
   Center,
   Divider,
-  Paper,
   PasswordInput,
   Stack,
   Text,
@@ -38,6 +39,14 @@ export const Route = createFileRoute('/login')({
   component: LoginPage,
 })
 
+const OAUTH_ERRORS: Record<string, string> = {
+  google_denied: 'Login dengan Google dibatalkan.',
+  invalid_state: 'Sesi OAuth tidak valid, silakan coba lagi.',
+  token_failed: 'Gagal menukar token Google, silakan coba lagi.',
+  userinfo_failed: 'Gagal mengambil info akun Google, silakan coba lagi.',
+  account_disabled: 'Akun Anda telah dinonaktifkan. Hubungi admin untuk informasi lebih lanjut.',
+}
+
 function LoginPage() {
   const login = useLogin()
   const { error: searchError } = Route.useSearch()
@@ -49,26 +58,68 @@ function LoginPage() {
     login.mutate({ email, password })
   }
 
+  const errorMessage = login.isError
+    ? login.error.message
+    : searchError
+      ? (OAUTH_ERRORS[searchError] ?? 'Login dengan Google gagal, silakan coba lagi.')
+      : null
+
   return (
-    <Center mih="100vh">
+    <Box style={{ minHeight: '100vh', background: '#1a1a2e', position: 'relative', overflow: 'hidden' }}>
-      <Paper shadow="md" p="xl" radius="md" w={400} withBorder>
+      {/* background blobs */}
+      <Box style={{
+        position: 'absolute', top: '-15%', left: '-10%',
+        width: 500, height: 500, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(124,58,237,0.25) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
+      <Box style={{
+        position: 'absolute', bottom: '-20%', right: '-10%',
+        width: 600, height: 600, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(79,70,229,0.2) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
+      <Box style={{
+        position: 'absolute', top: '50%', left: '60%',
+        width: 300, height: 300, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(168,85,247,0.1) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
+
+      <Center mih="100vh" style={{ position: 'relative', zIndex: 1 }}>
+        <Box
+          p="xl"
+          w={400}
+          style={{
+            background: 'rgba(36,36,36,0.75)',
+            backdropFilter: 'blur(20px)',
+            borderRadius: 20,
+            border: '1px solid rgba(124,58,237,0.35)',
+            boxShadow: '0 0 0 1px rgba(124,58,237,0.1), 0 8px 32px rgba(0,0,0,0.4), 0 0 60px rgba(124,58,237,0.12)',
+          }}
+        >
           <form onSubmit={handleSubmit}>
             <Stack gap="md">
-            <Title order={2} ta="center">
+              {/* header */}
-              Login
+              <Stack gap={8} align="center" mb={4}>
+                <img
+                  src={logoUrl}
+                  width={56}
+                  height={56}
+                  alt="logo"
+                  style={{ borderRadius: 14, boxShadow: '0 4px 20px rgba(124,58,237,0.45)', display: 'block' }}
+                />
+                <Title order={2} fw={700} ta="center" c="white">
+                  Monitoring System
                 </Title>
+                <Text c="dimmed" size="sm" ta="center">
+                  Masuk untuk melanjutkan
+                </Text>
+              </Stack>
 
-            {(login.isError || searchError) && (
+              {errorMessage && (
                 <Alert icon={<TbAlertCircle size={16} />} color="red" variant="light">
-                {login.isError ? login.error.message : (
+                  {errorMessage}
-                  {
-                    google_denied: 'Login dengan Google dibatalkan.',
-                    invalid_state: 'Sesi OAuth tidak valid, silakan coba lagi.',
-                    token_failed: 'Gagal menukar token Google, silakan coba lagi.',
-                    userinfo_failed: 'Gagal mengambil info akun Google, silakan coba lagi.',
-                    account_disabled: 'Akun Anda telah dinonaktifkan. Hubungi admin untuk informasi lebih lanjut.',
-                  }[searchError ?? ''] ?? 'Login dengan Google gagal, silakan coba lagi.'
-                )}
                 </Alert>
               )}
 
@@ -95,11 +146,16 @@ function LoginPage() {
                 fullWidth
                 leftSection={<TbLogin size={18} />}
                 loading={login.isPending}
+                mt={4}
+                style={{
+                  background: 'linear-gradient(135deg, #4f46e5, #7c3aed)',
+                  border: 'none',
+                }}
               >
                 Sign in
               </Button>
 
-            <Divider label="or" labelPosition="center" />
+              <Divider label="atau" labelPosition="center" />
 
               <Button
                 variant="default"
@@ -111,7 +167,8 @@ function LoginPage() {
               </Button>
             </Stack>
           </form>
-      </Paper>
+        </Box>
       </Center>
+    </Box>
   )
 }