# Project Collaboration

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

src/app_modules/colab/main/beranda.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
+import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
+import {
+  ActionIcon,
+  Affix,
+  Card,
+  Center,
+  Grid,
+  Paper,
+  Stack,
+  Text,
+  Textarea,
+  Title,
+  rem,
+} from "@mantine/core";
+import { useWindowScroll } from "@mantine/hooks";
+import { IconPencilPlus } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import ComponentColab_CardSectionData from "../component/card_view/card_section_data";
+import ComponentColab_SectionHeaderAuthorName from "../component/card_view/card_section_header_author_name";
+import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
+import ComponentColab_CardSectionHeaderAuthorName from "../component/card_view/card_section_header_author_name";
+
+export default function Colab_Beranda() {
+  const router = useRouter();
+  const [scroll, scrollTo] = useWindowScroll();
+  const [loadingCreate, setLoadingCreate] = useState(false);
+
+  return (
+    <>
+      <Affix position={{ bottom: rem(100), right: rem(30) }}>
+        <ActionIcon
+          loading={loadingCreate ? true : false}
+          opacity={scroll.y > 0 ? 0.5 : ""}
+          style={{
+            transition: "0.5s",
+          }}
+          size={"xl"}
+          radius={"xl"}
+          variant="transparent"
+          bg={"blue"}
+          onClick={() => {
+            setLoadingCreate(true);
+            router.push(RouterColab.create);
+          }}
+        >
+          <IconPencilPlus color="white" />
+        </ActionIcon>
+      </Affix>
+
+      {Array(5)
+        .fill(0)
+        .map((e, i) => (
+          <Card key={i} withBorder shadow="lg" mb={"lg"} radius={"md"}>
+            <ComponentColab_CardSectionHeaderAuthorName tglPublish={new Date} jumlah_partisipan={12} />
+            <ComponentColab_CardSectionData
+              colabId={i}
+              path={RouterColab.main_detail}
+            />
+          </Card>
+        ))}
+    </>
+  );
+}

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

@@ -0,0 +1,41 @@
+"use client";
+
+import { Center, Grid, Group, 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";
+
+export default function Colab_GrupDiskus() {
+  const router = useRouter();
+  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>
+                    <IconChevronRight color="gray" />
+                  </Center>
+                </Grid.Col>
+              </Grid>
+            </Paper>
+          ))}
+      </Stack>
+    </>
+  );
+}

src/app_modules/colab/main/layout.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import {
+  ActionIcon,
+  AppShell,
+  Center,
+  Footer,
+  Grid,
+  Stack,
+  Text,
+} from "@mantine/core";
+import React, { useState } from "react";
+import ComponentColab_HeaderTamplate from "../component/header_tamplate";
+import router from "next/router";
+import {
+  IconHistory,
+  IconHome,
+  IconMessages,
+  IconReservedLine,
+  IconUsersGroup,
+} from "@tabler/icons-react";
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+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";
+
+export default function LayoutColab_Main({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const [hotMenu, setHotMenu] = useAtom(gs_colab_hot_menu);
+  const [loading, setLoading] = useState(false);
+
+  const listFooter = [
+    {
+      id: 1,
+      name: "Beranda",
+      path: RouterColab.beranda,
+      icon: <IconHome />,
+    },
+
+    {
+      id: 2,
+      name: "Status",
+      path: RouterColab.status,
+      icon: <IconReservedLine />,
+    },
+
+    {
+      id: 3,
+      name: "Partisipasi",
+      path: RouterColab.proyek,
+      icon: <IconUsersGroup />,
+    },
+
+    {
+      id: 4,
+      name: "Grup Diskusi",
+      path: RouterColab.grup_diskusi,
+      icon: <IconMessages />,
+    },
+  ];
+
+  return (
+    <>
+      <AppShell
+        header={
+          <ComponentColab_HeaderTamplate
+            title="Project Collaboration"
+            route={RouterHome.main_home}
+            // icon={<IconUsersGroup />}
+            // route2={RouterColab.proyek}
+          />
+        }
+        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"}
+                      >
+                        {e.icon}
+                      </ActionIcon>
+                      <Text fz={10} c={hotMenu === e.id ? "blue" : "white"}>
+                        {e.name}
+                      </Text>
+                    </Stack>
+                  </Center>
+                </Grid.Col>
+              ))}
+            </Grid>
+          </Footer>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

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

