# Project Collaboration

## feat
- Tampilan beranda & detailnya
- Tampilan status & detailnya
- Tampilan partisipasi & detailnya
- Tampilan grup diskusi & detailnya
### No issue

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

@@ -0,0 +1,65 @@
+"use client";
+
+import {
+  ActionIcon,
+  Affix,
+  Box,
+  Button,
+  Grid,
+  ScrollArea,
+  Stack,
+  TextInput,
+  Textarea,
+  Transition,
+  rem,
+} from "@mantine/core";
+import { useShallowEffect, useWindowScroll } from "@mantine/hooks";
+import { useAtom } from "jotai";
+import { useState } from "react";
+import { gs_colab_pesan } from "../../global_state";
+import { IconArrowUp, IconSend } from "@tabler/icons-react";
+
+export default function Colab_DetailGrupDiskusi() {
+  const [pesan, setPesan] = useState("");
+  const [obrolan, setObrolan] = useState<string[]>([]);
+  const [scroll, scrollTo] = useWindowScroll();
+
+  async function onSend() {
+    // setObrolan(pesan); 
+    setPesan("")
+  }
+
+  return (
+    <>
+      <ScrollArea>{obrolan}</ScrollArea>
+
+      <Affix position={{ bottom: rem(10) }} w={"100%"}>
+        <Stack justify="center" h={"100%"} px={"sm"}>
+          <Grid align="center">
+            <Grid.Col span={"auto"}>
+              <Textarea
+                minRows={1}
+                radius={"md"}
+                placeholder="Pesan..."
+                value={pesan}
+                onChange={(val) => setPesan(val.currentTarget.value)}
+              />
+            </Grid.Col>
+            <Grid.Col span={"content"}>
+              <ActionIcon
+                variant="outline"
+                radius={"xl"}
+                size={"lg"}
+                onClick={() => {
+                  onSend();
+                }}
+              >
+                <IconSend size={20} />
+              </ActionIcon>
+            </Grid.Col>
+          </Grid>
+        </Stack>
+      </Affix>
+    </>
+  );
+}

