Add JSON files for Payment Gateway Interface and API documentation updates

- Created a new JSON file for the PaymentGatewayInterface.php, detailing its methods and return types.
- Added a JSON file for payment.md, documenting various API endpoints and their parameters, responses, and errors.
- Introduced a JSON file for fix-admin-modal-and-calendar.md, outlining issues and solutions related to admin modal and calendar functionalities.

assets/admin/pages/AdminSubscriptionPage.tsx

@@ -207,7 +207,7 @@ function PlansTab() {
               {plan.periods.length === 0 ? (
                 <div style={{ padding: '20px 16px', color: 'var(--text-3)', fontSize: 13 }}>هنوز دوره‌ای تعریف نشده</div>
               ) : (
-                <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
+                <div className="table-wrap"><table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
                   <thead>
                     <tr style={{ borderBottom: '1px solid var(--border)' }}>
                       <th style={{ textAlign: 'right', padding: '8px 16px', color: 'var(--text-3)', fontWeight: 500 }}>دوره</th>
@@ -239,7 +239,7 @@ function PlansTab() {
                       </tr>
                     ))}
                   </tbody>
-                </table>
+                </table></div>
               )}
             </div>
           ))}
@@ -382,7 +382,7 @@ function ReportTab() {
         <div className="card-pad" style={{ color: 'var(--text-3)', textAlign: 'center', padding: '40px 0' }}>هیچ اشتراکی ثبت نشده</div>
       ) : (
         <>
-          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
+          <div className="table-wrap"><table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
             <thead>
               <tr style={{ borderBottom: '1px solid var(--border)' }}>
                 <th style={{ textAlign: 'right', padding: '10px 16px', color: 'var(--text-3)', fontWeight: 500 }}>نوع</th>
@@ -416,7 +416,7 @@ function ReportTab() {
                 </tr>
               ))}
             </tbody>
-          </table>
+          </table></div>
           <div style={{ padding: '12px 16px' }}>
             <Pagination page={page} total={total} limit={limit} onPageChange={setPage} />
           </div>

assets/admin/pages/AppointmentsPage.tsx

@@ -199,7 +199,7 @@ function TableView({
 
   return (
     <div style={{ overflowX: 'auto' }}>
-      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
+      <div className="table-wrap"><table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
         <thead>
           <tr style={{ borderBottom: '1px solid var(--border)', background: 'var(--surface-2)' }}>
             <th style={th}>ردیف</th>
@@ -241,7 +241,7 @@ function TableView({
             </tr>
           ))}
         </tbody>
-      </table>
+      </table></div>
     </div>
   );
 }

assets/admin/pages/ClinicDetailPage.tsx

@@ -781,7 +781,7 @@ export default function ClinicDetailPage() {
       </div>
 
       {/* ── Main grid ── */}
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap: 'var(--gap)', alignItems: 'start' }}>
+      <div className="split-2">
 
         {/* Left column */}
         <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--gap)' }}>

assets/admin/pages/ClinicsPage.tsx

@@ -135,7 +135,7 @@ export default function ClinicsPage() {
           </div>
         </div>
 
-        <table className="t">
+        <div className="table-wrap"><table className="t">
           <thead>
             <tr>
               <th>کلینیک</th>
@@ -237,7 +237,7 @@ export default function ClinicsPage() {
                   );
                 })}
           </tbody>
-        </table>
+        </table></div>
 
         <Pagination page={page} total={total} limit={limit} onPageChange={setPage} />
       </div>

assets/admin/pages/DashboardPage.tsx

