diff --git a/assets/admin/components/ui/PersianDatePicker.tsx b/assets/admin/components/ui/PersianDatePicker.tsx new file mode 100644 index 00000000..a18e2c3d --- /dev/null +++ b/assets/admin/components/ui/PersianDatePicker.tsx @@ -0,0 +1,50 @@ +import { useState } from 'react'; +import { CalendarDaysIcon, XMarkIcon } from '@heroicons/react/24/outline'; +import { formatDate } from '../../lib/utils'; +import PersianCalendar from './PersianCalendar'; + +interface Props { + value: string; // YYYY-MM-DD میلادی + onChange: (v: string) => void; + placeholder?: string; + height?: number; + minWidth?: number; +} + +export default function PersianDatePicker({ value, onChange, placeholder = 'انتخاب تاریخ', height = 38, minWidth = 148 }: Props) { + const [open, setOpen] = useState(false); + + return ( +
+
setOpen((o) => !o)} + style={{ + display: 'flex', alignItems: 'center', gap: 7, + height, padding: '0 10px', borderRadius: 'var(--r-sm)', + border: '1px solid var(--border)', background: 'var(--surface)', + cursor: 'pointer', fontSize: 13, color: value ? 'var(--text)' : 'var(--text-3)', + userSelect: 'none', minWidth, whiteSpace: 'nowrap', + }} + > + + {value ? formatDate(value) : placeholder} + {value && ( + { e.stopPropagation(); onChange(''); }} + style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', color: 'var(--text-3)' }} + > + + + )} +
+ + {open && ( + { onChange(v); setOpen(false); }} + onClose={() => setOpen(false)} + /> + )} +
+ ); +} diff --git a/assets/admin/pages/ClaimsPage.tsx b/assets/admin/pages/ClaimsPage.tsx index 1e9f9edc..3c3d5060 100644 --- a/assets/admin/pages/ClaimsPage.tsx +++ b/assets/admin/pages/ClaimsPage.tsx @@ -7,9 +7,16 @@ import { formatRial, formatNumber, formatDate } from '../lib/utils'; import PageHeader from '../components/ui/PageHeader'; import Modal from '../components/ui/Modal'; import SearchableSelect from '../components/ui/SearchableSelect'; -import PersianDateInput from '../components/ui/PersianDateInput'; +import PersianDatePicker from '../components/ui/PersianDatePicker'; import FeatureGate from '../components/ui/FeatureGate'; +const isoNDaysAgo = (days: number): string => { + const d = new Date(); + d.setDate(d.getDate() - days); + return d.toISOString().slice(0, 10); +}; +const todayIso = (): string => new Date().toISOString().slice(0, 10); + const toUnix = (iso: string): number | null => { if (!iso) return null; const t = new Date(iso + 'T00:00:00').getTime(); @@ -188,11 +195,29 @@ export default function ClaimsPage() {
- +
- + +
+
+ +