From 37ddd473427811b373af47b0976a312c09ac861d Mon Sep 17 00:00:00 2001
From: hamed <15238-genius.ha@users.noreply.drupalcode.org>
Date: Tue, 14 Jul 2026 14:43:28 +0330
Subject: [PATCH] fix(subscription): sidebar layout, responsive cards, feature
 labels

- Drop leaking mobile tab strip; settings sidebar is now desktop-only (hidden
  lg:block) and pinned right via grid lg:grid-cols-[280px_minmax(0,1fr)],
  matching the SettingsLayout pattern
- Make plan cards responsive (flex 1 1 280px, min 250 / max 340) instead of
  fixed 300px width
- Fix secretaries pill bidi rendering (rtl, single label)
- Add Persian label for the 'insurance' plan feature

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../layout/PurchaseSubscriptionSidebar.tsx    | 172 +++++++-----------
 assets/admin/pages/SubscriptionPage.tsx       |  25 +--
 2 files changed, 83 insertions(+), 114 deletions(-)

diff --git a/assets/admin/components/layout/PurchaseSubscriptionSidebar.tsx b/assets/admin/components/layout/PurchaseSubscriptionSidebar.tsx
index 3c5243d8..ded70f3b 100644
--- a/assets/admin/components/layout/PurchaseSubscriptionSidebar.tsx
+++ b/assets/admin/components/layout/PurchaseSubscriptionSidebar.tsx
@@ -5,11 +5,12 @@ import { menuForRole } from './SettingsLayout';
 import { SearchHeaderP } from '../../pages/subscriptionIcons';
 
 /**
- * PurchaseSubscriptionSidebar — pixel-faithful port of clinic-pro-tauri's
- * `PurchaseSubscriptionSidebar.jsx` (title + search + tab list, orange active
- * pill #f17732). Unlike the Tauri original it does not switch content inline;
- * each item is a real admin route (from SETTINGS_MENU / menuForRole), so the
- * clinicpro routing architecture is preserved. `active` marks the open section.
+ * PurchaseSubscriptionSidebar — settings sub-navigation styled after
+ * clinic-pro-tauri's `PurchaseSubscriptionSidebar.jsx` (title + search + tab
+ * list, orange active pill #f17732). Desktop-only, like the rest of the
+ * clinicpro settings area (mobile nav is owned by the standalone settings list
+ * page). Each item is a real admin route (SETTINGS_MENU / menuForRole) so the
+ * routing architecture is preserved. `active` marks the open section.
  */
 export default function PurchaseSubscriptionSidebar({ active }: { active: string }) {
   const primaryRole = useAuthStore((s) => s.primaryRole);
@@ -20,109 +21,76 @@ export default function PurchaseSubscriptionSidebar({ active }: { active: string
   );
 
   return (
-    <div
+    <aside
       dir="ltr"
-      style={{
-        flexShrink: 0,
-        borderRadius: 8,
-        background: 'transparent',
-        alignSelf: 'start',
-        position: 'sticky',
-        top: 'calc(var(--topbar-h) + 16px)',
-      }}
-      className="w-full md:w-[240px] lg:w-[280px] md:py-4"
+      aria-label="منوی تنظیمات"
+      className="hidden lg:block"
+      style={{ alignSelf: 'start', position: 'sticky', top: 'calc(var(--topbar-h) + 16px)' }}
     >
-      {/* Mobile/Tablet: horizontal scrollable tab strip */}
-      <div
-        className="flex md:hidden"
-        style={{
-          flexDirection: 'row-reverse', overflowX: 'auto', gap: 8,
-          padding: '12px 8px', whiteSpace: 'nowrap', scrollbarWidth: 'none',
-        }}
-      >
+      <div style={{
+        fontSize: 16, fontWeight: 800, color: 'var(--text-2)', textAlign: 'left',
+        marginBottom: 10, padding: '0 4px',
+      }}>
+        تنظیمات
+      </div>
+
+      <div style={{ marginBottom: 16 }}>
+        <div style={{
+          display: 'flex', alignItems: 'center', flexDirection: 'row-reverse', gap: 8,
+          background: 'var(--surface)', border: '1px solid var(--border)',
+          borderRadius: 'var(--r-sm)', padding: '8px 12px',
+        }}>
+          <SearchHeaderP />
+          <input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="جستجو در تنظیمات"
+            aria-label="جستجو در تنظیمات"
+            style={{
+              border: 'none', outline: 'none', background: 'transparent',
+              fontFamily: 'inherit', fontSize: 13, color: 'var(--text)', width: '100%',
+              textAlign: 'right', direction: 'rtl',
+            }}
+          />
+        </div>
+      </div>
+
+      <nav>
         {items.map((item) => {
           const isActive = item.key === active;
-          const inner = (
-            <span style={{
-              flexShrink: 0, borderRadius: 12, padding: '8px 16px', minWidth: 'auto',
-              display: 'inline-block', fontSize: 14, fontWeight: isActive ? 700 : 500,
-              background: isActive ? '#f17732' : 'var(--surface-2)',
-              color: isActive ? '#FFFFFF' : 'var(--text-2)', cursor: item.to ? 'pointer' : 'not-allowed',
-            }}>{item.label}</span>
+          const rowStyle: React.CSSProperties = {
+            borderRadius: 12, height: 44, marginBottom: 8,
+            display: 'flex', alignItems: 'center', justifyContent: 'flex-start',
+            padding: '0 14px', fontSize: 16, fontWeight: isActive ? 700 : 500,
+            lineHeight: 1, textAlign: 'left',
+            background: isActive ? '#f17732' : 'transparent',
+            color: isActive ? '#FFFFFF' : 'var(--text-2)',
+            cursor: item.to ? 'pointer' : 'not-allowed',
+            transition: 'background .14s',
+          };
+          const inner = <span style={{ flex: 1 }}>{item.label}</span>;
+          if (!item.to) {
+            return <div key={item.key} style={{ ...rowStyle, opacity: 0.55 }}>{inner}</div>;
+          }
+          return (
+            <Link
+              key={item.key}
+              to={item.to}
+              aria-current={isActive ? 'page' : undefined}
+              style={rowStyle}
+              onMouseEnter={(e) => { if (!isActive) (e.currentTarget as HTMLElement).style.background = 'var(--surface-2)'; }}
+              onMouseLeave={(e) => { if (!isActive) (e.currentTarget as HTMLElement).style.background = 'transparent'; }}
+            >
+              {inner}
+            </Link>
           );
-          return item.to
-            ? <Link key={item.key} to={item.to}>{inner}</Link>
-            : <span key={item.key}>{inner}</span>;
         })}
-      </div>
-
-      {/* Desktop: Title + Search + vertical list */}
-      <div className="hidden md:block">
-        <div style={{
-          fontSize: 16, fontWeight: 800, color: 'var(--text-2)', textAlign: 'left',
-          marginBottom: 10, padding: '0 16px',
-        }}>
-          تنظیمات
-        </div>
-
-        <div style={{ padding: '0 16px', marginBottom: 16 }}>
-          <div style={{
-            display: 'flex', alignItems: 'center', flexDirection: 'row-reverse', gap: 8,
-            background: 'var(--surface)', border: '1px solid var(--border)',
-            borderRadius: 'var(--r-sm)', padding: '8px 12px',
-          }}>
-            <SearchHeaderP />
-            <input
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-              placeholder="جستجو در تنظیمات"
-              aria-label="جستجو در تنظیمات"
-              style={{
-                border: 'none', outline: 'none', background: 'transparent',
-                fontFamily: 'inherit', fontSize: 13, color: 'var(--text)', width: '100%',
-                textAlign: 'right', direction: 'rtl',
-              }}
-            />
+        {items.length === 0 && (
+          <div style={{ padding: '12px 4px', fontSize: 13, color: 'var(--text-3)', textAlign: 'center' }}>
+            موردی یافت نشد
           </div>
-        </div>
-
-        <nav style={{ padding: '0 16px' }}>
-          {items.map((item) => {
-            const isActive = item.key === active;
-            const rowStyle: React.CSSProperties = {
-              borderRadius: 12, height: 44, marginBottom: 8,
-              display: 'flex', alignItems: 'center', justifyContent: 'flex-start',
-              padding: '0 14px', fontSize: 16, fontWeight: isActive ? 700 : 500,
-              lineHeight: 1, textAlign: 'left',
-              background: isActive ? '#f17732' : 'transparent',
-              color: isActive ? '#FFFFFF' : 'var(--text-2)',
-              cursor: item.to ? 'pointer' : 'not-allowed',
-              transition: 'background .14s',
-            };
-            const inner = <span style={{ flex: 1 }}>{item.label}</span>;
-            if (!item.to) {
-              return <div key={item.key} style={{ ...rowStyle, opacity: 0.55 }}>{inner}</div>;
-            }
-            return (
-              <Link
-                key={item.key}
-                to={item.to}
-                aria-current={isActive ? 'page' : undefined}
-                style={rowStyle}
-                onMouseEnter={(e) => { if (!isActive) (e.currentTarget as HTMLElement).style.background = 'var(--surface-2)'; }}
-                onMouseLeave={(e) => { if (!isActive) (e.currentTarget as HTMLElement).style.background = 'transparent'; }}
-              >
-                {inner}
-              </Link>
-            );
-          })}
-          {items.length === 0 && (
-            <div style={{ padding: '12px 4px', fontSize: 13, color: 'var(--text-3)', textAlign: 'center' }}>
-              موردی یافت نشد
-            </div>
-          )}
-        </nav>
-      </div>
-    </div>
+        )}
+      </nav>
+    </aside>
   );
 }
diff --git a/assets/admin/pages/SubscriptionPage.tsx b/assets/admin/pages/SubscriptionPage.tsx
index 9f78b6e0..4983d9b0 100644
--- a/assets/admin/pages/SubscriptionPage.tsx
+++ b/assets/admin/pages/SubscriptionPage.tsx
@@ -21,6 +21,7 @@ export const PLAN_FEATURE_LABELS: Record<string, string> = {
   patient_records: 'پرونده بیمار',
   services:        'مدیریت سرویس‌ها',
   sms_panel:       'پنل پیامک',
+  insurance:       'مدیریت بیمه',
 };
 
 /** Feature labels used on the plan cards — wording copied from clinic-pro-tauri. */
@@ -28,6 +29,7 @@ const CARD_FEATURE_LABELS: Record<string, string> = {
   patient_records: 'مدیریت پرونده بیمار',
   services:        'مدیریت سرویس ها',
   sms_panel:       'پنل پیامک',
+  insurance:       'مدیریت بیمه',
 };
 
 /** The plan highlighted as "most popular" in the UI (no backend flag exists). */
@@ -114,12 +116,12 @@ export default function SubscriptionPage() {
 
   return (
     <div className="fade-in" dir="rtl" style={{ maxWidth: 1180, margin: '0 auto' }}>
-      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'stretch', gap: 0 }} className="flex-col md:flex-row">
+      <div className="grid grid-cols-1 lg:grid-cols-[280px_minmax(0,1fr)] gap-5">
         <PurchaseSubscriptionSidebar active="subscription" />
 
         <div
-          style={{ flex: 1, background: 'var(--surface)', minWidth: 0 }}
-          className="px-4 py-4 md:px-8 md:py-6 md:mr-2 rounded-[var(--r-lg)]"
+          style={{ background: 'var(--surface)', minWidth: 0 }}
+          className="px-4 py-4 md:px-6 md:py-6 rounded-[var(--r-lg)]"
         >
           <div dir="ltr" style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 32, paddingTop: 8 }}>
             {/* ── Header: current plan (left) + title (right) ── */}
