hamed
5066fcbd91
- Introduced InsuranceType enum for insurance categorization. - Created InsuranceRepository for managing insurance entities. - Developed LocationController for handling provinces and cities, including CRUD operations. - Implemented City and Province entities with necessary fields and relationships. - Added CityRepository and ProvinceRepository for database interactions. - Established Specialty management with SpecialtyController, including CRUD operations. - Created Specialty and Tag entities with appropriate fields and relationships. - Implemented TagController for managing tags, including CRUD operations. - Added TagRepository for database interactions with tags.
235 lines
9.5 KiB
TypeScript
235 lines
9.5 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { EyeIcon, TrashIcon, PlusIcon } from '@heroicons/react/24/outline';
|
|
import { useForm, Controller } 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, PaginatedResponse } from '../lib/api';
|
|
import type { Representation, City } from '../types';
|
|
import { formatDate, formatRial, formatNumber } from '../lib/utils';
|
|
import PageHeader from '../components/ui/PageHeader';
|
|
import DataTable, { Column } from '../components/ui/DataTable';
|
|
import { ActiveBadge } from '../components/ui/StatusBadge';
|
|
import Pagination from '../components/ui/Pagination';
|
|
import ConfirmDialog from '../components/ui/ConfirmDialog';
|
|
import Modal from '../components/ui/Modal';
|
|
import SearchableSelect from '../components/ui/SearchableSelect';
|
|
|
|
const schema = z.object({
|
|
full_name: z.string().min(2, 'نام الزامی است'),
|
|
mobile_number: z.string().min(10, 'شماره موبایل معتبر نیست'),
|
|
city_id: z.number().nullable().optional(),
|
|
commission_percent: z.coerce.number().min(0).max(100),
|
|
});
|
|
type FormData = z.infer<typeof schema>;
|
|
|
|
export default function RepresentationsPage() {
|
|
const navigate = useNavigate();
|
|
const qc = useQueryClient();
|
|
const [page, setPage] = useState(1);
|
|
const [search, setSearch] = useState('');
|
|
const [cityFilter, setCityFilter] = useState<number | null>(null);
|
|
const [addOpen, setAddOpen] = useState(false);
|
|
const [deleteTarget, setDeleteTarget] = useState<Representation | null>(null);
|
|
const limit = 15;
|
|
|
|
// Load city list for filter and form
|
|
const citiesQuery = useQuery({
|
|
queryKey: ['cities-select'],
|
|
queryFn: () => api.get<PaginatedResponse<City>>('/api/v1/admin/cities?limit=200'),
|
|
staleTime: 5 * 60_000,
|
|
});
|
|
const cities: City[] = citiesQuery.data?.data ?? [];
|
|
const cityOptions = cities.map((c) => ({ value: c.id, label: c.name }));
|
|
|
|
const { data, isLoading } = useQuery({
|
|
queryKey: ['representations', page, search, cityFilter],
|
|
queryFn: () => {
|
|
const params = new URLSearchParams({ page: String(page), limit: String(limit) });
|
|
if (search) params.set('search', search);
|
|
if (cityFilter !== null) params.set('city_id', String(cityFilter));
|
|
return api.get<PaginatedResponse<Representation>>(`/api/v1/admin/representations?${params}`);
|
|
},
|
|
});
|
|
|
|
const { register, handleSubmit, reset, control, formState: { errors, isSubmitting } } = useForm<FormData>({
|
|
resolver: zodResolver(schema),
|
|
defaultValues: { commission_percent: 10 },
|
|
});
|
|
|
|
const createMutation = useMutation({
|
|
mutationFn: (d: FormData) =>
|
|
api.post<ApiResponse<Representation>>('/api/v1/representation', {
|
|
full_name: d.full_name,
|
|
mobile_number: d.mobile_number,
|
|
city_id: d.city_id ?? null,
|
|
commission_percent: d.commission_percent,
|
|
}),
|
|
onSuccess: () => {
|
|
toast.success('نماینده اضافه شد');
|
|
setAddOpen(false);
|
|
reset();
|
|
qc.invalidateQueries({ queryKey: ['representations'] });
|
|
},
|
|
onError: (err: Error) => toast.error(err.message),
|
|
});
|
|
|
|
const deleteMutation = useMutation({
|
|
mutationFn: (r: Representation) => api.delete<ApiResponse<null>>(`/api/v1/representation/${r.uuid}`),
|
|
onSuccess: () => {
|
|
toast.success('نماینده حذف شد');
|
|
setDeleteTarget(null);
|
|
qc.invalidateQueries({ queryKey: ['representations'] });
|
|
},
|
|
onError: (err: Error) => toast.error(err.message),
|
|
});
|
|
|
|
const columns: Column<Representation>[] = [
|
|
{ key: 'full_name', header: 'نام', render: (r) => <span className="font-medium">{r.full_name}</span> },
|
|
{ key: 'mobile_number', header: 'موبایل', render: (r) => <span dir="ltr">{r.mobile_number ?? '—'}</span> },
|
|
{ key: 'city', header: 'شهر', render: (r) => r.city ?? '—' },
|
|
{
|
|
key: 'commission_percent',
|
|
header: 'کمیسیون',
|
|
render: (r) => `${formatNumber(r.commission_percent)}٪`,
|
|
},
|
|
{
|
|
key: 'wallet_balance',
|
|
header: 'موجودی کیفپول',
|
|
render: (r) => formatRial(r.wallet_balance ?? 0),
|
|
},
|
|
{ key: 'is_active', header: 'وضعیت', render: (r) => <ActiveBadge active={r.is_active ?? r.active ?? false} /> },
|
|
{ key: 'created_at', header: 'تاریخ ثبت', render: (r) => formatDate(r.created_at) },
|
|
];
|
|
|
|
const items = data?.data ?? [];
|
|
const total = data?.meta?.totalRecords ?? 0;
|
|
|
|
return (
|
|
<div>
|
|
<PageHeader
|
|
title="نمایندگان"
|
|
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'نمایندگان' }]}
|
|
action={
|
|
<button onClick={() => setAddOpen(true)} className="cp-btn-primary">
|
|
<PlusIcon className="w-4 h-4" />
|
|
افزودن نماینده
|
|
</button>
|
|
}
|
|
/>
|
|
|
|
<div className="cp-card p-6">
|
|
{/* City filter */}
|
|
<div className="mb-4 flex items-center gap-3">
|
|
<div className="min-w-[220px]">
|
|
<SearchableSelect
|
|
options={cityOptions}
|
|
value={cityFilter}
|
|
onChange={(val) => { setCityFilter(val as number | null); setPage(1); }}
|
|
placeholder="فیلتر بر اساس شهر..."
|
|
isClearable
|
|
isLoading={citiesQuery.isLoading}
|
|
noOptionsMessage="هیچ شهری یافت نشد"
|
|
/>
|
|
</div>
|
|
{cityFilter !== null && (
|
|
<button
|
|
onClick={() => { setCityFilter(null); setPage(1); }}
|
|
className="text-xs text-gray-400 hover:text-gray-600 transition-colors"
|
|
>
|
|
پاک کردن فیلتر
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<DataTable<Representation>
|
|
columns={columns}
|
|
data={items}
|
|
loading={isLoading}
|
|
searchValue={search}
|
|
onSearchChange={(v) => { setSearch(v); setPage(1); }}
|
|
searchPlaceholder="جستجو بر اساس نام یا موبایل..."
|
|
emptyMessage="هیچ نمایندهای یافت نشد"
|
|
actions={(rep) => (
|
|
<>
|
|
<button onClick={() => navigate(`/admin/representations/${rep.uuid}`)}
|
|
className="cp-action-view" title="مشاهده">
|
|
<EyeIcon className="w-4 h-4" />
|
|
</button>
|
|
<button onClick={() => setDeleteTarget(rep)}
|
|
className="cp-action-delete" title="حذف">
|
|
<TrashIcon className="w-4 h-4" />
|
|
</button>
|
|
</>
|
|
)}
|
|
/>
|
|
<Pagination page={page} total={total} limit={limit} onPageChange={setPage} />
|
|
</div>
|
|
|
|
<Modal open={addOpen} title="افزودن نماینده" onClose={() => { setAddOpen(false); reset(); }}
|
|
footer={
|
|
<>
|
|
<button onClick={() => { setAddOpen(false); reset(); }} className="cp-btn-secondary">
|
|
لغو
|
|
</button>
|
|
<button form="add-rep-form" type="submit" disabled={isSubmitting} className="cp-btn-primary">
|
|
{isSubmitting ? 'در حال ذخیره...' : 'ذخیره'}
|
|
</button>
|
|
</>
|
|
}
|
|
>
|
|
<form id="add-rep-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))} className="space-y-4">
|
|
<div>
|
|
<label className="cp-label">نام کامل</label>
|
|
<input {...register('full_name')} placeholder="علی محمدی" className="cp-input h-11" />
|
|
{errors.full_name && <p className="text-red-500 text-xs mt-1">{errors.full_name.message}</p>}
|
|
</div>
|
|
<div>
|
|
<label className="cp-label">شماره موبایل</label>
|
|
<input {...register('mobile_number')} dir="ltr" placeholder="09xxxxxxxxx" className="cp-input h-11" />
|
|
{errors.mobile_number && <p className="text-red-500 text-xs mt-1">{errors.mobile_number.message}</p>}
|
|
</div>
|
|
<div>
|
|
<label className="cp-label">شهر</label>
|
|
<Controller
|
|
name="city_id"
|
|
control={control}
|
|
render={({ field }) => (
|
|
<SearchableSelect
|
|
options={cityOptions}
|
|
value={field.value ?? null}
|
|
onChange={(val) => field.onChange(val as number | null)}
|
|
placeholder="انتخاب شهر..."
|
|
isClearable
|
|
isLoading={citiesQuery.isLoading}
|
|
noOptionsMessage="هیچ شهری یافت نشد"
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="cp-label">درصد کمیسیون</label>
|
|
<input {...register('commission_percent')} type="number" min="0" max="100" placeholder="10" dir="ltr"
|
|
className="cp-input h-11" />
|
|
{errors.commission_percent && <p className="text-red-500 text-xs mt-1">{errors.commission_percent.message}</p>}
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
|
|
<ConfirmDialog
|
|
open={!!deleteTarget}
|
|
title="حذف نماینده"
|
|
message={`آیا از حذف نماینده "${deleteTarget?.full_name}" اطمینان دارید؟`}
|
|
confirmLabel="حذف"
|
|
danger
|
|
loading={deleteMutation.isPending}
|
|
onConfirm={() => deleteTarget && deleteMutation.mutate(deleteTarget)}
|
|
onCancel={() => setDeleteTarget(null)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|