feat: masteruser

This commit is contained in:
amd123 2024-04-24 17:10:26 +07:00
parent c36cc8f0aa
commit 2d82441c15
18 changed files with 726 additions and 290 deletions

View File

@ -1,30 +0,0 @@
"use client"
import { Image } from "@nextui-org/react";
export default function CustumPage() {
return (
<div className="flex h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
<div className="px-4">
<div className="bg-blue-900 mx-[24px] h-[120px] my-5 rounded-md">
<div>
<div className="flex flex-row justify-between items-center">
<div>
<p className="text-2xl font-semibold ml-5 ">Custum Form</p>
<p className="text-gray-300 ml-5">custom designed elemnt</p>
</div>
<div className="pr-5">
<Image
width={110}
alt="NextUI hero Image"
src="https://modernize-nextjs-dark.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FChatBc.3d875e2e.png&w=256&q=75"
/>
</div>
</div>
</div>
</div >
{/* <CreateCustomForm /> */}
</div>
</div>
);
}

View File

@ -1,38 +0,0 @@
"use client"
import CreateCustomForm from "@/components/form/form-costum/custom-form";
import CreateHorizontalForm from "@/components/form/form-horizontal/custom-form";
import CreateWizardForm from "@/components/form/form-wizard/wizard-form";
import AuthtorsTable from "@/components/table/authors-table";
import CustomerTable from "@/components/table/customers-table";
import InvoiceTable from "@/components/table/invoice-table";
import UserTable from "@/components/table/article-table";
import UsersTable from "@/components/table/users-table";
import { Card, Divider, Image } from "@nextui-org/react";
export default function HorizontalPage() {
return (
<div className="flex h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
<div className="px-4">
<div className="bg-blue-900 h-[120px] my-5 rounded-md mx-[24px]">
<div>
<div className="flex flex-row justify-between items-center">
<div>
<p className="text-2xl font-semibold ml-5 ">Horizontal Form</p>
<p className="text-gray-500 ml-5">Home<span className="text-black">{" > "}</span> <span className=" text-white">Horizontal Form</span></p>
</div>
<div className="pr-5">
<Image
width={110}
alt="NextUI hero Image"
src="https://modernize-nextjs-dark.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FChatBc.3d875e2e.png&w=256&q=75"
/>
</div>
</div>
</div>
</div >
<CreateHorizontalForm />
</div>
</div>
);
}

View File

@ -1,40 +0,0 @@
"use client"
import CreateLayoutForm from "@/components/form/form-layout/layout-form";
import CreateValidationForm from "@/components/form/form-validation/validation-form";
import CreateWizardForm from "@/components/form/form-wizard/wizard-form";
import AuthtorsTable from "@/components/table/authors-table";
import CustomerTable from "@/components/table/customers-table";
import InvoiceTable from "@/components/table/invoice-table";
import UserTable from "@/components/table/article-table";
import UsersTable from "@/components/table/users-table";
import { Card, Divider, Image } from "@nextui-org/react";
import { useEffect, useState } from "react";
export default function FormLayoutPage() {
return (
<div className="flex h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
<div className="px-4">
<div className="bg-blue-900 mx-[24px] h-[120px] my-5 rounded-md">
<div>
<div className="flex flex-row justify-between items-center">
<div>
<p className="text-2xl font-semibold ml-5 text-white">Form Layout</p>
<p className="text-white ml-5">Home<span className="text-white">{" > "}</span> <span className=" text-white">Form Layout</span></p>
</div>
<div className="pr-5">
<Image
width={110}
alt="NextUI hero Image"
src="https://modernize-nextjs-dark.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FChatBc.3d875e2e.png&w=256&q=75"
/>
</div>
</div>
</div>
</div >
<CreateLayoutForm />
</div>
</div>
);
}

View File

