update: dashboard admin

Deskripsi:
- list pelayanan surat
- detail pelayanan surat

No Issues

src/AppRoutes.tsx

@@ -18,6 +18,7 @@ import Home from "./pages/Home";
 import CredentialPage from "./pages/scr/dashboard/credential/credential_page";
 import DashboardHome from "./pages/scr/dashboard/dashboard_home";
 import ListPelayananPage from "./pages/scr/dashboard/pelayanan-surat/list_pelayanan_page";
+import DetailPelayananPage from "./pages/scr/dashboard/pelayanan-surat/detail_pelayanan_page";
 import ListPage from "./pages/scr/dashboard/pengaduan/list_page";
 import DetailPage from "./pages/scr/dashboard/pengaduan/detail_page";
 import ApikeyPage from "./pages/scr/dashboard/apikey/apikey_page";
@@ -99,6 +100,10 @@ export default function AppRoutes() {
               path="/scr/dashboard/pelayanan-surat/list-pelayanan"
               element={<ListPelayananPage />}
             />
+            <Route
+              path="/scr/dashboard/pelayanan-surat/detail-pelayanan"
+              element={<DetailPelayananPage />}
+            />
             <Route
               path="/scr/dashboard/pengaduan/list"
               element={<ListPage />}

src/clientRoutes.ts

@@ -20,6 +20,7 @@ const clientRoutes = {
   "/scr/dashboard/credential/credential": "/scr/dashboard/credential/credential",
   "/scr/dashboard/dashboard-home": "/scr/dashboard/dashboard-home",
   "/scr/dashboard/pelayanan-surat/list-pelayanan": "/scr/dashboard/pelayanan-surat/list-pelayanan",
+  "/scr/dashboard/pelayanan-surat/detail-pelayanan": "/scr/dashboard/pelayanan-surat/detail-pelayanan",
   "/scr/dashboard/pengaduan/list": "/scr/dashboard/pengaduan/list",
   "/scr/dashboard/pengaduan/detail": "/scr/dashboard/pengaduan/detail",
   "/scr/dashboard/apikey/apikey": "/scr/dashboard/apikey/apikey",

src/pages/scr/dashboard/pelayanan-surat/detail_pelayanan_page.tsx

@@ -0,0 +1,370 @@
+import apiFetch from "@/lib/apiFetch";
+import {
+  Anchor,
+  Badge,
+  Button,
+  Card,
+  Container,
+  Divider,
+  Flex,
+  Grid,
+  Group,
+  Modal,
+  Stack,
+  Table,
+  Text,
+  Textarea,
+  Title,
+} from "@mantine/core";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
+import {
+  IconAlignJustified,
+  IconCategory,
+  IconFileCertificate,
+  IconInfoTriangle,
+  IconMapPin,
+  IconMessageReport,
+  IconPhotoScan,
+  IconUser,
+} from "@tabler/icons-react";
+import { useState } from "react";
+import { useLocation } from "react-router-dom";
+import useSwr from "swr";
+
+export default function DetailPelayananPage() {
+  const { search } = useLocation();
+  const query = new URLSearchParams(search);
+  const id = query.get("id");
+
+  return (
+    <Container size="xl" py="xl" w={"100%"}>
+      <Grid>
+        <Grid.Col span={8}>
+          <Stack gap={"xl"}>
+            <DetailDataPelayanan />
+            <DetailDataHistori />
+          </Stack>
+        </Grid.Col>
+        <Grid.Col span={4}>
+          <DetailUserPelayanan />
+        </Grid.Col>
+      </Grid>
+    </Container>
+  );
+}
+
+function DetailDataPelayanan() {
+  const [opened, { open, close }] = useDisclosure(false);
+  const [catModal, setCatModal] = useState<"tolak" | "terima">("tolak");
+
+  return (
+    <>
+      <Modal
+        opened={opened}
+        onClose={close}
+        title={"Konfirmasi"}
+        centered
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+      >
+        <Stack gap="sm">
+          {catModal === "tolak" ? (
+            <>
+              <Text>
+                Anda yakin ingin menolak pengaduan ini? Berikan alasan penolakan
+              </Text>
+
+              <Textarea size="md" minRows={5} />
+              <Group justify="center" grow>
+                <Button variant="light" onClick={close}>
+                  Batal
+                </Button>
+                <Button variant="filled" color="red" onClick={close}>
+                  Tolak
+                </Button>
+              </Group>
+            </>
+          ) : (
+            <>
+              <Text>Anda yakin ingin menerima pengaduan ini?</Text>
+              <Group justify="center" grow>
+                <Button variant="light" onClick={close}>
+                  Batal
+                </Button>
+                <Button variant="filled" color="green" onClick={close}>
+                  Terima
+                </Button>
+              </Group>
+            </>
+          )}
+        </Stack>
+      </Modal>
+
+      <Card
+        radius="md"
+        p="lg"
+        withBorder
+        style={{
+          background:
+            "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
+          borderColor: "rgba(100,100,100,0.2)",
+          boxShadow: "0 0 20px rgba(0,255,200,0.08)",
+        }}
+      >
+        <Stack gap={"md"}>
+          <Flex align="center" justify="space-between">
+            <Group gap="xs">
+              <Title order={4} c="gray.2">
+                Pelayanan Surat
+              </Title>
+              <Title order={4} c="dimmed">
+                #PGf-2345-33
+              </Title>
+            </Group>
+            <Badge
+              size="xl"
+              variant="light"
+              radius="sm"
+              color={"yellow"}
+              style={{ textTransform: "none" }}
+            >
+              antrian
+            </Badge>
+          </Flex>
+          <Divider my={0} />
+          <Grid>
+            <Grid.Col span={6}>
+              <Stack gap="md">
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconAlignJustified size={20} />
+                    <Text size="md">Judul</Text>
+                  </Group>
+                  <Text size="md" c={"white"}>
+                    Judul Pelayanan Surat
+                  </Text>
+                </Flex>
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconMapPin size={20} />
+                    <Text size="md">Lokasi</Text>
+                  </Group>
+                  <Text size="md" c="white">
+                    fwef
+                  </Text>
+                </Flex>
+              </Stack>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Stack gap="md">
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconCategory size={20} />
+                    <Text size="md">Kategori</Text>
+                  </Group>
+                  <Text size="md" c="white">
+                    fwef
+                  </Text>
+                </Flex>
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconPhotoScan size={20} />
+                    <Text size="md">Gambar</Text>
+                  </Group>
+                  <Anchor href="https://mantine.dev/" target="_blank">
+                    Lihat Gambar
+                  </Anchor>
+                </Flex>
+              </Stack>
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <Stack gap="md">
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconAlignJustified size={20} />
+                    <Text size="md">Detail</Text>
+                  </Group>
+                  <Text size="md" c="white">
+                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+                    Illum, corporis iusto. Suscipit veritatis quas, non nobis
+                    fuga, laudantium accusantium tempora sint aliquid architecto
+                    totam esse eum excepturi nostrum fugiat ut.
+                  </Text>
+                </Flex>
+                <Flex direction={"column"} justify="flex-start">
+                  <Group gap="xs">
+                    <IconInfoTriangle size={20} />
+                    <Text size="md">Keterangan</Text>
+                  </Group>
+                  <Text size="md" c={"white"}>
+                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. At
+                    fugiat eligendi nesciunt dolore? Maiores a cumque vitae
+                    suscipit incidunt quos beatae modi, vel, id ullam quae
+                    voluptas, deserunt quas placeat.
+                  </Text>
+                </Flex>
+              </Stack>
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <Group justify="center" grow>
+                <Button
+                  variant="light"
+                  onClick={() => {
+                    setCatModal("tolak");
+                    open();
+                  }}
+                >
+                  Tolak
+                </Button>
+                <Button
+                  variant="filled"
+                  onClick={() => {
+                    setCatModal("terima");
+                    open();
+                  }}
+                >
+                  Terima
+                </Button>
+              </Group>
+            </Grid.Col>
+          </Grid>
+        </Stack>
+      </Card>
+    </>
+  );
+}
+
+function DetailDataHistori() {
+  const elements = [
+    { position: 6, mass: 12.011, symbol: "C", name: "Carbon" },
+    { position: 7, mass: 14.007, symbol: "N", name: "Nitrogen" },
+    { position: 39, mass: 88.906, symbol: "Y", name: "Yttrium" },
+    { position: 56, mass: 137.33, symbol: "Ba", name: "Barium" },
+    { position: 58, mass: 140.12, symbol: "Ce", name: "Cerium" },
+  ];
+
+  const rows = elements.map((element) => (
+    <Table.Tr key={element.name}>
+      <Table.Td>{element.position}</Table.Td>
+      <Table.Td>{element.name}</Table.Td>
+      <Table.Td>{element.symbol}</Table.Td>
+      <Table.Td>{element.mass}</Table.Td>
+    </Table.Tr>
+  ));
+  return (
+    <Card
+      radius="md"
+      p="lg"
+      withBorder
+      style={{
+        background:
+          "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
+        borderColor: "rgba(100,100,100,0.2)",
+        boxShadow: "0 0 20px rgba(0,255,200,0.08)",
+      }}
+    >
+      <Stack gap="md">
+        <Flex align="center" justify="space-between">
+          <Title order={4} c="gray.2">
+            Histori Pengaduan
+          </Title>
+        </Flex>
+        <Divider my={0} />
+        <Table>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Tanggal</Table.Th>
+              <Table.Th>Deskripsi</Table.Th>
+              <Table.Th>Status</Table.Th>
+              <Table.Th>User</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>{rows}</Table.Tbody>
+        </Table>
+      </Stack>
+    </Card>
+  );
+}
+
+function DetailUserPelayanan() {
+  const [page, setPage] = useState(1);
+  const [value, setValue] = useState("");
+  const { data, mutate, isLoading } = useSwr("/", () =>
+    apiFetch.api.pengaduan.list.get({
+      query: {
+        status,
+        search: value,
+        take: "",
+        page: "",
+      },
+    }),
+  );
+
+  useShallowEffect(() => {
+    mutate();
+  }, [status, value]);
+
+  const list = data?.data || [];
+
+  return (
+    <Card
+      radius="md"
+      p="lg"
+      withBorder
+      style={{
+        background:
+          "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
+        borderColor: "rgba(100,100,100,0.2)",
+        boxShadow: "0 0 20px rgba(0,255,200,0.08)",
+      }}
+    >
+      <Stack gap="md">
+        <Flex align="center" justify="space-between">
+          <Flex direction={"column"}>
+            <Title order={4} c="gray.2">
+              Warga
+            </Title>
+          </Flex>
+        </Flex>
+        <Divider my={0} />
+        <Stack gap="md">
+          <Group justify="space-between">
+            <Group gap="xs">
+              <IconUser size={20} />
+              <Text size="md">Nama</Text>
+            </Group>
+            <Text size="md" c={"white"}>
+              Amalia Dwi Yustiani
+            </Text>
+          </Group>
+          <Group justify="space-between">
+            <Group gap="xs">
+              <IconMapPin size={20} />
+              <Text size="md">Telepon</Text>
+            </Group>
+            <Text size="md" c="white">
+              08123456789
+            </Text>
+          </Group>
+          <Group justify="space-between">
+            <Group gap="xs">
+              <IconMessageReport size={20} />
+              <Text size="md">Jumlah Pengaduan</Text>
+            </Group>
+            <Text size="md" c="white">
+              10
+            </Text>
+          </Group>
+          <Group justify="space-between">
+            <Group gap="xs">
+              <IconFileCertificate size={20} />
+              <Text size="md">Jumlah Pelayanan Surat</Text>
+            </Group>
+            <Text size="md" c="white">
+              10
+            </Text>
+          </Group>
+        </Stack>
+      </Stack>
+    </Card>
+  );
+}

src/pages/scr/dashboard/pelayanan-surat/list_pelayanan_page.tsx

@@ -133,6 +133,8 @@ function ListPelayananSurat({ status }: { status: StatusKey }) {
     mutate();
   }, [status, value]);
 
+  const navigate = useNavigate();
+
   if (isLoading)
     return (
       <Card
@@ -169,17 +171,13 @@ function ListPelayananSurat({ status }: { status: StatusKey }) {
             />
           }
         />
-        {/* <Group justify="flex-end">
-          <Text size="sm">Menampilkan {Number(data?.data?.length) * (page - 1) + 1} – {Math.min(10, Number(data?.data?.length) * page)} dari {Number(data?.data?.length)}</Text>
-          <Pagination total={Number(data?.data?.length)} value={page} onChange={setPage} withPages={false} />
-        </Group> */}
       </Group>
       {list.length === 0 ? (
         <Flex justify="center" align="center" py={"xl"}>
           <Stack gap={4} align="center">
             <IconFileSad size={32} color="gray" />
             <Text c="dimmed" size="sm">
-              No pengaduan have been added yet.
+              No pelayanan surat have been added yet.
             </Text>
           </Stack>
         </Flex>
@@ -196,6 +194,9 @@ function ListPelayananSurat({ status }: { status: StatusKey }) {
               borderColor: "rgba(100,100,100,0.2)",
               boxShadow: "0 0 20px rgba(0,255,200,0.08)",
             }}
+            onClick={() => {
+              navigate(`/scr/dashboard/pelayanan-surat/detail-pelayanan?id=${v.id}`);
+            }}
           >
             <Stack gap="md">
               <Flex align="center" justify="space-between">

src/pages/scr/dashboard/pengaduan/detail_page.tsx

@@ -14,7 +14,7 @@ import {
   Table,
   Text,
   Textarea,
-   Title
+  Title,
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import {
@@ -25,7 +25,7 @@ import {
   IconMapPin,
   IconMessageReport,
   IconPhotoScan,
-   IconUser
+  IconUser,
 } from "@tabler/icons-react";
 import { useState } from "react";
 import { useLocation } from "react-router-dom";
@@ -55,37 +55,47 @@ export default function DetailPengaduanPage() {
 
 function DetailDataPengaduan() {
   const [opened, { open, close }] = useDisclosure(false);
-   const [catModal, setCatModal] = useState<'tolak' | 'terima'>('tolak');
+  const [catModal, setCatModal] = useState<"tolak" | "terima">("tolak");
 
   return (
     <>
-         <Modal opened={opened} onClose={close} title={"Konfirmasi"} centered overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}>
+      <Modal
+        opened={opened}
+        onClose={close}
+        title={"Konfirmasi"}
+        centered
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+      >
         <Stack gap="sm">
-               {
+          {catModal === "tolak" ? (
-                  catModal === 'tolak'
-                     ? (
             <>
-                           <Text>Anda yakin ingin menolak pengaduan ini? Berikan alasan penolakan</Text>
+              <Text>
+                Anda yakin ingin menolak pengaduan ini? Berikan alasan penolakan
+              </Text>
 
               <Textarea size="md" minRows={5} />
               <Group justify="center" grow>
-                              <Button variant="light" onClick={close}>Batal</Button>
+                <Button variant="light" onClick={close}>
-                              <Button variant="filled" color="red" onClick={close}>Tolak</Button>
+                  Batal
+                </Button>
+                <Button variant="filled" color="red" onClick={close}>
+                  Tolak
+                </Button>
               </Group>
             </>
-                     )
+          ) : (
-                     :
-                     (
             <>
               <Text>Anda yakin ingin menerima pengaduan ini?</Text>
               <Group justify="center" grow>
-                              <Button variant="light" onClick={close}>Batal</Button>
+                <Button variant="light" onClick={close}>
-                              <Button variant="filled" color="green" onClick={close}>Terima</Button>
+                  Batal
+                </Button>
+                <Button variant="filled" color="green" onClick={close}>
+                  Terima
+                </Button>
               </Group>
             </>
-                     )
+          )}
-               }
-
         </Stack>
       </Modal>
 
@@ -127,20 +137,20 @@ function DetailDataPengaduan() {
                 <Flex direction={"column"} justify="flex-start">
                   <Group gap="xs">
                     <IconAlignJustified size={20} />
-                              <Text size="md">
+                    <Text size="md">Judul</Text>
-                                 Judul
-                              </Text>
                   </Group>
-                           <Text size="md" c={"white"}>Judul Pengaduan</Text>
+                  <Text size="md" c={"white"}>
+                    Judul Pengaduan
+                  </Text>
                 </Flex>
                 <Flex direction={"column"} justify="flex-start">
                   <Group gap="xs">
                     <IconMapPin size={20} />
-                              <Text size="md">
+                    <Text size="md">Lokasi</Text>
-                                 Lokasi
-                              </Text>
                   </Group>
-                           <Text size="md" c="white">fwef</Text>
+                  <Text size="md" c="white">
+                    fwef
+                  </Text>
                 </Flex>
               </Stack>
             </Grid.Col>
@@ -149,18 +159,16 @@ function DetailDataPengaduan() {
                 <Flex direction={"column"} justify="flex-start">
                   <Group gap="xs">
                     <IconCategory size={20} />
-                              <Text size="md">
+                    <Text size="md">Kategori</Text>
-                                 Kategori
-                              </Text>
                   </Group>
-                           <Text size="md" c="white">fwef</Text>
+                  <Text size="md" c="white">
+                    fwef
+                  </Text>
                 </Flex>
                 <Flex direction={"column"} justify="flex-start">
                   <Group gap="xs">
                     <IconPhotoScan size={20} />
-                              <Text size="md">
+                    <Text size="md">Gambar</Text>
-                                 Gambar
-                              </Text>
                   </Group>
                   <Anchor href="https://mantine.dev/" target="_blank">
                     Lihat Gambar
@@ -173,31 +181,49 @@ function DetailDataPengaduan() {
                 <Flex direction={"column"} justify="flex-start">
                   <Group gap="xs">
                     <IconAlignJustified size={20} />
-                              <Text size="md">
+                    <Text size="md">Detail</Text>
-                                 Detail
-                              </Text>
                   </Group>
                   <Text size="md" c="white">
-                              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum, corporis iusto. Suscipit veritatis quas, non nobis fuga, laudantium accusantium tempora sint aliquid architecto totam esse eum excepturi nostrum fugiat ut.
+                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+                    Illum, corporis iusto. Suscipit veritatis quas, non nobis
+                    fuga, laudantium accusantium tempora sint aliquid architecto
+                    totam esse eum excepturi nostrum fugiat ut.
                   </Text>
                 </Flex>
                 <Flex direction={"column"} justify="flex-start">
                   <Group gap="xs">
                     <IconInfoTriangle size={20} />
-                              <Text size="md">
+                    <Text size="md">Keterangan</Text>
-                                 Keterangan
-                              </Text>
                   </Group>
                   <Text size="md" c={"white"}>
-                              Lorem ipsum dolor, sit amet consectetur adipisicing elit. At fugiat eligendi nesciunt dolore? Maiores a cumque vitae suscipit incidunt quos beatae modi, vel, id ullam quae voluptas, deserunt quas placeat.
+                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. At
+                    fugiat eligendi nesciunt dolore? Maiores a cumque vitae
+                    suscipit incidunt quos beatae modi, vel, id ullam quae
+                    voluptas, deserunt quas placeat.
                   </Text>
                 </Flex>
               </Stack>
             </Grid.Col>
             <Grid.Col span={12}>
               <Group justify="center" grow>
-                        <Button variant="light" onClick={() => { setCatModal('tolak'); open() }}>Tolak</Button>
+                <Button
-                        <Button variant="filled" onClick={() => { setCatModal('terima'); open() }}>Terima</Button>
+                  variant="light"
+                  onClick={() => {
+                    setCatModal("tolak");
+                    open();
+                  }}
+                >
+                  Tolak
+                </Button>
+                <Button
+                  variant="filled"
+                  onClick={() => {
+                    setCatModal("terima");
+                    open();
+                  }}
+                >
+                  Terima
+                </Button>
               </Group>
             </Grid.Col>
           </Grid>
@@ -209,11 +235,11 @@ function DetailDataPengaduan() {
 
 function DetailDataHistori() {
   const elements = [
-      { position: 6, mass: 12.011, symbol: 'C', name: 'Carbon' },
+    { position: 6, mass: 12.011, symbol: "C", name: "Carbon" },
-      { position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen' },
+    { position: 7, mass: 14.007, symbol: "N", name: "Nitrogen" },
-      { position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' },
+    { position: 39, mass: 88.906, symbol: "Y", name: "Yttrium" },
-      { position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' },
+    { position: 56, mass: 137.33, symbol: "Ba", name: "Barium" },
-      { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' },
+    { position: 58, mass: 140.12, symbol: "Ce", name: "Cerium" },
   ];
 
   const rows = elements.map((element) => (
@@ -256,8 +282,7 @@ function DetailDataHistori() {
         </Table>
       </Stack>
     </Card>
-
+  );
-   )
 }
 
 function DetailUserPengaduan() {
@@ -305,38 +330,38 @@ function DetailUserPengaduan() {
           <Group justify="space-between">
             <Group gap="xs">
               <IconUser size={20} />
-                     <Text size="md">
+              <Text size="md">Nama</Text>
-                        Nama
-                     </Text>
             </Group>
-                  <Text size="md" c={"white"}>Amalia Dwi Yustiani</Text>
+            <Text size="md" c={"white"}>
+              Amalia Dwi Yustiani
+            </Text>
           </Group>
           <Group justify="space-between">
             <Group gap="xs">
               <IconMapPin size={20} />
-                     <Text size="md">
+              <Text size="md">Telepon</Text>
-                        Telepon
-                     </Text>
             </Group>
-                  <Text size="md" c="white">08123456789</Text>
+            <Text size="md" c="white">
+              08123456789
+            </Text>
           </Group>
           <Group justify="space-between">
             <Group gap="xs">
               <IconMessageReport size={20} />
-                     <Text size="md">
+              <Text size="md">Jumlah Pengaduan</Text>
-                        Jumlah Pengaduan
-                     </Text>
             </Group>
-                  <Text size="md" c="white">10</Text>
+            <Text size="md" c="white">
+              10
+            </Text>
           </Group>
           <Group justify="space-between">
             <Group gap="xs">
               <IconFileCertificate size={20} />
-                     <Text size="md">
+              <Text size="md">Jumlah Pelayanan Surat</Text>
-                        Jumlah Pelayanan Surat
-                     </Text>
             </Group>
-                  <Text size="md" c="white">10</Text>
+            <Text size="md" c="white">
+              10
+            </Text>
           </Group>
         </Stack>
       </Stack>

src/pages/scr/dashboard/pengaduan/list_page.tsx

@@ -198,7 +198,9 @@ function ListPengaduan({ status }: { status: StatusKey }) {
               borderColor: "rgba(100,100,100,0.2)",
               boxShadow: "0 0 20px rgba(0,255,200,0.08)",
             }}
-            onClick={() => navigate(`/scr/dashboard/pengaduan/detail?id=${v.id}`)}
+            onClick={() =>
+              navigate(`/scr/dashboard/pengaduan/detail?id=${v.id}`)
+            }
           >
             <Stack gap="md">
               <Flex align="center" justify="space-between">