feat(tariffs): automate current year tariff registration and sync service price

assets/admin/components/ServiceTariffModal.tsx

@@ -1,9 +1,12 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { PencilIcon, CheckIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import { toast } from 'sonner';
 import { api } from '../lib/api';
 import { formatRial, formatNumber } from '../lib/utils';
 import Modal from './ui/Modal';
+import PriceInput from './ui/PriceInput';
+import SearchableSelect from './ui/SearchableSelect';
 import type { ServiceItem } from '../types';
 
 interface TariffRow {
@@ -21,8 +24,10 @@ interface TariffResponse {
 
 export default function ServiceTariffModal({ item, onClose }: { item: ServiceItem | null; onClose: () => void }) {
   const qc = useQueryClient();
-  const [year, setYear] = useState('');
-  const [price, setPrice] = useState('');
+  const [year, setYear] = useState<number | ''>('');
+  const [price, setPrice] = useState(0);
+  const [editYear, setEditYear] = useState<number | null>(null);
+  const [editPrice, setEditPrice] = useState(0);
 
   const { data, isLoading } = useQuery<{ data: TariffResponse }>({
     queryKey: ['service-tariffs', item?.uuid],
@@ -31,61 +36,128 @@ export default function ServiceTariffModal({ item, onClose }: { item: ServiceIte
   });
 
   const resp = (data as any)?.data as TariffResponse | undefined;
-  const tariffs = resp?.data ?? [];
+  const tariffs = useMemo(() => [...(resp?.data ?? [])].sort((a, b) => b.year - a.year), [resp]);
   const currentYear = resp?.current_year;
 
-  const saveMut = useMutation({
-    mutationFn: () =>
-      api.put(`/api/v1/service-items/${item!.uuid}/tariffs/${Number(year)}`, {
-        price_rials: Number(price) || 0,
-      }),
+  // سال‌های قابل انتخاب: ۵ سال گذشته تا ۲ سال آینده، منهای سال‌های ثبت‌شده.
+  const yearOptions = useMemo(() => {
+    if (!currentYear) return [];
+    const used = new Set(tariffs.map((t) => t.year));
+    const opts: { value: number; label: string }[] = [];
+    for (let y = currentYear + 2; y >= currentYear - 5; y--) {
+      if (used.has(y)) continue;
+      opts.push({ value: y, label: y === currentYear ? `${formatNumber(y)} (سال جاری)` : formatNumber(y) });
+    }
+    return opts;
+  }, [currentYear, tariffs]);
+
+  const addMut = useMutation({
+    mutationFn: () => api.put(`/api/v1/service-items/${item!.uuid}/tariffs/${Number(year)}`, { price_rials: price }),
     onSuccess: () => {
       toast.success('تعرفه ذخیره شد');
       setYear('');
-      setPrice('');
+      setPrice(0);
       qc.invalidateQueries({ queryKey: ['service-tariffs', item?.uuid] });
+      qc.invalidateQueries({ queryKey: ['service-items'] });
     },
     onError: (e: Error) => toast.error(e.message),
   });
 
+  const editMut = useMutation({
+    mutationFn: (vars: { year: number; price: number }) =>
+      api.put(`/api/v1/service-items/${item!.uuid}/tariffs/${vars.year}`, { price_rials: vars.price }),
+    onSuccess: () => {
+      toast.success('تعرفه ویرایش شد');
+      setEditYear(null);
+      qc.invalidateQueries({ queryKey: ['service-tariffs', item?.uuid] });
+      qc.invalidateQueries({ queryKey: ['service-items'] });
+    },
+    onError: (e: Error) => toast.error(e.message),
+  });
+
+  const startEdit = (t: TariffRow) => { setEditYear(t.year); setEditPrice(t.price_rials); };
+
   return (
-    <Modal open={!!item} onClose={onClose} title={`تعرفه‌های سالانه — ${item?.name ?? ''}`}>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+    <Modal open={!!item} onClose={onClose} title={`تعرفه‌های سالانه — ${item?.name ?? ''}`} size="md">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
         {resp && (
-          <div style={{ fontSize: 12.5, color: 'var(--text-3)', lineHeight: 1.7 }}>
-            قیمت پیش‌فرض خدمت: <b>{formatRial(resp.default_price_rials)}</b>. اگر تعرفه‌ی سالی ثبت نشود، همین قیمت اعمال می‌شود.
+          <div style={{
+            display: 'flex', gap: 8, padding: '11px 13px', borderRadius: 'var(--r-sm)',
+            background: 'var(--primary-subtle)', fontSize: 12, color: 'var(--text-2)', lineHeight: 1.7,
+          }}>
+            <span>قیمت پایه‌ی سرویس همان تعرفه‌ی سال جاری ({currentYear ? formatNumber(currentYear) : '—'}) است و همه‌جا از همین استفاده می‌شود. تعرفه‌ی سال‌های دیگر فقط برای صورتحساب همان سال به‌کار می‌رود.</span>
           </div>
         )}
 
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'flex-end', padding: 12, borderRadius: 10, border: '1px solid var(--border)', background: 'var(--surface)' }}>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-            <label style={{ fontSize: 11.5, fontWeight: 600 }}>سال (شمسی)</label>
-            <input type="number" dir="ltr" className="input" style={{ width: 100 }} placeholder={currentYear ? String(currentYear) : '۱۴۰۴'} value={year} onChange={(e) => setYear(e.target.value)} />
+        {/* افزودن تعرفه‌ی جدید */}
+        <div style={{ padding: 14, borderRadius: 'var(--r)', border: '1px solid var(--border)', background: 'var(--surface-2)' }}>
+          <div style={{ fontSize: 12.5, fontWeight: 700, marginBottom: 10 }}>افزودن تعرفه‌ی سال</div>
+          <div style={{ display: 'grid', gridTemplateColumns: '150px 1fr auto', gap: 10, alignItems: 'end' }}>
+            <div style={{ minWidth: 0 }}>
+              <label className="field-label">سال (شمسی)</label>
+              <SearchableSelect
+                options={yearOptions}
+                value={year === '' ? '' : year}
+                onChange={(v) => setYear(v != null && v !== '' ? Number(v) : '')}
+                placeholder="انتخاب سال"
+                noOptionsMessage="سالی باقی نمانده"
+                height={40}
+              />
+            </div>
+            <div style={{ minWidth: 0 }}>
+              <label className="field-label">تعرفه (ریال)</label>
+              <PriceInput className="input" style={{ height: 40 }} value={price} onChange={setPrice} placeholder="مبلغ" min={0} />
+            </div>
+            <button className="btn primary" style={{ height: 40 }} disabled={year === '' || addMut.isPending} onClick={() => addMut.mutate()}>
+              {addMut.isPending ? '...' : 'افزودن'}
+            </button>
           </div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-            <label style={{ fontSize: 11.5, fontWeight: 600 }}>تعرفه (ریال)</label>
-            <input type="number" min={0} dir="ltr" className="input" style={{ width: 150 }} value={price} onChange={(e) => setPrice(e.target.value)} />
-          </div>
-          <button className="btn primary sm" disabled={!year || saveMut.isPending} onClick={() => saveMut.mutate()}>
-            {saveMut.isPending ? '...' : 'ذخیره'}
-          </button>
         </div>
 
+        {/* فهرست تعرفه‌ها */}
         {isLoading ? (
           <div className="muted" style={{ fontSize: 13 }}>در حال بارگذاری...</div>
         ) : tariffs.length === 0 ? (
-          <div style={{ fontSize: 12.5, color: 'var(--text-3)' }}>هنوز تعرفه‌ی سالانه‌ای ثبت نشده است.</div>
+          <div style={{ fontSize: 12.5, color: 'var(--text-3)', textAlign: 'center', padding: '12px 0' }}>هنوز تعرفه‌ای ثبت نشده است.</div>
         ) : (
           <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-            {tariffs.map((t) => (
-              <div key={t.uuid} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 12px', borderRadius: 8, border: '1px solid var(--border)' }}>
-                <span style={{ fontWeight: 600, fontSize: 13 }}>
-                  سال {formatNumber(t.year)}
-                  {t.year === currentYear && <span className="badge green" style={{ fontSize: 10, marginInlineStart: 6 }}><span className="bdot" />جاری</span>}
-                </span>
-                <span style={{ color: 'var(--primary)', fontWeight: 600, fontSize: 13 }}>{formatRial(t.price_rials)}</span>
-              </div>
-            ))}
+            {tariffs.map((t) => {
+              const isCurrent = t.year === currentYear;
+              const isEditing = editYear === t.year;
+              return (
+                <div key={t.uuid} style={{
+                  display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px',
+                  borderRadius: 9, border: '1px solid var(--border)',
+                  background: isCurrent ? 'var(--primary-subtle)' : 'var(--bg)',
+                }}>
+                  <span style={{ fontWeight: 700, fontSize: 13, minWidth: 70 }}>
+                    سال {formatNumber(t.year)}
+                    {isCurrent && <span className="badge green" style={{ fontSize: 9.5, marginInlineStart: 6 }}><span className="bdot" />جاری</span>}
+                  </span>
+
+                  {isEditing ? (
+                    <>
+                      <div style={{ flex: 1 }}>
+                        <PriceInput className="input" style={{ height: 36 }} value={editPrice} onChange={setEditPrice} min={0} />
+                      </div>
+                      <button className="btn primary sm" disabled={editMut.isPending} onClick={() => editMut.mutate({ year: t.year, price: editPrice })} title="ذخیره">
+                        <CheckIcon style={{ width: 14 }} />
+                      </button>
+                      <button className="btn sm" onClick={() => setEditYear(null)} title="انصراف">
+                        <XMarkIcon style={{ width: 14 }} />
+                      </button>
+                    </>
+                  ) : (
+                    <>
+                      <span style={{ flex: 1, color: 'var(--primary)', fontWeight: 600, fontSize: 13 }} dir="ltr">{formatRial(t.price_rials)}</span>
+                      <button className="btn sm ghost" onClick={() => startEdit(t)} title="ویرایش">
+                        <PencilIcon style={{ width: 14 }} />
+                      </button>
+                    </>
+                  )}
+                </div>
+              );
+            })}
           </div>
         )}
       </div>