@nextsparkjs/core 0.1.0-beta.84 → 0.1.0-beta.85

package/templates/app/superadmin/teams/[teamId]/page.tsx

@@ -0,0 +1,687 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
+import { format } from "date-fns";
+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 { Avatar, AvatarFallback } from "@nextsparkjs/core/components/ui/avatar";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@nextsparkjs/core/components/ui/table";
+import {
+  ArrowLeft,
+  Users,
+  User,
+  Calendar,
+  Loader2,
+  AlertTriangle,
+  RefreshCw,
+  Crown,
+  Shield,
+  Eye,
+  CreditCard,
+  CheckCircle,
+  Clock,
+  XCircle,
+  AlertCircle,
+  Receipt,
+  ExternalLink,
+  TrendingUp,
+} from "lucide-react";
+import Link from "next/link";
+import { getTemplateOrDefaultClient } from "@nextsparkjs/registries/template-registry.client";
+
+interface TeamOwner {
+  id: string;
+  name: string;
+  email: string;
+}
+
+interface TeamMember {
+  id: string;
+  userId: string;
+  name: string;
+  email: string;
+  role: "owner" | "admin" | "member" | "viewer";
+  joinedAt: string;
+}
+
+interface Team {
+  id: string;
+  name: string;
+  owner: TeamOwner;
+  memberCount: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface SubscriptionPlan {
+  id: string;
+  slug: string;
+  name: string;
+  type: string;
+  priceMonthly: number | null;
+  priceFormatted: string;
+}
+
+interface Subscription {
+  id: string;
+  plan: SubscriptionPlan;
+  status: string;
+  currentPeriodStart: string;
+  currentPeriodEnd: string;
+  trialEndsAt: string | null;
+  canceledAt: string | null;
+  cancelAtPeriodEnd: boolean;
+  externalSubscriptionId: string | null;
+  externalCustomerId: string | null;
+  createdAt: string;
+}
+
+interface BillingEvent {
+  id: string;
+  type: string;
+  status: string;
+  amount: number;
+  amountFormatted: string;
+  currency: string;
+  invoiceUrl: string | null;
+  receiptUrl: string | null;
+  createdAt: string;
+}
+
+interface UsageData {
+  [key: string]: {
+    current: number;
+    periodKey: string;
+  };
+}
+
+interface TeamDetailData {
+  team: Team;
+  members: TeamMember[];
+  subscription: Subscription | null;
+  billingHistory: BillingEvent[];
+  usage: UsageData;
+  metadata: {
+    requestedBy: string;
+    requestedAt: string;
+    source: string;
+  };
+}
+
+const roleIcons = {
+  owner: Crown,
+  admin: Shield,
+  member: User,
+  viewer: Eye,
+};
+
+const roleColors = {
+  owner: "destructive",
+  admin: "default",
+  member: "secondary",
+  viewer: "outline",
+} as const;
+
+/**
+ * Team Detail Page
+ *
+ * Displays detailed information about a specific team for superadmins (read-only).
+ */
+function TeamDetailPage() {
+  const params = useParams();
+  const teamId = params.teamId as string;
+
+  // Fetch team data from API
+  const { data: teamData, isLoading, error, refetch } = useQuery<TeamDetailData>({
+    queryKey: ["superadmin-team", teamId],
+    queryFn: async () => {
+      const response = await fetch(`/api/superadmin/teams/${teamId}`);
+      if (!response.ok) {
+        if (response.status === 404) {
+          throw new Error("Team not found");
+        }
+        throw new Error("Failed to fetch team data");
+      }
+      return response.json();
+    },
+    retry: 2,
+    staleTime: 30000,
+  });
+
+  // Get team initials for avatar
+  const getTeamInitials = (name: string) => {
+    const words = name.split(" ");
+    if (words.length >= 2) {
+      return `${words[0][0]}${words[1][0]}`.toUpperCase();
+    }
+    return name.slice(0, 2).toUpperCase();
+  };
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-4">
+          <Button variant="outline" size="sm" asChild>
+            <Link href="/superadmin/teams" className="flex items-center gap-2">
+              <ArrowLeft className="h-4 w-4" />
+              Back to Teams
+            </Link>
+          </Button>
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">Team Details</h1>
+            <p className="text-muted-foreground">Loading team data...</p>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="h-8 w-8 animate-spin" />
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-4">
+          <Button variant="outline" size="sm" asChild>
+            <Link href="/superadmin/teams" className="flex items-center gap-2">
+              <ArrowLeft className="h-4 w-4" />
+              Back to Teams
+            </Link>
+          </Button>
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">Team Details</h1>
+            <p className="text-muted-foreground">Error loading data</p>
+          </div>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <AlertTriangle className="h-5 w-5 text-destructive" />
+              Error Loading Team
+            </CardTitle>
+            <CardDescription>
+              {error instanceof Error ? error.message : "Failed to load team data"}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button
+              onClick={() => refetch()}
+              variant="outline"
+              className="flex items-center gap-2"
+            >
+              <RefreshCw className="h-4 w-4" />
+              Retry
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  const team = teamData?.team;
+  const members = teamData?.members || [];
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center gap-4">
+        <Button variant="outline" size="sm" asChild>
+          <Link href="/superadmin/teams" className="flex items-center gap-2">
+            <ArrowLeft className="h-4 w-4" />
+            Back to Teams
+          </Link>
+        </Button>
+        <div className="flex-1">
+          <h1 className="text-3xl font-bold tracking-tight">Team Details</h1>
+          <p className="text-muted-foreground">
+            View team information and members (read-only)
+          </p>
+        </div>
+        <Button
+          onClick={() => refetch()}
+          variant="outline"
+          size="sm"
+          className="flex items-center gap-2"
+        >
+          <RefreshCw className="h-4 w-4" />
+          Refresh
+        </Button>
+      </div>
+
+      {/* Team Info Card */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-start gap-4">
+            <Avatar className="h-16 w-16">
+              <AvatarFallback className="bg-primary/10 text-primary text-xl">
+                {team?.name ? getTeamInitials(team.name) : "??"}
+              </AvatarFallback>
+            </Avatar>
+            <div className="flex-1">
+              <div className="flex items-center gap-3">
+                <CardTitle className="text-2xl">{team?.name}</CardTitle>
+              </div>
+              <CardDescription className="mt-1">
+                ID: {team?.id}
+              </CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {/* Owner */}
+            <div>
+              <h4 className="text-sm font-medium text-muted-foreground mb-2">
+                Owner
+              </h4>
+              <div className="flex items-center gap-2">
+                <Avatar className="h-8 w-8">
+                  <AvatarFallback className="text-xs">
+                    {team?.owner.name?.[0]?.toUpperCase() || "?"}
+                  </AvatarFallback>
+                </Avatar>
+                <div>
+                  <div className="font-medium">{team?.owner.name}</div>
+                  <div className="text-sm text-muted-foreground">
+                    {team?.owner.email}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Members */}
+            <div>
+              <h4 className="text-sm font-medium text-muted-foreground mb-2">
+                Members
+              </h4>
+              <div className="flex items-center gap-2">
+                <Users className="h-5 w-5 text-muted-foreground" />
+                <span className="text-xl font-bold">{team?.memberCount || 0}</span>
+                <span className="text-muted-foreground">
+                  {team?.memberCount === 1 ? "member" : "members"}
+                </span>
+              </div>
+            </div>
+
+            {/* Created */}
+            <div>
+              <h4 className="text-sm font-medium text-muted-foreground mb-2">
+                Created
+              </h4>
+              <div className="flex items-center gap-2 text-muted-foreground">
+                <Calendar className="h-5 w-5" />
+                <span>
+                  {team?.createdAt
+                    ? format(new Date(team.createdAt), "MMMM dd, yyyy")
+                    : "Unknown"}
+                </span>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Members Table */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Users className="h-5 w-5" />
+            Team Members ({members.length})
+          </CardTitle>
+          <CardDescription>
+            All members of this team and their roles.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {members.length === 0 ? (
+            <div className="text-center py-8">
+              <Users className="mx-auto h-12 w-12 text-muted-foreground" />
+              <h3 className="mt-4 text-lg font-medium">No members</h3>
+              <p className="mt-2 text-sm text-muted-foreground">
+                This team has no members yet.
+              </p>
+            </div>
+          ) : (
+            <div className="rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Member</TableHead>
+                    <TableHead>Email</TableHead>
+                    <TableHead>Role</TableHead>
+                    <TableHead>Joined</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {members.map((member) => {
+                    const RoleIcon = roleIcons[member.role] || User;
+                    return (
+                      <TableRow key={member.id}>
+                        <TableCell>
+                          <div className="flex items-center gap-3">
+                            <Avatar className="h-8 w-8">
+                              <AvatarFallback className="text-xs">
+                                {member.name?.[0]?.toUpperCase() || "?"}
+                              </AvatarFallback>
+                            </Avatar>
+                            <div className="font-medium">{member.name}</div>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <span className="font-mono text-sm">{member.email}</span>
+                        </TableCell>
+                        <TableCell>
+                          <Badge variant={roleColors[member.role]} className="gap-1">
+                            <RoleIcon className="h-3 w-3" />
+                            {member.role.charAt(0).toUpperCase() + member.role.slice(1)}
+                          </Badge>
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                            <Calendar className="h-4 w-4" />
+                            {member.joinedAt
+                              ? format(new Date(member.joinedAt), "MMM dd, yyyy")
+                              : "Unknown"}
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Subscription Section */}
+      {teamData?.subscription ? (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <CreditCard className="h-5 w-5" />
+              Subscription
+            </CardTitle>
+            <CardDescription>
+              Current subscription status and billing information.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              {/* Plan */}
+              <div>
+                <h4 className="text-sm font-medium text-muted-foreground mb-2">
+                  Current Plan
+                </h4>
+                <div className="flex items-center gap-2">
+                  <Badge variant={teamData.subscription.plan.type === 'paid' ? 'default' : 'secondary'}>
+                    {teamData.subscription.plan.name}
+                  </Badge>
+                  <span className="text-sm text-muted-foreground">
+                    {teamData.subscription.plan.priceFormatted}
+                  </span>
+                </div>
+              </div>
+
+              {/* Status */}
+              <div>
+                <h4 className="text-sm font-medium text-muted-foreground mb-2">
+                  Status
+                </h4>
+                <Badge
+                  variant={
+                    teamData.subscription.status === 'active' ? 'default' :
+                    teamData.subscription.status === 'trialing' ? 'secondary' :
+                    teamData.subscription.status === 'past_due' ? 'destructive' :
+                    'outline'
+                  }
+                  className="gap-1"
+                >
+                  {teamData.subscription.status === 'active' && <CheckCircle className="h-3 w-3" />}
+                  {teamData.subscription.status === 'trialing' && <Clock className="h-3 w-3" />}
+                  {teamData.subscription.status === 'past_due' && <AlertCircle className="h-3 w-3" />}
+                  {teamData.subscription.status === 'canceled' && <XCircle className="h-3 w-3" />}
+                  {teamData.subscription.status.charAt(0).toUpperCase() + teamData.subscription.status.slice(1).replace('_', ' ')}
+                </Badge>
+                {teamData.subscription.cancelAtPeriodEnd && (
+                  <p className="text-xs text-destructive mt-1">Cancels at period end</p>
+                )}
+              </div>
+
+              {/* Current Period */}
+              <div>
+                <h4 className="text-sm font-medium text-muted-foreground mb-2">
+                  Current Period
+                </h4>
+                <div className="text-sm">
+                  <div className="flex items-center gap-1">
+                    <Calendar className="h-3 w-3 text-muted-foreground" />
+                    {format(new Date(teamData.subscription.currentPeriodStart), "MMM dd")} - {format(new Date(teamData.subscription.currentPeriodEnd), "MMM dd, yyyy")}
+                  </div>
+                </div>
+              </div>
+
+              {/* Trial / External Links */}
+              <div>
+                {teamData.subscription.trialEndsAt && (
+                  <>
+                    <h4 className="text-sm font-medium text-muted-foreground mb-2">
+                      Trial Ends
+                    </h4>
+                    <div className="flex items-center gap-2 text-sm">
+                      <Clock className="h-4 w-4 text-muted-foreground" />
+                      {format(new Date(teamData.subscription.trialEndsAt), "MMM dd, yyyy")}
+                    </div>
+                  </>
+                )}
+                {teamData.subscription.externalSubscriptionId && (
+                  <>
+                    <h4 className="text-sm font-medium text-muted-foreground mb-2">
+                      Stripe
+                    </h4>
+                    <a
+                      href={`https://dashboard.stripe.com/subscriptions/${teamData.subscription.externalSubscriptionId}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
+                    >
+                      View in Stripe
+                      <ExternalLink className="h-3 w-3" />
+                    </a>
+                  </>
+                )}
+              </div>
+            </div>
+
+            {/* Subscription Metadata */}
+            <div className="mt-4 pt-4 border-t text-xs text-muted-foreground">
+              <span>Subscription ID: {teamData.subscription.id}</span>
+              {teamData.subscription.externalCustomerId && (
+                <span className="ml-4">Customer ID: {teamData.subscription.externalCustomerId}</span>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      ) : (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <CreditCard className="h-5 w-5" />
+              Subscription
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-center py-8">
+              <CreditCard className="mx-auto h-12 w-12 text-muted-foreground" />
+              <h3 className="mt-4 text-lg font-medium">No Subscription</h3>
+              <p className="mt-2 text-sm text-muted-foreground">
+                This team does not have an active subscription.
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Billing History */}
+      {teamData?.billingHistory && teamData.billingHistory.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Receipt className="h-5 w-5" />
+              Billing History
+            </CardTitle>
+            <CardDescription>
+              Recent payment events and invoices.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Date</TableHead>
+                    <TableHead>Type</TableHead>
+                    <TableHead>Status</TableHead>
+                    <TableHead className="text-right">Amount</TableHead>
+                    <TableHead>Actions</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {teamData.billingHistory.map((event) => (
+                    <TableRow key={event.id}>
+                      <TableCell>
+                        <div className="flex items-center gap-2 text-sm">
+                          <Calendar className="h-4 w-4 text-muted-foreground" />
+                          {format(new Date(event.createdAt), "MMM dd, yyyy")}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <span className="capitalize">{event.type.replace('_', ' ')}</span>
+                      </TableCell>
+                      <TableCell>
+                        <Badge
+                          variant={
+                            event.status === 'succeeded' ? 'default' :
+                            event.status === 'pending' ? 'secondary' :
+                            event.status === 'failed' ? 'destructive' :
+                            'outline'
+                          }
+                          className="gap-1"
+                        >
+                          {event.status === 'succeeded' && <CheckCircle className="h-3 w-3" />}
+                          {event.status === 'pending' && <Clock className="h-3 w-3" />}
+                          {event.status === 'failed' && <XCircle className="h-3 w-3" />}
+                          {event.status.charAt(0).toUpperCase() + event.status.slice(1)}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="text-right font-mono">
+                        {event.amountFormatted}
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex items-center gap-2">
+                          {event.invoiceUrl && (
+                            <a
+                              href={event.invoiceUrl}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="text-primary hover:underline text-sm"
+                            >
+                              Invoice
+                            </a>
+                          )}
+                          {event.receiptUrl && (
+                            <a
+                              href={event.receiptUrl}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="text-primary hover:underline text-sm"
+                            >
+                              Receipt
+                            </a>
+                          )}
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Usage Summary */}
+      {teamData?.usage && Object.keys(teamData.usage).length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <TrendingUp className="h-5 w-5" />
+              Current Usage
+            </CardTitle>
+            <CardDescription>
+              Resource usage for the current billing period.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+              {Object.entries(teamData.usage).map(([limitSlug, usage]) => (
+                <div key={limitSlug} className="p-4 bg-muted/50 rounded-lg">
+                  <div className="text-sm font-medium text-muted-foreground capitalize">
+                    {limitSlug.replace(/_/g, ' ')}
+                  </div>
+                  <div className="text-2xl font-bold mt-1">
+                    {usage.current.toLocaleString()}
+                  </div>
+                  <div className="text-xs text-muted-foreground mt-1">
+                    Period: {usage.periodKey}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Metadata Footer */}
+      {teamData?.metadata && (
+        <Card className="bg-muted/30">
+          <CardContent className="pt-4">
+            <div className="text-xs text-muted-foreground space-y-1">
+              <p>
+                Last updated:{" "}
+                {new Date(teamData.metadata.requestedAt).toLocaleString()}
+              </p>
+              <p>Requested by: {teamData.metadata.requestedBy}</p>
+              <p>Source: {teamData.metadata.source}</p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
+
+export default getTemplateOrDefaultClient(
+  "app/superadmin/teams/[teamId]/page.tsx",
+  TeamDetailPage
+);