@@ -137,7 +139,7 @@ export default function SubscriptionPage() {
             {plansLoading ? (
               <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16, justifyContent: 'flex-end', width: '100%' }}>
                 {[1, 2, 3].map((i) => (
-                  <div key={i} className="skeleton" style={{ width: 300, height: 522, borderRadius: 10 }} />
+                  <div key={i} className="skeleton" style={{ flex: '1 1 280px', minWidth: 250, maxWidth: 340, height: 522, borderRadius: 10 }} />
                 ))}
               </div>
             ) : plans.length === 0 ? (
@@ -362,7 +364,7 @@ function PlanCard({
     <div
       data-testid={`plan-card-${plan.name}`}
       style={{
-        width: 300, maxWidth: '100%', height: 522, borderRadius: 10,
+        flex: '1 1 280px', minWidth: 250, maxWidth: 340, height: 522, borderRadius: 10,
         border: isSelected ? '2px solid #494cb3' : '2px solid var(--border)',
         background: 'var(--surface)', display: 'flex', flexDirection: 'column',
         padding: 16, position: 'relative', overflow: 'hidden',
@@ -398,15 +400,14 @@ function PlanCard({
 
           {/* Secretaries pill */}
           <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-end' }}>
-            <div style={{
+            <div dir="rtl" style={{
               minWidth: 86, height: 32, borderRadius: 29, background: 'var(--surface-3)',
-              color: 'var(--text)', display: 'flex', gap: 5, alignItems: 'center', justifyContent: 'center',
-              padding: '0 8px',
+              color: 'var(--text)', display: 'flex', gap: 6, alignItems: 'center', justifyContent: 'center',
+              padding: '0 12px',
             }}>
-              <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
-                <span style={{ fontSize: 14 }}>منشی</span>
-                <span style={{ fontSize: 14, fontWeight: 500 }}>{formatNumber(plan.max_secretaries)}</span>
-              </div>
+              <span style={{ fontSize: 14, fontWeight: 500, whiteSpace: 'nowrap' }}>
+                {formatNumber(plan.max_secretaries)} منشی
+              </span>
               <PlanCardPerson size={18} />
             </div>
           </div>