@@ -0,0 +1,58 @@
+"use client";
+
+import { Stack, Tabs, Text } from "@mantine/core";
+import { IconBrandOffice, IconUsersGroup, IconUser } from "@tabler/icons-react";
+import { useState } from "react";
+import Colab_ProyekSaya from "./saya";
+import Colab_PartisipasiProyek from "./partisipasi";
+import { useAtom } from "jotai";
+import { gs_colab_proyek } from "../../global_state";
+
+export default function Colab_Proyek() {
+  const [activeTab, setActiveTab] = useAtom(gs_colab_proyek);
+
+  const listTabs = [
+    {
+      id: 1,
+      icon: <IconUsersGroup />,
+      label: "Partisipasi Proyek",
+      value: "Partisipasi",
+      path: <Colab_PartisipasiProyek />,
+    },
+    {
+      id: 2,
+      icon: <IconUser />,
+      label: "Proyek Saya",
+      value: "Saya",
+      path: <Colab_ProyekSaya />,
+    },
+  ];
+
+  return (
+    <Tabs variant="pills" value={activeTab} onTabChange={setActiveTab}>
+      <Stack>
+        <Tabs.List grow>
+          {listTabs.map((e) => (
+            <Tabs.Tab
+              key={e.id}
+              value={e.value}
+              bg={activeTab === e.value ? "blue" : "gray.2"}
+              fw={activeTab === e.value ? "bold" : "normal"}
+            >
+              <Stack align="center" justify="center" spacing={0}>
+                {e.icon}
+                <Text>{e.label}</Text>
+              </Stack>
+            </Tabs.Tab>
+          ))}
+        </Tabs.List>
+
+        {listTabs.map((e) => (
+          <Tabs.Panel key={e.id} value={e.value}>
+            {e.path}
+          </Tabs.Panel>
+        ))}
+      </Stack>
+    </Tabs>
+  );
+}

src/app_modules/colab/main/proyek/partisipasi.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import { Card } from "@mantine/core";
+import ComponentColab_CardSectionData from "../../component/card_view/card_section_data";
+import ComponentColab_CardSectionHeaderAuthorName from "../../component/card_view/card_section_header_author_name";
+
+export default function Colab_PartisipasiProyek() {
+  return (
+    <>
+      {Array(5)
+        .fill(0)
+        .map((e, i) => (
+          <Card
+            key={i}
+            withBorder
+            shadow="lg"
+            mb={"lg"}
+            radius={"md"}
+            style={{ borderColor: "indigo", borderWidth: "0.5px" }}
+          >
+            <ComponentColab_CardSectionHeaderAuthorName
+              tglPublish={new Date()}
+              jumlah_partisipan={12}
+            />
+            <ComponentColab_CardSectionData
+              colabId={i}
+              path={RouterColab.partisipasi_proyek}
+            />
+          </Card>
+        ))}
+    </>
+  );
+}

src/app_modules/colab/main/proyek/saya.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import { Card, Stack } from "@mantine/core";
+import ComponentColab_CardSectionData from "../../component/card_view/card_section_data";
+import ComponentColab_CardSectionHeaderAuthorName from "../../component/card_view/card_section_header_author_name";
+import ComponentColab_JumlahPartisipan from "../../component/card_view/jumlah_partisipan";
+
+export default function Colab_ProyekSaya() {
+  return (
+    <>
+      {Array(5)
+        .fill(0)
+        .map((e, i) => (
+          <Card
+            key={i}
+            withBorder
+            shadow="lg"
+            mb={"lg"}
+            radius={"md"}
+            style={{ borderColor: "violet", borderWidth: "0.5px" }}
+          >
+            <Stack>
+              <ComponentColab_CardSectionData
+                colabId={i}
+                path={RouterColab.status_publish}
+              />
+              <ComponentColab_JumlahPartisipan />
+            </Stack>
+          </Card>
+        ))}
+    </>
+  );
+}

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

