upd: tambah surat

deskripsi:
- layout form
- seeder category pelayanan
- api tambah surat

No Issues

src/components/FullScreenLoading.tsx

@@ -0,0 +1,43 @@
+import { Center, Loader, Overlay, Stack, Text } from "@mantine/core"
+
+type FullScreenLoadingProps = {
+   visible: boolean
+   text?: string
+}
+
+export default function FullScreenLoading({
+   visible,
+   text = "Memproses data..."
+}: FullScreenLoadingProps) {
+   if (!visible) return null
+
+   return (
+      <Overlay
+         fixed
+         blur={6}
+         backgroundOpacity={0.3}
+         zIndex={10000}
+      >
+         <Center h="100%">
+            <Stack align="center" justify="center">
+               <Loader size="lg" />
+               <Text size="sm" c="dimmed">
+                  {text}
+               </Text>
+            </Stack>
+         </Center>
+      </Overlay>
+   )
+}
+
+const overlayStyle: React.CSSProperties = {
+   position: "fixed",
+   inset: 0,
+   zIndex: 9999,
+   backdropFilter: "blur(6px)",
+   backgroundColor: "rgba(255, 255, 255, 0.6)"
+}
+
+const contentStyle: React.CSSProperties = {
+   flexDirection: "column"
+}

src/components/SuccessPengajuanSurat.tsx

@@ -0,0 +1,50 @@
+import { Badge, Button, Card, Center, Stack, Text, Title } from "@mantine/core"
+import { IconCheck } from "@tabler/icons-react"
+
+type SuccessPengajuanProps = {
+   noPengajuan: string
+   onClose?: () => void
+}
+
+export default function SuccessPengajuan({
+   noPengajuan,
+   onClose
+}: SuccessPengajuanProps) {
+   return (
+      <Center h="100vh">
+         <Card
+            shadow="md"
+            radius="md"
+            p="xl"
+            withBorder
+            maw={520}
+            w="100%"
+         >
+            <Stack align="center" gap="md">
+               <IconCheck size={56} color="green" />
+
+               <Title order={3} ta="center">
+                  Pengajuan Berhasil Dibuat
+               </Title>
+
+               <Text ta="center" size="sm" c="dimmed">
+                  Pengajuan layanan surat sudah dibuat dengan nomor:
+               </Text>
+
+               <Badge size="xl" variant="light" color="green">
+                  {noPengajuan}
+               </Badge>
+
+               <Text ta="center" size="sm">
+                  Nomor ini akan digunakan untuk mengakses dan memantau status
+                  pengajuan surat Anda.
+               </Text>
+
+               <Button fullWidth mt="md" onClick={onClose}>
+                  Selesai
+               </Button>
+            </Stack>
+         </Card>
+      </Center>
+   )
+}