wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #155 from bipproduction/amalia/28-agustus-24

Browse Source 
Amalia/28 agustus 24
This commit is contained in:
Amalia
2024-08-28 14:41:03 +08:00
committed by GitHub
parent f7ae3b0964 fe2f3ddf5b
commit 8a79ab14c1
63 changed files with 197 additions and 1666 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/(application)/division/[id]/(fitur-division)/calender/create/page.tsx
View File

@@ -1,14 +1,8 @@
import { CreateCalenderDivisionCaleder, NavbarCreateDivisionCalender } from '@/module/calender';
import { CreateUserDivisionCalender, UlangiEvent, ViewCreateDivisionCalender } from '@/module/division_new';
import { CreateCalenderDivisionCaleder } from '@/module/calender';
import React from 'react';
function Page({ searchParams }: { searchParams: any }) {
if (searchParams.page == "ulangi-event")
return <UlangiEvent />
if (searchParams.page == "user-calender")
return <CreateUserDivisionCalender />
return (
<CreateCalenderDivisionCaleder />
);

8
src/app/(dev-test)/test-division/layout.tsx
View File

@@ -1,8 +0,0 @@
import { DevisionLayout } from "@/module/division/ui/DivisionLayout";
export default function Layout({ children }: { children: React.ReactNode }) {
return <DevisionLayout>
{children}
</DevisionLayout>
}

22
src/app/(dev-test)/test-division/page.tsx
View File

@@ -1,22 +0,0 @@
import { DivisionPage } from "@/module/division/ui/DivisionPage";
import { SimpleGrid, Skeleton, Stack } from "@mantine/core";
import { Suspense } from "react";
export default function Page({ params, searchParams }: { params: any, searchParams: any }) {
return <Suspense fallback={<Stack gap={"md"} p={"md"}>
<Skeleton h={75} />
<Skeleton h={100} />
<SimpleGrid cols={4} spacing={"md"}>
<Skeleton h={75} />
<Skeleton h={75} />
<Skeleton h={75} />
<Skeleton h={75} />
</SimpleGrid>
<Skeleton h={100} />
<Skeleton h={100} />
</Stack>}>
<DivisionPage params={params} searchParams={searchParams} />
</Suspense>
}

5
src/app/api/(dev-test)/test-devision/count-devision/route.ts
View File

@@ -1,5 +0,0 @@
import { getCountDivision } from "@/module/division/lib/division/get_count_devision"
export async function GET() {
const countDivision = getCountDivision()
return Response.json({ count: countDivision })
}

6
src/app/api/(dev-test)/test-devision/list-anggota/route.ts
View File

@@ -1,6 +0,0 @@
import { getListAnggota } from "@/module/division/lib/division/get_list_anggota";
export async function GET() {
const listAnggota = await getListAnggota()
return Response.json(listAnggota)
}

6
src/app/api/(dev-test)/test-devision/list-division/route.ts
View File

@@ -1,6 +0,0 @@
import { getListDevision } from "@/module/division/lib/division/get_list_devision"
export async function GET() {
const list_devision = await getListDevision()
return Response.json(list_devision)
}

6
src/app/api/(dev-test)/test-devision/list-group/route.ts
View File

@@ -1,6 +0,0 @@
import { getListGroup } from "@/module/division/lib/division/get_list_group"
export async function GET() {
const listGroup = await getListGroup()
return Response.json(listGroup)
}

42
src/app/api/calender/indicator/route.ts
View File

@@ -1,4 +1,7 @@
import { prisma } from "@/module/_global";
import { funGetUserByCookies } from "@/module/auth";
import _ from "lodash";
import moment from "moment";
import { NextResponse } from "next/server";
@@ -10,12 +13,45 @@ export async function GET(request: Request) {
}
const { searchParams } = new URL(request.url);
const idDivision = searchParams.get("division");
const date = searchParams.get("date");
const id = searchParams.get("id");
const awalDate = moment(date).format('YYYY-MM') + '-01'
const akhirDate = moment(awalDate).add(1, 'M').format('YYYY-MM-DD')
return NextResponse.json({ success: true, data: null }, { status: 200 });
const cekDivision = await prisma.division.count({
where: {
id: String(idDivision),
isActive: true
}
})
if (cekDivision == 0) {
return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, data tidak ditemukan" }, { status: 404 });
}
const data = await prisma.divisionCalendar.findMany({
where: {
isActive: true,
idDivision: String(idDivision),
dateStart: {
gte: new Date(awalDate),
lte: new Date(akhirDate),
}
}
})
const dataGroup = _.map(_.groupBy(data, "dateStart"), (v: any) => ({
dateContent: v[0].dateStart
}))
const result = dataGroup.map(a => moment(a.dateContent).format('YYYY-MM-DD'));
return NextResponse.json({ success: true, message: "Berhasil mendapatkan list acara", data: result }, { status: 200 });
} catch (error) {
return NextResponse.json({ success: false, message: "" }, { status: 401 });
return NextResponse.json({ success: false, message: "Gagal mendapatkan list acara" }, { status: 401 });
}
}

96
src/app/api/home/route.ts Normal file
View File

