Create Proyek Kolaborasi

# feat
- Create proyek
- Edit proyek
- User lain join proyek
- Buat gruo diskusi
## No issue

src/app_modules/colab/main/beranda.tsx

@@ -40,7 +40,7 @@ export default function Colab_Beranda({
 
   return (
     <>
-      <Affix position={{ bottom: rem(100), right: rem(30) }}>
+      <Affix position={{ bottom: rem(150), right: rem(30) }}>
         <ActionIcon
           loading={loadingCreate ? true : false}
           opacity={scroll.y > 0 ? 0.5 : ""}
@@ -63,7 +63,7 @@ export default function Colab_Beranda({
       {/* <pre>{JSON.stringify(listData, null, 2)}</pre> */}
 
       {listData.map((e, i) => (
-        <Card key={e.id} withBorder shadow="lg" mb={"lg"} radius={"md"}>
+        <Card key={e.id} withBorder shadow="lg" mb={"sm"} radius={"md"}>
           <Stack>
             <ComponentColab_CardSectionHeaderAuthorName
               authorName={e?.Author?.Profile?.name}

src/app_modules/colab/main/grup/index.tsx

@@ -1,40 +1,81 @@
 "use client";
 
-import { Center, Grid, Group, Paper, Stack, Text, Title } from "@mantine/core";
+import {
+  Center,
+  Grid,
+  Group,
+  Loader,
+  Paper,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
 import ComponentColab_AuthorNameOnHeader from "../../component/header_author_name";
 import { IconChevronCompactRight, IconChevronRight } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import {
+  MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT,
+  MODEL_COLLABORATION_ROOM_CHAT,
+} from "../../model/interface";
+import { useState } from "react";
+import _ from "lodash";
+import ComponentColab_IsEmptyData from "../../component/is_empty_data";
 
-export default function Colab_GrupDiskus() {
+export default function Colab_GrupDiskus({
+  listRoom,
+}: {
+  listRoom?: MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT[];
+}) {
   const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  if (_.isEmpty(listRoom))
+    return <ComponentColab_IsEmptyData text="Tidak Ada Data" />;
+
   return (
     <>
       <Stack>
-        {Array(10)
-          .fill(0)
-          .map((e, i) => (
-            <Paper
-              key={i}
-              withBorder
-              shadow="lg"
-              p={"md"}
-              onClick={() => {
-                router.push(RouterColab.detail_grup + i);
-              }}
-            >
-              <Grid align="center" h={"100%"}>
-                <Grid.Col span={"auto"}>
-                  <Title order={6}>Nama Grup Diskusi</Title>
-                </Grid.Col>
-                <Grid.Col span={"content"}>
-                  <Center>
+        {listRoom?.map((e, i) => (
+          <Paper
+            key={i}
+            withBorder
+            shadow="lg"
+            p={"md"}
+            onClick={() => {
+              router.push(
+                RouterColab.detail_grup + e?.ProjectCollaboration_RoomChat.id
+              );
+              setLoading(true);
+            }}
+          >
+            <Grid align="center" h={"100%"}>
+              <Grid.Col span={"auto"}>
+                <Stack spacing={0}>
+                  <Text fw={"bold"} lineClamp={1}>
+                    {e.ProjectCollaboration_RoomChat.name}
+                  </Text>
+                  <Text fz={"xs"} c={"gray"}>
+                    {
+                      e.ProjectCollaboration_RoomChat
+                        .ProjectCollaboration_AnggotaRoomChat.length
+                    }{" "}
+                    Anggota
+                  </Text>
+                </Stack>
+              </Grid.Col>
+              <Grid.Col span={"content"}>
+                <Center>
+                  {loading ? (
+                    <Loader color="gray" size={20} />
+                  ) : (
                     <IconChevronRight color="gray" />
-                  </Center>
-                </Grid.Col>
-              </Grid>
-            </Paper>
-          ))}
+                  )}
+                </Center>
+              </Grid.Col>
+            </Grid>
+          </Paper>
+        ))}
       </Stack>
     </>
   );

src/app_modules/colab/main/layout.tsx

@@ -3,9 +3,11 @@
 import {
   ActionIcon,
   AppShell,
+  Box,
   Center,
   Footer,
   Grid,
+  Loader,
   Stack,
   Text,
 } from "@mantine/core";
@@ -25,6 +27,8 @@ import { useRouter } from "next/navigation";
 import { useAtom } from "jotai";
 import { gs_colab_hot_menu } from "../global_state";
 import { RouterHome } from "@/app/lib/router_hipmi/router_home";
+import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
+import { useTimeout } from "@mantine/hooks";
 
 export default function LayoutColab_Main({
   children,
@@ -72,7 +76,7 @@ export default function LayoutColab_Main({
 
   return (
     <>
-      <AppShell
+      <AppComponentGlobal_LayoutTamplate
         header={
           <ComponentColab_HeaderTamplate
             title="Project Collaboration"
@@ -82,39 +86,41 @@ export default function LayoutColab_Main({
           />
         }
         footer={
-          <Footer height={70} bg={"dark"}>
-            <Grid>
-              {listFooter.map((e) => (
-                <Grid.Col
-                  key={e.id}
-                  span={"auto"}
-                  pt={"md"}
-                  onClick={() => {
-                    router.replace(e.path);
-                    setHotMenu(e.id);
-                  }}
-                >
-                  <Center>
-                    <Stack align="center" spacing={0}>
-                      <ActionIcon
-                        variant="transparent"
-                        c={hotMenu === e.id ? "blue" : "white"}
+          <Footer height={"10vh"} bg={"black"}>
+            {/* {value} */}
+            <Stack justify="center" h={"100%"}>
+              <Grid>
+                {listFooter.map((e) => (
+                  <Grid.Col key={e.id} span={"auto"} pt={"md"}>
+                    <Center>
+                      <Stack
+                        align="center"
+                        spacing={0}
+                        onClick={() => {
+                          router.replace(e.path);
+                          setHotMenu(e.id);
+                        }}
                       >
-                        {e.icon}
-                      </ActionIcon>
-                      <Text fz={10} c={hotMenu === e.id ? "blue" : "white"}>
-                        {e.name}
-                      </Text>
-                    </Stack>
-                  </Center>
-                </Grid.Col>
-              ))}
-            </Grid>
+                        <ActionIcon
+                          variant="transparent"
+                          c={hotMenu === e.id ? "blue" : "white"}
+                        >
+                          {e.icon}
+                        </ActionIcon>
+                        <Text fz={10} c={hotMenu === e.id ? "blue" : "white"}>
+                          {e.name}
+                        </Text>
+                      </Stack>
+                    </Center>
+                  </Grid.Col>
+                ))}
+              </Grid>
+            </Stack>
           </Footer>
         }
       >
         {children}
-      </AppShell>
+      </AppComponentGlobal_LayoutTamplate>
     </>
   );
 }