Refine shared-webapp components and add UI utilities

.claude/rules/frontend/frontend.md

@@ -58,6 +58,7 @@ Use browser MCP tools to test at `https://app.dev.localhost:<appGateway>`. Look
    - **Icon-only buttons**: Must have a `Tooltip` wrapper. Use descriptive labels, e.g., "Account settings" not "Settings", "Log out" not "Logout"
    - **Active state feedback**: Add press feedback to interactive elements using `active:` pseudo-class with background color changes. Buttons/triggers: `active:bg-primary/70` (or variant-specific active backgrounds). Menu/list items: `active:bg-accent`. Small controls (checkbox, radio): `active:border-primary`
    - **Use BaseUI `render` prop** to customize underlying elements (not Radix's `asChild`): `<DialogClose render={<Button />}>Close</DialogClose>`
+   - **Charts**: Import all chart primitives from `@repo/ui/components/Chart` — direct `recharts` imports are lint-blocked. Wrappers default `accessibilityLayer={true}` so Tab focuses data points, not the SVG (otherwise Chrome paints an unstyleable blue ring)
 
 ## Implementation
 

.github/workflows/account.yml

@@ -220,32 +220,17 @@ jobs:
         run: npm run build
 
       - name: Run Lint
-        working-directory: application/account/WebApp
-        run: npm run lint
-
-      - name: Check for Frontend Formatting Issues
-        working-directory: application/account/WebApp
-        run: |
-          npm run format
-
-          # Check for any changes made by the code formatter
-          git diff --exit-code || {
-            echo "Formatting issues detected. Please run 'npm run format' from /application/account/WebApp folder locally and commit the formatted code."
-            exit 1
-          }
-
-      - name: Run Back Office Lint
-        working-directory: application/account/BackOffice
-        run: npm run lint
+        working-directory: developer-cli
+        run: dotnet run -- lint --frontend
 
-      - name: Check for Back Office Formatting Issues
-        working-directory: application/account/BackOffice
+      - name: Run Format
+        working-directory: developer-cli
         run: |
-          npm run format
+          dotnet run -- format --frontend
 
           # Check for any changes made by the code formatter
           git diff --exit-code || {
-            echo "Formatting issues detected. Please run 'npm run format' from /application/account/BackOffice folder locally and commit the formatted code."
+            echo "Formatting issues detected. Please run 'dotnet run --project developer-cli -- format --frontend' locally and commit the formatted code."
             exit 1
           }
 

.github/workflows/main.yml

@@ -215,17 +215,17 @@ jobs:
         run: npm run build
 
       - name: Run Lint
-        working-directory: application/main/WebApp
-        run: npm run lint
+        working-directory: developer-cli
+        run: dotnet run -- lint --frontend
 
-      - name: Check for Frontend Formatting Issues
-        working-directory: application/main/WebApp
+      - name: Run Format
+        working-directory: developer-cli
         run: |
-          npm run format
+          dotnet run -- format --frontend
 
           # Check for any changes made by the code formatter
           git diff --exit-code || {
-            echo "Formatting issues detected. Please run 'npm run format' from /application/main/WebApp folder locally and commit the formatted code."
+            echo "Formatting issues detected. Please run 'dotnet run --project developer-cli -- format --frontend' locally and commit the formatted code."
             exit 1
           }
 

application/.oxlintrc.json

@@ -87,7 +87,11 @@
       "error",
       {
         "paths": [
-          { "name": "clsx", "message": "Use cn() from @repo/ui/utils instead." }
+          { "name": "clsx", "message": "Use cn() from @repo/ui/utils instead." },
+          {
+            "name": "recharts",
+            "message": "Import chart components from @repo/ui/components/Chart instead. The shared wrappers default accessibilityLayer={true} on chart types so Tab routes to data points and the focus ring matches our theme — importing recharts directly bypasses this and Chrome will paint its native blue focus ring on the SVG."
+          }
         ]
       }
     ]
@@ -159,6 +163,12 @@
       "rules": {
         "no-restricted-imports": "off"
       }
+    },
+    {
+      "files": ["**/shared-webapp/ui/components/Chart.tsx"],
+      "rules": {
+        "no-restricted-imports": "off"
+      }
     }
   ]
 }

application/account/BackOffice/shared/lib/api/labels.ts

@@ -0,0 +1,29 @@
+import { t } from "@lingui/core/macro";
+
+import { SubscriptionPlan, UserRole } from "@/shared/lib/api/client";
+
+export function getSubscriptionPlanLabel(plan: SubscriptionPlan): string {
+  switch (plan) {
+    case SubscriptionPlan.Basis:
+      return t`Basis`;
+    case SubscriptionPlan.Standard:
+      return t`Standard`;
+    case SubscriptionPlan.Premium:
+      return t`Premium`;
+    default:
+      return String(plan);
+  }
+}
+
+export function getUserRoleLabel(role: UserRole): string {
+  switch (role) {
+    case UserRole.Owner:
+      return t`Owner`;
+    case UserRole.Admin:
+      return t`Admin`;
+    case UserRole.Member:
+      return t`Member`;
+    default:
+      return String(role);
+  }
+}

application/account/BackOffice/shared/translations/locale/da-DK.po

@@ -31,6 +31,9 @@ msgstr "Back Office"
 msgid "BackOffice - Localhost"
 msgstr "BackOffice - Localhost"
 
+msgid "Basis"
+msgstr "Basis"
+
 msgid "Change language"
 msgstr "Skift sprog"
 
@@ -106,12 +109,18 @@ msgstr "Hovednavigation"
 msgid "Manage accounts, view system data, see exceptions, and perform various tasks for operational and support teams."
 msgstr "Administrer konti, se systemdata, se undtagelser og udfør forskellige opgaver for drifts- og supportteams."
 
+msgid "Member"
+msgstr "Medlem"
+
 msgid "Navigation"
 msgstr "Navigation"
 
 msgid "No back-office access"
 msgstr "Ingen adgang til Back Office"
 
+msgid "Owner"
+msgstr "Ejer"
+
 msgid "Page not found"
 msgstr "Siden blev ikke fundet"
 
@@ -124,6 +133,9 @@ msgstr "Tjek venligst URL'en eller vend tilbage til forsiden."
 msgid "Please try again or return to the home page."
 msgstr "Prøv venligst igen eller vend tilbage til forsiden."
 
+msgid "Premium"
+msgstr "Premium"
+
 msgid "Screenshots of the dashboard project with desktop and mobile versions"
 msgstr "Skærmbilleder af dashboard-projektet i desktop- og mobilversioner"
 
@@ -136,6 +148,9 @@ msgstr "Lille"
 msgid "Something went wrong"
 msgstr "Noget gik galt"
 
+msgid "Standard"
+msgstr "Standard"
+
 msgid "Support"
 msgstr "Support"
 

application/account/BackOffice/shared/translations/locale/en-US.po

@@ -31,6 +31,9 @@ msgstr "Back Office"
 msgid "BackOffice - Localhost"
 msgstr "BackOffice - Localhost"
 
+msgid "Basis"
+msgstr "Basis"
+
 msgid "Change language"
 msgstr "Change language"
 
@@ -106,12 +109,18 @@ msgstr "Main navigation"
 msgid "Manage accounts, view system data, see exceptions, and perform various tasks for operational and support teams."
 msgstr "Manage accounts, view system data, see exceptions, and perform various tasks for operational and support teams."
 
+msgid "Member"
+msgstr "Member"
+
 msgid "Navigation"
 msgstr "Navigation"
 
 msgid "No back-office access"
 msgstr "No back-office access"
 
+msgid "Owner"
+msgstr "Owner"
+
 msgid "Page not found"
 msgstr "Page not found"
 
@@ -124,6 +133,9 @@ msgstr "Please check the URL or return to the home page."
 msgid "Please try again or return to the home page."
 msgstr "Please try again or return to the home page."
 
+msgid "Premium"
+msgstr "Premium"
+
 msgid "Screenshots of the dashboard project with desktop and mobile versions"
 msgstr "Screenshots of the dashboard project with desktop and mobile versions"
 
@@ -136,6 +148,9 @@ msgstr "Small"
 msgid "Something went wrong"
 msgstr "Something went wrong"
 
+msgid "Standard"
+msgstr "Standard"
+
 msgid "Support"
 msgstr "Support"
 

application/account/WebApp/routes/account/index.tsx

@@ -1,8 +1,9 @@
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { AppLayout } from "@repo/ui/components/AppLayout";
+import { LinkCard } from "@repo/ui/components/LinkCard";
 import { getDateDaysAgo, getTodayIsoDate } from "@repo/utils/date/formatDate";
-import { createFileRoute, Link } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
 
 import { api, UserStatus } from "@/shared/lib/api/client";
 
