Browse Source
feat: add admin panel modules for tours, users, settings, billing, and services
master
feat: add admin panel modules for tours, users, settings, billing, and services
master
42 changed files with 5136 additions and 324 deletions
-
6src/app/router.tsx
-
2src/components/ui/dialog.tsx
-
1src/config/navigation.ts
-
8src/features/billing/components/BillingDetailModal.tsx
-
4src/features/billing/components/ReceiptLightboxDialog.tsx
-
690src/features/services/ServicesPage.tsx
-
104src/features/services/components/DuasServiceView.tsx
-
50src/features/services/components/FaqServiceView.tsx
-
2src/features/services/components/LocationDetailSheet.tsx
-
91src/features/services/components/SimcardFormDialog.tsx
-
65src/features/services/components/SimcardServiceView.tsx
-
84src/features/services/components/StoreServiceView.tsx
-
58src/features/services/components/ZayerGuideServiceView.tsx
-
87src/features/settings/SettingsPage.tsx
-
273src/features/settings/components/AdminManagementTab.tsx
-
103src/features/settings/components/AdminStatsCards.tsx
-
321src/features/settings/components/AdminUserTable.tsx
-
283src/features/settings/components/CreateAdminModal.tsx
-
44src/features/settings/components/NotificationsTab.tsx
-
281src/features/settings/components/SetPasswordModal.tsx
-
108src/features/settings/services/settings-api.ts
-
36src/features/settings/types.ts
-
6src/features/tours/OngoingToursPage.tsx
-
16src/features/tours/ToursPage.tsx
-
26src/features/tours/components/CreateTourDialog.tsx
-
20src/features/tours/components/TourDetailDialog.tsx
-
14src/features/tours/components/TourDetailSheet.tsx
-
2src/features/tours/components/TourTranslationsDialog.tsx
-
239src/features/users/UserDetailPage.tsx
-
822src/features/users/UsersPage.tsx
-
297src/features/users/components/UserFactorsTab.tsx
-
216src/features/users/components/UserProfileTab.tsx
-
236src/features/users/components/UserToursTab.tsx
-
93src/features/users/services/users-api.ts
-
120src/features/users/types.ts
-
3src/icons.tsx
-
17src/index.css
-
8src/lib/date-utils.ts
-
22src/lib/utils.ts
-
172src/locales/ar.json
-
170src/locales/en.json
-
176src/locales/fa.json
@ -0,0 +1,87 @@ |
|||
import * as React from 'react' |
|||
import { useTranslation } from '@/i18n' |
|||
import { Card, CardContent } from '@/components/ui/card' |
|||
import { Badge } from '@/components/ui/badge' |
|||
import { Ic, IconName } from '@/icons' |
|||
import { AdminManagementTab } from './components/AdminManagementTab' |
|||
import { NotificationsTab } from './components/NotificationsTab' |
|||
|
|||
interface SettingsTabConfig { |
|||
id: string |
|||
labelKey: string |
|||
icon: IconName |
|||
isCore?: boolean |
|||
} |
|||
|
|||
const SETTINGS_TABS: SettingsTabConfig[] = [ |
|||
{ id: 'admins', labelKey: 'settings.tabAdmins', icon: 'users', isCore: true }, |
|||
{ id: 'notifications', labelKey: 'settings.tabNotifications', icon: 'bell' }, |
|||
] |
|||
|
|||
export default function SettingsPage() { |
|||
const { t } = useTranslation() |
|||
const [activeTab, setActiveTab] = React.useState<string>('admins') |
|||
|
|||
return ( |
|||
<div className="space-y-6 pt-2 pb-14"> |
|||
{/* ۱. سربرگ اصلی صفحه تنظیمات (مطابق الگوی طراحی جامع عقیله) */} |
|||
<div className="flex flex-col gap-4 rounded-2xl border border-border-soft bg-card/40 p-6 shadow-xs sm:flex-row sm:items-center sm:justify-between backdrop-blur-xs"> |
|||
<div className="space-y-1"> |
|||
<div className="flex items-center gap-2.5"> |
|||
<div className="flex size-9 items-center justify-center rounded-xl bg-primary/10 text-primary"> |
|||
<Ic name="settings" className="size-5" /> |
|||
</div> |
|||
<h1 className="text-xl font-black text-foreground"> |
|||
{t('settings.pageTitle')} |
|||
</h1> |
|||
<Badge |
|||
variant="outline" |
|||
className="border-primary/30 bg-primary/10 text-primary font-bold font-mono text-xs min-w-[65px] justify-center" |
|||
> |
|||
{t('settings.badgeRoleControl')} |
|||
</Badge> |
|||
</div> |
|||
<p className="text-xs text-grey-3"> |
|||
{t('settings.pageSubtitle')} |
|||
</p> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* ۲. نوار تب‌های تفکیک بخش‌های تنظیمات */} |
|||
<div className="flex items-center gap-2 overflow-x-auto pb-2 sm:pb-0 scrollbar-none"> |
|||
{SETTINGS_TABS.map((tab) => { |
|||
const isActive = activeTab === tab.id |
|||
return ( |
|||
<button |
|||
key={tab.id} |
|||
type="button" |
|||
onClick={() => setActiveTab(tab.id)} |
|||
className={`flex items-center gap-2 px-3.5 py-2 rounded-xl text-xs font-bold transition-all whitespace-nowrap border shrink-0 ${ |
|||
isActive |
|||
? 'bg-primary text-white border-primary shadow-xs' |
|||
: 'bg-card/60 text-grey-2 border-border-soft hover:bg-card hover:text-foreground' |
|||
}`}
|
|||
> |
|||
<Ic name={tab.icon} className={`size-4 ${isActive ? 'text-white' : 'text-primary'}`} /> |
|||
<span>{t(tab.labelKey as any)}</span> |
|||
{tab.isCore && ( |
|||
<span |
|||
className={`text-[10px] px-1.5 py-0.2 rounded-md font-bold ${ |
|||
isActive |
|||
? 'bg-white/20 text-white' |
|||
: 'bg-primary/15 text-primary' |
|||
}`}
|
|||
> |
|||
{t('billing.coreTourBadge')} |
|||
</span> |
|||
)} |
|||
</button> |
|||
) |
|||
})} |
|||
</div> |
|||
|
|||
{/* ۳. محتوای تب فعال */} |
|||
{activeTab === 'admins' ? <AdminManagementTab /> : <NotificationsTab />} |
|||
</div> |
|||
) |
|||
} |
|||
@ -0,0 +1,273 @@ |
|||
import * as React from 'react' |
|||
import { useTranslation } from '@/i18n' |
|||
import { Input } from '@/components/ui/input' |
|||
import { Button } from '@/components/ui/button' |
|||
import { Ic } from '@/icons' |
|||
import { AdminStatsCards } from './AdminStatsCards' |
|||
import { AdminUserTable } from './AdminUserTable' |
|||
import { SetPasswordModal } from './SetPasswordModal' |
|||
import { CreateAdminModal } from './CreateAdminModal' |
|||
import { fetchAdminUsers, fetchAdminStats } from '../services/settings-api' |
|||
import type { AdminUserItem, AdminStats } from '../types' |
|||
|
|||
export function AdminManagementTab() { |
|||
const { t } = useTranslation() |
|||
|
|||
const [admins, setAdmins] = React.useState<AdminUserItem[]>([]) |
|||
const [totalCount, setTotalCount] = React.useState(0) |
|||
const [stats, setStats] = React.useState<AdminStats | null>(null) |
|||
const [loading, setLoading] = React.useState(true) |
|||
const [loadingStats, setLoadingStats] = React.useState(true) |
|||
|
|||
// Filters
|
|||
const [search, setSearch] = React.useState('') |
|||
const [debouncedSearch, setDebouncedSearch] = React.useState('') |
|||
const [selectedStatus, setSelectedStatus] = React.useState<string>('all') |
|||
const [offset, setOffset] = React.useState(0) |
|||
const limit = 15 |
|||
|
|||
// Modals state
|
|||
const [selectedAdminForPassword, setSelectedAdminForPassword] = React.useState<AdminUserItem | null>(null) |
|||
const [setPasswordOpen, setSetPasswordOpen] = React.useState(false) |
|||
const [createAdminOpen, setCreateAdminOpen] = React.useState(false) |
|||
|
|||
// Debounce search
|
|||
React.useEffect(() => { |
|||
const timer = setTimeout(() => { |
|||
setDebouncedSearch(search) |
|||
setOffset(0) |
|||
}, 350) |
|||
return () => clearTimeout(timer) |
|||
}, [search]) |
|||
|
|||
const loadStats = React.useCallback(async () => { |
|||
setLoadingStats(true) |
|||
try { |
|||
const data = await fetchAdminStats() |
|||
setStats(data) |
|||
} catch (err) { |
|||
console.error('Failed to load admin stats:', err) |
|||
} finally { |
|||
setLoadingStats(false) |
|||
} |
|||
}, []) |
|||
|
|||
const loadAdmins = React.useCallback(async () => { |
|||
setLoading(true) |
|||
try { |
|||
const res = await fetchAdminUsers({ |
|||
search: debouncedSearch, |
|||
is_active: selectedStatus === 'all' ? undefined : selectedStatus === 'active' ? 'true' : 'false', |
|||
limit, |
|||
offset, |
|||
}) |
|||
setAdmins(res.results || []) |
|||
setTotalCount(res.count || 0) |
|||
} catch (err) { |
|||
console.error('Failed to load admin users:', err) |
|||
setAdmins([]) |
|||
setTotalCount(0) |
|||
} finally { |
|||
setLoading(false) |
|||
} |
|||
}, [debouncedSearch, selectedStatus, offset]) |
|||
|
|||
React.useEffect(() => { |
|||
loadStats() |
|||
}, [loadStats]) |
|||
|
|||
React.useEffect(() => { |
|||
loadAdmins() |
|||
}, [loadAdmins]) |
|||
|
|||
const handleOpenSetPassword = (admin: AdminUserItem) => { |
|||
setSelectedAdminForPassword(admin) |
|||
setSetPasswordOpen(true) |
|||
} |
|||
|
|||
const handlePasswordUpdated = (adminId: number, newPassword: string) => { |
|||
setAdmins((prev) => |
|||
prev.map((adm) => |
|||
adm.id === adminId ? { ...adm, available_password: newPassword } : adm |
|||
) |
|||
) |
|||
} |
|||
|
|||
const handleAdminUpdated = (updatedAdmin: AdminUserItem) => { |
|||
setAdmins((prev) => |
|||
prev.map((adm) => (adm.id === updatedAdmin.id ? { ...adm, ...updatedAdmin } : adm)) |
|||
) |
|||
loadStats() |
|||
} |
|||
|
|||
const handleAdminCreated = (newAdmin: AdminUserItem) => { |
|||
setAdmins((prev) => [newAdmin, ...prev]) |
|||
setTotalCount((prev) => prev + 1) |
|||
loadStats() |
|||
} |
|||
|
|||
return ( |
|||
<div className="space-y-5"> |
|||
{/* کارت‌های شاخص آمار و تعداد ادمین‌ها */} |
|||
<AdminStatsCards stats={stats} loading={loadingStats} /> |
|||
|
|||
{/* نوار جستجو، فیلترها و دکمه افزودن مدیر جدید */} |
|||
<div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3 bg-card p-3 rounded-2xl border border-border-soft"> |
|||
<div className="flex flex-1 items-center gap-2"> |
|||
{/* فیلد جستجوی زنده */} |
|||
<div className="relative flex-1 max-w-md"> |
|||
<Input |
|||
value={search} |
|||
onChange={(e) => setSearch(e.target.value)} |
|||
placeholder={t('settings.searchAdminsPlaceholder')} |
|||
className="ps-9 h-9 text-xs" |
|||
/> |
|||
<Ic |
|||
name="search" |
|||
className="absolute start-3 top-1/2 -translate-y-1/2 size-4 text-grey-3 pointer-events-none" |
|||
/> |
|||
{search && ( |
|||
<button |
|||
type="button" |
|||
onClick={() => setSearch('')} |
|||
className="absolute end-2.5 top-1/2 -translate-y-1/2 text-grey-3 hover:text-foreground cursor-pointer" |
|||
> |
|||
<Ic name="x" className="size-3.5" /> |
|||
</button> |
|||
)} |
|||
</div> |
|||
|
|||
{/* فیلتر وضعیت */} |
|||
<div className="flex items-center gap-1 bg-muted/60 p-0.5 rounded-xl border border-border-soft text-xs"> |
|||
<button |
|||
type="button" |
|||
onClick={() => { |
|||
setSelectedStatus('all') |
|||
setOffset(0) |
|||
}} |
|||
className={`px-3 py-1.5 rounded-lg font-bold transition-colors cursor-pointer ${ |
|||
selectedStatus === 'all' |
|||
? 'bg-card text-foreground shadow-xs' |
|||
: 'text-grey-3 hover:text-foreground' |
|||
}`}
|
|||
> |
|||
{t('users.filterAll')} |
|||
</button> |
|||
<button |
|||
type="button" |
|||
onClick={() => { |
|||
setSelectedStatus('active') |
|||
setOffset(0) |
|||
}} |
|||
className={`px-3 py-1.5 rounded-lg font-bold transition-colors cursor-pointer ${ |
|||
selectedStatus === 'active' |
|||
? 'bg-card text-emerald-600 dark:text-emerald-400 shadow-xs' |
|||
: 'text-grey-3 hover:text-foreground' |
|||
}`}
|
|||
> |
|||
{t('users.filterActive')} |
|||
</button> |
|||
<button |
|||
type="button" |
|||
onClick={() => { |
|||
setSelectedStatus('inactive') |
|||
setOffset(0) |
|||
}} |
|||
className={`px-3 py-1.5 rounded-lg font-bold transition-colors cursor-pointer ${ |
|||
selectedStatus === 'inactive' |
|||
? 'bg-card text-rose-500 shadow-xs' |
|||
: 'text-grey-3 hover:text-foreground' |
|||
}`}
|
|||
> |
|||
{t('users.filterInactive')} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* دکمه‌های اکشن: افزودن مدیر + تازه‌سازی */} |
|||
<div className="flex items-center gap-2 shrink-0"> |
|||
<Button |
|||
type="button" |
|||
variant="outline" |
|||
size="sm" |
|||
onClick={() => { |
|||
loadAdmins() |
|||
loadStats() |
|||
}} |
|||
disabled={loading} |
|||
className="h-9 px-3 gap-1.5 border-border-soft text-grey-2 hover:text-foreground" |
|||
title={t('settings.refreshTooltip')} |
|||
> |
|||
<Ic name="refresh" className={`size-3.5 ${loading ? 'animate-spin' : ''}`} /> |
|||
<span className="hidden md:inline">{t('settings.refreshBtn')}</span> |
|||
</Button> |
|||
|
|||
<Button |
|||
type="button" |
|||
size="sm" |
|||
onClick={() => setCreateAdminOpen(true)} |
|||
className="h-9 px-3.5 gap-1.5 bg-primary text-white hover:bg-primary/90 text-xs font-bold shadow-xs cursor-pointer" |
|||
> |
|||
<Ic name="plus" className="size-4" /> |
|||
<span>{t('settings.addAdminBtn')}</span> |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* جدول نمایش ادمین‌ها */} |
|||
<AdminUserTable |
|||
admins={admins} |
|||
loading={loading} |
|||
onSetPassword={handleOpenSetPassword} |
|||
onAdminUpdated={handleAdminUpdated} |
|||
/> |
|||
|
|||
{/* پیجینیشن صفحه‌بندی */} |
|||
{totalCount > limit && ( |
|||
<div className="flex items-center justify-between pt-2 text-xs text-muted-foreground"> |
|||
<p> |
|||
{t('users.page')} {Math.floor(offset / limit) + 1} {t('users.of')}{' '} |
|||
{Math.ceil(totalCount / limit)} ({totalCount} {t('settings.adminsCountLabel')}) |
|||
</p> |
|||
<div className="flex items-center gap-1.5"> |
|||
<Button |
|||
type="button" |
|||
variant="outline" |
|||
size="sm" |
|||
disabled={offset === 0 || loading} |
|||
onClick={() => setOffset((prev) => Math.max(0, prev - limit))} |
|||
className="h-8 text-xs border-border-soft" |
|||
> |
|||
{t('users.previous')} |
|||
</Button> |
|||
<Button |
|||
type="button" |
|||
variant="outline" |
|||
size="sm" |
|||
disabled={offset + limit >= totalCount || loading} |
|||
onClick={() => setOffset((prev) => prev + limit)} |
|||
className="h-8 text-xs border-border-soft" |
|||
> |
|||
{t('users.next')} |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
)} |
|||
|
|||
{/* مودال تعیین و تغییر رمز عبور */} |
|||
<SetPasswordModal |
|||
admin={selectedAdminForPassword} |
|||
open={setPasswordOpen} |
|||
onOpenChange={setSetPasswordOpen} |
|||
onSuccess={handlePasswordUpdated} |
|||
/> |
|||
|
|||
{/* مودال ایجاد ادمین جدید */} |
|||
<CreateAdminModal |
|||
open={createAdminOpen} |
|||
onOpenChange={setCreateAdminOpen} |
|||
onSuccess={handleAdminCreated} |
|||
/> |
|||
</div> |
|||
) |
|||
} |
|||
@ -0,0 +1,103 @@ |
|||
import * as React from 'react' |
|||
import { useTranslation } from '@/i18n' |
|||
import { Card, CardContent } from '@/components/ui/card' |
|||
import { Ic } from '@/icons' |
|||
import { ShimmerBox } from '@/components/ui/shimmer' |
|||
import type { AdminStats } from '../types' |
|||
|
|||
interface AdminStatsCardsProps { |
|||
stats: AdminStats | null |
|||
loading: boolean |
|||
} |
|||
|
|||
export function AdminStatsCards({ stats, loading }: AdminStatsCardsProps) { |
|||
const { t } = useTranslation() |
|||
|
|||
return ( |
|||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4"> |
|||
{/* ۱. کل مدیران سیستم */} |
|||
<Card className="border-border-soft bg-card/40 shadow-xs"> |
|||
<CardContent className="p-4 flex items-center justify-between"> |
|||
<div> |
|||
<p className="text-[11px] sm:text-xs text-grey-3 font-medium"> |
|||
{t('settings.kpiTotalAdmins')} |
|||
</p> |
|||
{loading && !stats ? ( |
|||
<ShimmerBox width={48} height={24} rounded="md" className="mt-1.5" /> |
|||
) : ( |
|||
<p className="text-xl sm:text-2xl font-black mt-1 font-mono tabular-nums text-foreground"> |
|||
{stats?.staff_users ?? 0} |
|||
</p> |
|||
)} |
|||
</div> |
|||
<div className="size-10 rounded-xl bg-muted/60 flex items-center justify-center text-muted-foreground"> |
|||
<Ic name="users" className="size-5" /> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
|
|||
{/* ۲. مدیران فعال */} |
|||
<Card className="border-emerald-500/20 bg-emerald-500/5 shadow-xs"> |
|||
<CardContent className="p-4 flex items-center justify-between"> |
|||
<div> |
|||
<p className="text-[11px] sm:text-xs text-emerald-600 dark:text-emerald-400 font-medium"> |
|||
{t('settings.kpiActiveAdmins')} |
|||
</p> |
|||
{loading && !stats ? ( |
|||
<ShimmerBox width={48} height={24} rounded="md" className="mt-1.5" /> |
|||
) : ( |
|||
<p className="text-xl sm:text-2xl font-black mt-1 font-mono tabular-nums text-emerald-600 dark:text-emerald-400"> |
|||
{stats?.active_staff_users ?? 0} |
|||
</p> |
|||
)} |
|||
</div> |
|||
<div className="size-10 rounded-xl bg-emerald-500/10 flex items-center justify-center text-emerald-600 dark:text-emerald-400"> |
|||
<Ic name="checkCircle" className="size-5" /> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
|
|||
{/* ۳. مدیران ارشد (سوپراوزر) */} |
|||
<Card className="border-primary/20 bg-primary/5 shadow-xs"> |
|||
<CardContent className="p-4 flex items-center justify-between"> |
|||
<div> |
|||
<p className="text-[11px] sm:text-xs text-primary font-medium"> |
|||
{t('settings.kpiSuperusers')} |
|||
</p> |
|||
{loading && !stats ? ( |
|||
<ShimmerBox width={48} height={24} rounded="md" className="mt-1.5" /> |
|||
) : ( |
|||
<p className="text-xl sm:text-2xl font-black mt-1 font-mono tabular-nums text-primary"> |
|||
{stats?.superusers_count ?? 0} |
|||
</p> |
|||
)} |
|||
</div> |
|||
<div className="size-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary"> |
|||
<Ic name="shield" className="size-5" /> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
|
|||
{/* ۴. مدیران غیرفعال */} |
|||
<Card className="border-border-soft bg-card/40 shadow-xs"> |
|||
<CardContent className="p-4 flex items-center justify-between"> |
|||
<div> |
|||
<p className="text-[11px] sm:text-xs text-grey-3 font-medium"> |
|||
{t('settings.kpiInactiveAdmins')} |
|||
</p> |
|||
{loading && !stats ? ( |
|||
<ShimmerBox width={48} height={24} rounded="md" className="mt-1.5" /> |
|||
) : ( |
|||
<p className="text-xl sm:text-2xl font-black mt-1 font-mono tabular-nums text-muted-foreground"> |
|||
{stats?.inactive_staff_users ?? 0} |
|||
</p> |
|||
)} |
|||
</div> |
|||
<div className="size-10 rounded-xl bg-muted/60 flex items-center justify-center text-muted-foreground"> |
|||
<Ic name="xCircle" className="size-5" /> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
</div> |
|||
) |
|||
} |
|||
@ -0,0 +1,321 @@ |
|||
import * as React from 'react' |
|||
import { Link } from 'react-router-dom' |
|||
import { useTranslation } from '@/i18n' |
|||
import { Button } from '@/components/ui/button' |
|||
import { Ic } from '@/icons' |
|||
import { ShimmerBox } from '@/components/ui/shimmer' |
|||
import { toast } from '@/stores/toast' |
|||
import { updateAdminUser } from '../services/settings-api' |
|||
import type { AdminUserItem } from '../types' |
|||
|
|||
interface AdminUserTableProps { |
|||
admins: AdminUserItem[] |
|||
loading: boolean |
|||
onSetPassword: (admin: AdminUserItem) => void |
|||
onAdminUpdated: (updatedAdmin: AdminUserItem) => void |
|||
} |
|||
|
|||
export function AdminUserTable({ |
|||
admins, |
|||
loading, |
|||
onSetPassword, |
|||
onAdminUpdated, |
|||
}: AdminUserTableProps) { |
|||
const { t } = useTranslation() |
|||
const [togglingId, setTogglingId] = React.useState<number | null>(null) |
|||
const [copiedId, setCopiedId] = React.useState<number | null>(null) |
|||
const [revealedIds, setRevealedIds] = React.useState<Record<number, boolean>>({}) |
|||
|
|||
const handleToggleStatus = async (admin: AdminUserItem) => { |
|||
setTogglingId(admin.id) |
|||
const newStatus = !admin.is_active |
|||
const adminName = admin.fullname || admin.email || admin.phone_number || '' |
|||
try { |
|||
const updated = await updateAdminUser(admin.id, { is_active: newStatus }) |
|||
toast.success( |
|||
newStatus |
|||
? t('settings.adminActivatedNotice', { name: adminName }) |
|||
: t('settings.adminDeactivatedNotice', { name: adminName }), |
|||
t('settings.statusUpdatedTitle') |
|||
) |
|||
onAdminUpdated(updated) |
|||
} catch (err: any) { |
|||
toast.error(err?.message || t('settings.errorStatusToggleFailed')) |
|||
} finally { |
|||
setTogglingId(null) |
|||
} |
|||
} |
|||
|
|||
const handleCopyPassword = (admin: AdminUserItem) => { |
|||
if (admin.available_password) { |
|||
navigator.clipboard.writeText(admin.available_password) |
|||
setCopiedId(admin.id) |
|||
toast.success(t('settings.passwordCopiedSuccess')) |
|||
setTimeout(() => setCopiedId(null), 2000) |
|||
} |
|||
} |
|||
|
|||
const toggleRevealPassword = (id: number) => { |
|||
setRevealedIds((prev) => ({ ...prev, [id]: !prev[id] })) |
|||
} |
|||
|
|||
const formatDate = (isoString?: string | null) => { |
|||
if (!isoString) return '—' |
|||
try { |
|||
const date = new Date(isoString) |
|||
return new Intl.DateTimeFormat('fa-IR', { |
|||
dateStyle: 'medium', |
|||
timeStyle: 'short', |
|||
}).format(date) |
|||
} catch { |
|||
return isoString |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<div className="rounded-2xl border border-border-soft bg-card overflow-hidden shadow-xs"> |
|||
<div className="overflow-x-auto"> |
|||
<table className="w-full text-start text-xs border-collapse"> |
|||
<thead> |
|||
<tr className="border-b border-border-soft bg-muted/30 text-grey-2"> |
|||
<th className="py-3.5 px-4 text-start font-bold">{t('settings.colAdmin')}</th> |
|||
<th className="py-3.5 px-4 text-start font-bold">{t('settings.colContact')}</th> |
|||
<th className="py-3.5 px-4 text-center font-bold">{t('settings.colRole')}</th> |
|||
<th className="py-3.5 px-4 text-center font-bold">{t('settings.colStatus')}</th> |
|||
<th className="py-3.5 px-4 text-center font-bold">{t('settings.colPassword')}</th> |
|||
<th className="py-3.5 px-4 text-start font-bold">{t('settings.colDateJoined')}</th> |
|||
<th className="py-3.5 px-4 text-end font-bold">{t('settings.colActions')}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody className="divide-y divide-border-soft/60"> |
|||
{loading ? ( |
|||
Array.from({ length: 4 }).map((_, idx) => ( |
|||
<tr key={idx} className="animate-pulse"> |
|||
<td className="p-4"> |
|||
<div className="flex items-center gap-3"> |
|||
<ShimmerBox width={36} height={36} rounded="full" /> |
|||
<div className="space-y-1.5"> |
|||
<ShimmerBox width={100} height={14} rounded="md" /> |
|||
<ShimmerBox width={60} height={10} rounded="md" /> |
|||
</div> |
|||
</div> |
|||
</td> |
|||
<td className="p-4"> |
|||
<ShimmerBox width={120} height={14} rounded="md" /> |
|||
</td> |
|||
<td className="p-4 text-center"> |
|||
<ShimmerBox width={70} height={20} rounded="full" className="mx-auto" /> |
|||
</td> |
|||
<td className="p-4 text-center"> |
|||
<ShimmerBox width={60} height={20} rounded="full" className="mx-auto" /> |
|||
</td> |
|||
<td className="p-4 text-center"> |
|||
<ShimmerBox width={90} height={20} rounded="md" className="mx-auto" /> |
|||
</td> |
|||
<td className="p-4"> |
|||
<ShimmerBox width={80} height={14} rounded="md" /> |
|||
</td> |
|||
<td className="p-4 text-end"> |
|||
<ShimmerBox width={90} height={28} rounded="lg" className="ms-auto" /> |
|||
</td> |
|||
</tr> |
|||
)) |
|||
) : admins.length === 0 ? ( |
|||
<tr> |
|||
<td colSpan={7} className="py-12 text-center text-muted-foreground"> |
|||
<div className="flex flex-col items-center justify-center gap-2"> |
|||
<div className="size-12 rounded-2xl bg-muted/60 flex items-center justify-center text-muted-foreground"> |
|||
<Ic name="users" className="size-6" /> |
|||
</div> |
|||
<p className="text-sm font-bold text-foreground"> |
|||
{t('settings.noAdminsFoundTitle')} |
|||
</p> |
|||
<p className="text-xs text-muted-foreground"> |
|||
{t('settings.noAdminsFoundDesc')} |
|||
</p> |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
) : ( |
|||
admins.map((admin) => { |
|||
const isRevealed = !!revealedIds[admin.id] |
|||
const isToggling = togglingId === admin.id |
|||
|
|||
return ( |
|||
<tr |
|||
key={admin.id} |
|||
className="hover:bg-muted/30 transition-colors group" |
|||
> |
|||
{/* ۱. ادمین */} |
|||
<td className="py-3.5 px-4"> |
|||
<div className="flex items-center gap-3"> |
|||
<div className="size-9 rounded-xl bg-primary/10 text-primary flex items-center justify-center font-bold text-xs shrink-0 border border-primary/20"> |
|||
{admin.avatar ? ( |
|||
<img |
|||
src={admin.avatar} |
|||
alt={admin.fullname} |
|||
className="size-full rounded-xl object-cover" |
|||
/> |
|||
) : ( |
|||
(admin.fullname || admin.email || 'A').charAt(0).toUpperCase() |
|||
)} |
|||
</div> |
|||
<div> |
|||
<div className="flex items-center gap-1.5"> |
|||
<span className="font-bold text-foreground"> |
|||
{admin.fullname || t('users.unnamedUser')} |
|||
</span> |
|||
<span className="text-[10px] text-muted-foreground font-mono"> |
|||
#{admin.id} |
|||
</span> |
|||
</div> |
|||
{admin.last_login && ( |
|||
<p className="text-[10px] text-muted-foreground mt-0.5"> |
|||
{t('users.lastLogin')}: {formatDate(admin.last_login)} |
|||
</p> |
|||
)} |
|||
</div> |
|||
</div> |
|||
</td> |
|||
|
|||
{/* ۲. تماس و ارتباط */} |
|||
<td className="py-3.5 px-4 font-mono text-[11px] text-muted-foreground"> |
|||
{admin.email && ( |
|||
<div className="text-foreground font-medium" dir="ltr"> |
|||
{admin.email} |
|||
</div> |
|||
)} |
|||
{admin.phone_number && ( |
|||
<div className="text-grey-3 mt-0.5" dir="ltr"> |
|||
{admin.phone_number} |
|||
</div> |
|||
)} |
|||
{!admin.email && !admin.phone_number && '—'} |
|||
</td> |
|||
|
|||
{/* ۳. نقش */} |
|||
<td className="py-3.5 px-4 text-center"> |
|||
<span |
|||
className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold ${ |
|||
admin.is_superuser |
|||
? 'bg-primary/15 text-primary border border-primary/25' |
|||
: 'bg-blue-500/15 text-blue-600 dark:text-blue-400 border border-blue-500/25' |
|||
}`}
|
|||
> |
|||
<Ic |
|||
name={admin.is_superuser ? 'shield' : 'user'} |
|||
className="size-3" |
|||
/> |
|||
<span> |
|||
{admin.is_superuser |
|||
? t('users.admin') |
|||
: t('settings.roleStaff')} |
|||
</span> |
|||
</span> |
|||
</td> |
|||
|
|||
{/* ۴. وضعیت فعال/غیرفعال */} |
|||
<td className="py-3.5 px-4 text-center"> |
|||
<button |
|||
type="button" |
|||
onClick={() => handleToggleStatus(admin)} |
|||
disabled={isToggling} |
|||
className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold transition-all cursor-pointer ${ |
|||
admin.is_active |
|||
? 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/25 border border-emerald-500/20' |
|||
: 'bg-muted text-muted-foreground hover:bg-muted/80 border border-border-soft' |
|||
}`}
|
|||
title={t('settings.toggleStatusTooltip')} |
|||
> |
|||
{isToggling ? ( |
|||
<div className="size-2.5 border-2 border-current border-t-transparent rounded-full animate-spin" /> |
|||
) : ( |
|||
<div |
|||
className={`size-1.5 rounded-full ${ |
|||
admin.is_active ? 'bg-emerald-500 animate-pulse' : 'bg-grey-3' |
|||
}`}
|
|||
/> |
|||
)} |
|||
<span> |
|||
{admin.is_active ? t('users.filterActive') : t('users.filterInactive')} |
|||
</span> |
|||
</button> |
|||
</td> |
|||
|
|||
{/* ۵. رمز عبور / رمز در دسترس */} |
|||
<td className="py-3.5 px-4 text-center"> |
|||
{admin.available_password ? ( |
|||
<div className="inline-flex items-center gap-1.5 bg-muted/60 border border-border-soft px-2.5 py-1 rounded-lg"> |
|||
<Ic name="lock" className="size-3 text-grey-3 shrink-0" /> |
|||
<span className="font-mono text-[11px] font-bold text-foreground" dir="ltr"> |
|||
{isRevealed ? admin.available_password : '••••••••'} |
|||
</span> |
|||
<button |
|||
type="button" |
|||
onClick={() => toggleRevealPassword(admin.id)} |
|||
className="text-grey-3 hover:text-foreground transition-colors cursor-pointer p-0.5" |
|||
title={isRevealed ? t('auth.hidePassword') : t('auth.showPassword')} |
|||
> |
|||
<Ic name={isRevealed ? 'eyeOff' : 'eye'} className="size-3.5" /> |
|||
</button> |
|||
<button |
|||
type="button" |
|||
onClick={() => handleCopyPassword(admin)} |
|||
className="text-grey-3 hover:text-primary transition-colors cursor-pointer p-0.5" |
|||
title={t('settings.copyPasswordTooltip')} |
|||
> |
|||
<Ic |
|||
name={copiedId === admin.id ? 'check' : 'copy'} |
|||
className="size-3.5" |
|||
/> |
|||
</button> |
|||
</div> |
|||
) : ( |
|||
<span className="inline-flex items-center gap-1 text-[11px] text-muted-foreground"> |
|||
<Ic name="lock" className="size-3" /> |
|||
<span>{t('settings.passwordCustomOrEncrypted')}</span> |
|||
</span> |
|||
)} |
|||
</td> |
|||
|
|||
{/* ۶. تاریخ ثبت */} |
|||
<td className="py-3.5 px-4 text-start font-mono text-[11px] text-muted-foreground whitespace-nowrap"> |
|||
{formatDate(admin.date_joined)} |
|||
</td> |
|||
|
|||
{/* ۷. دکمه‌های عملیات */} |
|||
<td className="py-3.5 px-4 text-end"> |
|||
<div className="flex items-center justify-end gap-1.5"> |
|||
<Button |
|||
type="button" |
|||
size="sm" |
|||
variant="outline" |
|||
onClick={() => onSetPassword(admin)} |
|||
className="h-8 px-2.5 text-xs font-bold gap-1.5 border-border-soft hover:bg-primary/10 hover:text-primary hover:border-primary/30" |
|||
title={t('settings.setPasswordTooltip')} |
|||
> |
|||
<Ic name="key" className="size-3.5 text-primary" /> |
|||
<span className="hidden sm:inline"> |
|||
{t('settings.setPasswordAction')} |
|||
</span> |
|||
</Button> |
|||
|
|||
<Link |
|||
to={`/users/${admin.id}`} |
|||
className="h-8 size-8 flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-pointer" |
|||
title={t('settings.viewUserProfileTooltip')} |
|||
> |
|||
<Ic name="external" className="size-3.5" /> |
|||
</Link> |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
) |
|||
}) |
|||
)} |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
@ -0,0 +1,283 @@ |
|||
import * as React from 'react' |
|||
import { useTranslation } from '@/i18n' |
|||
import { |
|||
Dialog, |
|||
DialogContent, |
|||
DialogHeader, |
|||
DialogTitle, |
|||
DialogDescription, |
|||
DialogFooter, |
|||
} from '@/components/ui/dialog' |
|||
import { Button } from '@/components/ui/button' |
|||
import { Input } from '@/components/ui/input' |
|||
import { Switch } from '@/components/ui/switch' |
|||
import { Ic } from '@/icons' |
|||
import { toast } from '@/stores/toast' |
|||
import { createAdminUser } from '../services/settings-api' |
|||
import type { AdminUserItem } from '../types' |
|||
|
|||
interface CreateAdminModalProps { |
|||
open: boolean |
|||
onOpenChange: (open: boolean) => void |
|||
onSuccess: (newAdmin: AdminUserItem) => void |
|||
} |
|||
|
|||
export function CreateAdminModal({ |
|||
open, |
|||
onOpenChange, |
|||
onSuccess, |
|||
}: CreateAdminModalProps) { |
|||
const { t } = useTranslation() |
|||
|
|||
const [fullname, setFullname] = React.useState('') |
|||
const [email, setEmail] = React.useState('') |
|||
const [phoneNumber, setPhoneNumber] = React.useState('') |
|||
const [password, setPassword] = React.useState('') |
|||
const [isSuperuser, setIsSuperuser] = React.useState(false) |
|||
const [isActive, setIsActive] = React.useState(true) |
|||
const [showPassword, setShowPassword] = React.useState(false) |
|||
const [submitting, setSubmitting] = React.useState(false) |
|||
|
|||
React.useEffect(() => { |
|||
if (open) { |
|||
setFullname('') |
|||
setEmail('') |
|||
setPhoneNumber('') |
|||
setPassword('') |
|||
setIsSuperuser(false) |
|||
setIsActive(true) |
|||
setShowPassword(false) |
|||
} |
|||
}, [open]) |
|||
|
|||
const generateStrongPassword = () => { |
|||
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789!@#$%^&*' |
|||
let result = '' |
|||
for (let i = 0; i < 12; i++) { |
|||
result += chars.charAt(Math.floor(Math.random() * chars.length)) |
|||
} |
|||
setPassword(result) |
|||
setShowPassword(true) |
|||
toast.info(t('settings.passwordGeneratedNotice'), t('settings.generatedPasswordTitle')) |
|||
} |
|||
|
|||
const handleSubmit = async (e: React.FormEvent) => { |
|||
e.preventDefault() |
|||
|
|||
const trimmedName = fullname.trim() |
|||
const trimmedEmail = email.trim() |
|||
const trimmedPhone = phoneNumber.trim() |
|||
const trimmedPassword = password.trim() |
|||
|
|||
if (!trimmedName) { |
|||
toast.error(t('settings.errorNameRequired')) |
|||
return |
|||
} |
|||
|
|||
if (!trimmedEmail && !trimmedPhone) { |
|||
toast.error(t('settings.errorEmailOrPhoneRequired')) |
|||
return |
|||
} |
|||
|
|||
if (!trimmedPassword || trimmedPassword.length < 6) { |
|||
toast.error(t('settings.errorPasswordMinLength')) |
|||
return |
|||
} |
|||
|
|||
setSubmitting(true) |
|||
try { |
|||
const created = await createAdminUser({ |
|||
fullname: trimmedName, |
|||
email: trimmedEmail || undefined, |
|||
phone_number: trimmedPhone || undefined, |
|||
password: trimmedPassword, |
|||
is_staff: true, |
|||
is_superuser: isSuperuser, |
|||
is_active: isActive, |
|||
}) |
|||
|
|||
toast.success( |
|||
t('settings.adminCreatedSuccess', { name: created.fullname || trimmedName }), |
|||
t('settings.successTitle') |
|||
) |
|||
onSuccess(created) |
|||
onOpenChange(false) |
|||
} catch (err: any) { |
|||
toast.error(err?.message || t('settings.errorAdminCreateFailed')) |
|||
} finally { |
|||
setSubmitting(false) |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<Dialog open={open} onOpenChange={onOpenChange}> |
|||
<DialogContent className="max-w-[520px] p-0 overflow-hidden"> |
|||
<DialogHeader className="p-5 pb-4 border-b border-border-soft bg-card/60"> |
|||
<div className="flex items-center gap-3"> |
|||
<div className="size-10 rounded-xl bg-primary/10 text-primary flex items-center justify-center shrink-0"> |
|||
<Ic name="users" className="size-5" /> |
|||
</div> |
|||
<div> |
|||
<DialogTitle className="text-base font-bold text-foreground"> |
|||
{t('settings.createAdminModalTitle')} |
|||
</DialogTitle> |
|||
<DialogDescription className="text-xs text-muted-foreground mt-0.5"> |
|||
{t('settings.createAdminModalDesc')} |
|||
</DialogDescription> |
|||
</div> |
|||
</div> |
|||
</DialogHeader> |
|||
|
|||
<form onSubmit={handleSubmit} className="p-5 space-y-4"> |
|||
{/* نام و نام خانوادگی */} |
|||
<div className="space-y-1.5"> |
|||
<label className="text-xs font-medium text-foreground"> |
|||
{t('settings.adminFullnameLabel')} <span className="text-rose-500">*</span> |
|||
</label> |
|||
<Input |
|||
value={fullname} |
|||
onChange={(e) => setFullname(e.target.value)} |
|||
placeholder={t('settings.adminFullnamePlaceholder')} |
|||
className="text-xs" |
|||
/> |
|||
</div> |
|||
|
|||
{/* دو ستونه: ایمیل و شماره موبایل */} |
|||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3"> |
|||
<div className="space-y-1.5"> |
|||
<label className="text-xs font-medium text-foreground"> |
|||
{t('settings.adminEmailLabel')} |
|||
</label> |
|||
<Input |
|||
type="email" |
|||
value={email} |
|||
onChange={(e) => setEmail(e.target.value)} |
|||
placeholder="[email protected]" |
|||
className="text-xs font-mono" |
|||
dir="ltr" |
|||
/> |
|||
</div> |
|||
|
|||
<div className="space-y-1.5"> |
|||
<label className="text-xs font-medium text-foreground"> |
|||
{t('settings.adminPhoneLabel')} |
|||
</label> |
|||
<Input |
|||
type="tel" |
|||
value={phoneNumber} |
|||
onChange={(e) => setPhoneNumber(e.target.value)} |
|||
placeholder="+98912..." |
|||
className="text-xs font-mono" |
|||
dir="ltr" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<p className="text-[10px] text-muted-foreground"> |
|||
{t('settings.adminEmailOrPhoneHint')} |
|||
</p> |
|||
|
|||
{/* رمز عبور اولیه */} |
|||
<div className="space-y-1.5"> |
|||
<div className="flex items-center justify-between"> |
|||
<label className="text-xs font-medium text-foreground"> |
|||
{t('settings.initialPasswordLabel')} <span className="text-rose-500">*</span> |
|||
</label> |
|||
<button |
|||
type="button" |
|||
onClick={generateStrongPassword} |
|||
className="text-[11px] text-primary hover:underline font-bold flex items-center gap-1 cursor-pointer" |
|||
> |
|||
<Ic name="sparkles" className="size-3" /> |
|||
<span>{t('settings.generatePasswordBtn')}</span> |
|||
</button> |
|||
</div> |
|||
<div className="relative"> |
|||
<Input |
|||
type={showPassword ? 'text' : 'password'} |
|||
value={password} |
|||
onChange={(e) => setPassword(e.target.value)} |
|||
placeholder="••••••••••••" |
|||
className="pe-10 font-mono text-sm tracking-wider" |
|||
dir="ltr" |
|||
/> |
|||
<button |
|||
type="button" |
|||
onClick={() => setShowPassword(!showPassword)} |
|||
className="absolute end-2.5 top-1/2 -translate-y-1/2 text-grey-3 hover:text-foreground transition-colors cursor-pointer" |
|||
> |
|||
<Ic name={showPassword ? 'eyeOff' : 'eye'} className="size-4" /> |
|||
</button> |
|||
</div> |
|||
<p className="text-[10px] text-muted-foreground"> |
|||
{t('settings.passwordMinLengthHint')} |
|||
</p> |
|||
</div> |
|||
|
|||
{/* نقش و سطح دسترسی + وضعیت حساب */} |
|||
<div className="p-3.5 rounded-xl bg-muted/40 border border-border-soft space-y-3"> |
|||
<div className="flex items-center justify-between"> |
|||
<div> |
|||
<p className="text-xs font-bold text-foreground"> |
|||
{t('settings.roleSuperuserTitle')} |
|||
</p> |
|||
<p className="text-[10px] text-muted-foreground mt-0.5"> |
|||
{t('settings.roleSuperuserDesc')} |
|||
</p> |
|||
</div> |
|||
<Switch |
|||
checked={isSuperuser} |
|||
onCheckedChange={setIsSuperuser} |
|||
/> |
|||
</div> |
|||
|
|||
<div className="h-px bg-border-soft" /> |
|||
|
|||
<div className="flex items-center justify-between"> |
|||
<div> |
|||
<p className="text-xs font-bold text-foreground"> |
|||
{t('settings.accountActiveTitle')} |
|||
</p> |
|||
<p className="text-[10px] text-muted-foreground mt-0.5"> |
|||
{t('settings.accountActiveDesc')} |
|||
</p> |
|||
</div> |
|||
<Switch |
|||
checked={isActive} |
|||
onCheckedChange={setIsActive} |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
<DialogFooter className="pt-3 gap-2 sm:gap-0"> |
|||
<Button |
|||
type="button" |
|||
variant="outline" |
|||
onClick={() => onOpenChange(false)} |
|||
disabled={submitting} |
|||
className="text-xs" |
|||
> |
|||
{t('settings.cancelBtn')} |
|||
</Button> |
|||
<Button |
|||
type="submit" |
|||
disabled={submitting || !fullname || (!email && !phoneNumber) || !password} |
|||
className="text-xs bg-primary text-white hover:bg-primary/90" |
|||
> |
|||
{submitting ? ( |
|||
<div className="flex items-center gap-2"> |
|||
<div className="size-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" /> |
|||
<span>{t('settings.creatingAdmin')}</span> |
|||
</div> |
|||
) : ( |
|||
<div className="flex items-center gap-1.5"> |
|||
<Ic name="plus" className="size-3.5" /> |
|||
<span>{t('settings.createAdminBtn')}</span> |
|||
</div> |
|||
)} |
|||
</Button> |
|||
</DialogFooter> |
|||
</form> |
|||
</DialogContent> |
|||
</Dialog> |
|||
) |
|||
} |
|||
@ -0,0 +1,44 @@ |
|||
import { useTranslation } from '@/i18n' |
|||
import { Card, CardContent } from '@/components/ui/card' |
|||
import { Ic } from '@/icons' |
|||
|
|||
export function NotificationsTab() { |
|||
const { t } = useTranslation() |
|||
|
|||
return ( |
|||
<Card className="border-border-soft bg-card/40 shadow-xs"> |
|||
<CardContent className="p-8 sm:p-12 text-center max-w-xl mx-auto space-y-4"> |
|||
<div className="size-16 rounded-3xl bg-primary/10 text-primary flex items-center justify-center mx-auto shadow-inner"> |
|||
<Ic name="bell" className="size-8" /> |
|||
</div> |
|||
|
|||
<div className="space-y-2"> |
|||
<div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-amber-500/15 text-amber-600 dark:text-amber-400 border border-amber-500/25"> |
|||
<span className="size-2 rounded-full bg-amber-500 animate-pulse" /> |
|||
<span>{t('navigation.soon')}</span> |
|||
</div> |
|||
|
|||
<h3 className="text-lg font-black text-foreground"> |
|||
{t('settings.notificationsTabTitle')} |
|||
</h3> |
|||
|
|||
<p className="text-xs sm:text-sm text-muted-foreground leading-relaxed"> |
|||
{t('settings.notificationsTabDesc')} |
|||
</p> |
|||
</div> |
|||
|
|||
<div className="p-4 rounded-2xl bg-muted/40 border border-border-soft text-start space-y-2 text-xs text-muted-foreground"> |
|||
<div className="flex items-center gap-2 font-bold text-foreground"> |
|||
<Ic name="sparkles" className="size-4 text-primary" /> |
|||
<span>{t('settings.notificationsUpcomingFeaturesTitle')}</span> |
|||
</div> |
|||
<ul className="list-disc list-inside space-y-1 ps-1 text-[11px] sm:text-xs"> |
|||
<li>{t('settings.notificationsFeature1')}</li> |
|||
<li>{t('settings.notificationsFeature2')}</li> |
|||
<li>{t('settings.notificationsFeature3')}</li> |
|||
</ul> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
) |
|||
} |
|||
@ -0,0 +1,281 @@ |
|||
import * as React from 'react' |
|||
import { useTranslation } from '@/i18n' |
|||
import { |
|||
Dialog, |
|||
DialogContent, |
|||
DialogHeader, |
|||
DialogTitle, |
|||
DialogDescription, |
|||
DialogFooter, |
|||
} from '@/components/ui/dialog' |
|||
import { Button } from '@/components/ui/button' |
|||
import { Input } from '@/components/ui/input' |
|||
import { Ic } from '@/icons' |
|||
import { toast } from '@/stores/toast' |
|||
import { setAdminPassword } from '../services/settings-api' |
|||
import type { AdminUserItem } from '../types' |
|||
|
|||
interface SetPasswordModalProps { |
|||
admin: AdminUserItem | null |
|||
open: boolean |
|||
onOpenChange: (open: boolean) => void |
|||
onSuccess: (updatedAdminId: number, newPassword: string) => void |
|||
} |
|||
|
|||
export function SetPasswordModal({ |
|||
admin, |
|||
open, |
|||
onOpenChange, |
|||
onSuccess, |
|||
}: SetPasswordModalProps) { |
|||
const { t } = useTranslation() |
|||
|
|||
const [password, setPassword] = React.useState('') |
|||
const [confirmPassword, setConfirmPassword] = React.useState('') |
|||
const [showPassword, setShowPassword] = React.useState(false) |
|||
const [showConfirmPassword, setShowConfirmPassword] = React.useState(false) |
|||
const [submitting, setSubmitting] = React.useState(false) |
|||
const [copiedCurrent, setCopiedCurrent] = React.useState(false) |
|||
|
|||
// Reset form when opened or admin changes
|
|||
React.useEffect(() => { |
|||
if (open) { |
|||
setPassword('') |
|||
setConfirmPassword('') |
|||
setShowPassword(false) |
|||
setShowConfirmPassword(false) |
|||
setCopiedCurrent(false) |
|||
} |
|||
}, [open, admin]) |
|||
|
|||
const generateStrongPassword = () => { |
|||
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789!@#$%^&*' |
|||
let result = '' |
|||
for (let i = 0; i < 12; i++) { |
|||
result += chars.charAt(Math.floor(Math.random() * chars.length)) |
|||
} |
|||
setPassword(result) |
|||
setConfirmPassword(result) |
|||
setShowPassword(true) |
|||
setShowConfirmPassword(true) |
|||
toast.info(t('settings.passwordGeneratedNotice'), t('settings.generatedPasswordTitle')) |
|||
} |
|||
|
|||
const handleCopyCurrent = () => { |
|||
if (admin?.available_password) { |
|||
navigator.clipboard.writeText(admin.available_password) |
|||
setCopiedCurrent(true) |
|||
toast.success(t('settings.passwordCopiedSuccess')) |
|||
setTimeout(() => setCopiedCurrent(false), 2500) |
|||
} |
|||
} |
|||
|
|||
const handleSubmit = async (e: React.FormEvent) => { |
|||
e.preventDefault() |
|||
if (!admin) return |
|||
|
|||
const trimmedPassword = password.trim() |
|||
const trimmedConfirm = confirmPassword.trim() |
|||
|
|||
if (!trimmedPassword) { |
|||
toast.error(t('settings.errorPasswordRequired')) |
|||
return |
|||
} |
|||
|
|||
if (trimmedPassword.length < 6) { |
|||
toast.error(t('settings.errorPasswordMinLength')) |
|||
return |
|||
} |
|||
|
|||
if (trimmedPassword !== trimmedConfirm) { |
|||
toast.error(t('settings.errorPasswordMismatch')) |
|||
return |
|||
} |
|||
|
|||
setSubmitting(true) |
|||
try { |
|||
await setAdminPassword(admin.id, { password: trimmedPassword }) |
|||
const targetName = admin.fullname || admin.phone_number || admin.email || '' |
|||
toast.success( |
|||
t('settings.passwordUpdateSuccess', { name: targetName }), |
|||
t('settings.successTitle') |
|||
) |
|||
onSuccess(admin.id, trimmedPassword) |
|||
onOpenChange(false) |
|||
} catch (err: any) { |
|||
toast.error(err?.message || t('settings.errorPasswordUpdateFailed')) |
|||
} finally { |
|||
setSubmitting(false) |
|||
} |
|||
} |
|||
|
|||
if (!admin) return null |
|||
|
|||
return ( |
|||
<Dialog open={open} onOpenChange={onOpenChange}> |
|||
<DialogContent className="max-w-[480px] p-0 overflow-hidden"> |
|||
<DialogHeader className="p-5 pb-4 border-b border-border-soft bg-card/60"> |
|||
<div className="flex items-center gap-3"> |
|||
<div className="size-10 rounded-xl bg-primary/10 text-primary flex items-center justify-center shrink-0"> |
|||
<Ic name="key" className="size-5" /> |
|||
</div> |
|||
<div> |
|||
<DialogTitle className="text-base font-bold text-foreground"> |
|||
{t('settings.setPasswordModalTitle')} |
|||
</DialogTitle> |
|||
<DialogDescription className="text-xs text-muted-foreground mt-0.5"> |
|||
{t('settings.setPasswordModalDesc')} |
|||
</DialogDescription> |
|||
</div> |
|||
</div> |
|||
</DialogHeader> |
|||
|
|||
<form onSubmit={handleSubmit} className="p-5 space-y-4"> |
|||
{/* مشخصات ادمین هدف */} |
|||
<div className="p-3.5 rounded-xl bg-muted/40 border border-border-soft flex items-center justify-between"> |
|||
<div className="flex items-center gap-2.5"> |
|||
<div className="size-9 rounded-lg bg-primary/15 text-primary flex items-center justify-center font-bold text-sm"> |
|||
{(admin.fullname || admin.email || 'A').charAt(0).toUpperCase()} |
|||
</div> |
|||
<div> |
|||
<p className="text-xs font-bold text-foreground"> |
|||
{admin.fullname || t('users.unnamedUser')} |
|||
</p> |
|||
<p className="text-[11px] text-muted-foreground font-mono mt-0.5" dir="ltr"> |
|||
{admin.email || admin.phone_number || `#${admin.id}`} |
|||
</p> |
|||
</div> |
|||
</div> |
|||
<span |
|||
className={`text-[10px] px-2 py-0.5 rounded-md font-bold ${ |
|||
admin.is_superuser |
|||
? 'bg-primary/15 text-primary border border-primary/20' |
|||
: 'bg-blue-500/15 text-blue-600 dark:text-blue-400 border border-blue-500/20' |
|||
}`}
|
|||
> |
|||
{admin.is_superuser ? t('users.admin') : t('settings.roleStaff')} |
|||
</span> |
|||
</div> |
|||
|
|||
{/* اگر رمز فعلی ذخیره‌شده دارد، نمایش و دکمه کپی */} |
|||
{admin.available_password && ( |
|||
<div className="p-3 rounded-xl bg-amber-500/10 border border-amber-500/20 flex items-center justify-between"> |
|||
<div className="flex items-center gap-2"> |
|||
<Ic name="lock" className="size-4 text-amber-600 dark:text-amber-400 shrink-0" /> |
|||
<span className="text-xs text-amber-700 dark:text-amber-300 font-medium"> |
|||
{t('settings.currentAvailablePassword')}: |
|||
</span> |
|||
<span className="font-mono text-xs font-bold text-foreground bg-card/70 px-2 py-0.5 rounded-md border border-border-soft" dir="ltr"> |
|||
{admin.available_password} |
|||
</span> |
|||
</div> |
|||
<button |
|||
type="button" |
|||
onClick={handleCopyCurrent} |
|||
className="text-[11px] font-bold text-amber-700 dark:text-amber-300 hover:underline flex items-center gap-1 cursor-pointer" |
|||
> |
|||
<Ic name="copy" className="size-3.5" /> |
|||
<span>{copiedCurrent ? t('settings.copied') : t('settings.copy')}</span> |
|||
</button> |
|||
</div> |
|||
)} |
|||
|
|||
{/* فیلد رمز عبور جدید */} |
|||
<div className="space-y-1.5"> |
|||
<div className="flex items-center justify-between"> |
|||
<label className="text-xs font-medium text-foreground"> |
|||
{t('settings.newPasswordLabel')} |
|||
</label> |
|||
<button |
|||
type="button" |
|||
onClick={generateStrongPassword} |
|||
className="text-[11px] text-primary hover:underline font-bold flex items-center gap-1 cursor-pointer" |
|||
> |
|||
<Ic name="sparkles" className="size-3" /> |
|||
<span>{t('settings.generatePasswordBtn')}</span> |
|||
</button> |
|||
</div> |
|||
<div className="relative"> |
|||
<Input |
|||
type={showPassword ? 'text' : 'password'} |
|||
value={password} |
|||
onChange={(e) => setPassword(e.target.value)} |
|||
placeholder="••••••••••••" |
|||
className="pe-10 font-mono text-sm tracking-wider" |
|||
dir="ltr" |
|||
/> |
|||
<button |
|||
type="button" |
|||
onClick={() => setShowPassword(!showPassword)} |
|||
className="absolute end-2.5 top-1/2 -translate-y-1/2 text-grey-3 hover:text-foreground transition-colors cursor-pointer" |
|||
> |
|||
<Ic name={showPassword ? 'eyeOff' : 'eye'} className="size-4" /> |
|||
</button> |
|||
</div> |
|||
<p className="text-[10px] text-muted-foreground"> |
|||
{t('settings.passwordMinLengthHint')} |
|||
</p> |
|||
</div> |
|||
|
|||
{/* فیلد تکرار رمز عبور */} |
|||
<div className="space-y-1.5"> |
|||
<label className="text-xs font-medium text-foreground"> |
|||
{t('settings.confirmPasswordLabel')} |
|||
</label> |
|||
<div className="relative"> |
|||
<Input |
|||
type={showConfirmPassword ? 'text' : 'password'} |
|||
value={confirmPassword} |
|||
onChange={(e) => setConfirmPassword(e.target.value)} |
|||
placeholder="••••••••••••" |
|||
className="pe-10 font-mono text-sm tracking-wider" |
|||
dir="ltr" |
|||
/> |
|||
<button |
|||
type="button" |
|||
onClick={() => setShowConfirmPassword(!showConfirmPassword)} |
|||
className="absolute end-2.5 top-1/2 -translate-y-1/2 text-grey-3 hover:text-foreground transition-colors cursor-pointer" |
|||
> |
|||
<Ic name={showConfirmPassword ? 'eyeOff' : 'eye'} className="size-4" /> |
|||
</button> |
|||
</div> |
|||
{confirmPassword && password !== confirmPassword && ( |
|||
<p className="text-[11px] text-rose-500 font-medium"> |
|||
{t('settings.errorPasswordMismatch')} |
|||
</p> |
|||
)} |
|||
</div> |
|||
|
|||
<DialogFooter className="pt-3 gap-2 sm:gap-0"> |
|||
<Button |
|||
type="button" |
|||
variant="outline" |
|||
onClick={() => onOpenChange(false)} |
|||
disabled={submitting} |
|||
className="text-xs" |
|||
> |
|||
{t('settings.cancelBtn')} |
|||
</Button> |
|||
<Button |
|||
type="submit" |
|||
disabled={submitting || !password || password !== confirmPassword} |
|||
className="text-xs bg-primary text-white hover:bg-primary/90" |
|||
> |
|||
{submitting ? ( |
|||
<div className="flex items-center gap-2"> |
|||
<div className="size-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" /> |
|||
<span>{t('settings.savingPassword')}</span> |
|||
</div> |
|||
) : ( |
|||
<div className="flex items-center gap-1.5"> |
|||
<Ic name="check" className="size-3.5" /> |
|||
<span>{t('settings.savePasswordBtn')}</span> |
|||
</div> |
|||
)} |
|||
</Button> |
|||
</DialogFooter> |
|||
</form> |
|||
</DialogContent> |
|||
</Dialog> |
|||
) |
|||
} |
|||
@ -0,0 +1,108 @@ |
|||
import { apiFetch } from '@/services/http' |
|||
import type { DrfPaginatedResponse } from '@/features/users/types' |
|||
import type { |
|||
AdminStats, |
|||
AdminUserItem, |
|||
SetPasswordPayload, |
|||
CreateAdminPayload, |
|||
UpdateAdminPayload, |
|||
} from '../types' |
|||
|
|||
/** |
|||
* دریافت فهرست صفحه‌بندی‌شده مدیران سیستم (Staff / Superusers) |
|||
*/ |
|||
export async function fetchAdminUsers(params?: { |
|||
search?: string |
|||
is_active?: string |
|||
ordering?: string |
|||
limit?: number |
|||
offset?: number |
|||
}): Promise<DrfPaginatedResponse<AdminUserItem>> { |
|||
const query = new URLSearchParams() |
|||
query.set('role', 'staff') |
|||
if (params?.search && params.search.trim()) { |
|||
query.set('search', params.search.trim()) |
|||
} |
|||
if (params?.is_active && params.is_active !== 'all') { |
|||
query.set('is_active', params.is_active) |
|||
} |
|||
if (params?.ordering) { |
|||
query.set('ordering', params.ordering) |
|||
} |
|||
if (params?.limit !== undefined) { |
|||
query.set('limit', String(params.limit)) |
|||
} |
|||
if (params?.offset !== undefined) { |
|||
query.set('offset', String(params.offset)) |
|||
} |
|||
|
|||
const queryString = query.toString() |
|||
const path = queryString ? `account/admin/users/?${queryString}` : 'account/admin/users/?role=staff' |
|||
return apiFetch<DrfPaginatedResponse<AdminUserItem>>(path) |
|||
} |
|||
|
|||
/** |
|||
* دریافت آمارهای کلان مربوط به مدیران سیستم |
|||
*/ |
|||
export async function fetchAdminStats(): Promise<AdminStats> { |
|||
const data = await apiFetch<{ |
|||
staff_users?: number |
|||
active_staff_users?: number |
|||
inactive_staff_users?: number |
|||
superusers_count?: number |
|||
total_users?: number |
|||
}>('account/admin/users/stats/') |
|||
|
|||
const staff_users = data.staff_users ?? 0 |
|||
const active_staff_users = data.active_staff_users ?? staff_users |
|||
const inactive_staff_users = data.inactive_staff_users ?? Math.max(0, staff_users - active_staff_users) |
|||
const superusers_count = data.superusers_count ?? 0 |
|||
const total_users = data.total_users ?? 0 |
|||
|
|||
return { |
|||
staff_users, |
|||
active_staff_users, |
|||
inactive_staff_users, |
|||
superusers_count, |
|||
total_users, |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* تعیین یا تغییر رمز عبور برای ادمین یا کاربر |
|||
*/ |
|||
export async function setAdminPassword( |
|||
userId: number, |
|||
payload: SetPasswordPayload |
|||
): Promise<{ detail: string; id: number; available_password?: string }> { |
|||
return apiFetch<{ detail: string; id: number; available_password?: string }>( |
|||
`account/admin/users/${userId}/set-password/`, |
|||
{ |
|||
method: 'POST', |
|||
body: payload, |
|||
} |
|||
) |
|||
} |
|||
|
|||
/** |
|||
* ایجاد یک مدیر جدید در سیستم همراه با رمز عبور اولیه |
|||
*/ |
|||
export async function createAdminUser(payload: CreateAdminPayload): Promise<AdminUserItem> { |
|||
return apiFetch<AdminUserItem>('account/admin/users/create/', { |
|||
method: 'POST', |
|||
body: payload, |
|||
}) |
|||
} |
|||
|
|||
/** |
|||
* ویرایش اطلاعات یا تغییر وضعیت فعال/غیرفعال ادمین |
|||
*/ |
|||
export async function updateAdminUser( |
|||
userId: number, |
|||
payload: UpdateAdminPayload |
|||
): Promise<AdminUserItem> { |
|||
return apiFetch<AdminUserItem>(`account/admin/users/${userId}/`, { |
|||
method: 'PATCH', |
|||
body: payload, |
|||
}) |
|||
} |
|||
@ -0,0 +1,36 @@ |
|||
import type { UserListItem } from '@/features/users/types' |
|||
|
|||
export interface AdminStats { |
|||
staff_users: number |
|||
active_staff_users: number |
|||
inactive_staff_users: number |
|||
superusers_count: number |
|||
total_users: number |
|||
} |
|||
|
|||
export interface AdminUserItem extends UserListItem { |
|||
available_password?: string | null |
|||
} |
|||
|
|||
export interface SetPasswordPayload { |
|||
password: string |
|||
} |
|||
|
|||
export interface CreateAdminPayload { |
|||
fullname: string |
|||
email?: string |
|||
phone_number?: string |
|||
password: string |
|||
is_staff: boolean |
|||
is_superuser: boolean |
|||
is_active: boolean |
|||
} |
|||
|
|||
export interface UpdateAdminPayload { |
|||
fullname?: string |
|||
email?: string |
|||
phone_number?: string |
|||
is_active?: boolean |
|||
is_staff?: boolean |
|||
is_superuser?: boolean |
|||
} |
|||
@ -0,0 +1,239 @@ |
|||
import * as React from 'react' |
|||
import { useParams, useNavigate } from 'react-router-dom' |
|||
import { useTranslation } from '@/i18n' |
|||
import type { UserDetail } from './types' |
|||
import { fetchUserDetail } from './services/users-api' |
|||
import { UserProfileTab } from './components/UserProfileTab' |
|||
import { UserToursTab } from './components/UserToursTab' |
|||
import { UserFactorsTab } from './components/UserFactorsTab' |
|||
import { Ic } from '@/icons' |
|||
|
|||
type TabType = 'profile' | 'tours' | 'invoices' |
|||
|
|||
export default function UserDetailPage() { |
|||
const { id } = useParams<{ id: string }>() |
|||
const navigate = useNavigate() |
|||
const { t } = useTranslation() |
|||
|
|||
const [user, setUser] = React.useState<UserDetail | null>(null) |
|||
const [loading, setLoading] = React.useState(true) |
|||
const [activeTab, setActiveTab] = React.useState<TabType>('profile') |
|||
|
|||
const userId = Number(id) |
|||
|
|||
React.useEffect(() => { |
|||
if (!userId) return |
|||
|
|||
setLoading(true) |
|||
fetchUserDetail(userId) |
|||
.then((data) => setUser(data)) |
|||
.catch((err) => { |
|||
console.error('Failed to fetch user dossier:', err) |
|||
setUser(null) |
|||
}) |
|||
.finally(() => setLoading(false)) |
|||
}, [userId]) |
|||
|
|||
if (loading) { |
|||
return ( |
|||
<div className="space-y-6"> |
|||
<div className="h-10 w-48 rounded-xl bg-muted/60 animate-pulse" /> |
|||
<div className="h-32 rounded-2xl bg-card border border-border/60 animate-pulse" /> |
|||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4"> |
|||
{[1, 2, 3].map((i) => ( |
|||
<div key={i} className="h-20 rounded-2xl bg-muted/40 animate-pulse" /> |
|||
))} |
|||
</div> |
|||
<div className="h-64 rounded-2xl bg-card border border-border/60 animate-pulse" /> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
if (!user) { |
|||
return ( |
|||
<div className="p-12 text-center bg-card border border-border/60 rounded-2xl space-y-4"> |
|||
<div className="mx-auto w-12 h-12 rounded-full bg-rose-500/10 text-rose-500 flex items-center justify-center"> |
|||
<Ic name="alertCircle" className="w-6 h-6" /> |
|||
</div> |
|||
<h2 className="text-base font-bold text-foreground"> |
|||
{t('users.noUsersFound')} |
|||
</h2> |
|||
<button |
|||
type="button" |
|||
onClick={() => navigate('/users')} |
|||
className="px-4 py-2 rounded-xl bg-primary text-white text-xs font-semibold" |
|||
> |
|||
{t('users.backToUsers')} |
|||
</button> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
return ( |
|||
<div className="space-y-6"> |
|||
{/* دکمه بازگشت و عنوان پرونده */} |
|||
<div className="flex items-center gap-3"> |
|||
<button |
|||
type="button" |
|||
onClick={() => navigate('/users')} |
|||
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-card border border-border/60 text-xs font-semibold hover:bg-muted/40 transition-all text-muted-foreground hover:text-foreground" |
|||
> |
|||
<Ic name="arrowRight" className="w-4 h-4 rtl:rotate-0 rotate-180" /> |
|||
<span>{t('users.backToUsers')}</span> |
|||
</button> |
|||
</div> |
|||
|
|||
{/* بنر اطلاعات هویت کاربر */} |
|||
<div className="bg-card border border-border/60 rounded-2xl p-5 sm:p-6 shadow-xs flex flex-col sm:flex-row sm:items-center justify-between gap-4"> |
|||
<div className="flex items-center gap-4"> |
|||
{user.avatar ? ( |
|||
<img |
|||
src={user.avatar} |
|||
alt={user.fullname || 'Avatar'} |
|||
className="w-16 h-16 rounded-full object-cover border-2 border-border/80 shadow-xs shrink-0" |
|||
/> |
|||
) : ( |
|||
<div className="w-16 h-16 rounded-full bg-primary/10 text-primary flex items-center justify-center text-xl font-black shrink-0"> |
|||
{user.fullname ? user.fullname.slice(0, 2).toUpperCase() : 'U'} |
|||
</div> |
|||
)} |
|||
|
|||
<div> |
|||
<div className="flex flex-wrap items-center gap-2"> |
|||
<h1 className="text-lg sm:text-xl font-black text-foreground"> |
|||
{user.fullname || t('users.noData')} |
|||
</h1> |
|||
<span className="font-mono text-xs px-2 py-0.5 rounded-md bg-muted text-muted-foreground"> |
|||
#{user.id} |
|||
</span> |
|||
<span |
|||
className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium ${ |
|||
user.is_active |
|||
? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400' |
|||
: 'bg-rose-500/10 text-rose-600 dark:text-rose-400' |
|||
}`}
|
|||
> |
|||
<span |
|||
className={`w-1.5 h-1.5 rounded-full ${ |
|||
user.is_active ? 'bg-emerald-500' : 'bg-rose-500' |
|||
}`}
|
|||
/> |
|||
{user.is_active ? t('users.active') : t('users.inactive')} |
|||
</span> |
|||
</div> |
|||
|
|||
<div className="flex flex-wrap items-center gap-4 text-xs text-muted-foreground mt-1.5"> |
|||
{user.phone_number && ( |
|||
<div className="flex items-center gap-1 font-mono dir-ltr"> |
|||
<Ic name="phone" className="w-3.5 h-3.5 text-muted-foreground/70" /> |
|||
<span>{user.phone_number.split(':deleted')[0].trim()}</span> |
|||
</div> |
|||
)} |
|||
{user.email && ( |
|||
<div className="flex items-center gap-1 font-mono"> |
|||
<Ic name="mail" className="w-3.5 h-3.5 text-muted-foreground/70" /> |
|||
<span>{user.email.split(':deleted')[0].trim()}</span> |
|||
{user.email.includes(':deleted') && ( |
|||
<span className="px-1.5 py-0.2 rounded-md bg-rose-500/10 text-rose-600 dark:text-rose-400 text-[10px] font-bold"> |
|||
{t('users.deletedAccount')} |
|||
</span> |
|||
)} |
|||
</div> |
|||
)} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* کارت‌های آماری سریع */} |
|||
<div className="grid grid-cols-3 gap-2 sm:gap-3 shrink-0 pt-3 sm:pt-0 border-t sm:border-t-0 border-border/40"> |
|||
<div className="p-3 rounded-xl bg-muted/30 border border-border/30 text-center"> |
|||
<span className="block text-[11px] text-muted-foreground mb-0.5"> |
|||
{t('users.totalFactorsCount')} |
|||
</span> |
|||
<span className="text-base sm:text-lg font-mono font-bold text-foreground"> |
|||
{user.stats?.total_factors ?? 0} |
|||
</span> |
|||
</div> |
|||
|
|||
<div className="p-3 rounded-xl bg-muted/30 border border-border/30 text-center"> |
|||
<span className="block text-[11px] text-muted-foreground mb-0.5"> |
|||
{t('users.totalToursCount')} |
|||
</span> |
|||
<span className="text-base sm:text-lg font-mono font-bold text-foreground"> |
|||
{user.stats?.total_tours ?? 0} |
|||
</span> |
|||
</div> |
|||
|
|||
<div className="p-3 rounded-xl bg-muted/30 border border-border/30 text-center"> |
|||
<span className="block text-[11px] text-muted-foreground mb-0.5"> |
|||
{t('users.totalApprovedSpent')} |
|||
</span> |
|||
<span className="text-base sm:text-lg font-mono font-bold text-emerald-600 dark:text-emerald-400"> |
|||
${(user.stats?.approved_spent ?? 0).toLocaleString()} |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* سیستم تب‌بندی جامع پرونده کاربر (User Dossier Tabs) */} |
|||
<div className="border-b border-border/60"> |
|||
<nav className="flex items-center gap-2 sm:gap-4 -mb-px overflow-x-auto"> |
|||
{/* تب اول: مشخصات کاربر */} |
|||
<button |
|||
type="button" |
|||
onClick={() => setActiveTab('profile')} |
|||
className={`inline-flex items-center gap-2 py-3 px-3 sm:px-4 border-b-2 text-xs sm:text-sm font-bold transition-all whitespace-nowrap ${ |
|||
activeTab === 'profile' |
|||
? 'border-primary text-primary' |
|||
: 'border-transparent text-muted-foreground hover:text-foreground hover:border-border' |
|||
}`}
|
|||
> |
|||
<Ic name="user" className="w-4 h-4" /> |
|||
<span>{t('users.tabProfile')}</span> |
|||
</button> |
|||
|
|||
{/* تب دوم: تورهای کاربر */} |
|||
<button |
|||
type="button" |
|||
onClick={() => setActiveTab('tours')} |
|||
className={`inline-flex items-center gap-2 py-3 px-3 sm:px-4 border-b-2 text-xs sm:text-sm font-bold transition-all whitespace-nowrap ${ |
|||
activeTab === 'tours' |
|||
? 'border-primary text-primary' |
|||
: 'border-transparent text-muted-foreground hover:text-foreground hover:border-border' |
|||
}`}
|
|||
> |
|||
<Ic name="map" className="w-4 h-4" /> |
|||
<span>{t('users.tabTours')}</span> |
|||
<span className="px-1.5 py-0.2 rounded-full text-[10px] font-mono bg-muted text-muted-foreground"> |
|||
{user.stats?.total_tours ?? 0} |
|||
</span> |
|||
</button> |
|||
|
|||
{/* تب سوم: فاکتورهای کاربر */} |
|||
<button |
|||
type="button" |
|||
onClick={() => setActiveTab('invoices')} |
|||
className={`inline-flex items-center gap-2 py-3 px-3 sm:px-4 border-b-2 text-xs sm:text-sm font-bold transition-all whitespace-nowrap ${ |
|||
activeTab === 'invoices' |
|||
? 'border-primary text-primary' |
|||
: 'border-transparent text-muted-foreground hover:text-foreground hover:border-border' |
|||
}`}
|
|||
> |
|||
<Ic name="receipt" className="w-4 h-4" /> |
|||
<span>{t('users.tabInvoices')}</span> |
|||
<span className="px-1.5 py-0.2 rounded-full text-[10px] font-mono bg-muted text-muted-foreground"> |
|||
{user.stats?.total_factors ?? 0} |
|||
</span> |
|||
</button> |
|||
</nav> |
|||
</div> |
|||
|
|||
{/* محتوای تب فعال */} |
|||
<div className="pt-2"> |
|||
{activeTab === 'profile' && <UserProfileTab user={user} />} |
|||
{activeTab === 'tours' && <UserToursTab userId={user.id} />} |
|||
{activeTab === 'invoices' && <UserFactorsTab userId={user.id} />} |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
@ -0,0 +1,822 @@ |
|||
import * as React from 'react' |
|||
import { useNavigate } from 'react-router-dom' |
|||
import { useTranslation } from '@/i18n' |
|||
import type { UserListItem, UserGlobalStats } from './types' |
|||
import { fetchUsers, fetchUserStats } from './services/users-api' |
|||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card' |
|||
import { Input } from '@/components/ui/input' |
|||
import { Button } from '@/components/ui/button' |
|||
import { Badge } from '@/components/ui/badge' |
|||
import { |
|||
Table, |
|||
TableBody, |
|||
TableCell, |
|||
TableHead, |
|||
TableHeader, |
|||
TableRow, |
|||
} from '@/components/ui/table' |
|||
import { Ic, IconName } from '@/icons' |
|||
import { ShimmerBox } from '@/components/shared/shimmer_frontend' |
|||
import { formatDateByLanguage } from '@/lib/date-utils' |
|||
|
|||
const PAGE_SIZE = 50 |
|||
|
|||
interface UserCategoryTab { |
|||
id: string |
|||
labelKey: string |
|||
icon: IconName |
|||
isCore?: boolean |
|||
role?: string |
|||
} |
|||
|
|||
const CATEGORY_TABS: UserCategoryTab[] = [ |
|||
{ id: 'all', labelKey: 'users.filterAll', icon: 'users' }, |
|||
{ id: 'has_tours', labelKey: 'users.filterTourBuyers', icon: 'map', isCore: true, role: 'has_tours' }, |
|||
{ id: 'has_factors', labelKey: 'users.filterFactorBuyers', icon: 'receipt', role: 'has_factors' }, |
|||
{ id: 'staff', labelKey: 'users.filterStaff', icon: 'shield', role: 'staff' }, |
|||
] |
|||
|
|||
function getPaginationItems(current: number, total: number): (number | 'ellipsis')[] { |
|||
if (total <= 7) { |
|||
return Array.from({ length: total }, (_, i) => i + 1) |
|||
} |
|||
|
|||
const items: (number | 'ellipsis')[] = [] |
|||
items.push(1) |
|||
|
|||
if (current > 3) { |
|||
items.push('ellipsis') |
|||
} |
|||
|
|||
const start = Math.max(2, current - 1) |
|||
const end = Math.min(total - 1, current + 1) |
|||
|
|||
for (let i = start; i <= end; i++) { |
|||
items.push(i) |
|||
} |
|||
|
|||
if (current < total - 2) { |
|||
items.push('ellipsis') |
|||
} |
|||
|
|||
items.push(total) |
|||
return items |
|||
} |
|||
|
|||
export default function UsersPage() { |
|||
const { t, language } = useTranslation() |
|||
const navigate = useNavigate() |
|||
|
|||
const [users, setUsers] = React.useState<UserListItem[]>([]) |
|||
const [totalCount, setTotalCount] = React.useState(0) |
|||
const [loading, setLoading] = React.useState(true) |
|||
const [stats, setStats] = React.useState<UserGlobalStats | null>(null) |
|||
|
|||
// Filters state
|
|||
const [search, setSearch] = React.useState('') |
|||
const [debouncedSearch, setDebouncedSearch] = React.useState('') |
|||
const [selectedCategory, setSelectedCategory] = React.useState<string>('all') |
|||
const [selectedStatus, setSelectedStatus] = React.useState<string>('all') |
|||
const [offset, setOffset] = React.useState(0) |
|||
|
|||
// Search debounce
|
|||
React.useEffect(() => { |
|||
const timer = setTimeout(() => { |
|||
setDebouncedSearch(search) |
|||
setOffset(0) |
|||
}, 350) |
|||
return () => clearTimeout(timer) |
|||
}, [search]) |
|||
|
|||
// Load KPI stats once
|
|||
const loadStats = React.useCallback(async () => { |
|||
try { |
|||
const data = await fetchUserStats() |
|||
setStats(data) |
|||
} catch (err) { |
|||
console.error('Failed to load user stats:', err) |
|||
} |
|||
}, []) |
|||
|
|||
React.useEffect(() => { |
|||
loadStats() |
|||
}, [loadStats]) |
|||
|
|||
// Compute active API filter parameters
|
|||
const activeParams = React.useMemo(() => { |
|||
let is_active: string | undefined = undefined |
|||
if (selectedStatus === 'active') is_active = 'true' |
|||
else if (selectedStatus === 'inactive') is_active = 'false' |
|||
|
|||
const activeTab = CATEGORY_TABS.find((t) => t.id === selectedCategory) |
|||
const role = activeTab?.role |
|||
|
|||
return { is_active, role } |
|||
}, [selectedStatus, selectedCategory]) |
|||
|
|||
const loadUsers = React.useCallback(async () => { |
|||
setLoading(true) |
|||
try { |
|||
const res = await fetchUsers({ |
|||
search: debouncedSearch, |
|||
is_active: activeParams.is_active, |
|||
role: activeParams.role, |
|||
limit: PAGE_SIZE, |
|||
offset, |
|||
}) |
|||
setUsers(res.results || []) |
|||
setTotalCount(res.count || 0) |
|||
} catch (err) { |
|||
console.error('Failed to load users:', err) |
|||
setUsers([]) |
|||
setTotalCount(0) |
|||
} finally { |
|||
setLoading(false) |
|||
} |
|||
}, [debouncedSearch, activeParams, offset]) |
|||
|
|||
React.useEffect(() => { |
|||
loadUsers() |
|||
}, [loadUsers]) |
|||
|
|||
const handleRefresh = () => { |
|||
loadUsers() |
|||
loadStats() |
|||
} |
|||
|
|||
const handleSelectCategory = (categoryId: string) => { |
|||
setSelectedCategory(categoryId) |
|||
setOffset(0) |
|||
} |
|||
|
|||
const handleSelectStatus = (statusId: string) => { |
|||
setSelectedStatus(statusId) |
|||
setOffset(0) |
|||
} |
|||
|
|||
const handleResetFilters = () => { |
|||
setSearch('') |
|||
setSelectedCategory('all') |
|||
setSelectedStatus('all') |
|||
setOffset(0) |
|||
} |
|||
|
|||
const currentPage = Math.floor(offset / PAGE_SIZE) + 1 |
|||
const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE)) |
|||
const paginationItems = React.useMemo( |
|||
() => getPaginationItems(currentPage, totalPages), |
|||
[currentPage, totalPages] |
|||
) |
|||
|
|||
const handleNextPage = () => { |
|||
if (offset + PAGE_SIZE < totalCount) { |
|||
setOffset((prev) => prev + PAGE_SIZE) |
|||
} |
|||
} |
|||
|
|||
const handlePrevPage = () => { |
|||
if (offset >= PAGE_SIZE) { |
|||
setOffset((prev) => prev - PAGE_SIZE) |
|||
} |
|||
} |
|||
|
|||
// Formatting helpers
|
|||
const cleanPhoneNumber = (phone: string | null) => { |
|||
if (!phone) return '—' |
|||
const cleaned = phone.split(':deleted')[0].trim() |
|||
return cleaned || '—' |
|||
} |
|||
|
|||
const cleanEmail = (email: string | null) => { |
|||
if (!email) return { text: '—', isDeleted: false } |
|||
const isDeleted = email.includes(':deleted') |
|||
const cleaned = email.split(':deleted')[0].trim() |
|||
return { text: cleaned || '—', isDeleted } |
|||
} |
|||
|
|||
return ( |
|||
<div className="space-y-6 pt-2 pb-14"> |
|||
{/* ۱. سربرگ اصلی صفحه کاربران (مطابق با ساختار سربرگ در BillingPage) */} |
|||
<div className="flex flex-col gap-4 rounded-2xl border border-border-soft bg-card/40 p-6 shadow-xs sm:flex-row sm:items-center sm:justify-between backdrop-blur-xs"> |
|||
<div className="space-y-1"> |
|||
<div className="flex items-center gap-2.5"> |
|||
<div className="flex size-9 items-center justify-center rounded-xl bg-primary/10 text-primary"> |
|||
<Ic name="users" className="size-5" /> |
|||
</div> |
|||
<h1 className="text-xl font-black text-foreground"> |
|||
{t('users.title')} |
|||
</h1> |
|||
<Badge |
|||
variant="outline" |
|||
className="border-primary/30 bg-primary/10 text-primary font-bold font-mono text-xs min-w-[65px] justify-center" |
|||
> |
|||
{loading && totalCount === 0 ? ( |
|||
<ShimmerBox width={36} height={14} rounded="md" className="inline-block" /> |
|||
) : ( |
|||
`${totalCount} ${t('users.colUser')}` |
|||
)} |
|||
</Badge> |
|||
</div> |
|||
<p className="text-xs text-grey-3"> |
|||
{t('users.subtitle')} |
|||
</p> |
|||
</div> |
|||
|
|||
<div className="flex items-center gap-2.5"> |
|||
<Button |
|||
variant="outline" |
|||
size="sm" |
|||
onClick={handleRefresh} |
|||
disabled={loading} |
|||
className="gap-2 rounded-xl border-border-soft hover:bg-surface-2 text-xs" |
|||
> |
|||
<Ic name="refresh" className={`size-3.5 ${loading ? 'animate-spin' : ''}`} /> |
|||
<span>{t('common.refresh')}</span> |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* ۲. نوار تب‌های تفکیک دسته‌بندی کاربران (مطابق Service Category Tabs در BillingPage) */} |
|||
<div className="flex items-center gap-2 overflow-x-auto pb-2 sm:pb-0 scrollbar-none"> |
|||
{CATEGORY_TABS.map((tab) => { |
|||
const isActive = selectedCategory === tab.id |
|||
return ( |
|||
<button |
|||
key={tab.id} |
|||
type="button" |
|||
onClick={() => handleSelectCategory(tab.id)} |
|||
className={`flex items-center gap-2 px-3.5 py-2 rounded-xl text-xs font-bold transition-all whitespace-nowrap border shrink-0 ${ |
|||
isActive |
|||
? 'bg-primary text-white border-primary shadow-xs' |
|||
: 'bg-card/60 text-grey-2 border-border-soft hover:bg-card hover:text-foreground' |
|||
}`}
|
|||
> |
|||
<Ic name={tab.icon} className={`size-4 ${isActive ? 'text-white' : 'text-primary'}`} /> |
|||
<span>{t(tab.labelKey as any)}</span> |
|||
{tab.isCore && ( |
|||
<span |
|||
className={`text-[10px] px-1.5 py-0.2 rounded-md font-bold ${ |
|||
isActive |
|||
? 'bg-white/20 text-white' |
|||
: 'bg-primary/15 text-primary' |
|||
}`}
|
|||
> |
|||
{t('billing.coreTourBadge')} |
|||
</span> |
|||
)} |
|||
</button> |
|||
) |
|||
})} |
|||
</div> |
|||
|
|||
{/* ۳. کارت‌های KPI شاخص‌های کلیدی آماری کاربران (۵ کارت مشابه پالت رنگی BillingPage) */} |
|||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3.5"> |
|||
{/* ۱. کل کاربران (خنثی) */} |
|||
<Card className="border-border-soft bg-card/40 shadow-xs"> |
|||
<CardContent className="p-4 flex items-center justify-between"> |
|||
<div> |
|||
<p className="text-[11px] text-grey-3 font-medium">{t('users.kpiTotalUsers')}</p> |
|||
{loading && !stats ? ( |
|||
<ShimmerBox width={48} height={24} rounded="md" className="mt-1" /> |
|||
) : ( |
|||
<p className="text-xl font-black mt-1 font-mono tabular-nums text-foreground"> |
|||
{stats?.total_users ?? totalCount} |
|||
</p> |
|||
)} |
|||
</div> |
|||
<div className="size-9 rounded-xl bg-muted/60 flex items-center justify-center text-muted-foreground"> |
|||
<Ic name="users" className="size-4" /> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
|
|||
{/* ۲. خریداران تور (آبی) */} |
|||
<Card className="border-blue-500/20 bg-blue-500/5 shadow-xs"> |
|||
<CardContent className="p-4 flex items-center justify-between"> |
|||
<div> |
|||
<p className="text-[11px] text-blue-600 dark:text-blue-400 font-medium"> |
|||
{t('users.kpiTourUsers')} |
|||
</p> |
|||
{loading && !stats ? ( |
|||
<ShimmerBox width={48} height={24} rounded="md" className="mt-1" /> |
|||
) : ( |
|||
<p className="text-xl font-black mt-1 font-mono tabular-nums text-blue-600 dark:text-blue-400"> |
|||
{stats?.users_with_tours ?? 0} |
|||
</p> |
|||
)} |
|||
</div> |
|||
<div className="size-9 rounded-xl bg-blue-500/15 text-blue-600 dark:text-blue-400 flex items-center justify-center"> |
|||
<Ic name="map" className="size-4" /> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
|
|||
{/* ۳. دارای فاکتور و خرید (کهربایی) */} |
|||
<Card className="border-amber-500/20 bg-amber-500/5 shadow-xs"> |
|||
<CardContent className="p-4 flex items-center justify-between"> |
|||
<div> |
|||
<p className="text-[11px] text-amber-600 dark:text-amber-400 font-medium"> |
|||
{t('users.kpiFactorUsers')} |
|||
</p> |
|||
{loading && !stats ? ( |
|||
<ShimmerBox width={48} height={24} rounded="md" className="mt-1" /> |
|||
) : ( |
|||
<p className="text-xl font-black mt-1 font-mono tabular-nums text-amber-600 dark:text-amber-400"> |
|||
{stats?.users_with_factors ?? 0} |
|||
</p> |
|||
)} |
|||
</div> |
|||
<div className="size-9 rounded-xl bg-amber-500/15 text-amber-600 dark:text-amber-400 flex items-center justify-center"> |
|||
<Ic name="receipt" className="size-4" /> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
|
|||
{/* ۴. کاربران فعال (سبز) */} |
|||
<Card className="border-emerald-500/20 bg-emerald-500/5 shadow-xs"> |
|||
<CardContent className="p-4 flex items-center justify-between"> |
|||
<div> |
|||
<p className="text-[11px] text-emerald-600 dark:text-emerald-400 font-medium"> |
|||
{t('users.kpiActiveUsers')} |
|||
</p> |
|||
{loading && !stats ? ( |
|||
<ShimmerBox width={48} height={24} rounded="md" className="mt-1" /> |
|||
) : ( |
|||
<p className="text-xl font-black mt-1 font-mono tabular-nums text-emerald-600 dark:text-emerald-400"> |
|||
{stats?.active_users ?? 0} |
|||
</p> |
|||
)} |
|||
</div> |
|||
<div className="size-9 rounded-xl bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 flex items-center justify-center"> |
|||
<Ic name="checkCircle" className="size-4" /> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
|
|||
{/* ۵. مدیران سیستم (بنفش/رز) */} |
|||
<Card className="border-purple-500/20 bg-purple-500/5 shadow-xs col-span-2 sm:col-span-1"> |
|||
<CardContent className="p-4 flex items-center justify-between"> |
|||
<div> |
|||
<p className="text-[11px] text-purple-600 dark:text-purple-400 font-medium"> |
|||
{t('users.kpiStaffUsers')} |
|||
</p> |
|||
{loading && !stats ? ( |
|||
<ShimmerBox width={48} height={24} rounded="md" className="mt-1" /> |
|||
) : ( |
|||
<p className="text-xl font-black mt-1 font-mono tabular-nums text-purple-600 dark:text-purple-400"> |
|||
{stats?.staff_users ?? 0} |
|||
</p> |
|||
)} |
|||
</div> |
|||
<div className="size-9 rounded-xl bg-purple-500/15 text-purple-600 dark:text-purple-400 flex items-center justify-center"> |
|||
<Ic name="shield" className="size-4" /> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
</div> |
|||
|
|||
{/* ۴. نوار جستجو و فیلترهای وضعیت لحظه‌ای (مطابق با Card جستجو در BillingPage) */} |
|||
<Card className="border-border-soft bg-card/40 shadow-xs"> |
|||
<CardContent className="p-4"> |
|||
<div className="flex flex-col md:flex-row items-center justify-between gap-3"> |
|||
{/* جستجوی متنی زنده */} |
|||
<div className="relative flex-1 w-full"> |
|||
<Ic |
|||
name="search" |
|||
className="absolute start-3 top-1/2 -translate-y-1/2 size-4 text-grey-3 pointer-events-none" |
|||
/> |
|||
<Input |
|||
placeholder={t('users.searchPlaceholder')} |
|||
value={search} |
|||
onChange={(e) => setSearch(e.target.value)} |
|||
className="ps-9 pe-9 h-9 text-xs bg-surface-2 border-border-soft rounded-xl text-foreground placeholder:text-grey-3" |
|||
/> |
|||
{search && ( |
|||
<button |
|||
type="button" |
|||
onClick={() => setSearch('')} |
|||
className="absolute end-3 top-1/2 -translate-y-1/2 text-grey-3 hover:text-foreground" |
|||
> |
|||
<Ic name="x" className="size-3" /> |
|||
</button> |
|||
)} |
|||
</div> |
|||
|
|||
{/* چیپ‌های فیلتر سریع وضعیت */} |
|||
<div className="flex items-center gap-1.5 w-full md:w-auto overflow-x-auto pb-1 md:pb-0 scrollbar-none"> |
|||
{[ |
|||
{ id: 'all', label: t('users.allStatuses') }, |
|||
{ id: 'active', label: t('users.filterActive') }, |
|||
{ id: 'inactive', label: t('users.filterInactive') }, |
|||
].map((st) => { |
|||
const isSelected = selectedStatus === st.id |
|||
return ( |
|||
<button |
|||
key={st.id} |
|||
type="button" |
|||
onClick={() => handleSelectStatus(st.id)} |
|||
className={`px-3 py-1.5 rounded-xl text-xs font-bold transition-all whitespace-nowrap ${ |
|||
isSelected |
|||
? 'bg-primary text-white shadow-xs' |
|||
: 'bg-surface-2 text-grey-3 hover:text-foreground hover:bg-surface-3' |
|||
}`}
|
|||
> |
|||
{st.label} |
|||
</button> |
|||
) |
|||
})} |
|||
</div> |
|||
|
|||
{/* دکمه پاک کردن فیلترها */} |
|||
{(search || selectedStatus !== 'all' || selectedCategory !== 'all') && ( |
|||
<Button |
|||
variant="ghost" |
|||
size="sm" |
|||
onClick={handleResetFilters} |
|||
className="h-9 text-xs text-grey-3 hover:text-foreground shrink-0 rounded-xl" |
|||
> |
|||
<Ic name="x" className="size-3.5 me-1" /> |
|||
<span>{t('billing.clearFilters')}</span> |
|||
</Button> |
|||
)} |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
|
|||
{/* ۵. جدول جامع داده‌های کاربران (دقیقاً مطابق استایل Card و جدول در BillingPage) */} |
|||
<Card className="border-border-soft bg-card/40 shadow-xs overflow-hidden"> |
|||
<CardHeader className="py-3 px-4 border-b border-border-soft bg-card/60 flex flex-row items-center justify-between"> |
|||
<CardTitle className="text-xs font-bold flex items-center gap-2 text-foreground"> |
|||
<Ic name="list" className="size-4 text-primary" /> |
|||
<span>{t('users.userList')}</span> |
|||
{selectedCategory !== 'all' && ( |
|||
<Badge variant="outline" className="text-[10px] border-primary/30 text-primary"> |
|||
{t(CATEGORY_TABS.find((tab) => tab.id === selectedCategory)?.labelKey as any) || selectedCategory} |
|||
</Badge> |
|||
)} |
|||
</CardTitle> |
|||
<span className="text-xs text-grey-3 font-mono"> |
|||
{t('common.pageOf', { current: currentPage, total: totalPages })} |
|||
</span> |
|||
</CardHeader> |
|||
|
|||
<CardContent className="p-0"> |
|||
{/* خط انیمیشن لودینگ در بالای جدول هنگام بارگذاری مجدد */} |
|||
{loading && ( |
|||
<div className="h-0.5 bg-primary/20 overflow-hidden"> |
|||
<div className="h-full bg-primary animate-indeterminate origin-right" /> |
|||
</div> |
|||
)} |
|||
|
|||
{/* حالت عدم وجود داده */} |
|||
{!loading && users.length === 0 ? ( |
|||
<div className="p-12 text-center text-grey-3 space-y-3"> |
|||
<div className="size-14 rounded-2xl bg-muted/40 flex items-center justify-center mx-auto text-grey-3"> |
|||
<Ic name="users" className="size-7" /> |
|||
</div> |
|||
<p className="text-sm font-bold text-foreground">{t('users.noUsersFound')}</p> |
|||
<p className="text-xs text-grey-3 max-w-sm mx-auto"> |
|||
{search || selectedStatus !== 'all' || selectedCategory !== 'all' |
|||
? t('billing.noFactorsFilter') |
|||
: t('billing.noFactorsEmpty')} |
|||
</p> |
|||
{(search || selectedStatus !== 'all' || selectedCategory !== 'all') && ( |
|||
<Button variant="outline" size="sm" onClick={handleResetFilters} className="text-xs rounded-xl"> |
|||
{t('billing.clearFilters')} |
|||
</Button> |
|||
)} |
|||
</div> |
|||
) : ( |
|||
<div className="overflow-x-auto relative hidden md:block"> |
|||
<Table> |
|||
<TableHeader> |
|||
<TableRow className="hover:bg-transparent text-xs border-b border-border-soft bg-secondary/15 text-grey-2"> |
|||
<TableHead className="w-16 text-center">{t('users.colId')}</TableHead> |
|||
<TableHead className="min-w-[220px]">{t('users.colUser')}</TableHead> |
|||
<TableHead className="w-40">{t('users.colPhone')}</TableHead> |
|||
<TableHead className="min-w-[200px]">{t('users.colEmail')}</TableHead> |
|||
<TableHead className="w-32">{t('users.colDateJoined')}</TableHead> |
|||
<TableHead className="w-32">{t('users.colLastLogin')}</TableHead> |
|||
<TableHead className="w-28 text-center">{t('billing.liveStatus')}</TableHead> |
|||
<TableHead className="text-center w-36">{t('common.actions')}</TableHead> |
|||
</TableRow> |
|||
</TableHeader> |
|||
<TableBody> |
|||
{loading && users.length === 0 ? ( |
|||
Array.from({ length: 6 }).map((_, i) => ( |
|||
<TableRow key={i} className="animate-pulse"> |
|||
<TableCell className="p-3.5 text-center"><div className="h-4 w-10 bg-muted/60 rounded-md mx-auto" /></TableCell> |
|||
<TableCell className="p-3.5"> |
|||
<div className="flex items-center gap-2.5"> |
|||
<div className="size-9 rounded-full bg-muted/60 shrink-0" /> |
|||
<div className="space-y-1"> |
|||
<div className="h-4 w-28 bg-muted/60 rounded-md" /> |
|||
<div className="h-3 w-16 bg-muted/40 rounded-md" /> |
|||
</div> |
|||
</div> |
|||
</TableCell> |
|||
<TableCell className="p-3.5"><div className="h-4 w-24 bg-muted/60 rounded-md" /></TableCell> |
|||
<TableCell className="p-3.5"><div className="h-4 w-32 bg-muted/60 rounded-md" /></TableCell> |
|||
<TableCell className="p-3.5"><div className="h-4 w-20 bg-muted/60 rounded-md" /></TableCell> |
|||
<TableCell className="p-3.5"><div className="h-4 w-20 bg-muted/60 rounded-md" /></TableCell> |
|||
<TableCell className="p-3.5 text-center"><div className="h-6 w-16 bg-muted/60 rounded-full mx-auto" /></TableCell> |
|||
<TableCell className="p-3.5 text-center"><div className="h-8 w-24 bg-muted/60 rounded-xl mx-auto" /></TableCell> |
|||
</TableRow> |
|||
)) |
|||
) : ( |
|||
users.map((user) => { |
|||
const emailData = cleanEmail(user.email) |
|||
const phoneText = cleanPhoneNumber(user.phone_number) |
|||
|
|||
return ( |
|||
<TableRow |
|||
key={user.id} |
|||
onClick={() => navigate(`/users/${user.id}`)} |
|||
className="hover:bg-muted/30 transition-colors cursor-pointer group" |
|||
> |
|||
{/* شناسه */} |
|||
<TableCell className="p-3.5 text-center font-mono font-bold text-muted-foreground text-xs"> |
|||
#{user.id} |
|||
</TableCell> |
|||
|
|||
{/* اطلاعات کاربر */} |
|||
<TableCell className="p-3.5"> |
|||
<div className="flex items-center gap-3"> |
|||
{user.avatar ? ( |
|||
<img |
|||
src={user.avatar} |
|||
alt={user.fullname || 'User'} |
|||
className="size-9 rounded-full object-cover border border-border/60 shrink-0" |
|||
/> |
|||
) : ( |
|||
<div className="size-9 rounded-full bg-primary/10 text-primary border border-primary/20 flex items-center justify-center text-xs font-black shrink-0"> |
|||
{user.fullname && user.fullname.trim() |
|||
? user.fullname.slice(0, 2).toUpperCase() |
|||
: 'U'} |
|||
</div> |
|||
)} |
|||
|
|||
<div className="space-y-1"> |
|||
<div className="font-bold text-foreground group-hover:text-primary transition-colors text-xs sm:text-sm"> |
|||
{user.fullname && user.fullname.trim() |
|||
? user.fullname |
|||
: t('users.unnamedUser')} |
|||
</div> |
|||
|
|||
<div className="flex items-center gap-1.5 flex-wrap"> |
|||
{user.is_staff && ( |
|||
<span className="inline-flex px-2 py-0.5 rounded-md bg-primary/10 text-primary text-[11px] font-bold"> |
|||
{t('users.admin')} |
|||
</span> |
|||
)} |
|||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-muted/60 text-muted-foreground text-[11px] font-medium"> |
|||
<Ic name="map" className="size-3 text-muted-foreground/80 shrink-0" /> |
|||
<span> |
|||
<strong className="font-mono tabular-nums text-foreground/90 font-bold">{user.tour_orders_count}</strong>{' '} |
|||
{t('users.toursCount')} |
|||
</span> |
|||
</span> |
|||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-muted/60 text-muted-foreground text-[11px] font-medium"> |
|||
<Ic name="receipt" className="size-3 text-muted-foreground/80 shrink-0" /> |
|||
<span> |
|||
<strong className="font-mono tabular-nums text-foreground/90 font-bold">{user.factors_count}</strong>{' '} |
|||
{t('users.invoicesCount')} |
|||
</span> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</TableCell> |
|||
|
|||
{/* شماره موبایل */} |
|||
<TableCell className="p-3.5"> |
|||
<span dir="ltr" className="font-mono text-xs inline-block text-start text-foreground/90 font-medium tabular-nums"> |
|||
{phoneText} |
|||
</span> |
|||
</TableCell> |
|||
|
|||
{/* ایمیل */} |
|||
<TableCell className="p-3.5"> |
|||
<div className="flex items-center gap-1.5 max-w-[220px]"> |
|||
<span |
|||
dir="ltr" |
|||
className="font-mono text-xs text-muted-foreground truncate block" |
|||
title={emailData.text} |
|||
> |
|||
{emailData.text} |
|||
</span> |
|||
{emailData.isDeleted && ( |
|||
<span className="px-1.5 py-0.5 rounded-md bg-rose-500/10 text-rose-600 dark:text-rose-400 text-[10px] font-bold shrink-0"> |
|||
{t('users.deletedAccount')} |
|||
</span> |
|||
)} |
|||
</div> |
|||
</TableCell> |
|||
|
|||
{/* تاریخ عضویت */} |
|||
<TableCell className="p-3.5 text-xs text-muted-foreground whitespace-nowrap"> |
|||
{formatDateByLanguage(user.date_joined, language as any)} |
|||
</TableCell> |
|||
|
|||
{/* آخرین ورود */} |
|||
<TableCell className="p-3.5 text-xs text-muted-foreground whitespace-nowrap"> |
|||
{formatDateByLanguage(user.last_login, language as any)} |
|||
</TableCell> |
|||
|
|||
{/* وضعیت زنده (کپسولی مطابق BillingStatusBadge) */} |
|||
<TableCell className="p-3.5 text-center"> |
|||
{user.is_active ? ( |
|||
<span className="inline-flex items-center gap-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 px-2.5 py-1 text-xs font-bold text-emerald-600 dark:text-emerald-400 whitespace-nowrap"> |
|||
<span className="size-1.5 rounded-full bg-emerald-500" /> |
|||
<span>{t('users.active')}</span> |
|||
</span> |
|||
) : ( |
|||
<span className="inline-flex items-center gap-1.5 rounded-full bg-rose-500/10 border border-rose-500/20 px-2.5 py-1 text-xs font-bold text-rose-600 dark:text-rose-400 whitespace-nowrap"> |
|||
<span className="size-1.5 rounded-full bg-rose-500" /> |
|||
<span>{t('users.inactive')}</span> |
|||
</span> |
|||
)} |
|||
</TableCell> |
|||
|
|||
{/* دکمه عملیات (با آیکون چشم مشابه BillingPage) */} |
|||
<TableCell className="p-3.5 text-center" onClick={(e) => e.stopPropagation()}> |
|||
<Button |
|||
variant="default" |
|||
size="sm" |
|||
className="h-8 px-3 text-xs gap-1.5 rounded-lg font-bold shadow-2xs hover:brightness-105 active:scale-[0.98] transition-all shrink-0" |
|||
onClick={() => navigate(`/users/${user.id}`)} |
|||
> |
|||
<Ic name="eye" className="size-3.5" /> |
|||
<span>{t('users.viewDetails')}</span> |
|||
</Button> |
|||
</TableCell> |
|||
</TableRow> |
|||
) |
|||
}) |
|||
)} |
|||
</TableBody> |
|||
</Table> |
|||
</div> |
|||
)} |
|||
|
|||
{/* نمای کارت‌های موبایل (زیر md) */} |
|||
<div className="flex flex-col gap-3 p-4 md:hidden"> |
|||
{loading && users.length === 0 ? ( |
|||
Array.from({ length: 4 }).map((_, i) => ( |
|||
<div key={i} className="h-32 rounded-2xl bg-muted/40 border border-border/40 animate-pulse" /> |
|||
)) |
|||
) : ( |
|||
users.map((user) => { |
|||
const emailData = cleanEmail(user.email) |
|||
const phoneText = cleanPhoneNumber(user.phone_number) |
|||
|
|||
return ( |
|||
<div |
|||
key={user.id} |
|||
onClick={() => navigate(`/users/${user.id}`)} |
|||
className="bg-card border border-border-soft rounded-2xl p-4 shadow-xs space-y-3 cursor-pointer hover:border-primary/40 transition-colors" |
|||
> |
|||
<div className="flex items-start justify-between gap-2 border-b border-border-soft pb-3"> |
|||
<div className="flex items-center gap-2.5"> |
|||
<div className="size-9 rounded-full bg-primary/10 text-primary border border-primary/20 flex items-center justify-center text-xs font-black shrink-0"> |
|||
{user.fullname && user.fullname.trim() ? user.fullname.slice(0, 2).toUpperCase() : 'U'} |
|||
</div> |
|||
<div> |
|||
<div className="font-bold text-xs sm:text-sm text-foreground"> |
|||
{user.fullname && user.fullname.trim() ? user.fullname : t('users.unnamedUser')} |
|||
</div> |
|||
<span className="font-mono text-xs text-muted-foreground">#{user.id}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div> |
|||
{user.is_active ? ( |
|||
<span className="inline-flex items-center gap-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 px-2.5 py-0.5 text-xs font-bold text-emerald-600 dark:text-emerald-400"> |
|||
<span className="size-1.5 rounded-full bg-emerald-500" /> |
|||
<span>{t('users.active')}</span> |
|||
</span> |
|||
) : ( |
|||
<span className="inline-flex items-center gap-1.5 rounded-full bg-rose-500/10 border border-rose-500/20 px-2.5 py-0.5 text-xs font-bold text-rose-600 dark:text-rose-400"> |
|||
<span className="size-1.5 rounded-full bg-rose-500" /> |
|||
<span>{t('users.inactive')}</span> |
|||
</span> |
|||
)} |
|||
</div> |
|||
</div> |
|||
|
|||
<div className="space-y-1.5 text-xs"> |
|||
<div className="flex justify-between"> |
|||
<span className="text-muted-foreground">{t('users.colPhone')}:</span> |
|||
<span dir="ltr" className="font-mono font-medium text-foreground/90 tabular-nums">{phoneText}</span> |
|||
</div> |
|||
<div className="flex justify-between"> |
|||
<span className="text-muted-foreground">{t('users.colEmail')}:</span> |
|||
<span dir="ltr" className="font-mono truncate max-w-[180px] text-muted-foreground">{emailData.text}</span> |
|||
</div> |
|||
<div className="flex justify-between"> |
|||
<span className="text-muted-foreground">{t('users.colDateJoined')}:</span> |
|||
<span className="text-muted-foreground">{formatDateByLanguage(user.date_joined, language as any)}</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className="pt-2 border-t border-border-soft flex items-center justify-between"> |
|||
<div className="flex items-center gap-2 text-xs text-muted-foreground"> |
|||
<span> |
|||
<strong className="font-mono tabular-nums text-foreground/90 font-bold">{user.tour_orders_count}</strong>{' '} |
|||
{t('users.toursCount')} |
|||
</span> |
|||
<span>•</span> |
|||
<span> |
|||
<strong className="font-mono tabular-nums text-foreground/90 font-bold">{user.factors_count}</strong>{' '} |
|||
{t('users.invoicesCount')} |
|||
</span> |
|||
</div> |
|||
|
|||
<Button |
|||
variant="default" |
|||
size="sm" |
|||
className="h-7 px-3 text-xs gap-1 rounded-lg font-bold" |
|||
onClick={(e) => { |
|||
e.stopPropagation() |
|||
navigate(`/users/${user.id}`) |
|||
}} |
|||
> |
|||
<Ic name="eye" className="size-3" /> |
|||
<span>{t('users.viewDetails')}</span> |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
) |
|||
}) |
|||
)} |
|||
</div> |
|||
|
|||
{/* ۶. صفحه‌بندی هوشمند شماره‌دار با قابلیت کلیک (پاورقی کارت جدول مطابق با BillingPage) */} |
|||
<div className="p-3.5 border-t border-border-soft flex flex-col sm:flex-row items-center justify-between gap-3 text-xs bg-card/60"> |
|||
<span className="text-grey-3 font-medium"> |
|||
{t('common.showing')} {(currentPage - 1) * PAGE_SIZE + 1} {t('common.to')}{' '} |
|||
{Math.min(currentPage * PAGE_SIZE, totalCount)} {t('common.of')} {totalCount} {t('users.colUser')} |
|||
</span> |
|||
|
|||
<div className="flex items-center gap-1.5 flex-wrap justify-center"> |
|||
{/* دکمه قبلی */} |
|||
<button |
|||
type="button" |
|||
disabled={offset === 0 || loading} |
|||
onClick={handlePrevPage} |
|||
className="h-8 px-3 rounded-xl bg-card border border-border-soft text-xs font-bold hover:bg-muted/40 disabled:opacity-40 disabled:cursor-not-allowed transition-all shadow-2xs flex items-center gap-1 text-foreground" |
|||
> |
|||
<Ic name="arrowRight" className="size-3 rtl:rotate-0 rotate-180" /> |
|||
<span>{t('users.previous')}</span> |
|||
</button> |
|||
|
|||
{/* شماره صفحات هوشمند و قابل کلیک */} |
|||
{paginationItems.map((item, idx) => { |
|||
if (item === 'ellipsis') { |
|||
return ( |
|||
<span |
|||
key={`ellipsis-${idx}`} |
|||
className="size-8 flex items-center justify-center font-mono text-muted-foreground font-bold" |
|||
> |
|||
… |
|||
</span> |
|||
) |
|||
} |
|||
|
|||
const pageNum = item |
|||
const isActive = pageNum === currentPage |
|||
|
|||
return ( |
|||
<button |
|||
key={`page-${pageNum}`} |
|||
type="button" |
|||
onClick={() => setOffset((pageNum - 1) * PAGE_SIZE)} |
|||
disabled={loading} |
|||
className={`min-w-8 h-8 px-2.5 rounded-xl font-mono text-xs font-bold transition-all flex items-center justify-center ${ |
|||
isActive |
|||
? 'bg-primary text-white shadow-xs border border-primary' |
|||
: 'bg-card border border-border-soft text-muted-foreground hover:text-foreground hover:bg-muted/40 shadow-2xs' |
|||
}`}
|
|||
> |
|||
{pageNum} |
|||
</button> |
|||
) |
|||
})} |
|||
|
|||
{/* دکمه بعدی */} |
|||
<button |
|||
type="button" |
|||
disabled={offset + PAGE_SIZE >= totalCount || loading} |
|||
onClick={handleNextPage} |
|||
className="h-8 px-3 rounded-xl bg-card border border-border-soft text-xs font-bold hover:bg-muted/40 disabled:opacity-40 disabled:cursor-not-allowed transition-all shadow-2xs flex items-center gap-1 text-foreground" |
|||
> |
|||
<span>{t('users.next')}</span> |
|||
<Ic name="arrowRight" className="size-3 rtl:rotate-180 rotate-0" /> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
</div> |
|||
) |
|||
} |
|||
@ -0,0 +1,297 @@ |
|||
import * as React from 'react' |
|||
import { useTranslation } from '@/i18n' |
|||
import type { UserFactorItem } from '../types' |
|||
import { fetchUserFactors } from '../services/users-api' |
|||
import { Ic } from '@/icons' |
|||
|
|||
interface UserFactorsTabProps { |
|||
userId: number |
|||
} |
|||
|
|||
type ServiceFilter = 'all' | 'simcard' | 'tasrif' | 'shop' | 'tour' | 'custom_trip' |
|||
|
|||
export function UserFactorsTab({ userId }: UserFactorsTabProps) { |
|||
const { t } = useTranslation() |
|||
const [service, setService] = React.useState<ServiceFilter>('all') |
|||
const [loading, setLoading] = React.useState(true) |
|||
const [factors, setFactors] = React.useState<UserFactorItem[]>([]) |
|||
const [receiptModalUrl, setReceiptModalUrl] = React.useState<string | null>(null) |
|||
|
|||
const loadFactors = React.useCallback(async () => { |
|||
setLoading(true) |
|||
try { |
|||
const res = await fetchUserFactors(userId, service === 'all' ? undefined : service) |
|||
setFactors(res.results || []) |
|||
} catch (err) { |
|||
console.error('Failed to load user factors:', err) |
|||
setFactors([]) |
|||
} finally { |
|||
setLoading(false) |
|||
} |
|||
}, [userId, service]) |
|||
|
|||
React.useEffect(() => { |
|||
loadFactors() |
|||
}, [loadFactors]) |
|||
|
|||
const formatDate = (isoString: string) => { |
|||
try { |
|||
const d = new Date(isoString) |
|||
return d.toLocaleDateString('fa-IR', { |
|||
year: 'numeric', |
|||
month: '2-digit', |
|||
day: '2-digit', |
|||
hour: '2-digit', |
|||
minute: '2-digit', |
|||
}) |
|||
} catch { |
|||
return isoString?.slice(0, 10) || '—' |
|||
} |
|||
} |
|||
|
|||
const getServiceLabel = (srv: string) => { |
|||
switch (srv) { |
|||
case 'simcard': |
|||
return t('users.invoicesSimcard') |
|||
case 'tasrif': |
|||
return t('users.invoicesExchange') |
|||
case 'shop': |
|||
return t('users.invoicesShop') |
|||
case 'tour': |
|||
return t('users.invoicesTour') |
|||
case 'custom_trip': |
|||
return t('users.invoicesOther') |
|||
default: |
|||
return srv |
|||
} |
|||
} |
|||
|
|||
const getStatusBadge = (status: string) => { |
|||
switch (status) { |
|||
case 'approved': |
|||
return ( |
|||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"> |
|||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-500" /> |
|||
{t('billing.statusApproved')} |
|||
</span> |
|||
) |
|||
case 'pending': |
|||
return ( |
|||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-500/10 text-amber-600 dark:text-amber-400"> |
|||
<span className="w-1.5 h-1.5 rounded-full bg-amber-500" /> |
|||
{t('billing.statusPending')} |
|||
</span> |
|||
) |
|||
case 'awaiting_payment': |
|||
return ( |
|||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-600 dark:text-blue-400"> |
|||
<span className="w-1.5 h-1.5 rounded-full bg-blue-500" /> |
|||
{t('billing.statusAwaiting')} |
|||
</span> |
|||
) |
|||
case 'rejected': |
|||
return ( |
|||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-rose-500/10 text-rose-600 dark:text-rose-400"> |
|||
<span className="w-1.5 h-1.5 rounded-full bg-rose-500" /> |
|||
{t('billing.statusRejected')} |
|||
</span> |
|||
) |
|||
case 'expired': |
|||
return ( |
|||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-500/10 text-slate-600 dark:text-slate-400"> |
|||
<span className="w-1.5 h-1.5 rounded-full bg-slate-500" /> |
|||
{t('billing.statusExpired')} |
|||
</span> |
|||
) |
|||
default: |
|||
return ( |
|||
<span className="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-muted text-muted-foreground"> |
|||
{status} |
|||
</span> |
|||
) |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<div className="space-y-4 sm:space-y-6"> |
|||
{/* ساب‌تب‌های کپسولی برای دسته‌بندی فاکتورها بر اساس نوع سرویس */} |
|||
<div className="flex flex-wrap items-center gap-2 p-1.5 rounded-2xl bg-muted/40 border border-border/40 w-fit"> |
|||
<button |
|||
type="button" |
|||
onClick={() => setService('all')} |
|||
className={`px-3 py-1.5 rounded-xl text-xs sm:text-sm font-semibold transition-all ${ |
|||
service === 'all' |
|||
? 'bg-card text-foreground shadow-xs border border-border/60' |
|||
: 'text-muted-foreground hover:text-foreground' |
|||
}`}
|
|||
> |
|||
{t('users.invoicesAll')} |
|||
</button> |
|||
<button |
|||
type="button" |
|||
onClick={() => setService('simcard')} |
|||
className={`px-3 py-1.5 rounded-xl text-xs sm:text-sm font-semibold transition-all ${ |
|||
service === 'simcard' |
|||
? 'bg-card text-foreground shadow-xs border border-border/60' |
|||
: 'text-muted-foreground hover:text-foreground' |
|||
}`}
|
|||
> |
|||
{t('users.invoicesSimcard')} |
|||
</button> |
|||
<button |
|||
type="button" |
|||
onClick={() => setService('tasrif')} |
|||
className={`px-3 py-1.5 rounded-xl text-xs sm:text-sm font-semibold transition-all ${ |
|||
service === 'tasrif' |
|||
? 'bg-card text-foreground shadow-xs border border-border/60' |
|||
: 'text-muted-foreground hover:text-foreground' |
|||
}`}
|
|||
> |
|||
{t('users.invoicesExchange')} |
|||
</button> |
|||
<button |
|||
type="button" |
|||
onClick={() => setService('shop')} |
|||
className={`px-3 py-1.5 rounded-xl text-xs sm:text-sm font-semibold transition-all ${ |
|||
service === 'shop' |
|||
? 'bg-card text-foreground shadow-xs border border-border/60' |
|||
: 'text-muted-foreground hover:text-foreground' |
|||
}`}
|
|||
> |
|||
{t('users.invoicesShop')} |
|||
</button> |
|||
<button |
|||
type="button" |
|||
onClick={() => setService('tour')} |
|||
className={`px-3 py-1.5 rounded-xl text-xs sm:text-sm font-semibold transition-all ${ |
|||
service === 'tour' |
|||
? 'bg-card text-foreground shadow-xs border border-border/60' |
|||
: 'text-muted-foreground hover:text-foreground' |
|||
}`}
|
|||
> |
|||
{t('users.invoicesTour')} |
|||
</button> |
|||
<button |
|||
type="button" |
|||
onClick={() => setService('custom_trip')} |
|||
className={`px-3 py-1.5 rounded-xl text-xs sm:text-sm font-semibold transition-all ${ |
|||
service === 'custom_trip' |
|||
? 'bg-card text-foreground shadow-xs border border-border/60' |
|||
: 'text-muted-foreground hover:text-foreground' |
|||
}`}
|
|||
> |
|||
{t('users.invoicesOther')} |
|||
</button> |
|||
</div> |
|||
|
|||
{/* لیست فاکتورها */} |
|||
{loading ? ( |
|||
<div className="space-y-3"> |
|||
{[1, 2, 3, 4].map((i) => ( |
|||
<div |
|||
key={i} |
|||
className="h-16 rounded-2xl bg-muted/40 border border-border/40 animate-pulse" |
|||
/> |
|||
))} |
|||
</div> |
|||
) : factors.length === 0 ? ( |
|||
<div className="p-8 text-center bg-card border border-border/60 rounded-2xl"> |
|||
<div className="mx-auto w-10 h-10 rounded-full bg-muted/50 flex items-center justify-center text-muted-foreground mb-3"> |
|||
<Ic name="receipt" className="w-5 h-5" /> |
|||
</div> |
|||
<p className="text-sm font-medium text-foreground mb-1"> |
|||
{t('users.noInvoicesFound')} |
|||
</p> |
|||
<p className="text-xs text-muted-foreground"> |
|||
{t('billing.noFactorsFilter')} |
|||
</p> |
|||
</div> |
|||
) : ( |
|||
<div className="bg-card border border-border/60 rounded-2xl overflow-hidden shadow-xs"> |
|||
<div className="overflow-x-auto"> |
|||
<table className="w-full text-start text-xs sm:text-sm"> |
|||
<thead> |
|||
<tr className="border-b border-border/60 text-muted-foreground bg-muted/20"> |
|||
<th className="py-3 px-4 text-start font-medium">{t('users.invoiceId')}</th> |
|||
<th className="py-3 px-4 text-start font-medium">{t('users.serviceType')}</th> |
|||
<th className="py-3 px-4 text-start font-medium">{t('users.amount')}</th> |
|||
<th className="py-3 px-4 text-start font-medium">{t('users.createdDate')}</th> |
|||
<th className="py-3 px-4 text-start font-medium">{t('users.status')}</th> |
|||
<th className="py-3 px-4 text-center font-medium">{t('users.receipt')}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody className="divide-y divide-border/30"> |
|||
{factors.map((f) => ( |
|||
<tr key={f.id} className="hover:bg-muted/30 transition-colors"> |
|||
<td className="py-3 px-4 font-mono font-semibold text-foreground"> |
|||
#{f.id} |
|||
</td> |
|||
<td className="py-3 px-4"> |
|||
<span className="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-muted text-foreground"> |
|||
{getServiceLabel(f.service)} |
|||
</span> |
|||
</td> |
|||
<td className="py-3 px-4 font-mono font-bold text-foreground"> |
|||
${Number(f.amount || 0).toLocaleString()} |
|||
</td> |
|||
<td className="py-3 px-4 font-mono text-muted-foreground"> |
|||
{formatDate(f.created_at)} |
|||
</td> |
|||
<td className="py-3 px-4">{getStatusBadge(f.status)}</td> |
|||
<td className="py-3 px-4 text-center"> |
|||
{f.transaction_receipt ? ( |
|||
<button |
|||
type="button" |
|||
onClick={() => setReceiptModalUrl(f.transaction_receipt)} |
|||
className="inline-flex items-center gap-1 px-2.5 py-1 rounded-xl text-xs font-semibold bg-primary/10 text-primary hover:bg-primary/20 transition-colors" |
|||
> |
|||
<Ic name="image" className="w-3.5 h-3.5" /> |
|||
<span>{t('billing.viewReceipt')}</span> |
|||
</button> |
|||
) : ( |
|||
<span className="text-xs text-muted-foreground">—</span> |
|||
)} |
|||
</td> |
|||
</tr> |
|||
))} |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
)} |
|||
|
|||
{/* مدال مشاهده فیش پرداخت */} |
|||
{receiptModalUrl && ( |
|||
<div |
|||
className="fixed inset-0 z-50 bg-black/70 flex items-center justify-center p-4 backdrop-blur-xs" |
|||
onClick={() => setReceiptModalUrl(null)} |
|||
> |
|||
<div |
|||
className="bg-card border border-border/80 rounded-2xl max-w-lg w-full p-4 overflow-hidden relative shadow-2xl" |
|||
onClick={(e) => e.stopPropagation()} |
|||
> |
|||
<div className="flex items-center justify-between pb-3 mb-3 border-b border-border/50"> |
|||
<h3 className="text-sm font-bold text-foreground"> |
|||
{t('billing.receiptModalTitle')} |
|||
</h3> |
|||
<button |
|||
type="button" |
|||
onClick={() => setReceiptModalUrl(null)} |
|||
className="p-1 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground" |
|||
> |
|||
<Ic name="x" className="w-4 h-4" /> |
|||
</button> |
|||
</div> |
|||
<div className="max-h-[70vh] overflow-auto rounded-xl bg-black/5 flex items-center justify-center p-2"> |
|||
<img |
|||
src={receiptModalUrl} |
|||
alt="Receipt" |
|||
className="max-h-full max-w-full object-contain rounded-lg" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
)} |
|||
</div> |
|||
) |
|||
} |
|||
@ -0,0 +1,216 @@ |
|||
import * as React from 'react' |
|||
import { useTranslation } from '@/i18n' |
|||
import type { UserDetail } from '../types' |
|||
import { Ic } from '@/icons' |
|||
|
|||
interface UserProfileTabProps { |
|||
user: UserDetail |
|||
} |
|||
|
|||
export function UserProfileTab({ user }: UserProfileTabProps) { |
|||
const { t } = useTranslation() |
|||
|
|||
const formatDate = (isoString: string | null) => { |
|||
if (!isoString) return t('users.noData') |
|||
try { |
|||
const d = new Date(isoString) |
|||
return d.toLocaleDateString('fa-IR', { |
|||
year: 'numeric', |
|||
month: '2-digit', |
|||
day: '2-digit', |
|||
hour: '2-digit', |
|||
minute: '2-digit', |
|||
}) |
|||
} catch { |
|||
return isoString |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<div className="space-y-6"> |
|||
{/* ۱. کارت اطلاعات پایه حساب کاربری */} |
|||
<div className="bg-card border border-border/60 rounded-2xl p-5 sm:p-6 shadow-xs"> |
|||
<div className="flex items-center gap-2 mb-5 pb-3 border-b border-border/40"> |
|||
<span className="p-2 rounded-xl bg-primary/10 text-primary"> |
|||
<Ic name="user" className="w-5 h-5" /> |
|||
</span> |
|||
<div> |
|||
<h2 className="text-base font-bold text-foreground"> |
|||
{t('users.profileInfo')} |
|||
</h2> |
|||
<p className="text-xs text-muted-foreground"> |
|||
{t('users.subtitle')} |
|||
</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6"> |
|||
{/* نام و نام خانوادگی */} |
|||
<div className="p-3.5 rounded-xl bg-muted/40 border border-border/30"> |
|||
<span className="block text-xs font-medium text-muted-foreground mb-1"> |
|||
{t('users.fullname')} |
|||
</span> |
|||
<span className="text-sm font-semibold text-foreground"> |
|||
{user.fullname || t('users.noData')} |
|||
</span> |
|||
</div> |
|||
|
|||
{/* شماره تلفن همراه */} |
|||
<div className="p-3.5 rounded-xl bg-muted/40 border border-border/30"> |
|||
<span className="block text-xs font-medium text-muted-foreground mb-1"> |
|||
{t('users.phone')} |
|||
</span> |
|||
<span className="text-sm font-mono font-medium text-foreground dir-ltr text-end block"> |
|||
{user.phone_number ? user.phone_number.split(':deleted')[0].trim() : t('users.noData')} |
|||
</span> |
|||
</div> |
|||
|
|||
{/* ایمیل حساب */} |
|||
<div className="p-3.5 rounded-xl bg-muted/40 border border-border/30"> |
|||
<div className="flex items-center justify-between mb-1"> |
|||
<span className="block text-xs font-medium text-muted-foreground"> |
|||
{t('users.email')} |
|||
</span> |
|||
{user.email && user.email.includes(':deleted') && ( |
|||
<span className="px-1.5 py-0.2 rounded-md bg-rose-500/10 text-rose-600 dark:text-rose-400 text-[10px] font-bold"> |
|||
{t('users.deletedAccount')} |
|||
</span> |
|||
)} |
|||
</div> |
|||
<span className="text-sm font-mono font-medium text-foreground dir-ltr text-end truncate block"> |
|||
{user.email ? user.email.split(':deleted')[0].trim() : t('users.noData')} |
|||
</span> |
|||
</div> |
|||
|
|||
{/* سطح دسترسی */} |
|||
<div className="p-3.5 rounded-xl bg-muted/40 border border-border/30"> |
|||
<span className="block text-xs font-medium text-muted-foreground mb-1"> |
|||
{t('users.role')} |
|||
</span> |
|||
<span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary"> |
|||
<Ic name="shield" className="w-3.5 h-3.5" /> |
|||
{user.is_staff || user.is_superuser ? t('users.admin') : t('users.regularUser')} |
|||
</span> |
|||
</div> |
|||
|
|||
{/* وضعیت اکانت */} |
|||
<div className="p-3.5 rounded-xl bg-muted/40 border border-border/30"> |
|||
<span className="block text-xs font-medium text-muted-foreground mb-1"> |
|||
{t('users.colStatus')} |
|||
</span> |
|||
<span |
|||
className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium ${ |
|||
user.is_active |
|||
? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400' |
|||
: 'bg-rose-500/10 text-rose-600 dark:text-rose-400' |
|||
}`}
|
|||
> |
|||
<span |
|||
className={`w-1.5 h-1.5 rounded-full ${ |
|||
user.is_active ? 'bg-emerald-500' : 'bg-rose-500' |
|||
}`}
|
|||
/> |
|||
{user.is_active ? t('users.active') : t('users.inactive')} |
|||
</span> |
|||
</div> |
|||
|
|||
{/* زبان انتخابی کاربر */} |
|||
<div className="p-3.5 rounded-xl bg-muted/40 border border-border/30"> |
|||
<span className="block text-xs font-medium text-muted-foreground mb-1"> |
|||
{t('users.language')} |
|||
</span> |
|||
<span className="text-sm font-medium text-foreground uppercase"> |
|||
{user.language || 'fa'} |
|||
</span> |
|||
</div> |
|||
|
|||
{/* تاریخ ثبت‌نام */} |
|||
<div className="p-3.5 rounded-xl bg-muted/40 border border-border/30"> |
|||
<span className="block text-xs font-medium text-muted-foreground mb-1"> |
|||
{t('users.colDateJoined')} |
|||
</span> |
|||
<span className="text-sm font-mono text-foreground"> |
|||
{formatDate(user.date_joined)} |
|||
</span> |
|||
</div> |
|||
|
|||
{/* آخرین ورود به سیستم */} |
|||
<div className="p-3.5 rounded-xl bg-muted/40 border border-border/30"> |
|||
<span className="block text-xs font-medium text-muted-foreground mb-1"> |
|||
{t('users.colLastLogin')} |
|||
</span> |
|||
<span className="text-sm font-mono text-foreground"> |
|||
{formatDate(user.last_login)} |
|||
</span> |
|||
</div> |
|||
|
|||
{/* شناسه دستگاه */} |
|||
<div className="p-3.5 rounded-xl bg-muted/40 border border-border/30"> |
|||
<span className="block text-xs font-medium text-muted-foreground mb-1"> |
|||
{t('users.deviceId')} |
|||
</span> |
|||
<span className="text-xs font-mono text-muted-foreground truncate block"> |
|||
{user.device_id || t('users.noData')} |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* ۲. بخش مسافران و همراهان ثبت‌شده */} |
|||
<div className="bg-card border border-border/60 rounded-2xl p-5 sm:p-6 shadow-xs"> |
|||
<div className="flex items-center justify-between mb-4 pb-3 border-b border-border/40"> |
|||
<div className="flex items-center gap-2"> |
|||
<span className="p-2 rounded-xl bg-amber-500/10 text-amber-600 dark:text-amber-400"> |
|||
<Ic name="users" className="w-5 h-5" /> |
|||
</span> |
|||
<div> |
|||
<h3 className="text-sm sm:text-base font-bold text-foreground"> |
|||
{t('users.passengersTitle')} |
|||
</h3> |
|||
<p className="text-xs text-muted-foreground"> |
|||
{user.passengers.length} {t('users.passengersTitle')} |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
{user.passengers.length === 0 ? ( |
|||
<div className="py-8 text-center text-xs text-muted-foreground"> |
|||
{t('users.noPassengers')} |
|||
</div> |
|||
) : ( |
|||
<div className="overflow-x-auto"> |
|||
<table className="w-full text-start text-xs sm:text-sm"> |
|||
<thead> |
|||
<tr className="border-b border-border/60 text-muted-foreground"> |
|||
<th className="py-2.5 px-3 text-start font-medium">#</th> |
|||
<th className="py-2.5 px-3 text-start font-medium">{t('users.fullname')}</th> |
|||
<th className="py-2.5 px-3 text-start font-medium">{t('users.passportNumber')}</th> |
|||
<th className="py-2.5 px-3 text-start font-medium">{t('users.birthdate')}</th> |
|||
<th className="py-2.5 px-3 text-start font-medium">{t('users.phone')}</th> |
|||
<th className="py-2.5 px-3 text-start font-medium">{t('users.ageCategory')}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody className="divide-y divide-border/30"> |
|||
{user.passengers.map((p, idx) => ( |
|||
<tr key={p.id} className="hover:bg-muted/30 transition-colors"> |
|||
<td className="py-3 px-3 font-mono text-muted-foreground">{idx + 1}</td> |
|||
<td className="py-3 px-3 font-semibold text-foreground">{p.fullname || t('users.noData')}</td> |
|||
<td className="py-3 px-3 font-mono text-foreground">{p.passport_number || '—'}</td> |
|||
<td className="py-3 px-3 font-mono text-muted-foreground">{p.birthdate || '—'}</td> |
|||
<td className="py-3 px-3 font-mono dir-ltr text-end">{p.phone_number || '—'}</td> |
|||
<td className="py-3 px-3"> |
|||
<span className="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-muted text-foreground"> |
|||
{p.age_category} |
|||
</span> |
|||
</td> |
|||
</tr> |
|||
))} |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
)} |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
@ -0,0 +1,236 @@ |
|||
import * as React from 'react' |
|||
import { useTranslation } from '@/i18n' |
|||
import type { UserTourItem } from '../types' |
|||
import { fetchUserTours } from '../services/users-api' |
|||
import { Ic } from '@/icons' |
|||
|
|||
interface UserToursTabProps { |
|||
userId: number |
|||
} |
|||
|
|||
type TimelineFilter = 'all' | 'active' | 'upcoming' | 'past' |
|||
|
|||
export function UserToursTab({ userId }: UserToursTabProps) { |
|||
const { t } = useTranslation() |
|||
const [timeline, setTimeline] = React.useState<TimelineFilter>('all') |
|||
const [loading, setLoading] = React.useState(true) |
|||
const [tours, setTours] = React.useState<UserTourItem[]>([]) |
|||
|
|||
const loadTours = React.useCallback(async () => { |
|||
setLoading(true) |
|||
try { |
|||
const res = await fetchUserTours(userId, timeline) |
|||
setTours(res.results || []) |
|||
} catch (err) { |
|||
console.error('Failed to load user tours:', err) |
|||
setTours([]) |
|||
} finally { |
|||
setLoading(false) |
|||
} |
|||
}, [userId, timeline]) |
|||
|
|||
React.useEffect(() => { |
|||
loadTours() |
|||
}, [loadTours]) |
|||
|
|||
const formatDate = (isoDate: string | null | undefined) => { |
|||
if (!isoDate) return '—' |
|||
return isoDate |
|||
} |
|||
|
|||
const getOrderStatusBadge = (status: string) => { |
|||
switch (status) { |
|||
case 'APPROVED': |
|||
return ( |
|||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"> |
|||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-500" /> |
|||
{t('billing.statusApproved')} |
|||
</span> |
|||
) |
|||
case 'PENDING': |
|||
return ( |
|||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-500/10 text-amber-600 dark:text-amber-400"> |
|||
<span className="w-1.5 h-1.5 rounded-full bg-amber-500" /> |
|||
{t('billing.statusPending')} |
|||
</span> |
|||
) |
|||
case 'AWAITING_PAYMENT': |
|||
return ( |
|||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-600 dark:text-blue-400"> |
|||
<span className="w-1.5 h-1.5 rounded-full bg-blue-500" /> |
|||
{t('billing.statusAwaiting')} |
|||
</span> |
|||
) |
|||
case 'REJECTED': |
|||
return ( |
|||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-rose-500/10 text-rose-600 dark:text-rose-400"> |
|||
<span className="w-1.5 h-1.5 rounded-full bg-rose-500" /> |
|||
{t('billing.statusRejected')} |
|||
</span> |
|||
) |
|||
case 'EXPIRED': |
|||
return ( |
|||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-500/10 text-slate-600 dark:text-slate-400"> |
|||
<span className="w-1.5 h-1.5 rounded-full bg-slate-500" /> |
|||
{t('billing.statusExpired')} |
|||
</span> |
|||
) |
|||
default: |
|||
return ( |
|||
<span className="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-muted text-muted-foreground"> |
|||
{status} |
|||
</span> |
|||
) |
|||
} |
|||
} |
|||
|
|||
const getTripStatusBadge = (tripStatus: string | null | undefined) => { |
|||
if (!tripStatus) return null |
|||
let colorClass = 'bg-muted text-muted-foreground' |
|||
if (tripStatus === 'TRAVELING') { |
|||
colorClass = 'bg-primary/10 text-primary font-semibold' |
|||
} else if (tripStatus === 'FINISHED' || tripStatus === 'COMPLETED') { |
|||
colorClass = 'bg-muted/60 text-muted-foreground' |
|||
} else if (tripStatus === 'PENDING') { |
|||
colorClass = 'bg-amber-500/10 text-amber-600 dark:text-amber-400' |
|||
} |
|||
|
|||
return ( |
|||
<span className={`inline-flex px-2 py-0.5 rounded-full text-[11px] ${colorClass}`}> |
|||
{tripStatus} |
|||
</span> |
|||
) |
|||
} |
|||
|
|||
return ( |
|||
<div className="space-y-4 sm:space-y-6"> |
|||
{/* ساب‌تب‌های کپسولی برای فیلتر وضعیت‌های زمانی تور */} |
|||
<div className="flex flex-wrap items-center gap-2 p-1.5 rounded-2xl bg-muted/40 border border-border/40 w-fit"> |
|||
<button |
|||
type="button" |
|||
onClick={() => setTimeline('all')} |
|||
className={`px-3 py-1.5 rounded-xl text-xs sm:text-sm font-semibold transition-all ${ |
|||
timeline === 'all' |
|||
? 'bg-card text-foreground shadow-xs border border-border/60' |
|||
: 'text-muted-foreground hover:text-foreground' |
|||
}`}
|
|||
> |
|||
{t('users.toursAll')} |
|||
</button> |
|||
<button |
|||
type="button" |
|||
onClick={() => setTimeline('active')} |
|||
className={`px-3 py-1.5 rounded-xl text-xs sm:text-sm font-semibold transition-all ${ |
|||
timeline === 'active' |
|||
? 'bg-card text-primary shadow-xs border border-border/60' |
|||
: 'text-muted-foreground hover:text-foreground' |
|||
}`}
|
|||
> |
|||
{t('users.toursActive')} |
|||
</button> |
|||
<button |
|||
type="button" |
|||
onClick={() => setTimeline('upcoming')} |
|||
className={`px-3 py-1.5 rounded-xl text-xs sm:text-sm font-semibold transition-all ${ |
|||
timeline === 'upcoming' |
|||
? 'bg-card text-foreground shadow-xs border border-border/60' |
|||
: 'text-muted-foreground hover:text-foreground' |
|||
}`}
|
|||
> |
|||
{t('users.toursUpcoming')} |
|||
</button> |
|||
<button |
|||
type="button" |
|||
onClick={() => setTimeline('past')} |
|||
className={`px-3 py-1.5 rounded-xl text-xs sm:text-sm font-semibold transition-all ${ |
|||
timeline === 'past' |
|||
? 'bg-card text-foreground shadow-xs border border-border/60' |
|||
: 'text-muted-foreground hover:text-foreground' |
|||
}`}
|
|||
> |
|||
{t('users.toursPast')} |
|||
</button> |
|||
</div> |
|||
|
|||
{/* محتوای تورها */} |
|||
{loading ? ( |
|||
<div className="space-y-3"> |
|||
{[1, 2, 3].map((i) => ( |
|||
<div |
|||
key={i} |
|||
className="h-24 rounded-2xl bg-muted/40 border border-border/40 animate-pulse" |
|||
/> |
|||
))} |
|||
</div> |
|||
) : tours.length === 0 ? ( |
|||
<div className="p-8 text-center bg-card border border-border/60 rounded-2xl"> |
|||
<div className="mx-auto w-10 h-10 rounded-full bg-muted/50 flex items-center justify-center text-muted-foreground mb-3"> |
|||
<Ic name="map" className="w-5 h-5" /> |
|||
</div> |
|||
<p className="text-sm font-medium text-foreground mb-1"> |
|||
{t('users.noToursFound')} |
|||
</p> |
|||
<p className="text-xs text-muted-foreground"> |
|||
{t('billing.noFactorsFilter')} |
|||
</p> |
|||
</div> |
|||
) : ( |
|||
<div className="grid grid-cols-1 gap-3 sm:gap-4"> |
|||
{tours.map((order) => ( |
|||
<div |
|||
key={order.id} |
|||
className="bg-card border border-border/60 rounded-2xl p-4 sm:p-5 shadow-xs hover:border-border transition-all flex flex-col md:flex-row md:items-center justify-between gap-4" |
|||
> |
|||
{/* سمت راست: عنوان و جزئیات */} |
|||
<div className="space-y-2"> |
|||
<div className="flex flex-wrap items-center gap-2"> |
|||
<h4 className="text-sm sm:text-base font-bold text-foreground"> |
|||
{order.tour_title || `سفارش #${order.id}`} |
|||
</h4> |
|||
{getOrderStatusBadge(order.status)} |
|||
{getTripStatusBadge(order.tour_trip_status)} |
|||
</div> |
|||
|
|||
<div className="flex flex-wrap items-center gap-3 sm:gap-4 text-xs text-muted-foreground"> |
|||
<div className="flex items-center gap-1 font-mono"> |
|||
<Ic name="calendar" className="w-3.5 h-3.5 text-muted-foreground/70" /> |
|||
<span> |
|||
{formatDate(order.tour_started_at)} الی {formatDate(order.tour_ended_at)} |
|||
</span> |
|||
</div> |
|||
<div className="flex items-center gap-1 font-mono"> |
|||
<span>ثبت:</span> |
|||
<span>{formatDate(order.created?.slice(0, 10))}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* سمت چپ: قیمت و وضعیت مالی */} |
|||
<div className="flex items-center justify-between md:flex-col md:items-end gap-2 border-t md:border-t-0 pt-3 md:pt-0 border-border/40"> |
|||
<div className="text-end"> |
|||
<span className="block text-[11px] text-muted-foreground"> |
|||
{t('users.tourPrice')} |
|||
</span> |
|||
<span className="text-base sm:text-lg font-mono font-bold text-foreground"> |
|||
${Number(order.total_price || 0).toLocaleString()} |
|||
</span> |
|||
</div> |
|||
<div> |
|||
<span |
|||
className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${ |
|||
order.is_paid |
|||
? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400' |
|||
: 'bg-amber-500/10 text-amber-600 dark:text-amber-400' |
|||
}`}
|
|||
> |
|||
{order.is_paid ? 'پرداخت شده' : 'پرداخت نشده'} |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
))} |
|||
</div> |
|||
)} |
|||
</div> |
|||
) |
|||
} |
|||
@ -0,0 +1,93 @@ |
|||
import { apiFetch } from '@/services/http' |
|||
import type { |
|||
UserListItem, |
|||
UserDetail, |
|||
UserTourItem, |
|||
UserFactorItem, |
|||
DrfPaginatedResponse, |
|||
UsersFilterParams, |
|||
} from '../types' |
|||
|
|||
/** |
|||
* دریافت فهرست صفحه‌بندی‌شده کاربران ویژه ادمین |
|||
*/ |
|||
export async function fetchUsers( |
|||
params?: UsersFilterParams |
|||
): Promise<DrfPaginatedResponse<UserListItem>> { |
|||
const query = new URLSearchParams() |
|||
|
|||
if (params?.search && params.search.trim()) { |
|||
query.set('search', params.search.trim()) |
|||
} |
|||
if (params?.is_active && params.is_active !== 'all') { |
|||
query.set('is_active', params.is_active) |
|||
} |
|||
if (params?.role && params.role !== 'all') { |
|||
query.set('role', params.role) |
|||
} |
|||
if (params?.ordering) { |
|||
query.set('ordering', params.ordering) |
|||
} |
|||
if (params?.limit !== undefined) { |
|||
query.set('limit', String(params.limit)) |
|||
} |
|||
if (params?.offset !== undefined) { |
|||
query.set('offset', String(params.offset)) |
|||
} |
|||
|
|||
const queryString = query.toString() |
|||
const path = queryString ? `account/admin/users/?${queryString}` : 'account/admin/users/' |
|||
return apiFetch<DrfPaginatedResponse<UserListItem>>(path) |
|||
} |
|||
|
|||
/** |
|||
* دریافت آمارهای کلان کاربران برای کارت‌های شاخص عملکرد (KPI) |
|||
*/ |
|||
export async function fetchUserStats(): Promise<import('../types').UserGlobalStats> { |
|||
return apiFetch<import('../types').UserGlobalStats>('account/admin/users/stats/') |
|||
} |
|||
|
|||
/** |
|||
* دریافت اطلاعات تفصیلی پرونده کاربر شامل همراهان و آمار |
|||
*/ |
|||
export async function fetchUserDetail(userId: number): Promise<UserDetail> { |
|||
return apiFetch<UserDetail>(`account/admin/users/${userId}/`) |
|||
} |
|||
|
|||
/** |
|||
* دریافت سفارشات و تورهای کاربر با پشتیبانی از فیلتر وضعیت زمانی (فعال، آینده، گذشته) |
|||
*/ |
|||
export async function fetchUserTours( |
|||
userId: number, |
|||
timeline?: 'all' | 'active' | 'upcoming' | 'past' |
|||
): Promise<DrfPaginatedResponse<UserTourItem>> { |
|||
const query = new URLSearchParams() |
|||
query.set('view', 'admin') |
|||
query.set('user_id', String(userId)) |
|||
|
|||
if (timeline && timeline !== 'all') { |
|||
query.set('timeline', timeline) |
|||
} |
|||
|
|||
const path = `tours/orders/?${query.toString()}` |
|||
return apiFetch<DrfPaginatedResponse<UserTourItem>>(path) |
|||
} |
|||
|
|||
/** |
|||
* دریافت فاکتورهای مالی کاربر با تفکیک بر اساس نوع سرویس |
|||
*/ |
|||
export async function fetchUserFactors( |
|||
userId: number, |
|||
service?: string |
|||
): Promise<DrfPaginatedResponse<UserFactorItem>> { |
|||
const query = new URLSearchParams() |
|||
query.set('view', 'admin') |
|||
query.set('user_id', String(userId)) |
|||
|
|||
if (service && service !== 'all') { |
|||
query.set('service', service) |
|||
} |
|||
|
|||
const path = `factors/list/?${query.toString()}` |
|||
return apiFetch<DrfPaginatedResponse<UserFactorItem>>(path) |
|||
} |
|||
@ -0,0 +1,120 @@ |
|||
export interface UserListItem { |
|||
id: number |
|||
fullname: string |
|||
email: string | null |
|||
phone_number: string | null |
|||
avatar: string | null |
|||
date_joined: string |
|||
last_login: string | null |
|||
is_active: boolean |
|||
is_staff: boolean |
|||
is_superuser: boolean |
|||
factors_count: number |
|||
tour_orders_count: number |
|||
} |
|||
|
|||
export interface PassengerItem { |
|||
id: number |
|||
fullname: string | null |
|||
passport_number: string |
|||
birthdate: string |
|||
phone_number: string |
|||
age_category: string |
|||
created_at: string |
|||
} |
|||
|
|||
export interface UserStats { |
|||
total_factors: number |
|||
total_tours: number |
|||
approved_spent: number |
|||
} |
|||
|
|||
export interface UserGlobalStats { |
|||
total_users: number |
|||
active_users: number |
|||
staff_users: number |
|||
users_with_tours: number |
|||
users_with_factors: number |
|||
} |
|||
|
|||
export interface UserDetail { |
|||
id: number |
|||
fullname: string |
|||
email: string | null |
|||
phone_number: string | null |
|||
avatar: string | null |
|||
date_joined: string |
|||
last_login: string | null |
|||
is_active: boolean |
|||
is_staff: boolean |
|||
is_superuser: boolean |
|||
language: string | null |
|||
device_id: string | null |
|||
passengers: PassengerItem[] |
|||
stats: UserStats |
|||
} |
|||
|
|||
export interface UserTourItem { |
|||
id: number |
|||
tour_id?: number |
|||
user: string |
|||
tour_slug: string |
|||
tour_title: string |
|||
tour_started_at: string | null |
|||
tour_ended_at: string | null |
|||
tour_trip_status: string | null |
|||
tour_status: string | null |
|||
price?: string |
|||
total_price: string |
|||
status: string |
|||
created: string |
|||
updated?: string |
|||
request_details?: string |
|||
is_paid: boolean |
|||
payment_method?: string |
|||
transaction_id?: string |
|||
payment_receipt?: string | null |
|||
receipt_verified?: boolean |
|||
} |
|||
|
|||
export type FactorStatus = 'awaiting_payment' | 'pending' | 'rejected' | 'approved' | 'expired' |
|||
export type FactorService = 'shop' | 'simcard' | 'tour' | 'tasrif' | 'custom_trip' |
|||
|
|||
export interface UserFactorItem { |
|||
id: number |
|||
user: { |
|||
id: number |
|||
fullname: string |
|||
email: string | null |
|||
phone_number: string | null |
|||
avatar: string | null |
|||
} |
|||
status: FactorStatus |
|||
service: FactorService |
|||
description: string | null |
|||
amount: string |
|||
card_number: string | null |
|||
rejected_description: string | null |
|||
transaction_receipt: string | null |
|||
object_id: number |
|||
order_id: number | null |
|||
expiration_date: string | null |
|||
created_at: string |
|||
updated_at: string |
|||
} |
|||
|
|||
export interface DrfPaginatedResponse<T> { |
|||
count: number |
|||
next: string | null |
|||
previous: string | null |
|||
results: T[] |
|||
} |
|||
|
|||
export interface UsersFilterParams { |
|||
search?: string |
|||
is_active?: string |
|||
role?: string |
|||
ordering?: string |
|||
limit?: number |
|||
offset?: number |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue