+ {/* Gradient blur backdrop */}
+
- {/* سربرگ */}
-
-
- پلن {meta.label}
-
-
{meta.desc}
-
-
- {formatNumber(plan.max_secretaries)}
- منشی
-
-
-
-
- {/* توگل دوره */}
- {paidPeriods.length > 1 && (
-
+ {/* Popular badge (top-right corner) */}
+ {isPopular && (
+
- {paidPeriods.map((p) => {
- const on = p.uuid === selectedPeriod?.uuid;
- return (
-
- );
- })}
+ محبوبترین
+
)}
- {/* قیمت */}
-
- {selectedPeriod ? (
-
-
قیمت:
-
- {formatRial(selectedPeriod.price_rials)}
+
+
+ پلن {meta.label}
+
+
+ {meta.desc}
+
+
+ {/* Secretaries pill */}
+
+
+
+ منشی
+ {formatNumber(plan.max_secretaries)}
+
+
+
+
+
+ {/* Period toggle */}
+
+ {paidPeriods.length > 0 && (
+
+ {paidPeriods.map((p, idx) => {
+ const on = p.uuid === selectedPeriod?.uuid;
+ return (
+
+
+ {idx < paidPeriods.length - 1 && (
+
+ )}
+
+ );
+ })}
+
+ )}
+
+
+ {/* Price */}
+
+ {!isFree && selectedPeriod && (
+
+
+ {formatRial(selectedPeriod.price_rials)}
+
+ : قیمت
+
+ )}
+
+
+
+
+
+ {/* Features */}
+
+ {Object.entries(plan.features).map(([key, enabled]) => {
+ const label = CARD_FEATURE_LABELS[key] ?? PLAN_FEATURE_LABELS[key] ?? key;
+ return (
+
+
+ {label}
+
+
+ {enabled
+ ?
+ : }
- ) : (
-
رایگان
- )}
-
+ );
+ })}
+
- {/* امکانات */}
-
- {Object.entries(plan.features).map(([key, enabled]) => (
- -
-
- {enabled
- ?
- : }
-
-
- {PLAN_FEATURE_LABELS[key] ?? key}
-
-
- ))}
-
-
- {/* تریال */}
- {trialPeriod && !usedTrial && plan.level > 0 && !isDowngrade && (
+ {/* Trial box (dashed) */}
+ {!isFree && trialPeriod && !usedTrial && !isDowngrade && (
+
-
-
- تریال {formatNumber(trialPeriod.duration_months)} ماهه رایگان
-
+
+
+ تریال {formatNumber(trialPeriod.duration_months)} ماهه رایگان
+
+
+
- )}
-
+
+
+ )}
- {/* دکمه خرید */}
-
- {isDowngrade ? (
-
- ) : selectedPeriod ? (
-
- ) : (
-
- )}
-
+
+
+ {/* Buy button */}
+ {isFree ? (
+
+ ) : isDowngrade ? (
+
+ ) : (
+
+ )}
);
}
diff --git a/assets/admin/pages/subscriptionIcons.tsx b/assets/admin/pages/subscriptionIcons.tsx
new file mode 100644
index 00000000..3356d159
--- /dev/null
+++ b/assets/admin/pages/subscriptionIcons.tsx
@@ -0,0 +1,75 @@
+// Subscription-page icons — SVG markup copied verbatim from the clinic-pro-tauri
+// source (`src/assets/icon/*`) so the ported page matches it pixel-for-pixel.
+// The rest of the admin uses Heroicons; these bespoke glyphs exist only here.
+import React from 'react';
+
+type IconProps = { size?: number; color?: string };
+
+export function SparkleIcon({ size = 15, color = '#FDD835' }: IconProps) {
+ return (
+
+ );
+}
+
+export function PlanCardPerson({ size = 20, color = '#2F2F2F' }: IconProps) {
+ return (
+
+ );
+}
+
+export function CloseCircleFilled({ size = 20, color = '#D7D7D7' }: IconProps) {
+ return (
+
+ );
+}
+
+export function GiftIcon({ size = 24, color = '#F17732' }: IconProps) {
+ return (
+
+ );
+}
+
+export function InfoCircleRedFilled({ size = 20, color = '#D32F2F' }: IconProps) {
+ return (
+
+ );
+}
+
+export function SearchHeaderP({ color = '#7E7E7E' }: { color?: string }) {
+ return (
+
+ );
+}