fix:landing footer link, admin create user form
This commit is contained in:
Rama Priyanto
parent
e064a7a431
commit
24d27df67e
|
|
@ -0,0 +1 @@
|
|||
NEXT_PUBLIC_MAPS_API_KEY=AIzaSyCOkxoeKykE60L_nM4VS1JYJqBmqy2GA0Q
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
import FormMasterUser from '@/components/form/form-master-user'
|
||||
import { Card } from '@nextui-org/react'
|
||||
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>
|
||||
)
|
||||
return (
|
||||
<Card className="h-[96vh] rounded-md border bg-transparent">
|
||||
<FormMasterUser />
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,25 @@
|
|||
"use client"
|
||||
"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>
|
||||
);
|
||||
return (
|
||||
<div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-2">
|
||||
<div className="">
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
import Contact from "@/components/main/detail/contact";
|
||||
import { Suspense } from "react";
|
||||
|
||||
export default function VisiMisiPage() {
|
||||
return <Contact />;
|
||||
return (
|
||||
<Suspense>
|
||||
<Contact />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,348 +1,474 @@
|
|||
'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';
|
||||
"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 { Controller, useForm } from "react-hook-form";
|
||||
import Datepicker from "react-tailwindcss-datepicker";
|
||||
import Swal from "sweetalert2";
|
||||
import withReactContent from "sweetalert2-react-content";
|
||||
import { z } from "zod";
|
||||
import { EyeFilledIcon, EyeSlashFilledIcon } from "../icons";
|
||||
|
||||
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" }),
|
||||
fullname: z.string().min(1, { message: "Required" }),
|
||||
username: z.string().min(1, { message: "Required" }),
|
||||
password: z.string().min(1, { message: "Required" }),
|
||||
email: z.string().min(1, { message: "Required" }),
|
||||
identityType: z.string().min(1, { message: "Required" }),
|
||||
identityNumber: z.string().min(1, { message: "Required" }),
|
||||
lastEducation: z.string().min(1, { message: "Required" }),
|
||||
genderType: z.string().min(1, { message: "Required" }),
|
||||
phoneNumber: z.string().min(1, { message: "Required" }),
|
||||
workType: z.string().min(1, { message: "Required" }),
|
||||
address: z.string().min(1, { message: "Required" }),
|
||||
birthDate: z.object({
|
||||
startDate: z.string().min(1, { message: "Required" }),
|
||||
endDate: z.string().min(1, { message: "Required" }),
|
||||
}),
|
||||
});
|
||||
|
||||
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",
|
||||
},
|
||||
];
|
||||
|
||||
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 router = useRouter();
|
||||
const MySwal = withReactContent(Swal);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const toggleVisibility = () => setIsVisible(!isVisible);
|
||||
|
||||
const formOptions = { resolver: zodResolver(masterUserSchema) };
|
||||
type MicroIssueSchema = z.infer<typeof masterUserSchema>;
|
||||
const {
|
||||
register,
|
||||
control,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
formState: { errors },
|
||||
} = useForm<MicroIssueSchema>(formOptions);
|
||||
const formOptions = {
|
||||
resolver: zodResolver(masterUserSchema),
|
||||
defaultValues: {
|
||||
identityType: "KTP",
|
||||
birthDate: { stardDate: "", endDate: "" },
|
||||
},
|
||||
};
|
||||
type MicroIssueSchema = z.infer<typeof masterUserSchema>;
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
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");
|
||||
async function save(data: z.infer<typeof masterUserSchema>) {
|
||||
const formData = {
|
||||
address: data.address,
|
||||
dateOfBirt: data.birthDate,
|
||||
password: data.password,
|
||||
email: data.email,
|
||||
fullname: data.fullname,
|
||||
genderType: data.genderType,
|
||||
identityNumber: data.identityNumber,
|
||||
identityType: data.identityType,
|
||||
lastEducation: data.lastEducation,
|
||||
phoneNumber: data.phoneNumber,
|
||||
userLevelId: 2,
|
||||
userRoleId: 2,
|
||||
username: data.username,
|
||||
workType: data.workType,
|
||||
};
|
||||
|
||||
function successSubmit(redirect: any) {
|
||||
MySwal.fire({
|
||||
title: "Sukses",
|
||||
icon: "success",
|
||||
confirmButtonColor: "#3085d6",
|
||||
confirmButtonText: "OK",
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
router.push(redirect);
|
||||
}
|
||||
});
|
||||
const response = await createMasterUser(formData);
|
||||
|
||||
if (response?.error) {
|
||||
error(response.message);
|
||||
return false;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
successSubmit("/admin/article");
|
||||
}
|
||||
|
||||
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)}
|
||||
function successSubmit(redirect: any) {
|
||||
MySwal.fire({
|
||||
title: "Sukses",
|
||||
icon: "success",
|
||||
confirmButtonColor: "#3085d6",
|
||||
confirmButtonText: "OK",
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
router.push(redirect);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/>
|
||||
{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 >
|
||||
)
|
||||
async function onSubmit(data: z.infer<typeof masterUserSchema>) {
|
||||
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 flex flex-col gap-3">
|
||||
<Controller
|
||||
control={control}
|
||||
name="fullname"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Input
|
||||
type="text"
|
||||
id="title"
|
||||
placeholder="Fullname..."
|
||||
label="Fullname"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
labelPlacement="outside"
|
||||
className="w-full"
|
||||
variant="bordered"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.fullname?.message && (
|
||||
<p className="text-red-400 text-sm">{errors.fullname?.message}</p>
|
||||
)}
|
||||
<Controller
|
||||
control={control}
|
||||
name="username"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Input
|
||||
type="text"
|
||||
id="username"
|
||||
placeholder="Username..."
|
||||
label="Username"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
labelPlacement="outside"
|
||||
className="w-full"
|
||||
variant="bordered"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.username?.message && (
|
||||
<p className="text-red-400 text-sm">{errors.username?.message}</p>
|
||||
)}
|
||||
<Controller
|
||||
control={control}
|
||||
name="password"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Input
|
||||
type={isVisible ? "text" : "password"}
|
||||
id="password"
|
||||
placeholder="Password..."
|
||||
label="Password"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
labelPlacement="outside"
|
||||
className="w-full"
|
||||
variant="bordered"
|
||||
endContent={
|
||||
<button
|
||||
className="focus:outline-none"
|
||||
type="button"
|
||||
onClick={toggleVisibility}
|
||||
>
|
||||
{isVisible ? (
|
||||
<EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
|
||||
) : (
|
||||
<EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
|
||||
)}
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.password?.message && (
|
||||
<p className="text-red-400 text-sm">{errors.password?.message}</p>
|
||||
)}
|
||||
<Controller
|
||||
control={control}
|
||||
name="email"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Input
|
||||
type="email"
|
||||
id="email"
|
||||
placeholder="Email..."
|
||||
label="Email"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
labelPlacement="outside"
|
||||
className="w-full"
|
||||
variant="bordered"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.email?.message && (
|
||||
<p className="text-red-400 text-sm">{errors.email?.message}</p>
|
||||
)}
|
||||
|
||||
<Controller
|
||||
control={control}
|
||||
name="identityType"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Select
|
||||
variant="bordered"
|
||||
labelPlacement="outside"
|
||||
label="Identity Type"
|
||||
placeholder="Select"
|
||||
className="max-w-xs"
|
||||
selectedKeys={[value]}
|
||||
onChange={onChange}
|
||||
>
|
||||
{typeIdentity.map((type) => (
|
||||
<SelectItem key={type.value}>{type.value}</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
{errors.identityType?.message && (
|
||||
<p className="text-red-400 text-sm">
|
||||
{errors.identityType?.message}
|
||||
</p>
|
||||
)}
|
||||
<Controller
|
||||
control={control}
|
||||
name="identityNumber"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Input
|
||||
type="number"
|
||||
id="identityNumber"
|
||||
placeholder="Identity Number..."
|
||||
label="Identity Number"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
labelPlacement="outside"
|
||||
className="w-full"
|
||||
variant="bordered"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.identityNumber?.message && (
|
||||
<p className="text-red-400 text-sm">
|
||||
{errors.identityNumber?.message}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<Controller
|
||||
control={control}
|
||||
name="genderType"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<RadioGroup
|
||||
orientation="horizontal"
|
||||
label="Gender"
|
||||
value={value}
|
||||
onValueChange={onChange}
|
||||
>
|
||||
<Radio value="male">Laki-laki</Radio>
|
||||
<Radio value="female">Perempuan</Radio>
|
||||
</RadioGroup>
|
||||
)}
|
||||
/>
|
||||
{errors.genderType?.message && (
|
||||
<p className="text-red-400 text-sm">{errors.genderType?.message}</p>
|
||||
)}
|
||||
<Controller
|
||||
control={control}
|
||||
name="birthDate"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Datepicker
|
||||
useRange={false}
|
||||
asSingle={true}
|
||||
value={value}
|
||||
displayFormat="DD/MM/YYYY"
|
||||
onChange={onChange}
|
||||
popoverDirection="down"
|
||||
inputClassName="w-full bg-transparent border-1 border-gray-200 px-2 py-[6px] rounded-xl "
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.birthDate?.startDate?.message && (
|
||||
<p className="text-red-400 text-sm">
|
||||
{errors.birthDate?.startDate?.message}
|
||||
</p>
|
||||
)}
|
||||
<Controller
|
||||
control={control}
|
||||
name="lastEducation"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Select
|
||||
variant="bordered"
|
||||
labelPlacement="outside"
|
||||
label="Last Education"
|
||||
selectedKeys={[value]}
|
||||
onChange={onChange}
|
||||
placeholder="Select"
|
||||
className="max-w-xs"
|
||||
>
|
||||
{educationGrade.map((grade) => (
|
||||
<SelectItem key={grade.value}>{grade.value}</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
{errors.lastEducation?.message && (
|
||||
<p className="text-red-400 text-sm">
|
||||
{errors.lastEducation?.message}
|
||||
</p>
|
||||
)}
|
||||
<Controller
|
||||
control={control}
|
||||
name="phoneNumber"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Input
|
||||
type="number"
|
||||
id="identityNumber"
|
||||
placeholder="08*********"
|
||||
label="No. Handphone"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
labelPlacement="outside"
|
||||
className="w-full"
|
||||
variant="bordered"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.phoneNumber?.message && (
|
||||
<p className="text-red-400 text-sm">
|
||||
{errors.phoneNumber?.message}
|
||||
</p>
|
||||
)}
|
||||
<Controller
|
||||
control={control}
|
||||
name="workType"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Select
|
||||
variant="bordered"
|
||||
labelPlacement="outside"
|
||||
label="Working Type"
|
||||
placeholder="Select"
|
||||
className="max-w-xs"
|
||||
selectedKeys={[value]}
|
||||
onChange={onChange}
|
||||
>
|
||||
{workingBackground.map((type) => (
|
||||
<SelectItem key={type.id} value={type.id}>
|
||||
{type.value}
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
{errors.workType?.message && (
|
||||
<p className="text-red-400 text-sm">{errors.workType?.message}</p>
|
||||
)}
|
||||
<Controller
|
||||
control={control}
|
||||
name="address"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Textarea
|
||||
label="Address"
|
||||
labelPlacement="outside"
|
||||
placeholder="Enter Text"
|
||||
value={value}
|
||||
onValueChange={onChange}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.address?.message && (
|
||||
<p className="text-red-400 text-sm">{errors.address?.message}</p>
|
||||
)}
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,76 +1,141 @@
|
|||
import { Button } from '@nextui-org/button'
|
||||
import { Input } from '@nextui-org/input'
|
||||
import { MailIcon, SendIcon } from '../icons'
|
||||
import Link from 'next/link'
|
||||
import { Button } from "@nextui-org/button";
|
||||
import { Input } from "@nextui-org/input";
|
||||
import { MailIcon, SendIcon } from "../icons";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<div className='relative text-xs leading-4 md:leading-loose lg:leading-8 font-semibold '>
|
||||
<div className='h-[650px] md:h-[720px] lg:h-auto bg-black'>
|
||||
<img src="/assets/Footer.jpg" alt="" className='w-full h-full object-cover object-left-top opacity-80' />
|
||||
</div>
|
||||
<div className="absolute top-0 left-0 w-full grid grid-cols-3 md:grid-cols-3 lg:grid-cols-7 gap-5 md:gap-4 px-1 md:px-10 lg:px-20 pt-5 md:pt-16 pb-5 md:pb-20 text-white">
|
||||
<div className='pb-2 md:pb-0'>
|
||||
<p>Berita Terkini</p>
|
||||
<p>Info Komnas Anak</p>
|
||||
<p>Info Komnas Perempuan</p>
|
||||
<p>Kontak</p>
|
||||
</div>
|
||||
<div className='pb-2 md:pb-0'>
|
||||
<p>Tentang PPID</p>
|
||||
<p>Profil Pimpinan Polri</p>
|
||||
<p>Struktur Organisasi</p>
|
||||
<p>Visi & Misi</p>
|
||||
<p>Logo</p>
|
||||
</div>
|
||||
<div className='pb-2 md:pb-0'>
|
||||
<p>Informasi Berkala</p>
|
||||
<p>Informasi Serta Merta</p>
|
||||
<p>Informasi Setiap Saat</p>
|
||||
<p>Informasi Dikecualikan</p>
|
||||
<p>UU & Peraturan</p>
|
||||
<p>Penerangan Satuan</p>
|
||||
</div>
|
||||
<div className='pb-2 md:pb-0'>
|
||||
<p>SP2HP</p>
|
||||
<p>Formulir Permohonan Informasi</p>
|
||||
<p>Pelayanan SIM</p>
|
||||
<p>Pelayanan E-Rikkes SIM</p>
|
||||
<p>Pelayana Test Psikologi SIM</p>
|
||||
<p>Pelayanan E-Avis</p>
|
||||
<p>Pelayanan STNK & BPKP</p>
|
||||
<p>Pelayanan SKCK</p>
|
||||
<p>Pelayanan Karantina Presisi</p>
|
||||
<p>Pelayanan Propam Presisi</p>
|
||||
<p>Pelayanan Dumas Presisi</p>
|
||||
<p>Pelayanan Polisiku</p>
|
||||
<p>Pelayanan BINMAS</p>
|
||||
</div>
|
||||
<div className='w-min lg:w-max'>
|
||||
<p className='text-xl font-bold'>Subscribe</p>
|
||||
<p>Dapatkan info & event terupdate dari kami.</p>
|
||||
<div className='flex '>
|
||||
<Input
|
||||
label="Email"
|
||||
placeholder="Email Anda"
|
||||
className='pt- rounded-none'
|
||||
classNames={{
|
||||
inputWrapper: "rounded-none rounded-l-lg"
|
||||
}}
|
||||
startContent={
|
||||
<MailIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
|
||||
}
|
||||
/>
|
||||
<div className='bg-[#C3160F] flex items-center justify-center w-16 rounded-r-lg cursor-pointer'><SendIcon /></div>
|
||||
</div>
|
||||
<Link href={`/auth`}>
|
||||
<Button className='mt-1 bg-[#DD8306]'>
|
||||
Kontributor Wilayah
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className='dark:bg-black text-black dark:text-white text-center py-3 text-xs md:text-medium flex justify-center font-normal'>© Copyright Humas<p className='text-red-700'> POLRI ®</p> All Rights Reserved</div>
|
||||
return (
|
||||
<div className="relative text-xs leading-4 md:leading-loose lg:leading-8 font-semibold ">
|
||||
<div className="h-[650px] md:h-[720px] lg:h-auto bg-black">
|
||||
<img
|
||||
src="/assets/Footer.jpg"
|
||||
alt=""
|
||||
className="w-full h-full object-cover object-left-top opacity-80"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute top-0 left-0 w-full grid grid-cols-3 md:grid-cols-3 lg:grid-cols-7 gap-5 md:gap-4 px-1 md:px-10 lg:px-20 pt-5 md:pt-16 pb-5 md:pb-20 text-white">
|
||||
<div className="pb-2 md:pb-0 flex flex-col gap-2">
|
||||
<Link href="/">Berita Terkini</Link>
|
||||
<Link href="https://www.kpai.go.id/" target="_blank">
|
||||
Info Komnas Anak
|
||||
</Link>
|
||||
<Link href="https://komnasperempuan.go.id/" target="_blank">
|
||||
Info Komnas Perempuan
|
||||
</Link>
|
||||
<Link href="/kontak-kami">Kontak</Link>
|
||||
</div>
|
||||
)
|
||||
<div className="pb-2 md:pb-0 flex flex-col gap-2">
|
||||
<Link href="/static/humas-polri">Tentang PPID</Link>
|
||||
<Link href="/static/profile-kapolri">Profil Pimpinan Polri</Link>
|
||||
<Link href="/static/struktur-mabes">Struktur Organisasi</Link>
|
||||
<Link href="/static/visi-misi-polri">Visi & Misi</Link>
|
||||
<Link href="/static/logo">Logo</Link>
|
||||
</div>
|
||||
<div className="pb-2 md:pb-0 flex flex-col gap-2">
|
||||
<Link
|
||||
href="https://siberpresisi.com/informasi-publik/informasi-berkala"
|
||||
target="_blank"
|
||||
>
|
||||
Informasi Berkala
|
||||
</Link>
|
||||
<Link
|
||||
href="https://siberpresisi.com/informasi-publik/informasi-serta-merta"
|
||||
target="_blank"
|
||||
>
|
||||
Informasi Serta Merta
|
||||
</Link>
|
||||
<Link
|
||||
href="https://siberpresisi.com/informasi-publik/informasi-setiap-saat"
|
||||
target="_blank"
|
||||
>
|
||||
Informasi Setiap Saat
|
||||
</Link>
|
||||
<Link
|
||||
href="https://siberpresisi.com/informasi-publik/informasi-dikecualikan"
|
||||
target="_blank"
|
||||
>
|
||||
Informasi Dikecualikan
|
||||
</Link>
|
||||
<Link
|
||||
href="https://sisdivkum.id/library/peraturan-kepolisian"
|
||||
target="_blank"
|
||||
>
|
||||
UU & Peraturan
|
||||
</Link>
|
||||
{/* <Link href="#">Penerangan Satuan</Link> */}
|
||||
</div>
|
||||
<div className="pb-2 md:pb-0 flex flex-col gap-2">
|
||||
<Link href="https://sp2hp.bareskrim.polri.go.id/" target="_blank">
|
||||
SP2HP
|
||||
</Link>
|
||||
<Link href="/form-permohonan-informasi">
|
||||
Formulir Permohonan Informasi
|
||||
</Link>
|
||||
<Link href="https://www.digitalkorlantas.id/sim/" target="_blank">
|
||||
Pelayanan SIM
|
||||
</Link>
|
||||
<Link href="https://erikkes.id/" target="_blank">
|
||||
Pelayanan E-Rikkes SIM
|
||||
</Link>
|
||||
<Link href="https://eppsi.id/" target="_blank">
|
||||
Pelayana Test Psikologi SIM
|
||||
</Link>
|
||||
<Link href="https://e-avis.korlantas.polri.go.id/" target="_blank">
|
||||
Pelayanan E-Avis
|
||||
</Link>
|
||||
<Link href="https://samsatdigital.id/" target="_blank">
|
||||
Pelayanan STNK & BPKP
|
||||
</Link>
|
||||
<Link href="https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US">
|
||||
Pelayanan SKCK
|
||||
</Link>
|
||||
{/* <Link href="#">Pelayanan Karantina Presisi</Link> */}
|
||||
<Link
|
||||
href="https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam"
|
||||
target="_blank"
|
||||
>
|
||||
Pelayanan Propam Presisi
|
||||
</Link>
|
||||
<Link href="https://dumaspresisi.polri.go.id/" target="_blank">
|
||||
Pelayanan Dumas Presisi
|
||||
</Link>
|
||||
<Link href="https://polisiku.co.id/" target="_blank">
|
||||
Pelayanan Polisiku
|
||||
</Link>
|
||||
<Link href="https://bos.polri.go.id/login" target="_blank">
|
||||
Pelayanan BINMAS
|
||||
</Link>
|
||||
</div>
|
||||
<div className="w-min lg:w-max">
|
||||
<p className="text-xl font-bold">Subscribe</p>
|
||||
<p>Dapatkan info & event terupdate dari kami.</p>
|
||||
<div className="flex ">
|
||||
<Input
|
||||
label="Email"
|
||||
placeholder="Email Anda"
|
||||
className="pt- rounded-none"
|
||||
classNames={{
|
||||
inputWrapper: "rounded-none rounded-l-lg",
|
||||
}}
|
||||
startContent={
|
||||
<MailIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
|
||||
}
|
||||
/>
|
||||
<div className="bg-[#C3160F] flex items-center justify-center w-16 rounded-r-lg cursor-pointer">
|
||||
<SendIcon />
|
||||
</div>
|
||||
</div>
|
||||
<Link href={`/auth`}>
|
||||
<Button className="mt-1 bg-[#DD8306] text-white">
|
||||
Kontributor Wilayah
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="dark:bg-black text-black dark:text-white text-center py-3 text-xs md:text-medium flex justify-center font-normal">
|
||||
© Copyright Humas<p className="text-red-700"> POLRI ®</p>
|
||||
All Rights Reserved
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@ export default function HeaderNews() {
|
|||
async function getArticle() {
|
||||
const req = { page: 1, search: "", limit: "10" };
|
||||
const response = await getListArticle(req);
|
||||
console.log("res", response?.data?.data);
|
||||
setArticle(response?.data?.data);
|
||||
}
|
||||
getArticle();
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ export default function MedolUpdate() {
|
|||
|
||||
async function getDataImage(data: any) {
|
||||
let temp = data;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
for (let i = 0; i < data?.length; i++) {
|
||||
const res = await getImageInp(temp[i].id);
|
||||
const data = res?.data[0]?.guid?.rendered;
|
||||
temp[i].image = data;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
|
|||
import { Button } from "@nextui-org/button";
|
||||
import { Input, Textarea } from "@nextui-org/input";
|
||||
import { Select, SelectItem, SelectSection } from "@nextui-org/react";
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import {
|
||||
|
|
@ -126,8 +126,17 @@ const Contact: React.FC = () => {
|
|||
<div>Hari Senin - Jumat | 08:00 - 15:00 WIB</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center border-2 border-red-500 h-[280px] pt-2">
|
||||
{/* <Image height={100} width={100} src="/maps.png" alt="maps" className="" /> */}
|
||||
<div className="flex justify-center border-2 border-red-500 h-[280px]">
|
||||
{/* <iframe
|
||||
src={`https://www.google.com/maps/embed/v1/place?key=${process.env.NEXT_PUBLIC_MAPS_API_KEY}&q=-6.2389608,106.7955078`}
|
||||
></iframe> */}
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11218.073168001461!2d106.7955078024133!3d-6.238960764805329!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f169ccddedf3%3A0xb6702055b4d182f6!2sMarkas%20Besar%20Kepolisian%20Negara%20Republik%20Indonesia%20(MABES%20POLRI)!5e0!3m2!1sen!2sus!4v1733122332539!5m2!1sen!2sus"
|
||||
width="800"
|
||||
height="275"
|
||||
style={{ border: 0 }}
|
||||
loading="lazy"
|
||||
></iframe>{" "}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-auto lg:w-2/3 relative p-2 md:p-5 space-y-3 pr-2 md:pr-28">
|
||||
|
|
@ -245,7 +254,7 @@ const Contact: React.FC = () => {
|
|||
</div>
|
||||
<div className="flex justify-center md:justify-end">
|
||||
<Button
|
||||
className="bg-[#DD8306] w-auto md:w-[200px] rounded-lg"
|
||||
className="bg-[#DD8306] w-auto md:w-[200px] rounded-lg text-white"
|
||||
size="md"
|
||||
>
|
||||
Kirim Pesan
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
"use client";
|
||||
import {
|
||||
CreateIconIon,
|
||||
DeleteIcon,
|
||||
DotsYIcon,
|
||||
EyeIconMdi
|
||||
CreateIconIon,
|
||||
DeleteIcon,
|
||||
DotsYIcon,
|
||||
EyeIconMdi,
|
||||
} from "@/components/icons";
|
||||
import { error } from "@/config/swal";
|
||||
import { deleteMasterUser } from "@/service/master-user";
|
||||
|
|
@ -11,19 +11,20 @@ import { deleteMasterUserRole, listUserRole } from "@/service/master-user-role";
|
|||
import { MasterUser, MasterUserRole } from "@/types/globals";
|
||||
import { Button } from "@nextui-org/button";
|
||||
import {
|
||||
Chip,
|
||||
ChipProps,
|
||||
Dropdown,
|
||||
DropdownItem,
|
||||
DropdownMenu,
|
||||
DropdownTrigger,
|
||||
Spinner,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableColumn,
|
||||
TableHeader,
|
||||
TableRow
|
||||
Chip,
|
||||
ChipProps,
|
||||
Dropdown,
|
||||
DropdownItem,
|
||||
DropdownMenu,
|
||||
DropdownTrigger,
|
||||
Pagination,
|
||||
Spinner,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableColumn,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@nextui-org/react";
|
||||
import Link from "next/link";
|
||||
import { Key, useCallback, useEffect, useState } from "react";
|
||||
|
|
@ -31,261 +32,264 @@ import Swal from "sweetalert2";
|
|||
import withReactContent from "sweetalert2-react-content";
|
||||
|
||||
type UserObject = {
|
||||
id: number;
|
||||
user: string;
|
||||
status: string;
|
||||
projectName: string;
|
||||
avatar: string;
|
||||
id: number;
|
||||
user: string;
|
||||
status: string;
|
||||
projectName: string;
|
||||
avatar: string;
|
||||
};
|
||||
|
||||
const statusColorMap = {
|
||||
active: "success",
|
||||
paused: "danger",
|
||||
vacation: "warning",
|
||||
active: "success",
|
||||
paused: "danger",
|
||||
vacation: "warning",
|
||||
};
|
||||
|
||||
|
||||
export default function MasterRoleTable() {
|
||||
const MySwal = withReactContent(Swal);
|
||||
const [role, setRole] = useState<MasterUserRole[]>([]);
|
||||
const MySwal = withReactContent(Swal);
|
||||
const [role, setRole] = useState<MasterUserRole[]>([]);
|
||||
const [page, setPage] = useState(1);
|
||||
const [totalPage, setTotalPage] = useState(1);
|
||||
|
||||
useEffect(() => {
|
||||
initState();
|
||||
}, [page]);
|
||||
|
||||
useEffect(() => {
|
||||
async function initState() {
|
||||
const res = await listUserRole({ page: page, limit: 10 });
|
||||
getTableNumber(10, res?.data?.data);
|
||||
setTotalPage(res?.data?.meta?.totalPage);
|
||||
}
|
||||
|
||||
const getTableNumber = (limit: number, data?: any) => {
|
||||
if (data) {
|
||||
const startIndex = limit * (page - 1);
|
||||
let iterate = 0;
|
||||
const newData = data.map((value: any) => {
|
||||
iterate++;
|
||||
value.no = startIndex + iterate;
|
||||
return value;
|
||||
});
|
||||
setRole(newData);
|
||||
}
|
||||
};
|
||||
const columns = [
|
||||
{ name: "No", uid: "no" },
|
||||
{ name: "Role", uid: "name" },
|
||||
{ name: "Description", uid: "description" },
|
||||
{ name: "Code", uid: "code" },
|
||||
{ name: "Level Number", uid: "level_number" },
|
||||
// { name: "Status Id", uid: "status_id" },
|
||||
{ name: "Aksi", uid: "actions" },
|
||||
];
|
||||
|
||||
async function doDelete(id: any) {
|
||||
// loading();
|
||||
const resDelete = await deleteMasterUserRole(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();
|
||||
}, []);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function initState() {
|
||||
const res = await listUserRole();
|
||||
setRole(res.data?.data);
|
||||
// const statusOptions = [
|
||||
// { name: "Active", uid: "active" },
|
||||
// { name: "Paused", uid: "paused" },
|
||||
// { name: "Vacation", uid: "vacation" },
|
||||
// ];
|
||||
|
||||
console.log("List Users", res.data.data);
|
||||
}
|
||||
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",
|
||||
},
|
||||
];
|
||||
|
||||
type TableRow = (typeof usersTable)[0];
|
||||
|
||||
const columns = [
|
||||
|
||||
{ name: "No", uid: "id" },
|
||||
{ name: "Role", uid: "name" },
|
||||
{ name: "Description", uid: "description" },
|
||||
{ name: "Code", uid: "code" },
|
||||
{ name: "Level Number", uid: "level_number" },
|
||||
// { name: "Status Id", uid: "status_id" },
|
||||
{ name: "Aksi", uid: "actions" },
|
||||
];
|
||||
|
||||
|
||||
async function doDelete(id: any) {
|
||||
// loading();
|
||||
const resDelete = await deleteMasterUserRole(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);
|
||||
}
|
||||
});
|
||||
const renderCell = useCallback((role: MasterUserRole, columnKey: Key) => {
|
||||
const cellValue = role[columnKey as keyof MasterUserRole];
|
||||
const statusColorMap: Record<string, ChipProps["color"]> = {
|
||||
active: "primary",
|
||||
cancel: "danger",
|
||||
pending: "success",
|
||||
};
|
||||
|
||||
function successSubmit() {
|
||||
MySwal.fire({
|
||||
title: "Sukses",
|
||||
icon: "success",
|
||||
confirmButtonColor: "#3085d6",
|
||||
confirmButtonText: "OK",
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
initState()
|
||||
}
|
||||
});
|
||||
}
|
||||
switch (columnKey) {
|
||||
case "id":
|
||||
return <div>{role.id}</div>;
|
||||
|
||||
// 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(
|
||||
(role: MasterUserRole, columnKey: Key) => {
|
||||
const cellValue = role[columnKey as keyof MasterUserRole];
|
||||
const statusColorMap: Record<string, ChipProps["color"]> = {
|
||||
active: "primary",
|
||||
cancel: "danger",
|
||||
pending: "success",
|
||||
};
|
||||
|
||||
switch (columnKey) {
|
||||
case "id":
|
||||
return (
|
||||
<div>{role.id}</div>
|
||||
)
|
||||
|
||||
case "status":
|
||||
return (
|
||||
<Chip
|
||||
className="capitalize "
|
||||
// color={statusColorMap[role.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] dark:bg-black dark:text-white shadow border ">
|
||||
<DropdownTrigger>
|
||||
<Button isIconOnly size="lg" variant="light">
|
||||
<DotsYIcon className="text-default-300" />
|
||||
</Button>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu>
|
||||
<DropdownItem
|
||||
|
||||
>
|
||||
|
||||
<Link
|
||||
href={`/admin/master-role/detail/${role.id}`}
|
||||
>
|
||||
<EyeIconMdi className="inline mr-2 mb-1" />
|
||||
Detail
|
||||
</Link>
|
||||
|
||||
</DropdownItem>
|
||||
<DropdownItem
|
||||
|
||||
>
|
||||
|
||||
<Link
|
||||
href={`/admin/master-role/edit/${role.id}`}
|
||||
|
||||
>
|
||||
<CreateIconIon className="inline mr-2 mb-1" />
|
||||
Edit
|
||||
</Link>
|
||||
|
||||
</DropdownItem>
|
||||
<DropdownItem
|
||||
onClick={() => handleDelete(role.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={role}
|
||||
emptyContent={"No data to display."}
|
||||
loadingContent={<Spinner label="Loading..." />}
|
||||
>
|
||||
{(item) => (
|
||||
<TableRow key={item.id}>
|
||||
{(columnKey) => (
|
||||
<TableCell>{renderCell(item, columnKey)}</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
case "status":
|
||||
return (
|
||||
<Chip
|
||||
className="capitalize "
|
||||
// color={statusColorMap[role.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] dark:bg-black dark:text-white shadow border ">
|
||||
<DropdownTrigger>
|
||||
<Button isIconOnly size="lg" variant="light">
|
||||
<DotsYIcon className="text-default-300" />
|
||||
</Button>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu>
|
||||
<DropdownItem>
|
||||
<Link href={`/admin/master-role/detail/${role.id}`}>
|
||||
<EyeIconMdi className="inline mr-2 mb-1" />
|
||||
Detail
|
||||
</Link>
|
||||
</DropdownItem>
|
||||
<DropdownItem>
|
||||
<Link href={`/admin/master-role/edit/${role.id}`}>
|
||||
<CreateIconIon className="inline mr-2 mb-1" />
|
||||
Edit
|
||||
</Link>
|
||||
</DropdownItem>
|
||||
<DropdownItem onClick={() => handleDelete(role.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={role}
|
||||
emptyContent={"No data to display."}
|
||||
loadingContent={<Spinner label="Loading..." />}
|
||||
>
|
||||
{(item) => (
|
||||
<TableRow key={item.id}>
|
||||
{(columnKey) => (
|
||||
<TableCell>{renderCell(item, columnKey)}</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<div className="my-2 w-full flex justify-center">
|
||||
<Pagination
|
||||
isCompact
|
||||
showControls
|
||||
showShadow
|
||||
color="primary"
|
||||
classNames={{
|
||||
base: "bg-transparent",
|
||||
wrapper: "bg-transparent",
|
||||
}}
|
||||
page={page}
|
||||
total={totalPage}
|
||||
onChange={(page) => setPage(page)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,296 +1,228 @@
|
|||
"use client";
|
||||
import {
|
||||
CreateIconIon,
|
||||
DeleteIcon,
|
||||
DotsYIcon,
|
||||
EyeIconMdi
|
||||
CreateIconIon,
|
||||
DeleteIcon,
|
||||
DotsYIcon,
|
||||
EyeIconMdi,
|
||||
} from "@/components/icons";
|
||||
import { error, success, } from "@/config/swal";
|
||||
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
|
||||
Chip,
|
||||
ChipProps,
|
||||
Dropdown,
|
||||
DropdownItem,
|
||||
DropdownMenu,
|
||||
DropdownTrigger,
|
||||
Pagination,
|
||||
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",
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{ name: "No", uid: "no" },
|
||||
{ name: "Username", uid: "username" },
|
||||
{ name: "Fullname", uid: "fullname" },
|
||||
{ name: "Email", uid: "email" },
|
||||
{ name: "Identity Type", uid: "identityType" },
|
||||
{ name: "Identity Number", uid: "identityNumber" },
|
||||
// { name: "Users", uid: "users" },
|
||||
// { name: "Status", uid: "status" },
|
||||
{ name: "Aksi", uid: "actions" },
|
||||
];
|
||||
|
||||
export default function MasterUserTable() {
|
||||
const MySwal = withReactContent(Swal);
|
||||
const [user, setUser] = useState<MasterUser[]>([]);
|
||||
const MySwal = withReactContent(Swal);
|
||||
const [user, setUser] = useState<MasterUser[]>([]);
|
||||
const [page, setPage] = useState(1);
|
||||
const [totalPage, setTotalPage] = useState(1);
|
||||
|
||||
useEffect(() => {
|
||||
initState();
|
||||
}, [page]);
|
||||
|
||||
async function initState() {
|
||||
const res = await listMasterUsers({ page: page, limit: 10 });
|
||||
getTableNumber(10, res?.data?.data);
|
||||
setTotalPage(res?.data?.meta?.totalPage);
|
||||
}
|
||||
const getTableNumber = (limit: number, data?: any) => {
|
||||
if (data) {
|
||||
const startIndex = limit * (page - 1);
|
||||
let iterate = 0;
|
||||
const newData = data.map((value: any) => {
|
||||
iterate++;
|
||||
value.no = startIndex + iterate;
|
||||
return value;
|
||||
});
|
||||
setUser(newData);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
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();
|
||||
}, []);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
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",
|
||||
};
|
||||
|
||||
function successSubmit() {
|
||||
MySwal.fire({
|
||||
title: "Sukses",
|
||||
icon: "success",
|
||||
confirmButtonColor: "#3085d6",
|
||||
confirmButtonText: "OK",
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
initState()
|
||||
}
|
||||
});
|
||||
}
|
||||
switch (columnKey) {
|
||||
case "id":
|
||||
return <div>{user.id}</div>;
|
||||
|
||||
// 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>
|
||||
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/master-user/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 className="my-2 w-full flex justify-center">
|
||||
<Pagination
|
||||
isCompact
|
||||
showControls
|
||||
showShadow
|
||||
color="primary"
|
||||
classNames={{
|
||||
base: "bg-transparent",
|
||||
wrapper: "bg-transparent",
|
||||
}}
|
||||
page={page}
|
||||
total={totalPage}
|
||||
onChange={(page) => setPage(page)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,34 @@
|
|||
import { httpDeleteInterceptor, httpGet, httpPost } from "./http-config/axios-base-service";
|
||||
import {
|
||||
httpDeleteInterceptor,
|
||||
httpGet,
|
||||
httpPost,
|
||||
} from "./http-config/axios-base-service";
|
||||
|
||||
export async function listUserRole() {
|
||||
const headers = {
|
||||
"content-type": "application/json",
|
||||
};
|
||||
return await httpGet(`/user-roles`, headers);
|
||||
export async function listUserRole(data: any) {
|
||||
const headers = {
|
||||
"content-type": "application/json",
|
||||
};
|
||||
return await httpGet(
|
||||
`/user-roles?limit=${data.limit}&page=${data.page}`,
|
||||
headers
|
||||
);
|
||||
}
|
||||
|
||||
export async function createMasterUserRole(data: any) {
|
||||
const headers = {
|
||||
"content-type": "application/json",
|
||||
};
|
||||
const pathUrl = `/user-roles`;
|
||||
return await httpPost(pathUrl, headers, data);
|
||||
const headers = {
|
||||
"content-type": "application/json",
|
||||
};
|
||||
const pathUrl = `/user-roles`;
|
||||
return await httpPost(pathUrl, headers, data);
|
||||
}
|
||||
|
||||
export async function getMasterUserRoleById(id: any) {
|
||||
const headers = {
|
||||
"content-type": "application/json",
|
||||
};
|
||||
return await httpGet(`/user-roles/${id}`, headers);
|
||||
const headers = {
|
||||
"content-type": "application/json",
|
||||
};
|
||||
return await httpGet(`/user-roles/${id}`, headers);
|
||||
}
|
||||
|
||||
export async function deleteMasterUserRole(id: string) {
|
||||
return await httpDeleteInterceptor(`/user-roles/${id}`);
|
||||
return await httpDeleteInterceptor(`/user-roles/${id}`);
|
||||
}
|
||||
|
|
@ -4,11 +4,11 @@ import {
|
|||
httpPost,
|
||||
} from "./http-config/axios-base-service";
|
||||
|
||||
export async function listMasterUsers() {
|
||||
export async function listMasterUsers(data: any) {
|
||||
const headers = {
|
||||
"content-type": "application/json",
|
||||
};
|
||||
return await httpGet(`/users`, headers);
|
||||
return await httpGet(`/users?page=${data.page}&limit=${data.limit}`, headers);
|
||||
}
|
||||
|
||||
export async function createMasterUser(data: any) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue