feat: add Staff, Subscription, ClinicServices, SmsWallet pages (TASK-10,11,13,14)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
hamed
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
7ea3523830
commit
ed18c260ca
@@ -0,0 +1,213 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { PencilIcon, EyeIcon, EyeSlashIcon, PlusIcon } from '@heroicons/react/24/outline';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import { toast } from 'sonner';
|
||||
import { api } from '../lib/api';
|
||||
import type { ApiResponse } from '../lib/api';
|
||||
import type { ClinicStaff } from '../types';
|
||||
import { formatDate } from '../lib/utils';
|
||||
import DataTable, { type Column } from '../components/ui/DataTable';
|
||||
import Modal from '../components/ui/Modal';
|
||||
import ConfirmDialog from '../components/ui/ConfirmDialog';
|
||||
import PageHeader from '../components/ui/PageHeader';
|
||||
import { ActiveBadge } from '../components/ui/StatusBadge';
|
||||
|
||||
const schema = z.object({
|
||||
full_name: z.string().min(2, 'نام حداقل ۲ کاراکتر باید باشد'),
|
||||
phone: z.string().optional(),
|
||||
job_title: z.string().optional(),
|
||||
address: z.string().optional(),
|
||||
national_code: z.string().optional(),
|
||||
});
|
||||
type StaffFormData = z.infer<typeof schema>;
|
||||
|
||||
const EMPTY: ClinicStaff[] = [];
|
||||
|
||||
export default function StaffPage() {
|
||||
const qc = useQueryClient();
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [editTarget, setEditTarget] = useState<ClinicStaff | null>(null);
|
||||
const [toggleTarget, setToggleTarget] = useState<ClinicStaff | null>(null);
|
||||
|
||||
const { data, isLoading } = useQuery<ApiResponse<ClinicStaff[]>>({
|
||||
queryKey: ['staff'],
|
||||
queryFn: () => api.get('/api/v1/staff'),
|
||||
});
|
||||
|
||||
const staff = data?.data ?? EMPTY;
|
||||
|
||||
const createForm = useForm<StaffFormData>({ resolver: zodResolver(schema) });
|
||||
const editForm = useForm<StaffFormData>({ resolver: zodResolver(schema) });
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (body: StaffFormData) => api.post('/api/v1/staff', body),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['staff'] });
|
||||
setCreateOpen(false);
|
||||
createForm.reset();
|
||||
toast.success('پرسنل ایجاد شد');
|
||||
},
|
||||
onError: (err: any) => toast.error(err.message),
|
||||
});
|
||||
|
||||
const editMutation = useMutation({
|
||||
mutationFn: ({ uuid, body }: { uuid: string; body: StaffFormData }) =>
|
||||
api.patch(`/api/v1/staff/${uuid}`, body),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['staff'] });
|
||||
setEditTarget(null);
|
||||
toast.success('اطلاعات پرسنل ویرایش شد');
|
||||
},
|
||||
onError: (err: any) => toast.error(err.message),
|
||||
});
|
||||
|
||||
const toggleMutation = useMutation({
|
||||
mutationFn: (uuid: string) => api.patch(`/api/v1/staff/${uuid}/toggle`, {}),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['staff'] });
|
||||
setToggleTarget(null);
|
||||
toast.success('وضعیت پرسنل تغییر کرد');
|
||||
},
|
||||
onError: (err: any) => toast.error(err.message),
|
||||
});
|
||||
|
||||
const openEdit = (s: ClinicStaff) => {
|
||||
editForm.reset({
|
||||
full_name: s.full_name,
|
||||
phone: s.phone ?? '',
|
||||
job_title: s.job_title ?? '',
|
||||
address: s.address ?? '',
|
||||
national_code: s.national_code ?? '',
|
||||
});
|
||||
setEditTarget(s);
|
||||
};
|
||||
|
||||
const columns: Column<ClinicStaff>[] = [
|
||||
{ key: 'full_name', header: 'نام و نام خانوادگی' },
|
||||
{ key: 'job_title', header: 'سمت', render: (s) => s.job_title ?? '—' },
|
||||
{ key: 'phone', header: 'تلفن', render: (s) => s.phone ?? '—' },
|
||||
{ key: 'national_code', header: 'کد ملی', render: (s) => s.national_code ?? '—' },
|
||||
{
|
||||
key: 'active',
|
||||
header: 'وضعیت',
|
||||
render: (s) => <ActiveBadge active={s.active} />,
|
||||
},
|
||||
{
|
||||
key: 'created_at',
|
||||
header: 'تاریخ ثبت',
|
||||
render: (s) => formatDate(s.created_at),
|
||||
},
|
||||
{
|
||||
key: 'uuid',
|
||||
header: 'عملیات',
|
||||
render: (s) => (
|
||||
<div style={{ display: 'flex', gap: 6 }}>
|
||||
<button className="btn sm" onClick={() => openEdit(s)} title="ویرایش">
|
||||
<PencilIcon style={{ width: 15 }} />
|
||||
</button>
|
||||
<button
|
||||
className="btn sm"
|
||||
onClick={() => setToggleTarget(s)}
|
||||
title={s.active ? 'غیرفعالسازی' : 'فعالسازی'}
|
||||
>
|
||||
{s.active
|
||||
? <EyeSlashIcon style={{ width: 15 }} />
|
||||
: <EyeIcon style={{ width: 15 }} />
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="مدیریت پرسنل"
|
||||
description="لیست پرسنل کلینیک / مطب"
|
||||
action={
|
||||
<button className="btn primary sm" onClick={() => setCreateOpen(true)}>
|
||||
<PlusIcon style={{ width: 16 }} /> افزودن پرسنل
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="card">
|
||||
<DataTable columns={columns} data={staff} loading={isLoading} />
|
||||
</div>
|
||||
|
||||
{/* Modal ایجاد */}
|
||||
<Modal open={createOpen} onClose={() => setCreateOpen(false)} title="افزودن پرسنل جدید">
|
||||
<form onSubmit={createForm.handleSubmit((d) => createMutation.mutate(d))}>
|
||||
<StaffFormFields form={createForm} />
|
||||
<div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
|
||||
<button type="submit" className="btn primary" disabled={createMutation.isPending}>
|
||||
{createMutation.isPending ? 'در حال ذخیره...' : 'ذخیره'}
|
||||
</button>
|
||||
<button type="button" className="btn" onClick={() => setCreateOpen(false)}>انصراف</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
{/* Modal ویرایش */}
|
||||
<Modal open={!!editTarget} onClose={() => setEditTarget(null)} title="ویرایش پرسنل">
|
||||
<form
|
||||
onSubmit={editForm.handleSubmit((d) =>
|
||||
editTarget && editMutation.mutate({ uuid: editTarget.uuid, body: d })
|
||||
)}
|
||||
>
|
||||
<StaffFormFields form={editForm} />
|
||||
<div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
|
||||
<button type="submit" className="btn primary" disabled={editMutation.isPending}>
|
||||
{editMutation.isPending ? 'در حال ذخیره...' : 'ذخیره'}
|
||||
</button>
|
||||
<button type="button" className="btn" onClick={() => setEditTarget(null)}>انصراف</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
{/* Confirm toggle */}
|
||||
<ConfirmDialog
|
||||
open={!!toggleTarget}
|
||||
title={toggleTarget?.active ? 'غیرفعالسازی پرسنل' : 'فعالسازی پرسنل'}
|
||||
message={`آیا مطمئن هستید که میخواهید «${toggleTarget?.full_name}» را ${toggleTarget?.active ? 'غیرفعال' : 'فعال'} کنید؟`}
|
||||
confirmLabel={toggleTarget?.active ? 'غیرفعال کن' : 'فعال کن'}
|
||||
onConfirm={() => toggleTarget && toggleMutation.mutate(toggleTarget.uuid)}
|
||||
onCancel={() => setToggleTarget(null)}
|
||||
loading={toggleMutation.isPending}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function StaffFormFields({ form }: { form: ReturnType<typeof useForm<StaffFormData>> }) {
|
||||
const { register, formState: { errors } } = form;
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
<div className="field">
|
||||
<label>نام و نام خانوادگی *</label>
|
||||
<input {...register('full_name')} placeholder="علی رضایی" />
|
||||
{errors.full_name && <span className="field-error">{errors.full_name.message}</span>}
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>سمت</label>
|
||||
<input {...register('job_title')} placeholder="پرستار" />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>تلفن</label>
|
||||
<input {...register('phone')} placeholder="09121234567" dir="ltr" />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>کد ملی</label>
|
||||
<input {...register('national_code')} placeholder="0012345678" dir="ltr" />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>آدرس</label>
|
||||
<input {...register('address')} placeholder="آدرس محل سکونت" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user