@ -1,37 +0,0 @@
"use client"
import CreateValidationForm from "@/components/form/form-validation/validation-form";
import CreateWizardForm from "@/components/form/form-wizard/wizard-form";
import AuthtorsTable from "@/components/table/authors-table";
import CustomerTable from "@/components/table/customers-table";
import InvoiceTable from "@/components/table/invoice-table";
import UserTable from "@/components/table/article-table";
import UsersTable from "@/components/table/users-table";
import { Card, Divider, Image } from "@nextui-org/react";
export default function ValidationPage() {
return (
<div className="flex h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
<div className="px-4">
<div className="bg-blue-900 mx-[24px] h-[120px] my-5 rounded-md">
<div>
<div className="flex flex-row justify-between items-center">
<div>
<p className="text-2xl font-semibold ml-5 ">Form Validation</p>
<p className="text-gray-500 ml-5">Home<span className="text-black">{" > "}</span> <span className=" text-white">Form Validation</span></p>
</div>
<div className="pr-5">
<Image
width={110}
alt="NextUI hero Image"
src="https://modernize-nextjs-dark.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FChatBc.3d875e2e.png&w=256&q=75"
/>
</div>
</div>
</div>
</div >
<CreateValidationForm />
</div>
</div>
);
}

View File

@ -1,30 +0,0 @@
"use client"
import { Image } from "@nextui-org/react";
export default function VerticalPage() {
return (
<div className="flex h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 rounded-lg border-small ml-4">
<div className="px-4">
<div className="bg-blue-900 mx-[24px] h-[120px] my-5 rounded-md">
<div>
<div className="flex flex-row justify-between items-center">
<div>
<p className="text-2xl font-semibold ml-5 ">Vertical Form</p>
<p className="text-gray-500 ml-5">Home<span className="text-black">{" > "}</span> <span className=" text-white">Verical Form</span></p>
</div>
<div className="pr-5">
<Image
width={110}
alt="NextUI hero Image"
src="https://modernize-nextjs-dark.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FChatBc.3d875e2e.png&w=256&q=75"
/>
</div>
</div>
</div>
</div >
{/* <CreateVerticalForm /> */}
</div>
</div>
);
}

View File

@ -1,44 +0,0 @@
"use client"
import CreateWizardForm from "@/components/form/form-wizard/wizard-form";
import AuthtorsTable from "@/components/table/authors-table";
import CustomerTable from "@/components/table/customers-table";
import InvoiceTable from "@/components/table/invoice-table";
import UserTable from "@/components/table/article-table";
import UsersTable from "@/components/table/users-table";
import { Card, Divider, Image } from "@nextui-org/react";
export default function WizardPage() {
return (
<div className="flex h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
<div className="px-4">
<div className="bg-blue-900 mx-[24px] h-[120px] my-5 rounded-md">
<div>
<div className="flex flex-row justify-between items-center">
<div>
<p className="text-2xl font-semibold ml-5 ">Form Wizard</p>
<p className="text-white ml-5">This is Form WizardPage</p>
</div>
<div className="pr-5">
<Image
width={110}
alt="NextUI hero Image"
src="https://modernize-nextjs-dark.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FChatBc.3d875e2e.png&w=256&q=75"
/>
</div>
</div>
</div>
</div >
<Card className="rounded-md mx-[24px]">
<p className="ml-5 mt-5 text-lg">Form Wizard</p>
<Divider className="w-full my-3" />
<div>
<CreateWizardForm />
</div>
</Card>
</div>
</div>
);
}

View File

@ -1,39 +0,0 @@
"use client"
import { Card, Divider, Image } from "@nextui-org/react";
export default function BasicPage() {
return (
<div className=" h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
<div className="px-4">
<div className="bg-blue-900 w-full h-[120px] my-5 rounded-md">
<div>
<div className="flex flex-row justify-between items-center">
<div>
<p className="text-2xl font-semibold ml-5 ">Basic Table</p>
<p className="text-gray-500 ml-5">Home<span className="text-black">{" > "}</span> <span className=" text-white">Basic Table</span></p>
</div>
<div className="pr-5">
<Image
width={110}
alt="NextUI hero Image"
src="https://modernize-nextjs-dark.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FChatBc.3d875e2e.png&w=256&q=75"
/>
</div>
</div>
</div>
</div>
<Card className="rounded-md my-5">
<p className="ml-5 mt-5 text-lg">Basic Table</p>
<Divider className="w-full my-3" />
<div>
{/* <UsersTable />
<UserTable />
<CustomerTable />
<InvoiceTable />
<AuthtorsTable /> */}
</div>
</Card>
</div>
</div>
);
}

