feat: add Settlements, SMS, User detail, and Users management pages
- Implement SettlementsPage for managing settlement requests with approval and rejection functionalities. - Create SmsPage for handling SMS templates, including creation, approval, rejection, and logging. - Add UserDetailPage to display detailed information about users. - Develop UsersPage for listing users with search, view, edit, and delete options. - Introduce new types for User, SmsTemplate, SmsLog, and Settlement to support the new features.
This commit is contained in:
hamed
@@ -0,0 +1,242 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { TrashIcon, PlusIcon, PencilIcon } 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 { Category, CategoryBundle } from '../types';
|
||||
import PageHeader from '../components/ui/PageHeader';
|
||||
import DataTable, { Column } from '../components/ui/DataTable';
|
||||
import ConfirmDialog from '../components/ui/ConfirmDialog';
|
||||
import Modal from '../components/ui/Modal';
|
||||
|
||||
const TABS: { key: CategoryBundle; label: string }[] = [
|
||||
{ key: 'state', label: 'استانها' },
|
||||
{ key: 'city', label: 'شهرها' },
|
||||
{ key: 'specialty', label: 'تخصصها' },
|
||||
{ key: 'doctor_service', label: 'خدمات پزشک' },
|
||||
{ key: 'insurance_type', label: 'نوع بیمه' },
|
||||
{ key: 'supplementary_insurance', label: 'بیمه تکمیلی' },
|
||||
{ key: 'tag', label: 'تگهای بلاگ' },
|
||||
];
|
||||
|
||||
const schema = z.object({
|
||||
name: z.string().min(1, 'نام الزامی است'),
|
||||
code: z.string().optional(),
|
||||
parent_uuid: z.string().optional(),
|
||||
});
|
||||
type FormData = z.infer<typeof schema>;
|
||||
|
||||
export default function CategoriesPage() {
|
||||
const qc = useQueryClient();
|
||||
const [activeTab, setActiveTab] = useState<CategoryBundle>('state');
|
||||
const [search, setSearch] = useState('');
|
||||
const [addOpen, setAddOpen] = useState(false);
|
||||
const [editTarget, setEditTarget] = useState<Category | null>(null);
|
||||
const [deleteTarget, setDeleteTarget] = useState<Category | null>(null);
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['categories', activeTab],
|
||||
queryFn: () =>
|
||||
api.get<ApiResponse<Category[]>>(`/api/v1/categorys/${activeTab}`),
|
||||
});
|
||||
|
||||
const { register, handleSubmit, reset, setValue, formState: { errors, isSubmitting } } = useForm<FormData>({
|
||||
resolver: zodResolver(schema),
|
||||
});
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (d: FormData) =>
|
||||
api.post<ApiResponse<Category>>('/api/v1/category', { ...d, bundle: activeTab }),
|
||||
onSuccess: () => {
|
||||
toast.success('دستهبندی اضافه شد');
|
||||
setAddOpen(false);
|
||||
reset();
|
||||
qc.invalidateQueries({ queryKey: ['categories', activeTab] });
|
||||
},
|
||||
onError: (err: Error) => toast.error(err.message),
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: ({ uuid, d }: { uuid: string; d: FormData }) =>
|
||||
api.patch<ApiResponse<Category>>(`/api/v1/category/${uuid}`, d),
|
||||
onSuccess: () => {
|
||||
toast.success('دستهبندی بروزرسانی شد');
|
||||
setEditTarget(null);
|
||||
reset();
|
||||
qc.invalidateQueries({ queryKey: ['categories', activeTab] });
|
||||
},
|
||||
onError: (err: Error) => toast.error(err.message),
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (c: Category) => api.delete<ApiResponse<null>>(`/api/v1/category/${c.uuid}`),
|
||||
onSuccess: () => {
|
||||
toast.success('دستهبندی حذف شد');
|
||||
setDeleteTarget(null);
|
||||
qc.invalidateQueries({ queryKey: ['categories', activeTab] });
|
||||
},
|
||||
onError: (err: Error) => toast.error(err.message),
|
||||
});
|
||||
|
||||
const openEdit = (c: Category) => {
|
||||
setEditTarget(c);
|
||||
setValue('name', c.name);
|
||||
setValue('code', c.code ?? '');
|
||||
setValue('parent_uuid', c.parent_uuid ?? '');
|
||||
};
|
||||
|
||||
const allItems = data?.data ?? [];
|
||||
const filtered = search
|
||||
? allItems.filter((c) => c.name.includes(search))
|
||||
: allItems;
|
||||
|
||||
const columns: Column<Category>[] = [
|
||||
{ key: 'name', header: 'نام', render: (c) => <span className="font-medium">{c.name}</span> },
|
||||
{ key: 'code', header: 'کد', render: (c) => c.code ? <span dir="ltr" className="font-mono text-xs">{c.code}</span> : '—' },
|
||||
{ key: 'parent_name', header: 'والد', render: (c) => c.parent_name ?? '—' },
|
||||
];
|
||||
|
||||
const handleTabChange = (tab: CategoryBundle) => {
|
||||
setActiveTab(tab);
|
||||
setSearch('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
title="دستهبندیها"
|
||||
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'دستهبندیها' }]}
|
||||
action={
|
||||
<button onClick={() => setAddOpen(true)}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 transition-colors">
|
||||
<PlusIcon className="w-4 h-4" />
|
||||
افزودن
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="bg-white rounded-2xl shadow-sm border border-gray-100">
|
||||
<div className="flex flex-wrap border-b border-gray-200 px-6 pt-4 gap-1">
|
||||
{TABS.map((t) => (
|
||||
<button key={t.key} onClick={() => handleTabChange(t.key)}
|
||||
className={`pb-3 px-4 text-sm font-medium border-b-2 transition-colors -mb-px ${
|
||||
activeTab === t.key
|
||||
? 'border-primary-600 text-primary-600'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700'
|
||||
}`}>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<DataTable<Category>
|
||||
columns={columns}
|
||||
data={filtered}
|
||||
loading={isLoading}
|
||||
searchValue={search}
|
||||
onSearchChange={setSearch}
|
||||
searchPlaceholder="جستجو..."
|
||||
emptyMessage="هیچ موردی یافت نشد"
|
||||
actions={(cat) => (
|
||||
<>
|
||||
<button onClick={() => openEdit(cat)}
|
||||
className="p-1.5 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors" title="ویرایش">
|
||||
<PencilIcon className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={() => setDeleteTarget(cat)}
|
||||
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="حذف">
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal open={addOpen} title={`افزودن — ${TABS.find((t) => t.key === activeTab)?.label}`}
|
||||
onClose={() => { setAddOpen(false); reset(); }}
|
||||
footer={
|
||||
<>
|
||||
<button onClick={() => { setAddOpen(false); reset(); }}
|
||||
className="px-4 py-2 border border-gray-300 text-sm text-gray-700 rounded-[10px] hover:bg-gray-50 transition-colors">
|
||||
لغو
|
||||
</button>
|
||||
<button form="cat-form" type="submit" disabled={isSubmitting}
|
||||
className="px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 disabled:opacity-50 transition-colors">
|
||||
ذخیره
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<form id="cat-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">نام</label>
|
||||
<input {...register('name')}
|
||||
className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
|
||||
{errors.name && <p className="text-red-500 text-xs mt-1">{errors.name.message}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">کد (اختیاری)</label>
|
||||
<input {...register('code')} dir="ltr"
|
||||
className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
|
||||
</div>
|
||||
{(activeTab === 'city') && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">استان (UUID)</label>
|
||||
<input {...register('parent_uuid')} dir="ltr" placeholder="uuid استان"
|
||||
className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
<Modal open={!!editTarget} title="ویرایش دستهبندی"
|
||||
onClose={() => { setEditTarget(null); reset(); }}
|
||||
footer={
|
||||
<>
|
||||
<button onClick={() => { setEditTarget(null); reset(); }}
|
||||
className="px-4 py-2 border border-gray-300 text-sm text-gray-700 rounded-[10px] hover:bg-gray-50 transition-colors">
|
||||
لغو
|
||||
</button>
|
||||
<button form="edit-cat-form" type="submit" disabled={isSubmitting}
|
||||
className="px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 disabled:opacity-50 transition-colors">
|
||||
ذخیره
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<form id="edit-cat-form"
|
||||
onSubmit={handleSubmit((d) => editTarget && updateMutation.mutate({ uuid: editTarget.uuid, d }))}
|
||||
className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">نام</label>
|
||||
<input {...register('name')}
|
||||
className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
|
||||
{errors.name && <p className="text-red-500 text-xs mt-1">{errors.name.message}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">کد (اختیاری)</label>
|
||||
<input {...register('code')} dir="ltr"
|
||||
className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
<ConfirmDialog
|
||||
open={!!deleteTarget}
|
||||
title="حذف دستهبندی"
|
||||
message={`آیا از حذف "${deleteTarget?.name}" اطمینان دارید؟`}
|
||||
confirmLabel="حذف"
|
||||
danger
|
||||
loading={deleteMutation.isPending}
|
||||
onConfirm={() => deleteTarget && deleteMutation.mutate(deleteTarget)}
|
||||
onCancel={() => setDeleteTarget(null)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user