src/app_modules/colab/detail/grup/layout.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import {
+  ActionIcon,
+  AppShell,
+  Center,
+  Footer,
+  Grid,
+  Group,
+  Stack,
+  TextInput,
+  Textarea,
+} from "@mantine/core";
+import React, { useState } from "react";
+import ComponentColab_HeaderTamplate from "../../component/header_tamplate";
+import { IconPlane, IconSend } from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import { gs_colab_pesan } from "../../global_state";
+
+export default function LayoutColab_DetailGrupDiskusi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [pesan, setPesan] = useState("");
+
+  async function onSend() {
+    console.log(pesan);
+  }
+  return (
+    <>
+      <AppShell
+        header={<ComponentColab_HeaderTamplate title="Nama Grup Diskusi" />}
+        // footer={
+        //   <Footer height={60}>
+        //     <Stack justify="center" h={"100%"} px={"sm"}>
+        //       <Grid align="center">
+        //         <Grid.Col span={"auto"}>
+        //           <Textarea
+        //             minRows={1}
+        //             radius={"md"}
+        //             placeholder="Pesan..."
+        //             onChange={(val) => setPesan(val.currentTarget.value)}
+        //           />
+        //         </Grid.Col>
+        //         <Grid.Col span={"content"}>
+        //           <ActionIcon
+        //             variant="outline"
+        //             radius={"xl"}
+        //             size={"lg"}
+        //             onClick={() => onSend()}
+        //           >
+        //             <IconSend size={20} />
+        //           </ActionIcon>
+        //         </Grid.Col>
+        //       </Grid>
+        //     </Stack>
+        //   </Footer>
+        // }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/colab/detail/main_detail/index.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
+import {
+  Box,
+  Button,
+  Center,
+  Grid,
+  Paper,
+  ScrollArea,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import ComponentColab_AuthorNameOnHeader from "../../component/header_author_name";
+import { useState } from "react";
+import ComponentColab_ButtonPartisipasi from "../../component/detail/button_partisipasi";
+import ComponentColab_DetailListPartisipasiUser from "../../component/detail/list_partisipasi_user";
+import ComponentColab_DetailData from "../../component/detail/detail_data";
+
+export default function Colab_MainDetail() {
+  return (
+    <>
+      <Stack px={5} spacing={"lg"}>
+        <ComponentColab_AuthorNameOnHeader tglPublish={new Date}/>
+        <ComponentColab_DetailData />
+        <ComponentColab_ButtonPartisipasi />
+        <ComponentColab_DetailListPartisipasiUser />
+      </Stack>
+    </>
+  );
+}

src/app_modules/colab/detail/main_detail/layout.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import React from "react";
+import ComponentColab_HeaderTamplate from "../../component/header_tamplate";
+
+export default function LayoutColab_MainDetail({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        header={<ComponentColab_HeaderTamplate title="Detail" />}
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/colab/detail/proyek/partisipasi/index.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import ComponentColab_DetailData from "@/app_modules/colab/component/detail/detail_data";
+import ComponentColab_DetailListPartisipasiUser from "@/app_modules/colab/component/detail/list_partisipasi_user";
+import ComponentColab_AuthorNameOnHeader from "@/app_modules/colab/component/header_author_name";
+import { Stack, Text } from "@mantine/core";
+
+export default function Colab_DetailPartisipasiProyek() {
+  return (
+    <>
+      <Stack px={5} spacing={"xl"}>
+        <ComponentColab_AuthorNameOnHeader />
+        <ComponentColab_DetailData />
+        <ComponentColab_DetailListPartisipasiUser />
+      </Stack>
+    </>
+  );
+}

src/app_modules/colab/detail/proyek/partisipasi/layout.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import ComponentColab_HeaderTamplate from "@/app_modules/colab/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+
+export default function LayoutColab_DetailPartisipasiProyek({
+  children,
+}: {
+  children: any;
+}) {
+  return (
+    <>
+      <AppShell header={<ComponentColab_HeaderTamplate title="Detail Partisipan"/>}>{children}</AppShell>
+    </>
+  );
+}

src/app_modules/colab/detail/status/publish/index.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import ComponentColab_DetailData from "@/app_modules/colab/component/detail/detail_data";
+import ComponentColab_DetailListPartisipasiUser from "@/app_modules/colab/component/detail/list_partisipasi_user";
+import ComponentColab_AuthorNameOnHeader from "@/app_modules/colab/component/header_author_name";
+import { gs_colab_hot_menu } from "@/app_modules/colab/global_state";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import {
+  Button,
+  Checkbox,
+  Drawer,
+  Grid,
+  Group,
+  Paper,
+  ScrollArea,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { useAtom } from "jotai";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function Colab_DetailStatusPublish() {
+  return (
+    <>
+      <Stack px={5} spacing={"xl"}>
+        <ComponentColab_DetailData />
+        <CheckBoxPartisipan />
+      </Stack>
+    </>
+  );
+}
+
+function CheckBoxPartisipan() {
+  const router = useRouter();
+  const [value, setValue] = useState<string[]>([]);
+  const [opened, { open, close }] = useDisclosure(false);
+  const [hotMenu, setHotMenu] = useAtom(gs_colab_hot_menu);
+
+  const listCheck = [
+    {
+      id: 1,
+      value: "satu",
+      label: "Satu",
+    },
+    {
+      id: 2,
+      value: "dua",
+      label: "Dua",
+    },
+    {
+      id: 3,
+      value: "tiga",
+      label: "Tiga",
+    },
+    {
+      id: 4,
+      value: "empat",
+      label: "Empat",
+    },
+    {
+      id: 5,
+      value: "lima",
+      label: "Lima",
+    },
+    {
+      id: 6,
+      value: "enam",
+      label: "Enam",
+    },
+    {
+      id: 7,
+      value: "tujuh",
+      label: "Tujuh",
+    },
+    {
+      id: 8,
+      value: "delapan",
+      label: "Delapan",
+    },
+    {
+      id: 9,
+      value: "sembilan",
+      label: "Sembilan",
+    },
+    {
+      id: 10,
+      value: "sepuluh",
+      label: "Sepuluh",
+    },
+  ];
+
+  async function onSave() {
+    close();
+    ComponentGlobal_NotifikasiBerhasil("Berhasil Membuat Grup");
+    setHotMenu(4);
+    router.push(RouterColab.grup_diskusi);
+  }
+
+  return (
+    <>
+      <Stack>
+        <Paper withBorder shadow="lg" p={"sm"}>
+          <Text c={"red"} fz={10}>
+            *
+            <Text px={"xs"} span inherit c={"gray"}>
+              Pilih user yang akan menjadi tim proyek anda
+            </Text>
+          </Text>
+          <ScrollArea h={400}>
+            <Checkbox.Group value={value} onChange={setValue}>
+              <Stack mt="xs">
+                {listCheck.map((e, i) => (
+                  <Grid key={e.id} align="center">
+                    <Grid.Col span={"content"}>
+                      <Checkbox value={e.value} />
+                    </Grid.Col>
+                    <Grid.Col span={"auto"}>
+                      <ComponentColab_AuthorNameOnHeader isPembatas={true} />
+                    </Grid.Col>
+                  </Grid>
+                ))}
+              </Stack>
+            </Checkbox.Group>
+          </ScrollArea>
+        </Paper>
+        <Button
+          radius={"xl"}
+          disabled={_.isEmpty(value) ? true : false}
+          onClick={() => {
+            open();
+          }}
+        >
+          Buat Ruang Diskusi{" "}
+        </Button>
+      </Stack>
+
+      <Drawer
+        opened={opened}
+        onClose={close}
+        position="bottom"
+        size={150}
+        withCloseButton={false}
+      >
+        <Stack>
+          <Title order={6}>Nama Grup Diskusi</Title>
+          <TextInput placeholder="Masukan nama grup diskusi .." radius={"xl"} />
+          <Group grow>
+            <Button radius={"xl"} onClick={close}>
+              Batal
+            </Button>
+            <Button radius={"xl"} color="green" onClick={() => onSave()}>
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Drawer>
+    </>
+  );
+}

src/app_modules/colab/detail/status/publish/layout.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import ComponentColab_HeaderTamplate from "@/app_modules/colab/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+import { IconEdit } from "@tabler/icons-react";
+import React from "react";
+
+export default function LayoutColab_DetailStatusPublish({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        header={
+          <ComponentColab_HeaderTamplate
+            title="Proyek Saya"
+          />
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/colab/detail/status/reject/index.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import ComponentColab_NotedBox from "@/app_modules/colab/component/noted_box";
+import ComponentColab_DetailData from "@/app_modules/colab/component/detail/detail_data";
+import { Button, Group, Modal, Stack, Title } from "@mantine/core";
+import { IconCheck, IconTrash, IconX } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { gs_colab_status } from "@/app_modules/colab/global_state";
+import { useAtom } from "jotai";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { useDisclosure } from "@mantine/hooks";
+
+export default function Colab_DetailStatusReject() {
+  return (
+    <>
+      <Stack px={"xs"} spacing={"xl"}>
+        <ComponentColab_NotedBox informasi="Alasan penolakan" />
+        <ComponentColab_DetailData />
+        <ButtonAction />
+      </Stack>
+    </>
+  );
+}
+
+function ButtonAction() {
+  const router = useRouter();
+  const [tabsStatus, setTabsStatus] = useAtom(gs_colab_status);
+  const [opened, { open, close }] = useDisclosure(false);
+
+  async function onAjukan() {
+    setTabsStatus("Review");
+    ComponentGlobal_NotifikasiBerhasil("Ajukan Review Berhasil");
+    router.back();
+  }
+
+  async function onDelete() {
+    router.back();
+    ComponentGlobal_NotifikasiBerhasil("Berhasil Dihapus");
+  }
+
+  return (
+    <>
+      <Group grow>
+        <Button
+          radius={"xl"}
+          leftIcon={<IconCheck size={15} />}
+          onClick={() => onAjukan()}
+        >
+          Ajukan Review
+        </Button>
+        <Button
+          radius={"xl"}
+          leftIcon={<IconTrash size={15} />}
+          color="red"
+          onClick={() => open()}
+        >
+          Hapus
+        </Button>
+      </Group>
+
+      <Modal opened={opened} onClose={close} centered withCloseButton={false}>
+        <Stack>
+          <Title order={6}>Yakin menghapus proyek ini ?</Title>
+          <Group position="center">
+            <Button
+              radius={"xl"}
+              leftIcon={<IconX size={15} />}
+              onClick={close}
+            >
+              Batal
+            </Button>
+            <Button
+              radius={"xl"}
+              leftIcon={<IconTrash size={15} />}
+              color="red"
+              onClick={() => onDelete()}
+            >
+              Hapus
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </>
+  );
+}

src/app_modules/colab/detail/status/reject/layout.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import ComponentColab_HeaderTamplate from "@/app_modules/colab/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+import { IconEdit } from "@tabler/icons-react";
+import React from "react";
+
+export default function LayoutColab_DetailStatusReject({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        header={
+          <ComponentColab_HeaderTamplate
+            title="Detail Reject"
+            icon={<IconEdit />}
+            route2={RouterColab.edit + 1}
+          />
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/colab/detail/status/review/index.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import ComponentColab_DetailData from "@/app_modules/colab/component/detail/detail_data";
+import ComponentColab_AuthorNameOnHeader from "@/app_modules/colab/component/header_author_name";
+import { gs_colab_status } from "@/app_modules/colab/global_state";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { Button, Stack } from "@mantine/core";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+
+export default function Colab_DetailStatusReview() {
+  return (
+    <>
+      <Stack px={"xs"} spacing={"xl"}>
+        <ComponentColab_DetailData />
+        <ButtonAction />
+      </Stack>
+    </>
+  );
+}
+
+function ButtonAction() {
+  const router = useRouter();
+  const [tabsStatus, setTabsStatus] = useAtom(gs_colab_status);
+
+  async function onClick() {
+    setTabsStatus("Reject");
+    router.back();
+    ComponentGlobal_NotifikasiBerhasil("Berhasil Dibatalkan");
+  }
+
+  return (
+    <>
+      <Button radius={"xl"} onClick={() => onClick()}>
+        Batalkan Review
+      </Button>
+    </>
+  );
+}

src/app_modules/colab/detail/status/review/layout.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import ComponentColab_HeaderTamplate from "@/app_modules/colab/component/header_tamplate";
+import { AppShell } from "@mantine/core";
+import React from "react";
+
+export default function LayoutColab_DetailStatusReview({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <AppShell
+        header={<ComponentColab_HeaderTamplate title="Detail Review" />}
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}