improvement: newly created organization's subscriptions flow improved.

frontend/src/app/(dashboard)/settings/subscriptions/page.tsx

@@ -7,10 +7,20 @@ import { useAuth } from '@/lib/hooks/useAuth';
 import { authApi } from '@/lib/api/auth';
 import type { SubscriptionAlertData } from '@/types/subscription';
 
+const PLAN_OPTIONS = [
+  { id: 'solo', name: 'Solo', maxUsers: 1, price: 19 },
+  { id: 'small', name: 'Small', maxUsers: 5, price: 49 },
+  { id: 'medium', name: 'Medium', maxUsers: 10, price: 89 },
+  { id: 'large', name: 'Large', maxUsers: 15, price: 129 },
+  { id: 'enterprise', name: 'Enterprise', maxUsers: null, price: 199 },
+] as const;
+
 export default function SubscriptionsSettingsPage() {
   const { currentOrganization } = useAuth();
   const router = useRouter();
   const [alert, setAlert] = useState<SubscriptionAlertData | null>(null);
+  const [selectedPlanId, setSelectedPlanId] = useState<string>(PLAN_OPTIONS[0].id);
+  const [purchaseNotice, setPurchaseNotice] = useState<string | null>(null);
 
   useEffect(() => {
     if (currentOrganization && !currentOrganization.isOwner) {
@@ -38,6 +48,8 @@ export default function SubscriptionsSettingsPage() {
   }
 
   const plan = currentOrganization.plan;
+  const hasActiveSubscription = Boolean(plan);
+  const selectedPlan = PLAN_OPTIONS.find((option) => option.id === selectedPlanId);
   const maxUsers = plan?.maxUsers;
   const isUnlimited = typeof maxUsers === 'number' && maxUsers >= 999999;
   const seatsUsed = alert?.seatsUsed;
@@ -56,7 +68,7 @@ export default function SubscriptionsSettingsPage() {
           : 'text-red-400';
 
   return (
-    <div className="max-w-4xl space-y-6">
+    <div className="space-y-6">
       <div>
         <Link
           href="/today"
@@ -74,6 +86,15 @@ export default function SubscriptionsSettingsPage() {
       </div>
 
       <div className="surface-card p-6 space-y-4">
+        {!hasActiveSubscription && (
+          <div className="rounded-[var(--radius-md)] border border-amber-500/30 bg-amber-500/10 p-4">
+            <p className="text-sm text-amber-200">
+              This organization has no active subscription. Select a plan below to start
+              the purchase process.
+            </p>
+          </div>
+        )}
+
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
           <div>
             <p className="text-xs text-text-muted uppercase tracking-wide">Current plan</p>
@@ -110,6 +131,9 @@ export default function SubscriptionsSettingsPage() {
 
         {alert?.showWarning && (
           <div className="text-sm text-text-secondary space-y-1">
+            {alert.noActiveSubscription && (
+              <p>No active subscription for this organization.</p>
+            )}
             {alert.trialExpired && (
               <p>Trial period has ended. Choose a plan when checkout is available.</p>
             )}
@@ -124,11 +148,52 @@ export default function SubscriptionsSettingsPage() {
           </div>
         )}
 
-        <p className="text-sm text-text-secondary">
-          Payment and plan upgrades will connect here. The warning on the settings
-          icon is only shown to workspace owners when seats are low or the trial window
-          is ending.
-        </p>
+        <div className="space-y-3 pt-2">
+          <p className="text-sm text-text-secondary">
+            Choose a plan to continue. Purchase integration is not active yet, so this
+            currently prepares the selection step only.
+          </p>
+          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            {PLAN_OPTIONS.map((option) => {
+              const selected = selectedPlanId === option.id;
+              return (
+                <button
+                  key={option.id}
+                  type="button"
+                  onClick={() => setSelectedPlanId(option.id)}
+                  className={`rounded-[var(--radius-md)] border p-4 text-left transition-colors ${
+                    selected
+                      ? 'border-primary/70 bg-primary-soft'
+                      : 'border-border hover:border-border-strong'
+                  }`}
+                >
+                  <p className="text-base font-medium text-text-primary">{option.name}</p>
+                  <p className="text-sm text-text-secondary mt-1">
+                    {option.maxUsers == null ? 'Unlimited seats' : `${option.maxUsers} seats`}
+                  </p>
+                  <p className="text-sm text-text-secondary mt-1">${option.price} / month</p>
+                </button>
+              );
+            })}
+          </div>
+          <button
+            type="button"
+            className="inline-flex items-center justify-center rounded-[var(--radius-md)] bg-primary px-4 py-2 text-sm font-medium text-white hover:opacity-90 disabled:opacity-60"
+            onClick={() => {
+              const selectedPlanLabel = selectedPlan?.name ?? 'the selected plan';
+              setPurchaseNotice(
+                `Purchase flow will be enabled soon. ${selectedPlanLabel} is selected and ready for checkout setup.`,
+              );
+            }}
+          >
+            Start purchase process
+          </button>
+          {purchaseNotice && (
+            <div className="rounded-[var(--radius-md)] border border-emerald-500/30 bg-emerald-500/10 px-4 py-3">
+              <p className="text-sm text-emerald-200">{purchaseNotice}</p>
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );