@nextsparkjs/core 0.1.0-beta.81 → 0.1.0-beta.83

package/templates/app/superadmin/team-roles/page.tsx

@@ -1,493 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@nextsparkjs/core/components/ui/card";
-import { Button } from "@nextsparkjs/core/components/ui/button";
-import { Badge } from "@nextsparkjs/core/components/ui/badge";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@nextsparkjs/core/components/ui/tabs";
-import {
-  ArrowLeft,
-  Shield,
-  Users,
-  Lock,
-  Eye,
-  Key,
-  CreditCard,
-  Layers,
-  Zap,
-} from "lucide-react";
-import { APP_CONFIG_MERGED } from "@nextsparkjs/core/lib/config/config-sync";
-import { PermissionService } from "@nextsparkjs/core/lib/services/permission.service";
-import { PERMISSIONS_METADATA } from "@nextsparkjs/registries/permissions-registry";
-import { getFullBillingMatrix } from "@nextsparkjs/core/lib/billing/queries";
-import { RolesPermissionsMatrix } from "@nextsparkjs/core/components/superadmin/tables/RolesPermissionsMatrix";
-import { PlanFeaturesMatrix } from "@nextsparkjs/core/components/superadmin/tables/PlanFeaturesMatrix";
-import { getTemplateOrDefaultClient } from "@nextsparkjs/registries/template-registry.client";
-
-/**
- * Team Roles & Permissions Page
- *
- * Displays two consolidated matrices:
- * 1. RBAC Matrix - Team roles and their permissions
- * 2. Plan Features Matrix - Billing plans and their features/limits
- *
- * Both use pre-computed data for O(1) runtime lookups.
- */
-function TeamRolesPage() {
-  const teamRolesConfig = APP_CONFIG_MERGED.teamRoles;
-  const roles = teamRolesConfig.availableTeamRoles;
-  const hierarchy = teamRolesConfig.hierarchy;
-
-  // Get full RBAC matrix from pre-computed registry
-  const { permissions, matrix } = PermissionService.getMatrix();
-
-  // Get full billing matrix from pre-computed registry
-  const billingData = getFullBillingMatrix();
-
-  // Sort roles by hierarchy for display
-  const sortedRoles = [...roles].sort(
-    (a, b) => (hierarchy[b] ?? 0) - (hierarchy[a] ?? 0)
-  );
-
-  // Convert FULL_MATRIX format to rolePermissions format for the matrix component
-  const rolePermissions: Record<string, string[]> = {};
-  for (const role of roles) {
-    rolePermissions[role] = permissions
-      .filter(p => matrix[p.id as keyof typeof matrix]?.[role])
-      .map(p => p.id);
-  }
-
-  // All permission IDs
-  const allPermissions = permissions.map(p => p.id);
-
-  // Count permissions per role
-  const permissionCounts = sortedRoles.reduce(
-    (acc, role) => {
-      acc[role] = rolePermissions[role]?.length ?? 0;
-      return acc;
-    },
-    {} as Record<string, number>
-  );
-
-  // Get role badge variant based on hierarchy
-  const getRoleBadgeVariant = (role: string) => {
-    const h = hierarchy[role] ?? 0;
-    if (h >= 100) return "destructive";
-    if (h >= 50) return "default";
-    if (h >= 10) return "secondary";
-    return "outline";
-  };
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-center gap-4">
-        <Button variant="outline" size="sm" asChild>
-          <Link href="/superadmin" className="flex items-center gap-2">
-            <ArrowLeft className="h-4 w-4" />
-            Back to Super Admin
-          </Link>
-        </Button>
-        <div className="flex-1">
-          <h1 className="text-3xl font-bold tracking-tight">
-            Roles, Permissions & Plans
-          </h1>
-          <p className="text-muted-foreground">
-            View team roles, permissions, and billing plan features
-          </p>
-        </div>
-      </div>
-
-      {/* Tabs for switching between matrices */}
-      <Tabs defaultValue="rbac" className="space-y-6">
-        <TabsList className="grid w-full max-w-md grid-cols-2">
-          <TabsTrigger value="rbac" className="flex items-center gap-2" data-cy="tab-rbac">
-            <Shield className="h-4 w-4" />
-            RBAC Matrix
-          </TabsTrigger>
-          <TabsTrigger value="plans" className="flex items-center gap-2" data-cy="tab-plans">
-            <CreditCard className="h-4 w-4" />
-            Plan Features
-          </TabsTrigger>
-        </TabsList>
-
-        {/* RBAC Matrix Tab */}
-        <TabsContent value="rbac" className="space-y-6">
-          {/* RBAC Stats Overview */}
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium">Available Roles</CardTitle>
-                <Users className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">{roles.length}</div>
-                <p className="text-xs text-muted-foreground">Team role types</p>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium">Total Permissions</CardTitle>
-                <Key className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">{PERMISSIONS_METADATA.totalPermissions}</div>
-                <p className="text-xs text-muted-foreground">
-                  {PERMISSIONS_METADATA.corePermissions} core + {PERMISSIONS_METADATA.featurePermissions} features + {PERMISSIONS_METADATA.entityPermissions} entity
-                </p>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium">Protected Role</CardTitle>
-                <Lock className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">owner</div>
-                <p className="text-xs text-muted-foreground">Cannot be removed</p>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium">Default Role</CardTitle>
-                <Eye className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">{teamRolesConfig.defaultTeamRole}</div>
-                <p className="text-xs text-muted-foreground">For invitations</p>
-              </CardContent>
-            </Card>
-          </div>
-
-          {/* Roles Hierarchy */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Shield className="h-5 w-5" />
-                Team Roles Hierarchy
-              </CardTitle>
-              <CardDescription>
-                Roles ordered by hierarchy level. Higher values have more permissions.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="flex flex-wrap gap-3">
-                {sortedRoles.map((role) => (
-                  <div
-                    key={role}
-                    className="flex items-center gap-2 px-4 py-2 rounded-lg border bg-card"
-                    data-cy={`role-card-${role}`}
-                  >
-                    <Badge variant={getRoleBadgeVariant(role)} className="font-semibold">
-                      {hierarchy[role] ?? 0}
-                    </Badge>
-                    <div>
-                      <div className="font-medium capitalize">{role}</div>
-                      <div className="text-xs text-muted-foreground">
-                        {permissionCounts[role]} permissions
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Permissions Matrix */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Permissions Matrix</CardTitle>
-              <CardDescription>
-                Complete view of which permissions each team role has access to.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <RolesPermissionsMatrix
-                roles={roles}
-                hierarchy={hierarchy}
-                permissions={rolePermissions}
-                allPermissions={allPermissions}
-                permissionsData={permissions}
-              />
-            </CardContent>
-          </Card>
-
-          {/* RBAC Legend */}
-          <Card className="bg-muted/30">
-            <CardHeader className="pb-2">
-              <CardTitle className="text-sm">Legend</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="flex flex-wrap gap-6 text-sm">
-                <div className="flex items-center gap-2">
-                  <Badge variant="destructive">100</Badge>
-                  <span className="text-muted-foreground">Owner (protected)</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Badge variant="default">50</Badge>
-                  <span className="text-muted-foreground">Admin</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Badge variant="secondary">10</Badge>
-                  <span className="text-muted-foreground">Member</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Badge variant="outline">1</Badge>
-                  <span className="text-muted-foreground">Viewer</span>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* RBAC Source Info */}
-          <Card className="bg-muted/30">
-            <CardContent className="pt-4">
-              <div className="text-xs text-muted-foreground space-y-1">
-                <p>
-                  <strong>Source:</strong> Pre-computed permissions registry (build-time)
-                </p>
-                <p>
-                  <strong>Roles config:</strong>{" "}
-                  <code className="bg-background px-1 rounded">
-                    APP_CONFIG_MERGED.teamRoles
-                  </code>
-                </p>
-                <p>
-                  <strong>Permissions registry:</strong>{" "}
-                  <code className="bg-background px-1 rounded">
-                    core/lib/registries/permissions-registry.ts
-                  </code>
-                </p>
-                <p>
-                  <strong>Generated at:</strong>{" "}
-                  {PERMISSIONS_METADATA.generatedAt}
-                </p>
-              </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        {/* Plan Features Tab */}
-        <TabsContent value="plans" className="space-y-6">
-          {/* Billing Stats Overview */}
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium">Total Plans</CardTitle>
-                <Layers className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">{billingData.metadata.totalPlans}</div>
-                <p className="text-xs text-muted-foreground">
-                  {billingData.metadata.publicPlans} public
-                </p>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium">Features</CardTitle>
-                <Zap className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">{billingData.metadata.totalFeatures}</div>
-                <p className="text-xs text-muted-foreground">Defined features</p>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium">Limits</CardTitle>
-                <Shield className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold">{billingData.metadata.totalLimits}</div>
-                <p className="text-xs text-muted-foreground">Quota types</p>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium">Theme</CardTitle>
-                <CreditCard className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold capitalize">{billingData.metadata.theme}</div>
-                <p className="text-xs text-muted-foreground">Active theme</p>
-              </CardContent>
-            </Card>
-          </div>
-
-          {/* Plan Cards Overview */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <CreditCard className="h-5 w-5" />
-                Available Plans
-              </CardTitle>
-              <CardDescription>
-                Billing plans with their pricing and trial periods.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="flex flex-wrap gap-3">
-                {billingData.plans.map((plan) => (
-                  <div
-                    key={plan.slug}
-                    className="flex items-center gap-3 px-4 py-2 rounded-lg border bg-card"
-                    data-cy={`plan-card-${plan.slug}`}
-                  >
-                    <Badge
-                      variant={
-                        plan.type === "enterprise"
-                          ? "destructive"
-                          : plan.type === "paid"
-                          ? "default"
-                          : "secondary"
-                      }
-                      className="font-semibold capitalize"
-                    >
-                      {plan.type}
-                    </Badge>
-                    <div>
-                      <div className="font-medium capitalize">{plan.slug}</div>
-                      <div className="text-xs text-muted-foreground">
-                        {plan.type === "free"
-                          ? "Free forever"
-                          : plan.type === "enterprise"
-                          ? "Custom pricing"
-                          : plan.price
-                          ? `$${(plan.price.monthly / 100).toFixed(0)}/mo`
-                          : "Contact sales"}
-                        {plan.trialDays && plan.trialDays > 0 && (
-                          <span className="ml-1 text-green-600">
-                            ({plan.trialDays}d trial)
-                          </span>
-                        )}
-                      </div>
-                    </div>
-                    {plan.visibility === "hidden" && (
-                      <Badge variant="outline" className="text-[9px]">
-                        hidden
-                      </Badge>
-                    )}
-                  </div>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Plan Features Matrix */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Features & Limits Matrix</CardTitle>
-              <CardDescription>
-                Complete view of features and quotas included in each plan.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <PlanFeaturesMatrix
-                plans={billingData.plans}
-                features={billingData.features}
-                limits={billingData.limits}
-                matrix={billingData.matrix}
-              />
-            </CardContent>
-          </Card>
-
-          {/* Plan Legend */}
-          <Card className="bg-muted/30">
-            <CardHeader className="pb-2">
-              <CardTitle className="text-sm">Legend</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="flex flex-wrap gap-6 text-sm">
-                <div className="flex items-center gap-2">
-                  <Badge variant="secondary">free</Badge>
-                  <span className="text-muted-foreground">Free tier</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Badge variant="default">paid</Badge>
-                  <span className="text-muted-foreground">Subscription plan</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Badge variant="destructive">enterprise</Badge>
-                  <span className="text-muted-foreground">Custom/unlimited</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Badge variant="outline">monthly</Badge>
-                  <span className="text-muted-foreground">Resets monthly</span>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Billing Source Info */}
-          <Card className="bg-muted/30">
-            <CardContent className="pt-4">
-              <div className="text-xs text-muted-foreground space-y-1">
-                <p>
-                  <strong>Source:</strong> Pre-computed billing registry (module load)
-                </p>
-                <p>
-                  <strong>Billing config:</strong>{" "}
-                  <code className="bg-background px-1 rounded">
-                    contents/themes/{billingData.metadata.theme}/billing/billing.config.ts
-                  </code>
-                </p>
-                <p>
-                  <strong>Billing registry:</strong>{" "}
-                  <code className="bg-background px-1 rounded">
-                    core/lib/registries/billing-registry.ts
-                  </code>
-                </p>
-              </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
-      </Tabs>
-
-      {/* Three-Layer Model Info */}
-      <Card className="border-blue-200 bg-blue-50/30">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-sm flex items-center gap-2">
-            <Shield className="h-4 w-4 text-blue-600" />
-            Three-Layer Permission Model
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="text-sm text-muted-foreground">
-            <p className="font-mono bg-background px-2 py-1 rounded inline-block mb-2">
-              RESULT = Permission (RBAC) AND Feature (Plan) AND Quota (Limits)
-            </p>
-            <ul className="list-disc list-inside space-y-1 mt-2">
-              <li>
-                <strong>Layer 1 - Permission (RBAC):</strong> Does the user&apos;s role allow this action?
-              </li>
-              <li>
-                <strong>Layer 2 - Feature (Plan):</strong> Does the subscription plan include this feature?
-              </li>
-              <li>
-                <strong>Layer 3 - Quota (Limits):</strong> Is there available quota for this action?
-              </li>
-            </ul>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
-export default getTemplateOrDefaultClient(
-  "app/superadmin/team-roles/page.tsx",
-  TeamRolesPage
-);