@@ -22,11 +23,7 @@ export default function Home() {
       subtitle={t`A quick summary of your account activity.`}
     >
       <div className="grid w-full grid-cols-1 gap-4 pt-8 md:grid-cols-2 lg:grid-cols-3">
-        <Link
-          to="/account/users"
-          className="flex flex-col justify-between rounded-xl bg-card p-6 outline-ring transition-[background-color] hover:bg-hover-background focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
-          aria-label={t`View users`}
-        >
+        <LinkCard to="/account/users" aria-label={t`View users`} className="justify-between">
           <div>
             <div className="text-sm font-medium text-foreground">
               <Trans>Total users</Trans>
@@ -36,16 +33,16 @@ export default function Home() {
             </div>
           </div>
           <div className="mt-4 text-2xl font-semibold text-foreground">{usersSummary?.totalUsers ?? "-"}</div>
-        </Link>
-        <Link
+        </LinkCard>
+        <LinkCard
           to="/account/users"
           search={{
             userStatus: UserStatus.Active,
             startDate: getDateDaysAgo(30),
             endDate: getTodayIsoDate()
           }}
-          className="flex flex-col justify-between rounded-xl bg-card p-6 outline-ring transition-[background-color] hover:bg-hover-background focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
           aria-label={t`View active users`}
+          className="justify-between"
         >
           <div>
             <div className="text-sm font-medium text-foreground">
@@ -56,12 +53,12 @@ export default function Home() {
             </div>
           </div>
           <div className="mt-4 text-2xl font-semibold text-foreground">{usersSummary?.activeUsers ?? "-"}</div>
-        </Link>
-        <Link
+        </LinkCard>
+        <LinkCard
           to="/account/users"
           search={{ userStatus: UserStatus.Pending }}
-          className="flex flex-col justify-between rounded-xl bg-card p-6 outline-ring transition-[background-color] hover:bg-hover-background focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
           aria-label={t`View invited users`}
+          className="justify-between"
         >
           <div>
             <div className="text-sm font-medium text-foreground">
@@ -72,7 +69,7 @@ export default function Home() {
             </div>
           </div>
           <div className="mt-4 text-2xl font-semibold text-foreground">{usersSummary?.pendingUsers ?? "-"}</div>
-        </Link>
+        </LinkCard>
       </div>
     </AppLayout>
   );

application/account/WebApp/routes/components/-components/AlertsBadgesPreview.tsx

@@ -150,6 +150,9 @@ export function AlertsBadgesPreview() {
           <Badge variant="destructive">
             <Trans>Destructive</Trans>
           </Badge>
+          <Badge variant="warning">
+            <Trans>Warning</Trans>
+          </Badge>
           <Badge variant="outline">
             <Trans>Outline</Trans>
           </Badge>

application/account/WebApp/routes/components/-components/ChartAreaInteractivePreview.tsx

@@ -2,17 +2,20 @@ import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@repo/ui/components/Card";
 import {
+  Area,
+  AreaChart,
+  CartesianGrid,
   type ChartConfig,
   ChartContainer,
   ChartLegend,
   ChartLegendContent,
   ChartTooltip,
-  ChartTooltipContent
+  ChartTooltipContent,
+  XAxis
 } from "@repo/ui/components/Chart";
 import { SelectContent, SelectItem, SelectTrigger, SelectValue } from "@repo/ui/components/Select";
 import { SelectField } from "@repo/ui/components/SelectField";
 import { useState } from "react";
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
 
 import { dailyVisitors as chartData } from "./chartSampleData";
 

application/account/WebApp/routes/components/-components/ChartBarInteractivePreview.tsx

@@ -2,9 +2,17 @@ import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { Button } from "@repo/ui/components/Button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@repo/ui/components/Card";
-import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@repo/ui/components/Chart";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  XAxis
+} from "@repo/ui/components/Chart";
 import { useMemo, useState } from "react";
-import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
 
 import { dailyVisitors as chartData } from "./chartSampleData";
 

application/account/WebApp/routes/components/-components/ChartBarStackedPreview.tsx

@@ -2,15 +2,18 @@ import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@repo/ui/components/Card";
 import {
+  Bar,
+  BarChart,
+  CartesianGrid,
   type ChartConfig,
   ChartContainer,
   ChartLegend,
   ChartLegendContent,
   ChartTooltip,
-  ChartTooltipContent
+  ChartTooltipContent,
+  XAxis
 } from "@repo/ui/components/Chart";
 import { TrendingUpIcon } from "lucide-react";
-import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
 
 const chartData = [
   { month: "January", desktop: 186, mobile: 80 },

application/account/WebApp/routes/components/-components/ChartPieDonutTextPreview.tsx

@@ -1,10 +1,17 @@
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@repo/ui/components/Card";
-import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@repo/ui/components/Chart";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  Label,
+  Pie,
+  PieChart
+} from "@repo/ui/components/Chart";
 import { TrendingUpIcon } from "lucide-react";
 import { useMemo } from "react";
-import { Label, Pie, PieChart } from "recharts";
 
 const chartData = [
   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },