hosseintaromi
/
admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: replace duplicate components and utilities across pages 

- Replace duplicate skeleton components with TableSkeleton in AdminUsersListPage, ProductOptionsListPage, PermissionsListPage
- Replace duplicate format functions with formatters.ts utilities in OrderDetailPage
- Replace duplicate page headers with PageHeader component
- Replace duplicate empty states with EmptyState component
- Replace duplicate action buttons with ActionButtons component
- Replace duplicate delete modals with DeleteConfirmModal component
- Improve code consistency and maintainability
This commit is contained in:
hosseintaromi 2026-01-08 17:53:42 +03:30
parent 8538d4282e
commit 6dd2429920
4 changed files with 146 additions and 478 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

241
src/pages/admin-users/admin-users-list/AdminUsersListPage.tsx
View File

@ -4,84 +4,14 @@ import { useAdminUsers, useDeleteAdminUser } from '../core/_hooks';
import { AdminUserInfo } from '../core/_models'; import { AdminUserInfo } from '../core/_models';
import { Button } from "@/components/ui/Button"; import { Button } from "@/components/ui/Button";
import { Trash2, Edit3, Plus, Eye, Users, UserPlus } from "lucide-react"; import { Users, UserPlus, Plus } from "lucide-react";
import { Modal } from "@/components/ui/Modal"; import { PageContainer, SectionSubtitle } from '../../../components/ui/Typography';
import { PageContainer, PageTitle, SectionSubtitle } from '../../../components/ui/Typography'; import { TableSkeleton } from '@/components/common/TableSkeleton';
import { PageHeader } from '@/components/layout/PageHeader';
// Skeleton Loading Component import { EmptyState } from '@/components/common/EmptyState';
const AdminUserTableSkeleton = () => ( import { ActionButtons } from '@/components/common/ActionButtons';
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden"> import { DeleteConfirmModal } from '@/components/common/DeleteConfirmModal';
{/* Desktop Table Skeleton */} import { formatDate } from '@/utils/formatters';
<div className="hidden md:block">
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead className="bg-gray-50 dark:bg-gray-700">
<tr>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
نام و نام خانوادگی
</th>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
نام کاربری
</th>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
وضعیت
</th>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
تاریخ ایجاد
</th>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
عملیات
</th>
</tr>
</thead>
<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
{[...Array(5)].map((_, index) => (
<tr key={index} className="animate-pulse">
<td className="px-6 py-4 whitespace-nowrap">
<div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-32"></div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-24"></div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="h-6 bg-gray-300 dark:bg-gray-600 rounded-full w-16"></div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-20"></div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex gap-2">
<div className="h-8 w-8 bg-gray-300 dark:bg-gray-600 rounded"></div>
<div className="h-8 w-8 bg-gray-300 dark:bg-gray-600 rounded"></div>
<div className="h-8 w-8 bg-gray-300 dark:bg-gray-600 rounded"></div>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
{/* Mobile Cards Skeleton */}
<div className="md:hidden p-4 space-y-4">
{[...Array(3)].map((_, index) => (
<div key={index} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 animate-pulse">
<div className="space-y-3">
<div className="h-5 bg-gray-300 dark:bg-gray-600 rounded w-3/4"></div>
<div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-1/2"></div>
<div className="h-6 bg-gray-300 dark:bg-gray-600 rounded-full w-16"></div>
<div className="flex gap-2 pt-2">
<div className="h-8 w-8 bg-gray-300 dark:bg-gray-600 rounded"></div>
<div className="h-8 w-8 bg-gray-300 dark:bg-gray-600 rounded"></div>
<div className="h-8 w-8 bg-gray-300 dark:bg-gray-600 rounded"></div>
</div>
</div>
</div>
))}
</div>
</div>
);
const AdminUsersListPage = () => { const AdminUsersListPage = () => {
const navigate = useNavigate(); const navigate = useNavigate();
@ -136,24 +66,20 @@ const AdminUsersListPage = () => {
return ( return (
<PageContainer> <PageContainer>
{/* Header */} <PageHeader
<div className="flex flex-col space-y-3 sm:flex-row sm:items-center sm:justify-between sm:space-y-0"> title="مدیریت کاربران ادمین"
<div> subtitle="مدیریت کاربران دسترسی به پنل ادمین"
<div className="flex items-center gap-2 mb-2"> icon={Users}
<Users className="h-6 w-6" /> actions={
<PageTitle>مدیریت کاربران ادمین</PageTitle> <button
</div> onClick={handleCreate}
<p className="text-gray-600 dark:text-gray-400">مدیریت کاربران دسترسی به پنل ادمین</p> className="flex items-center justify-center w-12 h-12 bg-primary-600 hover:bg-primary-700 rounded-full transition-colors duration-200 text-white shadow-lg hover:shadow-xl"
</div> title="کاربر ادمین جدید"
>
<button <Plus className="h-5 w-5" />
onClick={handleCreate} </button>
className="flex items-center justify-center w-12 h-12 bg-primary-600 hover:bg-primary-700 rounded-full transition-colors duration-200 text-white shadow-lg hover:shadow-xl" }
title="کاربر ادمین جدید" />
>
<Plus className="h-5 w-5" />
</button>
</div>
{/* Filters */} {/* Filters */}
<SectionSubtitle>فیلترها</SectionSubtitle> <SectionSubtitle>فیلترها</SectionSubtitle>
@ -190,25 +116,24 @@ const AdminUsersListPage = () => {
{/* Users Table */} {/* Users Table */}
{isLoading ? ( {isLoading ? (
<AdminUserTableSkeleton /> <TableSkeleton columns={5} rows={5} />
) : (users || []).length === 0 ? ( ) : (users || []).length === 0 ? (
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg"> <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg">
<div className="text-center py-12"> <EmptyState
<Users className="h-12 w-12 text-gray-400 dark:text-gray-500 mx-auto mb-4" /> icon={Users}
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2"> title="هیچ کاربر ادمین یافت نشد"
هیچ کاربر ادمین یافت نشد description={filters.search || filters.status
</h3> ? "نتیجه‌ای برای جستجوی شما یافت نشد"
<p className="text-gray-600 dark:text-gray-400 mb-4"> : "شما هنوز هیچ کاربر ادمین ایجاد نکرده‌اید"
{filters.search || filters.status }
? "نتیجه‌ای برای جستجوی شما یافت نشد" actionLabel={
: "شما هنوز هیچ کاربر ادمین ایجاد نکرده‌اید" <>
} <UserPlus className="h-4 w-4 ml-2" />
</p> اولین کاربر ادمین را ایجاد کنید
<Button onClick={handleCreate}> </>
<UserPlus className="h-4 w-4 ml-2" /> }
اولین کاربر ادمین را ایجاد کنید onAction={handleCreate}
</Button> />
</div>
</div> </div>
) : ( ) : (
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden"> <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
@ -253,32 +178,14 @@ const AdminUsersListPage = () => {
</span> </span>
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100"> <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
{new Date(user.created_at).toLocaleDateString('fa-IR')} {formatDate(user.created_at)}
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium"> <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div className="flex items-center gap-2"> <ActionButtons
<button onView={() => handleView(user.id)}
onClick={() => handleView(user.id)} onEdit={() => handleEdit(user.id)}
className="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300" onDelete={() => setDeleteUserId(user.id.toString())}
title="مشاهده" />
>
<Eye className="h-4 w-4" />
</button>
<button
onClick={() => handleEdit(user.id)}
className="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300"
title="ویرایش"
>
<Edit3 className="h-4 w-4" />
</button>
<button
onClick={() => setDeleteUserId(user.id.toString())}
className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
title="حذف"
>
<Trash2 className="h-4 w-4" />
</button>
</div>
</td> </td>
</tr> </tr>
))} ))}
@ -308,65 +215,27 @@ const AdminUsersListPage = () => {
</span> </span>
</div> </div>
<div className="text-xs text-gray-500 dark:text-gray-400 mb-3"> <div className="text-xs text-gray-500 dark:text-gray-400 mb-3">
تاریخ ایجاد: {new Date(user.created_at).toLocaleDateString('fa-IR')} تاریخ ایجاد: {formatDate(user.created_at)}
</div>
<div className="flex items-center gap-2">
<button
onClick={() => handleView(user.id)}
className="flex items-center gap-1 px-2 py-1 text-xs text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300"
>
<Eye className="h-3 w-3" />
مشاهده
</button>
<button
onClick={() => handleEdit(user.id)}
className="flex items-center gap-1 px-2 py-1 text-xs text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300"
>
<Edit3 className="h-3 w-3" />
ویرایش
</button>
<button
onClick={() => setDeleteUserId(user.id.toString())}
className="flex items-center gap-1 px-2 py-1 text-xs text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
>
<Trash2 className="h-3 w-3" />
حذف
</button>
</div> </div>
<ActionButtons
onView={() => handleView(user.id)}
onEdit={() => handleEdit(user.id)}
onDelete={() => setDeleteUserId(user.id.toString())}
/>
</div> </div>
))} ))}
</div> </div>
</div> </div>
)} )}
{/* Delete Confirmation Modal */} <DeleteConfirmModal
<Modal
isOpen={!!deleteUserId} isOpen={!!deleteUserId}
onClose={() => setDeleteUserId(null)} onClose={() => setDeleteUserId(null)}
onConfirm={handleDeleteConfirm}
title="حذف کاربر ادمین" title="حذف کاربر ادمین"
> message="آیا از حذف این کاربر ادمین اطمینان دارید؟ این عمل قابل بازگشت نیست."
<div className="space-y-4"> isLoading={isDeleting}
<p className="text-gray-600 dark:text-gray-400"> />
آیا از حذف این کاربر ادمین اطمینان دارید؟ این عمل قابل بازگشت نیست.
</p>
<div className="flex justify-end space-x-2 space-x-reverse">
<Button
variant="secondary"
onClick={() => setDeleteUserId(null)}
disabled={isDeleting}
>
انصراف
</Button>
<Button
variant="danger"
onClick={handleDeleteConfirm}
loading={isDeleting}
>
حذف
</Button>
</div>
</div>
</Modal>
</PageContainer> </PageContainer>
); );
}; };

22
src/pages/orders/order-detail/OrderDetailPage.tsx
View File

@ -21,6 +21,7 @@ import {
} from 'lucide-react'; } from 'lucide-react';
import { englishToPersian } from '@/utils/numberUtils'; import { englishToPersian } from '@/utils/numberUtils';
import { API_GATE_WAY } from '@/constant/routes'; import { API_GATE_WAY } from '@/constant/routes';
import { formatCurrency, formatDateTime } from '@/utils/formatters';
const resolveImageUrl = (imageUrl?: string): string => { const resolveImageUrl = (imageUrl?: string): string => {
if (!imageUrl) return ''; if (!imageUrl) return '';
@ -55,19 +56,6 @@ const getStatusText = (status: OrderStatus) => {
return text[status] || status; return text[status] || status;
}; };
const formatCurrency = (amount: number) => {
return new Intl.NumberFormat('fa-IR').format(amount) + ' تومان';
};
const formatDate = (dateString: string) => {
return new Date(dateString).toLocaleDateString('fa-IR', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
};
const formatPaymentType = (type?: string) => { const formatPaymentType = (type?: string) => {
if (!type) return ''; if (!type) return '';
@ -171,7 +159,7 @@ const OrderDetailPage = () => {
<div> <div>
<PageTitle>سفارش #{order?.order_number || 'نامشخص'}</PageTitle> <PageTitle>سفارش #{order?.order_number || 'نامشخص'}</PageTitle>
<p className="text-gray-600 dark:text-gray-400 mt-1"> <p className="text-gray-600 dark:text-gray-400 mt-1">
تاریخ ثبت: {order?.created_at ? formatDate(order.created_at) : 'نامشخص'} تاریخ ثبت: {order?.created_at ? formatDateTime(order.created_at) : 'نامشخص'}
</p> </p>
</div> </div>
<div className="flex gap-3"> <div className="flex gap-3">
@ -367,7 +355,7 @@ const OrderDetailPage = () => {
</div> </div>
<div> <div>
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">تاریخ ثبت</h4> <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">تاریخ ثبت</h4>
<p className="text-gray-600 dark:text-gray-400">{order?.created_at ? formatDate(order.created_at) : 'نامشخص'}</p> <p className="text-gray-600 dark:text-gray-400">{order?.created_at ? formatDateTime(order.created_at) : 'نامشخص'}</p>
</div> </div>
<div> <div>
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">شناسه فاکتور</h4> <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">شناسه فاکتور</h4>
@ -379,7 +367,7 @@ const OrderDetailPage = () => {
</div> </div>
<div> <div>
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">تاریخ آخرین بروزرسانی</h4> <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">تاریخ آخرین بروزرسانی</h4>
<p className="text-gray-600 dark:text-gray-400">{order?.updated_at ? formatDate(order.updated_at) : 'نامشخص'}</p> <p className="text-gray-600 dark:text-gray-400">{order?.updated_at ? formatDateTime(order.updated_at) : 'نامشخص'}</p>
</div> </div>
{/* روش حمل و نقل در داده‌های فعلی وجود ندارد */} {/* روش حمل و نقل در داده‌های فعلی وجود ندارد */}
{order?.tracking_number && ( {order?.tracking_number && (
@ -391,7 +379,7 @@ const OrderDetailPage = () => {
{order?.estimated_delivery && ( {order?.estimated_delivery && (
<div> <div>
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">تاریخ تحویل تخمینی</h4> <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">تاریخ تحویل تخمینی</h4>
<p className="text-gray-600 dark:text-gray-400">{formatDate(order.estimated_delivery)}</p> <p className="text-gray-600 dark:text-gray-400">{formatDateTime(order.estimated_delivery)}</p>
</div> </div>
)} )}
{order?.shipping_method_id !== undefined && order?.shipping_method_id !== null && ( {order?.shipping_method_id !== undefined && order?.shipping_method_id !== null && (

144
src/pages/permissions/permissions-list/PermissionsListPage.tsx
View File

@ -1,72 +1,12 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { usePermissions } from '../core/_hooks'; import { usePermissions } from '../core/_hooks';
import { Permission } from '../core/_models'; import { Permission } from '../core/_models';
import { Shield } from "lucide-react";
import { Shield, Plus } from "lucide-react"; import { TableSkeleton } from '@/components/common/TableSkeleton';
import { PageHeader } from '@/components/layout/PageHeader';
// Skeleton Loading Component import { EmptyState } from '@/components/common/EmptyState';
const PermissionsTableSkeleton = () => ( import { FiltersSection } from '@/components/common/FiltersSection';
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden"> import { formatDate } from '@/utils/formatters';
{/* Desktop Table Skeleton */}
<div className="hidden md:block">
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead className="bg-gray-50 dark:bg-gray-700">
<tr>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
عنوان
</th>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
توضیحات
</th>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
تاریخ ایجاد
</th>
</tr>
</thead>
<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
{[...Array(5)].map((_, index) => (
<tr key={index} className="animate-pulse">
<td className="px-6 py-4 whitespace-nowrap">
<div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-32"></div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-48"></div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-20"></div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex gap-2">
<div className="h-8 w-8 bg-gray-300 dark:bg-gray-600 rounded"></div>
<div className="h-8 w-8 bg-gray-300 dark:bg-gray-600 rounded"></div>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
{/* Mobile Cards Skeleton */}
<div className="md:hidden p-4 space-y-4">
{[...Array(3)].map((_, index) => (
<div key={index} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 animate-pulse">
<div className="space-y-3">
<div className="h-5 bg-gray-300 dark:bg-gray-600 rounded w-3/4"></div>
<div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full"></div>
<div className="h-3 bg-gray-300 dark:bg-gray-600 rounded w-1/3"></div>
<div className="flex gap-2 pt-2">
<div className="h-8 w-8 bg-gray-300 dark:bg-gray-600 rounded"></div>
<div className="h-8 w-8 bg-gray-300 dark:bg-gray-600 rounded"></div>
</div>
</div>
</div>
))}
</div>
</div>
);
const PermissionsListPage = () => { const PermissionsListPage = () => {
const [filters, setFilters] = useState({ const [filters, setFilters] = useState({
@ -91,54 +31,40 @@ const PermissionsListPage = () => {
return ( return (
<div className="p-6 space-y-6"> <div className="p-6 space-y-6">
{/* Header */} <PageHeader
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"> title="لیست دسترسی‌ها"
<div> subtitle="نمایش دسترسی‌های سیستم"
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2"> icon={Shield}
<Shield className="h-6 w-6" /> />
لیست دسترسی‌ها
</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1">
نمایش دسترسی‌های سیستم
</p>
</div>
</div>
{/* Filters */} <FiltersSection>
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-4"> <div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
<div> جستجو
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> </label>
جستجو <input
</label> type="text"
<input placeholder="جستجو در عنوان یا توضیحات..."
type="text" value={filters.search}
placeholder="جستجو در عنوان یا توضیحات..." onChange={handleSearchChange}
value={filters.search} className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500 dark:bg-gray-700 dark:text-gray-100"
onChange={handleSearchChange} />
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500 dark:bg-gray-700 dark:text-gray-100"
/>
</div>
</div> </div>
</div> </FiltersSection>
{/* Permissions Table */} {/* Permissions Table */}
{isLoading ? ( {isLoading ? (
<PermissionsTableSkeleton /> <TableSkeleton columns={4} rows={5} />
) : (permissions || []).length === 0 ? ( ) : (permissions || []).length === 0 ? (
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg"> <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg">
<div className="text-center py-12"> <EmptyState
<Shield className="h-12 w-12 text-gray-400 dark:text-gray-500 mx-auto mb-4" /> icon={Shield}
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2"> title="هیچ دسترسی یافت نشد"
هیچ دسترسی یافت نشد description={filters.search
</h3> ? "نتیجه‌ای برای جستجوی شما یافت نشد"
<p className="text-gray-600 dark:text-gray-400"> : "دسترسی‌های سیستم در اینجا نمایش داده می‌شوند"
{filters.search }
? "نتیجه‌ای برای جستجوی شما یافت نشد" />
: "دسترسی‌های سیستم در اینجا نمایش داده می‌شوند"
}
</p>
</div>
</div> </div>
) : ( ) : (
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden"> <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
@ -172,7 +98,7 @@ const PermissionsListPage = () => {
{permission.description} {permission.description}
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100"> <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
{new Date(permission.created_at).toLocaleDateString('fa-IR')} {formatDate(permission.created_at)}
</td> </td>
</tr> </tr>
))} ))}
@ -196,7 +122,7 @@ const PermissionsListPage = () => {
</div> </div>
</div> </div>
<div className="text-xs text-gray-500 dark:text-gray-400"> <div className="text-xs text-gray-500 dark:text-gray-400">
تاریخ ایجاد: {new Date(permission.created_at).toLocaleDateString('fa-IR')} تاریخ ایجاد: {formatDate(permission.created_at)}
</div> </div>
</div> </div>
))} ))}

217
src/pages/product-options/product-options-list/ProductOptionsListPage.tsx
View File

@ -2,58 +2,14 @@ import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { useProductOptions, useDeleteProductOption } from '../core/_hooks'; import { useProductOptions, useDeleteProductOption } from '../core/_hooks';
import { ProductOption } from '../core/_models'; import { ProductOption } from '../core/_models';
import { Button } from "@/components/ui/Button"; import { Settings, Tag, Plus } from "lucide-react";
import { TableSkeleton } from '@/components/common/TableSkeleton';
import { Trash2, Edit3, Plus, Settings, Tag } from "lucide-react"; import { PageHeader } from '@/components/layout/PageHeader';
import { Modal } from "@/components/ui/Modal"; import { EmptyState } from '@/components/common/EmptyState';
import { ActionButtons } from '@/components/common/ActionButtons';
const ProductOptionsTableSkeleton = () => ( import { DeleteConfirmModal } from '@/components/common/DeleteConfirmModal';
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden"> import { FiltersSection } from '@/components/common/FiltersSection';
<div className="hidden md:block"> import { formatDate } from '@/utils/formatters';
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead className="bg-gray-50 dark:bg-gray-700">
<tr>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
نام گزینه
</th>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
مقادیر
</th>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
تاریخ ایجاد
</th>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
عملیات
</th>
</tr>
</thead>
<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
{[...Array(5)].map((_, i) => (
<tr key={i}>
<td className="px-6 py-4 whitespace-nowrap">
<div className="h-4 bg-gray-200 dark:bg-gray-600 rounded animate-pulse"></div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="h-4 bg-gray-200 dark:bg-gray-600 rounded animate-pulse"></div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="h-4 bg-gray-200 dark:bg-gray-600 rounded animate-pulse"></div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex gap-2">
<div className="h-8 w-8 bg-gray-200 dark:bg-gray-600 rounded animate-pulse"></div>
<div className="h-8 w-8 bg-gray-200 dark:bg-gray-600 rounded animate-pulse"></div>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
);
const ProductOptionsListPage = () => { const ProductOptionsListPage = () => {
const navigate = useNavigate(); const navigate = useNavigate();
@ -99,47 +55,39 @@ const ProductOptionsListPage = () => {
return ( return (
<div className="p-6 space-y-6"> <div className="p-6 space-y-6">
{/* Header */} <PageHeader
<div className="flex flex-col space-y-3 sm:flex-row sm:items-center sm:justify-between sm:space-y-0"> title="مدیریت گزینه‌های محصول"
<div> subtitle="تنظیمات گزینه‌های قابل انتخاب برای محصولات"
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2"> icon={Settings}
<Settings className="h-6 w-6" /> actions={
مدیریت گزینه‌های محصول <button
</h1> onClick={handleCreate}
<p className="text-gray-600 dark:text-gray-400 mt-1"> className="flex items-center justify-center w-12 h-12 bg-primary-600 hover:bg-primary-700 rounded-full transition-colors duration-200 text-white shadow-lg hover:shadow-xl"
تنظیمات گزینه‌های قابل انتخاب برای محصولات title="گزینه محصول جدید"
</p> >
</div> <Plus className="h-5 w-5" />
<button </button>
onClick={handleCreate} }
className="flex items-center justify-center w-12 h-12 bg-primary-600 hover:bg-primary-700 rounded-full transition-colors duration-200 text-white shadow-lg hover:shadow-xl" />
title="گزینه محصول جدید"
>
<Plus className="h-5 w-5" />
</button>
</div>
{/* Filters */} <FiltersSection>
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-4"> <div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
<div> جستجو
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> </label>
جستجو <input
</label> type="text"
<input placeholder="جستجو در نام گزینه..."
type="text" value={filters.search}
placeholder="جستجو در نام گزینه..." onChange={handleSearchChange}
value={filters.search} className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500 dark:bg-gray-700 dark:text-gray-100"
onChange={handleSearchChange} />
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500 dark:bg-gray-700 dark:text-gray-100"
/>
</div>
</div> </div>
</div> </FiltersSection>
{/* Product Options Table */} {/* Product Options Table */}
{isLoading ? ( {isLoading ? (
<ProductOptionsTableSkeleton /> <TableSkeleton columns={4} rows={5} />
) : ( ) : (
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden"> <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
{/* Desktop Table */} {/* Desktop Table */}
@ -187,25 +135,13 @@ const ProductOptionsListPage = () => {
</div> </div>
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100"> <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
{new Date(option.created_at).toLocaleDateString('fa-IR')} {formatDate(option.created_at)}
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium"> <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div className="flex items-center gap-2"> <ActionButtons
<button onEdit={() => handleEdit(option.id)}
onClick={() => handleEdit(option.id)} onDelete={() => setDeleteOptionId(option.id.toString())}
className="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300" />
title="ویرایش"
>
<Edit3 className="h-4 w-4" />
</button>
<button
onClick={() => setDeleteOptionId(option.id.toString())}
className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
title="حذف"
>
<Trash2 className="h-4 w-4" />
</button>
</div>
</td> </td>
</tr> </tr>
))} ))}
@ -242,77 +178,26 @@ const ProductOptionsListPage = () => {
</div> </div>
</div> </div>
<div className="text-xs text-gray-500 dark:text-gray-400 mb-3"> <div className="text-xs text-gray-500 dark:text-gray-400 mb-3">
تاریخ ایجاد: {new Date(option.created_at).toLocaleDateString('fa-IR')} تاریخ ایجاد: {formatDate(option.created_at)}
</div>
<div className="flex items-center gap-2">
<button
onClick={() => handleEdit(option.id)}
className="flex items-center gap-1 px-2 py-1 text-xs text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300"
>
<Edit3 className="h-3 w-3" />
ویرایش
</button>
<button
onClick={() => setDeleteOptionId(option.id.toString())}
className="flex items-center gap-1 px-2 py-1 text-xs text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
>
<Trash2 className="h-3 w-3" />
حذف
</button>
</div> </div>
<ActionButtons
onEdit={() => handleEdit(option.id)}
onDelete={() => setDeleteOptionId(option.id.toString())}
/>
</div> </div>
))} ))}
</div> </div>
{/* Empty State */}
{(!productOptions || productOptions.length === 0) && !isLoading && (
<div className="text-center py-12">
<Settings className="mx-auto h-12 w-12 text-gray-400" />
<h3 className="mt-2 text-sm font-medium text-gray-900 dark:text-gray-100">
گزینه‌ای موجود نیست
</h3>
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
برای شروع، اولین گزینه محصول خود را ایجاد کنید.
</p>
<div className="mt-6">
<Button onClick={handleCreate} className="flex items-center gap-2 mx-auto">
<Plus className="h-4 w-4" />
ایجاد گزینه جدید
</Button>
</div>
</div>
)}
</div> </div>
)} )}
{/* Delete Confirmation Modal */} <DeleteConfirmModal
<Modal
isOpen={!!deleteOptionId} isOpen={!!deleteOptionId}
onClose={() => setDeleteOptionId(null)} onClose={() => setDeleteOptionId(null)}
onConfirm={handleDeleteConfirm}
title="حذف گزینه محصول" title="حذف گزینه محصول"
> message="آیا از حذف این گزینه محصول اطمینان دارید؟ این عمل قابل بازگشت نیست و ممکن است بر محصولاتی که از این گزینه استفاده می‌کنند تأثیر بگذارد."
<div className="space-y-4"> isLoading={isDeleting}
<p className="text-gray-600 dark:text-gray-400"> />
آیا از حذف این گزینه محصول اطمینان دارید؟ این عمل قابل بازگشت نیست و ممکن است بر محصولاتی که از این گزینه استفاده می‌کنند تأثیر بگذارد.
</p>
<div className="flex justify-end space-x-2 space-x-reverse">
<Button
variant="secondary"
onClick={() => setDeleteOptionId(null)}
disabled={isDeleting}
>
انصراف
</Button>
<Button
variant="danger"
onClick={handleDeleteConfirm}
loading={isDeleting}
>
حذف
</Button>
</div>
</div>
</Modal>
</div> </div>
); );
}; };