View File

@ -0,0 +1,10 @@
import FormMasterUser from '@/components/form/form-master-user'
import { Card } from '@nextui-org/react'
export default function CreateMasterUserPage() {
return (
<Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
<FormMasterUser />
</Card>
)
}

View File

@ -0,0 +1,24 @@
"use client"
import { AddIcon } from "@/components/icons";
import MasterUserTable from "@/components/table/master-user-table";
import { Button, Card } from "@nextui-org/react";
import Link from "next/link";
export default function MasterUserPage() {
return (
<div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-2 ml-4">
<div className="px-4">
<Card className="rounded-md my-5 pl-5 py-2">
<Link href="/admin/master-user/create">
<Button size="md" color="primary" className="w-min">
<AddIcon />New User
</Button>
</Link>
</Card>
<Card className="rounded-md my-5">
<MasterUserTable />
</Card>
</div>
</div>
);
}

View File

@ -1,8 +0,0 @@
import { ThemeSwitch } from "@/components/theme-switch";
export default function Submenu1Page() {
return (
<div className="flex mt-10 mx-4 md:m-0">Submenu1
</div>
)
}

View File

@ -1,8 +0,0 @@
import { ThemeSwitch } from "@/components/theme-switch";
export default function Submenu2Page() {
return (
<div className="flex mt-10 mx-4 md:m-0">Submenu2
</div>
)
}

View File

