feat: implement staff management features including staff creation and dashboard layout
This commit is contained in:
Ardeman
@@ -0,0 +1,89 @@
|
||||
import { PlusIcon } from '@heroicons/react/24/solid'
|
||||
import { Link } from 'react-router'
|
||||
|
||||
import { Button } from '~/components/ui/button'
|
||||
import { TitleDashboard } from '~/components/ui/title-dashboard'
|
||||
|
||||
export const StaffsPage = () => {
|
||||
// const loaderData = useRouteLoaderData<typeof loader>(
|
||||
// 'routes/_admin.lg-admin._dashboard.staffs._index',
|
||||
// )
|
||||
|
||||
// DataTable.use(DT)
|
||||
// const dataTable =
|
||||
// loaderData?.usersData?.sort(
|
||||
// (a, b) =>
|
||||
// new Date(b.subscribe.start_date).getTime() -
|
||||
// new Date(a.subscribe.start_date).getTime(),
|
||||
// ) || []
|
||||
|
||||
// const dataColumns: ConfigColumns[] = [
|
||||
// {
|
||||
// title: 'No',
|
||||
// render: (
|
||||
// _data: unknown,
|
||||
// _type: unknown,
|
||||
// _row: unknown,
|
||||
// meta: { row: number },
|
||||
// ) => {
|
||||
// return meta.row + 1
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// title: 'Tanggal Daftar',
|
||||
// data: 'created_at',
|
||||
// },
|
||||
// {
|
||||
// title: 'User',
|
||||
// },
|
||||
// {
|
||||
// title: 'Phone',
|
||||
// data: 'phone',
|
||||
// },
|
||||
// {
|
||||
// title: 'Status',
|
||||
// data: 'subscribe.subscribe_plan.name',
|
||||
// },
|
||||
// ]
|
||||
// const dataSlot: DataTableSlots = {
|
||||
// 1: (value: string) => formatDate(value),
|
||||
// 2: (_value: unknown, _type: unknown, data: TUserResponse) => (
|
||||
// <div>
|
||||
// <div>{data.email}</div>
|
||||
// <div className="text-sm text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
|
||||
// </div>
|
||||
// ),
|
||||
// 3: (value: string) => <span>{value}</span>,
|
||||
// 4: (value: TColorBadge, _type: unknown, data: TUserResponse) => (
|
||||
// <span
|
||||
// className={`rounded-lg px-2 text-sm ${getStatusBadge(data.subscribe.status as TColorBadge)}`}
|
||||
// >
|
||||
// {value}
|
||||
// </span>
|
||||
// ),
|
||||
// }
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<TitleDashboard title="Staffs" />
|
||||
<div className="mb-8 flex items-end justify-between gap-5">
|
||||
<div className="flex-1">{/* TODO: Filter */}</div>
|
||||
<Button
|
||||
as={Link}
|
||||
to="/lg-admin/staffs/create"
|
||||
size="lg"
|
||||
className="text-md h-[42px] px-4"
|
||||
>
|
||||
<PlusIcon className="size-8" /> Buat Staff
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* <UiTable
|
||||
data={dataTable || []}
|
||||
columns={dataColumns}
|
||||
slots={dataSlot}
|
||||
title="Daftar Users"
|
||||
/> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { useEffect } from 'react'
|
||||
import toast from 'react-hot-toast'
|
||||
import { useFetcher, useNavigate } from 'react-router'
|
||||
import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
|
||||
import { z } from 'zod'
|
||||
|
||||
import { Button } from '~/components/ui/button'
|
||||
import { Input } from '~/components/ui/input'
|
||||
import { InputFile } from '~/components/ui/input-file'
|
||||
import { TitleDashboard } from '~/components/ui/title-dashboard'
|
||||
|
||||
export const staffSchema = z
|
||||
.object({
|
||||
profile_picture: z
|
||||
.string()
|
||||
.url({
|
||||
message: 'Profile picture must be a valid URL',
|
||||
})
|
||||
.or(z.literal('')),
|
||||
name: z.string().min(1, {
|
||||
message: 'Nama staff is required',
|
||||
}),
|
||||
password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
|
||||
rePassword: z.string().min(6, 'Kata sandi minimal 6 karakter'),
|
||||
email: z.string().email('Email tidak valid'),
|
||||
})
|
||||
.refine((field) => field.password === field.rePassword, {
|
||||
message: 'Kata sandi tidak sama',
|
||||
path: ['rePassword'],
|
||||
})
|
||||
export type TStaffSchema = z.infer<typeof staffSchema>
|
||||
|
||||
export const FormStaffPage = () => {
|
||||
const fetcher = useFetcher()
|
||||
const navigate = useNavigate()
|
||||
const formMethods = useRemixForm<TStaffSchema>({
|
||||
mode: 'onSubmit',
|
||||
fetcher,
|
||||
resolver: zodResolver(staffSchema),
|
||||
})
|
||||
|
||||
const { handleSubmit } = formMethods
|
||||
|
||||
useEffect(() => {
|
||||
if (!fetcher.data?.success && fetcher.data?.message) {
|
||||
toast.error(fetcher.data.message)
|
||||
}
|
||||
|
||||
if (fetcher.data?.success) {
|
||||
toast.success(`Staff berhasil dibuat!`)
|
||||
navigate('/lg-admin/staffs')
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [fetcher.data])
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<TitleDashboard title={`Buat Staff`} />
|
||||
<div>
|
||||
<RemixFormProvider {...formMethods}>
|
||||
<fetcher.Form
|
||||
method="post"
|
||||
onSubmit={handleSubmit}
|
||||
action={`/actions/admin/staffs/create`}
|
||||
className="space-y-4"
|
||||
>
|
||||
<div className="flex items-end justify-between gap-4">
|
||||
<Input
|
||||
id="name"
|
||||
label="Nama Staff"
|
||||
placeholder="Masukkan Url Link"
|
||||
name="name"
|
||||
className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
|
||||
labelClassName="text-sm font-medium text-[#363636]"
|
||||
containerClassName="flex-1"
|
||||
/>
|
||||
<Input
|
||||
id="email"
|
||||
label="Email"
|
||||
placeholder="Contoh: legal@legalgo.id"
|
||||
name="email"
|
||||
className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
|
||||
labelClassName="text-sm font-medium text-[#363636]"
|
||||
containerClassName="flex-1"
|
||||
/>
|
||||
<Button
|
||||
isLoading={fetcher.state !== 'idle'}
|
||||
disabled={fetcher.state !== 'idle'}
|
||||
type="submit"
|
||||
size="lg"
|
||||
className="text-md h-[42px] rounded-md"
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-end justify-between gap-4">
|
||||
<Input
|
||||
id="password"
|
||||
label="Kata Sandi"
|
||||
placeholder="Masukkan Kata Sandi"
|
||||
name="password"
|
||||
className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
|
||||
labelClassName="text-sm font-medium text-[#363636]"
|
||||
containerClassName="flex-1"
|
||||
type="password"
|
||||
/>
|
||||
<Input
|
||||
id="re-password"
|
||||
label="Ulangi Kata Sandi"
|
||||
placeholder="Masukkan Kata Sandi"
|
||||
name="rePassword"
|
||||
className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
|
||||
labelClassName="text-sm font-medium text-[#363636]"
|
||||
containerClassName="flex-1"
|
||||
type="password"
|
||||
/>
|
||||
<InputFile
|
||||
id="profile_picture"
|
||||
label="Profile Picture"
|
||||
placeholder="Upload your profile picture"
|
||||
name="profile_picture"
|
||||
className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
|
||||
labelClassName="text-sm font-medium text-[#363636]"
|
||||
containerClassName="flex-1"
|
||||
category="profile_picture"
|
||||
/>
|
||||
</div>
|
||||
</fetcher.Form>
|
||||
</RemixFormProvider>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user