@almadar/cli 0.3.1 → 0.3.3

package/shells/typescript-shell/packages/client/src/clients/winning-11/templates/TrustIntelligenceTemplate.tsx

@@ -0,0 +1,312 @@
+/**
+ * TrustIntelligenceTemplate
+ *
+ * Template for the Trust Intelligence dashboard page (/trust-intelligence).
+ * Displays TrustScore metrics and analytics.
+ *
+ * Page: TrustIntelligencePage
+ * Entity: TrustScore
+ * ViewType: dashboard
+ */
+
+import React from "react";
+import { cn } from "../../../lib/cn";
+import { Box } from "../../../components/atoms/Box";
+import { VStack, HStack } from "../../../components/atoms/Stack";
+import { Typography } from "../../../components/atoms/Typography";
+import { Card } from "../../../components/atoms/Card";
+import { Badge } from "../../../components/atoms/Badge";
+import { Spinner } from "../../../components/atoms/Spinner";
+import { TrustMeter, type HealthStatus } from "../atoms/TrustMeter";
+import { useEventBus } from "../../../hooks/useEventBus";
+import {
+  Shield,
+  TrendingUp,
+  TrendingDown,
+  Users,
+  Activity,
+  Award,
+} from "lucide-react";
+
+export interface TrustScoreData {
+  id: string;
+  userId?: string;
+  overallScore: number;
+  reliabilityScore?: number;
+  consistencyScore?: number;
+  communicationScore?: number;
+  trend?: "up" | "down" | "stable";
+  rank?: number;
+  totalUsers?: number;
+}
+
+export interface TrustIntelligenceTemplateProps {
+  /** Current user's trust score */
+  userScore?: TrustScoreData;
+  /** Network average score */
+  networkAverage?: number;
+  /** Top performers */
+  topPerformers?: readonly TrustScoreData[];
+  /** Recent score changes */
+  recentChanges?: readonly { date: string; change: number }[];
+  /** Loading state */
+  isLoading?: boolean;
+  /** Error state */
+  error?: Error | null;
+  /** Page title */
+  title?: string;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const getHealthStatusFromScore = (score: number): HealthStatus => {
+  if (score >= 80) return "thriving";
+  if (score >= 60) return "healthy";
+  if (score >= 40) return "declining";
+  return "withering";
+};
+
+const TrendIcon = ({ trend }: { trend?: "up" | "down" | "stable" }) => {
+  if (!trend || trend === "stable") return null;
+  const Icon = trend === "up" ? TrendingUp : TrendingDown;
+  const color = trend === "up" ? "text-emerald-500" : "text-red-500";
+  return <Icon className={cn("h-5 w-5", color)} />;
+};
+
+export const TrustIntelligenceTemplate: React.FC<TrustIntelligenceTemplateProps> = ({
+  userScore,
+  networkAverage = 65,
+  topPerformers = [],
+  recentChanges = [],
+  isLoading = false,
+  error = null,
+  title = "Trust Intelligence",
+  className,
+}) => {
+  const eventBus = useEventBus();
+
+  // Handle score click for details
+  const handleScoreClick = (score: TrustScoreData) => {
+    eventBus.emit("UI:VIEW", { row: score, entity: "TrustScore" });
+  };
+
+  if (isLoading) {
+    return (
+      <VStack align="center" justify="center" className={cn("py-12", className)}>
+        <Spinner size="lg" />
+        <Typography variant="body" className="text-neutral-500">
+          Calculating trust metrics...
+        </Typography>
+      </VStack>
+    );
+  }
+
+  if (error) {
+    return (
+      <VStack align="center" justify="center" className={cn("py-12", className)}>
+        <Typography variant="body" className="text-red-500">
+          Error: {error.message}
+        </Typography>
+      </VStack>
+    );
+  }
+
+  return (
+    <VStack gap="lg" className={cn("p-6", className)}>
+      {/* Header */}
+      <HStack justify="between" align="center">
+        <VStack gap="xs">
+          <Typography variant="h1">{title}</Typography>
+          <Typography variant="body" className="text-neutral-500">
+            Your trust metrics and network insights
+          </Typography>
+        </VStack>
+        <Badge variant="info" className="gap-1">
+          <Activity className="h-3 w-3" />
+          Live
+        </Badge>
+      </HStack>
+
+      {/* Main Score Card */}
+      {userScore && (
+        <Card className="p-6 bg-gradient-to-br from-blue-50 to-indigo-50 border-blue-200">
+          <HStack justify="between" align="start" wrap gap="lg">
+            <VStack gap="md">
+              <HStack gap="sm" align="center">
+                <Box
+                  rounded="full"
+                  padding="sm"
+                  className="bg-blue-100"
+                >
+                  <Shield className="h-8 w-8 text-blue-600" />
+                </Box>
+                <VStack gap="none">
+                  <Typography variant="label" className="text-neutral-500">
+                    Your Trust Score
+                  </Typography>
+                  <HStack gap="sm" align="center">
+                    <Typography variant="h1" className="text-blue-600">
+                      {userScore.overallScore}
+                    </Typography>
+                    <TrendIcon trend={userScore.trend} />
+                  </HStack>
+                </VStack>
+              </HStack>
+
+              <TrustMeter
+                healthStatus={getHealthStatusFromScore(userScore.overallScore)}
+                growthPoints={userScore.overallScore}
+                size="lg"
+              />
+            </VStack>
+
+            {/* Score breakdown */}
+            <VStack gap="sm" className="min-w-[200px]">
+              <Typography variant="label" className="text-neutral-500">
+                Score Breakdown
+              </Typography>
+              {userScore.reliabilityScore !== undefined && (
+                <HStack justify="between">
+                  <Typography variant="small">Reliability</Typography>
+                  <Typography variant="small" className="font-medium">
+                    {userScore.reliabilityScore}%
+                  </Typography>
+                </HStack>
+              )}
+              {userScore.consistencyScore !== undefined && (
+                <HStack justify="between">
+                  <Typography variant="small">Consistency</Typography>
+                  <Typography variant="small" className="font-medium">
+                    {userScore.consistencyScore}%
+                  </Typography>
+                </HStack>
+              )}
+              {userScore.communicationScore !== undefined && (
+                <HStack justify="between">
+                  <Typography variant="small">Communication</Typography>
+                  <Typography variant="small" className="font-medium">
+                    {userScore.communicationScore}%
+                  </Typography>
+                </HStack>
+              )}
+            </VStack>
+
+            {/* Rank */}
+            {userScore.rank && userScore.totalUsers && (
+              <VStack align="center" gap="xs">
+                <Box
+                  rounded="full"
+                  padding="md"
+                  className="bg-amber-100"
+                >
+                  <Award className="h-8 w-8 text-amber-600" />
+                </Box>
+                <Typography variant="label" className="text-neutral-500">
+                  Network Rank
+                </Typography>
+                <Typography variant="h3">
+                  #{userScore.rank}{" "}
+                  <Typography as="span" variant="small" className="text-neutral-400">
+                    of {userScore.totalUsers}
+                  </Typography>
+                </Typography>
+              </VStack>
+            )}
+          </HStack>
+        </Card>
+      )}
+
+      {/* Stats Grid */}
+      <Box className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {/* Network Average */}
+        <Card className="p-4">
+          <VStack gap="sm">
+            <HStack gap="sm" align="center">
+              <Users className="h-5 w-5 text-neutral-400" />
+              <Typography variant="label" className="text-neutral-500">
+                Network Average
+              </Typography>
+            </HStack>
+            <Typography variant="h2">{networkAverage}</Typography>
+            {userScore && (
+              <Typography
+                variant="small"
+                className={cn(
+                  userScore.overallScore > networkAverage
+                    ? "text-emerald-600"
+                    : "text-amber-600",
+                )}
+              >
+                {userScore.overallScore > networkAverage
+                  ? `+${userScore.overallScore - networkAverage} above average`
+                  : `${networkAverage - userScore.overallScore} below average`}
+              </Typography>
+            )}
+          </VStack>
+        </Card>
+
+        {/* Top Performers Preview */}
+        <Card className="p-4">
+          <VStack gap="sm">
+            <HStack gap="sm" align="center">
+              <Award className="h-5 w-5 text-amber-500" />
+              <Typography variant="label" className="text-neutral-500">
+                Top Performers
+              </Typography>
+            </HStack>
+            <VStack gap="xs">
+              {topPerformers.slice(0, 3).map((performer, idx) => (
+                <HStack
+                  key={performer.id}
+                  justify="between"
+                  className="cursor-pointer hover:bg-neutral-50 p-1 rounded"
+                  onClick={() => handleScoreClick(performer)}
+                >
+                  <Typography variant="small">
+                    #{idx + 1} User {performer.userId?.slice(-4) || performer.id.slice(-4)}
+                  </Typography>
+                  <Typography variant="small" className="font-medium text-emerald-600">
+                    {performer.overallScore}
+                  </Typography>
+                </HStack>
+              ))}
+            </VStack>
+          </VStack>
+        </Card>
+
+        {/* Recent Changes */}
+        <Card className="p-4">
+          <VStack gap="sm">
+            <HStack gap="sm" align="center">
+              <Activity className="h-5 w-5 text-blue-500" />
+              <Typography variant="label" className="text-neutral-500">
+                Recent Changes
+              </Typography>
+            </HStack>
+            <VStack gap="xs">
+              {recentChanges.slice(0, 3).map((change, idx) => (
+                <HStack key={idx} justify="between">
+                  <Typography variant="small" className="text-neutral-500">
+                    {change.date}
+                  </Typography>
+                  <Typography
+                    variant="small"
+                    className={cn(
+                      "font-medium",
+                      change.change > 0 ? "text-emerald-600" : "text-red-600",
+                    )}
+                  >
+                    {change.change > 0 ? "+" : ""}
+                    {change.change}
+                  </Typography>
+                </HStack>
+              ))}
+            </VStack>
+          </VStack>
+        </Card>
+      </Box>
+    </VStack>
+  );
+};
+
+TrustIntelligenceTemplate.displayName = "TrustIntelligenceTemplate";

package/shells/typescript-shell/packages/client/src/clients/winning-11/templates/UserProfileTemplate.tsx

@@ -0,0 +1,308 @@
+/**
+ * UserProfileTemplate
+ *
+ * Template for the User Profile detail page (/users/:id).
+ * Displays a single User entity with full details and actions.
+ *
+ * Page: UserProfilePage
+ * Entity: User
+ * ViewType: detail
+ */
+
+import React from "react";
+import { cn } from "../../../lib/cn";
+import { Box } from "../../../components/atoms/Box";
+import { VStack, HStack } from "../../../components/atoms/Stack";
+import { Typography } from "../../../components/atoms/Typography";
+import { Button } from "../../../components/atoms/Button";
+import { Card } from "../../../components/atoms/Card";
+import { Badge } from "../../../components/atoms/Badge";
+import { Avatar } from "../../../components/atoms/Avatar";
+import { Spinner } from "../../../components/atoms/Spinner";
+import { useEventBus } from "../../../hooks/useEventBus";
+import {
+  ArrowLeft,
+  Edit,
+  Mail,
+  Calendar,
+  Users,
+  Shield,
+  Star,
+  Activity,
+} from "lucide-react";
+
+export interface UserProfileData {
+  id: string;
+  name: string;
+  email: string;
+  status: "pending" | "active" | "suspended";
+  primaryCategory?: string;
+  connectionSlots?: number;
+  usedSlots?: number;
+  isBetaUser?: boolean;
+  inviteCode?: string;
+  createdAt?: string;
+  lastActiveAt?: string;
+  assessmentId?: string;
+  trustScoreId?: string;
+}
+
+export interface UserProfileTemplateProps {
+  /** User data to display */
+  user?: UserProfileData;
+  /** Data prop alias */
+  data?: UserProfileData;
+  /** Loading state */
+  isLoading?: boolean;
+  /** Error state */
+  error?: Error | null;
+  /** Show back button */
+  showBack?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const getStatusColor = (status: UserProfileData["status"]) => {
+  switch (status) {
+    case "active":
+      return "success";
+    case "pending":
+      return "warning";
+    case "suspended":
+      return "error";
+    default:
+      return "neutral";
+  }
+};
+
+export const UserProfileTemplate: React.FC<UserProfileTemplateProps> = ({
+  user: userProp,
+  data,
+  isLoading = false,
+  error = null,
+  showBack = true,
+  className,
+}) => {
+  const eventBus = useEventBus();
+  const user = userProp || data;
+
+  // Handle back navigation
+  const handleBack = () => {
+    eventBus.emit("UI:BACK", {});
+  };
+
+  // Handle edit
+  const handleEdit = () => {
+    if (user) {
+      eventBus.emit("UI:EDIT", { row: user, entity: "User" });
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <VStack align="center" justify="center" className={cn("py-12", className)}>
+        <Spinner size="lg" />
+        <Typography variant="body" className="text-neutral-500">
+          Loading user profile...
+        </Typography>
+      </VStack>
+    );
+  }
+
+  if (error) {
+    return (
+      <VStack align="center" justify="center" className={cn("py-12", className)}>
+        <Typography variant="body" className="text-red-500">
+          Error: {error.message}
+        </Typography>
+      </VStack>
+    );
+  }
+
+  if (!user) {
+    return (
+      <VStack align="center" justify="center" className={cn("py-12", className)}>
+        <Typography variant="body" className="text-neutral-500">
+          User not found
+        </Typography>
+      </VStack>
+    );
+  }
+
+  return (
+    <VStack gap="lg" className={cn("p-6", className)}>
+      {/* Header */}
+      <HStack justify="between" align="center" wrap>
+        <HStack gap="md" align="center">
+          {showBack && (
+            <Button variant="ghost" onClick={handleBack} className="gap-2">
+              <ArrowLeft className="h-4 w-4" />
+              Back
+            </Button>
+          )}
+          <VStack gap="xs">
+            <Typography variant="h1">User Profile</Typography>
+          </VStack>
+        </HStack>
+
+        <Button variant="primary" onClick={handleEdit} className="gap-2">
+          <Edit className="h-4 w-4" />
+          Edit Profile
+        </Button>
+      </HStack>
+
+      {/* Profile Card */}
+      <Card className="p-6">
+        <HStack gap="lg" align="start" wrap>
+          {/* Avatar and basic info */}
+          <VStack align="center" gap="md" className="min-w-[150px]">
+            <Avatar name={user.name} size="xl" />
+            <Badge variant={getStatusColor(user.status)} size="lg">
+              {user.status}
+            </Badge>
+            {user.isBetaUser && (
+              <Badge variant="info" className="gap-1">
+                <Star className="h-3 w-3" />
+                Beta User
+              </Badge>
+            )}
+          </VStack>
+
+          {/* Details */}
+          <VStack gap="md" className="flex-1">
+            <VStack gap="xs">
+              <Typography variant="h2">{user.name}</Typography>
+              <HStack gap="xs" align="center" className="text-neutral-500">
+                <Mail className="h-4 w-4" />
+                <Typography variant="body">{user.email}</Typography>
+              </HStack>
+            </VStack>
+
+            <Box className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 border-t">
+              {user.primaryCategory && (
+                <VStack gap="xs">
+                  <Typography variant="label" className="text-neutral-500">
+                    Primary Category
+                  </Typography>
+                  <Typography variant="body">{user.primaryCategory}</Typography>
+                </VStack>
+              )}
+
+              <VStack gap="xs">
+                <Typography variant="label" className="text-neutral-500">
+                  Connection Slots
+                </Typography>
+                <HStack gap="xs" align="center">
+                  <Users className="h-4 w-4 text-neutral-400" />
+                  <Typography variant="body">
+                    {user.usedSlots || 0} / {user.connectionSlots || 10} used
+                  </Typography>
+                </HStack>
+              </VStack>
+
+              {user.createdAt && (
+                <VStack gap="xs">
+                  <Typography variant="label" className="text-neutral-500">
+                    Member Since
+                  </Typography>
+                  <HStack gap="xs" align="center">
+                    <Calendar className="h-4 w-4 text-neutral-400" />
+                    <Typography variant="body">
+                      {new Date(user.createdAt).toLocaleDateString()}
+                    </Typography>
+                  </HStack>
+                </VStack>
+              )}
+
+              {user.lastActiveAt && (
+                <VStack gap="xs">
+                  <Typography variant="label" className="text-neutral-500">
+                    Last Active
+                  </Typography>
+                  <HStack gap="xs" align="center">
+                    <Activity className="h-4 w-4 text-neutral-400" />
+                    <Typography variant="body">
+                      {new Date(user.lastActiveAt).toLocaleDateString()}
+                    </Typography>
+                  </HStack>
+                </VStack>
+              )}
+
+              {user.inviteCode && (
+                <VStack gap="xs">
+                  <Typography variant="label" className="text-neutral-500">
+                    Invite Code
+                  </Typography>
+                  <Typography variant="body" className="font-mono">
+                    {user.inviteCode}
+                  </Typography>
+                </VStack>
+              )}
+            </Box>
+          </VStack>
+        </HStack>
+      </Card>
+
+      {/* Related Data Cards */}
+      <Box className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {/* Trust Score Card */}
+        <Card className="p-4">
+          <VStack gap="sm">
+            <HStack gap="sm" align="center">
+              <Shield className="h-5 w-5 text-blue-500" />
+              <Typography variant="h4">Trust Score</Typography>
+            </HStack>
+            {user.trustScoreId ? (
+              <Typography variant="body" className="text-neutral-500">
+                Score ID: {user.trustScoreId}
+              </Typography>
+            ) : (
+              <Typography variant="body" className="text-neutral-400">
+                No trust score calculated yet
+              </Typography>
+            )}
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() =>
+                eventBus.emit("UI:VIEW_TRUST_SCORE", { userId: user.id })
+              }
+            >
+              View Trust Details
+            </Button>
+          </VStack>
+        </Card>
+
+        {/* Assessment Card */}
+        <Card className="p-4">
+          <VStack gap="sm">
+            <HStack gap="sm" align="center">
+              <Activity className="h-5 w-5 text-emerald-500" />
+              <Typography variant="h4">Assessment</Typography>
+            </HStack>
+            {user.assessmentId ? (
+              <Typography variant="body" className="text-neutral-500">
+                Assessment ID: {user.assessmentId}
+              </Typography>
+            ) : (
+              <Typography variant="body" className="text-neutral-400">
+                No assessment completed yet
+              </Typography>
+            )}
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() =>
+                eventBus.emit("UI:VIEW_ASSESSMENT", { userId: user.id })
+              }
+            >
+              View Assessment
+            </Button>
+          </VStack>
+        </Card>
+      </Box>
+    </VStack>
+  );
+};
+
+UserProfileTemplate.displayName = "UserProfileTemplate";