@@ -0,0 +1,78 @@
+"use client";
+
+import { Tabs, Stack, Paper } from "@mantine/core";
+import { useState } from "react";
+import Colab_StatusPublish from "./publish";
+import Colab_StatusReject from "./reject";
+import Colab_StatusReview from "./review";
+import { useAtom } from "jotai";
+import { gs_colab_status } from "../../global_state";
+
+export default function Colab_Status() {
+  const [tabsStatus, setTabsStatus] = useAtom(gs_colab_status);
+  const [colorTab, setColorTab] = useState<string | null>("");
+
+  const listTabs = [
+    {
+      id: 1,
+      path: <Colab_StatusPublish />,
+      value: "Publish",
+      bg: "green",
+    },
+    {
+      id: 2,
+      path: <Colab_StatusReview />,
+      value: "Review",
+      bg: "orange",
+    },
+    {
+      id: 3,
+      path: <Colab_StatusReject />,
+      value: "Reject",
+      bg: "red",
+    },
+  ];
+
+  return (
+    <>
+      <Tabs
+        color={
+          "blue"
+          // colorTab === "Publish"
+          // ? "green"
+          // : colorTab === "Review"
+          // ? "orange"
+          // : "red"
+        }
+        variant="pills"
+        radius={"xl"}
+        defaultValue={"Publish"}
+        value={tabsStatus}
+        onTabChange={(val) => {
+          setTabsStatus(val);
+          // setColorTab(val);
+        }}
+      >
+        <Stack>
+          <Tabs.List grow>
+            {listTabs.map((e) => (
+              <Tabs.Tab
+                key={e.id}
+                value={e.value}
+                bg={tabsStatus === e.value ? "cyan" : "gray.2"}
+                fw={tabsStatus === e.value ? "bold" : "normal"}
+              >
+                {e.value}
+              </Tabs.Tab>
+            ))}
+          </Tabs.List>
+          {listTabs.map((e) => (
+            <Tabs.Panel key={e.id} value={e.value}>
+              {e.path}
+            </Tabs.Panel>
+          ))}
+        </Stack>
+      </Tabs>
+    </>
+  );
+}

src/app_modules/colab/main/status/publish.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
+import { Card, Stack, Grid, Text, Divider, Center, Box } from "@mantine/core";
+import ComponentColab_CardSectionData from "../../component/card_view/card_section_data";
+import ComponentColab_AuthorNameOnHeader from "../../component/header_author_name";
+import ComponentColab_CardSectionHeaderAuthorName from "../../component/card_view/card_section_header_author_name";
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import ComponentColab_JumlahPartisipan from "../../component/card_view/jumlah_partisipan";
+
+export default function Colab_StatusPublish() {
+  return (
+    <>
+      {Array(5)
+        .fill(0)
+        .map((e, i) => (
+          <Card
+            key={i}
+            withBorder
+            shadow="lg"
+            mb={"lg"}
+            radius={"md"}
+            // bg={"green.0.5"}
+            style={{ borderColor: "green", borderWidth: "0.5px" }}
+          >
+            <Stack>
+              <ComponentColab_CardSectionData
+                colabId={i}
+                path={RouterColab.status_publish}
+              />
+              <ComponentColab_JumlahPartisipan/>
+            </Stack>
+          </Card>
+        ))}
+    </>
+  );
+}

src/app_modules/colab/main/status/reject.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { Card } from "@mantine/core";
+import ComponentColab_CardSectionData from "../../component/card_view/card_section_data";
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+
+export default function Colab_StatusReject() {
+  return (
+    <>
+      {Array(5)
+        .fill(0)
+        .map((e, i) => (
+          <Card
+            key={i}
+            withBorder
+            shadow="lg"
+            mb={"lg"}
+            radius={"md"}
+            // bg={"red.1"}
+
+            style={{ borderColor: "red", borderWidth: "0.5px" }}
+          >
+            <ComponentColab_CardSectionData
+              colabId={i}
+              path={RouterColab.status_reject}
+            />
+          </Card>
+        ))}
+    </>
+  );
+}

src/app_modules/colab/main/status/review.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { Card } from "@mantine/core";
+import ComponentColab_CardSectionData from "../../component/card_view/card_section_data";
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+
+export default function Colab_StatusReview() {
+  return (
+    <>
+      {Array(5)
+        .fill(0)
+        .map((e, i) => (
+          <Card
+            key={i}
+            withBorder
+            shadow="lg"
+            mb={"lg"}
+            radius={"md"}
+            // bg={"orange.0.5"}
+            style={{ borderColor: "orange", borderWidth: "0.5px" }}
+          >
+            <ComponentColab_CardSectionData colabId={i} path={RouterColab.status_review} />
+          </Card>
+        ))}
+    </>
+  );
+}