Fix UI Admin Menu Landing Page & PPID

This commit is contained in:
2025-09-01 16:14:28 +08:00
parent 22ec8d942d
commit 7ae83788b4
74 changed files with 4312 additions and 2798 deletions

View File

@@ -72,7 +72,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
}}
>
{tabs.map((tab, i) => (
<Tooltip key={i} label={tab.tooltip} position="bottom" withArrow>
<Tooltip key={i} label={tab.tooltip} position="bottom" withArrow transitionProps={{ transition: 'pop', duration: 200 }}>
<TabsTab
value={tab.value}
leftSection={tab.icon}

View File

@@ -87,7 +87,7 @@ function EditMediaSosial() {
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" color="blue" withArrow>
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>

View File

@@ -51,6 +51,7 @@ function DetailMediaSosial() {
</Button>
<Paper
withBorder
w={{ base: "100%", md: "60%" }}
bg={colors['white-1']}
p="lg"

View File

@@ -69,7 +69,7 @@ export default function CreateMediaSosial() {
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" color="blue" withArrow>
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>

View File

@@ -53,7 +53,7 @@ function ListMediaSosial({ search }: { search: string }) {
return (
<Box py={10}>
<Paper bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
<Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Media Sosial</Title>
<Tooltip label="Tambah Media Sosial" withArrow>
@@ -66,34 +66,34 @@ function ListMediaSosial({ search }: { search: string }) {
<Table highlightOnHover>
<TableThead>
<TableTr>
<TableTh>Nama Media Sosial / Kontak</TableTh>
<TableTh>Gambar</TableTh>
<TableTh>Icon / No. Telepon</TableTh>
<TableTh>Aksi</TableTh>
<TableTh style={{ width: '25%' }}>Nama Media Sosial / Kontak</TableTh>
<TableTh style={{ width: '20%' }}>Gambar</TableTh>
<TableTh style={{ width: '20%' }}>Icon / No. Telepon</TableTh>
<TableTh style={{ width: '15%' }}>Aksi</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.length > 0 ? (
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Text fw={500}>{item.name}</Text>
<TableTd style={{ width: '25%', }}>
<Text fw={500} truncate="end" lineClamp={1}>{item.name}</Text>
</TableTd>
<TableTd>
<Box w={50} h={50} style={{ borderRadius: 8, overflow: 'hidden' }}>
{item.image?.link ? (
<Image src={item.image.link} alt={item.name} fit="cover" />
) : (
<Box bg={colors['blue-button']} w="100%" h="100%" />
)}
</Box>
<TableTd style={{ width: '20%', }}>
<Box w={50} h={50} style={{ borderRadius: 8, overflow: 'hidden', }}>
{item.image?.link ? (
<Image src={item.image.link} alt={item.name} fit="cover" />
) : (
<Box bg={colors['blue-button']} w="100%" h="100%" />
)}
</Box>
</TableTd>
<TableTd>
<Text truncate fz="sm" color="dimmed">
<TableTd style={{ width: '20%', }}>
<Text truncate fz="sm" c="dimmed">
{item.iconUrl || item.noTelp || '-'}
</Text>
</TableTd>
<TableTd>
<TableTd style={{ width: '15%'}}>
<Button
variant="light"
color="blue"

View File

@@ -145,7 +145,7 @@ function EditPejabatDesa() {
<Box>
<Stack gap="xs">
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" color="blue" withArrow>
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>

View File

@@ -37,7 +37,7 @@ function Page() {
<GridCol span={{ base: 12, md: 1 }}>
<Tooltip label="Edit Profil Pejabat" withArrow>
<Button
c="blue"
c="green"
variant="light"
leftSection={<IconEdit size={18} stroke={2} />}
radius="md"
@@ -49,7 +49,7 @@ function Page() {
</GridCol>
</Grid>
{dataArray.map((item) => (
<Paper key={item.id} p="xl" bg={colors['BG-trans']} radius="md" shadow="xs">
<Paper key={item.id} p="xl" bg={'white'} withBorder radius="md" shadow="xs">
<Box px={{ base: "sm", md: 100 }}>
<Grid>
<GridCol span={12}>

View File

@@ -1,5 +1,6 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import profileLandingPageState from '@/app/admin/(dashboard)/_state/landing-page/profile';
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
@@ -99,7 +100,7 @@ function EditProgramInovasi() {
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" color="blue" withArrow>
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
@@ -176,13 +177,16 @@ function EditProgramInovasi() {
required
/>
<TextInput
label="Deskripsi"
placeholder="Masukkan deskripsi program inovasi"
value={formData.description}
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
required
/>
<Box>
<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
<EditEditor
value={formData.description}
onChange={(htmlContent) => {
setFormData((prev) => ({ ...prev, description: htmlContent }));
stateProgramInovasi.update.form.description = htmlContent;
}}
/>
</Box>
<TextInput
label="Link Program Inovasi"

View File

@@ -51,6 +51,7 @@ function DetailProgramInovasi() {
p="lg"
radius="md"
shadow="sm"
withBorder
>
<Stack gap="md">
<Text fz="2xl" fw="bold" c={colors['blue-button']}>
@@ -64,9 +65,23 @@ function DetailProgramInovasi() {
<Text fz="md" c="dimmed">{data.name || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold">Gambar</Text>
{data.image?.link ? (
<Image
src={data.image.link}
alt="Gambar Program"
radius="md"
style={{ maxWidth: '100%', maxHeight: 300, objectFit: 'contain' }}
/>
) : (
<Text fz="md" c="dimmed">-</Text>
)}
</Box>
<Box>
<Text fz="lg" fw="bold">Deskripsi</Text>
<Text fz="md" c="dimmed" style={{ whiteSpace: 'pre-wrap' }}>{data.description || '-'}</Text>
<Text fz="md" c="dimmed" style={{ whiteSpace: 'pre-wrap' }} dangerouslySetInnerHTML={{ __html: data.description || '-' }}></Text>
</Box>
<Box>
@@ -89,20 +104,6 @@ function DetailProgramInovasi() {
)}
</Box>
<Box>
<Text fz="lg" fw="bold">Gambar</Text>
{data.image?.link ? (
<Image
src={data.image.link}
alt="Gambar Program"
radius="md"
style={{ maxWidth: '100%', maxHeight: 300, objectFit: 'contain' }}
/>
) : (
<Text fz="md" c="dimmed">-</Text>
)}
</Box>
<Group gap="sm">
<Tooltip label="Hapus Program Inovasi" withArrow position="top">
<Button

View File

@@ -70,7 +70,7 @@ function CreateProgramInovasi() {
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" color="blue" withArrow>
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>

View File

@@ -48,7 +48,7 @@ function ListProgramInovasi({ search }: { search: string }) {
return (
<Box py={15}>
<Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
<Paper bg={colors['white-1']} withBorder p="lg" radius="md" shadow="sm">
<Box mb="md" display="flex"
style={{ justifyContent: 'space-between', alignItems: 'center' }}
>
@@ -91,9 +91,7 @@ function ListProgramInovasi({ search }: { search: string }) {
<Text fw={500}>{item.name}</Text>
</TableTd>
<TableTd style={{ maxWidth: 250 }}>
<Text fz="sm" lineClamp={2}>
{item.description}
</Text>
<Text fz="sm" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.description || '-' }}></Text>
</TableTd>
<TableTd style={{ maxWidth: 250 }}>
<Tooltip label="Buka tautan program" position="top" withArrow>