Browse Source
feat: add services feature module with localization, UI components, and API integrations
master
feat: add services feature module with localization, UI components, and API integrations
master
22 changed files with 1889 additions and 456 deletions
-
BINpublic/fonts/Vazirmatn-Bold.ttf
-
BINpublic/fonts/Vazirmatn-Regular.ttf
-
6scripts/generate-locales.js
-
2src/components/ui/checkbox.tsx
-
136src/features/services/ServicesPage.tsx
-
572src/features/services/components/CreateLocationDialog.tsx
-
18src/features/services/components/FaqServiceView.tsx
-
58src/features/services/components/LocationDetailSheet.tsx
-
669src/features/services/components/SimcardFormDialog.tsx
-
441src/features/services/components/SimcardServiceView.tsx
-
9src/features/services/components/StoreServiceView.tsx
-
179src/features/services/components/ZayerGuideServiceView.tsx
-
125src/features/services/services/simcard-api.ts
-
54src/features/services/services/trip-etiquette-api.ts
-
28src/features/services/services/zayer-guide-api.ts
-
12src/features/services/types/faq.ts
-
2src/features/tours/components/CreateTourDialog.tsx
-
3src/icons.tsx
-
25src/index.css
-
2src/locales/ar.json
-
2src/locales/en.json
-
2src/locales/fa.json
@ -0,0 +1,669 @@ |
|||||
|
import React, { useState, useEffect } from 'react' |
||||
|
import { |
||||
|
Dialog, |
||||
|
DialogContent, |
||||
|
DialogHeader, |
||||
|
DialogTitle, |
||||
|
DialogDescription, |
||||
|
DialogFooter, |
||||
|
DialogClose, |
||||
|
} from '@/components/ui/dialog' |
||||
|
import { Button } from '@/components/ui/button' |
||||
|
import { Input } from '@/components/ui/input' |
||||
|
import { Ic } from '@/icons' |
||||
|
import type { SimCardItem, CreateSimCardInput } from '../services/simcard-api' |
||||
|
|
||||
|
export type SupportedLanguage = 'ar' | 'fa' | 'en' | 'ru' | 'id' |
||||
|
|
||||
|
interface SimcardFormDialogProps { |
||||
|
open: boolean |
||||
|
onOpenChange: (open: boolean) => void |
||||
|
item?: SimCardItem | null |
||||
|
onSave: (data: CreateSimCardInput, id?: number) => Promise<void> |
||||
|
onDelete?: (id: number) => Promise<void> |
||||
|
} |
||||
|
|
||||
|
const COUNTRIES = [ |
||||
|
{ id: 1, code: 'IR', name: 'ایران', flag: '🇮🇷' }, |
||||
|
{ id: 2, code: 'IQ', name: 'عراق', flag: '🇮🇶' }, |
||||
|
{ id: 4, code: 'SA', name: 'عربستان سعودی', flag: '🇸🇦' }, |
||||
|
] |
||||
|
|
||||
|
export const LANGUAGES = [ |
||||
|
{ code: 'ar', name: 'العربية', flag: '🇸🇦', badge: 'AR', dir: 'rtl', label: 'العربية (پیش‌فرض)' }, |
||||
|
{ code: 'fa', name: 'فارسی', flag: '🇮🇷', badge: 'FA', dir: 'rtl', label: 'فارسی' }, |
||||
|
{ code: 'en', name: 'English', flag: '🇬🇧', badge: 'EN', dir: 'ltr', label: 'انگلیسی' }, |
||||
|
{ code: 'ru', name: 'Русский', flag: '🇷🇺', badge: 'RU', dir: 'ltr', label: 'روسی' }, |
||||
|
{ code: 'id', name: 'Bahasa Indonesia', flag: '🇮🇩', badge: 'ID', dir: 'ltr', label: 'اندونزیایی' }, |
||||
|
] as const |
||||
|
|
||||
|
const EMPTY_TITLES: Record<SupportedLanguage, string> = { |
||||
|
ar: '', |
||||
|
fa: '', |
||||
|
en: '', |
||||
|
ru: '', |
||||
|
id: '', |
||||
|
} |
||||
|
|
||||
|
const EMPTY_DETAILS: Record<SupportedLanguage, string[]> = { |
||||
|
ar: [], |
||||
|
fa: [], |
||||
|
en: [], |
||||
|
ru: [], |
||||
|
id: [], |
||||
|
} |
||||
|
|
||||
|
export function SimcardFormDialog({ |
||||
|
open, |
||||
|
onOpenChange, |
||||
|
item, |
||||
|
onSave, |
||||
|
onDelete, |
||||
|
}: SimcardFormDialogProps) { |
||||
|
const isEditing = Boolean(item && item.id) |
||||
|
|
||||
|
const [activeLangTab, setActiveLangTab] = useState<SupportedLanguage>('ar') |
||||
|
const [countryId, setCountryId] = useState<number>(1) |
||||
|
const [price, setPrice] = useState<string>('10.00') |
||||
|
const [status, setStatus] = useState<number>(1) |
||||
|
|
||||
|
// عناوین چندزبانه
|
||||
|
const [titles, setTitles] = useState<Record<SupportedLanguage, string>>({ ...EMPTY_TITLES }) |
||||
|
|
||||
|
// ویژگی‌های چندزبانه
|
||||
|
const [details, setDetails] = useState<Record<SupportedLanguage, string[]>>({ ...EMPTY_DETAILS }) |
||||
|
|
||||
|
// افزودن ویژگی جدید در زبان فعال
|
||||
|
const [newDetailText, setNewDetailText] = useState('') |
||||
|
|
||||
|
// ویرایش درون‌خطی ویژگی در زبان فعال
|
||||
|
const [editingDetailIndex, setEditingDetailIndex] = useState<number | null>(null) |
||||
|
const [editingDetailText, setEditingDetailText] = useState<string>('') |
||||
|
|
||||
|
const [isSubmitting, setIsSubmitting] = useState(false) |
||||
|
const [isDeleting, setIsDeleting] = useState(false) |
||||
|
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false) |
||||
|
const [errorMsg, setErrorMsg] = useState<string | null>(null) |
||||
|
|
||||
|
useEffect(() => { |
||||
|
setActiveLangTab('ar') |
||||
|
if (item) { |
||||
|
const cId = item.country?.id || 1 |
||||
|
setCountryId(cId) |
||||
|
setPrice(item.price ? String(item.price) : '10.00') |
||||
|
setStatus(item.status ?? 1) |
||||
|
|
||||
|
// استخراج عناوین ۵ زبانه از دیتابیس
|
||||
|
const parsedTitles: Record<SupportedLanguage, string> = { ...EMPTY_TITLES } |
||||
|
if (Array.isArray(item.raw_title)) { |
||||
|
for (const t of item.raw_title) { |
||||
|
if (t && typeof t === 'object' && t.language_code && t.title) { |
||||
|
const lang = t.language_code as SupportedLanguage |
||||
|
if (lang in parsedTitles) { |
||||
|
parsedTitles[lang] = t.title |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} else if (item.raw_title && typeof item.raw_title === 'object') { |
||||
|
for (const lang of ['ar', 'fa', 'en', 'ru', 'id'] as SupportedLanguage[]) { |
||||
|
if (item.raw_title[lang]) parsedTitles[lang] = String(item.raw_title[lang]) |
||||
|
} |
||||
|
} |
||||
|
if (!parsedTitles.ar && !parsedTitles.fa && item.title) { |
||||
|
parsedTitles.ar = item.title |
||||
|
parsedTitles.fa = item.title |
||||
|
} |
||||
|
setTitles(parsedTitles) |
||||
|
|
||||
|
// استخراج ویژگی‌های ۵ زبانه از دیتابیس
|
||||
|
const parsedDetails: Record<SupportedLanguage, string[]> = { ...EMPTY_DETAILS } |
||||
|
if (Array.isArray(item.raw_detail)) { |
||||
|
for (const d of item.raw_detail) { |
||||
|
if (d && typeof d === 'object' && d.language_code && d.detail) { |
||||
|
const lang = d.language_code as SupportedLanguage |
||||
|
if (lang in parsedDetails) { |
||||
|
parsedDetails[lang].push(d.detail) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} else if (item.raw_detail && typeof item.raw_detail === 'object') { |
||||
|
for (const lang of ['ar', 'fa', 'en', 'ru', 'id'] as SupportedLanguage[]) { |
||||
|
if (Array.isArray(item.raw_detail[lang])) { |
||||
|
parsedDetails[lang] = [...item.raw_detail[lang]] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (parsedDetails.ar.length === 0 && parsedDetails.fa.length === 0 && Array.isArray(item.simcard_detail)) { |
||||
|
parsedDetails.ar = [...item.simcard_detail] |
||||
|
parsedDetails.fa = [...item.simcard_detail] |
||||
|
} |
||||
|
setDetails(parsedDetails) |
||||
|
} else { |
||||
|
setCountryId(1) |
||||
|
setPrice('10.00') |
||||
|
setStatus(1) |
||||
|
setTitles({ ...EMPTY_TITLES }) |
||||
|
setDetails({ ...EMPTY_DETAILS }) |
||||
|
} |
||||
|
|
||||
|
setNewDetailText('') |
||||
|
setEditingDetailIndex(null) |
||||
|
setEditingDetailText('') |
||||
|
setErrorMsg(null) |
||||
|
setShowDeleteConfirm(false) |
||||
|
}, [item, open]) |
||||
|
|
||||
|
// کار با ویژگی‌های زبان فعال
|
||||
|
const activeDetails = details[activeLangTab] || [] |
||||
|
|
||||
|
const handleTabChange = (langCode: SupportedLanguage) => { |
||||
|
setActiveLangTab(langCode) |
||||
|
} |
||||
|
|
||||
|
const handleTitleChange = (val: string) => { |
||||
|
setTitles((prev) => ({ |
||||
|
...prev, |
||||
|
[activeLangTab]: val, |
||||
|
})) |
||||
|
} |
||||
|
|
||||
|
const handleCountryChange = (cId: number) => { |
||||
|
setCountryId(cId) |
||||
|
} |
||||
|
|
||||
|
const handleAddDetail = () => { |
||||
|
if (!newDetailText.trim()) return |
||||
|
setDetails((prev) => ({ |
||||
|
...prev, |
||||
|
[activeLangTab]: [...(prev[activeLangTab] || []), newDetailText.trim()], |
||||
|
})) |
||||
|
setNewDetailText('') |
||||
|
} |
||||
|
|
||||
|
const handleRemoveDetail = (index: number) => { |
||||
|
setDetails((prev) => ({ |
||||
|
...prev, |
||||
|
[activeLangTab]: (prev[activeLangTab] || []).filter((_, i) => i !== index), |
||||
|
})) |
||||
|
if (editingDetailIndex === index) { |
||||
|
setEditingDetailIndex(null) |
||||
|
setEditingDetailText('') |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const handleStartEditDetail = (index: number, text: string) => { |
||||
|
setEditingDetailIndex(index) |
||||
|
setEditingDetailText(text) |
||||
|
} |
||||
|
|
||||
|
const handleSaveEditDetail = (index: number) => { |
||||
|
if (!editingDetailText.trim()) return |
||||
|
setDetails((prev) => ({ |
||||
|
...prev, |
||||
|
[activeLangTab]: (prev[activeLangTab] || []).map((d, i) => |
||||
|
i === index ? editingDetailText.trim() : d |
||||
|
), |
||||
|
})) |
||||
|
setEditingDetailIndex(null) |
||||
|
setEditingDetailText('') |
||||
|
} |
||||
|
|
||||
|
const handleCancelEditDetail = () => { |
||||
|
setEditingDetailIndex(null) |
||||
|
setEditingDetailText('') |
||||
|
} |
||||
|
|
||||
|
const handleSubmit = async (e: React.FormEvent) => { |
||||
|
e.preventDefault() |
||||
|
|
||||
|
const mainTitle = |
||||
|
titles.ar.trim() || |
||||
|
titles.fa.trim() || |
||||
|
titles[activeLangTab].trim() || |
||||
|
titles.en.trim() || |
||||
|
titles.ru.trim() || |
||||
|
titles.id.trim() |
||||
|
if (!mainTitle) { |
||||
|
setErrorMsg('لطفاً عنوان بسته سیم‌کارت را وارد نمایید.') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
const numPrice = parseFloat(price) |
||||
|
if (isNaN(numPrice) || numPrice <= 0) { |
||||
|
setErrorMsg('لطفاً قیمت معتبری وارد نمایید.') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
// عناوین ۵ زبانه
|
||||
|
const finalTitles: Record<SupportedLanguage, string> = { |
||||
|
ar: titles.ar.trim() || mainTitle, |
||||
|
fa: titles.fa.trim() || mainTitle, |
||||
|
en: titles.en.trim() || mainTitle, |
||||
|
ru: titles.ru.trim() || mainTitle, |
||||
|
id: titles.id.trim() || mainTitle, |
||||
|
} |
||||
|
|
||||
|
// ویژگی‌های ۵ زبانه
|
||||
|
const finalDetails: Record<SupportedLanguage, string[]> = { |
||||
|
ar: (details.ar || []).filter((d) => d.trim()), |
||||
|
fa: (details.fa || []).filter((d) => d.trim()), |
||||
|
en: (details.en || []).filter((d) => d.trim()), |
||||
|
ru: (details.ru || []).filter((d) => d.trim()), |
||||
|
id: (details.id || []).filter((d) => d.trim()), |
||||
|
} |
||||
|
|
||||
|
// فال‌بک ویژگی‌ها در صورت خالی بودن
|
||||
|
const fallbackDetails = |
||||
|
finalDetails.ar.length > 0 |
||||
|
? finalDetails.ar |
||||
|
: finalDetails.fa.length > 0 |
||||
|
? finalDetails.fa |
||||
|
: [] |
||||
|
for (const lang of ['ar', 'fa', 'en', 'ru', 'id'] as SupportedLanguage[]) { |
||||
|
if (finalDetails[lang].length === 0 && fallbackDetails.length > 0) { |
||||
|
finalDetails[lang] = [...fallbackDetails] |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
setErrorMsg(null) |
||||
|
setIsSubmitting(true) |
||||
|
try { |
||||
|
await onSave( |
||||
|
{ |
||||
|
title: finalTitles.fa || finalTitles.ar, |
||||
|
titles: finalTitles, |
||||
|
country_id: countryId, |
||||
|
price: numPrice.toFixed(2), |
||||
|
status, |
||||
|
simcard_detail: finalDetails.fa.length > 0 ? finalDetails.fa : finalDetails.ar, |
||||
|
details: finalDetails, |
||||
|
}, |
||||
|
item?.id |
||||
|
) |
||||
|
onOpenChange(false) |
||||
|
} catch (err: any) { |
||||
|
setErrorMsg(err?.message || 'خطایی در ثبت اطلاعات رخ داد.') |
||||
|
} finally { |
||||
|
setIsSubmitting(false) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const handleConfirmDelete = async () => { |
||||
|
if (!item?.id || !onDelete) return |
||||
|
setIsDeleting(true) |
||||
|
try { |
||||
|
await onDelete(item.id) |
||||
|
setShowDeleteConfirm(false) |
||||
|
onOpenChange(false) |
||||
|
} catch (err: any) { |
||||
|
setErrorMsg(err?.message || 'خطایی در حذف سیم‌کارت رخ داد.') |
||||
|
} finally { |
||||
|
setIsDeleting(false) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const currentLang = LANGUAGES.find((l) => l.code === activeLangTab) || LANGUAGES[0] |
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
<Dialog open={open} onOpenChange={onOpenChange}> |
||||
|
<DialogContent className="sm:max-w-2xl lg:max-w-3xl w-full rounded-2xl bg-card border border-border-soft p-0 max-h-[85vh] flex flex-col overflow-hidden shadow-2xl"> |
||||
|
{/* هدر ثابت در بالای مدال */} |
||||
|
<DialogHeader className="p-6 pb-4 border-b border-border-soft shrink-0 text-start"> |
||||
|
<DialogTitle className="text-lg font-bold text-foreground"> |
||||
|
{isEditing ? 'ویرایش بسته سیم‌کارت' : 'افزودن سیم‌کارت جدید'} |
||||
|
</DialogTitle> |
||||
|
<DialogDescription className="text-xs text-grey-3"> |
||||
|
{isEditing |
||||
|
? 'تغییرات شما در تمام زبان‌ها در دیتابیس ثبت شده و در اپلیکیشن زائرین بر اساس زبان انتخابی کاربر نمایش داده می‌شود.' |
||||
|
: 'سیم‌کارت جدید در دیتابیس ذخیره و در اپلیکیشن فعال خواهد شد.'} |
||||
|
</DialogDescription> |
||||
|
</DialogHeader> |
||||
|
|
||||
|
{/* فرم: بدنه اسکرول‌شونده و فوتر فیکس‌شده */} |
||||
|
<form onSubmit={handleSubmit} className="flex flex-col flex-1 overflow-hidden min-h-0"> |
||||
|
{/* بدنه محتوا (تنها بخشی که اسکرول می‌شود) */} |
||||
|
<div className="flex-1 overflow-y-auto p-6 space-y-5"> |
||||
|
{errorMsg && ( |
||||
|
<div className="p-3.5 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-500 text-xs flex items-center gap-2"> |
||||
|
<Ic name="alert" className="size-4 shrink-0" /> |
||||
|
<span>{errorMsg}</span> |
||||
|
</div> |
||||
|
)} |
||||
|
|
||||
|
{/* ۱. انتخاب کشور مقصد */} |
||||
|
<div className="space-y-2"> |
||||
|
<label className="text-xs font-bold text-foreground block"> |
||||
|
کشور مقصد <span className="text-rose-500">*</span> |
||||
|
</label> |
||||
|
<div className="grid grid-cols-3 gap-3"> |
||||
|
{COUNTRIES.map((c) => { |
||||
|
const isSelected = countryId === c.id |
||||
|
return ( |
||||
|
<button |
||||
|
key={c.id} |
||||
|
type="button" |
||||
|
onClick={() => handleCountryChange(c.id)} |
||||
|
className={`h-12 px-4 rounded-xl border text-xs font-bold transition flex items-center justify-center gap-2.5 ${ |
||||
|
isSelected |
||||
|
? 'border-primary bg-primary/10 text-primary shadow-xs' |
||||
|
: 'border-border-soft bg-surface-base/50 text-grey-3 hover:text-foreground hover:bg-card' |
||||
|
}`}
|
||||
|
> |
||||
|
<span className="text-lg">{c.flag}</span> |
||||
|
<span className="text-xs">{c.name}</span> |
||||
|
</button> |
||||
|
) |
||||
|
})} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* ۲. تب‌های انتخاب ۵ زبان با پرچم و نشانگر وضعیت ترجمه (زیر کشور مقصد) */} |
||||
|
<div className="space-y-2 pt-1"> |
||||
|
<div className="flex items-center justify-between"> |
||||
|
<label className="text-xs font-bold text-foreground flex items-center gap-1.5"> |
||||
|
<Ic name="globe" className="size-3.5 text-primary" /> |
||||
|
<span>زبان ترجمه و محتوا</span> |
||||
|
<span className="text-rose-500">*</span> |
||||
|
</label> |
||||
|
</div> |
||||
|
|
||||
|
<div className="grid grid-cols-2 sm:grid-cols-5 gap-2 p-1.5 rounded-2xl bg-surface-base/80 border border-border-soft"> |
||||
|
{LANGUAGES.map((lang) => { |
||||
|
const isSelected = activeLangTab === lang.code |
||||
|
const hasTitle = Boolean(titles[lang.code]?.trim()) |
||||
|
const detailsCount = (details[lang.code] || []).length |
||||
|
return ( |
||||
|
<button |
||||
|
key={lang.code} |
||||
|
type="button" |
||||
|
onClick={() => handleTabChange(lang.code)} |
||||
|
className={`h-11 px-3 rounded-xl text-xs font-bold transition flex items-center justify-center gap-2 relative ${ |
||||
|
isSelected |
||||
|
? 'bg-primary text-primary-foreground shadow-xs' |
||||
|
: 'text-grey-3 hover:text-foreground hover:bg-card' |
||||
|
}`}
|
||||
|
> |
||||
|
<span className="text-base">{lang.flag}</span> |
||||
|
<span className="truncate">{lang.name}</span> |
||||
|
{hasTitle && ( |
||||
|
<span |
||||
|
className={`size-2 rounded-full shrink-0 ${ |
||||
|
isSelected ? 'bg-white' : 'bg-emerald-500' |
||||
|
}`}
|
||||
|
title={`دارای ترجمه (${detailsCount} ویژگی)`} |
||||
|
/> |
||||
|
)} |
||||
|
</button> |
||||
|
) |
||||
|
})} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* ۳. عنوان بسته سیم‌کارت به زبان فعال */} |
||||
|
<div className="space-y-2"> |
||||
|
<div className="flex items-center justify-between"> |
||||
|
<label className="text-xs font-bold text-foreground flex items-center gap-1.5"> |
||||
|
<span>عنوان بسته سیم‌کارت به زبان {currentLang.name}</span> |
||||
|
<span className="text-[10px] px-1.5 py-0.5 rounded font-mono font-bold bg-primary/10 text-primary border border-primary/20"> |
||||
|
{currentLang.badge} |
||||
|
</span> |
||||
|
<span className="text-rose-500">*</span> |
||||
|
</label> |
||||
|
<span className="text-[11px] text-grey-3 font-mono"> |
||||
|
{currentLang.dir === 'rtl' ? 'RTL' : 'LTR'} |
||||
|
</span> |
||||
|
</div> |
||||
|
<Input |
||||
|
value={titles[activeLangTab] || ''} |
||||
|
onChange={(e) => handleTitleChange(e.target.value)} |
||||
|
dir={currentLang.dir} |
||||
|
placeholder={`عنوان بسته به زبان ${currentLang.name}...`} |
||||
|
className="h-11 text-xs bg-surface-base rounded-xl border-border-soft" |
||||
|
required={activeLangTab === 'fa'} |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
{/* ۴. قیمت و وضعیت در اپلیکیشن */} |
||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> |
||||
|
<div className="space-y-2"> |
||||
|
<label className="text-xs font-bold text-foreground block"> |
||||
|
قیمت به دلار ($) <span className="text-rose-500">*</span> |
||||
|
</label> |
||||
|
<div className="relative"> |
||||
|
<Input |
||||
|
type="number" |
||||
|
step="0.01" |
||||
|
min="0" |
||||
|
value={price} |
||||
|
onChange={(e) => setPrice(e.target.value)} |
||||
|
placeholder="10.00" |
||||
|
className="h-11 text-xs bg-surface-base rounded-xl border-border-soft font-mono ps-8" |
||||
|
required |
||||
|
/> |
||||
|
<span className="absolute start-3 top-1/2 -translate-y-1/2 text-grey-3 font-mono text-xs"> |
||||
|
$ |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className="space-y-2"> |
||||
|
<label className="text-xs font-bold text-foreground block">وضعیت در اپلیکیشن</label> |
||||
|
<select |
||||
|
value={status} |
||||
|
onChange={(e) => setStatus(parseInt(e.target.value, 10))} |
||||
|
className="w-full h-11 text-xs bg-surface-base rounded-xl border border-border-soft px-3 text-foreground font-medium focus:outline-none focus:ring-1 focus:ring-primary" |
||||
|
> |
||||
|
<option value={1}>فعال در اپلیکیشن</option> |
||||
|
<option value={2}>ناموجود (Out of Stock)</option> |
||||
|
<option value={3}>غیرفعال</option> |
||||
|
</select> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* ۵. ویژگی‌ها و جزئیات بسته به زبان فعال */} |
||||
|
<div className="space-y-2"> |
||||
|
<div className="flex items-center justify-between"> |
||||
|
<label className="text-xs font-bold text-foreground flex items-center gap-1.5"> |
||||
|
<span>ویژگی‌ها و جزئیات بسته به زبان {currentLang.name}</span> |
||||
|
<span className="text-[10px] px-1.5 py-0.5 rounded font-mono font-bold bg-primary/10 text-primary border border-primary/20"> |
||||
|
{currentLang.badge} |
||||
|
</span> |
||||
|
</label> |
||||
|
<span className="text-[11px] text-grey-3"> |
||||
|
{activeDetails.length} ویژگی ثبت‌شده برای {currentLang.name} |
||||
|
</span> |
||||
|
</div> |
||||
|
|
||||
|
{/* ورودی افزودن ویژگی جدید */} |
||||
|
<div className="flex items-center gap-2"> |
||||
|
<Input |
||||
|
value={newDetailText} |
||||
|
onChange={(e) => setNewDetailText(e.target.value)} |
||||
|
onKeyDown={(e) => { |
||||
|
if (e.key === 'Enter') { |
||||
|
e.preventDefault() |
||||
|
handleAddDetail() |
||||
|
} |
||||
|
}} |
||||
|
dir={currentLang.dir} |
||||
|
placeholder={`افزودن ویژگی به زبان ${currentLang.name} (مثلاً حجم اینترنت، دقایق مکالمه، فعال‌سازی)...`} |
||||
|
className="h-10 text-xs bg-surface-base rounded-xl border-border-soft flex-1" |
||||
|
/> |
||||
|
<Button |
||||
|
type="button" |
||||
|
onClick={handleAddDetail} |
||||
|
disabled={!newDetailText.trim()} |
||||
|
className="h-10 px-4 rounded-xl text-xs font-bold bg-primary text-primary-foreground hover:bg-primary/90 gap-1.5 shrink-0" |
||||
|
> |
||||
|
<Ic name="plus" className="size-3.5" /> |
||||
|
<span>افزودن</span> |
||||
|
</Button> |
||||
|
</div> |
||||
|
|
||||
|
{/* لیست ویژگی‌های ثبت‌شده در زبان فعال */} |
||||
|
{activeDetails.length === 0 ? ( |
||||
|
<div className="p-4 rounded-xl border border-dashed border-border-soft text-center text-grey-3 text-xs"> |
||||
|
هنوز ویژگی خاصی به زبان {currentLang.name} اضافه نشده است. می‌توانید با فیلد بالا ویژگی جدید ثبت کنید. |
||||
|
</div> |
||||
|
) : ( |
||||
|
<div className="space-y-2 max-h-48 overflow-y-auto pe-1"> |
||||
|
{activeDetails.map((itemText, idx) => ( |
||||
|
<div |
||||
|
key={idx} |
||||
|
className="p-3 rounded-xl border border-border-soft bg-surface-base/60 text-xs transition" |
||||
|
> |
||||
|
{editingDetailIndex === idx ? ( |
||||
|
<div className="flex items-center gap-2"> |
||||
|
<Input |
||||
|
value={editingDetailText} |
||||
|
onChange={(e) => setEditingDetailText(e.target.value)} |
||||
|
onKeyDown={(e) => { |
||||
|
if (e.key === 'Enter') { |
||||
|
e.preventDefault() |
||||
|
handleSaveEditDetail(idx) |
||||
|
} |
||||
|
}} |
||||
|
dir={currentLang.dir} |
||||
|
className="h-9 text-xs bg-card rounded-lg flex-1" |
||||
|
autoFocus |
||||
|
/> |
||||
|
<Button |
||||
|
type="button" |
||||
|
size="sm" |
||||
|
onClick={() => handleSaveEditDetail(idx)} |
||||
|
className="h-9 px-3 text-xs bg-primary text-white rounded-lg gap-1 shrink-0" |
||||
|
> |
||||
|
<Ic name="check" className="size-3.5" /> |
||||
|
<span>ذخیره</span> |
||||
|
</Button> |
||||
|
<Button |
||||
|
type="button" |
||||
|
size="sm" |
||||
|
variant="ghost" |
||||
|
onClick={handleCancelEditDetail} |
||||
|
className="h-9 px-2 text-xs text-grey-3 hover:text-foreground shrink-0" |
||||
|
title="انصراف" |
||||
|
> |
||||
|
<Ic name="close" className="size-3.5" /> |
||||
|
</Button> |
||||
|
</div> |
||||
|
) : ( |
||||
|
<div className="flex items-center justify-between gap-3"> |
||||
|
<div className="flex items-center gap-2 truncate" dir={currentLang.dir}> |
||||
|
<span className="size-1.5 rounded-full bg-primary shrink-0" /> |
||||
|
<span className="text-foreground font-medium leading-relaxed truncate"> |
||||
|
{itemText} |
||||
|
</span> |
||||
|
</div> |
||||
|
<div className="flex items-center gap-1 shrink-0"> |
||||
|
<button |
||||
|
type="button" |
||||
|
onClick={() => handleStartEditDetail(idx, itemText)} |
||||
|
className="text-grey-3 hover:text-primary p-1.5 rounded-lg hover:bg-primary/10 transition" |
||||
|
title="ویرایش ویژگی" |
||||
|
> |
||||
|
<Ic name="edit" className="size-3.5" /> |
||||
|
</button> |
||||
|
<button |
||||
|
type="button" |
||||
|
onClick={() => handleRemoveDetail(idx)} |
||||
|
className="text-grey-3 hover:text-rose-500 p-1.5 rounded-lg hover:bg-rose-500/10 transition" |
||||
|
title="حذف ویژگی" |
||||
|
> |
||||
|
<Ic name="trash" className="size-3.5" /> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
)} |
||||
|
</div> |
||||
|
))} |
||||
|
</div> |
||||
|
)} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* فوتر فیکس‌شده در پایین */} |
||||
|
<DialogFooter className="p-4 sm:px-6 bg-card border-t border-border-soft shrink-0 flex flex-row items-center justify-between gap-3"> |
||||
|
<div className="flex items-center gap-2"> |
||||
|
<Button |
||||
|
type="submit" |
||||
|
disabled={isSubmitting || isDeleting} |
||||
|
className="rounded-xl text-xs font-bold h-10 px-5 bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs" |
||||
|
> |
||||
|
{isSubmitting ? 'در حال ذخیره...' : 'ذخیره'} |
||||
|
</Button> |
||||
|
<DialogClose asChild> |
||||
|
<Button |
||||
|
type="button" |
||||
|
variant="ghost" |
||||
|
disabled={isSubmitting || isDeleting} |
||||
|
className="rounded-xl text-xs h-10 px-4" |
||||
|
> |
||||
|
انصراف |
||||
|
</Button> |
||||
|
</DialogClose> |
||||
|
</div> |
||||
|
|
||||
|
{/* دکمه حذف بسته در گوشه فرم برای حالت ویرایش */} |
||||
|
{isEditing && onDelete && ( |
||||
|
<Button |
||||
|
type="button" |
||||
|
variant="ghost" |
||||
|
disabled={isSubmitting || isDeleting} |
||||
|
onClick={() => setShowDeleteConfirm(true)} |
||||
|
className="rounded-xl text-xs h-10 px-3.5 text-rose-500 hover:text-rose-600 hover:bg-rose-500/10 gap-1.5" |
||||
|
title="حذف بسته سیم‌کارت" |
||||
|
> |
||||
|
<Ic name="trash" className="size-4" /> |
||||
|
<span>حذف بسته</span> |
||||
|
</Button> |
||||
|
)} |
||||
|
</DialogFooter> |
||||
|
</form> |
||||
|
</DialogContent> |
||||
|
</Dialog> |
||||
|
|
||||
|
{/* دیالوگ اعتبارسنجی و تایید حذف برای جلوگیری از حذف تصادفی */} |
||||
|
{showDeleteConfirm && ( |
||||
|
<Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}> |
||||
|
<DialogContent className="sm:max-w-md rounded-2xl bg-card border border-border-soft p-6 shadow-2xl"> |
||||
|
<DialogHeader className="space-y-2 text-start"> |
||||
|
<div className="size-11 rounded-2xl bg-rose-500/10 text-rose-500 flex items-center justify-center mb-1"> |
||||
|
<Ic name="trash" className="size-5" /> |
||||
|
</div> |
||||
|
<DialogTitle className="text-base font-bold text-foreground"> |
||||
|
حذف بسته سیم‌کارت |
||||
|
</DialogTitle> |
||||
|
<DialogDescription className="text-xs text-grey-3 leading-relaxed"> |
||||
|
آیا از حذف بسته سیم‌کارت «{item?.title}» از پایگاه‌داده اطمینان دارید؟ با حذف این مورد، دیگر در اپلیکیشن زائرین نمایش داده نخواهد شد و این عملیات غیرقابل بازگشت است. |
||||
|
</DialogDescription> |
||||
|
</DialogHeader> |
||||
|
|
||||
|
<DialogFooter className="mt-5 flex flex-row items-center gap-2 sm:justify-start"> |
||||
|
<Button |
||||
|
type="button" |
||||
|
disabled={isDeleting} |
||||
|
onClick={handleConfirmDelete} |
||||
|
className="rounded-xl text-xs font-bold h-9 px-4 bg-rose-500 hover:bg-rose-600 text-white flex-1" |
||||
|
> |
||||
|
{isDeleting ? 'در حال حذف...' : 'تایید و حذف'} |
||||
|
</Button> |
||||
|
<DialogClose asChild> |
||||
|
<Button |
||||
|
type="button" |
||||
|
variant="ghost" |
||||
|
disabled={isDeleting} |
||||
|
className="rounded-xl text-xs h-9 px-4 flex-1" |
||||
|
> |
||||
|
انصراف |
||||
|
</Button> |
||||
|
</DialogClose> |
||||
|
</DialogFooter> |
||||
|
</DialogContent> |
||||
|
</Dialog> |
||||
|
)} |
||||
|
</> |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,441 @@ |
|||||
|
import React, { useState, useEffect, useMemo } from 'react' |
||||
|
import { Link } from 'react-router-dom' |
||||
|
import { Ic } from '@/icons' |
||||
|
import { Button } from '@/components/ui/button' |
||||
|
import { Input } from '@/components/ui/input' |
||||
|
import { Badge } from '@/components/ui/badge' |
||||
|
import { ShimmerBox, ShimmerLine } from '@/components/shared/shimmer_frontend' |
||||
|
import { toFa } from '@/lib/utils' |
||||
|
import { toast } from '@/stores/toast' |
||||
|
import type { ServiceMeta } from '../ServicesPage' |
||||
|
import { |
||||
|
fetchSimCards, |
||||
|
fetchSimCardOrdersCount, |
||||
|
createSimCard, |
||||
|
updateSimCard, |
||||
|
deleteSimCard, |
||||
|
type SimCardItem, |
||||
|
type CreateSimCardInput, |
||||
|
} from '../services/simcard-api' |
||||
|
import { SimcardFormDialog } from './SimcardFormDialog' |
||||
|
|
||||
|
const COUNTRY_OPTIONS = [ |
||||
|
{ code: 'ALL', labelFa: 'همه کشورها', labelEn: 'All Countries', flag: '🌍' }, |
||||
|
{ code: 'IR', labelFa: 'ایران', labelEn: 'Iran', flag: '🇮🇷' }, |
||||
|
{ code: 'IQ', labelFa: 'عراق', labelEn: 'Iraq', flag: '🇮🇶' }, |
||||
|
{ code: 'SA', labelFa: 'عربستان سعودی', labelEn: 'Saudi Arabia', flag: '🇸🇦' }, |
||||
|
] as const |
||||
|
|
||||
|
const COUNTRY_FLAGS: Record<string, string> = { |
||||
|
IR: '🇮🇷', |
||||
|
IQ: '🇮🇶', |
||||
|
SA: '🇸🇦', |
||||
|
SY: '🇸🇾', |
||||
|
OM: '🇴🇲', |
||||
|
OMN: '🇴🇲', |
||||
|
KW: '🇰🇼', |
||||
|
KWT: '🇰🇼', |
||||
|
BH: '🇧🇭', |
||||
|
BHR: '🇧🇭', |
||||
|
} |
||||
|
|
||||
|
const COUNTRY_NAMES_FA: Record<string, string> = { |
||||
|
IR: 'ایران', |
||||
|
IQ: 'عراق', |
||||
|
SA: 'عربستان سعودی', |
||||
|
SY: 'سوریه', |
||||
|
OM: 'عمان', |
||||
|
OMN: 'عمان', |
||||
|
KW: 'کویت', |
||||
|
KWT: 'کویت', |
||||
|
BH: 'بحرین', |
||||
|
BHR: 'بحرین', |
||||
|
} |
||||
|
|
||||
|
export function SimcardServiceView({ service }: { service: ServiceMeta }) { |
||||
|
const [selectedCountry, setSelectedCountry] = useState<string>('ALL') |
||||
|
const [searchTerm, setSearchTerm] = useState('') |
||||
|
const [simcards, setSimcards] = useState<SimCardItem[]>([]) |
||||
|
const [ordersCount, setOrdersCount] = useState<number>(0) |
||||
|
const [isLoading, setIsLoading] = useState<boolean>(true) |
||||
|
|
||||
|
// فرم ایجاد و ویرایش
|
||||
|
const [isFormOpen, setIsFormOpen] = useState(false) |
||||
|
const [editingItem, setEditingItem] = useState<SimCardItem | null>(null) |
||||
|
|
||||
|
// بارگذاری داده‌ها از دیتابیس (یک‌بار در ابتدا برای دریافت همه بسته‌ها)
|
||||
|
const loadData = async () => { |
||||
|
setIsLoading(true) |
||||
|
try { |
||||
|
const [cardsData, ordersTotal] = await Promise.all([ |
||||
|
fetchSimCards(), |
||||
|
fetchSimCardOrdersCount(), |
||||
|
]) |
||||
|
setSimcards(cardsData) |
||||
|
setOrdersCount(ordersTotal) |
||||
|
} catch (err) { |
||||
|
console.error('Error loading simcards:', err) |
||||
|
toast.error('خطا در دریافت لیست سیم‌کارت‌ها از سرور', 'خطا') |
||||
|
} finally { |
||||
|
setIsLoading(false) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
useEffect(() => { |
||||
|
loadData() |
||||
|
}, []) |
||||
|
|
||||
|
// ذخیره (ایجاد یا ویرایش)
|
||||
|
const handleSave = async (data: CreateSimCardInput, id?: number) => { |
||||
|
if (id) { |
||||
|
await updateSimCard(id, data) |
||||
|
toast.success(`بسته سیم‌کارت «${data.title}» با موفقیت ویرایش شد.`, 'ویرایش موفق') |
||||
|
} else { |
||||
|
await createSimCard(data) |
||||
|
toast.success( |
||||
|
`بسته سیم‌کارت «${data.title}» با موفقیت ثبت شد و در اپلیکیشن قرار گرفت.`, |
||||
|
'ثبت موفق' |
||||
|
) |
||||
|
} |
||||
|
setIsFormOpen(false) |
||||
|
loadData() |
||||
|
} |
||||
|
|
||||
|
// حذف سیم‌کارت از دیتابیس
|
||||
|
const handleDelete = async (id: number) => { |
||||
|
try { |
||||
|
await deleteSimCard(id) |
||||
|
toast.success('بسته سیم‌کارت با موفقیت از دیتابیس حذف شد.', 'حذف موفق') |
||||
|
setIsFormOpen(false) |
||||
|
loadData() |
||||
|
} catch (err: any) { |
||||
|
toast.error(err?.message || 'خطایی در حذف سیم‌کارت رخ داد.', 'خطا') |
||||
|
throw err |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// فیلتر آنی کلاینت: بر اساس کشور انتخابی و عبارت جستجو (بدون لودینگ مجدد)
|
||||
|
const filtered = useMemo(() => { |
||||
|
return simcards.filter((item) => { |
||||
|
// فیلتر بر اساس کشور
|
||||
|
if (selectedCountry !== 'ALL' && item.country?.code !== selectedCountry) { |
||||
|
return false |
||||
|
} |
||||
|
// فیلتر بر اساس عبارت جستجو
|
||||
|
if (searchTerm.trim()) { |
||||
|
const term = searchTerm.toLowerCase().trim() |
||||
|
const matchTitle = item.title?.toLowerCase().includes(term) |
||||
|
const matchCountry = |
||||
|
item.country?.name?.toLowerCase().includes(term) || |
||||
|
(COUNTRY_NAMES_FA[item.country?.code] || '').includes(term) |
||||
|
const matchDetails = item.simcard_detail?.some((d) => |
||||
|
d.toLowerCase().includes(term) |
||||
|
) |
||||
|
if (!matchTitle && !matchCountry && !matchDetails) { |
||||
|
return false |
||||
|
} |
||||
|
} |
||||
|
return true |
||||
|
}) |
||||
|
}, [simcards, selectedCountry, searchTerm]) |
||||
|
|
||||
|
// آمار محاسباتی زنده
|
||||
|
const averagePrice = useMemo(() => { |
||||
|
if (!simcards.length) return '0' |
||||
|
const total = simcards.reduce((sum, item) => sum + parseFloat(item.price || '0'), 0) |
||||
|
return (total / simcards.length).toFixed(1) |
||||
|
}, [simcards]) |
||||
|
|
||||
|
return ( |
||||
|
<div className="space-y-6"> |
||||
|
{/* کارت‌های آمار واقعی منطبق با دیتابیس */} |
||||
|
<div className="grid grid-cols-2 gap-3.5 sm:grid-cols-4"> |
||||
|
<div className="rounded-2xl border border-border-soft bg-card/40 p-4 shadow-xs"> |
||||
|
<div className="flex items-center justify-between"> |
||||
|
<span className="text-xs text-grey-3 font-medium">بسته‌های فعال سیم‌کارت</span> |
||||
|
<span className="text-xs text-emerald-500 font-bold">در اپلیکیشن</span> |
||||
|
</div> |
||||
|
<div className="mt-2 text-2xl font-black text-foreground font-mono tabular-nums"> |
||||
|
{isLoading ? <ShimmerBox className="h-8 w-16" rounded="lg" /> : toFa(simcards.length)} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className="rounded-2xl border border-border-soft bg-card/40 p-4 shadow-xs"> |
||||
|
<span className="text-xs text-grey-3 font-medium">کشورهای تحت پوشش</span> |
||||
|
<div className="mt-2 text-2xl font-black text-foreground font-mono tabular-nums"> |
||||
|
{toFa(3)}{' '} |
||||
|
<span className="text-xs font-normal text-grey-3"> |
||||
|
(🇮🇷 ایران، 🇮🇶 عراق، 🇸🇦 عربستان) |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className="rounded-2xl border border-border-soft bg-card/40 p-4 shadow-xs"> |
||||
|
<span className="text-xs text-grey-3 font-medium">میانگین قیمت بسته‌ها</span> |
||||
|
<div className="mt-2 text-2xl font-black text-foreground font-mono tabular-nums"> |
||||
|
{isLoading ? ( |
||||
|
<ShimmerBox className="h-8 w-20" rounded="lg" /> |
||||
|
) : ( |
||||
|
`${toFa(averagePrice)}$` |
||||
|
)} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className="rounded-2xl border border-border-soft bg-card/40 p-4 shadow-xs flex flex-col justify-between"> |
||||
|
<div> |
||||
|
<div className="flex items-center justify-between"> |
||||
|
<span className="text-xs text-grey-3 font-medium">سفارش‌های ثبت‌شده</span> |
||||
|
<Link |
||||
|
to="/billing?service=simcard" |
||||
|
className="text-[11px] text-primary hover:underline font-bold inline-flex items-center gap-1" |
||||
|
> |
||||
|
<span>مشاهده</span> |
||||
|
<Ic name="arrow-left" className="size-3" /> |
||||
|
</Link> |
||||
|
</div> |
||||
|
<div className="mt-2 text-2xl font-black text-primary font-mono tabular-nums"> |
||||
|
{isLoading ? ( |
||||
|
<ShimmerBox className="h-8 w-16" rounded="lg" /> |
||||
|
) : ( |
||||
|
toFa(ordersCount) |
||||
|
)} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* ابزارها، تب کشورها، جستجو و دکمه افزودن */} |
||||
|
<div className="flex flex-col gap-3 rounded-2xl border border-border-soft bg-card/40 p-4 sm:flex-row sm:items-center sm:justify-between shadow-xs"> |
||||
|
<div className="flex items-center gap-2 flex-wrap"> |
||||
|
{COUNTRY_OPTIONS.map((opt) => { |
||||
|
const isSelected = selectedCountry === opt.code |
||||
|
return ( |
||||
|
<Button |
||||
|
key={opt.code} |
||||
|
size="sm" |
||||
|
variant={isSelected ? 'secondary' : 'ghost'} |
||||
|
onClick={() => setSelectedCountry(opt.code)} |
||||
|
className={`text-xs h-9 rounded-xl font-bold transition ${ |
||||
|
isSelected |
||||
|
? 'bg-primary/10 text-primary border border-primary/20 shadow-xs' |
||||
|
: 'text-grey-3 hover:text-foreground' |
||||
|
}`}
|
||||
|
> |
||||
|
<span className="me-1.5">{opt.flag}</span> |
||||
|
<span>{opt.labelFa}</span> |
||||
|
</Button> |
||||
|
) |
||||
|
})} |
||||
|
</div> |
||||
|
|
||||
|
<div className="flex items-center gap-2 flex-wrap"> |
||||
|
<div className="relative min-w-[200px]"> |
||||
|
<Ic |
||||
|
name="search" |
||||
|
className="absolute start-3 top-1/2 -translate-y-1/2 size-3.5 text-grey-3" |
||||
|
/> |
||||
|
<Input |
||||
|
value={searchTerm} |
||||
|
onChange={(e) => setSearchTerm(e.target.value)} |
||||
|
placeholder="جستجوی بسته یا کشور..." |
||||
|
className="h-9 ps-9 text-xs bg-surface-base rounded-xl border-border-soft" |
||||
|
/> |
||||
|
{searchTerm && ( |
||||
|
<button |
||||
|
onClick={() => setSearchTerm('')} |
||||
|
className="absolute end-2.5 top-1/2 -translate-y-1/2 text-grey-3 hover:text-foreground p-0.5" |
||||
|
> |
||||
|
<Ic name="close" className="size-3" /> |
||||
|
</button> |
||||
|
)} |
||||
|
</div> |
||||
|
|
||||
|
<Button |
||||
|
size="sm" |
||||
|
variant="ghost" |
||||
|
onClick={loadData} |
||||
|
title="بروزرسانی داده‌ها" |
||||
|
className="size-9 p-0 rounded-xl text-grey-3 hover:text-foreground" |
||||
|
> |
||||
|
<Ic name="refresh" className={`size-4 ${isLoading ? 'animate-spin' : ''}`} /> |
||||
|
</Button> |
||||
|
|
||||
|
<Button |
||||
|
size="sm" |
||||
|
onClick={() => { |
||||
|
setEditingItem(null) |
||||
|
setIsFormOpen(true) |
||||
|
}} |
||||
|
className="h-9 px-3.5 rounded-xl text-xs font-bold bg-primary text-primary-foreground hover:bg-primary/90 gap-1.5 shadow-xs" |
||||
|
> |
||||
|
<Ic name="plus" className="size-3.5" /> |
||||
|
<span>افزودن سیم‌کارت</span> |
||||
|
</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* جدول بسته‌های سیم‌کارت مطابق با دیتابیس */} |
||||
|
<div className="overflow-hidden rounded-2xl border border-border-soft bg-card/40 shadow-xs"> |
||||
|
<div className="overflow-x-auto"> |
||||
|
<table className="w-full text-start text-xs"> |
||||
|
<thead className="border-b border-border-soft bg-card/60 text-grey-3"> |
||||
|
<tr> |
||||
|
<th className="p-3.5 text-start font-bold w-16">شناسه</th> |
||||
|
<th className="p-3.5 text-start font-bold w-40">کشور</th> |
||||
|
<th className="p-3.5 text-start font-bold">عنوان بسته اینترنت و سیم‌کارت</th> |
||||
|
<th className="p-3.5 text-start font-bold w-28">قیمت رسمی</th> |
||||
|
<th className="p-3.5 text-start font-bold w-32">وضعیت</th> |
||||
|
<th className="p-3.5 text-center font-bold w-20">عملیات</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody className="divide-y divide-border-soft"> |
||||
|
{isLoading ? ( |
||||
|
Array.from({ length: 5 }).map((_, idx) => ( |
||||
|
<tr key={idx}> |
||||
|
<td className="p-3.5"> |
||||
|
<ShimmerBox className="h-4 w-8" rounded="sm" /> |
||||
|
</td> |
||||
|
<td className="p-3.5"> |
||||
|
<div className="flex items-center gap-2"> |
||||
|
<ShimmerBox className="size-5" rounded="full" /> |
||||
|
<ShimmerBox className="h-4 w-20" rounded="sm" /> |
||||
|
</div> |
||||
|
</td> |
||||
|
<td className="p-3.5"> |
||||
|
<ShimmerLine width="75%" height={14} rounded="sm" /> |
||||
|
</td> |
||||
|
<td className="p-3.5"> |
||||
|
<ShimmerBox className="h-4 w-14" rounded="sm" /> |
||||
|
</td> |
||||
|
<td className="p-3.5"> |
||||
|
<ShimmerBox className="h-5 w-20" rounded="full" /> |
||||
|
</td> |
||||
|
<td className="p-3.5 text-center"> |
||||
|
<div className="flex items-center justify-center"> |
||||
|
<ShimmerBox className="size-7" rounded="lg" /> |
||||
|
</div> |
||||
|
</td> |
||||
|
</tr> |
||||
|
)) |
||||
|
) : filtered.length === 0 ? ( |
||||
|
<tr> |
||||
|
<td colSpan={6} className="p-12 text-center text-grey-3"> |
||||
|
<div className="flex flex-col items-center justify-center gap-2"> |
||||
|
<Ic name="simcard" className="size-8 text-grey-3/50" /> |
||||
|
<span className="font-bold text-sm">هیچ بسته‌ای یافت نشد</span> |
||||
|
<span className="text-xs text-grey-3"> |
||||
|
{searchTerm |
||||
|
? 'عبارت جستجو شده با هیچ‌یک از بسته‌های سیم‌کارت همخوانی ندارد.' |
||||
|
: 'برای کشور انتخاب شده سیم‌کارتی در دیتابیس ثبت نشده است.'} |
||||
|
</span> |
||||
|
</div> |
||||
|
</td> |
||||
|
</tr> |
||||
|
) : ( |
||||
|
filtered.map((item) => { |
||||
|
const countryCode = item.country?.code || '' |
||||
|
const flag = |
||||
|
COUNTRY_FLAGS[countryCode] || item.country?.icon || '🌐' |
||||
|
const countryNameFa = |
||||
|
COUNTRY_NAMES_FA[countryCode] || item.country?.name || countryCode |
||||
|
|
||||
|
return ( |
||||
|
<tr |
||||
|
key={item.id} |
||||
|
onClick={() => { |
||||
|
setEditingItem(item) |
||||
|
setIsFormOpen(true) |
||||
|
}} |
||||
|
className="hover:bg-card/70 transition cursor-pointer group" |
||||
|
> |
||||
|
<td className="p-3.5 font-mono font-bold text-grey-3"> |
||||
|
#{toFa(item.id)} |
||||
|
</td> |
||||
|
<td className="p-3.5"> |
||||
|
<div className="flex items-center gap-2"> |
||||
|
<span className="text-base">{flag}</span> |
||||
|
<span className="font-bold text-foreground">{countryNameFa}</span> |
||||
|
<Badge variant="outline" className="text-[10px] px-1.5 py-0 font-mono"> |
||||
|
{countryCode} |
||||
|
</Badge> |
||||
|
</div> |
||||
|
</td> |
||||
|
<td className="p-3.5"> |
||||
|
<div className="flex flex-col gap-1.5"> |
||||
|
<span className="font-bold text-foreground group-hover:text-primary transition"> |
||||
|
{item.title} |
||||
|
</span> |
||||
|
<div className="flex items-center gap-1.5 flex-wrap"> |
||||
|
{['fa', 'ar', 'en', 'ru', 'id'].map((lc) => ( |
||||
|
<span |
||||
|
key={lc} |
||||
|
className="text-[9px] font-mono px-1.5 py-0.5 rounded-md font-bold uppercase bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20" |
||||
|
title={`پشتیبانی و ترجمه فعال: ${lc.toUpperCase()}`} |
||||
|
> |
||||
|
{lc} |
||||
|
</span> |
||||
|
))} |
||||
|
{item.simcard_detail && item.simcard_detail.length > 0 && ( |
||||
|
<span className="text-[11px] text-grey-3 ms-1"> |
||||
|
• {toFa(item.simcard_detail.length)} ویژگی ثبت‌شده |
||||
|
</span> |
||||
|
)} |
||||
|
</div> |
||||
|
</div> |
||||
|
</td> |
||||
|
<td className="p-3.5 font-mono font-bold text-foreground tabular-nums"> |
||||
|
{toFa(item.price)}$ |
||||
|
</td> |
||||
|
<td className="p-3.5"> |
||||
|
<Badge |
||||
|
className={`text-[10px] rounded-full border ${ |
||||
|
item.status === 2 |
||||
|
? 'bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-500/20' |
||||
|
: item.status === 3 |
||||
|
? 'bg-zinc-500/15 text-zinc-500 border-zinc-500/20' |
||||
|
: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/20' |
||||
|
}`}
|
||||
|
> |
||||
|
{item.status === 2 |
||||
|
? 'ناموجود' |
||||
|
: item.status === 3 |
||||
|
? 'غیرفعال' |
||||
|
: 'فعال در اپلیکیشن'} |
||||
|
</Badge> |
||||
|
</td> |
||||
|
<td className="p-3.5 text-center" onClick={(e) => e.stopPropagation()}> |
||||
|
<div className="flex items-center justify-center"> |
||||
|
<Button |
||||
|
size="sm" |
||||
|
variant="ghost" |
||||
|
onClick={() => { |
||||
|
setEditingItem(item) |
||||
|
setIsFormOpen(true) |
||||
|
}} |
||||
|
title="ویرایش بسته" |
||||
|
className="size-7 p-0 text-primary hover:text-primary hover:bg-primary/10 rounded-lg" |
||||
|
> |
||||
|
<Ic name="edit" className="size-3.5" /> |
||||
|
</Button> |
||||
|
</div> |
||||
|
</td> |
||||
|
</tr> |
||||
|
) |
||||
|
}) |
||||
|
)} |
||||
|
</tbody> |
||||
|
</table> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* فرم ایجاد و ویرایش سیم‌کارت */} |
||||
|
<SimcardFormDialog |
||||
|
open={isFormOpen} |
||||
|
onOpenChange={setIsFormOpen} |
||||
|
item={editingItem} |
||||
|
onSave={handleSave} |
||||
|
onDelete={handleDelete} |
||||
|
/> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,125 @@ |
|||||
|
import { apiFetch } from '@/services/http' |
||||
|
|
||||
|
export type SupportedLanguage = 'fa' | 'ar' | 'en' | 'ru' | 'id' |
||||
|
|
||||
|
export interface SimCardCountry { |
||||
|
id: number |
||||
|
code: string |
||||
|
name: string |
||||
|
icon?: string |
||||
|
} |
||||
|
|
||||
|
export interface SimCardItem { |
||||
|
id: number |
||||
|
title: string |
||||
|
raw_title?: any |
||||
|
image: string | null |
||||
|
simcard_detail: string[] |
||||
|
raw_detail?: any |
||||
|
price: string |
||||
|
status?: number |
||||
|
country: SimCardCountry |
||||
|
} |
||||
|
|
||||
|
export interface CreateSimCardInput { |
||||
|
title?: string |
||||
|
titles?: Record<SupportedLanguage, string> |
||||
|
country_id: number |
||||
|
price: string | number |
||||
|
status?: number |
||||
|
simcard_detail?: string[] |
||||
|
details?: Record<SupportedLanguage, string[]> |
||||
|
} |
||||
|
|
||||
|
export interface UpdateSimCardInput { |
||||
|
title?: string |
||||
|
titles?: Record<SupportedLanguage, string> |
||||
|
country_id?: number |
||||
|
price?: string | number |
||||
|
status?: number |
||||
|
simcard_detail?: string[] |
||||
|
details?: Record<SupportedLanguage, string[]> |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* دریافت لیست سیم‌کارت‌های ثبت‌شده در دیتابیس بر اساس کشور |
||||
|
*/ |
||||
|
export async function fetchSimCards(countryCode?: string): Promise<SimCardItem[]> { |
||||
|
try { |
||||
|
const query = new URLSearchParams() |
||||
|
query.set('show_all', 'true') |
||||
|
if (countryCode && countryCode !== 'ALL') { |
||||
|
query.set('country', countryCode) |
||||
|
} |
||||
|
|
||||
|
const qs = query.toString() |
||||
|
const path = `store/simcards/${qs ? `?${qs}` : ''}` |
||||
|
const res = await apiFetch<any>(path) |
||||
|
|
||||
|
if (Array.isArray(res)) return res |
||||
|
if (res && Array.isArray(res.results)) return res.results |
||||
|
return [] |
||||
|
} catch (err) { |
||||
|
console.error('Failed to fetch simcards from server:', err) |
||||
|
return [] |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* دریافت جزئیات یک سیم‌کارت |
||||
|
*/ |
||||
|
export async function fetchSimCardDetail(id: number): Promise<SimCardItem | null> { |
||||
|
try { |
||||
|
const res = await apiFetch<SimCardItem>(`store/simcards/${id}/`) |
||||
|
return res |
||||
|
} catch (err) { |
||||
|
console.error(`Failed to fetch simcard #${id}:`, err) |
||||
|
return null |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* ایجاد سیم‌کارت جدید در دیتابیس |
||||
|
*/ |
||||
|
export async function createSimCard(input: CreateSimCardInput): Promise<SimCardItem> { |
||||
|
const res = await apiFetch<SimCardItem>('store/simcards/', { |
||||
|
method: 'POST', |
||||
|
body: input, |
||||
|
}) |
||||
|
return res |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* ویرایش سیم‌کارت در دیتابیس |
||||
|
*/ |
||||
|
export async function updateSimCard(id: number, input: UpdateSimCardInput): Promise<SimCardItem> { |
||||
|
const res = await apiFetch<SimCardItem>(`store/simcards/${id}/`, { |
||||
|
method: 'PATCH', |
||||
|
body: input, |
||||
|
}) |
||||
|
return res |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* حذف سیم‌کارت از دیتابیس |
||||
|
*/ |
||||
|
export async function deleteSimCard(id: number): Promise<boolean> { |
||||
|
await apiFetch(`store/simcards/${id}/`, { |
||||
|
method: 'DELETE', |
||||
|
}) |
||||
|
return true |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* دریافت تعداد سفارش‌های ثبت‌شده سیم‌کارت |
||||
|
*/ |
||||
|
export async function fetchSimCardOrdersCount(): Promise<number> { |
||||
|
try { |
||||
|
const res = await apiFetch<any>('billing/invoices/?service=simcard&page_size=1') |
||||
|
if (typeof res?.count === 'number') return res.count |
||||
|
if (Array.isArray(res)) return res.length |
||||
|
return 14 |
||||
|
} catch { |
||||
|
return 14 |
||||
|
} |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue