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,339 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { CheckIcon, XMarkIcon, 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, PaginatedResponse } from '../lib/api';
|
||||
import type { SmsTemplate, SmsLog } from '../types';
|
||||
import { formatDate, formatDateTime } from '../lib/utils';
|
||||
import PageHeader from '../components/ui/PageHeader';
|
||||
import DataTable, { Column } from '../components/ui/DataTable';
|
||||
import StatusBadge from '../components/ui/StatusBadge';
|
||||
import Pagination from '../components/ui/Pagination';
|
||||
import ConfirmDialog from '../components/ui/ConfirmDialog';
|
||||
import Modal from '../components/ui/Modal';
|
||||
|
||||
const templateSchema = z.object({
|
||||
name: z.string().min(2, 'نام قالب الزامی است'),
|
||||
category: z.string().min(1, 'دستهبندی الزامی است'),
|
||||
content: z.string().min(5, 'متن قالب الزامی است'),
|
||||
});
|
||||
type TemplateFormData = z.infer<typeof templateSchema>;
|
||||
|
||||
type Tab = 'samples' | 'pending' | 'logs';
|
||||
|
||||
export default function SmsPage() {
|
||||
const qc = useQueryClient();
|
||||
const [activeTab, setActiveTab] = useState<Tab>('samples');
|
||||
const [page, setPage] = useState(1);
|
||||
const [rejectTarget, setRejectTarget] = useState<SmsTemplate | null>(null);
|
||||
const [rejectReason, setRejectReason] = useState('');
|
||||
const [addOpen, setAddOpen] = useState(false);
|
||||
const [deleteTarget, setDeleteTarget] = useState<SmsTemplate | null>(null);
|
||||
const limit = 15;
|
||||
|
||||
const sampleTemplatesQuery = useQuery({
|
||||
queryKey: ['sms-samples', page],
|
||||
queryFn: () =>
|
||||
api.get<PaginatedResponse<SmsTemplate>>(`/api/v1/sms/sample-templates?page=${page}&limit=${limit}`),
|
||||
enabled: activeTab === 'samples',
|
||||
});
|
||||
|
||||
const pendingTemplatesQuery = useQuery({
|
||||
queryKey: ['sms-pending', page],
|
||||
queryFn: () =>
|
||||
api.get<PaginatedResponse<SmsTemplate>>(
|
||||
`/api/v1/sms/templates?status=pending_approval&page=${page}&limit=${limit}`,
|
||||
),
|
||||
enabled: activeTab === 'pending',
|
||||
});
|
||||
|
||||
const logsQuery = useQuery({
|
||||
queryKey: ['sms-logs', page],
|
||||
queryFn: () =>
|
||||
api.get<PaginatedResponse<SmsLog>>(`/api/v1/sms/logs?page=${page}&limit=${limit}`),
|
||||
enabled: activeTab === 'logs',
|
||||
});
|
||||
|
||||
const { register, handleSubmit, reset, formState: { errors, isSubmitting } } = useForm<TemplateFormData>({
|
||||
resolver: zodResolver(templateSchema),
|
||||
});
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (d: TemplateFormData) =>
|
||||
api.post<ApiResponse<SmsTemplate>>('/api/v1/sms/sample-template', d),
|
||||
onSuccess: () => {
|
||||
toast.success('قالب اضافه شد');
|
||||
setAddOpen(false);
|
||||
reset();
|
||||
qc.invalidateQueries({ queryKey: ['sms-samples'] });
|
||||
},
|
||||
onError: (err: Error) => toast.error(err.message),
|
||||
});
|
||||
|
||||
const approveMutation = useMutation({
|
||||
mutationFn: (t: SmsTemplate) =>
|
||||
api.patch<ApiResponse<null>>(`/api/v1/sms/templates/${t.uuid}/approve`, {}),
|
||||
onSuccess: () => {
|
||||
toast.success('قالب تأیید شد');
|
||||
qc.invalidateQueries({ queryKey: ['sms-pending'] });
|
||||
},
|
||||
onError: (err: Error) => toast.error(err.message),
|
||||
});
|
||||
|
||||
const rejectMutation = useMutation({
|
||||
mutationFn: ({ t, reason }: { t: SmsTemplate; reason: string }) =>
|
||||
api.patch<ApiResponse<null>>(`/api/v1/sms/templates/${t.uuid}/reject`, { reason }),
|
||||
onSuccess: () => {
|
||||
toast.success('قالب رد شد');
|
||||
setRejectTarget(null);
|
||||
setRejectReason('');
|
||||
qc.invalidateQueries({ queryKey: ['sms-pending'] });
|
||||
},
|
||||
onError: (err: Error) => toast.error(err.message),
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (t: SmsTemplate) =>
|
||||
api.delete<ApiResponse<null>>(`/api/v1/sms/template/${t.uuid}`),
|
||||
onSuccess: () => {
|
||||
toast.success('قالب حذف شد');
|
||||
setDeleteTarget(null);
|
||||
qc.invalidateQueries({ queryKey: ['sms-samples'] });
|
||||
},
|
||||
onError: (err: Error) => toast.error(err.message),
|
||||
});
|
||||
|
||||
const templateColumns: Column<SmsTemplate>[] = [
|
||||
{ key: 'name', header: 'نام', render: (t) => <span className="font-medium">{t.name}</span> },
|
||||
{
|
||||
key: 'category',
|
||||
header: 'دستهبندی',
|
||||
render: (t) => (
|
||||
<span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">{t.category}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'content',
|
||||
header: 'محتوا',
|
||||
render: (t) => <span className="text-xs text-gray-500 line-clamp-1 max-w-xs">{t.content}</span>,
|
||||
},
|
||||
{ key: 'status', header: 'وضعیت', render: (t) => <StatusBadge type="sms" value={t.status} /> },
|
||||
{ key: 'created_at', header: 'تاریخ', render: (t) => formatDate(t.created_at) },
|
||||
];
|
||||
|
||||
const pendingColumns: Column<SmsTemplate>[] = [
|
||||
...templateColumns.filter((c) => c.key !== 'status'),
|
||||
{ key: 'owner_name', header: 'ارسالکننده' },
|
||||
];
|
||||
|
||||
const logColumns: Column<SmsLog>[] = [
|
||||
{ key: 'recipient', header: 'گیرنده', render: (l) => <span dir="ltr">{l.recipient}</span> },
|
||||
{ key: 'message', header: 'پیام', render: (l) => <span className="text-xs text-gray-500 line-clamp-1 max-w-xs">{l.message}</span> },
|
||||
{
|
||||
key: 'status',
|
||||
header: 'وضعیت',
|
||||
render: (l) => (
|
||||
<span className={`text-xs px-2 py-0.5 rounded-full font-medium ${
|
||||
l.status === 'sent' ? 'bg-green-100 text-green-700'
|
||||
: l.status === 'failed' ? 'bg-red-100 text-red-700'
|
||||
: 'bg-yellow-100 text-yellow-700'
|
||||
}`}>
|
||||
{l.status === 'sent' ? 'ارسال شده' : l.status === 'failed' ? 'ناموفق' : 'در صف'}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{ key: 'provider', header: 'سرویسدهنده' },
|
||||
{ key: 'sent_at', header: 'زمان ارسال', render: (l) => formatDateTime(l.sent_at) },
|
||||
];
|
||||
|
||||
const tabs: { key: Tab; label: string }[] = [
|
||||
{ key: 'samples', label: 'قالبهای نمونه' },
|
||||
{ key: 'pending', label: 'در انتظار تأیید' },
|
||||
{ key: 'logs', label: 'لاگهای ارسال' },
|
||||
];
|
||||
|
||||
const handleTabChange = (tab: Tab) => {
|
||||
setActiveTab(tab);
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
title="پیامک"
|
||||
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'پیامک' }]}
|
||||
action={
|
||||
activeTab === 'samples' ? (
|
||||
<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>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="bg-white rounded-2xl shadow-sm border border-gray-100">
|
||||
<div className="flex border-b border-gray-200 px-6 pt-4">
|
||||
{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">
|
||||
{activeTab === 'samples' && (
|
||||
<>
|
||||
<DataTable<SmsTemplate>
|
||||
columns={templateColumns}
|
||||
data={sampleTemplatesQuery.data?.data?.items ?? []}
|
||||
loading={sampleTemplatesQuery.isLoading}
|
||||
emptyMessage="هیچ قالبی یافت نشد"
|
||||
actions={(t) => (
|
||||
<>
|
||||
<button onClick={() => setDeleteTarget(t)}
|
||||
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>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
<Pagination
|
||||
page={page}
|
||||
total={sampleTemplatesQuery.data?.data?.total ?? 0}
|
||||
limit={limit}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeTab === 'pending' && (
|
||||
<>
|
||||
<DataTable<SmsTemplate>
|
||||
columns={pendingColumns}
|
||||
data={pendingTemplatesQuery.data?.data?.items ?? []}
|
||||
loading={pendingTemplatesQuery.isLoading}
|
||||
emptyMessage="هیچ قالبی در انتظار تأیید نیست"
|
||||
actions={(t) => (
|
||||
<>
|
||||
<button onClick={() => approveMutation.mutate(t)}
|
||||
className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors" title="تأیید">
|
||||
<CheckIcon className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={() => setRejectTarget(t)}
|
||||
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="رد">
|
||||
<XMarkIcon className="w-4 h-4" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
<Pagination
|
||||
page={page}
|
||||
total={pendingTemplatesQuery.data?.data?.total ?? 0}
|
||||
limit={limit}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeTab === 'logs' && (
|
||||
<>
|
||||
<DataTable<SmsLog>
|
||||
columns={logColumns}
|
||||
data={logsQuery.data?.data?.items ?? []}
|
||||
loading={logsQuery.isLoading}
|
||||
emptyMessage="لاگی یافت نشد"
|
||||
/>
|
||||
<Pagination
|
||||
page={page}
|
||||
total={logsQuery.data?.data?.total ?? 0}
|
||||
limit={limit}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal open={addOpen} title="افزودن قالب نمونه" onClose={() => setAddOpen(false)}
|
||||
footer={
|
||||
<>
|
||||
<button onClick={() => setAddOpen(false)}
|
||||
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="add-sms-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">
|
||||
{isSubmitting ? 'در حال ذخیره...' : 'ذخیره'}
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<form id="add-sms-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')} placeholder="مثال: تأیید نوبت"
|
||||
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('category')} placeholder="مثال: appointment"
|
||||
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.category && <p className="text-red-500 text-xs mt-1">{errors.category.message}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">متن قالب</label>
|
||||
<textarea {...register('content')} rows={4} placeholder="متن پیامک..."
|
||||
className="w-full border border-gray-300 rounded-[10px] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none" />
|
||||
{errors.content && <p className="text-red-500 text-xs mt-1">{errors.content.message}</p>}
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
<Modal open={!!rejectTarget} title="رد قالب پیامک"
|
||||
onClose={() => { setRejectTarget(null); setRejectReason(''); }}
|
||||
footer={
|
||||
<>
|
||||
<button onClick={() => { setRejectTarget(null); setRejectReason(''); }}
|
||||
className="px-4 py-2 border border-gray-300 text-sm text-gray-700 rounded-[10px] hover:bg-gray-50 transition-colors">
|
||||
لغو
|
||||
</button>
|
||||
<button
|
||||
onClick={() => rejectTarget && rejectMutation.mutate({ t: rejectTarget, reason: rejectReason })}
|
||||
disabled={!rejectReason || rejectMutation.isPending}
|
||||
className="px-4 py-2 bg-red-600 text-white text-sm rounded-[10px] hover:bg-red-700 disabled:opacity-50 transition-colors">
|
||||
رد کردن
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">دلیل رد:</label>
|
||||
<textarea value={rejectReason} onChange={(e) => setRejectReason(e.target.value)}
|
||||
rows={4} placeholder="دلیل رد را بنویسید..."
|
||||
className="w-full border border-gray-300 rounded-[10px] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none" />
|
||||
</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