Merge pull request #23 from bipproduction/nico/27-may-25-01

Selasa, 27 May 2025:
Yang Sudah Di Kerjakan
* Tampilan UI Admin di menu ekonomi
* API Create, edit dan delete berita

Yang Lagi Dikerjakan:
* Progress Tampilan UI Admin Di Menu Inovasi
* Progress API ProfilePPID

Yang Akan Dikerjakan:
* API Menu Lain
* Tampilan UI Admin Di Menu Lingkungan
* Tampilan UI Admin Di Menu Pendidikan

src/app/admin/(dashboard)/desa/berita/edit/[id]/page.tsx

@@ -12,8 +12,9 @@ import {
   Stack,
   Text,
   TextInput,
+  Title,
 } from "@mantine/core";
-import { IconImageInPicture } from "@tabler/icons-react";
+import { IconArrowBack, IconImageInPicture } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
 import { useRouter, useParams } from "next/navigation";
 import { useProxy } from "valtio/utils";
@@ -26,6 +27,7 @@ import stateDashboardBerita from "../../../../_state/desa/berita";
 import { Prisma } from "@prisma/client";
 import { useShallowEffect } from "@mantine/hooks";
 import { BeritaEditor } from "../../_com/BeritaEditor";
+import colors from "@/con/colors";
 
 function BeritaEdit() {
   const beritaState = useProxy(stateDashboardBerita);
@@ -141,8 +143,10 @@ function BeritaEdit() {
 
   return (
     <Box py={10}>
+      <IconArrowBack color={colors["blue-button"]} size={30} onClick={() => router.back()}/>
       <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
         <Stack gap={"xs"}>
+          <Title order={3}>Edit Berita</Title>
           <TextInput
             value={formData.judul}
             onChange={(e) => setFormData({...formData, judul: e.target.value})}

src/app/admin/(dashboard)/desa/berita/page.tsx

@@ -86,6 +86,7 @@ function BeritaCreate() {
     <Box py={10}>
       <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
         <Stack gap={"xs"}>
+          <Title order={3}>Create Berita</Title>
           <TextInput
             value={beritaState.berita.create.form.judul}
             onChange={(val) => {
@@ -134,7 +135,7 @@ function BeritaCreate() {
               onEditorReady={(ed) => setEditorInstance(ed)}
             />
           </Box>
-          <Button onClick={handleSubmit}>Simpan Berita</Button>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan Berita</Button>
         </Stack>
       </Paper>
     </Box>

src/app/admin/(dashboard)/inovasi/ajukan-ide-inovatif/page.tsx

@@ -1,10 +1,43 @@
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
 import React from 'react';
 
 function Page() {
   return (
-    <div>
+    <Box py={5}>
-      ajukan-ide-inovatif
+    <Paper bg={colors['white-1']} p={'md'}>
-    </div>
+      <Stack gap={"xs"}>
+        <Title order={3}>Ajukan Ide Inovatif</Title>
+        <Box>
+          <Table striped withRowBorders withColumnBorders withTableBorder>
+            <TableThead>
+              <TableTr>
+                <TableTh>No</TableTh>
+                <TableTh>Nama</TableTh>
+                <TableTh>Alamat</TableTh>
+                <TableTh>Nama Ide Inovatif</TableTh>
+                <TableTh>Deskripsi</TableTh>
+                <TableTh>Masalah yang ingin diatasi</TableTh>
+                <TableTh>Benefit</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              
+                <TableTr>
+                  <TableTd>1</TableTd>
+                  <TableTd>nama</TableTd>
+                  <TableTd>alamat</TableTd>
+                  <TableTd>ide inovatif</TableTd>
+                  <TableTd>deskripsi</TableTd>
+                  <TableTd>masalah</TableTd>
+                  <TableTd>benefit</TableTd>
+                </TableTr>
+              
+            </TableTbody>
+          </Table> </Box>
+      </Stack>
+    </Paper>
+  </Box>
   );
 }
 

src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/create/page.tsx

@@ -0,0 +1,35 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconImageInPicture } from '@tabler/icons-react';
+import React from 'react';
+
+function CreateInfoTeknologiTepatGuna() {
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Paper w={{base: "100%", md: "50%"}} p={"md"} bg={colors['white-1']}>
+          <Stack gap={"xs"}>
+            <Title order={4}>Create Info Teknologi Tepat Guna</Title>
+            <Box>
+              <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+              <IconImageInPicture size={24}/>
+            </Box>
+            <TextInput
+              label={<Text fz={"sm"} fw={"bold"}>Nama Info Teknologi Tepat Guna</Text>}
+              placeholder="Masukkan nama info teknologi tepat guna"
+            />
+            <TextInput
+              label={<Text fz={"sm"} fw={"bold"}>Deskripsi Info Teknologi Tepat Guna</Text>}
+              placeholder="Masukkan deskripsi info teknologi tepat guna"
+            />
+            <Group>
+              <Button bg={colors['blue-button']}>Submit</Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Stack>
+    </Box>
+  );
+}
+
+export default CreateInfoTeknologiTepatGuna;

src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/listData/page.tsx

@@ -0,0 +1,31 @@
+import colors from '@/con/colors';
+import { Box, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
+import React from 'react';
+
+function ListDataInfoTeknologiTepatGuna() {
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Paper p={'md'} bg={colors['BG-trans']}>
+          <Title order={4}>List Data Info Teknologi Tepat Guna</Title>
+          <SimpleGrid py={10} cols={{ base: 1, md: 4 }}>
+            <Paper p={'md'} bg={colors['white-1']}>
+              Data 1
+            </Paper>
+            <Paper p={'md'} bg={colors['white-1']}>
+              Data 2
+            </Paper>
+            <Paper p={'md'} bg={colors['white-1']}>
+              Data 3
+            </Paper>
+            <Paper p={'md'} bg={colors['white-1']}>
+              Data 4
+            </Paper>
+          </SimpleGrid>
+        </Paper>
+      </Stack>
+    </Box>
+  );
+}
+
+export default ListDataInfoTeknologiTepatGuna;

src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/page.tsx

@@ -1,10 +1,17 @@
+import { Box, Stack, Title } from '@mantine/core';
 import React from 'react';
+import CreateInfoTeknologiTepatGuna from './create/page';
+import ListDataInfoTeknologiTepatGuna from './listData/page';
 
 function Page() {
   return (
-    <div>
+    <Box>
-      info-teknologi-tepat-guna
+      <Stack gap={'xs'}>
-    </div>
+        <Title order={3}>Info Teknologi Tepat Guna</Title>
+        <CreateInfoTeknologiTepatGuna/>
+        <ListDataInfoTeknologiTepatGuna/>
+      </Stack>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/page.tsx

@@ -1,10 +1,34 @@
+import colors from '@/con/colors';
+import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import React from 'react';
+import KolaborasiInovasi from './ui/kolaborasiInovasi/page';
+import MitraKolaborasi from './ui/mitraKolaborasi/page';
 
 function Page() {
   return (
-    <div>
+    <Box>
-      kolaborasi-inovasi
+      <Stack>
-    </div>
+      <Title order={3}>Kolaborasi Inovasi</Title>
+        <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Kolaborasi Inovasi"}>
+          <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+            <TabsTab value="Kolaborasi Inovasi">
+               Kolaborasi Inovasi
+            </TabsTab>
+            <TabsTab value="Mitra Kolaborasi">
+              Mitra Kolaborasi
+            </TabsTab>
+          </TabsList>
+
+          <TabsPanel value="Kolaborasi Inovasi">
+            <KolaborasiInovasi/>
+          </TabsPanel>
+
+          <TabsPanel value="Mitra Kolaborasi">
+            <MitraKolaborasi/>
+          </TabsPanel>
+        </Tabs>
+      </Stack>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/ui/kolaborasiInovasi/page.tsx

@@ -0,0 +1,53 @@
+import colors from '@/con/colors';
+import { Box, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
+import React from 'react';
+
+function KolaborasiInovasi() {
+  return (
+    <Box py={15}>
+      <Stack gap={"xs"}>
+        <Box>
+          <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Title order={4}>Create Kolaborasi Inovasi</Title>
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Tahun</Text>}
+                placeholder="Masukkan tahun"
+              />
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Nama Kolaborasi Inovasi</Text>}
+                placeholder="Masukkan nama kolaborasi inovasi"
+              />
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Deskripsi Kolaborasi Inovasi</Text>}
+                placeholder="Masukkan deskripsi kolaborasi inovasi"
+              />
+
+            </Stack>
+          </Paper>
+        </Box>
+        <Box>
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Title order={4}>List Data Kolaborasi Inovasi</Title>
+            <SimpleGrid py={10} cols={{ base: 1, md: 4 }}>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Data 1
+              </Paper>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Data 2
+              </Paper>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Data 3
+              </Paper>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Data 4
+              </Paper>
+            </SimpleGrid>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default KolaborasiInovasi;

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/ui/mitraKolaborasi/page.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
+import colors from '@/con/colors';
+import { IconImageInPicture } from '@tabler/icons-react';
+
+function MitraKolaborasi() {
+  return (
+    <Box py={15}>
+      <Stack gap={'xs'}>
+        <Box>
+        <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+          <Stack gap={'xs'}>
+            <Title order={4}>Create Mitra Kolaborasi</Title>
+            <TextInput
+              label={<Text fz={"sm"} fw={"bold"}>Nama Mitra Kolaborasi</Text>}
+              placeholder="Masukkan nama mitra kolaborasi"
+            />
+            <Box>
+              <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+              <IconImageInPicture size={50}/>
+            </Box>
+            <Group>
+              <Button bg={colors['blue-button']}>Submit</Button>
+            </Group>
+          </Stack>
+        </Paper>
+        </Box>
+        <Box>
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Title order={4}>List Data Kolaborasi Inovasi</Title>
+            <SimpleGrid py={10} cols={{ base: 1, md: 4 }}>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Foto 1
+              </Paper>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Foto 2
+              </Paper>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Foto 3
+              </Paper>
+              <Paper p={'md'} bg={colors['white-1']}>
+                Foto 4
+              </Paper>
+            </SimpleGrid>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default MitraKolaborasi;

src/app/admin/(dashboard)/inovasi/program-kreatif-desa/create/page.tsx

@@ -0,0 +1,37 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconImageInPicture } from '@tabler/icons-react';
+import React from 'react';
+
+function ProgramKreatifCreate() {
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        <Paper w={{base: "100%", md: "50%"}} p={"md"} bg={colors["white-1"]}>
+          <Stack gap={"xs"}>
+            <Title order={4}>Create Program Kreatif Desa</Title>
+            <Box>
+              <Text fz={"sm"} fw={"bold"}>Gambar</Text>
+              <IconImageInPicture size={24}/>
+            </Box>
+            <TextInput
+            label={<Text fz={"sm"} fw={"bold"}>Nama Program</Text>}
+            placeholder="Masukkan nama program"
+            />
+            <TextInput
+            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
+            placeholder="Masukkan deskripsi"
+            />
+            <Group>
+              <Button
+              bg={colors["blue-button"]}
+              >Simpan</Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Stack>
+    </Box>
+  );
+}
+
+export default ProgramKreatifCreate;

src/app/admin/(dashboard)/inovasi/program-kreatif-desa/listData/page.tsx

@@ -0,0 +1,29 @@
+import colors from '@/con/colors';
+import { Box, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
+import React from 'react';
+
+function ListDataProgramKreatifDesa() {
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        <Title order={3}>List Data Program Kreatif Desa</Title>
+        <SimpleGrid cols={{ base: 1, md: 4 }}>
+          <Paper p={"md"} bg={colors["white-1"]}>
+          Data 1
+          </Paper>
+          <Paper p={"md"} bg={colors["white-1"]}>
+          Data 2
+          </Paper>
+          <Paper p={"md"} bg={colors["white-1"]}>
+          Data 3
+          </Paper>
+          <Paper p={"md"} bg={colors["white-1"]}>
+          Data 4
+          </Paper>
+        </SimpleGrid>
+      </Stack>
+    </Box>
+  );
+}
+
+export default ListDataProgramKreatifDesa;

src/app/admin/(dashboard)/inovasi/program-kreatif-desa/page.tsx

@@ -1,10 +1,17 @@
+import { Box, Stack, Title } from '@mantine/core';
 import React from 'react';
+import ProgramKreatifCreate from './create/page';
+import ListDataProgramKreatifDesa from './listData/page';
 
 function Page() {
   return (
-    <div>
+    <Box>
-      program-kreatif-desa
+      <Stack gap={"xs"}>
-    </div>
+        <Title order={3}>Program Kreatif Desa</Title>
+        <ProgramKreatifCreate />
+        <ListDataProgramKreatifDesa />
+      </Stack>
+    </Box>
   );
 }