382 lines
15 KiB
TypeScript
382 lines
15 KiB
TypeScript
import React, { useState, useMemo, useEffect } from 'react';
|
||
import { useCustomerDiscountUsageReport } from '../core/_hooks';
|
||
import { CustomerDiscountUsageFilters } from '../core/_models';
|
||
import { Button } from '@/components/ui/Button';
|
||
import { Input } from '@/components/ui/Input';
|
||
import { Table } from '@/components/ui/Table';
|
||
import { TableColumn } from '@/types';
|
||
import { JalaliDateTimePicker } from '@/components/ui/JalaliDateTimePicker';
|
||
import { PageContainer, PageTitle } from '@/components/ui/Typography';
|
||
import { Pagination } from '@/components/ui/Pagination';
|
||
import { Filter, TrendingUp, Users, DollarSign, Hash, X } from 'lucide-react';
|
||
import { formatWithThousands, persianToEnglish } from '@/utils/numberUtils';
|
||
import { formatCurrency, formatDateTime } from '@/utils/formatters';
|
||
import { ReportSkeleton } from '@/components/common/ReportSkeleton';
|
||
import { useSearchUsers, useUsers } from '@/pages/users-admin/core/_hooks';
|
||
import { UserFilters } from '@/pages/users-admin/core/_models';
|
||
|
||
const CustomerDiscountUsagePage = () => {
|
||
const [filters, setFilters] = useState<CustomerDiscountUsageFilters>({
|
||
user_id: 0,
|
||
limit: 50,
|
||
offset: 0,
|
||
});
|
||
|
||
const [tempFilters, setTempFilters] = useState<CustomerDiscountUsageFilters>({
|
||
user_id: 0,
|
||
limit: 50,
|
||
offset: 0,
|
||
});
|
||
|
||
const [refetchKey, setRefetchKey] = useState(0);
|
||
const [userSearchText, setUserSearchText] = useState('');
|
||
const [userSearchDebounced, setUserSearchDebounced] = useState('');
|
||
const [userDropdownOpen, setUserDropdownOpen] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const t = setTimeout(() => setUserSearchDebounced(userSearchText), 300);
|
||
return () => clearTimeout(t);
|
||
}, [userSearchText]);
|
||
|
||
const { data: usersList } = useUsers({ limit: 20, offset: 0 });
|
||
const userSearchFilters = useMemo<UserFilters>(() =>
|
||
userSearchDebounced ? { search_text: userSearchDebounced, limit: 20, offset: 0 } : {}, [userSearchDebounced]);
|
||
const { data: userSearchData } = useSearchUsers(userSearchFilters);
|
||
const userOptions = userSearchDebounced ? (userSearchData?.users || []) : (usersList || []);
|
||
|
||
const filtersWithKey = useMemo(() => ({
|
||
...filters,
|
||
_refetchKey: refetchKey,
|
||
}), [filters, refetchKey]);
|
||
|
||
const { data, isLoading, error } = useCustomerDiscountUsageReport(filtersWithKey as CustomerDiscountUsageFilters & { _refetchKey?: number });
|
||
|
||
const handleTempFilterChange = (key: keyof CustomerDiscountUsageFilters, value: any) => {
|
||
setTempFilters(prev => ({
|
||
...prev,
|
||
[key]: value,
|
||
}));
|
||
};
|
||
|
||
const handleDateRangeChange = (from: string | undefined, to: string | undefined) => {
|
||
setTempFilters(prev => ({
|
||
...prev,
|
||
date_range: {
|
||
from,
|
||
to,
|
||
},
|
||
}));
|
||
};
|
||
|
||
const handleNumericFilterChange = (key: 'discount_id', raw: string) => {
|
||
const converted = persianToEnglish(raw).replace(/[^\d]/g, '');
|
||
const numeric = converted ? Number(converted) : undefined;
|
||
handleTempFilterChange(key, numeric);
|
||
};
|
||
|
||
const handleSelectUser = (user: { id: number; phone_number?: string; first_name?: string; last_name?: string }) => {
|
||
handleTempFilterChange('user_id', user.id);
|
||
setUserSearchText(user.phone_number || `${user.first_name || ''} ${user.last_name || ''}`.trim() || String(user.id));
|
||
setUserDropdownOpen(false);
|
||
};
|
||
|
||
const handleApplyFilters = () => {
|
||
const newFilters = {
|
||
...tempFilters,
|
||
offset: 0,
|
||
};
|
||
setFilters(newFilters);
|
||
setRefetchKey(prev => prev + 1);
|
||
};
|
||
|
||
const handlePageChange = (page: number) => {
|
||
setFilters(prev => ({
|
||
...prev,
|
||
offset: (page - 1) * prev.limit,
|
||
}));
|
||
};
|
||
|
||
const handleClearFilters = () => {
|
||
const clearedFilters = {
|
||
user_id: 0,
|
||
limit: 50,
|
||
offset: 0,
|
||
};
|
||
setTempFilters(clearedFilters);
|
||
setFilters(clearedFilters);
|
||
setUserSearchText('');
|
||
};
|
||
|
||
const columns: TableColumn[] = [
|
||
{
|
||
key: 'discount_code',
|
||
label: 'کد تخفیف',
|
||
align: 'right',
|
||
},
|
||
{
|
||
key: 'discount_name',
|
||
label: 'نام کد تخفیف',
|
||
align: 'right',
|
||
},
|
||
{
|
||
key: 'order_number',
|
||
label: 'شماره سفارش',
|
||
align: 'right',
|
||
},
|
||
{
|
||
key: 'amount',
|
||
label: 'مبلغ تخفیف',
|
||
align: 'right',
|
||
},
|
||
{
|
||
key: 'used_at',
|
||
label: 'زمان استفاده',
|
||
align: 'right',
|
||
},
|
||
];
|
||
|
||
const tableData = (data?.usages || []).map(usage => ({
|
||
discount_code: usage.discount_code,
|
||
discount_name: usage.discount_name,
|
||
order_number: usage.order_number || '-',
|
||
amount: formatCurrency(usage.amount),
|
||
used_at: formatDateTime(usage.used_at),
|
||
}));
|
||
|
||
const currentPage = Math.floor(filters.offset / filters.limit) + 1;
|
||
const totalPages = data ? Math.ceil(data.total / filters.limit) : 1;
|
||
|
||
return (
|
||
<PageContainer>
|
||
<PageTitle>گزارش استفاده کاربر خاص از کدهای تخفیف</PageTitle>
|
||
|
||
{/* Filters */}
|
||
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-4 mb-6">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<div className="flex items-center gap-2">
|
||
<Filter className="h-5 w-5 text-gray-500" />
|
||
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">فیلترها</h3>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Button
|
||
onClick={handleApplyFilters}
|
||
disabled={!tempFilters.user_id || tempFilters.user_id === 0}
|
||
className="flex items-center gap-2"
|
||
>
|
||
<Filter className="h-4 w-4" />
|
||
اعمال فیلترها
|
||
</Button>
|
||
<Button
|
||
variant="secondary"
|
||
size="sm"
|
||
onClick={handleClearFilters}
|
||
className="flex items-center gap-2"
|
||
>
|
||
<X className="h-4 w-4" />
|
||
پاک کردن فیلترها
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
|
||
<p className="text-sm text-blue-800 dark:text-blue-200">
|
||
<span className="font-semibold">توجه:</span> برای مشاهده گزارش، کاربر را از لیست انتخاب کنید یا با شماره موبایل جستجو کنید. این فیلد الزامی است.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||
شناسه کاربر <span className="text-red-500">*</span>
|
||
</label>
|
||
<div className="relative">
|
||
<Input
|
||
value={userSearchText}
|
||
onChange={(e) => {
|
||
setUserSearchText(persianToEnglish(e.target.value));
|
||
setUserDropdownOpen(true);
|
||
if (tempFilters.user_id) handleTempFilterChange('user_id', 0);
|
||
}}
|
||
onFocus={() => setUserDropdownOpen(true)}
|
||
onBlur={() => setTimeout(() => setUserDropdownOpen(false), 150)}
|
||
placeholder="جستجو با شماره موبایل یا انتخاب از لیست"
|
||
/>
|
||
{userDropdownOpen && (
|
||
<div className="absolute z-20 mt-2 w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg max-h-60 overflow-y-auto">
|
||
{(userSearchDebounced ? (userSearchData?.users ?? []) : (usersList ?? [])).length === 0 && (
|
||
<div className="p-3 text-sm text-gray-500 dark:text-gray-400">
|
||
کاربری یافت نشد
|
||
</div>
|
||
)}
|
||
{(userSearchDebounced ? (userSearchData?.users ?? []) : (usersList ?? [])).map((user: { id: number; phone_number?: string; first_name?: string; last_name?: string }) => (
|
||
<button
|
||
key={user.id}
|
||
type="button"
|
||
onMouseDown={(e) => e.preventDefault()}
|
||
onClick={() => handleSelectUser(user)}
|
||
className="w-full text-right px-4 py-2 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||
>
|
||
<div className="text-sm text-gray-900 dark:text-gray-100">
|
||
{user.first_name} {user.last_name}
|
||
</div>
|
||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||
{user.phone_number}
|
||
</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||
کد تخفیف
|
||
</label>
|
||
<Input
|
||
value={tempFilters.discount_code || ''}
|
||
onChange={(e) => handleTempFilterChange('discount_code', e.target.value || undefined)}
|
||
placeholder="مثلاً SUMMER2025"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||
شناسه کد تخفیف
|
||
</label>
|
||
<Input
|
||
value={tempFilters.discount_id?.toString() || ''}
|
||
onChange={(e) => handleNumericFilterChange('discount_id', e.target.value)}
|
||
placeholder="مثلاً 123"
|
||
numeric
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||
تاریخ شروع
|
||
</label>
|
||
<JalaliDateTimePicker
|
||
value={tempFilters.date_range?.from}
|
||
onChange={(value) => handleDateRangeChange(value, tempFilters.date_range?.to)}
|
||
placeholder="انتخاب تاریخ شروع"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||
تاریخ پایان
|
||
</label>
|
||
<JalaliDateTimePicker
|
||
value={tempFilters.date_range?.to}
|
||
onChange={(value) => handleDateRangeChange(tempFilters.date_range?.from, value)}
|
||
placeholder="انتخاب تاریخ پایان"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Summary Cards */}
|
||
{data?.summary && (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||
<div className="flex items-center gap-3">
|
||
<div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
|
||
<Hash className="h-5 w-5 text-blue-600 dark:text-blue-400" />
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-gray-600 dark:text-gray-400">کل استفادهها</p>
|
||
<p className="text-xl font-bold text-gray-900 dark:text-gray-100">
|
||
{formatWithThousands(data.summary.total_usages)}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||
<div className="flex items-center gap-3">
|
||
<div className="p-2 bg-green-100 dark:bg-green-900 rounded-lg">
|
||
<DollarSign className="h-5 w-5 text-green-600 dark:text-green-400" />
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-gray-600 dark:text-gray-400">مجموع تخفیف دریافتی</p>
|
||
<p className="text-xl font-bold text-gray-900 dark:text-gray-100">
|
||
{formatCurrency(data.summary.total_discount_amount)}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||
<div className="flex items-center gap-3">
|
||
<div className="p-2 bg-purple-100 dark:bg-purple-900 rounded-lg">
|
||
<Hash className="h-5 w-5 text-purple-600 dark:text-purple-400" />
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-gray-600 dark:text-gray-400">کدهای متفاوت</p>
|
||
<p className="text-xl font-bold text-gray-900 dark:text-gray-100">
|
||
{formatWithThousands(data.summary.unique_codes)}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||
<div className="flex items-center gap-3">
|
||
<div className="p-2 bg-yellow-100 dark:bg-yellow-900 rounded-lg">
|
||
<TrendingUp className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-gray-600 dark:text-gray-400">میانگین تخفیف هر سفارش</p>
|
||
<p className="text-xl font-bold text-gray-900 dark:text-gray-100">
|
||
{formatCurrency(data.summary.average_discount_per_order)}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Table */}
|
||
{isLoading ? (
|
||
<ReportSkeleton summaryCardCount={4} tableColumnCount={7} />
|
||
) : error ? (
|
||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
|
||
<p className="text-red-600 dark:text-red-400">خطا در دریافت دادهها</p>
|
||
</div>
|
||
) : filters.user_id === 0 ? (
|
||
<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
|
||
<p className="text-yellow-600 dark:text-yellow-400">لطفاً شناسه کاربر را وارد کنید</p>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
|
||
<Table columns={columns} data={tableData} loading={isLoading} />
|
||
</div>
|
||
|
||
{data && data.total > 0 && totalPages > 1 && (
|
||
<div className="mt-4 flex justify-center">
|
||
<Pagination
|
||
currentPage={currentPage}
|
||
totalPages={totalPages}
|
||
onPageChange={handlePageChange}
|
||
itemsPerPage={filters.limit}
|
||
totalItems={data.total}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{data && data.total === 0 && (
|
||
<div className="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-8 text-center">
|
||
<p className="text-gray-600 dark:text-gray-400">دادهای یافت نشد</p>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</PageContainer>
|
||
);
|
||
};
|
||
|
||
export default CustomerDiscountUsagePage;
|
||
|