fix: File view
Deksripsi: - Tampilan file view pdf - Optimalisasi admin ## No Isuue
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global";
|
||||
import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
|
||||
import { Button } from "@mantine/core";
|
||||
import { IconCirclePlus } from "@tabler/icons-react";
|
||||
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
"use server";
|
||||
|
||||
import prisma from "@/app/lib/prisma";
|
||||
import { RouterAdminAppInformation } from "@/app/lib/router_admin/router_app_information";
|
||||
import { revalidatePath } from "next/cache";
|
||||
|
||||
export async function adminAppInformation_funCreateBidangBisnis({
|
||||
name,
|
||||
}: {
|
||||
name: string;
|
||||
}) {
|
||||
const count = await prisma.masterBidangBisnis.count({});
|
||||
const idBidangBisnis = count + 1;
|
||||
|
||||
const createData = await prisma.masterBidangBisnis.create({
|
||||
data: {
|
||||
id: idBidangBisnis.toString(),
|
||||
name: name,
|
||||
},
|
||||
});
|
||||
|
||||
if (!createData) return { status: 400, message: "Gagal menambahkan" };
|
||||
revalidatePath(RouterAdminAppInformation.main);
|
||||
return { status: 201, message: "Berhasil menambahkan" };
|
||||
}
|
||||
7
src/app_modules/admin/app_info/fun/index.ts
Normal file
7
src/app_modules/admin/app_info/fun/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import { adminAppInformation_funCreateBidangBisnis } from "./create/fun_create_bidang_bisnis";
|
||||
import { adminAppInformation_funGetBidangBisnis } from "./master/fun_get_master_bidang_bisnis";
|
||||
import { adminAppInformation_funUpdateBidangBisnis } from "./update/fun_update_bidang_bisnis";
|
||||
|
||||
export { adminAppInformation_funGetBidangBisnis };
|
||||
export { adminAppInformation_funCreateBidangBisnis };
|
||||
export { adminAppInformation_funUpdateBidangBisnis };
|
||||
@@ -0,0 +1,13 @@
|
||||
"use server";
|
||||
|
||||
import prisma from "@/app/lib/prisma";
|
||||
|
||||
export async function adminAppInformation_funGetBidangBisnis() {
|
||||
const data = await prisma.masterBidangBisnis.findMany({
|
||||
orderBy: {
|
||||
createdAt: "desc",
|
||||
},
|
||||
});
|
||||
|
||||
return data;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
"use server";
|
||||
|
||||
import prisma from "@/app/lib/prisma";
|
||||
import { RouterAdminAppInformation } from "@/app/lib/router_admin/router_app_information";
|
||||
import { revalidatePath } from "next/cache";
|
||||
|
||||
export async function adminAppInformation_funUpdateBidangBisnis({
|
||||
data,
|
||||
}: {
|
||||
data: { id: string; active?: boolean; name?: string };
|
||||
}) {
|
||||
if (data.name) {
|
||||
const updateData = await prisma.masterBidangBisnis.update({
|
||||
where: {
|
||||
id: data.id,
|
||||
},
|
||||
data: {
|
||||
name: data.name,
|
||||
},
|
||||
});
|
||||
|
||||
if (!updateData) return { status: 400, message: "Gagal update data" };
|
||||
revalidatePath(RouterAdminAppInformation.main);
|
||||
return { status: 200, message: "Berhasil update data" };
|
||||
}
|
||||
|
||||
if (data.active !== null) {
|
||||
const updateAktivasi = await prisma.masterBidangBisnis.update({
|
||||
where: {
|
||||
id: data.id,
|
||||
},
|
||||
data: {
|
||||
active: data.active,
|
||||
},
|
||||
});
|
||||
|
||||
if (!updateAktivasi)
|
||||
return { status: 400, message: "Gagal update aktivasi" };
|
||||
revalidatePath(RouterAdminAppInformation.main);
|
||||
return { status: 200, message: "Berhasil update aktivasi" };
|
||||
}
|
||||
}
|
||||
9
src/app_modules/admin/app_info/lib/global_state.ts
Normal file
9
src/app_modules/admin/app_info/lib/global_state.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import { atomWithStorage } from "jotai/utils";
|
||||
|
||||
/**
|
||||
* @param index | 0 - 3 | 1: Whatsapp, 2: Bank, 3: Bidang Bisnis
|
||||
*/
|
||||
export const gs_app_information_menu = atomWithStorage(
|
||||
"gs_app_information_menu",
|
||||
"1"
|
||||
);
|
||||
3
src/app_modules/admin/app_info/lib/index.ts
Normal file
3
src/app_modules/admin/app_info/lib/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import { gs_app_information_menu } from "./global_state";
|
||||
|
||||
export { gs_app_information_menu };
|
||||
@@ -1,26 +1,76 @@
|
||||
"use client";
|
||||
|
||||
import { Space, Stack } from "@mantine/core";
|
||||
import { Button, Group, Stack } from "@mantine/core";
|
||||
import { useAtom } from "jotai";
|
||||
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
|
||||
import { gs_app_information_menu } from "../lib";
|
||||
import {
|
||||
AdminAppInformation_ViewInfoBank,
|
||||
AdminAppInformation_ViewInformasiWhatApps,
|
||||
AdminAppInformation_ViewKategoriPortofolio,
|
||||
} from "../view";
|
||||
|
||||
export default function AdminAppInformation_UiMain({
|
||||
nomorAdmin,
|
||||
listBank,
|
||||
dataBidangBisnis,
|
||||
}: {
|
||||
nomorAdmin: any;
|
||||
listBank: any[];
|
||||
dataBidangBisnis: any[];
|
||||
}) {
|
||||
const [selectPage, setSelectPage] = useAtom(gs_app_information_menu);
|
||||
const listPage = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Whatsapp",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Informasi Bank",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Bidang Bisnis",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack h={"100%"}>
|
||||
<ComponentAdminGlobal_HeaderTamplate name="App Information" />
|
||||
<AdminAppInformation_ViewInformasiWhatApps nomorAdmin={nomorAdmin} />
|
||||
<Space h={50} />
|
||||
<AdminAppInformation_ViewInfoBank listBank={listBank} />
|
||||
|
||||
<Group>
|
||||
{listPage.map((e, i) => (
|
||||
<Button
|
||||
key={i}
|
||||
radius={"xl"}
|
||||
c={"white"}
|
||||
bg={selectPage === e.id ? "blue" : "gray.3"}
|
||||
onClick={() => {
|
||||
setSelectPage(e.id);
|
||||
}}
|
||||
style={{
|
||||
transition: "all 0.5s",
|
||||
}}
|
||||
>
|
||||
{e.name}
|
||||
</Button>
|
||||
))}
|
||||
</Group>
|
||||
|
||||
{selectPage === "1" && (
|
||||
<AdminAppInformation_ViewInformasiWhatApps nomorAdmin={nomorAdmin} />
|
||||
)}
|
||||
|
||||
{selectPage === "2" && (
|
||||
<AdminAppInformation_ViewInfoBank listBank={listBank} />
|
||||
)}
|
||||
{selectPage === "3" && (
|
||||
<AdminAppInformation_ViewKategoriPortofolio
|
||||
dataBidangBisnis={dataBidangBisnis}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import AdminAppInformation_ViewInfoBank from "./view_info_bank";
|
||||
import AdminAppInformation_ViewInformasiWhatApps from "./view_info_whatsapp";
|
||||
import { AdminAppInformation_ViewKategoriPortofolio } from "./view_kategori_portofolio";
|
||||
|
||||
export { AdminAppInformation_ViewInformasiWhatApps };
|
||||
export { AdminAppInformation_ViewInfoBank };
|
||||
export { AdminAppInformation_ViewKategoriPortofolio };
|
||||
|
||||
@@ -27,7 +27,7 @@ import adminAppInformation_createBank from "../fun/create/fun_create_new_bank";
|
||||
import adminAppInformation_getMasterBank from "../fun/master/get_list_bank";
|
||||
import adminAppInformation_updateStatusBankById from "../fun/update/fun_udpate_status_bank";
|
||||
import adminAppInformation_updateDataBankById from "../fun/update/fun_update_data_bank";
|
||||
import { ComponentAdminGlobal_TitlePage } from "../../_admin_global";
|
||||
import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
|
||||
import { AdminAppInformation_ComponentTitlePageBank } from "../component";
|
||||
|
||||
export default function AdminAppInformation_ViewInfoBank({
|
||||
@@ -187,249 +187,235 @@ export default function AdminAppInformation_ViewInfoBank({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack spacing={"xs"}>
|
||||
<AdminAppInformation_ComponentTitlePageBank
|
||||
onEventListener={(val: { isCreate: any; isUpdate: any }) => {
|
||||
setIsCreate(val.isCreate);
|
||||
setIsUpdate(val.isUpdate);
|
||||
}}
|
||||
/>
|
||||
{/* <ComponentAdminGlobal_TitlePage
|
||||
name="Informasi Bank"
|
||||
component={
|
||||
<Button
|
||||
w={120}
|
||||
leftIcon={<IconCirclePlus />}
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
setIsCreate(true);
|
||||
setIsUpdate(false);
|
||||
}}
|
||||
>
|
||||
Tambah
|
||||
</Button>
|
||||
}
|
||||
/> */}
|
||||
</Stack>
|
||||
|
||||
<Grid>
|
||||
<Grid.Col span={9}>
|
||||
<Paper p={"md"} withBorder shadow="lg" h={"50vh"}>
|
||||
<ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
|
||||
<Table
|
||||
verticalSpacing={"xs"}
|
||||
horizontalSpacing={"md"}
|
||||
p={"md"}
|
||||
w={1000}
|
||||
striped
|
||||
highlightOnHover
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<Center w={150}>Bank</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Status</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Nama Rekening</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Nomor Rekening</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Aksi</Center>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{rowTable}</tbody>
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
</Paper>
|
||||
</Grid.Col>
|
||||
|
||||
<Grid.Col span={3}>
|
||||
{isCreate ? (
|
||||
<Paper p={"md"} withBorder shadow="lg">
|
||||
<Stack>
|
||||
<Center>
|
||||
<Title order={5}>Tambah Daftar Bank</Title>
|
||||
</Center>
|
||||
|
||||
<TextInput
|
||||
label={"Nama Bank"}
|
||||
placeholder="Masukan nama bank"
|
||||
onChange={(val) => {
|
||||
setNewData({
|
||||
...newData,
|
||||
namaBank: val.currentTarget.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label={"Nama Rekening"}
|
||||
placeholder="Masukan nama rekening"
|
||||
onChange={(val) => {
|
||||
setNewData({
|
||||
...newData,
|
||||
namaAkun: val.currentTarget.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label={"Nomor Rekening Bank"}
|
||||
placeholder=" Masukan nomor rekening bank"
|
||||
type="number"
|
||||
onChange={(val) => {
|
||||
setNewData({
|
||||
...newData,
|
||||
norek: val.currentTarget.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Group position="right" align="flex-end">
|
||||
<Button
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
setIsCreate(false);
|
||||
}}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
loading={isLoadingCreate}
|
||||
loaderPosition="center"
|
||||
style={{ transition: "0.5s" }}
|
||||
disabled={_.values(newData).includes("") ? true : false}
|
||||
radius={"xl"}
|
||||
color="green"
|
||||
onClick={() => {
|
||||
onCreate();
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
{isUpdate ? (
|
||||
<Paper p={"md"} withBorder shadow="lg">
|
||||
<Stack>
|
||||
<Center>
|
||||
<Title order={5}>Update Data Bank</Title>
|
||||
</Center>
|
||||
<TextInput
|
||||
label={"Nama Bank"}
|
||||
placeholder="Masukan nama bank"
|
||||
value={updateData.namaBank}
|
||||
onChange={(val) => {
|
||||
const value = val.currentTarget.value;
|
||||
setUpdateData({ ...updateData, namaBank: value });
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label={"Nama Rekening"}
|
||||
placeholder="Masukan nama rekening"
|
||||
value={updateData.namaAkun}
|
||||
onChange={(val) => {
|
||||
const value = val.currentTarget.value;
|
||||
setUpdateData({ ...updateData, namaAkun: value });
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label={"Nomor Rekening Bank"}
|
||||
placeholder=" Masukan nomor rekening bank"
|
||||
type="number"
|
||||
value={updateData.norek}
|
||||
onChange={(val) => {
|
||||
const value = val.currentTarget.value;
|
||||
setUpdateData({ ...updateData, norek: value });
|
||||
}}
|
||||
/>
|
||||
<Group position="right">
|
||||
<Button
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
setIsUpdate(false);
|
||||
}}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
style={{ transition: "0.5s" }}
|
||||
disabled={
|
||||
updateData?.namaBank === "" ||
|
||||
updateData?.namaAkun === "" ||
|
||||
updateData?.norek === ""
|
||||
? true
|
||||
: false
|
||||
}
|
||||
radius={"xl"}
|
||||
color="green"
|
||||
onClick={() => {
|
||||
onUpdate();
|
||||
}}
|
||||
>
|
||||
Update
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
{/* Activasi bank */}
|
||||
<Modal
|
||||
centered
|
||||
withCloseButton={false}
|
||||
opened={isActivation}
|
||||
onClose={() => setIsActivation(false)}
|
||||
>
|
||||
<Stack align="center">
|
||||
<Title order={5}>
|
||||
Anda ingin{" "}
|
||||
{updateStatus.active ? (
|
||||
<Text span inherit>
|
||||
mengaktifkan
|
||||
</Text>
|
||||
) : (
|
||||
<Text span inherit>
|
||||
menonaktifkan
|
||||
</Text>
|
||||
)}{" "}
|
||||
Bank ini ?
|
||||
</Title>
|
||||
<Group>
|
||||
<Button radius={"xl"} onClick={() => setIsActivation(false)}>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
color="green"
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
onUpdateActivation({
|
||||
id: updateStatus.id,
|
||||
value: updateStatus.active as any,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Iya
|
||||
</Button>
|
||||
</Group>
|
||||
<Stack>
|
||||
<Stack spacing={"xs"}>
|
||||
<AdminAppInformation_ComponentTitlePageBank
|
||||
onEventListener={(val: { isCreate: any; isUpdate: any }) => {
|
||||
setIsCreate(val.isCreate);
|
||||
setIsUpdate(val.isUpdate);
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
<Grid>
|
||||
<Grid.Col span={9}>
|
||||
<Paper p={"md"} withBorder shadow="lg" h={"65vh"}>
|
||||
<ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
|
||||
<Table
|
||||
verticalSpacing={"xs"}
|
||||
horizontalSpacing={"md"}
|
||||
p={"md"}
|
||||
w={1000}
|
||||
striped
|
||||
highlightOnHover
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<Center w={150}>Bank</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Status</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Nama Rekening</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Nomor Rekening</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Aksi</Center>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{rowTable}</tbody>
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
</Paper>
|
||||
</Grid.Col>
|
||||
|
||||
<Grid.Col span={3}>
|
||||
{isCreate ? (
|
||||
<Paper p={"md"} withBorder shadow="lg">
|
||||
<Stack>
|
||||
<Center>
|
||||
<Title order={5}>Tambah Daftar Bank</Title>
|
||||
</Center>
|
||||
|
||||
<TextInput
|
||||
label={"Nama Bank"}
|
||||
placeholder="Masukan nama bank"
|
||||
onChange={(val) => {
|
||||
setNewData({
|
||||
...newData,
|
||||
namaBank: val.currentTarget.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label={"Nama Rekening"}
|
||||
placeholder="Masukan nama rekening"
|
||||
onChange={(val) => {
|
||||
setNewData({
|
||||
...newData,
|
||||
namaAkun: val.currentTarget.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label={"Nomor Rekening Bank"}
|
||||
placeholder=" Masukan nomor rekening bank"
|
||||
type="number"
|
||||
onChange={(val) => {
|
||||
setNewData({
|
||||
...newData,
|
||||
norek: val.currentTarget.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Group position="right" align="flex-end">
|
||||
<Button
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
setIsCreate(false);
|
||||
}}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
loading={isLoadingCreate}
|
||||
loaderPosition="center"
|
||||
style={{ transition: "0.5s" }}
|
||||
disabled={_.values(newData).includes("") ? true : false}
|
||||
radius={"xl"}
|
||||
color="green"
|
||||
onClick={() => {
|
||||
onCreate();
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
{isUpdate ? (
|
||||
<Paper p={"md"} withBorder shadow="lg">
|
||||
<Stack>
|
||||
<Center>
|
||||
<Title order={5}>Update Data Bank</Title>
|
||||
</Center>
|
||||
<TextInput
|
||||
label={"Nama Bank"}
|
||||
placeholder="Masukan nama bank"
|
||||
value={updateData.namaBank}
|
||||
onChange={(val) => {
|
||||
const value = val.currentTarget.value;
|
||||
setUpdateData({ ...updateData, namaBank: value });
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label={"Nama Rekening"}
|
||||
placeholder="Masukan nama rekening"
|
||||
value={updateData.namaAkun}
|
||||
onChange={(val) => {
|
||||
const value = val.currentTarget.value;
|
||||
setUpdateData({ ...updateData, namaAkun: value });
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label={"Nomor Rekening Bank"}
|
||||
placeholder=" Masukan nomor rekening bank"
|
||||
type="number"
|
||||
value={updateData.norek}
|
||||
onChange={(val) => {
|
||||
const value = val.currentTarget.value;
|
||||
setUpdateData({ ...updateData, norek: value });
|
||||
}}
|
||||
/>
|
||||
<Group position="right">
|
||||
<Button
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
setIsUpdate(false);
|
||||
}}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
style={{ transition: "0.5s" }}
|
||||
disabled={
|
||||
updateData?.namaBank === "" ||
|
||||
updateData?.namaAkun === "" ||
|
||||
updateData?.norek === ""
|
||||
? true
|
||||
: false
|
||||
}
|
||||
radius={"xl"}
|
||||
color="green"
|
||||
onClick={() => {
|
||||
onUpdate();
|
||||
}}
|
||||
>
|
||||
Update
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
{/* Activasi bank */}
|
||||
<Modal
|
||||
centered
|
||||
withCloseButton={false}
|
||||
opened={isActivation}
|
||||
onClose={() => setIsActivation(false)}
|
||||
>
|
||||
<Stack align="center">
|
||||
<Title order={5}>
|
||||
Anda ingin{" "}
|
||||
{updateStatus.active ? (
|
||||
<Text span inherit>
|
||||
mengaktifkan
|
||||
</Text>
|
||||
) : (
|
||||
<Text span inherit>
|
||||
menonaktifkan
|
||||
</Text>
|
||||
)}{" "}
|
||||
Bank ini ?
|
||||
</Title>
|
||||
<Group>
|
||||
<Button radius={"xl"} onClick={() => setIsActivation(false)}>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
color="green"
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
onUpdateActivation({
|
||||
id: updateStatus.id,
|
||||
value: updateStatus.active as any,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Iya
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
358
src/app_modules/admin/app_info/view/view_kategori_portofolio.tsx
Normal file
358
src/app_modules/admin/app_info/view/view_kategori_portofolio.tsx
Normal file
@@ -0,0 +1,358 @@
|
||||
import { MODEL_DEFAULT_MASTER_OLD } from "@/app_modules/model_global/interface";
|
||||
import {
|
||||
ActionIcon,
|
||||
Button,
|
||||
Center,
|
||||
Grid,
|
||||
Group,
|
||||
Modal,
|
||||
Paper,
|
||||
ScrollArea,
|
||||
Stack,
|
||||
Switch,
|
||||
Table,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from "@mantine/core";
|
||||
import { IconCirclePlus, IconEdit } from "@tabler/icons-react";
|
||||
import { useState } from "react";
|
||||
import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
|
||||
import { ComponentAdminGlobal_NotifikasiBerhasil } from "../../_admin_global/admin_notifikasi/notifikasi_berhasil";
|
||||
import { ComponentAdminGlobal_NotifikasiGagal } from "../../_admin_global/admin_notifikasi/notifikasi_gagal";
|
||||
import {
|
||||
adminAppInformation_funCreateBidangBisnis,
|
||||
adminAppInformation_funGetBidangBisnis,
|
||||
adminAppInformation_funUpdateBidangBisnis,
|
||||
} from "../fun";
|
||||
|
||||
export function AdminAppInformation_ViewKategoriPortofolio({
|
||||
dataBidangBisnis,
|
||||
}: {
|
||||
dataBidangBisnis: MODEL_DEFAULT_MASTER_OLD[];
|
||||
}) {
|
||||
const [data, setData] = useState(dataBidangBisnis);
|
||||
|
||||
// Create
|
||||
const [isLoadingCreate, setLoadingCreate] = useState(false);
|
||||
const [isCreate, setIsCreate] = useState(false);
|
||||
const [newData, setNewData] = useState("");
|
||||
async function onCreate() {
|
||||
const create = await adminAppInformation_funCreateBidangBisnis({
|
||||
name: newData,
|
||||
});
|
||||
|
||||
if (create.status === 201) {
|
||||
try {
|
||||
setLoadingCreate(true);
|
||||
const loadData = await adminAppInformation_funGetBidangBisnis();
|
||||
setData(loadData);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setNewData("");
|
||||
setLoadingCreate(false);
|
||||
ComponentAdminGlobal_NotifikasiBerhasil(create.message);
|
||||
}
|
||||
} else {
|
||||
ComponentAdminGlobal_NotifikasiGagal(create.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Update Data
|
||||
const [isLoadingUpdate, setLoadingUpdate] = useState(false);
|
||||
const [isUpdate, setIsUpdate] = useState(false);
|
||||
const [updateData, setUpdateData] = useState({
|
||||
id: "",
|
||||
name: "",
|
||||
});
|
||||
|
||||
async function onUpdate() {
|
||||
const updt = await adminAppInformation_funUpdateBidangBisnis({
|
||||
data: updateData as any,
|
||||
});
|
||||
if (updt?.status === 200) {
|
||||
try {
|
||||
setLoadingUpdate(true);
|
||||
const loadData = await adminAppInformation_funGetBidangBisnis();
|
||||
setData(loadData);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setLoadingUpdate(false);
|
||||
ComponentAdminGlobal_NotifikasiBerhasil(updt.message);
|
||||
}
|
||||
} else {
|
||||
ComponentAdminGlobal_NotifikasiGagal(updt?.message as any);
|
||||
}
|
||||
}
|
||||
|
||||
// Activation
|
||||
const [openModal, setOpenModal] = useState(false);
|
||||
const [updateStatus, setUpdateStatus] = useState({
|
||||
id: "",
|
||||
active: null,
|
||||
});
|
||||
|
||||
async function onUpdateActivation({
|
||||
id,
|
||||
active,
|
||||
}: {
|
||||
id: string;
|
||||
active: boolean;
|
||||
}) {
|
||||
const updt = await adminAppInformation_funUpdateBidangBisnis({
|
||||
data: { id: id, active: active },
|
||||
});
|
||||
|
||||
if (updt?.status === 200) {
|
||||
try {
|
||||
setLoadingUpdate(true);
|
||||
const loadData = await adminAppInformation_funGetBidangBisnis();
|
||||
setData(loadData);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setOpenModal(false);
|
||||
setLoadingUpdate(false);
|
||||
ComponentAdminGlobal_NotifikasiBerhasil(updt?.message);
|
||||
}
|
||||
} else {
|
||||
ComponentAdminGlobal_NotifikasiGagal(updt?.message as any);
|
||||
}
|
||||
}
|
||||
|
||||
// Row Table
|
||||
const rowTable = data.map((e, i) => (
|
||||
<tr key={i}>
|
||||
<td>
|
||||
<Center>
|
||||
<Text>{e?.name}</Text>
|
||||
</Center>
|
||||
</td>
|
||||
<td>
|
||||
<Center>
|
||||
<Switch
|
||||
color="orange"
|
||||
onLabel="ON"
|
||||
offLabel="OFF"
|
||||
checked={e?.active}
|
||||
onChange={(val) => {
|
||||
setOpenModal(true);
|
||||
setUpdateStatus({
|
||||
id: e?.id,
|
||||
active: val.currentTarget.checked as any,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Center>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<Stack align="center" justify="center">
|
||||
<ActionIcon
|
||||
radius={"xl"}
|
||||
variant="transparent"
|
||||
onClick={() => {
|
||||
setIsUpdate(true);
|
||||
setIsCreate(false);
|
||||
setUpdateData({
|
||||
id: e?.id,
|
||||
name: e?.name,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Tooltip label="Edit">
|
||||
<IconEdit color="green" />
|
||||
</Tooltip>
|
||||
</ActionIcon>
|
||||
</Stack>
|
||||
</td>
|
||||
</tr>
|
||||
));
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<ComponentAdminGlobal_TitlePage
|
||||
name="Kategori Bidang Bisnis"
|
||||
component={
|
||||
<Button
|
||||
radius={"xl"}
|
||||
leftIcon={<IconCirclePlus />}
|
||||
onClick={() => {
|
||||
setIsCreate(true);
|
||||
setIsUpdate(false);
|
||||
}}
|
||||
>
|
||||
Tambah
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
<Grid>
|
||||
<Grid.Col span={9}>
|
||||
<Paper p={"md"} withBorder shadow="lg" h={"65vh"}>
|
||||
<ScrollArea w={"100%"} h={"90%"} offsetScrollbars>
|
||||
<Table
|
||||
verticalSpacing={"xs"}
|
||||
horizontalSpacing={"md"}
|
||||
p={"md"}
|
||||
w={"100%"}
|
||||
striped
|
||||
highlightOnHover
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<Center>Kategori</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Status</Center>
|
||||
</th>
|
||||
<th>
|
||||
<Center>Aksi</Center>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{rowTable}</tbody>
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
</Paper>
|
||||
</Grid.Col>
|
||||
|
||||
<Grid.Col span={3}>
|
||||
{/* Form Create */}
|
||||
{isCreate ? (
|
||||
<Paper p={"md"} withBorder shadow="lg">
|
||||
<Stack>
|
||||
<Center>
|
||||
<Title order={5}>Tambah Bidang Bisnis</Title>
|
||||
</Center>
|
||||
|
||||
<TextInput
|
||||
placeholder="Masukan nama bidang bisnis"
|
||||
value={newData}
|
||||
onChange={(val) => {
|
||||
setNewData(val.currentTarget.value);
|
||||
}}
|
||||
/>
|
||||
|
||||
<Group position="right" align="flex-end">
|
||||
<Button
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
setIsCreate(false);
|
||||
}}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
loading={isLoadingCreate}
|
||||
loaderPosition="center"
|
||||
style={{ transition: "0.5s" }}
|
||||
disabled={newData == ""}
|
||||
radius={"xl"}
|
||||
color="green"
|
||||
onClick={() => {
|
||||
onCreate();
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{/* Form Update */}
|
||||
{isUpdate ? (
|
||||
<Paper p={"md"} withBorder shadow="lg">
|
||||
<Stack>
|
||||
<Center>
|
||||
<Title order={5}>Update Bidang Bisnis</Title>
|
||||
</Center>
|
||||
<TextInput
|
||||
placeholder="Masukan bidang bisnis"
|
||||
value={updateData.name}
|
||||
onChange={(val) => {
|
||||
const value = val.currentTarget.value;
|
||||
setUpdateData({ ...updateData, name: value });
|
||||
}}
|
||||
/>
|
||||
|
||||
<Group position="right">
|
||||
<Button
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
setIsUpdate(false);
|
||||
}}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
style={{ transition: "0.5s" }}
|
||||
disabled={updateData?.name === ""}
|
||||
radius={"xl"}
|
||||
color="green"
|
||||
onClick={() => {
|
||||
onUpdate();
|
||||
}}
|
||||
>
|
||||
Update
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Stack>
|
||||
|
||||
{/* Activasi bank */}
|
||||
<Modal
|
||||
centered
|
||||
withCloseButton={false}
|
||||
opened={openModal}
|
||||
onClose={() => setOpenModal(false)}
|
||||
>
|
||||
<Stack align="center">
|
||||
<Title order={5}>
|
||||
Anda ingin{" "}
|
||||
{updateStatus.active ? (
|
||||
<Text span inherit>
|
||||
mengaktifkan
|
||||
</Text>
|
||||
) : (
|
||||
<Text span inherit>
|
||||
menonaktifkan
|
||||
</Text>
|
||||
)}{" "}
|
||||
Bidang Bisnis ini ?
|
||||
</Title>
|
||||
<Group>
|
||||
<Button radius={"xl"} onClick={() => setOpenModal(false)}>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
color="green"
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
onUpdateActivation({
|
||||
id: updateStatus.id,
|
||||
active: updateStatus.active as any,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Iya
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user