hamed
ecdefa3c24
- Integrated TourButton component into SettingsMenuPage, SkillsPage, SmsWalletPage, StaffPage, StaffSessionDetailPage, StaffTreatmentSessionsPage, SubscriptionPage, TagsSettingsPage, TreatmentCasesPage to enhance user onboarding experience. - Created new tour definitions for appointments, clinics, staff management, financial management, and patient management, ensuring comprehensive guidance for users navigating the admin panel. - Updated documentation to reflect the addition of tours and their implementation details.
230 lines
10 KiB
TypeScript
230 lines
10 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { toast } from 'sonner';
|
|
import { CheckBadgeIcon, TrashIcon, PlusIcon } from '@heroicons/react/24/outline';
|
|
import { api } from '../lib/api';
|
|
import type { ApiResponse } from '../lib/api';
|
|
import PersianDatePicker from '../components/ui/PersianDatePicker';
|
|
import { toEnglishDigits, digitsOnly } from '../lib/utils';
|
|
import TourButton from '../components/ui/TourButton';
|
|
|
|
// تبدیل تاریخ میلادی ISO (YYYY-MM-DD) به شمسی Y/m/d برای استعلام api.ir
|
|
function toJalali(iso: string): string {
|
|
if (!iso) return '';
|
|
const parts = new Intl.DateTimeFormat('en-US-u-ca-persian-nu-latn', {
|
|
year: 'numeric', month: '2-digit', day: '2-digit',
|
|
}).formatToParts(new Date(iso + 'T00:00:00'));
|
|
const get = (t: string) => parts.find(p => p.type === t)?.value ?? '';
|
|
const y = get('year'), m = get('month'), d = get('day');
|
|
return y && m && d ? `${y}/${m}/${d}` : '';
|
|
}
|
|
|
|
// اعتبارسنجی کد ملی ایران (طول ۱۰ + رقم کنترلی)
|
|
function isValidIranNationalCode(code: string): boolean {
|
|
if (!/^\d{10}$/.test(code)) return false;
|
|
if (/^(\d)\1{9}$/.test(code)) return false; // ارقام یکسان نامعتبر
|
|
const check = +code[9];
|
|
let sum = 0;
|
|
for (let i = 0; i < 9; i++) sum += +code[i] * (10 - i);
|
|
const r = sum % 11;
|
|
return r < 2 ? check === r : check === 11 - r;
|
|
}
|
|
|
|
// اعتبارسنجی شبای ایران: IR + ۲۴ رقم + کنترل mod-97
|
|
function isValidIranIban(raw: string): boolean {
|
|
const iban = toEnglishDigits(raw).replace(/\s/g, '').toUpperCase();
|
|
if (!/^IR\d{24}$/.test(iban)) return false;
|
|
const rearranged = iban.slice(4) + iban.slice(0, 4);
|
|
const numeric = rearranged.replace(/[A-Z]/g, (c) => String(c.charCodeAt(0) - 55));
|
|
let rem = 0;
|
|
for (const ch of numeric) rem = (rem * 10 + +ch) % 97;
|
|
return rem === 1;
|
|
}
|
|
|
|
interface IbanItem {
|
|
id: string;
|
|
iban: string;
|
|
bank_name: string | null;
|
|
owner_name: string | null;
|
|
verified: boolean;
|
|
}
|
|
|
|
interface RepProfile {
|
|
full_name: string;
|
|
mobile_number: string | null;
|
|
national_code: string | null;
|
|
national_code_verified: boolean;
|
|
bank_account: IbanItem[] | null;
|
|
}
|
|
|
|
// پاسخ تکمنبعی ممکن است double-nested باشد
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const unwrap = (d: any): RepProfile | undefined => d?.data?.data ?? d?.data;
|
|
|
|
export default function RepresentationProfilePage() {
|
|
const qc = useQueryClient();
|
|
const [nationalCode, setNationalCode] = useState('');
|
|
const [iban, setIban] = useState('');
|
|
const [birthDate, setBirthDate] = useState('');
|
|
|
|
const meQ = useQuery({
|
|
queryKey: ['representation-me'],
|
|
queryFn: () => api.get<ApiResponse<RepProfile>>('/api/v1/representation/me'),
|
|
staleTime: 30_000,
|
|
});
|
|
const profile = unwrap(meQ.data);
|
|
const verified = profile?.national_code_verified ?? false;
|
|
const ibans = profile?.bank_account ?? [];
|
|
|
|
const verifyMut = useMutation({
|
|
mutationFn: (code: string) =>
|
|
api.post<ApiResponse<RepProfile>>('/api/v1/representation/verify-national-code', { national_code: code }),
|
|
onSuccess: () => {
|
|
toast.success('کد ملی با موفقیت تأیید شد');
|
|
setNationalCode('');
|
|
qc.invalidateQueries({ queryKey: ['representation-me'] });
|
|
},
|
|
onError: (e: Error) => toast.error(e.message),
|
|
});
|
|
|
|
const addIbanMut = useMutation({
|
|
mutationFn: (payload: { iban: string; birth_date: string }) =>
|
|
api.post<ApiResponse<RepProfile>>('/api/v1/representation/iban', payload),
|
|
onSuccess: () => {
|
|
toast.success('شماره شبا تأیید و اضافه شد');
|
|
setIban('');
|
|
setBirthDate('');
|
|
qc.invalidateQueries({ queryKey: ['representation-me'] });
|
|
},
|
|
onError: (e: Error) => toast.error(e.message),
|
|
});
|
|
|
|
const removeIbanMut = useMutation({
|
|
mutationFn: (id: string) =>
|
|
api.delete<ApiResponse<RepProfile>>(`/api/v1/representation/iban/${id}`),
|
|
onSuccess: () => {
|
|
toast.success('شماره شبا حذف شد');
|
|
qc.invalidateQueries({ queryKey: ['representation-me'] });
|
|
},
|
|
onError: (e: Error) => toast.error(e.message),
|
|
});
|
|
|
|
const submitNationalCode = () => {
|
|
const code = digitsOnly(nationalCode);
|
|
if (!isValidIranNationalCode(code)) { toast.error('کد ملی نامعتبر است'); return; }
|
|
verifyMut.mutate(code);
|
|
};
|
|
|
|
const submitIban = () => {
|
|
const clean = toEnglishDigits(iban).replace(/\s/g, '').toUpperCase();
|
|
if (!isValidIranIban(clean)) { toast.error('شماره شبا نامعتبر است (IR + ۲۴ رقم)'); return; }
|
|
const jalali = toJalali(birthDate);
|
|
if (!jalali) { toast.error('تاریخ تولد را انتخاب کنید'); return; }
|
|
addIbanMut.mutate({ iban: clean, birth_date: jalali });
|
|
};
|
|
|
|
return (
|
|
<div className="fade-in">
|
|
<div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
|
|
<div>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }} data-tour="page-title"><h1 className="section-title">پروفایل نماینده</h1><TourButton tourId="representation-profile" ready /></div>
|
|
<div className="muted" style={{ fontSize: 13, marginTop: 2 }}>تأیید هویت و مدیریت شمارههای شبا</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* تأیید کد ملی */}
|
|
<div className="card card-pad">
|
|
<div className="card-title-row" style={{ marginBottom: 12 }}>
|
|
<h3 style={{ fontSize: 16 }}>تأیید هویت</h3>
|
|
{verified && (
|
|
<span className="badge green" style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
|
|
<CheckBadgeIcon style={{ width: 15, height: 15 }} /> کد ملی تأیید شده
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{verified ? (
|
|
<div className="muted" style={{ fontSize: 13.5 }}>
|
|
کد ملی: <span dir="ltr" style={{ fontWeight: 600 }}>{profile?.national_code}</span>
|
|
</div>
|
|
) : (
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
|
|
<input
|
|
type="text" inputMode="numeric" dir="ltr" maxLength={10} value={nationalCode}
|
|
placeholder="کد ملی ۱۰ رقمی"
|
|
onChange={(e) => setNationalCode(digitsOnly(e.target.value, 10))}
|
|
style={{ width: 220, height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13.5, boxSizing: 'border-box', textAlign: 'center' }}
|
|
/>
|
|
<button className="btn primary" onClick={submitNationalCode} disabled={verifyMut.isPending}>
|
|
{verifyMut.isPending ? 'در حال تأیید...' : 'تأیید کد ملی'}
|
|
</button>
|
|
<span className="muted" style={{ fontSize: 12 }}>با استعلام شاهکار بررسی میشود</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* شمارههای شبا */}
|
|
<div className="card card-pad" style={{ marginTop: 'var(--gap)' }}>
|
|
<div className="card-title-row" style={{ marginBottom: 12 }}>
|
|
<h3 style={{ fontSize: 16 }}>شمارههای شبا</h3>
|
|
<span className="muted" style={{ fontSize: 12 }}>{ibans.length} از ۲</span>
|
|
</div>
|
|
|
|
<div style={{ overflowX: 'auto' }}>
|
|
<div className="table-wrap"><table className="tbl" style={{ width: '100%' }}>
|
|
<thead><tr><th>شماره شبا</th><th>بانک</th><th>صاحب حساب</th><th>وضعیت</th><th></th></tr></thead>
|
|
<tbody>
|
|
{ibans.length === 0 && (
|
|
<tr><td colSpan={5} className="muted" style={{ textAlign: 'center', padding: 16 }}>هنوز شبایی ثبت نشده است</td></tr>
|
|
)}
|
|
{ibans.map((b) => (
|
|
<tr key={b.id}>
|
|
<td dir="ltr" style={{ textAlign: 'left', fontFamily: 'monospace' }}>{b.iban}</td>
|
|
<td>{b.bank_name ?? '—'}</td>
|
|
<td>{b.owner_name ?? '—'}</td>
|
|
<td><span className={`badge ${b.verified ? 'green' : 'gray'}`}>{b.verified ? 'تأیید شده' : 'تأیید نشده'}</span></td>
|
|
<td style={{ textAlign: 'center' }}>
|
|
<button className="btn icon danger" title="حذف" onClick={() => removeIbanMut.mutate(b.id)} disabled={removeIbanMut.isPending}>
|
|
<TrashIcon style={{ width: 16, height: 16 }} />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table></div>
|
|
</div>
|
|
|
|
{!verified && (
|
|
<div className="muted" style={{ fontSize: 12.5, marginTop: 12 }}>
|
|
برای افزودن شبا ابتدا باید کد ملی خود را تأیید کنید.
|
|
</div>
|
|
)}
|
|
|
|
{verified && ibans.length < 2 && (
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginTop: 14 }}>
|
|
<input
|
|
type="text" inputMode="numeric" dir="ltr" maxLength={26} value={iban}
|
|
placeholder="IR000000000000000000000000"
|
|
onChange={(e) => setIban(toEnglishDigits(e.target.value).toUpperCase().replace(/[^IR0-9]/g, ''))}
|
|
style={{ width: 320, height: 38, padding: '0 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontSize: 13, boxSizing: 'border-box', fontFamily: 'monospace' }}
|
|
/>
|
|
<PersianDatePicker
|
|
value={birthDate}
|
|
onChange={setBirthDate}
|
|
placeholder="تاریخ تولد"
|
|
height={38}
|
|
minWidth={170}
|
|
enableYearPicker
|
|
/>
|
|
<button className="btn primary" onClick={submitIban} disabled={addIbanMut.isPending} style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
|
|
<PlusIcon style={{ width: 16, height: 16 }} />
|
|
{addIbanMut.isPending ? 'در حال بررسی...' : 'افزودن شبا'}
|
|
</button>
|
|
<span className="muted" style={{ fontSize: 12, width: '100%' }}>تاریخ تولد فقط برای استعلام مالکیت شبا استفاده میشود و ذخیره نمیشود.</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|