@@ -0,0 +1,96 @@
import { prisma } from "@/module/_global";
import { funGetUserByCookies } from "@/module/auth";
import _, { ceil } from "lodash";
import moment from "moment";
import { NextResponse } from "next/server";
// HOME
export async function GET(request: Request) {
try {
let allData
const user = await funGetUserByCookies()
const { searchParams } = new URL(request.url);
const kategori = searchParams.get("cat");
if (user.id == undefined) {
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
}
const roleUser = user.idUserRole
const idVillage = user.idVillage
const idGroup = user.idGroup
if (kategori == "kegiatan") {
let kondisi
// klo perbekel == semua grup
if (roleUser == "supadmin") {
kondisi = {
isActive: true,
idVillage: idVillage,
Group: {
isActive: true,
}
}
} else {
kondisi = {
isActive: true,
idGroup: idGroup
}
}
const data = await prisma.project.findMany({
skip: 0,
take: 5,
where: kondisi,
select: {
id: true,
title: true,
desc: true,
status: true,
createdAt: true,
ProjectTask: {
where: {
isActive: true
},
select: {
title: true,
status: true
}
}
},
orderBy: {
createdAt: "desc"
}
})
allData = data.map((v: any) => ({
..._.omit(v, ["ProjectTask", "createdAt"]),
progress: ceil((v.ProjectTask.filter((i: any) => i.status == 1).length * 100) / v.ProjectTask.length),
createdAt: moment(v.dateStart).format("LL")
}))
}
// else if (kategori == "division") {
// } else if (kategori == "progress") {
// } else if (kategori == "dokumen") {
// } else if (kategori == "event") {
// } else if (kategori == "discussion") {
// }
return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", data: allData }, { status: 200 });
}
catch (error) {
console.log(error);
return NextResponse.json({ success: false, message: "Gagal mendapatkan data, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
}
}

1
src/dummy_data/index.ts
View File

@@ -1 +0,0 @@
export { default as list_devision } from "./list_devision.json";

52
src/dummy_data/list_devision.json
View File

@@ -1,52 +0,0 @@
[
{
"id": "1",
"name": "Sekretariat",
"desc": "Mengelola administrasi dan komunikasi internal perusahaan."
},
{
"id": "2",
"name": "Infrastruktur",
"desc": "Menangani jaringan, server, dan infrastruktur teknis perusahaan."
},
{
"id": "3",
"name": "Keamanan",
"desc": "Bertanggung jawab atas keamanan data dan sistem informasi."
},
{
"id": "4",
"name": "Pengembangan",
"desc": "Memimpin pengembangan produk dan layanan baru."
},
{
"id": "5",
"name": "Pemasaran",
"desc": "Merencanakan dan menjalankan strategi pemasaran perusahaan."
},
{
"id": "6",
"name": "Keuangan",
"desc": "Mengelola keuangan, anggaran, dan pelaporan keuangan perusahaan."
},
{
"id": "7",
"name": "Sumber Daya Manusia",
"desc": "Bertanggung jawab atas manajemen SDM dan pengembangan karyawan."
},
{
"id": "8",
"name": "Teknologi Informasi",
"desc": "Menyediakan dukungan teknis dan infrastruktur TI untuk operasional perusahaan."
},
{
"id": "9",
"name": "Produksi",
"desc": "Mengelola produksi barang atau layanan yang ditawarkan perusahaan."
},
{
"id": "10",
"name": "Penelitian dan Pengembangan",
"desc": "Menangani penelitian dan pengembangan untuk inovasi produk dan teknologi."
}
]

51
src/lib/apiFetch.ts
View File

@@ -1,51 +0,0 @@
interface Params {
searchParams?: Record<string, any>;
token?: string;
body?: Record<string, any>;
}
async function funPramas(url: string, method: string, params?: Params) {
const property: Record<string, any> = {};
if (params) {
if (params.searchParams) {
property.searchParams =
"?" + new URLSearchParams(params.searchParams).toString();
}
if (params.body) {
property.body = JSON.stringify(params.body);
}
if (params.token) {
property.headers.Authorization = `Bearer ${params.token}`;
}
}
property.method = method;
try {
const res = await fetch(`${url}${property?.searchParams || ""}`, property);
return await res.json().catch(() => null);
} catch {
return null;
}
}
export const apiPathTestDevisionListGroupGET = () =>
`/api/test-devision/list-group/`;
export const apiFetchTestDevisionListGroupGET = async (params?: Params) =>
funPramas(apiPathTestDevisionListGroupGET(), "GET", params);
export const apiPathTestDevisionListDivisionGET = () =>
`/api/test-devision/list-division/`;
export const apiFetchTestDevisionListDivisionGET = async (params?: Params) =>
funPramas(apiPathTestDevisionListDivisionGET(), "GET", params);
export const apiPathTestDevisionListAnggotaRouterTsGET = () =>
`/api/test-devision/list-anggota/router.ts`;
export const apiFetchTestDevisionListAnggotaRouterTsGET = async (
params?: Params,
) => funPramas(apiPathTestDevisionListAnggotaRouterTsGET(), "GET", params);
export const apiPathTestDevisionCountDevisionGET = () =>
`/api/test-devision/count-devision/`;
export const apiFetchTestDevisionCountDevisionGET = async (params?: Params) =>
funPramas(apiPathTestDevisionCountDevisionGET(), "GET", params);

111
src/lib/pagePath.ts
View File

@@ -1,111 +0,0 @@
/**
*
* [/Users/bip/Documents/projects/bip/sistem-desa-mandiri/src/app/page.tsx](file:///Users/bip/Documents/projects/bip/sistem-desa-mandiri/src/app/page.tsx)
*/
export const pagePathPageTsx = (params?: {
searchParams?: Record<string, any>;
}) => {
let searchParams = "";
if (params && params.searchParams) {
searchParams = "?" + new URLSearchParams(params.searchParams).toString();
}
return `page.tsx${searchParams}`;
};
/**
*
* [/Users/bip/Documents/projects/bip/sistem-desa-mandiri/src/app/(dev-test)/test-division/page.tsx](file:///Users/bip/Documents/projects/bip/sistem-desa-mandiri/src/app/(dev-test)/test-division/page.tsx)
*/
export const pagePathTestDivision = (params?: {
searchParams?: Record<string, any>;
}) => {
let searchParams = "";
if (params && params.searchParams) {
searchParams = "?" + new URLSearchParams(params.searchParams).toString();
}
return `/test-division${searchParams}`;
};
/**
*
* [/Users/bip/Documents/projects/bip/sistem-desa-mandiri/src/app/(auth)/welcome/page.tsx](file:///Users/bip/Documents/projects/bip/sistem-desa-mandiri/src/app/(auth)/welcome/page.tsx)
*/
export const pagePathWelcome = (params?: {
searchParams?: Record<string, any>;
}) => {
let searchParams = "";
if (params && params.searchParams) {
searchParams = "?" + new URLSearchParams(params.searchParams).toString();
}
return `/welcome${searchParams}`;
};
/**
*
* [/Users/bip/Documents/projects/bip/sistem-desa-mandiri/src/app/(auth)/verification/page.tsx](file:///Users/bip/Documents/projects/bip/sistem-desa-mandiri/src/app/(auth)/verification/page.tsx)
*/
export const pagePathVerification = (params?: {
searchParams?: Record<string, any>;
}) => {
let searchParams = "";
if (params && params.searchParams) {
searchParams = "?" + new URLSearchParams(params.searchParams).toString();
}
return `/verification${searchParams}`;
};
/**
*
* [/Users/bip/Documents/projects/bip/sistem-desa-mandiri/src/app/(application)/search/page.tsx](file:///Users/bip/Documents/projects/bip/sistem-desa-mandiri/src/app/(application)/search/page.tsx)
*/
export const pagePathSearch = (params?: {
searchParams?: Record<string, any>;
}) => {
let searchParams = "";
if (params && params.searchParams) {
searchParams = "?" + new URLSearchParams(params.searchParams).toString();
}
return `/search${searchParams}`;
};
/**
*
* [/Users/bip/Documents/projects/bip/sistem-desa-mandiri/src/app/(application)/profile/page.tsx](file:///Users/bip/Documents/projects/bip/sistem-desa-mandiri/src/app/(application)/profile/page.tsx)
*/
export const pagePathProfile = (params?: {
searchParams?: Record<string, any>;
}) => {
let searchParams = "";
if (params && params.searchParams) {
searchParams = "?" + new URLSearchParams(params.searchParams).toString();
}
return `/profile${searchParams}`;
};
/**
*
* [/Users/bip/Documents/projects/bip/sistem-desa-mandiri/src/app/(application)/home/page.tsx](file:///Users/bip/Documents/projects/bip/sistem-desa-mandiri/src/app/(application)/home/page.tsx)
*/
export const pagePathHome = (params?: {
searchParams?: Record<string, any>;
}) => {
let searchParams = "";
if (params && params.searchParams) {
searchParams = "?" + new URLSearchParams(params.searchParams).toString();
}
return `/home${searchParams}`;
};
/**
*
* [/Users/bip/Documents/projects/bip/sistem-desa-mandiri/src/app/(application)/detail-feature/page.tsx](file:///Users/bip/Documents/projects/bip/sistem-desa-mandiri/src/app/(application)/detail-feature/page.tsx)
*/
export const pagePathDetailFeature = (params?: {
searchParams?: Record<string, any>;
}) => {
let searchParams = "";
if (params && params.searchParams) {
searchParams = "?" + new URLSearchParams(params.searchParams).toString();
}
return `/detail-feature${searchParams}`;
};

107
src/lib/stateApi.ts
View File

@@ -1,107 +0,0 @@
'use client';
import { State, hookstate, useHookstate } from '@hookstate/core';
const useState = <T>(s: State<T>) => {
const state = useHookstate(s);
const get = state.value;
const set = (v: typeof state.value) => state.set(v);
return [get, set] as const;
};
interface ParamsLoad {
searchParams?: Record<string, string>
token?: string
body?: Record<string, any>
}
const funLoad = async (url: string, params?: ParamsLoad, set?: any, method?: string) => {
const property: Record<string, any> = {}
if(params) {
if(params.searchParams) {
property.searchParams = "?"+new URLSearchParams(params.searchParams).toString();
}
if(params.body) {
property.body = JSON.stringify(params.body);
}
if(params.token) {
property.headers.Authorization = `Bearer ${params.token}`;
}
}
property.method = method;
const res = await fetch(url, property );
const json = await res.json().then((json) => json).catch(() => null);
if(json && set) set(json);
return {
res,
json
};
}
const testDevisionListGroup = hookstate<any | undefined>(undefined);
export const ProviderTestDevisionListGroup = ({data}: {data: any}) => {
if(data && testDevisionListGroup.value === undefined) {
testDevisionListGroup.set(data)
}
return null
}
export const useTestDevisionListGroup = <T>() => {
const [get, set] = useState(useHookstate(testDevisionListGroup))
const load = (params?: ParamsLoad) => funLoad(`/api/test-devision/list-group/`,params, set, "GET")
const value: T = get
return [value, set, load] as const
};
const testDevisionListDivision = hookstate<any | undefined>(undefined);
export const ProviderTestDevisionListDivision = ({data}: {data: any}) => {
if(data && testDevisionListDivision.value === undefined) {
testDevisionListDivision.set(data)
}
return null
}
export const useTestDevisionListDivision = <T>() => {
const [get, set] = useState(useHookstate(testDevisionListDivision))
const load = (params?: ParamsLoad) => funLoad(`/api/test-devision/list-division/`,params, set, "GET")
const value: T = get
return [value, set, load] as const
};
const testDevisionListAnggota = hookstate<any | undefined>(undefined);
export const ProviderTestDevisionListAnggota = ({data}: {data: any}) => {
if(data && testDevisionListAnggota.value === undefined) {
testDevisionListAnggota.set(data)
}
return null
}
export const useTestDevisionListAnggota = <T>() => {
const [get, set] = useState(useHookstate(testDevisionListAnggota))
const load = (params?: ParamsLoad) => funLoad(`/api/test-devision/list-anggota/`,params, set, "GET")
const value: T = get
return [value, set, load] as const
};
const testDevisionCountDevision = hookstate<any | undefined>(undefined);
export const ProviderTestDevisionCountDevision = ({data}: {data: any}) => {
if(data && testDevisionCountDevision.value === undefined) {
testDevisionCountDevision.set(data)
}
return null
}
export const useTestDevisionCountDevision = <T>() => {
const [get, set] = useState(useHookstate(testDevisionCountDevision))
const load = (params?: ParamsLoad) => funLoad(`/api/test-devision/count-devision/`,params, set, "GET")
const value: T = get
return [value, set, load] as const
};

6
src/module/calender/lib/api_calender.ts
View File

@@ -41,4 +41,10 @@ export const funEditCalenderById = async (path: string, data: IEditCalender) =>
body: JSON.stringify(data),
});
return await response.json().catch(() => null);
}
export const funGetIndicatorCalender = async (path?: string) => {
const response = await fetch(`/api/calender/indicator${(path) ? path : ''}`, { next: { tags: ['hostory'] } });
return await response.json().catch(() => null);
}

