From 051b4406279e9fa9f3d1baf7da996a9455be6678 Mon Sep 17 00:00:00 2001
From: Julian Cuni <julian.cuni@microservices.al>
Date: Sun, 21 Jun 2026 14:43:58 +0200
Subject: [PATCH] feat(nav): promote Subscriptions to a top-level section with
 its own tabs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Subscriptions, Plans, and Tariff Lab were tabs under /setup. Moved them into a
standalone /subscriptions section with its own header nav entry (between Turni and
Konfigurimi) and a tab bar: Abonimet (/subscriptions), Planet
(/subscriptions/plans), Lab Tarife (/subscriptions/tariff-lab).

- New SubscriptionsLayout (tab bar + <Outlet>); the three screens are now its
  child routes at the top level, not under setupRoute.
- Removed Subscriptions/Plans/Tariff-Lab from SetupLayout and SETUP_TABS. Setup
  now holds Devices/Tariff/Site/Users/Roles/Shifts/Logs.
- Header gains the "Abonimet" link, gated on subscription:read OR subscription:plan
  OR tariff:read (shown if the user can reach any sub-tab).
- Tabs are permission-gated; the /subscriptions index redirects a user lacking
  subscription:read to the first sub-tab they can see (or the booth).
- Legacy redirects: /setup/subscriptions → /subscriptions, /setup/plans →
  /subscriptions/plans, /setup/tariff-lab → /subscriptions/tariff-lab. Dropped the
  old /subscriptions → /setup redirect (it's a real route now).
- The Tariff COMPOSER stays in Setup; only the Tariff LAB simulator moved.

Verified at runtime (Playwright): header order Kabina·Turni·Abonimet·Konfigurimi,
the three sub-tabs render, Setup no longer lists them, /setup/subscriptions
redirects cleanly. build+lint 14/14.

Claude-Session: https://claude.ai/code/session_01Xcm6ikLgGoCxxHrxtjkk5V
---
 apps/web/src/router.tsx | 89 ++++++++++++++++++++++++++++++-----------
 wiki/log.md             | 12 ++++++
 2 files changed, 77 insertions(+), 24 deletions(-)

diff --git a/apps/web/src/router.tsx b/apps/web/src/router.tsx
index 79bfd66..a0f8701 100644
--- a/apps/web/src/router.tsx
+++ b/apps/web/src/router.tsx
@@ -82,9 +82,6 @@ function SetupLayout() {
       <nav className="mb-4 flex flex-wrap items-center gap-1 border-b border-term-border">
         {show("site:update") && <SetupTab to="/setup" label={t("nav.devices")} exact />}
         {show("tariff:read") && <SetupTab to="/setup/tariff" label={t("nav.tariff")} />}
-        {show("tariff:read") && <SetupTab to="/setup/tariff-lab" label={t("nav.tariffLab")} />}
-        {show("subscription:read") && <SetupTab to="/setup/subscriptions" label={t("nav.subscriptions")} />}
-        {show("subscription:plan") && <SetupTab to="/setup/plans" label={t("nav.plans")} />}
         {show("site:read") && <SetupTab to="/setup/site" label={t("nav.site")} />}
         {show("user:read") && <SetupTab to="/setup/users" label={t("nav.users")} />}
         {show("role:read") && <SetupTab to="/setup/roles" label={t("nav.roles")} />}
@@ -96,6 +93,26 @@ function SetupLayout() {
   );
 }
 
+/** Subscriptions layout — a standalone top-level section (its own header nav entry),
+ *  with tabs for the subscriber catalog, the plan catalog, and the tariff lab. Each
+ *  tab is a gated child route; an operator with only subscription:read sees just the
+ *  first tab. */
+function SubscriptionsLayout() {
+  const { user } = rootRoute.useRouteContext();
+  const { t } = useTranslation();
+  const show = (perm: Permission) => can(user, perm);
+  return (
+    <div className="">
+      <nav className="mb-4 flex flex-wrap items-center gap-1 border-b border-term-border">
+        {show("subscription:read") && <SetupTab to="/subscriptions" label={t("nav.subscriptions")} exact />}
+        {show("subscription:plan") && <SetupTab to="/subscriptions/plans" label={t("nav.plans")} />}
+        {show("tariff:read") && <SetupTab to="/subscriptions/tariff-lab" label={t("nav.tariffLab")} />}
+      </nav>
+      <Outlet />
+    </div>
+  );
+}
+
 /** SQ/EN toggle. Persists the choice to the user's profile (restored on next login)
  *  and applies it immediately. Updates the router-context user so App re-syncs. */
 function LanguageToggle({
@@ -353,12 +370,16 @@ function RootLayout() {
         <nav className="flex items-center gap-1">
           <NavLink to="/booth" label={t("nav.booth")} />
           <NavLink to="/shift" label={t("nav.shift")} />
-          {/* One Setup entry — its tabs hold devices/tariff/subscriptions/site/users/
-              roles/shifts. Shown if the user can reach ANY of those screens (an
-              operator with only shift:read still gets in, landing on Shifts). */}
+          {/* Subscriptions — a standalone section (Abonimet / Planet / Lab tarife).
+              Shown if the user can reach ANY of its tabs. */}
+          {(show("subscription:read") || show("subscription:plan") || show("tariff:read")) && (
+            <NavLink to="/subscriptions" label={t("nav.subscriptions")} />
+          )}
+          {/* One Setup entry — its tabs hold devices/tariff/site/users/roles/shifts/logs.
+              Shown if the user can reach ANY of those screens (an operator with only
+              shift:read still gets in, landing on Shifts). */}
           {(show("site:update") ||
             show("tariff:read") ||
-            show("subscription:read") ||
             show("site:read") ||
             show("user:read") ||
             show("role:read") ||
@@ -407,15 +428,19 @@ const boothRoute = createRoute({
   component: BoothScreen,
 });
 
-// Back-compat: the config screens used to be top-level routes. They now live under
-// /setup as tabs — redirect the old paths so existing bookmarks/links don't 404.
+// Back-compat redirects for paths that moved. Most config screens live under /setup;
+// Subscriptions/Plans/Tariff-Lab were promoted OUT of /setup into the standalone
+// /subscriptions section (2026-06-21) — redirect the old /setup/* paths too so existing
+// bookmarks/links don't 404. (No "/subscriptions" entry: that's now a REAL route.)
 const legacyRedirects = (
   [
     ["/tariff", "/setup/tariff"],
-    ["/subscriptions", "/setup/subscriptions"],
     ["/site", "/setup/site"],
     ["/users", "/setup/users"],
     ["/roles", "/setup/roles"],
+    ["/setup/subscriptions", "/subscriptions"],
+    ["/setup/plans", "/subscriptions/plans"],
+    ["/setup/tariff-lab", "/subscriptions/tariff-lab"],
   ] as const
 ).map(([from, to]) =>
   createRoute({
@@ -461,7 +486,6 @@ function requirePerm(perm: Permission) {
 const SETUP_TABS: { to: string; perm: Permission }[] = [
   { to: "/setup", perm: "site:update" },
   { to: "/setup/tariff", perm: "tariff:read" },
-  { to: "/setup/subscriptions", perm: "subscription:read" },
   { to: "/setup/site", perm: "site:read" },
   { to: "/setup/users", perm: "user:read" },
   { to: "/setup/roles", perm: "role:read" },
@@ -496,27 +520,42 @@ const tariffRoute = createRoute({
   beforeLoad: ({ context }) => requirePerm("tariff:read")(context),
   component: () => <TariffComposer />,
 });
-const tariffLabRoute = createRoute({
-  getParentRoute: () => setupRoute,
-  path: "tariff-lab",
-  beforeLoad: ({ context }) => requirePerm("tariff:read")(context),
-  component: () => <TariffLab />,
-});
+
+// --- /subscriptions — a standalone top-level section with its own tabs. The catalog
+//     (index), the plan catalog, and the tariff lab live here, not under /setup. ---
 const subscriptionsRoute = createRoute({
-  getParentRoute: () => setupRoute,
-  path: "subscriptions",
-  beforeLoad: ({ context }) => requirePerm("subscription:read")(context),
+  getParentRoute: () => rootRoute,
+  path: "/subscriptions",
+  component: SubscriptionsLayout,
+});
+// Index tab = the subscriber catalog at /subscriptions exactly. A user lacking
+// subscription:read is redirected to the first sub-tab they CAN see (or the booth).
+const subscriptionsIndexRoute = createRoute({
+  getParentRoute: () => subscriptionsRoute,
+  path: "/",
+  beforeLoad: ({ context }) => {
+    if (can(context.user, "subscription:read")) return;
+    if (can(context.user, "subscription:plan")) throw redirect({ to: "/subscriptions/plans" });
+    if (can(context.user, "tariff:read")) throw redirect({ to: "/subscriptions/tariff-lab" });
+    throw redirect({ to: "/booth" });
+  },
   component: function SubscriptionsRoute() {
     const { user } = rootRoute.useRouteContext();
     return <SubscriptionManager user={user} />;
   },
 });
 const subscriptionPlansRoute = createRoute({
-  getParentRoute: () => setupRoute,
+  getParentRoute: () => subscriptionsRoute,
   path: "plans",
   beforeLoad: ({ context }) => requirePerm("subscription:plan")(context),
   component: () => <SubscriptionPlansManager />,
 });
+const tariffLabRoute = createRoute({
+  getParentRoute: () => subscriptionsRoute,
+  path: "tariff-lab",
+  beforeLoad: ({ context }) => requirePerm("tariff:read")(context),
+  component: () => <TariffLab />,
+});
 const siteRoute = createRoute({
   getParentRoute: () => setupRoute,
   path: "site",
@@ -569,12 +608,14 @@ const routeTree = rootRoute.addChildren([
   boothRoute,
   ...legacyRedirects,
   shiftRoute,
+  subscriptionsRoute.addChildren([
+    subscriptionsIndexRoute,
+    subscriptionPlansRoute,
+    tariffLabRoute,
+  ]),
   setupRoute.addChildren([
     setupDevicesRoute,
     tariffRoute,
-    tariffLabRoute,
-    subscriptionsRoute,
-    subscriptionPlansRoute,
     siteRoute,
     usersRoute,
     rolesRoute,
diff --git a/wiki/log.md b/wiki/log.md
index 078d3f5..77956d3 100644
--- a/wiki/log.md
+++ b/wiki/log.md
@@ -1268,3 +1268,15 @@ before signing the irreversible Z-report. Opening stays immediate. (3) Fixed dar
 <select> popups rendering WHITE on WebKitGTK (Tauri Linux) via color-scheme + explicit option colours.
 Verified the split on a read-only DB copy (tickets 0, subs 10,200 = 10,000 sale + 200 out-of-window,
 reconciles). build+lint 14/14, i18n parity (sq+en). See [[shift]] "Takings split by source".
+
+## [2026-06-21] feat | Promote Subscriptions to a top-level section with its own tabs
+Moved Subscriptions out of /setup into a standalone /subscriptions section with a header nav entry
+(Kabina · Turni · Abonimet · Konfigurimi) and its own tab bar: Abonimet (/subscriptions), Planet
+(/subscriptions/plans), Lab Tarife (/subscriptions/tariff-lab). Removed those three tabs from the Setup
+layout (Setup now: Pajisjet · Tarifa · Park · Përdoruesit · Rolet · Turnet · Loget). Tabs are
+permission-gated (subscription:read / subscription:plan / tariff:read), so an operator with only
+subscription:read sees just Abonimet; the index redirects to the first allowed sub-tab otherwise.
+Legacy /setup/subscriptions, /setup/plans, /setup/tariff-lab redirect to the new paths; the old
+/subscriptions→/setup redirect was removed (it's a real route now). Verified at runtime via Playwright
+(header order, the 3 sub-tabs, Setup no longer shows them, /setup/subscriptions redirects). The Tariff
+COMPOSER stays in Setup; only the Tariff LAB simulator moved. build+lint 14/14.