@@ -511,7 +511,7 @@ function AdminDashboard() {
       <div className="grid-2" style={{ marginBottom: 'var(--gap)' }}>
         <div className="card card-pad">
           <div className="card-title-row"><h3 style={{ fontSize: 16 }}>دسترسی سریع</h3></div>
-          <div className="quick-grid" style={{ gridTemplateColumns: 'repeat(3,1fr)' }}>
+          <div className="quick-grid">
             {quickActions.map(a => (
               <Link key={a.to} to={a.to} className="quick">
                 <span className="qi" style={{ background: a.bg, color: a.color }}>
@@ -947,7 +947,7 @@ function SecretaryDashboard() {
         </div>
       </div>
 
-      <div className="stat-grid" style={{ gridTemplateColumns: 'repeat(2, 1fr)' }}>
+      <div className="stat-grid">
         {kpiCards.map(c => (
           <div key={c.label} className="stat">
             <div className="ico" style={{ background: c.bg, color: c.color }}>
@@ -1053,7 +1053,7 @@ function RepresentationDashboard() {
         </button>
       </div>
 
-      <div className="stat-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
+      <div className="stat-grid">
         {apptCards.map(c => (
           <div key={c.label} className="stat">
             <div className="ico" style={{ background: c.bg, color: c.color }}>
@@ -1069,7 +1069,7 @@ function RepresentationDashboard() {
         <div className="card-title-row" style={{ marginBottom: 12 }}>
           <h3 style={{ fontSize: 16 }}>درآمد نماینده</h3>
         </div>
-        <div className="stat-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
+        <div className="stat-grid">
           {incomeCards.map(c => (
             <div key={c.label} className="stat" style={{ background: 'var(--surface-3)' }}>
               <div className="lbl">{c.label}</div>

assets/admin/pages/DoctorDetailPage.tsx

@@ -1104,7 +1104,7 @@ function SessionEditor({ session, onChange, onRemove, addresses }: {
     <div style={{ border: '1px solid var(--border)', borderRadius: 'var(--r)', background: 'var(--surface)', overflow: 'hidden' }}>
 
       {/* Time inputs */}
-      <div style={{ padding: '14px 16px 12px', display: 'grid', gridTemplateColumns: '1fr 1fr auto', gap: 12, alignItems: 'end' }}>
+      <div style={{ padding: '14px 16px 12px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 12, alignItems: 'end' }}>
         <div>
           <div style={{ fontSize: 12, color: 'var(--text-2)', marginBottom: 5 }}>از ساعت</div>
           <TimeSelect value={session.start_time} onChange={v => upd('start_time', v)} />

assets/admin/pages/DoctorsPage.tsx

@@ -209,7 +209,7 @@ export default function DoctorsPage() {
       </div>
 
       {/* KPI cards */}
-      <div className="stat-grid" style={{ gridTemplateColumns: 'repeat(5,1fr)' }}>
+      <div className="stat-grid">
         {kpiCards.map((c) => (
           <div key={c.label} className="stat">
             <div className="ico" style={{ background: c.bg, color: c.color }}>

assets/admin/pages/FinancialReportPage.tsx

@@ -93,7 +93,7 @@ export default function FinancialReportPage() {
         </div>
       </div>
 
-      <div className="stat-grid" style={{ gridTemplateColumns: 'repeat(5,1fr)', marginBottom: 'var(--gap)' }}>
+      <div className="stat-grid" style={{ marginBottom: 'var(--gap)' }}>
         {cards.map((c) => (
           <div key={c.label} className="stat" style={{ background: c.bg }}>
             <div className="stat-label">{c.label}</div>

assets/admin/pages/PaymentsPage.tsx

@@ -113,7 +113,7 @@ export default function PaymentsPage() {
       </div>
 
       {/* Stat cards */}
-      <div className="stat-grid" style={{ gridTemplateColumns: 'repeat(4,1fr)' }}>
+      <div className="stat-grid">
         {statCards.map((c) => (
           <div key={c.label} className="stat">
             <div className="ico" style={{ background: c.bg, color: c.color }}>

assets/admin/pages/PreRegistrationsPage.tsx

@@ -98,7 +98,7 @@ export default function PreRegistrationsPage() {
       </div>
 
       <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
-        <table className="t">
+        <div className="table-wrap"><table className="t">
           <thead>
             <tr>
               <th>نام</th>
@@ -186,7 +186,7 @@ export default function PreRegistrationsPage() {
                   );
                 })}
           </tbody>
-        </table>
+        </table></div>
       </div>
 
       <Pagination page={page} total={total} limit={limit} onPageChange={setPage} />

assets/admin/pages/RepresentationFinancePage.tsx

@@ -104,7 +104,7 @@ export default function RepresentationFinancePage() {
       </div>
 
       {/* کارت‌های خلاصه */}
-      <div className="stat-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', marginBottom: 'var(--gap)' }}>
+      <div className="stat-grid" style={{ marginBottom: 'var(--gap)' }}>
         {cards.map(c => (
           <div key={c.label} className="stat">
             <div className="ico" style={{ background: c.bg, color: c.color }}>
@@ -129,7 +129,7 @@ export default function RepresentationFinancePage() {
         </div>
 
         <div style={{ overflowX: 'auto' }}>
-          <table className="tbl tbl-zebra" style={{ width: '100%', minWidth: 720 }}>
+          <div className="table-wrap"><table className="tbl tbl-zebra" style={{ width: '100%', minWidth: 720 }}>
             <thead>
               <tr>
                 <th>پزشک</th>
@@ -174,7 +174,7 @@ export default function RepresentationFinancePage() {
                 </tr>
               ))}
             </tbody>
-          </table>
+          </table></div>
         </div>
       </div>
 

assets/admin/pages/RepresentationProfilePage.tsx

@@ -146,7 +146,7 @@ export default function RepresentationProfilePage() {
         </div>
 
         <div style={{ overflowX: 'auto' }}>
-          <table className="tbl" style={{ width: '100%' }}>
+          <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 && (
@@ -166,7 +166,7 @@ export default function RepresentationProfilePage() {
                 </tr>
               ))}
             </tbody>
-          </table>
+          </table></div>
         </div>
 
         {!verified && (

assets/admin/pages/RepresentationSettlementPage.tsx

@@ -103,7 +103,7 @@ export default function RepresentationSettlementPage() {
         </div>
       </div>
 
-      <div className="stat-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
+      <div className="stat-grid">
         {cards.map(c => (
           <div key={c.label} className="stat" style={{ background: 'var(--surface-3)' }}>
             <div className="lbl">{c.label}</div>
@@ -151,7 +151,7 @@ export default function RepresentationSettlementPage() {
           <h3 style={{ fontSize: 16 }}>درخواست‌های قبلی</h3>
         </div>
         <div style={{ overflowX: 'auto' }}>
-          <table className="tbl" style={{ width: '100%' }}>
+          <div className="table-wrap"><table className="tbl" style={{ width: '100%' }}>
             <thead><tr><th>مبلغ</th><th>وضعیت</th><th>توضیح مدیر</th><th>تاریخ</th></tr></thead>
             <tbody>
               {settlements.length === 0 && (
@@ -166,7 +166,7 @@ export default function RepresentationSettlementPage() {
                 </tr>
               ))}
             </tbody>
-          </table>
+          </table></div>
         </div>
         <Pagination page={page} total={settlementsTotal} limit={limit} onPageChange={setPage} />
       </div>

assets/admin/pages/SmsWalletPage.tsx

@@ -427,7 +427,7 @@ function SmsWalletPageInner() {
           </div>
         ) : (
           <>
-            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
+            <div className="table-wrap"><table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
               <thead>
                 <tr style={{ background: 'oklch(0.97 0.01 256)', borderBottom: '1px solid var(--border)' }}>
                   <th style={{ textAlign: 'right', padding: '10px 16px', fontWeight: 600, color: 'var(--text-2)' }}>نوع</th>
@@ -469,7 +469,7 @@ function SmsWalletPageInner() {
                   </tr>
                 ))}
               </tbody>
-            </table>
+            </table></div>
             <div style={{ padding: '12px 16px' }}>
               <Pagination page={logPage} total={total} limit={20} onPageChange={setLogPage} />
             </div>

assets/admin/pages/StaffPage.tsx

@@ -168,7 +168,7 @@ export default function StaffPage() {
 
       {/* KPI bar */}
       {!isLoading && (
-        <div className="stat-grid" style={{ marginBottom: 16, gridTemplateColumns: 'repeat(3, 1fr)' }}>
+        <div className="stat-grid" style={{ marginBottom: 16 }}>
           <div className="card card-pad" style={{ textAlign: 'center' }}>
             <div style={{ fontSize: 28, fontWeight: 800, color: 'var(--text-1)' }}>{total}</div>
             <div style={{ fontSize: 13, color: 'var(--text-3)', marginTop: 2 }}>کل پرسنل</div>

assets/admin/styles.css

@@ -466,7 +466,7 @@ body {
 .stat .lbl { color: var(--text-2); font-size: 13px; font-weight: 500; }
 .stat .val { font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin: 4px 0 2px; color: var(--text); }
 .stat .hint { font-size: 11.5px; color: var(--text-3); }
-.stat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); margin-bottom: var(--gap); }
+.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
 .trend { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
 .trend.up   { color: var(--success); background: var(--success-bg); }
 .trend.down { color: var(--danger);  background: var(--danger-bg); }
@@ -674,7 +674,7 @@ table.t tbody tr:last-child td { border-bottom: none; }
 .timeline-item .tl-body time { font-size: 11px; color: var(--text-3); }
 .tl-connector { width: 1px; background: var(--border); flex-shrink: 0; margin: 0 4px; }
 
-.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
 .quick {
   display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px;
   border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2);
@@ -699,13 +699,19 @@ table.t tbody tr:last-child td { border-bottom: none; }
 .avatar.lg { width: 104px; height: 104px; font-size: 34px; border-radius: 22px; }
 
 /* ── Responsive ──────────────────────────────────────────────── */
+/* گارد ضد-overflow افقی سراسری */
+html, body { max-width: 100%; overflow-x: hidden; }
+
+/* لایه‌های ریسپانسیو مشترک */
+.split-2 { display: grid; grid-template-columns: 1fr minmax(0, 320px); gap: var(--gap); align-items: start; }
+.form-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
+
 .scrim { display: none; }
 @media (max-width: 1080px) {
-  .stat-grid { grid-template-columns: repeat(3, 1fr); }
   .dash-main { grid-template-columns: 1fr; }
   .dash-3    { grid-template-columns: 1fr; }
 }
-@media (max-width: 860px) {
+@media (max-width: 1024px) {
   .main { margin-right: 0 !important; }
   .sidebar { transform: translateX(100%); box-shadow: var(--shadow-lg); }
   .app[data-mobile-open="true"] .sidebar { transform: translateX(0); width: var(--sidebar-w); }
@@ -716,8 +722,14 @@ table.t tbody tr:last-child td { border-bottom: none; }
   .topbar-search { display: none; }
   .grid-2 { grid-template-columns: 1fr; }
 }
+@media (max-width: 860px) {
+  .split-2 { grid-template-columns: 1fr; }
+}
+@media (max-width: 600px) {
+  .form-row { grid-template-columns: 1fr; }
+}
 @media (max-width: 560px) {
-  .stat-grid { grid-template-columns: 1fr 1fr; }
+  .page-head, .toolbar { flex-wrap: wrap; }
 }
 
 /* صفحه سرویس‌های کلینیک */