65
src/module/calender/ui/date_event_division.tsx
View File

@@ -3,33 +3,64 @@ import { Box, Divider, Group, Indicator, Skeleton, Text } from '@mantine/core';
import { DatePicker, DatePickerProps } from '@mantine/dates';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { funGetAllCalender } from '../lib/api_calender';
import { funGetAllCalender, funGetIndicatorCalender } from '../lib/api_calender';
import { useSetState, useShallowEffect } from '@mantine/hooks';
import { IDataCalender } from '../lib/type_calender';
import moment from 'moment';
import _ from 'lodash';
import toast from 'react-hot-toast';
export default function DateEventDivision() {
const [isData, setData] = useState<IDataCalender[]>([])
const [isListTgl, setListTgl] = useState<any[]>([])
const router = useRouter()
const param = useParams<{ id: string, detail: string }>()
const [isDate, setDate] = useSetState<any>(moment().format('YYYY-MM-DD'))
const [isMonth, setMonth] = useState<any>(moment().month() + 1)
const [loading, setLoading] = useState(true)
const getData = async (tgl: any) => {
try {
setLoading(true)
const response = await funGetAllCalender('?division=' + param.id + '&date=' + tgl)
setData(response.data)
if (response.success) {
setData(response.data)
} else {
toast.error(response.message)
}
setLoading(false)
} catch (error) {
console.log(error)
toast.error("Gagal mendapatkan list acara")
} finally {
setLoading(false)
}
}
const getIndicator = async (tgl: any) => {
try {
const response = await funGetIndicatorCalender('?division=' + param.id + '&date=' + tgl)
if (response.success) {
setListTgl(response.data)
} else {
setListTgl([])
toast.error(response.message)
}
} catch (error) {
console.log(error)
toast.error("Gagal mendapatkan list acara")
}
}
async function changeMonth(value: any) {
const monthKlik = moment(value).format('MM')
if (monthKlik != isMonth) {
setMonth(monthKlik)
getIndicator(value)
}
}
function change(val: Date) {
const a: any = moment(new Date(val)).format('YYYY-MM-DD')
setDate(a)
@@ -39,17 +70,24 @@ export default function DateEventDivision() {
useShallowEffect(() => {
getData(isDate)
getIndicator(isDate)
}, [])
const dayRenderer: DatePickerProps['renderDay'] = (date) => {
const day = date.getDate();
const coba = moment(date).format('YYYY-MM-DD')
const day = date.getDate()
const muncul = isListTgl.includes(coba)
return (
<Indicator size={6} color="red" offset={-5} disabled={day !== 16}>
<Indicator size={6} color="red" offset={-5} disabled={!muncul}>
<div>{day}</div>
</Indicator>
);
};
return (
<Box>
<Group
@@ -58,22 +96,25 @@ export default function DateEventDivision() {
py={20}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<DatePicker size='md' defaultValue={new Date()} renderDay={dayRenderer}
<DatePicker size='md'
defaultValue={new Date()}
renderDay={dayRenderer}
onChange={(val: any) => { change(val) }}
onDateChange={(val) => { changeMonth(val) }}
/>
</Group>
<Box>
<Text mb={10} mt={20} fw={"bold"}>
Event
</Text>
{loading ?
{loading ?
Array(6)
.fill(null)
.map((_, i) => (
<Box key={i} mb={10}>
<Skeleton height={100} width={"100%"} radius={"md"} />
</Box>
))
.fill(null)
.map((_, i) => (
<Box key={i} mb={10}>
<Skeleton height={100} width={"100%"} radius={"md"} />
</Box>
))
:
_.isEmpty(isData)
?

3
src/module/division/api/get/listProject.ts
View File

@@ -1,3 +0,0 @@
export function listProject(req: Request) {
return Response.json({ message: "ini adalah project" })
}

4
src/module/division/api/post/createProject.ts
View File

@@ -1,4 +0,0 @@
export async function createProject(req: Request) {
const data = await req.json()
return Response.json({ message: "success create projects" })
}

0
src/module/division/calendar/index.ts
View File

68
src/module/division/component/BottomDrawer.tsx
View File

@@ -1,68 +0,0 @@
'use client'
import { ActionIcon, Drawer, Flex, Stack, Text } from "@mantine/core";
import { MdAddCircle, MdClose, MdFileCopy, MdSort } from "react-icons/md";
import { pagePathTestDivision } from "@/lib/pagePath";
export function BottomDrawer({ openDrawer, setOpenDrawer }: { openDrawer: boolean, setOpenDrawer: any }) {
function onAddDivisi() {
window.location.href = pagePathTestDivision({ searchParams: { page: "division-create" } })
}
function onDivisionFilter() {
window.location.href = pagePathTestDivision({ searchParams: { page: "division-filter" } })
}
function onDivisionReport() {
window.location.href = pagePathTestDivision({ searchParams: { page: "division-report" } })
}
return <Drawer
p={0}
opened={openDrawer}
onClose={() => setOpenDrawer(false)}
position="bottom"
withCloseButton={false}
styles={{
content: {
margin: "0 auto",
maxWidth: 550,
height: 200,
borderTopRightRadius: 20,
borderTopLeftRadius: 20
}
}}
>
<Stack gap={"md"}>
<Flex justify="space-between">
<Flex justify={"end"}>
<Text>Menu</Text>
</Flex>
<ActionIcon onClick={() => setOpenDrawer(false)} variant="subtle">
<MdClose />
</ActionIcon>
</Flex>
<Flex gap={"md"} justify={"space-evenly"}>
<Stack align="center">
<ActionIcon onClick={onAddDivisi} size={"xl"} variant="subtle">
<MdAddCircle size={32} />
</ActionIcon>
<Text>Tambah Divisi</Text>
</Stack>
<Stack align="center">
<ActionIcon onClick={onDivisionFilter} size={"xl"} variant="subtle">
<MdSort size={32} />
</ActionIcon>
<Text>Filter</Text>
</Stack>
<Stack align="center">
<ActionIcon onClick={onDivisionReport} variant="subtle" size={"xl"}>
<MdFileCopy size={32} />
</ActionIcon>
<Text>Report</Text>
</Stack>
</Flex>
</Stack>
</Drawer>
}

26
src/module/division/component/ContainerDivision.tsx
View File

@@ -1,26 +0,0 @@
'use client'
import { Box } from "@mantine/core"
import _ from "lodash"
import { DivisionCreate } from "../ui/DivisionCreate"
import { DivisionFilter } from "../ui/DivisionFilter"
import { DivisionReport } from "../ui/DivisionReport"
import { HeadDivision } from "./HeadDivision"
import { ListWithSearch } from "./ListWithSearch"
import { DivisionView } from "../ui/DivisionView"
const listPage = ["division", "division-create", "division-filter", "division-report"]
export function ContainerDevision({ params, searchParams, list_devision, countDevision }: { params: any, searchParams: any, list_devision: any[], countDevision: any }) {
const page = searchParams.page || "division"
const division = list_devision.map((v) => ({ ...v, name: _.kebabCase(v.name) })).find((v) => v.name === page) || null
return <Box>
<HeadDivision title={page} />
{/* {JSON.stringify(division)} */}
{page === "division" && <ListWithSearch count={countDevision} listData={list_devision} />}
{page === "division-create" && <DivisionCreate />}
{page === "division-filter" && <DivisionFilter />}
{page === "division-report" && <DivisionReport />}
{division && division.name === page && <DivisionView id={division.id} />}
</Box>
}

36
src/module/division/component/HeadDivision.tsx
View File

@@ -1,36 +0,0 @@
'use client'
import { WARNA } from "@/module/_global";
import { ActionIcon, Box, Flex, Title } from "@mantine/core";
import { useSearchParams } from "next/navigation";
import { useState } from "react";
import { MdArrowBackIos, MdMenu } from "react-icons/md";
import { useTitle } from "../lib/devision_state";
import { BottomDrawer } from "./BottomDrawer";
import { pagePathTestDivision } from "@/lib/pagePath";
import _ from "lodash";
export function HeadDivision({ title }: { title: string }) {
const [openDrawer, setOpenDrawer] = useState(false)
function onBack() {
window.location.href = pagePathTestDivision()
}
return <Box pos={"sticky"} top={0} bg={WARNA.biruTua} p={"lg"} style={{
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20,
zIndex: 999,
boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)"
}}>
<Flex justify={"space-between"}>
<ActionIcon onClick={onBack} bg={WARNA.bgIcon} radius={100}>
<MdArrowBackIos />
</ActionIcon>
<Title c={WARNA.bgWhite} order={3}>{_.startCase(title)}</Title>
<ActionIcon onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} >
<MdMenu />
</ActionIcon>
</Flex>
<BottomDrawer openDrawer={openDrawer} setOpenDrawer={setOpenDrawer} />
</Box>
}

11
src/module/division/component/ListDivision.tsx
View File

@@ -1,11 +0,0 @@
import { Stack } from "@mantine/core";
import { ViewGrid } from "./ViewGrid";
import { ViewList } from "./ViewList";
export function ListDivision({ listData, isGrid }: { listData: any[], isGrid?: boolean }) {
return <Stack gap={"md"} p={"md"}>
{listData.map((v, k) => isGrid ? <ViewGrid v={v} key={k} /> : <ViewList v={v} key={k} />)}
</Stack>
}

40
src/module/division/component/ListWithSearch.tsx
View File

@@ -1,40 +0,0 @@
'use client'
import { Box, Card, Center, Flex, Stack, Text, Title } from "@mantine/core"
import { ListDivision } from "./ListDivision"
import { SearchDivision } from "./SearchDivision"
import { ToogleList } from "./ToogleList"
import { useState } from "react"
import { useShallowEffect } from "@mantine/hooks"
import { WARNA } from "@/module/_global"
import { apiFetchTestDevisionListDivisionGET } from "@/lib/apiFetch"
export function ListWithSearch({ listData, count }: { listData: any[], count: number }) {
const [isGrid, setIsGrid] = useState(true)
const [search, setSearch] = useState("")
const [listDivision, setListDivision] = useState(listData)
useShallowEffect(() => {
apiFetchTestDevisionListDivisionGET().then(setListDivision)
}, [])
return <Stack>
<Flex align={"center"} p={"md"} gap={"md"}>
<SearchDivision setText={setSearch} text={search} />
<ToogleList isGrid={isGrid} setIsGrid={setIsGrid} />
</Flex>
<Box p={"md"}>
<Card p={"md"} bg={WARNA.biruTua}>
<Stack>
<Text size="md" fw={"bold"} c={WARNA.bgWhite}>Total Divisi</Text>
<Center>
<Title c={WARNA.bgWhite}>{count}</Title>
</Center>
</Stack>
</Card>
</Box>
<ListDivision listData={listDivision.filter((v) => v.name.toLowerCase().includes(search.toLowerCase()))} isGrid={isGrid} />
</Stack>
}

16
src/module/division/component/MorePeopleIcon.tsx
View File

@@ -1,16 +0,0 @@
'use client'
import { WARNA } from "@/module/_global"
import { Avatar } from "@mantine/core"
import { MdAccountCircle, MdPeople } from "react-icons/md"
export function MorePeopleIcon() {
return <Avatar.Group>
<Avatar>
<MdAccountCircle size={32} color={WARNA.biruTua} />
</Avatar>
<Avatar>
+5
</Avatar>
</Avatar.Group>
}

8
src/module/division/component/SearchDivision.tsx
View File

@@ -1,8 +0,0 @@
'use client'
import { TextInput } from "@mantine/core"
import { MdSearch } from "react-icons/md"
export function SearchDivision({ text, setText }: { text: string, setText: any }) {
return <TextInput onChange={(e) => setText(e.target.value)} value={text} radius={30} leftSection={<MdSearch />} placeholder="Cari Divisi" />
}

17
src/module/division/component/ToogleList.tsx
View File

@@ -1,17 +0,0 @@
'use client'
import { ActionIcon, Box } from "@mantine/core"
import { useState } from "react"
import { MdGrid3X3, MdGridView, MdList, MdViewList } from "react-icons/md"
export function ToogleList({ isGrid, setIsGrid }: { isGrid: boolean, setIsGrid: any }) {
function onToogleList() {
setIsGrid(!isGrid)
}
return <Box>
<ActionIcon variant="light" onClick={onToogleList}>
{isGrid ? <MdList size={24} /> : <MdGridView size={22} />}
</ActionIcon>
</Box>
}

36
src/module/division/component/ViewGrid.tsx
View File

@@ -1,36 +0,0 @@
import { WARNA } from "@/module/_global";
import { Stack, Box, Title, Group, Text, UnstyledButton } from "@mantine/core";
import { MorePeopleIcon } from "./MorePeopleIcon";
import { pagePathTestDivision } from "@/lib/pagePath";
import _ from "lodash";
export function ViewGrid({ v }: { v: any }) {
return (
<UnstyledButton onClick={() => {
window.location.href = pagePathTestDivision({ searchParams: { page: _.kebabCase(v.name) } })
}}>
<Stack gap={0}>
<Box style={{
borderTopLeftRadius: 8,
borderTopRightRadius: 8
}} p={"xl"} bg={WARNA.biruTua}>
<Title style={{
textAlign: "center"
}} order={3} c={WARNA.bgWhite}>{v.name}</Title>
</Box>
<Box style={{
border: "1px solid " + WARNA.biruTua,
borderBottomLeftRadius: 8,
borderBottomRightRadius: 8
}} p={"md"}>
<Stack>
<Text pr={100}>{v.desc}</Text>
<Group justify="end">
<MorePeopleIcon />
</Group>
</Stack>
</Box>
</Stack>
</UnstyledButton>
);
}

23
src/module/division/component/ViewList.tsx
View File

@@ -1,23 +0,0 @@
import { pagePathTestDivision } from "@/lib/pagePath";
import { Avatar, Flex, Stack, Text, Title, UnstyledButton } from "@mantine/core";
import _ from "lodash";
import { MdPeople } from "react-icons/md";
export function ViewList({ v }: { v: any }) {
return (
<UnstyledButton onClick={() => {
window.location.href = pagePathTestDivision({ searchParams: { page: _.kebabCase(v.name) } })
}}>
<Stack py={"md"} style={{
borderBottom: "0.5px solid " + "gray"
}}>
<Flex gap={"md"} align={"center"}>
<Avatar bg={"orange"} color="white">
<MdPeople size={32} />
</Avatar>
<Text fw={"bold"}>{v.name}</Text>
</Flex>
</Stack>
</UnstyledButton>
)
}

0
src/module/division/discussion/index.ts
View File

0
src/module/division/document/index.ts
View File

0
src/module/division/index.ts
View File

33
src/module/division/lib/BottomMenu.tsx
View File

@@ -1,33 +0,0 @@
import { ActionIcon, Drawer, Flex, Stack, Text } from "@mantine/core";
import { MdClose } from "react-icons/md";
export function BottomMenu({size, title, openDrawer, setOpenDrawer, children }: { size?: number | string, title?: string, openDrawer: boolean, setOpenDrawer: any, children: React.ReactNode }) {
return <Drawer
p={0}
opened={openDrawer}
onClose={() => setOpenDrawer(false)}
position="bottom"
withCloseButton={false}
size={size || "md"}
styles={{
content: {
margin: "0 auto",
maxWidth: 550,
borderTopRightRadius: 20,
borderTopLeftRadius: 20
}
}}
>
<Stack gap={"md"}>
<Flex justify="space-between">
<Flex justify={"end"}>
<Text>{title || 'Menu'}</Text>
</Flex>
<ActionIcon onClick={() => setOpenDrawer(false)} variant="subtle">
<MdClose />
</ActionIcon>
</Flex>
{children}
</Stack>
</Drawer>
}

25
src/module/division/lib/ButtonConfirm.tsx
View File

@@ -1,25 +0,0 @@
import { WARNA } from "@/module/_global";
import { Button, Flex, Stack, Text, UnstyledButton } from "@mantine/core";
import { BottomMenu } from "./BottomMenu";
import { useState } from "react";
export function ButtonConfirm({ label, desc, onConfirm }: { label: string, desc: string, onConfirm: () => void }) {
const [open, setOpen] = useState(false)
const onClickConfirm = () => {
setOpen(false)
onConfirm()
}
return <Stack>
<Button onClick={() => setOpen(true)} radius={50} color={WARNA.biruTua}>{label}</Button>
<BottomMenu size={"xs"} title="Konfirmasi" openDrawer={open} setOpenDrawer={setOpen}>
<Stack gap={"xl"}>
<Text>{desc}</Text>
<Flex justify={"end"} gap={"xl"}>
<UnstyledButton onClick={() => setOpen(false)}>Cancel</UnstyledButton>
<Button onClick={onClickConfirm} color={WARNA.biruTua}>Confirm</Button>
</Flex>
</Stack>
</BottomMenu>
</Stack>
}

6
src/module/division/lib/ButtonNavi.tsx
View File

@@ -1,6 +0,0 @@
import { WARNA } from "@/module/_global";
import { Button } from "@mantine/core";
export function ButtonNavi({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) {
return <Button radius={50} color={WARNA.biruTua} onClick={onClick}>{children}</Button>
}

53
src/module/division/lib/MultiSelectList.tsx
View File

@@ -1,53 +0,0 @@
'use client'
import { ActionIcon, Anchor, Button, Card, Divider, Flex, Group, NavLink, Paper, ScrollArea, Select, Stack, Text, UnstyledButton } from "@mantine/core";
import { useState } from "react";
import { MdArrowForwardIos, MdCheckBox, MdCheckBoxOutlineBlank } from "react-icons/md";
import { BottomMenu } from "./BottomMenu";
import { ButtonNavi } from "./ButtonNavi";
import _ from "lodash";
import { WARNA } from "@/module/_global";
export function MultiSelectList(
{ label, placeholder, data = [], listSelected = [], setListSelected }:
{ label?: string, placeholder?: string, data?: any[], listSelected: any[], setListSelected: any }
) {
const [open, setOpen] = useState(false)
// const [listSelected, setListSelected] = useState(defaultValue)
function selected(value: { label: string, value: any }) {
if (listSelected.includes(value.value)) {
setListSelected(listSelected.filter((v) => v !== value.value))
} else {
setListSelected([...listSelected, value.value])
}
}
const onClickSimpan = () => {
setOpen(false)
}
return <Stack>
<UnstyledButton onClick={() => setOpen(true)}>
<Paper p={"sm"} withBorder radius={12}>
<Flex justify={"space-between"}>
<Text>{_.isEmpty(listSelected) ? "Pilih Anggota" : "Tambah Anggota"}</Text>
<MdArrowForwardIos size={"1.5rem"} />
</Flex>
</Paper>
</UnstyledButton>
<BottomMenu title="Pilih Anggota" openDrawer={open} setOpenDrawer={setOpen}>
<Stack>
<ScrollArea.Autosize mah={300} >
{data.map((v, k) => <Stack key={k} gap={"lg"}>
<NavLink
onClick={() => selected(v)}
leftSection={listSelected.includes(v.value) ? <MdCheckBox size={"1.5rem"} /> : <MdCheckBoxOutlineBlank size={"1.5rem"} />}
label={v.label} />
</Stack>)}
</ScrollArea.Autosize>
<Group justify="end">
<ButtonNavi onClick={onClickSimpan}>Simpan</ButtonNavi>
</Group>
</Stack>
</BottomMenu>
</Stack>
}

46
src/module/division/lib/SingleSelect.tsx
View File

@@ -1,46 +0,0 @@
'use client'
import { Flex, Group, NavLink, Paper, ScrollArea, Select, Stack, Text, UnstyledButton } from "@mantine/core";
import { useState } from "react";
import { BottomMenu } from "./BottomMenu";
import { MdArrowForwardIos, MdCheckBox, MdCheckBoxOutlineBlank } from "react-icons/md";
import _ from "lodash";
export function SingleSelect({ desc, icon, placeholder, selected, setSelected, data }: { desc?: string, icon?: any, placeholder: string, selected: any, setSelected: any, data: any[] }) {
const [open, setOpen] = useState(false)
const completed = desc && !_.isEmpty(data) && !_.isEmpty(selected)
const onSelected = (value: any) => {
setSelected(value)
setOpen(false)
}
return <Stack>
<UnstyledButton onClick={() => setOpen(true)} disabled={_.isEmpty(data)}>
<Paper p={"sm"} withBorder radius={12} bg={_.isEmpty(data) ? "transparent" : "white"}>
<Stack gap={ completed ? "sm" : 0}>
<Flex justify={"space-between"}>
<Flex gap={"md"} align={"center"}>
{icon && icon}
<Text c={_.isEmpty(selected) ? "dimmed" : "black"}>{!_.isEmpty(data) ? data?.filter((v) => v.value === selected)[0]?.label || placeholder : placeholder}</Text>
</Flex>
<MdArrowForwardIos color={_.isEmpty(data) ? "light" : "black"} size={"1.5rem"} />
</Flex>
{completed && <Group justify="end"><Text c="dimmed" size="sm">{desc}</Text></Group>}
</Stack>
</Paper>
</UnstyledButton>
<BottomMenu openDrawer={open} setOpenDrawer={setOpen} >
<Stack>
<ScrollArea.Autosize mah={300} >
{data?.map((v, k) => <NavLink
onClick={() => onSelected(v.value)}
leftSection={selected === v.value ?
<MdCheckBox size={"1.5rem"} /> :
<MdCheckBoxOutlineBlank
size={"1.5rem"} />}
key={k}
label={v.label} />)}
</ScrollArea.Autosize>
</Stack>
</BottomMenu>
</Stack>
}

12
src/module/division/lib/WebVitals.tsx
View File

@@ -1,12 +0,0 @@
'use client'
import { useReportWebVitals } from 'next/web-vitals';
export function WebVitals({ searchParams }: { searchParams: any }) {
const log = searchParams.log;
useReportWebVitals((metric) => {
log && console.log(JSON.stringify(metric, null, 4));
});
return null;
}

14
src/module/division/lib/devision_state.ts
View File

@@ -1,14 +0,0 @@
import { State, hookstate, useHookstate } from "@hookstate/core";
const useState = <T>(s: State<T>) => {
const state = useHookstate(s);
const get = state.value;
const set = (v: typeof state.value) => state.set(v);
return [get, set] as const;
};
const title = hookstate("Divisi")
export const useTitle = () => useState<string>(title);
const filter = hookstate("")
export const useDivisionfilter = () => useState<string>(filter)

5
src/module/division/lib/division/get_count_devision.ts
View File

@@ -1,5 +0,0 @@
import { list_devision } from "@/dummy_data";
export async function getCountDivision() {
return list_devision.length
}

45
src/module/division/lib/division/get_list_anggota.ts
View File

@@ -1,45 +0,0 @@
const listAnggota = [
{
id: "1",
name: "Anggota 1",
},
{
id: "2",
name: "Anggota 2",
},
{
id: "3",
name: "Anggota 3",
},
{
id: "4",
name: "Anggota 4",
},
{
id: "5",
name: "Anggota 5",
},
{
id: "6",
name: "Anggota 6",
},
{
id: "7",
name: "Anggota 7",
},
{
id: "8",
name: "Anggota 8",
},
{
id: "9",
name: "Anggota 9",
},
{
id: "10",
name: "Anggota 10",
},
]
export async function getListAnggota() {
return listAnggota
}

5
src/module/division/lib/division/get_list_devision.ts
View File

@@ -1,5 +0,0 @@
import { list_devision } from "@/dummy_data";
export async function getListDevision() {
return list_devision
}

18
src/module/division/lib/division/get_list_group.ts
View File

@@ -1,18 +0,0 @@
const listGroup = [
{
id: "1",
name: "Group 1",
},
{
id: "2",
name: "Group 2",
},
{
id: "3",
name: "Group 3",
}
]
export async function getListGroup() {
return listGroup
}

20
src/module/division/lib/toast.tsx
View File

@@ -1,20 +0,0 @@
import { WARNA } from '@/module/_global'
import t from 'react-simple-toasts'
type Event = "error" | "success" | "info" | "warning"
export const toast = (message: string, event?: Event) => {
t(message, {
position: "center",
render: (message) => <div style={{
padding: 12,
paddingLeft: 24,
paddingRight: 24,
borderRadius: "100px",
backgroundColor: event === "error" ? "red" : event === "success" ? "green" : event === "warning" ? "orange" : WARNA.biruTua,
color: "white",
boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.3)",
}}>
<div >{message?.toString()}</div>
</div>,
})
}

0
src/module/division/project/index.ts
View File

82
src/module/division/ui/DivisionCreate.tsx
View File

@@ -1,82 +0,0 @@
'use client'
import { ActionIcon, Avatar, Button, Card, Flex, ScrollArea, Select, Stack, Text, TextInput, Textarea } from "@mantine/core"
import { MultiSelectList } from "../lib/MultiSelectList"
import { WARNA } from "@/module/_global"
import { useTestDevisionListAnggota, useTestDevisionListGroup } from "@/lib/stateApi"
import { useState } from "react"
import _ from "lodash"
import { MdAccountCircle, MdClose, MdGroup, MdGroupAdd, MdGroupWork, MdShield } from "react-icons/md"
import { ButtonNavi } from "../lib/ButtonNavi"
import { pagePathTestDivision } from "@/lib/pagePath"
import { SingleSelect } from "../lib/SingleSelect"
import { ButtonConfirm } from "../lib/ButtonConfirm"
import { toast } from "../lib/toast"
export function DivisionCreate() {
const [val, setVal, load] = useTestDevisionListGroup<any[]>()
const [listAnggota, setListAnggota] = useTestDevisionListAnggota<any[]>()
const [listSelectedAnggota, setListSelectedAnggota] = useState<any[]>([])
const [selectedAdmin, setSelectedAdmin] = useState("")
const [selectedGroup, setSelectedGroup] = useState("")
return <Stack p={"md"} gap={"md"} >
<SingleSelect
desc="Pilih Grup"
icon={<MdGroupWork size={"1.5rem"} />}
selected={selectedGroup}
setSelected={setSelectedGroup}
data={val && val.map((v) => ({ label: v.name, value: v.id }))}
placeholder="Pilih Grup" />
<TextInput
size="md"
withAsterisk
radius={12}
placeholder="Nama"
label="Masukan Nama" />
<Textarea
size="md"
withAsterisk
radius={12}
autosize
minRows={6}
maxRows={12}
placeholder="Masukan Deskripsi"
label="Masukan Deskripsi" />
<MultiSelectList setListSelected={setListSelectedAnggota} listSelected={listSelectedAnggota} placeholder="Pilih Anggota" data={listAnggota.map((v) => ({ label: v.name, value: v.id }))} />
<SelectedAnggotaContainer setListSelectedAnggota={setListSelectedAnggota} listSelectedAnggota={listSelectedAnggota} listAnggota={listAnggota} />
<SingleSelect desc="Pilih Admin" icon={<MdShield size={"1.5rem"} />} selected={selectedAdmin} setSelected={setSelectedAdmin} data={listAnggota.filter((v) => listSelectedAnggota.includes(v.id)).map((v) => ({ label: v.name, value: v.id }))} placeholder="Select Admin" />
<ButtonConfirm onConfirm={() => {
toast("Simpan Berhasil", "success")
}} label="Simpan" desc="Apakah anda yakin ingin menyimpan data?" />
</Stack>
}
function SelectedAnggotaContainer({ listSelectedAnggota, listAnggota, setListSelectedAnggota }: { listSelectedAnggota: any[], listAnggota?: any[], setListSelectedAnggota: any }) {
if (_.isEmpty(listSelectedAnggota)) return null
return <Card>
<Stack>
<Flex justify={"space-between"}>
<Text>Anggota Terpilih</Text>
<Text>Total: {listSelectedAnggota.length}</Text>
</Flex>
<ScrollArea.Autosize mah={200}>
{listAnggota?.filter((v) => listSelectedAnggota.includes(v.id)).map((v, k) => <Stack py={"sm"} key={k}>
<Flex align={"center"} gap={"md"} justify={"space-between"}>
<Flex gap={"md"}>
<Avatar size={"md"} color={WARNA.biruTua}><MdAccountCircle /></Avatar><Text>{v.name}</Text>
</Flex>
<ActionIcon onClick={() => {
setListSelectedAnggota((prev: any) => prev.filter((val: any) => val !== v.id))
}} variant="subtle">
<MdClose />
</ActionIcon>
</Flex>
</Stack>)}
</ScrollArea.Autosize>
</Stack>
</Card>
}

22
src/module/division/ui/DivisionFilter.tsx
View File

@@ -1,22 +0,0 @@
import { Button, Divider, Flex, ScrollArea, Stack, Text } from "@mantine/core";
import { useDivisionfilter } from "../lib/devision_state";
import { useTestDevisionListDivision } from "@/lib/stateApi";
import { WARNA } from "@/module/_global";
export function DivisionFilter() {
const [filterText, setFilterText] = useDivisionfilter()
const [listDevision, setListDevision] = useTestDevisionListDivision<any[]>()
return <Stack>
{/* {listDevision.map((v, k) => <ViewList key={k} v={v} />)} */}
<Button color={WARNA.biruTua} radius={100}>Terapkan</Button>
</Stack>
}
function ViewList({ v }: { v: any }) {
return <Stack gap={0}>
<Flex p={"md"}>
<Text>{v.name}</Text>
</Flex>
<Divider />
</Stack>
}

5
src/module/division/ui/DivisionLayout.tsx
View File

@@ -1,5 +0,0 @@
export function DevisionLayout({ children }: { children: React.ReactNode }) {
return <div>
{children}
</div>
}

21
src/module/division/ui/DivisionPage.tsx
View File

@@ -1,21 +0,0 @@
import { getCountDivision } from "@/module/division/lib/division/get_count_devision";
import { getListDevision } from "@/module/division/lib/division/get_list_devision";
import { ContainerDevision } from "../component/ContainerDivision";
import { WebVitals } from "../lib/WebVitals";
import { ProviderTestDevisionListAnggota, ProviderTestDevisionListDivision, ProviderTestDevisionListGroup } from "@/lib/stateApi";
import { getListGroup } from "../lib/division/get_list_group";
import { getListAnggota } from "../lib/division/get_list_anggota";
export async function DivisionPage({ params, searchParams }: { params: any, searchParams: any }) {
const list_devision = await getListDevision();
const countDevision = await getCountDivision()
const listGroup = await getListGroup()
const listAnggota = await getListAnggota()
return <div>
<WebVitals searchParams={searchParams} />
<ProviderTestDevisionListDivision data={list_devision} />
<ProviderTestDevisionListGroup data={listGroup} />
<ProviderTestDevisionListAnggota data={listAnggota} />
<ContainerDevision params={params} searchParams={searchParams} list_devision={list_devision} countDevision={countDevision} />
</div>
}

5
src/module/division/ui/DivisionReport.tsx
View File

@@ -1,5 +0,0 @@
export function DivisionReport() {
return <div>
report
</div>
}

270
src/module/division/ui/DivisionView.tsx
View File

@@ -1,270 +0,0 @@
'use client'
import { Carousel } from "@mantine/carousel";
import { Avatar, Box, Center, Flex, Grid, Image, Paper, ScrollArea, SimpleGrid, Stack, Text, Title, UnstyledButton } from "@mantine/core";
import { MdAccountCircle, MdArrowForwardIos, MdCalendarMonth, MdEditCalendar, MdEditDocument, MdFileCopy, MdMessage, MdPeople, MdTimer, MdWhatsapp } from "react-icons/md";
import * as ICON from './../lib/file_icon'
import { WARNA } from "@/module/_global";
const listCaresoul = [
{
"id": "1",
"title": "title 1",
"description": "description 1",
"image": "https://cdn.digitaldesa.com/uploads/landing/artikel/thumbs/360175162e868c7d0ae0dc7dbc62adf9.jpg",
},
{
"id": "2",
"title": "title 2",
"description": "description 2",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxDUAjhyxqYuPigHXxQev_jX2zVqy9ULX5vQ&s",
},
{
"id": "3",
"title": "title 3",
"description": "description 3",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxDUAjhyxqYuPigHXxQev_jX2zVqy9ULX5vQ&s",
}
]
const listFeatures = [
{
"id": "1",
"title": "tugas",
"description": "description 1",
"total": "10",
"icon": MdEditDocument
},
{
"id": "2",
"title": "document",
"description": "description 2",
"total": "10",
"icon": MdFileCopy
},
{
"id": "3",
"title": "diskusi",
"description": "description 3",
"total": "10",
"icon": MdWhatsapp
},
{
"id": "4",
"title": "kalendar",
"description": "kalendar",
"total": "10",
"icon": MdEditCalendar
}
]
const iconContainer = (icon: string) => 'data:image/svg+xml;base64,' + btoa(icon)
const listDocument = [
{
"id": "1",
"title": "image 1",
"description": "description 1",
"image": iconContainer(ICON.IMAGE),
},
{
"id": "2",
"title": "data pdf",
"description": "description 2",
"image": iconContainer(ICON.PDF),
},
{
"id": "3",
"title": "data pdf 3",
"description": "description 3",
"image": iconContainer(ICON.PDF),
},
{
"id": "4",
"title": "text 4",
"description": "description 4",
"image": iconContainer(ICON.TEXT),
},
{
"id": "5",
"title": "text 5",
"description": "description 5",
"image": iconContainer(ICON.TEXT),
}
]
const listTugasHariIni = [
{
"id": "1",
"title": "image 1",
"description": "description 1",
"image": iconContainer(ICON.IMAGE),
},
{
"id": "2",
"title": "data pdf",
"description": "description 2",
"image": iconContainer(ICON.PDF),
},
{
"id": "3",
"title": "data pdf 3",
"description": "description 3",
"image": iconContainer(ICON.PDF),
},
{
"id": "4",
"title": "text 4",
"description": "description 4",
"image": iconContainer(ICON.TEXT),
},
]
const diskusiTerbaru = [
{
"id": "1",
"title": "image 1",
"user": "description 1",
"date": "10-10-2022"
},
{
"id": "2",
"title": "data pdf",
"user": "description 2",
"date": "10-10-2022"
},
{
"id": "3",
"title": "data pdf 3",
"user": "description 3",
"date": "10-10-2022"
},
{
"id": "4",
"title": "text 4",
"user": "description 4",
"date": "10-10-2022"
},
{
"id": "5",
"title": "text 5",
"user": "description 5",
"date": "10-10-2022"
}
]
export function DivisionView({ id }: { id: string }) {
return (
<Stack>
<Carousel withIndicators height={200}>
{listCaresoul.map((v) => <Carousel.Slide key={v.id} p={"md"}>
<Paper withBorder shadow="sm" radius={12}>
<Image src={v.image} alt="image" />
</Paper>
</Carousel.Slide>)}
</Carousel>
<Stack p={"md"}>
<Title order={4}>Features</Title>
<SimpleGrid cols={2} spacing={"md"}>
{listFeatures.map((v) => <UnstyledButton key={v.id}>
<Paper withBorder radius={12} p={"sm"}>
<Grid >
<Grid.Col span={"content"}>
<Avatar size={"lg"} bg={"#DCEED8"} color={WARNA.biruTua}>
<v.icon size={"2.5rem"} />
</Avatar>
</Grid.Col>
<Grid.Col span={"auto"}>
<Stack gap={0}>
<Box>
<Title order={5}>{v.title}</Title>
</Box>
<Flex justify={"space-between"} align={"center"}>
<Text size="sm" c="dimmed">{v.total} totall</Text>
<MdArrowForwardIos />
</Flex>
</Stack>
</Grid.Col>
</Grid>
</Paper>
</UnstyledButton>)}
</SimpleGrid>
</Stack>
<Stack p={"md"}>
<Title order={4}>Tugas Hari Ini</Title>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{listTugasHariIni.map((v) => <Carousel.Slide key={v.id}>
<UnstyledButton>
<Paper withBorder shadow="sm" radius={12} p={"md"} w={300} bg={WARNA.biruTua}>
<Stack>
<Title order={5} c={"white"} >{v.title}</Title>
<Flex w={"100%"} justify={"space-between"} align={"center"}>
<Flex gap={"sm"}>
<MdCalendarMonth color={"white"} size={"1.5rem"} />
<Text c={"white"}>{v.description}</Text>
</Flex>
<Avatar.Group>
<Avatar size={"md"} >
<MdAccountCircle size={"2.5rem"} />
</Avatar>
<Avatar size={"md"}>
+ 15
</Avatar>
</Avatar.Group>
</Flex>
</Stack>
</Paper>
</UnstyledButton>
</Carousel.Slide>)}
</Carousel>
</Stack>
<Stack p={"md"}>
<Title order={4}>Document Terbaru</Title>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{listDocument.map((v) => <Carousel.Slide key={v.id}>
<UnstyledButton>
<Stack gap={0}>
<Paper withBorder shadow="sm" radius={12} >
<Center p={"md"}>
<Image w={"75"} src={v.image} alt="image" />
</Center>
</Paper>
<Box p={"sm"}>
<Text c={"dimmed"}>{v.title}</Text>
</Box>
</Stack>
</UnstyledButton>
</Carousel.Slide>)}
</Carousel>
</Stack>
<Stack p={"md"}>
<Title order={4}>Diskusi Terbaru</Title>
<Stack gap={"md"}>
{diskusiTerbaru.map((v) => <UnstyledButton key={v.id}>
<Paper withBorder radius={12} p={"md"}>
<Stack>
<Flex gap={"md"} align={"center"}>
<MdMessage size={"1.5rem"} />
<Title order={4}>{v.title}</Title>
</Flex>
<Flex justify={"space-between"} align={"center"}>
<Flex gap={"xs"} align={"center"} c={"dimmed"}>
<MdAccountCircle size={"1.5rem"} />
<Text>{v.user}</Text>
</Flex>
<Flex gap={"xs"} align={"center"} c={"dimmed"}>
<MdTimer size={"1.5rem"} />
<Text>{v.date}</Text>
</Flex>
</Flex>
</Stack>
</Paper>
</UnstyledButton>)}
</Stack>
</Stack>
</Stack>
)
}

11
src/module/division_new/_division_fitur/calender/components/create_user_division_calender.tsx
View File

@@ -1,11 +0,0 @@
import { Box } from '@mantine/core';
import React from 'react';
import NavbarCreateUserCalender from './navbar_create_user_calender';
export default function CreateUserDivisionCalender() {
return (
<Box>
<NavbarCreateUserCalender />
</Box>
);
}

67
src/module/division_new/_division_fitur/calender/components/list_ulangi_event.tsx
View File

@@ -1,67 +0,0 @@
"use client"
import { WARNA } from '@/module/_global';
import { Box, Button, Checkbox } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React from 'react';
const dataUlangi = [
{
id: 1,
name: 'Acara 1 Kali'
},
{
id: 2,
name: 'Hari Kerja (Sen - Jum)'
},
{
id: 3,
name: 'Mingguan'
},
{
id: 4,
name: 'Bulanan'
},
{
id: 5,
name: 'Tahunan'
},
]
export default function ListUlangiEvent() {
const router = useRouter()
return (
<Box>
{dataUlangi.map((v, i) => {
return (
<Box key={i} mb={20}>
<Box style={{
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
padding: 20
}}
>
<Checkbox
label={v.name}
color="teal"
radius="xl"
/>
</Box>
</Box>
)
})}
<Box mt={"xl"}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => router.push(``)}
>
Simpan
</Button>
</Box>
</Box>
);
}

119
src/module/division_new/_division_fitur/calender/components/navbar_create_user_calender.tsx
View File

@@ -1,119 +0,0 @@
'use client'
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { Avatar, Box, Button, Center, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { HiMagnifyingGlass } from 'react-icons/hi2';
const dataUser = [
{
id: 1,
img: "https://i.pravatar.cc/500?img=3",
name: "Doni Setiawan",
},
{
id: 2,
img: "https://i.pravatar.cc/500?img=10",
name: "Ilham Udin",
},
{
id: 3,
img: "https://i.pravatar.cc/500?img=11",
name: "Didin Anang",
},
{
id: 4,
img: "https://i.pravatar.cc/500?img=1",
name: "Angga Saputra",
},
{
id: 5,
img: "https://i.pravatar.cc/500?img=2",
name: "Marcel Widianto",
},
{
id: 6,
img: "https://i.pravatar.cc/500?img=7",
name: "Bagas Nusantara",
},
];
export default function NavbarCreateUserCalender() {
const router = useRouter()
const [selectedFiles, setSelectedFiles] = useState<Record<number, boolean>>({});
const handleFileClick = (index: number) => {
setSelectedFiles((prevSelectedFiles) => ({
...prevSelectedFiles,
[index]: !prevSelectedFiles[index],
}));
};
return (
<Box>
<LayoutNavbarNew back="/calender/create" title="Tambah Anggota" menu />
<Box p={20}>
<Stack>
<TextInput
styles={{
input: {
color: WARNA.biruTua,
borderRadius: '#A3A3A3',
borderColor: '#A3A3A3',
},
}}
size="md"
radius={30}
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
/>
<Box pt={10}>
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
spacing={{ base: 20, sm: "xl" }}
verticalSpacing={{ base: "md", sm: "xl" }}
>
{dataUser.map((v, index) => {
const isSelected = selectedFiles[index];
return (
<Box key={index} mb={10}>
<Box
bg={isSelected ? WARNA.bgHijauMuda : "white"}
style={{
border: `1px solid ${WARNA.biruTua}`,
borderRadius: 20,
}}
py={10}
onClick={() => handleFileClick(index)}
>
<Center>
<Avatar src={v.img} alt="it's me" size="xl" />
</Center>
<Text mt={20} ta="center">
{v.name}
</Text>
</Box>
</Box>
);
})}
</SimpleGrid>
</Box>
</Stack>
<Box mt="xl">
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => router.push("/calender/create")}
>
Simpan
</Button>
</Box>
</Box>
</Box>
);
}

15
src/module/division_new/_division_fitur/calender/components/ulangi_event.tsx
View File

@@ -1,15 +0,0 @@
import { LayoutNavbarNew } from '@/module/_global';
import { ActionIcon, Box } from '@mantine/core';
import React from 'react';
import ListUlangiEvent from './list_ulangi_event';
export default function UlangiEvent() {
return (
<Box>
<LayoutNavbarNew back='/calender/create' title='ulangi event' menu />
<Box p={20}>
<ListUlangiEvent />
</Box>
</Box>
);
}

9
src/module/division_new/_division_fitur/calender/view/view_create_division_calender.tsx
View File

@@ -1,9 +0,0 @@
import React from 'react';
import CreateCalenderDivisionCaleder from '../../../../calender/ui/create_calender_division_caleder';
export default function ViewCreateDivisionCalender() {
return (
<CreateCalenderDivisionCaleder />
);
}

9
src/module/division_new/_division_fitur/calender/view/view_detail_event_division.tsx
View File

@@ -1,9 +0,0 @@
import React from 'react';
import DetailEventDivision from '../../../../calender/ui/detail_event_division';
export default function ViewDetailEventDivision() {
return (
<DetailEventDivision />
);
}

12
src/module/division_new/_division_fitur/calender/view/view_division_calender.tsx
View File

@@ -1,12 +0,0 @@
import React from 'react';
import NavbarDivisionCalender from '../../../../calender/ui/navbar_division_calender';
import { Box } from '@mantine/core';
export default function ViewDivisionCalender() {
return (
<Box>
<NavbarDivisionCalender />
</Box>
);
}

12
src/module/division_new/_division_fitur/calender/view/view_history_division_calender.tsx
View File

@@ -1,12 +0,0 @@
import { Box } from '@mantine/core';
import React from 'react';
import HistoryDivisionCalender from '../../../../calender/ui/history_division_calender';
export default function ViewHistoryDivisionCalender() {
return (
<Box>
<HistoryDivisionCalender />
</Box>
);
}

12
src/module/division_new/index.ts
View File

@@ -1,9 +1,4 @@
import { IFormDivision, IFormMemberDivision, IFormFixDivision, IDataDivison, IDataMemberDivision } from './lib/type_division';
import CreateUserDivisionCalender from "./_division_fitur/calender/components/create_user_division_calender";
import ViewCreateDivisionCalender from "./_division_fitur/calender/view/view_create_division_calender";
import ViewDetailEventDivision from "./_division_fitur/calender/view/view_detail_event_division";
import ViewDivisionCalender from "./_division_fitur/calender/view/view_division_calender";
import ViewHistoryDivisionCalender from "./_division_fitur/calender/view/view_history_division_calender";
import CreateAdminDivision from "./ui/create_admin_division";
import CreateUsers from "./ui/create_users";
import ListDivision from './ui/list_division';
@@ -20,15 +15,9 @@ import EditDivision from './ui/edit_division';
import CreateReport from './ui/create_report';
import ReportDivisionId from './ui/report_division_id';
import { funGetDivisionById, funGetListDivisionByIdDivision } from './lib/api_division';
import UlangiEvent from './_division_fitur/calender/components/ulangi_event';
export { CreateUsers };
export { CreateAdminDivision };
export { ViewDivisionCalender };
export { ViewCreateDivisionCalender };
export { CreateUserDivisionCalender };
export { ViewHistoryDivisionCalender };
export { ViewDetailEventDivision };
export type { IFormDivision, IFormMemberDivision, IFormFixDivision, IDataDivison, IDataMemberDivision }
export { ListDivision }
export { CreateDivision }
@@ -45,4 +34,3 @@ export { CreateReport }
export { ReportDivisionId }
export { funGetDivisionById }
export { funGetListDivisionByIdDivision }
export { UlangiEvent }

0
src/module/division/lib/file_icon.ts → src/module/division_new/lib/file_icon.ts
View File

28
src/module/division_new/ui/list_discussion.tsx
View File

@@ -10,32 +10,6 @@ import { GoDiscussionClosed } from "react-icons/go";
import { funGetDetailDivisionById } from "../lib/api_division";
import { IDataDiscussionOnDetailDivision } from "../lib/type_division";
const dataDiskusi = [
{
id: 1,
judul: "Mengatasi Limbah Makanan ",
user: "Fibra Marcell",
date: "21 Juni 2024",
},
{
id: 2,
judul: "Pentingnya Menjaga Kelestarian Hutan ",
user: "Bayu Tegar",
date: "15 Juni 2024",
},
{
id: 3,
judul: "Mengatasi Limbah Industri ",
user: "Nian Putri",
date: "11 Mei 2024",
},
{
id: 4,
judul: "Manfaat Sampah Plastik",
user: "Budi Prasetyo",
date: "10 Mei 2024",
},
];
export default function ListDiscussionOnDetailDivision() {
const router = useRouter();
@@ -110,7 +84,7 @@ export default function ListDiscussionOnDetailDivision() {
padding: 10,
}}
mb={10}
onClick={() => router.push(`/discussion/${v.id}`)}
onClick={() => router.push(`${param.id}/discussion/${v.id}`)}
>
<Group>
<GoDiscussionClosed size={25} />

2
src/module/division_new/ui/list_document.tsx
View File

@@ -2,7 +2,7 @@
import { WARNA } from "@/module/_global";
import { Carousel } from "@mantine/carousel";
import { Box, Image, Text, Center, Paper, Stack, UnstyledButton, Skeleton, Group } from "@mantine/core";
import * as ICON from '../../division/lib/file_icon'
import * as ICON from '../lib/file_icon'
import { useParams, useRouter } from "next/navigation";
import { useShallowEffect } from "@mantine/hooks";
import toast from "react-hot-toast";