Collaboration & Create Porotofolio

This commit is contained in:
2025-01-05 15:53:41 +08:00
parent 18bd4efed1
commit b1573af1b8
29 changed files with 368 additions and 214 deletions

View File

@@ -1,5 +1,6 @@
"use client";
import { MainColor } from "@/app_modules/_global/color";
import { Card, Center, Divider, Grid, Stack, Text } from "@mantine/core";
export default function ComponentColab_JumlahPartisipan({
@@ -15,12 +16,12 @@ export default function ComponentColab_JumlahPartisipan({
<Center>
<Grid>
<Grid.Col span={"content"}>
<Text c={"white"} fz={"xs"} fw={"bold"}>
<Text c={MainColor.white} fz={"xs"} fw={"bold"}>
{jumlah?.length ? jumlah?.length : 0}
</Text>
</Grid.Col>
<Grid.Col span={"auto"}>
<Text c={"white"} fz={"xs"} fw={"bold"}>
<Text c={MainColor.white} fz={"xs"} fw={"bold"}>
Partisipan
</Text>
</Grid.Col>

View File

@@ -1,5 +1,5 @@
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
import { Paper, Grid, Stack, Center, Loader, Text } from "@mantine/core";
import { IconChevronRight } from "@tabler/icons-react";
@@ -17,7 +17,7 @@ export function ComponentColab_CardGrup({ data }: { data: any }) {
style={{
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
color: "white",
color: MainColor.white,
borderRadius: "10px",
marginBottom: "20px",
padding: "15px",
@@ -37,7 +37,7 @@ export function ComponentColab_CardGrup({ data }: { data: any }) {
<Text fw={"bold"} lineClamp={1}>
{data?.ProjectCollaboration_RoomChat?.name}
</Text>
<Text fz={"xs"} c={"white"}>
<Text fz={"xs"} >
{
data?.ProjectCollaboration_RoomChat
?.ProjectCollaboration_AnggotaRoomChat.length
@@ -51,7 +51,7 @@ export function ComponentColab_CardGrup({ data }: { data: any }) {
{data?.ProjectCollaboration_RoomChat?.id === idRoom ? (
<ComponentGlobal_Loader />
) : (
<IconChevronRight color="white" />
<IconChevronRight color={MainColor.white} />
)}
</Center>
</Grid.Col>

View File

@@ -1,4 +1,5 @@
import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Center, Grid, Group, Skeleton, Stack } from "@mantine/core";
export {
@@ -16,27 +17,27 @@ function Collaboration_SkeletonCreate() {
<>
<Stack px={"xl"} spacing={"md"}>
<Stack spacing={"xs"}>
<Skeleton height={15} width={50} />
<Skeleton height={40} />
<CustomSkeleton height={15} width={50} />
<CustomSkeleton height={40} />
</Stack>
<Stack spacing={"xs"}>
<Skeleton height={15} width={50} />
<Skeleton height={40} />
<CustomSkeleton height={15} width={50} />
<CustomSkeleton height={40} />
</Stack>
<Stack spacing={"xs"}>
<Skeleton height={15} width={50} />
<Skeleton height={40} />
<CustomSkeleton height={15} width={50} />
<CustomSkeleton height={40} />
</Stack>
<Stack spacing={"xs"}>
<Skeleton height={15} width={50} />
<Skeleton height={130} />
<CustomSkeleton height={15} width={50} />
<CustomSkeleton height={130} />
</Stack>
<Stack spacing={"xs"}>
<Skeleton height={15} width={50} />
<Skeleton height={130} />
<CustomSkeleton height={15} width={50} />
<CustomSkeleton height={130} />
</Stack>
<Skeleton mt={50} height={40} radius={"xl"} />
<CustomSkeleton mt={50} height={40} radius={"xl"} />
</Stack>
</>
);
@@ -50,45 +51,45 @@ function Collaboration_SkeletonBeranda() {
<Stack spacing={"xl"}>
<Grid align="center" gutter={"md"}>
<Grid.Col span={"content"}>
<Skeleton circle height={40} />
<CustomSkeleton circle height={40} />
</Grid.Col>
<Grid.Col span={3}>
<Skeleton height={20} w={150} />
<CustomSkeleton height={20} w={150} />
</Grid.Col>
{/* <Grid.Col span={3} offset={3}>
<Skeleton height={20} w={150} />
<CustomSkeleton height={20} w={150} />
</Grid.Col> */}
</Grid>
<Center>
<Skeleton height={15} w={200} />
<CustomSkeleton height={15} w={200} />
</Center>
<Grid align="center" gutter={"md"}>
<Grid.Col span={"content"}>
<Skeleton h={15} w={70} />
<CustomSkeleton h={15} w={70} />
</Grid.Col>
<Grid.Col span={3}>
<Skeleton height={15} w={200} />
<CustomSkeleton height={15} w={200} />
</Grid.Col>
</Grid>
<Grid align="center" gutter={"md"}>
<Grid.Col span={"content"}>
<Skeleton h={15} w={70} />
<CustomSkeleton h={15} w={70} />
</Grid.Col>
<Grid.Col span={3}>
<Skeleton height={15} w={200} />
<CustomSkeleton height={15} w={200} />
</Grid.Col>
</Grid>
<Stack spacing={"md"}>
<Skeleton height={15} w={150} />
<Skeleton height={15} w={"100%"} />
<Skeleton height={15} w={"100%"} />
<CustomSkeleton height={15} w={150} />
<CustomSkeleton height={15} w={"100%"} />
<CustomSkeleton height={15} w={"100%"} />
</Stack>
<Center>
<Skeleton height={15} w={100} />
<CustomSkeleton height={15} w={100} />
</Center>
</Stack>
</ComponentGlobal_CardStyles>
@@ -104,11 +105,11 @@ function Collaboration_SkeletonGrup() {
<ComponentGlobal_CardStyles marginBottom={"15px"} key={i}>
<Group position="apart">
<Stack>
<Skeleton h={15} w={100} />
<Skeleton h={15} w={50} />
<CustomSkeleton h={15} w={100} />
<CustomSkeleton h={15} w={50} />
</Stack>
<Skeleton circle height={20} />
<CustomSkeleton circle height={20} />
</Group>
</ComponentGlobal_CardStyles>
))}
@@ -123,38 +124,38 @@ function Collaboration_SkeletonDetail() {
<Stack spacing={"xl"}>
<Grid align="center" gutter={"md"}>
<Grid.Col span={"content"}>
<Skeleton circle height={40} />
<CustomSkeleton circle height={40} />
</Grid.Col>
<Grid.Col span={3}>
<Skeleton height={20} w={150} />
<CustomSkeleton height={20} w={150} />
</Grid.Col>
</Grid>
<Center>
<Skeleton height={20} w={200} />
<CustomSkeleton height={20} w={200} />
</Center>
<Grid align="center" gutter={"md"}>
<Grid.Col span={"content"}>
<Skeleton h={20} w={70} />
<CustomSkeleton h={20} w={70} />
</Grid.Col>
<Grid.Col span={3}>
<Skeleton height={20} w={200} />
<CustomSkeleton height={20} w={200} />
</Grid.Col>
</Grid>
<Grid align="center" gutter={"md"}>
<Grid.Col span={"content"}>
<Skeleton h={20} w={70} />
<CustomSkeleton h={20} w={70} />
</Grid.Col>
<Grid.Col span={3}>
<Skeleton height={20} w={200} />
<CustomSkeleton height={20} w={200} />
</Grid.Col>
</Grid>
<Skeleton height={20} w={100} />
<Skeleton height={20} w={"100%"} />
<Skeleton height={20} w={100} />
<Skeleton height={20} w={"100%"} />
<CustomSkeleton height={20} w={100} />
<CustomSkeleton height={20} w={"100%"} />
<CustomSkeleton height={20} w={100} />
<CustomSkeleton height={20} w={"100%"} />
</Stack>
</ComponentGlobal_CardStyles>
</>
@@ -168,16 +169,16 @@ function Collaboration_SkeletonListPrtisipanIsUser() {
<ComponentGlobal_CardStyles marginBottom={"0"}>
<Stack>
<Center>
<Skeleton h={20} w={100} />
<CustomSkeleton h={20} w={100} />
</Center>
{Array.from(new Array(2)).map((e, i) => (
<Grid align="center" gutter={"md"} key={i}>
<Grid.Col span={"content"}>
<Skeleton circle height={40} />
<CustomSkeleton circle height={40} />
</Grid.Col>
<Grid.Col span={3}>
<Skeleton height={20} w={150} />
<CustomSkeleton height={20} w={150} />
</Grid.Col>
</Grid>
))}
@@ -193,21 +194,21 @@ function Collaboration_SkeletonListPartisipan() {
<>
<Stack>
<Center>
<Skeleton h={40} w={150} radius={"xl"} />
<CustomSkeleton h={40} w={150} radius={"xl"} />
</Center>
<ComponentGlobal_CardStyles marginBottom={"0"}>
<Stack>
<Center>
<Skeleton h={20} w={100} />
<CustomSkeleton h={20} w={100} />
</Center>
{Array.from(new Array(2)).map((e, i) => (
<Grid align="center" gutter={"md"} key={i}>
<Grid.Col span={"content"}>
<Skeleton circle height={40} />
<CustomSkeleton circle height={40} />
</Grid.Col>
<Grid.Col span={3}>
<Skeleton height={20} w={150} />
<CustomSkeleton height={20} w={150} />
</Grid.Col>
</Grid>
))}
@@ -225,47 +226,47 @@ function Collaboration_SkeletonDetailInfoGroup() {
<ComponentGlobal_CardStyles marginBottom={"0"}>
<Stack spacing={"xl"}>
<Center>
<Skeleton height={20} w={200} />
<CustomSkeleton height={20} w={200} />
</Center>
<Grid align="center" gutter={"md"}>
<Grid.Col span={"content"}>
<Skeleton h={20} w={70} />
<CustomSkeleton h={20} w={70} />
</Grid.Col>
<Grid.Col span={3}>
<Skeleton height={20} w={200} />
<CustomSkeleton height={20} w={200} />
</Grid.Col>
</Grid>
<Grid align="center" gutter={"md"}>
<Grid.Col span={"content"}>
<Skeleton h={20} w={70} />
<CustomSkeleton h={20} w={70} />
</Grid.Col>
<Grid.Col span={3}>
<Skeleton height={20} w={200} />
<CustomSkeleton height={20} w={200} />
</Grid.Col>
</Grid>
<Skeleton height={20} w={100} />
<Skeleton height={20} w={"100%"} />
<Skeleton height={20} w={"100%"} />
<Skeleton height={20} w={100} />
<Skeleton height={20} w={"100%"} />
<Skeleton height={20} w={"100%"} />
<CustomSkeleton height={20} w={100} />
<CustomSkeleton height={20} w={"100%"} />
<CustomSkeleton height={20} w={"100%"} />
<CustomSkeleton height={20} w={100} />
<CustomSkeleton height={20} w={"100%"} />
<CustomSkeleton height={20} w={"100%"} />
</Stack>
</ComponentGlobal_CardStyles>
<ComponentGlobal_CardStyles marginBottom={"0"}>
<Stack>
<Skeleton h={20} w={100} />
<CustomSkeleton h={20} w={100} />
{Array.from(new Array(2)).map((e, i) => (
<Grid align="center" gutter={"md"} key={i}>
<Grid.Col span={"content"}>
<Skeleton circle height={40} />
<CustomSkeleton circle height={40} />
</Grid.Col>
<Grid.Col span={3}>
<Skeleton height={20} w={150} />
<CustomSkeleton height={20} w={150} />
</Grid.Col>
</Grid>
))}

View File

@@ -51,7 +51,7 @@ export default function Colab_Create() {
}
}
if (listIndustri == null) {
return (
<>
@@ -66,9 +66,9 @@ export default function Colab_Create() {
<TextInput
maxLength={100}
styles={{
label: {
color: "white",
},
label: { color: MainColor.white },
input: { backgroundColor: MainColor.white },
required: { color: MainColor.red },
}}
label="Judul"
withAsterisk
@@ -83,9 +83,9 @@ export default function Colab_Create() {
<TextInput
styles={{
label: {
color: "white",
},
label: { color: MainColor.white },
input: { backgroundColor: MainColor.white },
required: { color: MainColor.red },
}}
maxLength={100}
label="Lokasi"
@@ -101,9 +101,10 @@ export default function Colab_Create() {
<Select
styles={{
label: {
color: "white",
},
label: { color: MainColor.white },
input: { backgroundColor: MainColor.white },
required: { color: MainColor.red },
dropdown: { backgroundColor: MainColor.white },
}}
placeholder="Pilih kategori industri"
label="Pilih Industri"
@@ -123,9 +124,9 @@ export default function Colab_Create() {
<Stack spacing={5}>
<Textarea
styles={{
label: {
color: "white",
},
label: { color: MainColor.white },
input: { backgroundColor: MainColor.white },
required: { color: MainColor.red },
}}
maxLength={500}
label="Tujuan Proyek"
@@ -148,9 +149,8 @@ export default function Colab_Create() {
<Stack spacing={5}>
<Textarea
styles={{
label: {
color: "white",
},
label: { color: MainColor.white },
input: { backgroundColor: MainColor.white },
}}
maxLength={500}
label="Keuntungan "
@@ -210,10 +210,10 @@ function ButtonAction({ value }: { value: any }) {
<Button
disabled={
!value.title ||
!value.lokasi ||
!value.purpose ||
!value.benefit ||
value.projectCollaborationMaster_IndustriId === 0
!value.lokasi ||
!value.purpose ||
!value.benefit ||
value.projectCollaborationMaster_IndustriId === 0
? true
: false
}

View File

@@ -229,13 +229,13 @@ export default function Colab_GroupChatView({
{loadingBack ? (
<ComponentGlobal_Loader />
) : (
<IconChevronLeft color="white" />
<IconChevronLeft color={MainColor.white} />
)}
</ActionIcon>
</Grid.Col>
<Grid.Col span={8}>
<Center>
<Title c={"white"} order={5} lineClamp={1}>
<Title color={MainColor.white} order={5} lineClamp={1}>
{selectRoom?.name}
</Title>
</Center>
@@ -255,7 +255,7 @@ export default function Colab_GroupChatView({
{loadingInfo ? (
<ComponentGlobal_Loader />
) : (
<IconInfoSquareRounded color="white" />
<IconInfoSquareRounded color={MainColor.white} />
)}
</ActionIcon>
</Group>
@@ -380,10 +380,11 @@ export default function Colab_GroupChatView({
>
KIzRIM PESAN
</Button> */}
<Stack justify="center" h={"100%"} px={"sm"}>
<Stack justify="center" h={"100%"} px={"sm"}>
<Grid align="center">
<Grid.Col span={"auto"}>
<Textarea
styles={{ input: { backgroundColor: MainColor.white} }}
minRows={1}
radius={"md"}
placeholder="Ketik pesan anda..."
@@ -395,8 +396,12 @@ export default function Colab_GroupChatView({
<ActionIcon
disabled={msg === "" ? true : false}
variant="filled"
bg={AccentColor.softblue}
color={"cyan"}
styles={{
root: {
backgroundColor: MainColor.white,
},
}}
color={MainColor.darkblue}
radius={"xl"}
size={"xl"}
onClick={() => {

View File

@@ -127,7 +127,7 @@ function CheckBoxPartisipan() {
<Stack spacing={5}>
<Text c={"red"} fz={10}>
*
<Text px={"xs"} span inherit c={"white"}>
<Text px={"xs"} span inherit c={MainColor.white}>
Pilih user yang akan menjadi tim proyek anda
</Text>
</Text>
@@ -274,12 +274,13 @@ function ButtonAction({ value }: { value: string[] }) {
>
<Stack>
<Group position="apart">
<Title order={6}>Nama Grup Diskusi</Title>
<Title c={MainColor.white} order={6}>Nama Grup Diskusi</Title>
<ActionIcon onClick={close} variant="transparent">
<IconX color="white" />
<IconX color={MainColor.white} />
</ActionIcon>
</Group>
<TextInput
styles={{ input: { backgroundColor: MainColor.white } }}
placeholder="Masukan nama grup diskusi .."
radius={"xl"}
onChange={(val) => {

View File

@@ -60,7 +60,7 @@ export default function LayoutColab_Main({
<ActionIcon
// disabled={e.path === "" ? true : false}
variant="transparent"
c={hotMenu === e.id ? MainColor.yellow : "white"}
c={hotMenu === e.id ? MainColor.yellow : MainColor.white}
onClick={() => {
router.replace(e.path, { scroll: false });
setHotMenu(e.id);
@@ -69,7 +69,7 @@ export default function LayoutColab_Main({
{e.icon}
</ActionIcon>
<Text
c={hotMenu === e.id ? MainColor.yellow : "white"}
c={hotMenu === e.id ? MainColor.yellow : MainColor.white}
fz={"xs"}
lineClamp={1}
>

View File

@@ -52,15 +52,15 @@ export default function Colab_Proyek() {
key={e.id}
value={e.value}
fw={"bold"}
c={"black"}
style={{
transition: "0.5s",
color: activeTab === e.value ? MainColor.darkblue : MainColor.black,
backgroundColor:
activeTab === e.value ? MainColor.yellow : "white",
activeTab === e.value ? MainColor.yellow : MainColor.white,
border:
activeTab === e.value
? `1px solid ${AccentColor.yellow}`
: `1px solid white`,
: `1px solid ${MainColor.white}`,
}}
>
<Stack align="center" justify="center" spacing={0}>