Revisi QC Kak Inno tanggal 20

src/app/darmasaba/(pages)/inovasi/program-kreatif-desa/page.tsx

@@ -1,14 +1,14 @@
 'use client'
+import { IconKey, IconMapper } from '@/app/admin/(dashboard)/_com/iconMap';
 import programKreatifState from '@/app/admin/(dashboard)/_state/inovasi/program-kreatif';
 import colors from '@/con/colors';
-import { Box, Button, Center, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { Box, Button, Center, Grid, GridCol, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
+import { IconSearch } from '@tabler/icons-react';
 import { useTransitionRouter } from 'next-view-transitions';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
-import { IconSearch } from '@tabler/icons-react';
-import { IconKey, IconMapper } from '@/app/admin/(dashboard)/_com/iconMap';
 
 // const data = [
 //   {
@@ -75,17 +75,23 @@ function Page() {
         <BackButton />
       </Box>
       <Box px={{ base: 'md', md: 100 }} >
-        <Group justify="space-between" mb="md" align='center'>
-          <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-            Program Kreatif Desa
-          </Text>
-          <TextInput
-            placeholder="Cari program kreatif..."
-            leftSection={<IconSearch size={20} />}
-            value={search}
-            onChange={(e) => setSearch(e.currentTarget.value)}
-          />
-        </Group>
+        <Grid align='center'>
+          <GridCol span={{ base: 12, md: 9 }}>
+            <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+              Program Kreatif Desa
+            </Text>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 3 }}>
+            <TextInput
+              radius={"lg"}
+              placeholder='Cari Program Kreatif'
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              leftSection={<IconSearch size={20} />}
+              w={{ base: "50%", md: "100%" }}
+            />
+          </GridCol>
+        </Grid>
       </Box>
       <Box px={{ base: "md", md: 100 }}>
         <Stack gap={'lg'} justify='center'>

src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/fasilitas-kesehatan-page/[id]/page.tsx

@@ -3,9 +3,9 @@
 import fasilitasKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
 import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
 import colors from '@/con/colors';
-import { ActionIcon, Anchor, AspectRatio, Badge, Box, Button, Card, Chip, CopyButton, Divider, Grid, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, ThemeIcon, Title, Tooltip } from '@mantine/core';
+import { ActionIcon, AspectRatio, Badge, Box, Button, Card, CopyButton, Divider, Grid, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, ThemeIcon, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconBrandWhatsapp, IconCheck, IconCopy, IconDeviceLandlinePhone, IconHeart, IconInfoCircle, IconMail, IconMapPin, IconMoodEmpty, IconSearch, IconStethoscope, IconUser, IconUsersGroup, IconWallet } from '@tabler/icons-react';
+import { IconBrandWhatsapp, IconCheck, IconCopy, IconDeviceLandlinePhone, IconHeart, IconInfoCircle, IconMail, IconMapPin, IconMoodEmpty, IconSearch, IconUser } from '@tabler/icons-react';
 import { useParams } from 'next/navigation';
 import { useMemo } from 'react';
 import { useProxy } from 'valtio/utils';
@@ -149,11 +149,6 @@ function Page() {
                 </CopyButton>
               </Group>
             </Group>
-            <Group gap="xs" mt="sm" wrap="wrap">
-              <Chip defaultChecked radius="xl" variant="light" icon={<IconStethoscope size={16} />}>Layanan Medis</Chip>
-              <Chip radius="xl" variant="light" icon={<IconUsersGroup size={16} />}>Ramah Keluarga</Chip>
-              <Chip radius="xl" variant="light" icon={<IconWallet size={16} />}>Pembayaran Non-Tunai</Chip>
-            </Group>
           </Stack>
         </Card>
       </Box>
@@ -210,7 +205,6 @@ function Page() {
                     <Button variant="light" leftSection={<IconBrandWhatsapp size={18} />} component="a" href={`https://wa.me/${kontak.whatsapp.replace(/\D/g, '')}`} target="_blank" aria-label="Hubungi WhatsApp">WhatsApp</Button>
                     <Button variant="light" leftSection={<IconMail size={18} />} component="a" href={`mailto:${kontak.email}`} aria-label="Kirim Email">Email</Button>
                   </Group>
-                  <Anchor target="_blank" underline="hover">Kunjungi situs resmi</Anchor>
                 </Stack>
               </Card>
 

src/app/darmasaba/(pages)/kesehatan/penanganan-darurat/page.tsx

@@ -108,20 +108,23 @@ function Page() {
                     <Box
                       style={{
                         width: '100%',
-                        aspectRatio: '16/9',
-                        borderRadius: '12px',
+                        height: 180, // 🔥 tinggi fix biar semua seragam
+                        borderRadius: 12,
                         overflow: 'hidden',
                         position: 'relative',
+                        backgroundColor: '#f0f2f5', // fallback kalau gambar loading
                       }}
                     >
                       <Image
-                        src={v.image.link}
+                        src={v.image?.link || '/img/default.png'}
                         alt={v.name}
                         fit="cover"
+                        width="100%"
+                        height="100%"
                         loading="lazy"
                         style={{
-                          width: '100%',
-                          height: '100%',
+                          objectFit: 'cover',
+                          objectPosition: 'center',
                           transition: 'transform 0.4s ease',
                         }}
                         onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.05)')}
@@ -129,6 +132,7 @@ function Page() {
                       />
                     </Box>
 
+
                   </Center>
                   <Stack gap={4} w="100%">
                     <Text

src/app/darmasaba/(pages)/ppid/struktur-ppid/page.tsx

@@ -233,21 +233,42 @@ function StrukturOrganisasiPPID() {
   return (
     <Stack align="center" mt="xl">
       {/* 🔍 Search + Zoom + Fullscreen controls */}
-      <Group mb="md" justify="center" gap="sm">
+      <Group mb="md" justify="center" gap="sm" align="center">
         <TextInput
           placeholder="Cari nama atau jabatan..."
           leftSection={<IconSearch size={16} />}
           onChange={(e) => debouncedSearch(e.target.value)}
         />
+
         <Button variant="light" size="sm" onClick={handleZoomOut}>
           <IconZoomOut size={16} />
         </Button>
-        <Button variant="light" size="sm" onClick={resetZoom}>
-          100%
-        </Button>
+
+        {/* 🔍 Tambahkan indikator zoom di sini */}
+        {/* Floating Zoom Indicator */}
+        <Box
+          bg="#C3D0E8"
+          c="blue"
+          px={9}
+          py={8}
+          style={{
+            fontSize: 14,
+            fontWeight: 600,
+            borderRadius: '5px',
+          }}
+        >
+          {Math.round(scale * 100)}%
+        </Box>
+
+
         <Button variant="light" size="sm" onClick={handleZoomIn}>
           <IconZoomIn size={16} />
         </Button>
+
+        <Button variant="light" size="sm" onClick={resetZoom}>
+          Reset
+        </Button>
+
         <Button
           variant="light"
           size="sm"
@@ -260,6 +281,7 @@ function StrukturOrganisasiPPID() {
         </Button>
       </Group>
 
+
       {/* Chart Container */}
       <Box
         ref={chartContainerRef}