@ -1,16 +1,16 @@
'use client' 'use client'
import { Button, Card, Chip, Input, Select, SelectItem, Selection } from '@nextui-org/react' import { error } from '@/config/swal';
import { createArticle } from '@/service/article';
import { zodResolver } from '@hookform/resolvers/zod';
import { Button, Card, Chip, Input, Select, SelectItem, Selection } from '@nextui-org/react';
import JoditEditor from 'jodit-react'; import JoditEditor from 'jodit-react';
import React, { ChangeEvent, useRef, useState } from 'react' import Link from 'next/link';
import * as z from "zod"; import { useRouter } from 'next/navigation';
import React, { ChangeEvent, useRef, useState } from 'react';
import { useForm } from 'react-hook-form';
import Swal from 'sweetalert2'; import Swal from 'sweetalert2';
import withReactContent from 'sweetalert2-react-content'; import withReactContent from 'sweetalert2-react-content';
import { useForm } from 'react-hook-form'; import * as z from "zod";
import { zodResolver } from '@hookform/resolvers/zod';
import { createArticle } from '@/service/article';
import { error } from '@/config/swal';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
const articleSchema = z.object({ const articleSchema = z.object({
title: z.string().min(1, { message: "Required" }), title: z.string().min(1, { message: "Required" }),
@ -23,7 +23,6 @@ const articleSchema = z.object({
export default function FormArticle() { export default function FormArticle() {
const router = useRouter(); const router = useRouter();
const [id, setId] = useState<any>();
const [title, setTitle] = useState<string>(""); const [title, setTitle] = useState<string>("");
const [article, setArticle] = React.useState<Selection>(new Set([])); const [article, setArticle] = React.useState<Selection>(new Set([]));
const [slug, setSlug] = useState<string>(""); const [slug, setSlug] = useState<string>("");

View File

@ -0,0 +1,348 @@
'use client'
import { error } from '@/config/swal';
import { createMasterUser } from '@/service/master-user';
import { MasterUser } from '@/types/globals';
import { zodResolver } from '@hookform/resolvers/zod';
import { Button, Card, Input, Radio, RadioGroup, Select, SelectItem, Selection, Textarea } from '@nextui-org/react'
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react'
import { useForm } from 'react-hook-form';
import Swal from 'sweetalert2';
import withReactContent from 'sweetalert2-react-content';
import { z } from 'zod';
const masterUserSchema = z.object({
fullname: z.string().min(1, { message: "Required" }),
username: z.string().min(1, { message: "Required" }),
email: z.string().min(1, { message: "Required" }),
identityType: z.string().min(1, { message: "Required" }),
lastEducation: z.string().min(1, { message: "Required" }),
phoneNumber: z.string().min(1, { message: "Required" }),
workingType: z.string().min(1, { message: "Required" }),
});
export default function FormMasterUser() {
const router = useRouter();
const MySwal = withReactContent(Swal);
const [address, setAddress] = useState<string>();
const [dateOfBirt, setDateOfBirt] = useState<string>("13-april-1995");
const [email, setEmail] = useState<string>();
const [fullName, setFullname] = useState<string>();
const [genderType, setGenderType] = React.useState("");
const [identityNumber, setIdentityNumber] = useState<string>();
const [lastEducation, setLastEducation] = useState<any>([]);
const [phoneNumber, setPhoneNumber] = useState<string>();
const [userLevelsId, setUserLevelsId] = useState<number>(1);
const [userRoleId, setUserRoleId] = useState<number>(1);
const [username, setUsername] = useState<string>();
const [workType, setWorkType] = useState<string>("Tets");
const [identityType, setIdentityType] = useState<any>([])
const [showNumberInput, setShowNumberInput] = useState(false);
const formOptions = { resolver: zodResolver(masterUserSchema) };
type MicroIssueSchema = z.infer<typeof masterUserSchema>;
const {
register,
control,
handleSubmit,
setValue,
formState: { errors },
} = useForm<MicroIssueSchema>(formOptions);
const typeIdentity = [
{
id: 1,
value: "KTP",
},
{
id: 2,
value: "SIM",
},
{
id: 3,
value: "Passport",
},
]
const workingBackground = [
{
id: 1,
value: "Pegawai Negri Sipil",
},
{
id: 2,
value: "Wiraswasta",
},
{
id: 3,
value: "Guru",
},
{
id: 4,
value: "Dokter",
},
]
const educationGrade = [
{
id: 1,
value: "SMA / Sederajat",
},
{
id: 2,
value: "Diploma 1",
},
{
id: 3,
value: "Diploma 2",
},
{
id: 4,
value: "Diploma 3",
},
{
id: 5,
value: "Diploma 4",
},
{
id: 6,
value: "S1",
},
{
id: 7,
value: "S2",
},
{
id: 8,
value: "S3",
},
]
async function save(data: any) {
const formData = {
address: address,
dateOfBirt: dateOfBirt,
email: email,
fullName: fullName,
genderType: genderType,
identityNumber: identityNumber,
identityType: identityType.anchorKey,
lastEducation: Array.from(lastEducation)[0],
phoneNumber: phoneNumber,
userLevelsId: userLevelsId,
userRoleId: userRoleId,
username: username,
workType: workType,
};
console.log("Form MasterUser:", formData);
const response = await createMasterUser(formData);
if (response?.error) {
error(response.message);
return false;
}
successSubmit("/admin/article");
};
function successSubmit(redirect: any) {
MySwal.fire({
title: "Sukses",
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then((result) => {
if (result.isConfirmed) {
router.push(redirect);
}
});
}
async function onSubmit(data: any) {
MySwal.fire({
title: "Simpan Data",
text: "",
icon: "warning",
showCancelButton: true,
cancelButtonColor: "#d33",
confirmButtonColor: "#3085d6",
confirmButtonText: "Simpan",
}).then((result) => {
if (result.isConfirmed) {
save(data);
}
});
}
return (
<div className='mx-5 my-5 overflow-y-auto'>
<form method="POST" onSubmit={handleSubmit(onSubmit)}>
<Card className='rounded-md p-5 space-y-5'>
<div>
<Input
type="text"
{...register("fullname")}
label="Fullname"
variant='bordered'
placeholder="Enter Text"
labelPlacement='outside'
value={fullName}
onChange={(e) => setFullname(e.target.value)}
/>
{errors.fullname?.message}
</div>
<div>
<Input
type="text"
{...register("username")}
label="Username"
variant='bordered'
placeholder="Enter Text"
labelPlacement='outside'
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
{errors.username?.message}
</div>
<div>
<Input
type="email"
{...register("email")}
label="Email"
variant='bordered'
placeholder="Enter Text"
labelPlacement='outside'
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
{errors.email?.message}
</div>
<div>
<Select
variant='bordered'
{...register("identityType")}
labelPlacement='outside'
label="Identity Type"
placeholder="Select"
className="max-w-xs"
selectedKeys={identityType}
onSelectionChange={setIdentityType}
>
{typeIdentity.map((type) => (
<SelectItem key={type.value}>
{type.value}
</SelectItem>
))}
</Select>
{/* <p>selected : {identityType}</p> */}
{errors.identityType?.message}
{/* {showNumberInput && ( */}
<Input
type="text"
className='pt-2'
variant='bordered'
placeholder="Enter Identity Number"
labelPlacement='outside'
value={identityNumber}
onChange={(e) => setIdentityNumber(e.target.value)}
/>
{/* )} */}
</div>
<div>
<RadioGroup
orientation='horizontal'
label="Select your favorite city"
value={genderType}
onValueChange={setGenderType}
>
<Radio value="laki-laki">Laki-laki</Radio>
<Radio value="perempuan">Perempuan</Radio>
</RadioGroup>
<p className="text-default-500 text-small">Selected: {genderType}</p>
</div>
<div>
<Select
variant='bordered'
{...register("lastEducation")}
labelPlacement='outside'
label="Last Education"
selectedKeys={lastEducation}
onSelectionChange={setLastEducation}
placeholder="Select"
className="max-w-xs"
>
{educationGrade.map((grade) => (
<SelectItem key={grade.value}>
{grade.value}
</SelectItem>
))}
</Select>
<p className="text-default-500 text-small">Selected: {lastEducation}</p>
{errors.lastEducation?.message}
</div>
<div>
<Input
type="text"
{...register("phoneNumber")}
label="Phone Number"
className='pt-2'
variant='bordered'
placeholder="Enter Number"
labelPlacement='outside'
value={phoneNumber}
onChange={(e) => setPhoneNumber(e.target.value)}
/>
{errors.phoneNumber?.message}
</div>
<div>
<Select
variant='bordered'
{...register("workingType")}
labelPlacement='outside'
label="Working Type"
placeholder="Select"
className="max-w-xs"
>
{workingBackground.map((type) => (
<SelectItem key={type.id} value={type.id}>
{type.value}
</SelectItem>
))}
</Select>
{errors.workingType?.message}
</div>
<div>
<Textarea
label="Address"
labelPlacement="outside"
placeholder="Enter Text"
value={address}
onValueChange={setAddress}
/>
</div>
<div className='flex justify-end gap-3'>
<Link href={`/admin/master-user`}>
<Button
color='danger'
variant="ghost"
>
Cancel
</Button>
</Link>
<Button
type="submit"
color='primary'
variant="solid"
>
Save
</Button>
</div>
</Card>
</form>
</div >
)
}

View File

@ -1,11 +1,8 @@
"use client"; "use client";
import { import {
AddIcon,
CreateIconIon, CreateIconIon,
DeleteIcon, DeleteIcon,
DotsYIcon, DotsYIcon,
EyeFilledIcon,
EyeIcon,
EyeIconMdi EyeIconMdi
} from "@/components/icons"; } from "@/components/icons";
import { error, success, } from "@/config/swal"; import { error, success, } from "@/config/swal";
@ -25,8 +22,7 @@ import {
TableCell, TableCell,
TableColumn, TableColumn,
TableHeader, TableHeader,
TableRow, TableRow
User
} from "@nextui-org/react"; } from "@nextui-org/react";
import Link from "next/link"; import Link from "next/link";
import { Key, useCallback, useEffect, useState } from "react"; import { Key, useCallback, useEffect, useState } from "react";

View File

@ -0,0 +1,296 @@
"use client";
import {
CreateIconIon,
DeleteIcon,
DotsYIcon,
EyeIconMdi
} from "@/components/icons";
import { error, success, } from "@/config/swal";
import { deleteArticle, getListArticle } from "@/service/article";
import { deleteMasterUser, listMasterUsers } from "@/service/master-user";
import { Article, MasterUser } from "@/types/globals";
import { Button } from "@nextui-org/button";
import {
Chip,
ChipProps,
Dropdown,
DropdownItem,
DropdownMenu,
DropdownTrigger,
Spinner,
Table,
TableBody,
TableCell,
TableColumn,
TableHeader,
TableRow
} from "@nextui-org/react";
import Link from "next/link";
import { Key, useCallback, useEffect, useState } from "react";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
type UserObject = {
id: number;
user: string;
status: string;
projectName: string;
avatar: string;
};
const statusColorMap = {
active: "success",
paused: "danger",
vacation: "warning",
};
export default function MasterUserTable() {
const MySwal = withReactContent(Swal);
const [user, setUser] = useState<MasterUser[]>([]);
useEffect(() => {
initState();
}, []);
async function initState() {
const res = await listMasterUsers();
setUser(res.data?.data);
console.log("List Users", res.data.data);
}
type TableRow = (typeof usersTable)[0];
const columns = [
{ name: "No", uid: "id" },
{ name: "Username", uid: "username" },
{ name: "Fullname", uid: "fullname" },
{ name: "Email", uid: "email" },
{ name: "Gender", uid: "gender_type" },
{ name: "Identity Type", uid: "identity_type" },
{ name: "Identity Number", uid: "identity_number" },
{ name: "Phone Number", uid: "phone_number" },
// { name: "Users", uid: "users" },
// { name: "Status", uid: "status" },
{ name: "Aksi", uid: "actions" },
];
async function doDelete(id: any) {
// loading();
const resDelete = await deleteMasterUser(id);
if (resDelete?.error) {
error(resDelete.message);
return false;
}
close();
successSubmit();
}
const handleDelete = (id: any) => {
MySwal.fire({
title: "Hapus Data",
icon: "warning",
showCancelButton: true,
cancelButtonColor: "#3085d6",
confirmButtonColor: "#d33",
confirmButtonText: "Hapus",
}).then((result) => {
if (result.isConfirmed) {
doDelete(id);
}
});
};
function successSubmit() {
MySwal.fire({
title: "Sukses",
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then((result) => {
if (result.isConfirmed) {
initState()
}
});
}
// const statusOptions = [
// { name: "Active", uid: "active" },
// { name: "Paused", uid: "paused" },
// { name: "Vacation", uid: "vacation" },
// ];
const usersTable = [
{
id: 1,
user: "Olivia Rhya",
status: "active",
projectName: "Xtreme admin",
avatar: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSa8Luglga9J2R3Bxt_PsWZISUHQWODD6_ZTAJ5mIQgxYCAE-YbkY81faTqp-hSA_jVPTs&usqp=CAU",
},
{
id: 2,
user: "Barbara Steele",
status: "cancel",
projectName: "Adminpro admin",
avatar: "https://cdn.icon-icons.com/icons2/2859/PNG/512/avatar_face_man_boy_male_profile_smiley_happy_people_icon_181661.png",
},
{
id: 3,
user: "Leonardo Gordon",
status: "pending",
projectName: "Monster admin",
avatar: "https://cdn.icon-icons.com/icons2/2859/PNG/512/avatar_face_man_boy_male_profile_smiley_happy_people_icon_181657.png",
},
{
id: 4,
user: "Evelyn Pope",
status: "cancel",
projectName: "Materialpro admin",
avatar: "https://cdn.icon-icons.com/icons2/3708/PNG/512/man_person_people_avatar_icon_230017.png",
},
{
id: 5,
user: "Tommy Garza",
status: "cancel",
projectName: "Elegant admin",
avatar: "https://cdn.icon-icons.com/icons2/1736/PNG/512/4043275-avatar-man-person-punk_113271.png",
},
];
const renderCell = useCallback(
(user: MasterUser, columnKey: Key) => {
const cellValue = user[columnKey as keyof MasterUser];
const statusColorMap: Record<string, ChipProps["color"]> = {
active: "primary",
cancel: "danger",
pending: "success",
};
switch (columnKey) {
case "id":
return (
<div>{user.id}</div>
)
case "status":
return (
<Chip
className="capitalize "
// color={statusColorMap[user.status]}
size="lg"
variant="flat"
>
<div className="flex flex-row items-center gap-2 justify-center">
{cellValue}
</div>
</Chip>
);
case "actions":
return (
<div className="relative flex justify-star items-center gap-2">
<Dropdown className="lg:min-w-[150px] bg-black text-white shadow border ">
<DropdownTrigger>
<Button isIconOnly size="lg" variant="light">
<DotsYIcon className="text-default-300" />
</Button>
</DropdownTrigger>
<DropdownMenu>
<DropdownItem
>
<Link
href={`/admin/article/detail/${user.id}`}
>
<EyeIconMdi className="inline mr-2 mb-1" />
Detail
</Link>
</DropdownItem>
<DropdownItem
>
<Link
href={`/admin/article/edit/${user.id}`}
>
<CreateIconIon className="inline mr-2 mb-1" />
Edit
</Link>
</DropdownItem>
<DropdownItem
onClick={() => handleDelete(user.id)}
>
<DeleteIcon
color="red"
width={20}
height={16}
className="inline mr-2 mb-1"
/>
Delete
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
);
default:
return cellValue;
}
}, []);
return (
<>
<div className="mx-5 my-5">
<div className="flex flex-col items-center rounded-2xl">
<Table
// selectionMode="multiple"
aria-label="micro issue table"
className="rounded-2xl"
classNames={{
th: "bg-white dark:bg-black text-black dark:text-white border-b-1 text-md",
base: "bg-white dark:bg-black border",
wrapper: "min-h-[50px] bg-transpararent text-black dark:text-white ",
}}
>
<TableHeader columns={columns}>
{(column) => (
<TableColumn key={column.uid}>{column.name}</TableColumn>
)}
</TableHeader>
<TableBody
items={user}
emptyContent={"No data to display."}
loadingContent={<Spinner label="Loading..." />}
>
{(item) => (
<TableRow key={item.id}>
{(columnKey) => (
<TableCell>{renderCell(item, columnKey)}</TableCell>
)}
</TableRow>
)}
</TableBody>
</Table>
</div>
</div>
</>
);
}

View File

@ -1,4 +1,3 @@
import Head from "next/head";
import { httpDeleteInterceptor, httpGet, httpPost, httpPut } from "./http-config/axios-base-service"; import { httpDeleteInterceptor, httpGet, httpPost, httpPut } from "./http-config/axios-base-service";
export async function getListArticle() { export async function getListArticle() {

20
service/master-user.ts Normal file
View File

@ -0,0 +1,20 @@
import { httpDeleteInterceptor, httpGet, httpPost } from "./http-config/axios-base-service";
export async function listMasterUsers() {
const headers = {
"content-type": "application/json",
};
return await httpGet(`/users`, headers);
}
export async function createMasterUser(data: any) {
const headers = {
"content-type": "application/json",
};
const pathUrl = `/users`;
return await httpPost(pathUrl, headers, data);
}
export async function deleteMasterUser(id: string) {
return await httpDeleteInterceptor(`/users/${id}`);
}

View File

@ -24,3 +24,21 @@ export type Article = {
status: string; status: string;
actions: string; actions: string;
}; };
export type MasterUser = {
id: number;
address: string,
dateOfBirth: string,
email: string,
fullname: string,
genderType: string,
identityNumber: string,
identityType: string,
lastEducation: string,
phoneNumber: string,
userLevelsId: number,
userRoleId: number,
username: string,
workType: string
};