Browse Source
feat: implement tours and billing features with supporting pages, components, and services
master
feat: implement tours and billing features with supporting pages, components, and services
master
21 changed files with 3120 additions and 212 deletions
-
87src/components/shared/Shimmer.tsx
-
2src/components/shared/TablePagination.tsx
-
331src/components/shared/UniversalDatePicker.tsx
-
17src/components/ui/dialog.tsx
-
133src/features/billing/BillingPage.tsx
-
5src/features/billing/components/BillingDetailModal.tsx
-
26src/features/tours/OngoingToursPage.tsx
-
5src/features/tours/TourOrdersPage.tsx
-
182src/features/tours/ToursPage.tsx
-
957src/features/tours/components/CreateTourDialog.tsx
-
948src/features/tours/components/TourDetailDialog.tsx
-
26src/features/tours/components/TourDetailSheet.tsx
-
3src/features/tours/components/TourStatusBadge.tsx
-
37src/features/tours/components/TourTranslationsDialog.tsx
-
31src/features/tours/services/tour-api.ts
-
1src/features/tours/types.ts
-
4src/icons.tsx
-
2src/index.css
-
486src/lib/date-utils.ts
-
42src/lib/jalali.ts
-
7src/services/http.ts
@ -0,0 +1,331 @@ |
|||||
|
import React, { useState, useEffect, useRef, useMemo } from 'react' |
||||
|
import { Ic } from '@/icons' |
||||
|
import { Button } from '@/components/ui/button' |
||||
|
import { useTranslation } from '@/i18n' |
||||
|
import { |
||||
|
parseSafeDate, |
||||
|
formatDateByLanguage, |
||||
|
gregorianToJalali, |
||||
|
jalaliToGregorian, |
||||
|
gregorianToHijri, |
||||
|
hijriToGregorian, |
||||
|
getCalendarMonthData, |
||||
|
JALALI_MONTH_NAMES, |
||||
|
HIJRI_MONTH_NAMES, |
||||
|
GREGORIAN_MONTH_NAMES, |
||||
|
} from '@/lib/date-utils' |
||||
|
import { cn } from '@/lib/utils' |
||||
|
|
||||
|
export interface UniversalDatePickerProps { |
||||
|
value?: string | null |
||||
|
onChange: (isoDate: string) => void |
||||
|
placeholder?: string |
||||
|
disabled?: boolean |
||||
|
label?: string |
||||
|
className?: string |
||||
|
minDate?: string |
||||
|
maxDate?: string |
||||
|
required?: boolean |
||||
|
size?: 'sm' | 'default' | 'lg' |
||||
|
clearable?: boolean |
||||
|
} |
||||
|
|
||||
|
export function UniversalDatePicker({ |
||||
|
value, |
||||
|
onChange, |
||||
|
placeholder, |
||||
|
disabled = false, |
||||
|
label, |
||||
|
className, |
||||
|
minDate, |
||||
|
maxDate, |
||||
|
required = false, |
||||
|
size = 'default', |
||||
|
clearable = true, |
||||
|
}: UniversalDatePickerProps) { |
||||
|
const { language, dir } = useTranslation() |
||||
|
const [isOpen, setIsOpen] = useState(false) |
||||
|
const containerRef = useRef<HTMLDivElement>(null) |
||||
|
|
||||
|
// تعیین نوع تقویم بر اساس زبان فعال
|
||||
|
const calendarType: 'persian' | 'islamic' | 'gregorian' = |
||||
|
language === 'fa' ? 'persian' : language === 'ar' ? 'islamic' : 'gregorian' |
||||
|
|
||||
|
// مقدار فعلی به صورت Date
|
||||
|
const selectedDate = useMemo(() => parseSafeDate(value), [value]) |
||||
|
|
||||
|
// وضعیت ماه و سال در حال مشاهده در تقویم
|
||||
|
const [viewYear, setViewYear] = useState<number>(() => { |
||||
|
const d = selectedDate || new Date() |
||||
|
if (calendarType === 'persian') return gregorianToJalali(d.getFullYear(), d.getMonth() + 1, d.getDate()).year |
||||
|
if (calendarType === 'islamic') return gregorianToHijri(d).year |
||||
|
return d.getFullYear() |
||||
|
}) |
||||
|
|
||||
|
const [viewMonth, setViewMonth] = useState<number>(() => { |
||||
|
const d = selectedDate || new Date() |
||||
|
if (calendarType === 'persian') return gregorianToJalali(d.getFullYear(), d.getMonth() + 1, d.getDate()).month |
||||
|
if (calendarType === 'islamic') return gregorianToHijri(d).month |
||||
|
return d.getMonth() + 1 |
||||
|
}) |
||||
|
|
||||
|
// وقتی مقدار تغییر کند یا باز شود، تقویم روی تاریخ انتخابی یا امروز تنظیم شود
|
||||
|
useEffect(() => { |
||||
|
if (isOpen) { |
||||
|
const d = selectedDate || new Date() |
||||
|
if (calendarType === 'persian') { |
||||
|
const j = gregorianToJalali(d.getFullYear(), d.getMonth() + 1, d.getDate()) |
||||
|
setViewYear(j.year) |
||||
|
setViewMonth(j.month) |
||||
|
} else if (calendarType === 'islamic') { |
||||
|
const h = gregorianToHijri(d) |
||||
|
setViewYear(h.year) |
||||
|
setViewMonth(h.month) |
||||
|
} else { |
||||
|
setViewYear(d.getFullYear()) |
||||
|
setViewMonth(d.getMonth() + 1) |
||||
|
} |
||||
|
} |
||||
|
}, [isOpen, selectedDate, calendarType]) |
||||
|
|
||||
|
// بستن پاپ‌اور هنگام کلیک به بیرون یا فشردن Escape
|
||||
|
useEffect(() => { |
||||
|
if (!isOpen) return |
||||
|
const handleClickOutside = (e: MouseEvent) => { |
||||
|
if (containerRef.current && !containerRef.current.contains(e.target as Node)) { |
||||
|
setIsOpen(false) |
||||
|
} |
||||
|
} |
||||
|
const handleKeyDown = (e: KeyboardEvent) => { |
||||
|
if (e.key === 'Escape') setIsOpen(false) |
||||
|
} |
||||
|
document.addEventListener('mousedown', handleClickOutside) |
||||
|
document.addEventListener('keydown', handleKeyDown) |
||||
|
return () => { |
||||
|
document.removeEventListener('mousedown', handleClickOutside) |
||||
|
document.removeEventListener('keydown', handleKeyDown) |
||||
|
} |
||||
|
}, [isOpen]) |
||||
|
|
||||
|
// رفتن به ماه قبل
|
||||
|
const handlePrevMonth = (e: React.MouseEvent) => { |
||||
|
e.stopPropagation() |
||||
|
if (viewMonth === 1) { |
||||
|
setViewMonth(12) |
||||
|
setViewYear((y) => y - 1) |
||||
|
} else { |
||||
|
setViewMonth((m) => m - 1) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// رفتن به ماه بعد
|
||||
|
const handleNextMonth = (e: React.MouseEvent) => { |
||||
|
e.stopPropagation() |
||||
|
if (viewMonth === 12) { |
||||
|
setViewMonth(1) |
||||
|
setViewYear((y) => y + 1) |
||||
|
} else { |
||||
|
setViewMonth((m) => m + 1) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// داده‌های ماه و ماتریس روزها
|
||||
|
const monthData = useMemo(() => { |
||||
|
return getCalendarMonthData(calendarType, viewYear, viewMonth) |
||||
|
}, [calendarType, viewYear, viewMonth]) |
||||
|
|
||||
|
// بررسی وضعیت امروز و انتخاب
|
||||
|
const todayIso = useMemo(() => { |
||||
|
const n = new Date() |
||||
|
return `${n.getFullYear()}-${String(n.getMonth() + 1).padStart(2, '0')}-${String(n.getDate()).padStart(2, '0')}` |
||||
|
}, []) |
||||
|
|
||||
|
const selectedIso = useMemo(() => { |
||||
|
if (!selectedDate) return '' |
||||
|
return `${selectedDate.getFullYear()}-${String(selectedDate.getMonth() + 1).padStart(2, '0')}-${String(selectedDate.getDate()).padStart(2, '0')}` |
||||
|
}, [selectedDate]) |
||||
|
|
||||
|
// انتخاب یک روز
|
||||
|
const handleSelectDay = (dayNumber: number) => { |
||||
|
const isoStr = monthData.toIso(dayNumber) |
||||
|
onChange(isoStr) |
||||
|
setIsOpen(false) |
||||
|
} |
||||
|
|
||||
|
// انتخاب تاریخ امروز
|
||||
|
const handleSelectToday = () => { |
||||
|
onChange(todayIso) |
||||
|
setIsOpen(false) |
||||
|
} |
||||
|
|
||||
|
// پاک کردن تاریخ
|
||||
|
const handleClear = (e?: React.MouseEvent) => { |
||||
|
if (e) e.stopPropagation() |
||||
|
onChange('') |
||||
|
setIsOpen(false) |
||||
|
} |
||||
|
|
||||
|
const formattedDisplayValue = value ? formatDateByLanguage(value, language, { style: 'medium' }) : '' |
||||
|
const defaultPlaceholder = |
||||
|
language === 'fa' ? 'انتخاب تاریخ...' : language === 'ar' ? 'اختر التاريخ...' : 'Select date...' |
||||
|
|
||||
|
return ( |
||||
|
<div className={cn('relative inline-flex flex-col', className)} ref={containerRef}> |
||||
|
{label && ( |
||||
|
<label className="mb-1.5 text-xs font-bold text-foreground"> |
||||
|
{label} {required && <span className="text-rose-500">*</span>} |
||||
|
</label> |
||||
|
)} |
||||
|
|
||||
|
{/* دکمه اینپوت تریگر انتخاب تاریخ */} |
||||
|
<div |
||||
|
onClick={() => !disabled && setIsOpen((prev) => !prev)} |
||||
|
className={cn( |
||||
|
'flex items-center justify-between gap-2 rounded-xl border border-border-soft bg-card/60 px-3 text-xs transition cursor-pointer select-none', |
||||
|
size === 'sm' && 'h-8 text-[11px]', |
||||
|
size === 'default' && 'h-9', |
||||
|
size === 'lg' && 'h-11 text-sm', |
||||
|
disabled && 'opacity-50 cursor-not-allowed pointer-events-none', |
||||
|
isOpen ? 'border-primary ring-1 ring-primary/40' : 'hover:border-primary/40', |
||||
|
!formattedDisplayValue && 'text-muted-foreground' |
||||
|
)} |
||||
|
> |
||||
|
<div className="flex items-center gap-2 truncate min-w-0"> |
||||
|
<Ic name="calendar" className="size-4 shrink-0 text-primary" /> |
||||
|
<span className="truncate font-medium"> |
||||
|
{formattedDisplayValue || placeholder || defaultPlaceholder} |
||||
|
</span> |
||||
|
</div> |
||||
|
|
||||
|
<div className="flex items-center gap-1 shrink-0"> |
||||
|
{clearable && Boolean(value) && !disabled && ( |
||||
|
<button |
||||
|
type="button" |
||||
|
onClick={handleClear} |
||||
|
className="size-5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/40 flex items-center justify-center transition" |
||||
|
title={language === 'fa' ? 'پاک کردن' : language === 'ar' ? 'مسح' : 'Clear'} |
||||
|
> |
||||
|
<Ic name="x" className="size-3.5" /> |
||||
|
</button> |
||||
|
)} |
||||
|
<Ic name="chevronDown" className={cn('size-3.5 text-muted-foreground transition-transform', isOpen && 'rotate-180')} /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* پاپ‌اور تقویم ماهانه */} |
||||
|
{isOpen && ( |
||||
|
<div |
||||
|
dir={dir} |
||||
|
className="absolute start-0 top-full z-50 mt-1.5 w-[280px] sm:w-[300px] rounded-2xl border border-border-soft bg-[#1e2128] p-3 shadow-xl backdrop-blur-md anim-pop" |
||||
|
> |
||||
|
{/* هدر کنترل ماه و سال */} |
||||
|
<div className="flex items-center justify-between gap-1 pb-2.5 border-b border-border-soft"> |
||||
|
<Button |
||||
|
type="button" |
||||
|
variant="ghost" |
||||
|
size="sm" |
||||
|
onClick={dir === 'rtl' ? handleNextMonth : handlePrevMonth} |
||||
|
className="size-7 p-0 rounded-lg text-muted-foreground hover:text-foreground hover:bg-card" |
||||
|
> |
||||
|
<Ic name={dir === 'rtl' ? 'chevronRight' : 'chevronLeft'} className="size-4" /> |
||||
|
</Button> |
||||
|
|
||||
|
<div className="flex items-center gap-1 font-bold text-xs text-foreground"> |
||||
|
<span>{monthData.monthName}</span> |
||||
|
<span className="font-mono">{monthData.yearFormatted}</span> |
||||
|
</div> |
||||
|
|
||||
|
<Button |
||||
|
type="button" |
||||
|
variant="ghost" |
||||
|
size="sm" |
||||
|
onClick={dir === 'rtl' ? handlePrevMonth : handleNextMonth} |
||||
|
className="size-7 p-0 rounded-lg text-muted-foreground hover:text-foreground hover:bg-card" |
||||
|
> |
||||
|
<Ic name={dir === 'rtl' ? 'chevronLeft' : 'chevronRight'} className="size-4" /> |
||||
|
</Button> |
||||
|
</div> |
||||
|
|
||||
|
{/* ردیف روزهای هفته */} |
||||
|
<div className="grid grid-cols-7 gap-1 pt-2 text-center text-[10px] font-bold text-muted-foreground"> |
||||
|
{monthData.weekdays.map((w, idx) => ( |
||||
|
<div key={idx} className="py-1"> |
||||
|
{w} |
||||
|
</div> |
||||
|
))} |
||||
|
</div> |
||||
|
|
||||
|
{/* ماتریس روزهای ماه */} |
||||
|
<div className="grid grid-cols-7 gap-1 pt-1"> |
||||
|
{/* خانه‌های خالی ابتدای ماه */} |
||||
|
{Array.from({ length: monthData.startOffset }).map((_, idx) => ( |
||||
|
<div key={`empty-${idx}`} className="size-8" /> |
||||
|
))} |
||||
|
|
||||
|
{/* روزهای ماه */} |
||||
|
{Array.from({ length: monthData.daysInMonth }).map((_, idx) => { |
||||
|
const dayNum = idx + 1 |
||||
|
const dayIso = monthData.toIso(dayNum) |
||||
|
const isSelected = selectedIso === dayIso |
||||
|
const isToday = todayIso === dayIso |
||||
|
|
||||
|
// بررسی minDate و maxDate
|
||||
|
const isDisabled = |
||||
|
(minDate && dayIso < minDate) || |
||||
|
(maxDate && dayIso > maxDate) |
||||
|
|
||||
|
return ( |
||||
|
<button |
||||
|
key={dayNum} |
||||
|
type="button" |
||||
|
disabled={Boolean(isDisabled)} |
||||
|
onClick={() => handleSelectDay(dayNum)} |
||||
|
className={cn( |
||||
|
'size-8 rounded-xl text-xs font-bold transition flex items-center justify-center', |
||||
|
isSelected |
||||
|
? 'bg-primary text-primary-foreground shadow-sm' |
||||
|
: isToday |
||||
|
? 'border border-primary/60 text-primary hover:bg-primary/10' |
||||
|
: 'text-foreground hover:bg-card/70', |
||||
|
isDisabled && 'opacity-30 cursor-not-allowed pointer-events-none' |
||||
|
)} |
||||
|
> |
||||
|
{monthData.formatDayNumber(dayNum)} |
||||
|
</button> |
||||
|
) |
||||
|
})} |
||||
|
</div> |
||||
|
|
||||
|
{/* فوتر تقویم با دکمه‌های سریع */} |
||||
|
<div className="mt-3 pt-2.5 border-t border-border-soft flex items-center justify-between gap-1 text-[11px]"> |
||||
|
<button |
||||
|
type="button" |
||||
|
onClick={handleSelectToday} |
||||
|
className="text-primary hover:underline font-bold px-2 py-0.5 rounded" |
||||
|
> |
||||
|
{language === 'fa' ? 'امروز' : language === 'ar' ? 'اليوم' : 'Today'} |
||||
|
</button> |
||||
|
|
||||
|
{value && ( |
||||
|
<button |
||||
|
type="button" |
||||
|
onClick={handleClear} |
||||
|
className="text-muted-foreground hover:text-rose-400 px-2 py-0.5 rounded" |
||||
|
> |
||||
|
{language === 'fa' ? 'پاک کردن' : language === 'ar' ? 'مسح' : 'Clear'} |
||||
|
</button> |
||||
|
)} |
||||
|
|
||||
|
<button |
||||
|
type="button" |
||||
|
onClick={() => setIsOpen(false)} |
||||
|
className="text-muted-foreground hover:text-foreground px-2 py-0.5 rounded" |
||||
|
> |
||||
|
{language === 'fa' ? 'بستن' : language === 'ar' ? 'إغلاق' : 'Close'} |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
)} |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,957 @@ |
|||||
|
import * as React 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 { createTour, type CreateTourPayload } from '../services/tour-api' |
||||
|
import type { TourTranslationData } from '../types' |
||||
|
|
||||
|
interface CreateTourDialogProps { |
||||
|
open: boolean |
||||
|
onOpenChange: (open: boolean) => void |
||||
|
onSuccess?: () => void |
||||
|
} |
||||
|
|
||||
|
const SUPPORTED_LANGUAGES = [ |
||||
|
{ code: 'fa', label: 'فارسی', flag: '🇮🇷', dir: 'rtl' }, |
||||
|
{ code: 'ar', label: 'العربية', flag: '🇸🇦', dir: 'rtl' }, |
||||
|
{ code: 'en', label: 'English', flag: '🇬🇧', dir: 'ltr' }, |
||||
|
{ code: 'ru', label: 'Русский', flag: '🇷🇺', dir: 'ltr' }, |
||||
|
{ code: 'id', label: 'Indonesia', flag: '🇮🇩', dir: 'ltr' }, |
||||
|
] as const |
||||
|
|
||||
|
const DESTINATION_COUNTRIES = [ |
||||
|
{ code: 'IQ', name: 'عراق (Iraq)', flag: '🇮🇶' }, |
||||
|
{ code: 'SA', name: 'عربستان (Saudi Arabia)', flag: '🇸🇦' }, |
||||
|
{ code: 'IR', name: 'ایران (Iran)', flag: '🇮🇷' }, |
||||
|
{ code: 'SY', name: 'سوریه (Syria)', flag: '🇸🇾' }, |
||||
|
{ code: 'OM', name: 'عمان (Oman)', flag: '🇴🇲' }, |
||||
|
] as const |
||||
|
|
||||
|
type LangCode = (typeof SUPPORTED_LANGUAGES)[number]['code'] |
||||
|
|
||||
|
export function CreateTourDialog({ |
||||
|
open, |
||||
|
onOpenChange, |
||||
|
onSuccess, |
||||
|
}: CreateTourDialogProps) { |
||||
|
const [activeTab, setActiveTab] = React.useState<'basic' | 'features_tips' | 'translations'>('basic') |
||||
|
const [selectedTransLang, setSelectedTransLang] = React.useState<LangCode>('en') |
||||
|
const [isSubmitting, setIsSubmitting] = React.useState<boolean>(false) |
||||
|
const [errorMessage, setErrorMessage] = React.useState<string | null>(null) |
||||
|
const [successMessage, setSuccessMessage] = React.useState<string | null>(null) |
||||
|
|
||||
|
// Basic info states
|
||||
|
const [title, setTitle] = React.useState('') |
||||
|
const [description, setDescription] = React.useState('') |
||||
|
const [startedAt, setStartedAt] = React.useState('') |
||||
|
const [endedAt, setEndedAt] = React.useState('') |
||||
|
const [capacity, setCapacity] = React.useState('40') |
||||
|
const [destinationCountry, setDestinationCountry] = React.useState('IQ') |
||||
|
const [primaryLang, setPrimaryLang] = React.useState<LangCode>('fa') |
||||
|
const [status, setStatus] = React.useState('AVAILABLE') |
||||
|
|
||||
|
// Pricing states
|
||||
|
const [price, setPrice] = React.useState('') |
||||
|
const [priceChild, setPriceChild] = React.useState('') |
||||
|
const [priceInfant, setPriceInfant] = React.useState('') |
||||
|
const [percentOff, setPercentOff] = React.useState('0') |
||||
|
|
||||
|
// Base features & tips
|
||||
|
const [features, setFeatures] = React.useState<string[]>([]) |
||||
|
const [newFeature, setNewFeature] = React.useState('') |
||||
|
const [tips, setTips] = React.useState<{ title: string; desc: string }[]>([]) |
||||
|
const [newTipTitle, setNewTipTitle] = React.useState('') |
||||
|
const [newTipDesc, setNewTipDesc] = React.useState('') |
||||
|
|
||||
|
// Multi-language translation state
|
||||
|
const [translations, setTranslations] = React.useState<Record<string, TourTranslationData>>({ |
||||
|
fa: { title: '', description: '', tour_feature: [], travel_tips: {} }, |
||||
|
ar: { title: '', description: '', tour_feature: [], travel_tips: {} }, |
||||
|
en: { title: '', description: '', tour_feature: [], travel_tips: {} }, |
||||
|
ru: { title: '', description: '', tour_feature: [], travel_tips: {} }, |
||||
|
id: { title: '', description: '', tour_feature: [], travel_tips: {} }, |
||||
|
}) |
||||
|
|
||||
|
// Reset form when opened
|
||||
|
React.useEffect(() => { |
||||
|
if (open) { |
||||
|
setErrorMessage(null) |
||||
|
setSuccessMessage(null) |
||||
|
setActiveTab('basic') |
||||
|
} |
||||
|
}, [open]) |
||||
|
|
||||
|
const handleAddFeature = () => { |
||||
|
if (!newFeature.trim()) return |
||||
|
setFeatures((prev) => [...prev, newFeature.trim()]) |
||||
|
setNewFeature('') |
||||
|
} |
||||
|
|
||||
|
const handleRemoveFeature = (idx: number) => { |
||||
|
setFeatures((prev) => prev.filter((_, i) => i !== idx)) |
||||
|
} |
||||
|
|
||||
|
const handleAddTip = () => { |
||||
|
if (!newTipTitle.trim() || !newTipDesc.trim()) return |
||||
|
setTips((prev) => [...prev, { title: newTipTitle.trim(), desc: newTipDesc.trim() }]) |
||||
|
setNewTipTitle('') |
||||
|
setNewTipDesc('') |
||||
|
} |
||||
|
|
||||
|
const handleRemoveTip = (idx: number) => { |
||||
|
setTips((prev) => prev.filter((_, i) => i !== idx)) |
||||
|
} |
||||
|
|
||||
|
// Helper for updating translation fields for selectedTransLang
|
||||
|
const handleTransFieldChange = (field: 'title' | 'description', val: string) => { |
||||
|
setTranslations((prev) => ({ |
||||
|
...prev, |
||||
|
[selectedTransLang]: { |
||||
|
...prev[selectedTransLang], |
||||
|
[field]: val, |
||||
|
}, |
||||
|
})) |
||||
|
} |
||||
|
|
||||
|
const handleAddTransFeature = (text: string) => { |
||||
|
if (!text.trim()) return |
||||
|
setTranslations((prev) => { |
||||
|
const current = prev[selectedTransLang] || { tour_feature: [] } |
||||
|
const currFeats = current.tour_feature || [] |
||||
|
return { |
||||
|
...prev, |
||||
|
[selectedTransLang]: { |
||||
|
...current, |
||||
|
tour_feature: [...currFeats, { title: text.trim() }], |
||||
|
}, |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
const handleRemoveTransFeature = (idx: number) => { |
||||
|
setTranslations((prev) => { |
||||
|
const current = prev[selectedTransLang] || { tour_feature: [] } |
||||
|
const currFeats = current.tour_feature || [] |
||||
|
return { |
||||
|
...prev, |
||||
|
[selectedTransLang]: { |
||||
|
...current, |
||||
|
tour_feature: currFeats.filter((_, i) => i !== idx), |
||||
|
}, |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
const handleAddTransTip = (tipTitle: string, tipDesc: string) => { |
||||
|
if (!tipTitle.trim() || !tipDesc.trim()) return |
||||
|
setTranslations((prev) => { |
||||
|
const current = prev[selectedTransLang] || { travel_tips: {} } |
||||
|
const currTips = current.travel_tips || {} |
||||
|
return { |
||||
|
...prev, |
||||
|
[selectedTransLang]: { |
||||
|
...current, |
||||
|
travel_tips: { |
||||
|
...currTips, |
||||
|
[tipTitle.trim()]: tipDesc.trim(), |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
const handleRemoveTransTip = (tipTitle: string) => { |
||||
|
setTranslations((prev) => { |
||||
|
const current = prev[selectedTransLang] || { travel_tips: {} } |
||||
|
const currTips = { ...(current.travel_tips || {}) } |
||||
|
delete currTips[tipTitle] |
||||
|
return { |
||||
|
...prev, |
||||
|
[selectedTransLang]: { |
||||
|
...current, |
||||
|
travel_tips: currTips, |
||||
|
}, |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
const [newTransFeatText, setNewTransFeatText] = React.useState('') |
||||
|
const [newTransTipTitle, setNewTransTipTitle] = React.useState('') |
||||
|
const [newTransTipDesc, setNewTransTipDesc] = React.useState('') |
||||
|
|
||||
|
const handleSubmit = async (e: React.FormEvent) => { |
||||
|
e.preventDefault() |
||||
|
setErrorMessage(null) |
||||
|
setSuccessMessage(null) |
||||
|
|
||||
|
// Validation
|
||||
|
if (!title.trim()) { |
||||
|
setErrorMessage('لطفاً عنوان اصلی تور را وارد نمایید.') |
||||
|
setActiveTab('basic') |
||||
|
return |
||||
|
} |
||||
|
if (!startedAt) { |
||||
|
setErrorMessage('لطفاً تاریخ شروع تور را مشخص نمایید.') |
||||
|
setActiveTab('basic') |
||||
|
return |
||||
|
} |
||||
|
if (!endedAt) { |
||||
|
setErrorMessage('لطفاً تاریخ پایان تور را مشخص نمایید.') |
||||
|
setActiveTab('basic') |
||||
|
return |
||||
|
} |
||||
|
if (new Date(endedAt) < new Date(startedAt)) { |
||||
|
setErrorMessage('تاریخ پایان تور نمی‌تواند قبل از تاریخ شروع باشد.') |
||||
|
setActiveTab('basic') |
||||
|
return |
||||
|
} |
||||
|
if (!price || isNaN(Number(price)) || Number(price) <= 0) { |
||||
|
setErrorMessage('لطفاً قیمت معتبر برای بزرگسال وارد نمایید.') |
||||
|
setActiveTab('basic') |
||||
|
return |
||||
|
} |
||||
|
if (!capacity || isNaN(Number(capacity)) || Number(capacity) <= 0) { |
||||
|
setErrorMessage('لطفاً ظرفیت معتبر برای تور وارد نمایید.') |
||||
|
setActiveTab('basic') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
setIsSubmitting(true) |
||||
|
|
||||
|
try { |
||||
|
const tour_feature = features.map((f) => ({ title: f })) |
||||
|
const travel_tips: Record<string, string> = {} |
||||
|
tips.forEach((t) => { |
||||
|
travel_tips[t.title] = t.desc |
||||
|
}) |
||||
|
|
||||
|
// Clean translations payload: include any language that has data
|
||||
|
const cleanedTranslations: Record<string, TourTranslationData> = {} |
||||
|
Object.entries(translations).forEach(([code, data]) => { |
||||
|
const hasTitle = Boolean(data.title?.trim()) |
||||
|
const hasDesc = Boolean(data.description?.trim()) |
||||
|
const hasFeats = Boolean(data.tour_feature && data.tour_feature.length > 0) |
||||
|
const hasTips = Boolean(data.travel_tips && Object.keys(data.travel_tips).length > 0) |
||||
|
|
||||
|
if (hasTitle || hasDesc || hasFeats || hasTips) { |
||||
|
cleanedTranslations[code] = { |
||||
|
title: data.title?.trim() || (code === primaryLang ? title.trim() : ''), |
||||
|
description: data.description?.trim() || '', |
||||
|
tour_feature: data.tour_feature || [], |
||||
|
travel_tips: data.travel_tips || {}, |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// Ensure primary language translation is also present if not defined
|
||||
|
if (!cleanedTranslations[primaryLang]) { |
||||
|
cleanedTranslations[primaryLang] = { |
||||
|
title: title.trim(), |
||||
|
description: description.trim(), |
||||
|
tour_feature, |
||||
|
travel_tips, |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const payload: CreateTourPayload = { |
||||
|
title: title.trim(), |
||||
|
description: description.trim(), |
||||
|
started_at: startedAt, |
||||
|
ended_at: endedAt, |
||||
|
capacity: Number(capacity), |
||||
|
price: String(price), |
||||
|
price_child: priceChild ? String(priceChild) : '0', |
||||
|
price_infant: priceInfant ? String(priceInfant) : '0', |
||||
|
percent_off: percentOff ? Number(percentOff) : 0, |
||||
|
destination_country_code: destinationCountry, |
||||
|
language_code: primaryLang, |
||||
|
status, |
||||
|
tour_feature, |
||||
|
travel_tips, |
||||
|
visibility: true, |
||||
|
translations: cleanedTranslations, |
||||
|
} |
||||
|
|
||||
|
const createdTour = await createTour(payload) |
||||
|
setSuccessMessage(`تور "${createdTour.title}" با موفقیت ایجاد و ترجمه‌ها در دیتابیس ثبت گردید.`) |
||||
|
|
||||
|
setTimeout(() => { |
||||
|
if (onSuccess) onSuccess() |
||||
|
onOpenChange(false) |
||||
|
}, 900) |
||||
|
} catch (err: any) { |
||||
|
setErrorMessage(err?.message || 'خطا در ثبت تور جدید در سرور.') |
||||
|
} finally { |
||||
|
setIsSubmitting(false) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const activeTransConfig = SUPPORTED_LANGUAGES.find((l) => l.code === selectedTransLang) |
||||
|
const currentTransData = translations[selectedTransLang] || { |
||||
|
title: '', |
||||
|
description: '', |
||||
|
tour_feature: [], |
||||
|
travel_tips: {}, |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<Dialog open={open} onOpenChange={onOpenChange}> |
||||
|
<DialogContent |
||||
|
onPointerDownOutside={(e) => e.preventDefault()} |
||||
|
onInteractOutside={(e) => e.preventDefault()} |
||||
|
className="max-w-[840px] p-0 overflow-hidden max-h-[92vh] flex flex-col" |
||||
|
> |
||||
|
{/* Header */} |
||||
|
<DialogHeader className="px-6 pt-5 pb-4 border-b border-border/50 bg-secondary/15"> |
||||
|
<div className="flex items-center justify-between gap-3"> |
||||
|
<div className="flex items-center gap-2.5"> |
||||
|
<div className="flex size-9 items-center justify-center rounded-xl bg-primary/10 text-primary shrink-0"> |
||||
|
<Ic name="plus" className="size-5" /> |
||||
|
</div> |
||||
|
<div> |
||||
|
<DialogTitle className="text-base font-extrabold text-foreground"> |
||||
|
افزودن تور زیارتی و گردشگری جدید |
||||
|
</DialogTitle> |
||||
|
<DialogDescription className="text-xs text-grey-3 mt-0.5"> |
||||
|
ثبت مشخصات پایه، هزینه‌ها، ظرفیت و ورودی‌های ترجمه ۵ زبانه همزمان |
||||
|
</DialogDescription> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className="flex items-center gap-2"> |
||||
|
{/* Step/Tab buttons */} |
||||
|
<div className="flex items-center gap-1 rounded-xl bg-surface-2 p-1 border border-border/40"> |
||||
|
<button |
||||
|
type="button" |
||||
|
onClick={() => setActiveTab('basic')} |
||||
|
className={`px-3 py-1.5 text-xs font-bold rounded-lg transition-all cursor-pointer ${ |
||||
|
activeTab === 'basic' |
||||
|
? 'bg-primary text-white shadow-xs' |
||||
|
: 'text-grey-3 hover:text-foreground' |
||||
|
}`}
|
||||
|
> |
||||
|
۱. مشخصات و قیمت |
||||
|
</button> |
||||
|
<button |
||||
|
type="button" |
||||
|
onClick={() => setActiveTab('features_tips')} |
||||
|
className={`px-3 py-1.5 text-xs font-bold rounded-lg transition-all cursor-pointer ${ |
||||
|
activeTab === 'features_tips' |
||||
|
? 'bg-primary text-white shadow-xs' |
||||
|
: 'text-grey-3 hover:text-foreground' |
||||
|
}`}
|
||||
|
> |
||||
|
۲. ویژگی‌ها و نکات |
||||
|
</button> |
||||
|
<button |
||||
|
type="button" |
||||
|
onClick={() => setActiveTab('translations')} |
||||
|
className={`px-3 py-1.5 text-xs font-bold rounded-lg transition-all flex items-center gap-1.5 cursor-pointer ${ |
||||
|
activeTab === 'translations' |
||||
|
? 'bg-primary text-white shadow-xs' |
||||
|
: 'text-grey-3 hover:text-foreground' |
||||
|
}`}
|
||||
|
> |
||||
|
<Ic name="globe" className="size-3.5" /> |
||||
|
<span>۳. ترجمه‌های ۵ زبانه</span> |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
{/* دکمه علامت ضربدر بالای مودال */} |
||||
|
<button |
||||
|
type="button" |
||||
|
onClick={() => onOpenChange(false)} |
||||
|
aria-label="بستن پنجره" |
||||
|
title="بستن" |
||||
|
className="flex size-8 items-center justify-center rounded-lg text-grey-3 hover:text-foreground hover:bg-white/10 transition-colors shrink-0 cursor-pointer" |
||||
|
> |
||||
|
<Ic name="x" className="size-4.5" /> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</DialogHeader> |
||||
|
|
||||
|
{/* Form Body */} |
||||
|
<form onSubmit={handleSubmit} className="flex-1 overflow-y-auto px-6 py-5 space-y-5 flex flex-col justify-between"> |
||||
|
<div className="space-y-4"> |
||||
|
{errorMessage && ( |
||||
|
<div className="flex items-center gap-2 rounded-xl bg-rose-500/10 border border-rose-500/20 px-4 py-3 text-xs text-rose-400"> |
||||
|
<Ic name="alert" className="size-4 shrink-0" /> |
||||
|
<span>{errorMessage}</span> |
||||
|
</div> |
||||
|
)} |
||||
|
|
||||
|
{successMessage && ( |
||||
|
<div className="flex items-center gap-2 rounded-xl bg-emerald-500/10 border border-emerald-500/20 px-4 py-3 text-xs text-emerald-400"> |
||||
|
<Ic name="check" className="size-4 shrink-0" /> |
||||
|
<span>{successMessage}</span> |
||||
|
</div> |
||||
|
)} |
||||
|
|
||||
|
{/* TAB 1: Basic Info & Pricing */} |
||||
|
{activeTab === 'basic' && ( |
||||
|
<div className="space-y-4"> |
||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2"> |
||||
|
<div className="sm:col-span-2"> |
||||
|
<label className="block text-xs font-bold text-foreground mb-1.5"> |
||||
|
عنوان اصلی تور <span className="text-rose-500">*</span>: |
||||
|
</label> |
||||
|
<Input |
||||
|
value={title} |
||||
|
onChange={(e) => setTitle(e.target.value)} |
||||
|
placeholder="مثال: تور زیارتی عتبات عالیات نجف و کربلا (ویژه اربعین)..." |
||||
|
className="bg-surface-2 border-border/50 text-sm font-medium" |
||||
|
required |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div> |
||||
|
<label className="block text-xs font-bold text-foreground mb-1.5"> |
||||
|
کشور مقصد <span className="text-rose-500">*</span>: |
||||
|
</label> |
||||
|
<select |
||||
|
value={destinationCountry} |
||||
|
onChange={(e) => setDestinationCountry(e.target.value)} |
||||
|
className="w-full rounded-xl border border-border/50 bg-surface-2 px-3.5 py-2.5 text-sm text-foreground focus:border-primary focus:outline-none" |
||||
|
> |
||||
|
{DESTINATION_COUNTRIES.map((c) => ( |
||||
|
<option key={c.code} value={c.code}> |
||||
|
{c.flag} {c.name} |
||||
|
</option> |
||||
|
))} |
||||
|
</select> |
||||
|
</div> |
||||
|
|
||||
|
<div> |
||||
|
<label className="block text-xs font-bold text-foreground mb-1.5"> |
||||
|
زبان اصلی ثبت داده: |
||||
|
</label> |
||||
|
<select |
||||
|
value={primaryLang} |
||||
|
onChange={(e) => setPrimaryLang(e.target.value as LangCode)} |
||||
|
className="w-full rounded-xl border border-border/50 bg-surface-2 px-3.5 py-2.5 text-sm text-foreground focus:border-primary focus:outline-none" |
||||
|
> |
||||
|
{SUPPORTED_LANGUAGES.map((l) => ( |
||||
|
<option key={l.code} value={l.code}> |
||||
|
{l.flag} {l.label} ({l.code}) |
||||
|
</option> |
||||
|
))} |
||||
|
</select> |
||||
|
</div> |
||||
|
|
||||
|
<div> |
||||
|
<label className="block text-xs font-bold text-foreground mb-1.5"> |
||||
|
تاریخ شروع تور <span className="text-rose-500">*</span>: |
||||
|
</label> |
||||
|
<Input |
||||
|
type="date" |
||||
|
value={startedAt} |
||||
|
onChange={(e) => setStartedAt(e.target.value)} |
||||
|
className="bg-surface-2 border-border/50 text-sm font-mono" |
||||
|
required |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div> |
||||
|
<label className="block text-xs font-bold text-foreground mb-1.5"> |
||||
|
تاریخ پایان تور <span className="text-rose-500">*</span>: |
||||
|
</label> |
||||
|
<Input |
||||
|
type="date" |
||||
|
value={endedAt} |
||||
|
onChange={(e) => setEndedAt(e.target.value)} |
||||
|
className="bg-surface-2 border-border/50 text-sm font-mono" |
||||
|
required |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div> |
||||
|
<label className="block text-xs font-bold text-foreground mb-1.5"> |
||||
|
ظرفیت کل مسافران <span className="text-rose-500">*</span>: |
||||
|
</label> |
||||
|
<Input |
||||
|
type="number" |
||||
|
min="1" |
||||
|
value={capacity} |
||||
|
onChange={(e) => setCapacity(e.target.value)} |
||||
|
placeholder="۴۰" |
||||
|
className="bg-surface-2 border-border/50 text-sm font-mono" |
||||
|
required |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div> |
||||
|
<label className="block text-xs font-bold text-foreground mb-1.5"> |
||||
|
وضعیت فروش اولیه: |
||||
|
</label> |
||||
|
<select |
||||
|
value={status} |
||||
|
onChange={(e) => setStatus(e.target.value)} |
||||
|
className="w-full rounded-xl border border-border/50 bg-surface-2 px-3.5 py-2.5 text-sm text-foreground focus:border-primary focus:outline-none" |
||||
|
> |
||||
|
<option value="AVAILABLE">در دسترس (Available)</option> |
||||
|
<option value="SOLD_OUT">تکمیل ظرفیت (Sold Out)</option> |
||||
|
</select> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* Pricing Sub-card */} |
||||
|
<div className="rounded-2xl bg-surface-2/70 border border-border/50 p-4 space-y-3"> |
||||
|
<h4 className="text-xs font-extrabold text-foreground flex items-center gap-1.5"> |
||||
|
<Ic name="dollar" className="size-4 text-emerald-500" /> |
||||
|
<span>قیمت‌گذاری و تخفیفات (دلار)</span> |
||||
|
</h4> |
||||
|
|
||||
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3"> |
||||
|
<div> |
||||
|
<label className="block text-[11px] font-bold text-grey-2 mb-1"> |
||||
|
بزرگسال ($) <span className="text-rose-500">*</span>: |
||||
|
</label> |
||||
|
<Input |
||||
|
type="number" |
||||
|
step="0.01" |
||||
|
value={price} |
||||
|
onChange={(e) => setPrice(e.target.value)} |
||||
|
placeholder="520" |
||||
|
className="bg-surface-3 text-xs font-mono" |
||||
|
required |
||||
|
/> |
||||
|
</div> |
||||
|
<div> |
||||
|
<label className="block text-[11px] font-bold text-grey-2 mb-1"> |
||||
|
کودک (۲ تا ۷ سال): |
||||
|
</label> |
||||
|
<Input |
||||
|
type="number" |
||||
|
step="0.01" |
||||
|
value={priceChild} |
||||
|
onChange={(e) => setPriceChild(e.target.value)} |
||||
|
placeholder="280" |
||||
|
className="bg-surface-3 text-xs font-mono" |
||||
|
/> |
||||
|
</div> |
||||
|
<div> |
||||
|
<label className="block text-[11px] font-bold text-grey-2 mb-1"> |
||||
|
نوزاد (زیر ۲ سال): |
||||
|
</label> |
||||
|
<Input |
||||
|
type="number" |
||||
|
step="0.01" |
||||
|
value={priceInfant} |
||||
|
onChange={(e) => setPriceInfant(e.target.value)} |
||||
|
placeholder="80" |
||||
|
className="bg-surface-3 text-xs font-mono" |
||||
|
/> |
||||
|
</div> |
||||
|
<div> |
||||
|
<label className="block text-[11px] font-bold text-grey-2 mb-1"> |
||||
|
درصد تخفیف (%): |
||||
|
</label> |
||||
|
<Input |
||||
|
type="number" |
||||
|
min="0" |
||||
|
max="100" |
||||
|
value={percentOff} |
||||
|
onChange={(e) => setPercentOff(e.target.value)} |
||||
|
placeholder="0" |
||||
|
className="bg-surface-3 text-xs font-mono" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* Description */} |
||||
|
<div> |
||||
|
<label className="block text-xs font-bold text-foreground mb-1.5"> |
||||
|
شرح و توضیحات تور: |
||||
|
</label> |
||||
|
<textarea |
||||
|
rows={3} |
||||
|
value={description} |
||||
|
onChange={(e) => setDescription(e.target.value)} |
||||
|
placeholder="شرح کامل خدمات، برنامه‌های زیارتی و تسهیلات اقامتی تور..." |
||||
|
className="w-full rounded-xl border border-border/50 bg-surface-2 px-3.5 py-2.5 text-sm text-foreground placeholder:text-grey-4 focus:border-primary focus:outline-none" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
)} |
||||
|
|
||||
|
{/* TAB 2: Features and Tips */} |
||||
|
{activeTab === 'features_tips' && ( |
||||
|
<div className="space-y-5"> |
||||
|
{/* Features Section */} |
||||
|
<div className="space-y-3"> |
||||
|
<div className="flex items-center justify-between"> |
||||
|
<label className="text-xs font-bold text-foreground flex items-center gap-1.5"> |
||||
|
<Ic name="check" className="size-4 text-primary" /> |
||||
|
<span>ویژگی‌ها و خدمات شاخص تور ({features.length})</span> |
||||
|
</label> |
||||
|
</div> |
||||
|
|
||||
|
<div className="flex items-center gap-2"> |
||||
|
<Input |
||||
|
value={newFeature} |
||||
|
onChange={(e) => setNewFeature(e.target.value)} |
||||
|
placeholder="مثال: اقامت در هتل ۵ ستاره نزدیک حرم..." |
||||
|
className="bg-surface-2 text-xs" |
||||
|
onKeyDown={(e) => { |
||||
|
if (e.key === 'Enter') { |
||||
|
e.preventDefault() |
||||
|
handleAddFeature() |
||||
|
} |
||||
|
}} |
||||
|
/> |
||||
|
<Button |
||||
|
type="button" |
||||
|
size="sm" |
||||
|
onClick={handleAddFeature} |
||||
|
className="shrink-0 bg-primary/20 text-primary hover:bg-primary hover:text-white text-xs h-9 rounded-xl" |
||||
|
> |
||||
|
<Ic name="plus" className="size-4" /> |
||||
|
<span>افزودن</span> |
||||
|
</Button> |
||||
|
</div> |
||||
|
|
||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-2"> |
||||
|
{features.length === 0 ? ( |
||||
|
<p className="text-xs text-grey-4 col-span-2 text-center py-4 bg-surface-2/30 rounded-xl"> |
||||
|
هنوز ویژگی برای این تور اضافه نشده است. |
||||
|
</p> |
||||
|
) : ( |
||||
|
features.map((feat, idx) => ( |
||||
|
<div |
||||
|
key={idx} |
||||
|
className="flex items-center justify-between gap-2 rounded-xl bg-surface-2 border border-border/40 px-3 py-2 text-xs" |
||||
|
> |
||||
|
<span className="font-medium text-foreground truncate">{feat}</span> |
||||
|
<button |
||||
|
type="button" |
||||
|
onClick={() => handleRemoveFeature(idx)} |
||||
|
className="text-grey-4 hover:text-rose-400 p-1 shrink-0" |
||||
|
> |
||||
|
<Ic name="x" className="size-3.5" /> |
||||
|
</button> |
||||
|
</div> |
||||
|
)) |
||||
|
)} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* Travel Tips Section */} |
||||
|
<div className="space-y-3 pt-3 border-t border-border/40"> |
||||
|
<label className="text-xs font-bold text-foreground flex items-center gap-1.5"> |
||||
|
<Ic name="info" className="size-4 text-amber-500" /> |
||||
|
<span>نکات و راهنمای سفر ({tips.length})</span> |
||||
|
</label> |
||||
|
|
||||
|
<div className="rounded-xl bg-surface-2/60 border border-border/40 p-3 space-y-2"> |
||||
|
<Input |
||||
|
value={newTipTitle} |
||||
|
onChange={(e) => setNewTipTitle(e.target.value)} |
||||
|
placeholder="عنوان نکته (مثال: مدارک لازم / ارز مسافرتی)..." |
||||
|
className="bg-surface-2 text-xs" |
||||
|
/> |
||||
|
<textarea |
||||
|
rows={2} |
||||
|
value={newTipDesc} |
||||
|
onChange={(e) => setNewTipDesc(e.target.value)} |
||||
|
placeholder="توضیحات تکمیلی نکته سفر..." |
||||
|
className="w-full rounded-xl border border-border/50 bg-surface-2 px-3 py-2 text-xs text-foreground placeholder:text-grey-4 focus:border-primary focus:outline-none" |
||||
|
/> |
||||
|
<Button |
||||
|
type="button" |
||||
|
size="sm" |
||||
|
onClick={handleAddTip} |
||||
|
className="w-full bg-primary/20 text-primary hover:bg-primary hover:text-white text-xs h-8 rounded-xl" |
||||
|
> |
||||
|
<Ic name="plus" className="size-3.5 ml-1" /> |
||||
|
<span>افزودن نکته سفر</span> |
||||
|
</Button> |
||||
|
</div> |
||||
|
|
||||
|
<div className="space-y-2 mt-2"> |
||||
|
{tips.length === 0 ? ( |
||||
|
<p className="text-xs text-grey-4 text-center py-4 bg-surface-2/30 rounded-xl"> |
||||
|
نکته سفری ثبت نشده است. |
||||
|
</p> |
||||
|
) : ( |
||||
|
tips.map((tip, idx) => ( |
||||
|
<div |
||||
|
key={idx} |
||||
|
className="rounded-xl bg-surface-2 border border-border/40 p-3 text-xs space-y-1 relative" |
||||
|
> |
||||
|
<div className="flex items-center justify-between"> |
||||
|
<span className="font-bold text-foreground">{tip.title}</span> |
||||
|
<button |
||||
|
type="button" |
||||
|
onClick={() => handleRemoveTip(idx)} |
||||
|
className="text-grey-4 hover:text-rose-400 p-0.5" |
||||
|
> |
||||
|
<Ic name="x" className="size-3.5" /> |
||||
|
</button> |
||||
|
</div> |
||||
|
<p className="text-grey-3 leading-relaxed">{tip.desc}</p> |
||||
|
</div> |
||||
|
)) |
||||
|
)} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
)} |
||||
|
|
||||
|
{/* TAB 3: Multi-Language Translations */} |
||||
|
{activeTab === 'translations' && ( |
||||
|
<div className="space-y-4"> |
||||
|
{/* 5-Language Selector */} |
||||
|
<div className="flex items-center gap-1.5 overflow-x-auto pb-1 border-b border-border/40"> |
||||
|
{SUPPORTED_LANGUAGES.map((lang) => { |
||||
|
const isSelected = lang.code === selectedTransLang |
||||
|
const transObj = translations[lang.code] |
||||
|
const hasData = Boolean( |
||||
|
transObj?.title?.trim() || |
||||
|
transObj?.description?.trim() || |
||||
|
(transObj?.tour_feature && transObj.tour_feature.length > 0) |
||||
|
) |
||||
|
return ( |
||||
|
<button |
||||
|
key={lang.code} |
||||
|
type="button" |
||||
|
onClick={() => setSelectedTransLang(lang.code)} |
||||
|
className={`flex items-center gap-2 rounded-xl px-3.5 py-2 text-xs font-bold transition-all ${ |
||||
|
isSelected |
||||
|
? 'bg-primary text-white shadow-md' |
||||
|
: 'bg-surface-2 text-grey-2 hover:bg-surface-3 hover:text-foreground border border-border/30' |
||||
|
}`}
|
||||
|
> |
||||
|
<span className="text-sm">{lang.flag}</span> |
||||
|
<span>{lang.label}</span> |
||||
|
{hasData && !isSelected && ( |
||||
|
<span className="size-1.5 rounded-full bg-emerald-500" /> |
||||
|
)} |
||||
|
{lang.code === primaryLang && ( |
||||
|
<span className="text-[10px] opacity-80">(اصلی)</span> |
||||
|
)} |
||||
|
</button> |
||||
|
) |
||||
|
})} |
||||
|
</div> |
||||
|
|
||||
|
<div dir={activeTransConfig?.dir || 'rtl'} className="space-y-4"> |
||||
|
<div> |
||||
|
<label className="block text-xs font-bold text-foreground mb-1.5"> |
||||
|
عنوان تور به زبان {activeTransConfig?.label} ({selectedTransLang}): |
||||
|
</label> |
||||
|
<Input |
||||
|
value={currentTransData.title || ''} |
||||
|
onChange={(e) => handleTransFieldChange('title', e.target.value)} |
||||
|
placeholder={`عنوان تور به زبان ${activeTransConfig?.label}...`} |
||||
|
className="bg-surface-2 border-border/50 text-sm" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div> |
||||
|
<label className="block text-xs font-bold text-foreground mb-1.5"> |
||||
|
شرح و توضیحات به زبان {activeTransConfig?.label}: |
||||
|
</label> |
||||
|
<textarea |
||||
|
rows={3} |
||||
|
value={currentTransData.description || ''} |
||||
|
onChange={(e) => handleTransFieldChange('description', e.target.value)} |
||||
|
placeholder={`شرح تور به زبان ${activeTransConfig?.label}...`} |
||||
|
className="w-full rounded-xl border border-border/50 bg-surface-2 px-3.5 py-2 text-xs text-foreground placeholder:text-grey-4 focus:border-primary focus:outline-none" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
{/* Features for this language */} |
||||
|
<div className="space-y-2"> |
||||
|
<label className="block text-xs font-bold text-foreground"> |
||||
|
ویژگی‌ها به زبان {activeTransConfig?.label} ({(currentTransData.tour_feature || []).length}): |
||||
|
</label> |
||||
|
<div className="flex items-center gap-2"> |
||||
|
<Input |
||||
|
value={newTransFeatText} |
||||
|
onChange={(e) => setNewTransFeatText(e.target.value)} |
||||
|
placeholder={`افزودن ویژگی به ${activeTransConfig?.label}...`} |
||||
|
className="bg-surface-2 text-xs" |
||||
|
onKeyDown={(e) => { |
||||
|
if (e.key === 'Enter') { |
||||
|
e.preventDefault() |
||||
|
handleAddTransFeature(newTransFeatText) |
||||
|
setNewTransFeatText('') |
||||
|
} |
||||
|
}} |
||||
|
/> |
||||
|
<Button |
||||
|
type="button" |
||||
|
size="sm" |
||||
|
onClick={() => { |
||||
|
handleAddTransFeature(newTransFeatText) |
||||
|
setNewTransFeatText('') |
||||
|
}} |
||||
|
className="shrink-0 bg-primary/20 text-primary hover:bg-primary hover:text-white text-xs h-9 rounded-xl" |
||||
|
> |
||||
|
<Ic name="plus" className="size-4" /> |
||||
|
<span>افزودن</span> |
||||
|
</Button> |
||||
|
</div> |
||||
|
|
||||
|
<div className="space-y-1.5"> |
||||
|
{(currentTransData.tour_feature || []).map((feat, fIdx) => ( |
||||
|
<div |
||||
|
key={fIdx} |
||||
|
className="flex items-center justify-between rounded-xl bg-surface-2 border border-border/40 px-3 py-1.5 text-xs" |
||||
|
> |
||||
|
<span className="font-medium text-foreground">{feat.title}</span> |
||||
|
<button |
||||
|
type="button" |
||||
|
onClick={() => handleRemoveTransFeature(fIdx)} |
||||
|
className="text-grey-4 hover:text-rose-400 p-0.5" |
||||
|
> |
||||
|
<Ic name="x" className="size-3.5" /> |
||||
|
</button> |
||||
|
</div> |
||||
|
))} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* Travel Tips for this language */} |
||||
|
<div className="space-y-2 pt-2 border-t border-border/40"> |
||||
|
<label className="block text-xs font-bold text-foreground"> |
||||
|
نکات سفر به زبان {activeTransConfig?.label} ({Object.keys(currentTransData.travel_tips || {}).length}): |
||||
|
</label> |
||||
|
<div className="rounded-xl bg-surface-2/60 border border-border/40 p-2.5 space-y-2"> |
||||
|
<Input |
||||
|
value={newTransTipTitle} |
||||
|
onChange={(e) => setNewTransTipTitle(e.target.value)} |
||||
|
placeholder={`عنوان نکته به ${activeTransConfig?.label}...`} |
||||
|
className="bg-surface-2 text-xs" |
||||
|
/> |
||||
|
<textarea |
||||
|
rows={2} |
||||
|
value={newTransTipDesc} |
||||
|
onChange={(e) => setNewTransTipDesc(e.target.value)} |
||||
|
placeholder={`شرح نکته به ${activeTransConfig?.label}...`} |
||||
|
className="w-full rounded-xl border border-border/50 bg-surface-2 px-3 py-1.5 text-xs text-foreground placeholder:text-grey-4 focus:border-primary focus:outline-none" |
||||
|
/> |
||||
|
<Button |
||||
|
type="button" |
||||
|
size="sm" |
||||
|
onClick={() => { |
||||
|
handleAddTransTip(newTransTipTitle, newTransTipDesc) |
||||
|
setNewTransTipTitle('') |
||||
|
setNewTransTipDesc('') |
||||
|
}} |
||||
|
className="w-full bg-primary/20 text-primary hover:bg-primary hover:text-white text-xs h-8 rounded-xl" |
||||
|
> |
||||
|
<Ic name="plus" className="size-3.5 ml-1" /> |
||||
|
<span>افزودن نکته به زبان {activeTransConfig?.label}</span> |
||||
|
</Button> |
||||
|
</div> |
||||
|
|
||||
|
<div className="space-y-1.5"> |
||||
|
{Object.entries(currentTransData.travel_tips || {}).map(([tTitle, tDesc], tIdx) => ( |
||||
|
<div |
||||
|
key={tIdx} |
||||
|
className="rounded-xl bg-surface-2 border border-border/40 p-2.5 text-xs space-y-1" |
||||
|
> |
||||
|
<div className="flex items-center justify-between"> |
||||
|
<span className="font-bold text-foreground">{tTitle}</span> |
||||
|
<button |
||||
|
type="button" |
||||
|
onClick={() => handleRemoveTransTip(tTitle)} |
||||
|
className="text-grey-4 hover:text-rose-400 p-0.5" |
||||
|
> |
||||
|
<Ic name="x" className="size-3.5" /> |
||||
|
</button> |
||||
|
</div> |
||||
|
<p className="text-grey-3 leading-relaxed">{tDesc}</p> |
||||
|
</div> |
||||
|
))} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
)} |
||||
|
</div> |
||||
|
|
||||
|
{/* Footer */} |
||||
|
<DialogFooter className="px-6 py-4 bg-secondary/10 border-t border-border/50 flex items-center justify-between -mx-6 -mb-5 mt-6"> |
||||
|
<div className="flex items-center gap-2"> |
||||
|
<span className="text-xs text-grey-3"> |
||||
|
{activeTab === 'basic' && 'مرحله ۱ از ۳: اطلاعات پایه و قیمت'} |
||||
|
{activeTab === 'features_tips' && 'مرحله ۲ از ۳: ویژگی‌ها و نکات'} |
||||
|
{activeTab === 'translations' && 'مرحله ۳ از ۳: ترجمه‌های چندزبانه'} |
||||
|
</span> |
||||
|
</div> |
||||
|
|
||||
|
<div className="flex items-center gap-2"> |
||||
|
<DialogClose asChild> |
||||
|
<Button |
||||
|
type="button" |
||||
|
variant="outline" |
||||
|
size="sm" |
||||
|
onClick={() => onOpenChange(false)} |
||||
|
className="rounded-xl text-xs cursor-pointer" |
||||
|
> |
||||
|
انصراف |
||||
|
</Button> |
||||
|
</DialogClose> |
||||
|
|
||||
|
{activeTab === 'basic' && ( |
||||
|
<Button |
||||
|
type="button" |
||||
|
size="sm" |
||||
|
onClick={() => setActiveTab('features_tips')} |
||||
|
className="rounded-xl bg-primary text-white hover:bg-primary/90 text-xs gap-1.5" |
||||
|
> |
||||
|
<span>مرحله بعد: ویژگی‌ها</span> |
||||
|
<Ic name="arrow-left" className="size-3.5" /> |
||||
|
</Button> |
||||
|
)} |
||||
|
|
||||
|
{activeTab === 'features_tips' && ( |
||||
|
<Button |
||||
|
type="button" |
||||
|
size="sm" |
||||
|
onClick={() => setActiveTab('translations')} |
||||
|
className="rounded-xl bg-primary text-white hover:bg-primary/90 text-xs gap-1.5" |
||||
|
> |
||||
|
<span>مرحله بعد: ترجمه‌ها</span> |
||||
|
<Ic name="arrow-left" className="size-3.5" /> |
||||
|
</Button> |
||||
|
)} |
||||
|
|
||||
|
<Button |
||||
|
type="submit" |
||||
|
size="sm" |
||||
|
disabled={isSubmitting} |
||||
|
className="rounded-xl bg-emerald-600 text-white hover:bg-emerald-700 text-xs font-bold gap-1.5 shadow-sm" |
||||
|
> |
||||
|
{isSubmitting ? ( |
||||
|
<> |
||||
|
<div className="size-3.5 animate-spin rounded-full border-2 border-white border-t-transparent" /> |
||||
|
<span>در حال ثبت تور...</span> |
||||
|
</> |
||||
|
) : ( |
||||
|
<> |
||||
|
<Ic name="check" className="size-3.5" /> |
||||
|
<span>ایجاد و ثبت نهایی تور</span> |
||||
|
</> |
||||
|
)} |
||||
|
</Button> |
||||
|
</div> |
||||
|
</DialogFooter> |
||||
|
</form> |
||||
|
</DialogContent> |
||||
|
</Dialog> |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,948 @@ |
|||||
|
import React, { useState, useEffect } from 'react' |
||||
|
import { |
||||
|
Dialog, |
||||
|
DialogContent, |
||||
|
DialogHeader, |
||||
|
DialogTitle, |
||||
|
DialogDescription, |
||||
|
} from '@/components/ui/dialog' |
||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' |
||||
|
import { Button } from '@/components/ui/button' |
||||
|
import { Input } from '@/components/ui/input' |
||||
|
import { Badge } from '@/components/ui/badge' |
||||
|
import { Ic } from '@/icons' |
||||
|
import { Shimmer } from '@/components/shared/Shimmer' |
||||
|
import { |
||||
|
fetchTourDetail, |
||||
|
fetchTourItineraries, |
||||
|
fetchTourPassengers, |
||||
|
fetchTourComments, |
||||
|
fetchTourTranslations, |
||||
|
saveTourTranslations, |
||||
|
fetchTourItineraryTranslations, |
||||
|
saveTourItineraryTranslation, |
||||
|
} from '../services/tour-api' |
||||
|
import type { |
||||
|
TourDetailItem, |
||||
|
TourItineraryItem, |
||||
|
TourPassengerGroupItem, |
||||
|
TourCommentItem, |
||||
|
TourTranslationsResponse, |
||||
|
TourItineraryTranslationsResponseItem, |
||||
|
} from '../types' |
||||
|
import { TourStatusBadge, CountryFlagBadge } from './TourStatusBadge' |
||||
|
|
||||
|
interface TourDetailDialogProps { |
||||
|
tourId: number | null |
||||
|
isOpen: boolean |
||||
|
onClose: () => void |
||||
|
onUpdated?: () => void |
||||
|
} |
||||
|
|
||||
|
const SUPPORTED_LANGUAGES = [ |
||||
|
{ code: 'fa', label: 'فارسی', flag: '🇮🇷', dir: 'rtl' }, |
||||
|
{ code: 'ar', label: 'العربية', flag: '🇸🇦', dir: 'rtl' }, |
||||
|
{ code: 'en', label: 'English', flag: '🇬🇧', dir: 'ltr' }, |
||||
|
{ code: 'ru', label: 'Русский', flag: '🇷🇺', dir: 'ltr' }, |
||||
|
{ code: 'id', label: 'Indonesia', flag: '🇮🇩', dir: 'ltr' }, |
||||
|
] as const |
||||
|
|
||||
|
type LangCode = (typeof SUPPORTED_LANGUAGES)[number]['code'] |
||||
|
|
||||
|
export function TourDetailDialog({ |
||||
|
tourId, |
||||
|
isOpen, |
||||
|
onClose, |
||||
|
onUpdated, |
||||
|
}: TourDetailDialogProps) { |
||||
|
const [activeTab, setActiveTab] = useState<'overview' | 'itinerary' | 'features' | 'passengers' | 'comments'>('overview') |
||||
|
const [selectedLang, setSelectedLang] = useState<LangCode>('fa') |
||||
|
|
||||
|
// Main tour data
|
||||
|
const [tour, setTour] = useState<TourDetailItem | null>(null) |
||||
|
const [itineraries, setItineraries] = useState<TourItineraryItem[]>([]) |
||||
|
const [passengersGroup, setPassengersGroup] = useState<TourPassengerGroupItem[]>([]) |
||||
|
const [comments, setComments] = useState<TourCommentItem[]>([]) |
||||
|
|
||||
|
// Translation data from server
|
||||
|
const [transData, setTransData] = useState<TourTranslationsResponse | null>(null) |
||||
|
const [itinTransList, setItinTransList] = useState<TourItineraryTranslationsResponseItem[]>([]) |
||||
|
|
||||
|
// Translation local form drafts
|
||||
|
const [draftTitle, setDraftTitle] = useState<string>('') |
||||
|
const [draftDesc, setDraftDesc] = useState<string>('') |
||||
|
const [draftFeatures, setDraftFeatures] = useState<string[]>([]) |
||||
|
const [newFeatureInput, setNewFeatureInput] = useState<string>('') |
||||
|
const [draftTips, setDraftTips] = useState<{ title: string; desc: string }[]>([]) |
||||
|
const [newTipTitle, setNewTipTitle] = useState<string>('') |
||||
|
const [newTipDesc, setNewTipDesc] = useState<string>('') |
||||
|
const [itinDrafts, setItinDrafts] = useState<Record<number, { title: string; summary: string }>>({}) |
||||
|
|
||||
|
// Statuses
|
||||
|
const [isLoading, setIsLoading] = useState(false) |
||||
|
const [isLoadingSub, setIsLoadingSub] = useState(false) |
||||
|
const [isSaving, setIsSaving] = useState(false) |
||||
|
const [error, setError] = useState<string | null>(null) |
||||
|
const [successMessage, setSuccessMessage] = useState<string | null>(null) |
||||
|
const [savedItinId, setSavedItinId] = useState<number | null>(null) |
||||
|
|
||||
|
// Load tour detail and all translations on open
|
||||
|
useEffect(() => { |
||||
|
if (!tourId || !isOpen) { |
||||
|
setTour(null) |
||||
|
setTransData(null) |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
let isMounted = true |
||||
|
setIsLoading(true) |
||||
|
setError(null) |
||||
|
setSuccessMessage(null) |
||||
|
setActiveTab('overview') |
||||
|
|
||||
|
Promise.all([ |
||||
|
fetchTourDetail(tourId), |
||||
|
fetchTourTranslations(tourId).catch(() => null), |
||||
|
fetchTourItineraryTranslations(tourId).catch(() => []), |
||||
|
]) |
||||
|
.then(([detail, trans, itinTrans]) => { |
||||
|
if (!isMounted) return |
||||
|
setTour(detail) |
||||
|
setTransData(trans) |
||||
|
setItinTransList(itinTrans || []) |
||||
|
|
||||
|
const primaryLang = (trans?.primary_language || 'fa') as LangCode |
||||
|
setSelectedLang(primaryLang) |
||||
|
initDraftForLanguage(primaryLang, trans, itinTrans || [], detail) |
||||
|
setIsLoading(false) |
||||
|
}) |
||||
|
.catch((err: any) => { |
||||
|
if (isMounted) { |
||||
|
setError(err?.message || 'خطا در بارگذاری اطلاعات کامل تور') |
||||
|
setIsLoading(false) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
return () => { |
||||
|
isMounted = false |
||||
|
} |
||||
|
}, [tourId, isOpen]) |
||||
|
|
||||
|
// Sync draft fields when language changes
|
||||
|
const initDraftForLanguage = ( |
||||
|
lang: LangCode, |
||||
|
translations: TourTranslationsResponse | null, |
||||
|
itinList: TourItineraryTranslationsResponseItem[], |
||||
|
tourDetail: TourDetailItem | null |
||||
|
) => { |
||||
|
if (translations) { |
||||
|
const isPrimary = translations.primary_language === lang |
||||
|
const existing = isPrimary |
||||
|
? { |
||||
|
title: translations.primary_data.title || tourDetail?.title || '', |
||||
|
description: translations.primary_data.description || tourDetail?.description || '', |
||||
|
tour_feature: translations.primary_data.tour_feature || [], |
||||
|
travel_tips: translations.primary_data.travel_tips || {}, |
||||
|
} |
||||
|
: translations.translations[lang] || { |
||||
|
title: '', |
||||
|
description: '', |
||||
|
tour_feature: [], |
||||
|
travel_tips: {}, |
||||
|
} |
||||
|
|
||||
|
setDraftTitle(existing.title || '') |
||||
|
setDraftDesc(existing.description || '') |
||||
|
setDraftFeatures((existing.tour_feature || []).map((f) => f.title)) |
||||
|
setDraftTips( |
||||
|
Object.entries(existing.travel_tips || {}).map(([title, desc]) => ({ |
||||
|
title, |
||||
|
desc: String(desc), |
||||
|
})) |
||||
|
) |
||||
|
} else if (tourDetail) { |
||||
|
setDraftTitle(tourDetail.title || '') |
||||
|
setDraftDesc(tourDetail.description || '') |
||||
|
setDraftFeatures((tourDetail.tour_features || []).map((f) => f.title)) |
||||
|
setDraftTips( |
||||
|
(tourDetail.travel_tips || []).map((t) => ({ |
||||
|
title: t.title, |
||||
|
desc: t.description, |
||||
|
})) |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
// Itinerary drafts for this language
|
||||
|
const drafts: Record<number, { title: string; summary: string }> = {} |
||||
|
itinList.forEach((it) => { |
||||
|
const itTrans = it.translations[lang] |
||||
|
drafts[it.id] = { |
||||
|
title: itTrans?.title || (lang === translations?.primary_language ? it.title : ''), |
||||
|
summary: itTrans?.summary || (lang === translations?.primary_language ? it.summary : ''), |
||||
|
} |
||||
|
}) |
||||
|
setItinDrafts(drafts) |
||||
|
} |
||||
|
|
||||
|
const handleLanguageSwitch = (lang: LangCode) => { |
||||
|
setSelectedLang(lang) |
||||
|
setSuccessMessage(null) |
||||
|
initDraftForLanguage(lang, transData, itinTransList, tour) |
||||
|
} |
||||
|
|
||||
|
// Load sub-tabs (passengers, comments, itineraries) on demand
|
||||
|
useEffect(() => { |
||||
|
if (!tourId || !isOpen || !tour) return |
||||
|
let isMounted = true |
||||
|
|
||||
|
if (activeTab === 'itinerary' && itineraries.length === 0) { |
||||
|
setIsLoadingSub(true) |
||||
|
fetchTourItineraries(tourId) |
||||
|
.then((res) => { |
||||
|
if (isMounted) { |
||||
|
setItineraries(res.results || []) |
||||
|
setIsLoadingSub(false) |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => isMounted && setIsLoadingSub(false)) |
||||
|
} else if (activeTab === 'passengers' && passengersGroup.length === 0) { |
||||
|
setIsLoadingSub(true) |
||||
|
fetchTourPassengers(tourId) |
||||
|
.then((res) => { |
||||
|
if (isMounted) { |
||||
|
setPassengersGroup(res.results || []) |
||||
|
setIsLoadingSub(false) |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => isMounted && setIsLoadingSub(false)) |
||||
|
} else if (activeTab === 'comments' && comments.length === 0 && tour.slug) { |
||||
|
setIsLoadingSub(true) |
||||
|
fetchTourComments(tour.slug) |
||||
|
.then((res) => { |
||||
|
if (isMounted) { |
||||
|
setComments(res.results || []) |
||||
|
setIsLoadingSub(false) |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => isMounted && setIsLoadingSub(false)) |
||||
|
} |
||||
|
|
||||
|
return () => { |
||||
|
isMounted = false |
||||
|
} |
||||
|
}, [activeTab, tourId, isOpen, tour]) |
||||
|
|
||||
|
// Save tour translation for base overview
|
||||
|
const handleSaveBaseTranslation = async () => { |
||||
|
if (!tourId) return |
||||
|
setIsSaving(true) |
||||
|
setSuccessMessage(null) |
||||
|
|
||||
|
try { |
||||
|
await saveTourTranslations(tourId, { |
||||
|
lang_code: selectedLang, |
||||
|
title: draftTitle.trim(), |
||||
|
description: draftDesc.trim(), |
||||
|
}) |
||||
|
|
||||
|
const updatedTrans = await fetchTourTranslations(tourId) |
||||
|
setTransData(updatedTrans) |
||||
|
setSuccessMessage(`ترجمه مشخصات تور برای زبان ${activeLangConfig.label} با موفقیت ذخیره شد.`) |
||||
|
if (onUpdated) onUpdated() |
||||
|
} catch (err: any) { |
||||
|
setError(err?.message || 'خطا در ذخیره ترجمه مشخصات تور') |
||||
|
} finally { |
||||
|
setIsSaving(false) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Save specific itinerary step translation
|
||||
|
const handleSaveItineraryStep = async (itineraryId: number) => { |
||||
|
if (!tourId) return |
||||
|
const draft = itinDrafts[itineraryId] |
||||
|
if (!draft) return |
||||
|
|
||||
|
setIsSaving(true) |
||||
|
setSavedItinId(itineraryId) |
||||
|
|
||||
|
try { |
||||
|
await saveTourItineraryTranslation(tourId, { |
||||
|
itinerary_id: itineraryId, |
||||
|
lang_code: selectedLang, |
||||
|
title: draft.title.trim(), |
||||
|
summary: draft.summary.trim(), |
||||
|
}) |
||||
|
|
||||
|
const updatedItinTrans = await fetchTourItineraryTranslations(tourId) |
||||
|
setItinTransList(updatedItinTrans) |
||||
|
setSuccessMessage(`ترجمه مرحله سفر (${draft.title || itineraryId}) برای زبان ${activeLangConfig.label} ذخیره شد.`) |
||||
|
if (onUpdated) onUpdated() |
||||
|
} catch (err: any) { |
||||
|
setError(err?.message || 'خطا در ذخیره ترجمه مرحله سفر') |
||||
|
} finally { |
||||
|
setIsSaving(false) |
||||
|
setSavedItinId(null) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Save features & tips translation
|
||||
|
const handleSaveFeaturesAndTips = async () => { |
||||
|
if (!tourId) return |
||||
|
setIsSaving(true) |
||||
|
setSuccessMessage(null) |
||||
|
|
||||
|
try { |
||||
|
const tour_feature = draftFeatures.map((title) => ({ title })) |
||||
|
const travel_tips: Record<string, string> = {} |
||||
|
draftTips.forEach((t) => { |
||||
|
travel_tips[t.title] = t.desc |
||||
|
}) |
||||
|
|
||||
|
await saveTourTranslations(tourId, { |
||||
|
lang_code: selectedLang, |
||||
|
tour_feature, |
||||
|
travel_tips, |
||||
|
}) |
||||
|
|
||||
|
const updatedTrans = await fetchTourTranslations(tourId) |
||||
|
setTransData(updatedTrans) |
||||
|
setSuccessMessage(`امکانات و نکات راهنما برای زبان ${activeLangConfig.label} با موفقیت ذخیره شد.`) |
||||
|
if (onUpdated) onUpdated() |
||||
|
} catch (err: any) { |
||||
|
setError(err?.message || 'خطا در ذخیره امکانات و نکات راهنما') |
||||
|
} finally { |
||||
|
setIsSaving(false) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const activeLangConfig = SUPPORTED_LANGUAGES.find((l) => l.code === selectedLang) || SUPPORTED_LANGUAGES[0] |
||||
|
|
||||
|
return ( |
||||
|
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}> |
||||
|
<DialogContent className="max-w-4xl w-full p-0 overflow-hidden max-h-[90vh] flex flex-col border border-border-soft bg-background rounded-2xl shadow-xl"> |
||||
|
{/* Header Modal */} |
||||
|
<DialogHeader className="px-6 pt-5 pb-4 border-b border-border-soft bg-card/40 backdrop-blur-sm shrink-0"> |
||||
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3"> |
||||
|
<div className="flex items-center gap-3"> |
||||
|
<div className="flex size-10 items-center justify-center rounded-xl bg-primary/10 text-primary shrink-0"> |
||||
|
<Ic name="map" className="size-5" /> |
||||
|
</div> |
||||
|
<div className="space-y-0.5 text-start"> |
||||
|
<div className="flex items-center gap-2"> |
||||
|
<DialogTitle className="text-base font-extrabold text-foreground"> |
||||
|
{tour?.title || 'جزئیات و ترجمه‌های تور'} |
||||
|
</DialogTitle> |
||||
|
</div> |
||||
|
<DialogDescription className="text-xs text-grey-3 font-mono" dir="ltr"> |
||||
|
#{tourId} • {tour?.slug} |
||||
|
</DialogDescription> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* Badges & Close */} |
||||
|
<div className="flex items-center gap-2 self-start sm:self-auto"> |
||||
|
{tour && ( |
||||
|
<> |
||||
|
<CountryFlagBadge countryCode={tour.destination_country} /> |
||||
|
<TourStatusBadge status={tour.status} type="sale" /> |
||||
|
<TourStatusBadge status={tour.trip_status} type="trip" /> |
||||
|
</> |
||||
|
)} |
||||
|
<button |
||||
|
type="button" |
||||
|
onClick={onClose} |
||||
|
aria-label="بستن پنجره" |
||||
|
title="بستن" |
||||
|
className="flex size-8 items-center justify-center rounded-lg text-grey-3 hover:text-foreground hover:bg-white/10 transition-colors shrink-0 cursor-pointer mr-1" |
||||
|
> |
||||
|
<Ic name="x" className="size-4.5" /> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* Integrated 5-Language Selector Bar */} |
||||
|
<div className="mt-4 flex items-center justify-between gap-2 overflow-x-auto pt-2 border-t border-border-soft/60"> |
||||
|
<div className="flex items-center gap-1.5 shrink-0 text-xs text-grey-3"> |
||||
|
<Ic name="globe" className="size-3.5 text-primary" /> |
||||
|
<span className="font-bold">زبان فعال محتوا:</span> |
||||
|
</div> |
||||
|
|
||||
|
<div className="flex items-center gap-1.5 overflow-x-auto no-scrollbar pb-1"> |
||||
|
{SUPPORTED_LANGUAGES.map((lang) => { |
||||
|
const isSelected = lang.code === selectedLang |
||||
|
const isPrimary = transData?.primary_language === lang.code |
||||
|
const hasTrans = Boolean( |
||||
|
isPrimary || |
||||
|
transData?.translations[lang.code]?.title || |
||||
|
transData?.translations[lang.code]?.description |
||||
|
) |
||||
|
|
||||
|
return ( |
||||
|
<button |
||||
|
key={lang.code} |
||||
|
type="button" |
||||
|
onClick={() => handleLanguageSwitch(lang.code)} |
||||
|
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-bold transition cursor-pointer border ${ |
||||
|
isSelected |
||||
|
? 'bg-primary text-white border-primary shadow-xs' |
||||
|
: hasTrans |
||||
|
? 'bg-card/70 border-border-soft text-foreground hover:border-primary/40' |
||||
|
: 'bg-surface-base border-dashed border-border-soft text-grey-3 hover:text-foreground' |
||||
|
}`}
|
||||
|
> |
||||
|
<span>{lang.flag}</span> |
||||
|
<span>{lang.label}</span> |
||||
|
{isPrimary && ( |
||||
|
<span className={`text-[9px] px-1 py-0.2 rounded-full ${isSelected ? 'bg-white/20 text-white' : 'bg-primary/10 text-primary'}`}> |
||||
|
پایه |
||||
|
</span> |
||||
|
)} |
||||
|
</button> |
||||
|
) |
||||
|
})} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* Main Navigation Tabs */} |
||||
|
<Tabs |
||||
|
value={activeTab} |
||||
|
onValueChange={(val: any) => setActiveTab(val)} |
||||
|
className="mt-3 w-full" |
||||
|
> |
||||
|
<TabsList className="grid w-full grid-cols-5 bg-surface-base border border-border-soft p-1"> |
||||
|
<TabsTrigger value="overview" className="text-xs gap-1.5"> |
||||
|
<Ic name="file" className="size-3.5" /> |
||||
|
<span>مشخصات و متون</span> |
||||
|
</TabsTrigger> |
||||
|
<TabsTrigger value="itinerary" className="text-xs gap-1.5"> |
||||
|
<Ic name="calendar" className="size-3.5" /> |
||||
|
<span>برنامه سفر</span> |
||||
|
</TabsTrigger> |
||||
|
<TabsTrigger value="features" className="text-xs gap-1.5"> |
||||
|
<Ic name="star" className="size-3.5" /> |
||||
|
<span>امکانات و نکات</span> |
||||
|
</TabsTrigger> |
||||
|
<TabsTrigger value="passengers" className="text-xs gap-1.5"> |
||||
|
<Ic name="users" className="size-3.5" /> |
||||
|
<span>مسافران</span> |
||||
|
</TabsTrigger> |
||||
|
<TabsTrigger value="comments" className="text-xs gap-1.5"> |
||||
|
<Ic name="message" className="size-3.5" /> |
||||
|
<span>نظرات</span> |
||||
|
</TabsTrigger> |
||||
|
</TabsList> |
||||
|
</Tabs> |
||||
|
</DialogHeader> |
||||
|
|
||||
|
{/* Modal Scrollable Body */} |
||||
|
<div className="flex-1 overflow-y-auto p-6 space-y-6"> |
||||
|
{successMessage && ( |
||||
|
<div className="rounded-xl border border-emerald-500/20 bg-emerald-500/10 p-3 text-xs font-bold text-emerald-600 dark:text-emerald-400 flex items-center justify-between"> |
||||
|
<div className="flex items-center gap-2"> |
||||
|
<Ic name="check" className="size-4" /> |
||||
|
<span>{successMessage}</span> |
||||
|
</div> |
||||
|
<Button |
||||
|
variant="ghost" |
||||
|
size="sm" |
||||
|
className="size-6 p-0 text-emerald-600" |
||||
|
onClick={() => setSuccessMessage(null)} |
||||
|
> |
||||
|
× |
||||
|
</Button> |
||||
|
</div> |
||||
|
)} |
||||
|
|
||||
|
{isLoading ? ( |
||||
|
<Shimmer rows={6} withCard={false} /> |
||||
|
) : error ? ( |
||||
|
<div className="rounded-2xl border border-rose-500/20 bg-rose-500/5 p-8 text-center text-rose-500"> |
||||
|
<Ic name="alert" className="mx-auto size-8 mb-2" /> |
||||
|
<p className="font-bold text-sm">{error}</p> |
||||
|
<Button |
||||
|
variant="outline" |
||||
|
size="sm" |
||||
|
className="mt-4 border-rose-500/30 text-rose-500" |
||||
|
onClick={() => tourId && fetchTourDetail(tourId).then(setTour)} |
||||
|
> |
||||
|
تلاش مجدد |
||||
|
</Button> |
||||
|
</div> |
||||
|
) : tour ? ( |
||||
|
<> |
||||
|
{/* تب ۱: مشخصات و ترجمه متون */} |
||||
|
{activeTab === 'overview' && ( |
||||
|
<div className="space-y-6"> |
||||
|
{/* بخش ترجمه پویا برای عنوان و توضیحات تور */} |
||||
|
<div className="rounded-2xl border border-primary/20 bg-primary/5 p-4 space-y-3"> |
||||
|
<div className="flex items-center justify-between"> |
||||
|
<div className="flex items-center gap-2 text-xs font-extrabold text-foreground"> |
||||
|
<span>{activeLangConfig.flag}</span> |
||||
|
<span>محتوای متنی تور به زبان {activeLangConfig.label} ({activeLangConfig.code})</span> |
||||
|
</div> |
||||
|
<span className="text-[11px] text-grey-3"> |
||||
|
جهت متن: <span className="font-bold font-mono">{activeLangConfig.dir.toUpperCase()}</span> |
||||
|
</span> |
||||
|
</div> |
||||
|
|
||||
|
<div className="space-y-3"> |
||||
|
<div className="space-y-1"> |
||||
|
<label className="text-xs font-bold text-grey-2">عنوان تور ({activeLangConfig.label}):</label> |
||||
|
<Input |
||||
|
value={draftTitle} |
||||
|
onChange={(e) => setDraftTitle(e.target.value)} |
||||
|
placeholder={`عنوان تور را به زبان ${activeLangConfig.label} وارد نمایید...`} |
||||
|
dir={activeLangConfig.dir} |
||||
|
className="bg-card font-medium text-xs rounded-xl border-border-soft" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div className="space-y-1"> |
||||
|
<label className="text-xs font-bold text-grey-2">توضیحات کامل تور ({activeLangConfig.label}):</label> |
||||
|
<textarea |
||||
|
rows={4} |
||||
|
value={draftDesc} |
||||
|
onChange={(e) => setDraftDesc(e.target.value)} |
||||
|
placeholder={`توضیحات تفصیلی تور به زبان ${activeLangConfig.label}...`} |
||||
|
dir={activeLangConfig.dir} |
||||
|
className="w-full rounded-xl border border-border-soft bg-card p-3 text-xs leading-relaxed text-foreground focus:outline-hidden focus:ring-1 focus:ring-primary" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div className="flex justify-end pt-1"> |
||||
|
<Button |
||||
|
size="sm" |
||||
|
disabled={isSaving} |
||||
|
onClick={handleSaveBaseTranslation} |
||||
|
className="gap-1.5 text-xs font-bold rounded-xl" |
||||
|
> |
||||
|
<Ic name="save" className={`size-3.5 ${isSaving ? 'animate-spin' : ''}`} /> |
||||
|
<span>ذخیره تغییرات متنی ({activeLangConfig.label})</span> |
||||
|
</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* گالری تصاویر تور */} |
||||
|
{tour.images && tour.images.length > 0 && ( |
||||
|
<div className="space-y-2"> |
||||
|
<h4 className="text-xs font-bold text-grey-2">گالری تصاویر تور</h4> |
||||
|
<div className="flex gap-2.5 overflow-x-auto pb-2 no-scrollbar"> |
||||
|
{tour.images.map((img, i) => ( |
||||
|
<div |
||||
|
key={img.id || i} |
||||
|
className="relative size-24 shrink-0 overflow-hidden rounded-xl border border-border-soft bg-surface-base shadow-2xs" |
||||
|
> |
||||
|
<img |
||||
|
src={img.image_url?.md || img.image_url?.medium || img.image_url?.lg || img.image_url?.large || img.image_url?.original || '/placeholder.jpg'} |
||||
|
alt="" |
||||
|
className="h-full w-full object-cover" |
||||
|
/> |
||||
|
</div> |
||||
|
))} |
||||
|
</div> |
||||
|
</div> |
||||
|
)} |
||||
|
|
||||
|
{/* بازه تاریخ و ظرفیت */} |
||||
|
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4"> |
||||
|
<div className="rounded-xl border border-border-soft bg-card/30 p-3 text-center"> |
||||
|
<div className="text-[11px] text-grey-3">تاریخ شروع</div> |
||||
|
<div className="mt-1 font-bold text-xs text-foreground font-mono" dir="ltr">{tour.started_at}</div> |
||||
|
</div> |
||||
|
<div className="rounded-xl border border-border-soft bg-card/30 p-3 text-center"> |
||||
|
<div className="text-[11px] text-grey-3">تاریخ پایان</div> |
||||
|
<div className="mt-1 font-bold text-xs text-foreground font-mono" dir="ltr">{tour.ended_at}</div> |
||||
|
</div> |
||||
|
<div className="rounded-xl border border-border-soft bg-card/30 p-3 text-center"> |
||||
|
<div className="text-[11px] text-grey-3">ظرفیت کل</div> |
||||
|
<div className="mt-1 font-extrabold text-sm text-foreground">{tour.capacity} نفر</div> |
||||
|
</div> |
||||
|
<div className="rounded-xl border border-border-soft bg-card/30 p-3 text-center"> |
||||
|
<div className="text-[11px] text-grey-3">فروخته شده</div> |
||||
|
<div className="mt-1 font-extrabold text-sm text-primary">{tour.number_sold} نفر</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* نوار تکمیل ظرفیت */} |
||||
|
<div className="rounded-xl border border-border-soft bg-card/20 p-4 space-y-2"> |
||||
|
<div className="flex justify-between text-xs font-bold"> |
||||
|
<span>وضعیت تکمیل ظرفیت</span> |
||||
|
<span className="text-primary font-mono"> |
||||
|
{Math.round((tour.number_sold / (tour.capacity || 1)) * 100)}% |
||||
|
</span> |
||||
|
</div> |
||||
|
<div className="h-2 w-full overflow-hidden rounded-full bg-border-soft"> |
||||
|
<div |
||||
|
className="h-full rounded-full bg-gradient-to-r from-primary to-amber-500" |
||||
|
style={{ |
||||
|
width: `${Math.min(100, Math.round((tour.number_sold / (tour.capacity || 1)) * 100))}%`, |
||||
|
}} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="flex justify-between text-[11px] text-grey-3"> |
||||
|
<span>ظرفیت باقیمانده: {Math.max(0, tour.capacity - tour.number_sold)} صندلی</span> |
||||
|
<span>ظرفیت کل: {tour.capacity}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* جدول ۳ ردیف نرخ‌های مصوب */} |
||||
|
<div className="rounded-2xl border border-border-soft bg-card/40 p-4 space-y-3"> |
||||
|
<h4 className="text-xs font-extrabold text-foreground">جدول نرخ‌های مصوب تور</h4> |
||||
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3"> |
||||
|
<div className="rounded-xl border border-border-soft bg-surface-base p-3"> |
||||
|
<span className="text-[11px] text-grey-3">بزرگسال (۷+ سال / Adult 7+)</span> |
||||
|
<div className="mt-1 text-sm font-black text-foreground font-mono"> |
||||
|
${parseFloat(tour.price || '0').toLocaleString()} |
||||
|
</div> |
||||
|
{tour.percent_off > 0 && ( |
||||
|
<div className="mt-1 flex items-center gap-1.5 text-[11px]"> |
||||
|
<span className="rounded bg-rose-500/10 px-1.5 py-0.2 font-bold text-rose-500"> |
||||
|
{tour.percent_off}% تخفیف |
||||
|
</span> |
||||
|
<span className="font-bold text-emerald-600 dark:text-emerald-400 font-mono"> |
||||
|
نهایی: ${parseFloat(tour.final_price || '0').toLocaleString()} |
||||
|
</span> |
||||
|
</div> |
||||
|
)} |
||||
|
<span className="text-[10px] text-grey-3 block mt-1">خدمات کامل بزرگسال (۷ سال به بالا)</span> |
||||
|
</div> |
||||
|
|
||||
|
<div className="rounded-xl border border-border-soft bg-surface-base p-3"> |
||||
|
<span className="text-[11px] text-grey-3">کودک (۲ تا ۷ سال / Child 2-7)</span> |
||||
|
<div className="mt-1 text-sm font-black text-foreground font-mono"> |
||||
|
${parseFloat(tour.price_child || '0').toLocaleString()} |
||||
|
</div> |
||||
|
<span className="text-[10px] text-grey-3 block mt-1">صندلی و خدمات کودک (۲ تا ۷ سال کامل)</span> |
||||
|
</div> |
||||
|
|
||||
|
<div className="rounded-xl border border-border-soft bg-surface-base p-3"> |
||||
|
<span className="text-[11px] text-grey-3">نوزاد (۰ تا ۲ سال / Infant 0-2)</span> |
||||
|
<div className="mt-1 text-sm font-black text-foreground font-mono"> |
||||
|
${parseFloat(tour.price_infant || '0').toLocaleString()} |
||||
|
</div> |
||||
|
<span className="text-[10px] text-grey-3 block mt-1">بیمه و ترانسفر نوزاد (۰ تا ۲ سال کامل)</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
)} |
||||
|
|
||||
|
{/* تب ۲: برنامه سفر روزانه و ترجمه‌های هر مرحله */} |
||||
|
{activeTab === 'itinerary' && ( |
||||
|
<div className="space-y-4"> |
||||
|
<div className="flex items-center justify-between bg-surface-base p-3 rounded-xl border border-border-soft text-xs"> |
||||
|
<div className="flex items-center gap-2"> |
||||
|
<span>{activeLangConfig.flag}</span> |
||||
|
<span className="font-bold text-foreground"> |
||||
|
ترجمه مراحل برنامه سفر به زبان {activeLangConfig.label} ({activeLangConfig.code}) |
||||
|
</span> |
||||
|
</div> |
||||
|
<span className="text-grey-3 text-[11px]"> |
||||
|
تعداد مراحل: {itinTransList.length || itineraries.length} |
||||
|
</span> |
||||
|
</div> |
||||
|
|
||||
|
{isLoadingSub ? ( |
||||
|
<Shimmer rows={3} withCard={false} /> |
||||
|
) : (itinTransList.length === 0 && itineraries.length === 0) ? ( |
||||
|
<div className="rounded-2xl border border-dashed border-border-soft p-8 text-center text-grey-3"> |
||||
|
<Ic name="calendar" className="mx-auto size-8 mb-2 opacity-50" /> |
||||
|
<p className="text-xs">برنامه زمان‌بندی روزانه‌ای برای این تور ثبت نشده است.</p> |
||||
|
</div> |
||||
|
) : ( |
||||
|
<div className="space-y-4"> |
||||
|
{(itinTransList.length > 0 ? itinTransList : itineraries).map((item, idx) => { |
||||
|
const itId = item.id |
||||
|
const draft = itinDrafts[itId] || { title: item.title || '', summary: (item as any).summary || '' } |
||||
|
const isThisSaving = isSaving && savedItinId === itId |
||||
|
|
||||
|
return ( |
||||
|
<div |
||||
|
key={itId || idx} |
||||
|
className="rounded-2xl border border-border-soft bg-card/40 p-4 space-y-3 transition hover:border-primary/40" |
||||
|
> |
||||
|
<div className="flex items-center justify-between"> |
||||
|
<div className="flex items-center gap-2"> |
||||
|
<span className="flex size-6 items-center justify-center rounded-full bg-primary/10 text-xs font-bold text-primary font-mono"> |
||||
|
{idx + 1} |
||||
|
</span> |
||||
|
<span className="text-xs font-bold text-grey-3"> |
||||
|
مرحله #{itId} • {(item as any).started_at ? new Date((item as any).started_at).toLocaleDateString('fa-IR') : `روز ${idx + 1}`} |
||||
|
</span> |
||||
|
</div> |
||||
|
<Button |
||||
|
size="sm" |
||||
|
disabled={isThisSaving} |
||||
|
onClick={() => handleSaveItineraryStep(itId)} |
||||
|
className="h-7 px-3 text-[11px] font-bold rounded-xl gap-1" |
||||
|
> |
||||
|
<Ic name="save" className={`size-3 ${isThisSaving ? 'animate-spin' : ''}`} /> |
||||
|
<span>ذخیره مرحله</span> |
||||
|
</Button> |
||||
|
</div> |
||||
|
|
||||
|
<div className="space-y-2"> |
||||
|
<Input |
||||
|
value={draft.title} |
||||
|
onChange={(e) => { |
||||
|
const val = e.target.value |
||||
|
setItinDrafts((prev) => ({ |
||||
|
...prev, |
||||
|
[itId]: { ...prev[itId], title: val, summary: prev[itId]?.summary || '' }, |
||||
|
})) |
||||
|
}} |
||||
|
placeholder={`عنوان مرحله ${idx + 1} به زبان ${activeLangConfig.label}...`} |
||||
|
dir={activeLangConfig.dir} |
||||
|
className="bg-card text-xs font-bold rounded-xl border-border-soft" |
||||
|
/> |
||||
|
|
||||
|
<textarea |
||||
|
rows={2} |
||||
|
value={draft.summary} |
||||
|
onChange={(e) => { |
||||
|
const val = e.target.value |
||||
|
setItinDrafts((prev) => ({ |
||||
|
...prev, |
||||
|
[itId]: { ...prev[itId], title: prev[itId]?.title || '', summary: val }, |
||||
|
})) |
||||
|
}} |
||||
|
placeholder={`خلاصه برنامه این روز به زبان ${activeLangConfig.label}...`} |
||||
|
dir={activeLangConfig.dir} |
||||
|
className="w-full rounded-xl border border-border-soft bg-card p-2.5 text-xs leading-relaxed text-foreground focus:outline-hidden focus:ring-1 focus:ring-primary" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
) |
||||
|
})} |
||||
|
</div> |
||||
|
)} |
||||
|
</div> |
||||
|
)} |
||||
|
|
||||
|
{/* تب ۳: امکانات و نکات راهنما و ترجمه‌های مربوطه */} |
||||
|
{activeTab === 'features' && ( |
||||
|
<div className="space-y-6"> |
||||
|
<div className="flex items-center justify-between bg-surface-base p-3 rounded-xl border border-border-soft text-xs"> |
||||
|
<div className="flex items-center gap-2"> |
||||
|
<span>{activeLangConfig.flag}</span> |
||||
|
<span className="font-bold text-foreground"> |
||||
|
امکانات و راهنمای سفر به زبان {activeLangConfig.label} ({activeLangConfig.code}) |
||||
|
</span> |
||||
|
</div> |
||||
|
<Button |
||||
|
size="sm" |
||||
|
disabled={isSaving} |
||||
|
onClick={handleSaveFeaturesAndTips} |
||||
|
className="gap-1.5 text-xs font-bold rounded-xl h-7 px-3" |
||||
|
> |
||||
|
<Ic name="save" className={`size-3.5 ${isSaving ? 'animate-spin' : ''}`} /> |
||||
|
<span>ذخیره امکانات و نکات</span> |
||||
|
</Button> |
||||
|
</div> |
||||
|
|
||||
|
{/* ویژگی‌ها و امکانات (Features) */} |
||||
|
<div className="rounded-2xl border border-border-soft bg-card/40 p-4 space-y-3"> |
||||
|
<h4 className="text-xs font-extrabold text-foreground"> |
||||
|
امکانات و خدمات تور ({activeLangConfig.label}) |
||||
|
</h4> |
||||
|
<div className="flex flex-wrap gap-2"> |
||||
|
{draftFeatures.map((feat, idx) => ( |
||||
|
<div |
||||
|
key={idx} |
||||
|
className="flex items-center gap-1.5 rounded-xl border border-border-soft bg-surface-base px-3 py-1.5 text-xs font-bold text-foreground" |
||||
|
dir={activeLangConfig.dir} |
||||
|
> |
||||
|
<span>{feat}</span> |
||||
|
<button |
||||
|
type="button" |
||||
|
onClick={() => setDraftFeatures((prev) => prev.filter((_, i) => i !== idx))} |
||||
|
className="text-grey-3 hover:text-rose-500 cursor-pointer" |
||||
|
> |
||||
|
× |
||||
|
</button> |
||||
|
</div> |
||||
|
))} |
||||
|
</div> |
||||
|
|
||||
|
<div className="flex items-center gap-2 pt-2"> |
||||
|
<Input |
||||
|
value={newFeatureInput} |
||||
|
onChange={(e) => setNewFeatureInput(e.target.value)} |
||||
|
onKeyDown={(e) => { |
||||
|
if (e.key === 'Enter') { |
||||
|
e.preventDefault() |
||||
|
if (newFeatureInput.trim()) { |
||||
|
setDraftFeatures((prev) => [...prev, newFeatureInput.trim()]) |
||||
|
setNewFeatureInput('') |
||||
|
} |
||||
|
} |
||||
|
}} |
||||
|
placeholder={`افزودن امکان جدید به زبان ${activeLangConfig.label}...`} |
||||
|
dir={activeLangConfig.dir} |
||||
|
className="bg-card text-xs rounded-xl border-border-soft" |
||||
|
/> |
||||
|
<Button |
||||
|
size="sm" |
||||
|
variant="outline" |
||||
|
onClick={() => { |
||||
|
if (newFeatureInput.trim()) { |
||||
|
setDraftFeatures((prev) => [...prev, newFeatureInput.trim()]) |
||||
|
setNewFeatureInput('') |
||||
|
} |
||||
|
}} |
||||
|
className="shrink-0 text-xs rounded-xl" |
||||
|
> |
||||
|
+ افزودن |
||||
|
</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* راهنمای سفر و نکات (Travel Tips) */} |
||||
|
<div className="rounded-2xl border border-border-soft bg-card/40 p-4 space-y-3"> |
||||
|
<h4 className="text-xs font-extrabold text-foreground"> |
||||
|
نکات و راهنمای سفر ({activeLangConfig.label}) |
||||
|
</h4> |
||||
|
<div className="space-y-2"> |
||||
|
{draftTips.map((tip, idx) => ( |
||||
|
<div |
||||
|
key={idx} |
||||
|
className="rounded-xl border border-border-soft bg-surface-base p-3 space-y-1" |
||||
|
dir={activeLangConfig.dir} |
||||
|
> |
||||
|
<div className="flex items-center justify-between"> |
||||
|
<span className="font-bold text-xs text-foreground">{tip.title}</span> |
||||
|
<button |
||||
|
type="button" |
||||
|
onClick={() => setDraftTips((prev) => prev.filter((_, i) => i !== idx))} |
||||
|
className="text-grey-3 hover:text-rose-500 cursor-pointer text-xs" |
||||
|
> |
||||
|
حذف |
||||
|
</button> |
||||
|
</div> |
||||
|
<p className="text-xs text-grey-2 leading-relaxed">{tip.desc}</p> |
||||
|
</div> |
||||
|
))} |
||||
|
</div> |
||||
|
|
||||
|
<div className="rounded-xl border border-dashed border-border-soft bg-card/20 p-3 space-y-2 pt-3"> |
||||
|
<span className="text-[11px] font-bold text-grey-3">افزودن نکته جدید:</span> |
||||
|
<Input |
||||
|
value={newTipTitle} |
||||
|
onChange={(e) => setNewTipTitle(e.target.value)} |
||||
|
placeholder={`عنوان نکته به زبان ${activeLangConfig.label}...`} |
||||
|
dir={activeLangConfig.dir} |
||||
|
className="bg-card text-xs rounded-xl border-border-soft" |
||||
|
/> |
||||
|
<textarea |
||||
|
rows={2} |
||||
|
value={newTipDesc} |
||||
|
onChange={(e) => setNewTipDesc(e.target.value)} |
||||
|
placeholder={`شرح راهنما به زبان ${activeLangConfig.label}...`} |
||||
|
dir={activeLangConfig.dir} |
||||
|
className="w-full rounded-xl border border-border-soft bg-card p-2 text-xs text-foreground focus:outline-hidden" |
||||
|
/> |
||||
|
<Button |
||||
|
size="sm" |
||||
|
variant="outline" |
||||
|
onClick={() => { |
||||
|
if (newTipTitle.trim() && newTipDesc.trim()) { |
||||
|
setDraftTips((prev) => [...prev, { title: newTipTitle.trim(), desc: newTipDesc.trim() }]) |
||||
|
setNewTipTitle('') |
||||
|
setNewTipDesc('') |
||||
|
} |
||||
|
}} |
||||
|
className="text-xs rounded-xl" |
||||
|
> |
||||
|
+ ثبت نکته |
||||
|
</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
)} |
||||
|
|
||||
|
{/* تب ۴: مسافران (Passengers) */} |
||||
|
{activeTab === 'passengers' && ( |
||||
|
<div className="space-y-4"> |
||||
|
{isLoadingSub ? ( |
||||
|
<Shimmer rows={2} withCard={false} /> |
||||
|
) : passengersGroup.length === 0 ? ( |
||||
|
<div className="rounded-2xl border border-dashed border-border-soft p-8 text-center text-grey-3"> |
||||
|
<Ic name="users" className="mx-auto size-8 mb-2 opacity-50" /> |
||||
|
<p className="text-xs">هنوز مسافری برای این تور به ثبت نرسیده است.</p> |
||||
|
</div> |
||||
|
) : ( |
||||
|
<div className="space-y-3"> |
||||
|
{passengersGroup.map((group, idx) => ( |
||||
|
<div |
||||
|
key={group.user_id || idx} |
||||
|
className="rounded-2xl border border-border-soft bg-card/40 p-4 space-y-3" |
||||
|
> |
||||
|
<div className="flex items-center justify-between border-b border-border-soft pb-2 text-xs"> |
||||
|
<span className="font-bold text-foreground"> |
||||
|
سرگروه رزرو: {group.user} |
||||
|
</span> |
||||
|
<span className="text-grey-3 font-mono"> |
||||
|
{group.passengers?.length || 0} مسافر |
||||
|
</span> |
||||
|
</div> |
||||
|
|
||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5"> |
||||
|
{group.passengers?.map((p) => ( |
||||
|
<div |
||||
|
key={p.id} |
||||
|
className="rounded-xl border border-border-soft bg-surface-base p-3 space-y-1 text-xs" |
||||
|
> |
||||
|
<div className="font-bold text-foreground">{p.fullname}</div> |
||||
|
<div className="flex justify-between text-grey-3 font-mono text-[11px]" dir="ltr"> |
||||
|
<span>Passport: {p.passport_number || '-'}</span> |
||||
|
<span>DOB: {p.birthdate || '-'}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
))} |
||||
|
</div> |
||||
|
</div> |
||||
|
))} |
||||
|
</div> |
||||
|
)} |
||||
|
</div> |
||||
|
)} |
||||
|
|
||||
|
{/* تب ۵: نظرات کاربران (Comments) */} |
||||
|
{activeTab === 'comments' && ( |
||||
|
<div className="space-y-4"> |
||||
|
{isLoadingSub ? ( |
||||
|
<Shimmer rows={2} withCard={false} /> |
||||
|
) : comments.length === 0 ? ( |
||||
|
<div className="rounded-2xl border border-dashed border-border-soft p-8 text-center text-grey-3"> |
||||
|
<Ic name="message" className="mx-auto size-8 mb-2 opacity-50" /> |
||||
|
<p className="text-xs">تاکنون نظری برای این تور ثبت نشده است.</p> |
||||
|
</div> |
||||
|
) : ( |
||||
|
<div className="space-y-3"> |
||||
|
{comments.map((comment) => ( |
||||
|
<div |
||||
|
key={comment.id} |
||||
|
className="rounded-2xl border border-border-soft bg-card/40 p-4 space-y-2" |
||||
|
> |
||||
|
<div className="flex items-center justify-between text-xs"> |
||||
|
<span className="font-bold text-foreground">{comment.user}</span> |
||||
|
<div className="flex items-center gap-1 text-amber-500 font-mono font-bold"> |
||||
|
<span>★</span> |
||||
|
<span>{comment.score}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<p className="text-xs text-grey-2 leading-relaxed">{comment.text}</p> |
||||
|
</div> |
||||
|
))} |
||||
|
</div> |
||||
|
)} |
||||
|
</div> |
||||
|
)} |
||||
|
</> |
||||
|
) : null} |
||||
|
</div> |
||||
|
</DialogContent> |
||||
|
</Dialog> |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,486 @@ |
|||||
|
import { useLanguageStore, type SupportedLanguage } from '@/i18n' |
||||
|
import { toFa } from './utils' |
||||
|
|
||||
|
/* ────────────────────────────────────────────────────────────────────────── |
||||
|
* سیستم جامع تبدیل و نمایش تاریخ‌های چندزبانه در پنل مدیریت عقیله |
||||
|
* |
||||
|
* منطق تبدیل تقویم‌ها: |
||||
|
* ۱. زبان فارسی ('fa') → هجری شمسی (جلالی / Solar Hijri) |
||||
|
* ۲. زبان عربی ('ar') → هجری قمری (تقویم اسلامی أم القری / Islamic Hijri) |
||||
|
* ۳. انگلیسی ('en') و سایر → میلادی (گریگوری / Gregorian) |
||||
|
* |
||||
|
* داده‌های پایه بک‌اند و مقادیر فرم‌ها همواره در استاندارد ISO YYYY-MM-DD ذخیره می‌شوند. |
||||
|
* ────────────────────────────────────────────────────────────────────────── */ |
||||
|
|
||||
|
export type DateFormatStyle = 'short' | 'medium' | 'long' | 'numeric' |
||||
|
|
||||
|
export interface FormatDateOptions { |
||||
|
style?: DateFormatStyle |
||||
|
withTime?: boolean |
||||
|
withSeconds?: boolean |
||||
|
showEra?: boolean |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* پارس امن تاریخ بدون مشکل شیفت منطقه زمانی (Timezone Offset) |
||||
|
*/ |
||||
|
export function parseSafeDate(input: string | number | Date | null | undefined): Date | null { |
||||
|
if (!input) return null |
||||
|
if (input instanceof Date) return isNaN(input.getTime()) ? null : input |
||||
|
|
||||
|
const str = String(input).trim() |
||||
|
if (!str) return null |
||||
|
|
||||
|
// الگوی YYYY-MM-DD یا YYYY/MM/DD
|
||||
|
const matchOnlyDate = str.match(/^(\d{4})[-/](\d{1,2})[-/](\d{1,2})$/) |
||||
|
if (matchOnlyDate) { |
||||
|
const y = parseInt(matchOnlyDate[1], 10) |
||||
|
const m = parseInt(matchOnlyDate[2], 10) - 1 |
||||
|
const d = parseInt(matchOnlyDate[3], 10) |
||||
|
// استفاده از ساعت ۱۲ ظهر برای جلوگیری از تغییر روز در شیفت‌های تابستانی/زمستانی
|
||||
|
return new Date(y, m, d, 12, 0, 0) |
||||
|
} |
||||
|
|
||||
|
const parsed = new Date(str) |
||||
|
return isNaN(parsed.getTime()) ? null : parsed |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* قالب‌بندی یک تاریخ مشخص بر اساس زبان انتخابی (یا پیش‌فرض سامانه) |
||||
|
*/ |
||||
|
export function formatDateByLanguage( |
||||
|
dateInput: string | number | Date | null | undefined, |
||||
|
lang: SupportedLanguage = 'fa', |
||||
|
options: FormatDateOptions = {} |
||||
|
): string { |
||||
|
const d = parseSafeDate(dateInput) |
||||
|
if (!d) return '—' |
||||
|
|
||||
|
const style = options.style || 'medium' |
||||
|
|
||||
|
try { |
||||
|
if (lang === 'fa') { |
||||
|
if (style === 'numeric') { |
||||
|
return new Intl.DateTimeFormat('fa-IR-u-ca-persian', { |
||||
|
year: 'numeric', |
||||
|
month: '2-digit', |
||||
|
day: '2-digit', |
||||
|
}).format(d) |
||||
|
} |
||||
|
return new Intl.DateTimeFormat('fa-IR-u-ca-persian', { |
||||
|
year: 'numeric', |
||||
|
month: style === 'short' ? 'short' : 'long', |
||||
|
day: 'numeric', |
||||
|
}).format(d) |
||||
|
} |
||||
|
|
||||
|
if (lang === 'ar') { |
||||
|
if (style === 'numeric') { |
||||
|
return new Intl.DateTimeFormat('ar-SA-u-ca-islamic-umalqura', { |
||||
|
year: 'numeric', |
||||
|
month: '2-digit', |
||||
|
day: '2-digit', |
||||
|
}).format(d) |
||||
|
} |
||||
|
return new Intl.DateTimeFormat('ar-SA-u-ca-islamic-umalqura', { |
||||
|
year: 'numeric', |
||||
|
month: style === 'short' ? 'short' : 'long', |
||||
|
day: 'numeric', |
||||
|
}).format(d) |
||||
|
} |
||||
|
|
||||
|
// انگلیسی و سایر زبان‌ها (میلادی)
|
||||
|
if (style === 'numeric') { |
||||
|
const year = d.getFullYear() |
||||
|
const month = String(d.getMonth() + 1).padStart(2, '0') |
||||
|
const day = String(d.getDate()).padStart(2, '0') |
||||
|
return `${year}-${month}-${day}` |
||||
|
} |
||||
|
|
||||
|
return new Intl.DateTimeFormat('en-US', { |
||||
|
year: 'numeric', |
||||
|
month: style === 'short' ? 'short' : 'long', |
||||
|
day: 'numeric', |
||||
|
}).format(d) |
||||
|
} catch { |
||||
|
return d.toISOString().split('T')[0] |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* قالب‌بندی بازه زمانی تاریخ (شروع تا پایان) بدون باگ جهت متن (BiDi) |
||||
|
*/ |
||||
|
export function formatDateRangeByLanguage( |
||||
|
startDateInput: string | number | Date | null | undefined, |
||||
|
endDateInput: string | number | Date | null | undefined, |
||||
|
lang: SupportedLanguage = 'fa', |
||||
|
options: FormatDateOptions = {} |
||||
|
): string { |
||||
|
const s = parseSafeDate(startDateInput) |
||||
|
const e = parseSafeDate(endDateInput) |
||||
|
|
||||
|
if (!s && !e) return '—' |
||||
|
if (s && !e) return formatDateByLanguage(s, lang, options) |
||||
|
if (!s && e) return formatDateByLanguage(e, lang, options) |
||||
|
|
||||
|
const startFormatted = formatDateByLanguage(s, lang, options) |
||||
|
const endFormatted = formatDateByLanguage(e, lang, options) |
||||
|
|
||||
|
if (lang === 'fa') { |
||||
|
return `${startFormatted} تا ${endFormatted}` |
||||
|
} |
||||
|
if (lang === 'ar') { |
||||
|
return `${startFormatted} إلى ${endFormatted}` |
||||
|
} |
||||
|
return `${startFormatted} – ${endFormatted}` |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* قالب‌بندی تاریخ و ساعت به صورت همزمان |
||||
|
*/ |
||||
|
export function formatDateTimeByLanguage( |
||||
|
dateInput: string | number | Date | null | undefined, |
||||
|
lang: SupportedLanguage = 'fa', |
||||
|
options: FormatDateOptions = {} |
||||
|
): string { |
||||
|
const d = parseSafeDate(dateInput) |
||||
|
if (!d) return '—' |
||||
|
|
||||
|
const dateStr = formatDateByLanguage(d, lang, { ...options, style: options.style || 'numeric' }) |
||||
|
|
||||
|
const hours = String(d.getHours()).padStart(2, '0') |
||||
|
const minutes = String(d.getMinutes()).padStart(2, '0') |
||||
|
const timeStr = `${hours}:${minutes}` |
||||
|
|
||||
|
if (lang === 'fa') { |
||||
|
return `${dateStr}، ${toFa(timeStr)}` |
||||
|
} |
||||
|
if (lang === 'ar') { |
||||
|
return `${dateStr}، ${timeStr}` |
||||
|
} |
||||
|
return `${dateStr} ${timeStr}` |
||||
|
} |
||||
|
|
||||
|
/* ────────────────────────────────────────────────────────────────────────── |
||||
|
* React Hooks برای اشتراک خودکار با زبان فعال سیستم (Reactive Localization) |
||||
|
* ────────────────────────────────────────────────────────────────────────── */ |
||||
|
|
||||
|
/** |
||||
|
* هوک نمایش تاریخ منطبق بر زبان فعال پنل |
||||
|
*/ |
||||
|
export function useFormattedDate( |
||||
|
dateInput: string | number | Date | null | undefined, |
||||
|
options: FormatDateOptions = {} |
||||
|
): string { |
||||
|
const currentLang = useLanguageStore((s) => s.language) |
||||
|
return formatDateByLanguage(dateInput, currentLang, options) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* هوک نمایش بازه تاریخ (شروع و پایان) منطبق بر زبان فعال پنل |
||||
|
*/ |
||||
|
export function useFormattedDateRange( |
||||
|
startDateInput: string | number | Date | null | undefined, |
||||
|
endDateInput: string | number | Date | null | undefined, |
||||
|
options: FormatDateOptions = {} |
||||
|
): string { |
||||
|
const currentLang = useLanguageStore((s) => s.language) |
||||
|
return formatDateRangeByLanguage(startDateInput, endDateInput, currentLang, options) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* هوک نمایش تاریخ + ساعت منطبق بر زبان فعال پنل |
||||
|
*/ |
||||
|
export function useFormattedDateTime( |
||||
|
dateInput: string | number | Date | null | undefined, |
||||
|
options: FormatDateOptions = {} |
||||
|
): string { |
||||
|
const currentLang = useLanguageStore((s) => s.language) |
||||
|
return formatDateTimeByLanguage(dateInput, currentLang, options) |
||||
|
} |
||||
|
|
||||
|
/* ────────────────────────────────────────────────────────────────────────── |
||||
|
* الگوریتم‌های دقیق تبدیل تقویم‌ها جهت استفاده در کامپوننت انتخابگر تاریخ (Calendar Picker) |
||||
|
* ────────────────────────────────────────────────────────────────────────── */ |
||||
|
|
||||
|
// ۱. بررسی سال کبیسه جلالی
|
||||
|
export function isJalaliLeapYear(jy: number): boolean { |
||||
|
const breaks = [-61, 9, 38, 199, 426, 686, 756, 818, 1111, 1181, 1210, 1635, 2060, 2097, 2192, 2262, 2324, 2394, 2456, 3178] |
||||
|
const bl = breaks.length |
||||
|
let jp = breaks[0] |
||||
|
if (jy < jp || jy >= breaks[bl - 1]) return false |
||||
|
let jump = 0 |
||||
|
for (let i = 1; i < bl; i++) { |
||||
|
const jm = breaks[i] |
||||
|
jump = jm - jp |
||||
|
if (jy < jm) break |
||||
|
jp = jm |
||||
|
} |
||||
|
let n = jy - jp |
||||
|
if (jump - n < 6) n = n - jump + Math.floor((jump + 4) / 33) * 33 |
||||
|
let leap = (((n + 1) % 33) - 1) % 4 |
||||
|
if (leap === -1) leap = 4 |
||||
|
return leap === 0 |
||||
|
} |
||||
|
|
||||
|
export function getJalaliDaysInMonth(jy: number, jm: number): number { |
||||
|
if (jm <= 6) return 31 |
||||
|
if (jm <= 11) return 30 |
||||
|
return isJalaliLeapYear(jy) ? 30 : 29 |
||||
|
} |
||||
|
|
||||
|
export function jalaliToGregorian(jy: number, jm: number, jd: number): { year: number; month: number; day: number } { |
||||
|
let gy = jy <= 979 ? 621 : 1600 |
||||
|
jy -= jy <= 979 ? 0 : 979 |
||||
|
let days = |
||||
|
365 * jy + |
||||
|
Math.floor(jy / 33) * 8 + |
||||
|
Math.floor(((jy % 33) + 3) / 4) + |
||||
|
78 + |
||||
|
jd + |
||||
|
(jm < 7 ? (jm - 1) * 31 : (jm - 7) * 30 + 186) |
||||
|
gy += 400 * Math.floor(days / 146097) |
||||
|
days %= 146097 |
||||
|
if (days > 36524) { |
||||
|
gy += 100 * Math.floor(--days / 36524) |
||||
|
days %= 36524 |
||||
|
if (days >= 365) days++ |
||||
|
} |
||||
|
gy += 4 * Math.floor(days / 1461) |
||||
|
days %= 1461 |
||||
|
if (days > 365) { |
||||
|
gy += Math.floor((days - 1) / 365) |
||||
|
days = (days - 1) % 365 |
||||
|
} |
||||
|
const sal_a = [0, 31, (gy % 4 === 0 && gy % 100 !== 0) || gy % 400 === 0 ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] |
||||
|
let gm = 0 |
||||
|
while (gm < 13 && days >= sal_a[gm]) { |
||||
|
days -= sal_a[gm] |
||||
|
gm++ |
||||
|
} |
||||
|
const gd = days + 1 |
||||
|
return { year: gy, month: gm, day: gd } |
||||
|
} |
||||
|
|
||||
|
export function gregorianToJalali(gy: number, gm: number, gd: number): { year: number; month: number; day: number } { |
||||
|
const g_d_m = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334] |
||||
|
let jy = gy <= 1600 ? 0 : 979 |
||||
|
gy -= gy <= 1600 ? 621 : 1600 |
||||
|
const gy2 = gm > 2 ? gy + 1 : gy |
||||
|
let days = |
||||
|
365 * gy + |
||||
|
Math.floor((gy2 + 3) / 4) - |
||||
|
Math.floor((gy2 + 99) / 100) + |
||||
|
Math.floor((gy2 + 399) / 400) - |
||||
|
80 + |
||||
|
gd + |
||||
|
g_d_m[gm - 1] |
||||
|
jy += 33 * Math.floor(days / 12053) |
||||
|
days %= 12053 |
||||
|
jy += 4 * Math.floor(days / 1461) |
||||
|
days %= 1461 |
||||
|
if (days > 365) { |
||||
|
jy += Math.floor((days - 1) / 365) |
||||
|
days = (days - 1) % 365 |
||||
|
} |
||||
|
const jm = days < 186 ? 1 + Math.floor(days / 31) : 7 + Math.floor((days - 186) / 30) |
||||
|
const jd = 1 + (days < 186 ? days % 31 : (days - 186) % 30) |
||||
|
return { year: jy, month: jm, day: jd } |
||||
|
} |
||||
|
|
||||
|
// ۲. تبدیل هجری قمری به میلادی و برعکس
|
||||
|
export function gregorianToHijri(date: Date): { year: number; month: number; day: number } { |
||||
|
try { |
||||
|
const fmt = new Intl.DateTimeFormat('ar-SA-u-ca-islamic-umalqura-nu-latn', { |
||||
|
timeZone: 'UTC', |
||||
|
year: 'numeric', |
||||
|
month: 'numeric', |
||||
|
day: 'numeric', |
||||
|
}) |
||||
|
const parts = fmt.formatToParts(date) |
||||
|
const m: Record<string, string> = {} |
||||
|
for (const p of parts) m[p.type] = p.value |
||||
|
return { |
||||
|
year: parseInt(m.year, 10) || 1448, |
||||
|
month: parseInt(m.month, 10) || 1, |
||||
|
day: parseInt(m.day, 10) || 1, |
||||
|
} |
||||
|
} catch { |
||||
|
return { year: 1448, month: 1, day: 1 } |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export function hijriToGregorian(hy: number, hm: number, hd: number): { year: number; month: number; day: number } { |
||||
|
const fmt = new Intl.DateTimeFormat('ar-SA-u-ca-islamic-umalqura-nu-latn', { |
||||
|
timeZone: 'UTC', |
||||
|
year: 'numeric', |
||||
|
month: 'numeric', |
||||
|
day: 'numeric', |
||||
|
}) |
||||
|
|
||||
|
const estJulianDay = Math.floor((hy - 1) * 354.367056) + Math.floor((hm - 1) * 29.5) + hd + 1948439 |
||||
|
const estGregMs = (estJulianDay - 2440587.5) * 86400000 |
||||
|
const candidate = new Date(estGregMs) |
||||
|
|
||||
|
for (let offset = -10; offset <= 10; offset++) { |
||||
|
const testDate = new Date(candidate.getTime() + offset * 86400000) |
||||
|
const parts = fmt.formatToParts(testDate) |
||||
|
const m: Record<string, string> = {} |
||||
|
for (const p of parts) m[p.type] = p.value |
||||
|
if (parseInt(m.year, 10) === hy && parseInt(m.month, 10) === hm && parseInt(m.day, 10) === hd) { |
||||
|
return { |
||||
|
year: testDate.getUTCFullYear(), |
||||
|
month: testDate.getUTCMonth() + 1, |
||||
|
day: testDate.getUTCDate(), |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
year: candidate.getUTCFullYear(), |
||||
|
month: candidate.getUTCMonth() + 1, |
||||
|
day: candidate.getUTCDate(), |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* ────────────────────────────────────────────────────────────────────────── |
||||
|
* اطلاعات متای تقویم‌ها برای رندر در ادیتورها (Calendar Meta & Names) |
||||
|
* ────────────────────────────────────────────────────────────────────────── */ |
||||
|
|
||||
|
export const JALALI_MONTH_NAMES = [ |
||||
|
'فروردین', |
||||
|
'اردیبهشت', |
||||
|
'خرداد', |
||||
|
'تیر', |
||||
|
'مرداد', |
||||
|
'شهریور', |
||||
|
'مهر', |
||||
|
'آبان', |
||||
|
'آذر', |
||||
|
'دی', |
||||
|
'بهمن', |
||||
|
'اسفند', |
||||
|
] |
||||
|
|
||||
|
export const HIJRI_MONTH_NAMES = [ |
||||
|
'محرم', |
||||
|
'صفر', |
||||
|
'ربيع الأول', |
||||
|
'ربيع الآخر', |
||||
|
'جمادى الأولى', |
||||
|
'جمادى الآخرة', |
||||
|
'رجب', |
||||
|
'شعبان', |
||||
|
'رمضان', |
||||
|
'شوال', |
||||
|
'ذو القعدة', |
||||
|
'ذو الحجة', |
||||
|
] |
||||
|
|
||||
|
export const GREGORIAN_MONTH_NAMES = [ |
||||
|
'January', |
||||
|
'February', |
||||
|
'March', |
||||
|
'April', |
||||
|
'May', |
||||
|
'June', |
||||
|
'July', |
||||
|
'August', |
||||
|
'September', |
||||
|
'October', |
||||
|
'November', |
||||
|
'December', |
||||
|
] |
||||
|
|
||||
|
export const WEEKDAY_NAMES_FA = ['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج'] |
||||
|
export const WEEKDAY_NAMES_AR = ['س', 'ح', 'ن', 'ث', 'ر', 'خ', 'ج'] |
||||
|
export const WEEKDAY_NAMES_EN = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] |
||||
|
|
||||
|
/** |
||||
|
* دریافت اطلاعات و روزهای ماه جهت ساخت ماتریس گرید تقویم در ادیتور |
||||
|
*/ |
||||
|
export function getCalendarMonthData( |
||||
|
calendar: 'persian' | 'islamic' | 'gregorian', |
||||
|
year: number, |
||||
|
month: number // 1-based (1..12)
|
||||
|
) { |
||||
|
if (calendar === 'persian') { |
||||
|
const daysInMonth = getJalaliDaysInMonth(year, month) |
||||
|
const gFirst = jalaliToGregorian(year, month, 1) |
||||
|
const dFirst = new Date(gFirst.year, gFirst.month - 1, gFirst.day) |
||||
|
// 0 = Sunday, 6 = Saturday in JS
|
||||
|
const jsDay = dFirst.getDay() |
||||
|
const startOffset = (jsDay + 1) % 7 // 0 = شنبه
|
||||
|
|
||||
|
return { |
||||
|
daysInMonth, |
||||
|
startOffset, |
||||
|
monthName: JALALI_MONTH_NAMES[month - 1] || '', |
||||
|
weekdays: WEEKDAY_NAMES_FA, |
||||
|
yearFormatted: toFa(year), |
||||
|
toIso: (d: number) => { |
||||
|
const g = jalaliToGregorian(year, month, d) |
||||
|
return `${g.year}-${String(g.month).padStart(2, '0')}-${String(g.day).padStart(2, '0')}` |
||||
|
}, |
||||
|
formatDayNumber: (d: number) => toFa(d), |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (calendar === 'islamic') { |
||||
|
const gFirst = hijriToGregorian(year, month, 1) |
||||
|
const dFirst = new Date(Date.UTC(gFirst.year, gFirst.month - 1, gFirst.day)) |
||||
|
const jsDay = dFirst.getUTCDay() |
||||
|
const startOffset = (jsDay + 1) % 7 // 0 = السبت
|
||||
|
|
||||
|
// محاسبه تعداد روزهای ماه هجری (۲۹ یا ۳۰ روز)
|
||||
|
const fmt = new Intl.DateTimeFormat('ar-SA-u-ca-islamic-umalqura-nu-latn', { |
||||
|
timeZone: 'UTC', |
||||
|
year: 'numeric', |
||||
|
month: 'numeric', |
||||
|
day: 'numeric', |
||||
|
}) |
||||
|
|
||||
|
let daysInMonth = 29 |
||||
|
for (let d = 1; d <= 31; d++) { |
||||
|
const testDate = new Date(dFirst.getTime() + (d - 1) * 86400000) |
||||
|
const parts = fmt.formatToParts(testDate) |
||||
|
const m: Record<string, string> = {} |
||||
|
for (const p of parts) m[p.type] = p.value |
||||
|
if (parseInt(m.month, 10) === month && parseInt(m.year, 10) === year) { |
||||
|
daysInMonth = parseInt(m.day, 10) |
||||
|
} else { |
||||
|
break |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
daysInMonth, |
||||
|
startOffset, |
||||
|
monthName: HIJRI_MONTH_NAMES[month - 1] || '', |
||||
|
weekdays: WEEKDAY_NAMES_AR, |
||||
|
yearFormatted: `${year} هـ`, |
||||
|
toIso: (d: number) => { |
||||
|
const g = hijriToGregorian(year, month, d) |
||||
|
return `${g.year}-${String(g.month).padStart(2, '0')}-${String(g.day).padStart(2, '0')}` |
||||
|
}, |
||||
|
formatDayNumber: (d: number) => String(d), |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// میلادی (Gregorian)
|
||||
|
const dFirst = new Date(year, month - 1, 1) |
||||
|
const daysInMonth = new Date(year, month, 0).getDate() |
||||
|
const startOffset = dFirst.getDay() // 0 = Sunday
|
||||
|
|
||||
|
return { |
||||
|
daysInMonth, |
||||
|
startOffset, |
||||
|
monthName: GREGORIAN_MONTH_NAMES[month - 1] || '', |
||||
|
weekdays: WEEKDAY_NAMES_EN, |
||||
|
yearFormatted: String(year), |
||||
|
toIso: (d: number) => { |
||||
|
return `${year}-${String(month).padStart(2, '0')}-${String(d).padStart(2, '0')}` |
||||
|
}, |
||||
|
formatDayNumber: (d: number) => String(d), |
||||
|
} |
||||
|
} |
||||
@ -1,37 +1,25 @@ |
|||||
/* ────────────────────────────────────────────────────────────────────────── |
/* ────────────────────────────────────────────────────────────────────────── |
||||
* تبدیل تاریخ‌های میلادیِ بک‌اند (ISO datetime) به نمایشِ جلالی (هجری شمسی). |
|
||||
* |
|
||||
* بک‌اند فیلدهای updated_at/created_at را به‌صورت ISO (UTC) می‌فرستد؛ کاربر باید |
|
||||
* تاریخ را به تقویم جلالی ببیند. از `Intl.DateTimeFormat` با تقویم `persian` |
|
||||
* استفاده می‌کنیم (بدون وابستگیِ خارجی) و ارقام را فارسی نمایش می‌دهیم. |
|
||||
|
* تبدیل تاریخ‌های میلادیِ بک‌اند به نمایش تقویمی متناسب با زبان. |
||||
|
* این ماژول جهت حفظ سازگاری کدهای قبلی حفظ شده و از موتور اصلی date-utils ارث‌بری می‌کند. |
||||
* ────────────────────────────────────────────────────────────────────────── */ |
* ────────────────────────────────────────────────────────────────────────── */ |
||||
|
|
||||
const DATE_FMT = new Intl.DateTimeFormat('fa-IR-u-ca-persian', { |
|
||||
year: 'numeric', |
|
||||
month: '2-digit', |
|
||||
day: '2-digit', |
|
||||
}) |
|
||||
|
import { formatDateByLanguage, formatDateTimeByLanguage } from './date-utils' |
||||
|
|
||||
const DATE_TIME_FMT = new Intl.DateTimeFormat('fa-IR-u-ca-persian', { |
|
||||
year: 'numeric', |
|
||||
month: '2-digit', |
|
||||
day: '2-digit', |
|
||||
hour: '2-digit', |
|
||||
minute: '2-digit', |
|
||||
}) |
|
||||
|
export { |
||||
|
formatDateByLanguage, |
||||
|
formatDateRangeByLanguage, |
||||
|
formatDateTimeByLanguage, |
||||
|
useFormattedDate, |
||||
|
useFormattedDateRange, |
||||
|
useFormattedDateTime, |
||||
|
} from './date-utils' |
||||
|
|
||||
/** تاریخ ISO → «۱۴۰۳/۰۱/۲۵» (جلالی). ورودی خالی/نامعتبر → '—'. */ |
|
||||
|
/** تاریخ ISO → «۱۴۰۳/۰۱/۲۵» (جلالی در فارسی، هجری در عربی، میلادی در انگلیسی). */ |
||||
export function toJalali(iso: string | null | undefined): string { |
export function toJalali(iso: string | null | undefined): string { |
||||
if (!iso) return '—' |
|
||||
const d = new Date(iso) |
|
||||
if (Number.isNaN(d.getTime())) return '—' |
|
||||
return DATE_FMT.format(d) |
|
||||
|
return formatDateByLanguage(iso, 'fa', { style: 'numeric' }) |
||||
} |
} |
||||
|
|
||||
/** تاریخ ISO → «۱۴۰۳/۰۱/۲۵، ۱۴:۳۰» (جلالی + ساعت). ورودی نامعتبر → '—'. */ |
|
||||
|
/** تاریخ ISO → «۱۴۰۳/۰۱/۲۵، ۱۴:۳۰» (جلالی + ساعت). */ |
||||
export function toJalaliDateTime(iso: string | null | undefined): string { |
export function toJalaliDateTime(iso: string | null | undefined): string { |
||||
if (!iso) return '—' |
|
||||
const d = new Date(iso) |
|
||||
if (Number.isNaN(d.getTime())) return '—' |
|
||||
return DATE_TIME_FMT.format(d) |
|
||||
|
return formatDateTimeByLanguage(iso, 'fa') |
||||
} |
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue