@lego-box/shell 1.0.5 → 1.0.7

package/src/pages/ProfilePage.tsx

@@ -0,0 +1,335 @@
+import * as React from 'react';
+import { useGlobalState } from 'piral';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Badge,
+  Loading,
+} from '@lego-box/ui-kit';
+import { usePermissions } from '../hooks/usePermissions';
+import { useCan } from '../context/AbilityContext';
+import { usePiralInstance } from '../context/PiralInstanceContext';
+import { Check, X, Shield, Mail, Calendar, Clock, Hash, User } from 'lucide-react';
+
+interface ProfileUser {
+  id: string;
+  name: string;
+  email: string;
+  avatar?: string;
+  roleName?: string;
+  is_superuser?: boolean;
+  isActive?: boolean;
+  created?: string;
+  updated?: string;
+  verified?: boolean;
+}
+
+function formatDate(timestamp: string): string {
+  try {
+    return new Date(timestamp).toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  } catch {
+    return timestamp;
+  }
+}
+
+function formatDateTime(timestamp: string): string {
+  try {
+    return new Date(timestamp).toLocaleString(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  } catch {
+    return timestamp;
+  }
+}
+
+function formatLastActive(timestamp: string): string {
+  try {
+    const now = new Date();
+    const updated = new Date(timestamp);
+    const diffMs = now.getTime() - updated.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return 'Just now';
+    if (diffMins < 60) return `${diffMins} min ago`;
+    if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
+    if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
+    return formatDateTime(timestamp);
+  } catch {
+    return 'Unknown';
+  }
+}
+
+export function ProfilePage() {
+  const instance = usePiralInstance();
+  const pb = React.useMemo(
+    () => (instance as unknown as { root?: { pocketbase?: { authStore: { model: unknown } } } })?.root?.pocketbase,
+    [instance]
+  );
+
+  const userFromState = useGlobalState((s) => (s as { user?: { id?: string; mail?: string; firstName?: string; lastName?: string } }).user);
+  const [profileUser, setProfileUser] = React.useState<ProfileUser | null>(null);
+  const [profileLoading, setProfileLoading] = React.useState(true);
+
+  const { permissions, permissionsByCollection, loading: permissionsLoading } = usePermissions({
+    fetchAll: true,
+  });
+  const can = useCan();
+
+  React.useEffect(() => {
+    if (!pb || !userFromState?.id) {
+      setProfileUser(null);
+      setProfileLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+
+    async function fetchProfile() {
+      try {
+        const record = await pb.collection('users').getOne(userFromState.id, {
+          expand: 'role',
+          $autoCancel: false,
+        });
+        if (cancelled) return;
+
+        const roleId = Array.isArray(record.role) ? record.role[0] : record.role;
+        const expandedRole = record.expand?.role;
+        const roleName = (Array.isArray(expandedRole) ? expandedRole[0]?.name : expandedRole?.name) ?? 'No role';
+
+        const name =
+          record.name ||
+          [record.firstName, record.lastName].filter(Boolean).join(' ').trim() ||
+          record.email ||
+          'Unknown';
+
+        setProfileUser({
+          id: record.id,
+          name,
+          email: record.email ?? '',
+          avatar: record.avatar,
+          roleName: record.is_superuser ? 'Superuser' : roleName,
+          is_superuser: record.is_superuser ?? false,
+          isActive: record.isActive !== false,
+          created: record.created,
+          updated: record.updated,
+          verified: record.verified === true,
+        });
+      } catch (err) {
+        if (!cancelled) {
+          console.error('[ProfilePage] Error fetching profile:', err);
+          setProfileUser({
+            id: userFromState.id,
+            name: [userFromState.firstName, userFromState.lastName].filter(Boolean).join(' ').trim() || userFromState.mail || 'Unknown',
+            email: userFromState.mail ?? '',
+            roleName: 'Unknown',
+            is_superuser: false,
+            isActive: true,
+            verified: false,
+          });
+        }
+      } finally {
+        if (!cancelled) setProfileLoading(false);
+      }
+    }
+
+    fetchProfile();
+    return () => {
+      cancelled = true;
+    };
+  }, [pb, userFromState?.id, userFromState?.firstName, userFromState?.lastName, userFromState?.mail]);
+
+  const isSuperuser = profileUser?.is_superuser === true;
+  const loading = profileLoading || permissionsLoading;
+
+  const collections = React.useMemo(() => {
+    const cols = Object.keys(permissionsByCollection).sort();
+    return cols;
+  }, [permissionsByCollection]);
+
+  if (loading && !profileUser) {
+    return <Loading message="Loading profile..." fullPage={false} />;
+  }
+
+  return (
+    <div className="space-y-6 max-w-4xl mx-auto">
+      {/* Superuser Banner */}
+      {isSuperuser && (
+        <div className="rounded-lg border border-amber-500/50 bg-gradient-to-r from-amber-500/20 to-yellow-500/20 p-4 flex items-center gap-3">
+          <div className="w-10 h-10 rounded-full bg-amber-500/30 flex items-center justify-center">
+            <Shield className="w-5 h-5 text-amber-600 dark:text-amber-400" />
+          </div>
+          <div>
+            <h3 className="font-semibold text-amber-900 dark:text-amber-100">
+              Superuser Account
+            </h3>
+            <p className="text-sm text-amber-800 dark:text-amber-200">
+              All permissions granted. You have full access to all system resources.
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* User Information Card */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-4">
+            {profileUser?.avatar ? (
+              <img
+                src={profileUser.avatar}
+                alt={profileUser.name}
+                className="w-16 h-16 rounded-full object-cover"
+              />
+            ) : (
+              <div className="w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-xl font-semibold">
+                {profileUser?.name
+                  ? profileUser.name
+                      .split(' ')
+                      .map((n) => n[0])
+                      .join('')
+                      .toUpperCase()
+                      .slice(0, 2)
+                  : 'U'}
+              </div>
+            )}
+            <div>
+              <CardTitle>{profileUser?.name ?? 'User'}</CardTitle>
+              <CardDescription>{profileUser?.email}</CardDescription>
+              <div className="flex items-center gap-2 mt-2">
+                <Badge variant="default">{profileUser?.roleName ?? 'Unknown'}</Badge>
+                <Badge variant={profileUser?.isActive ? 'success' : 'destructive'}>
+                  {profileUser?.isActive ? 'Active' : 'Inactive'}
+                </Badge>
+                {profileUser?.verified && (
+                  <Badge variant="success" className="gap-1">
+                    <Mail className="w-3 h-3" />
+                    Verified
+                  </Badge>
+                )}
+              </div>
+            </div>
+          </div>
+        </CardHeader>
+      </Card>
+
+      {/* Account Details - typical SaaS profile info */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <User className="w-5 h-5" />
+            Account Details
+          </CardTitle>
+          <CardDescription>
+            Your account information and security status
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <dl className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div className="flex items-start gap-3 p-3 rounded-lg bg-muted/50">
+              <Hash className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
+              <div>
+                <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">User ID</dt>
+                <dd className="text-sm font-mono mt-0.5 break-all">{profileUser?.id ?? '—'}</dd>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-3 rounded-lg bg-muted/50">
+              <Mail className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
+              <div>
+                <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Email</dt>
+                <dd className="text-sm mt-0.5">{profileUser?.email ?? '—'}</dd>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-3 rounded-lg bg-muted/50">
+              <Calendar className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
+              <div>
+                <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Member since</dt>
+                <dd className="text-sm mt-0.5">
+                  {profileUser?.created ? formatDate(profileUser.created) : '—'}
+                </dd>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-3 rounded-lg bg-muted/50">
+              <Clock className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
+              <div>
+                <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Last active</dt>
+                <dd className="text-sm mt-0.5">
+                  {profileUser?.updated ? formatLastActive(profileUser.updated) : '—'}
+                </dd>
+              </div>
+            </div>
+          </dl>
+        </CardContent>
+      </Card>
+
+      {/* Permissions List */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Permissions</CardTitle>
+          <CardDescription>
+            Your assigned permissions across all collections. Check marks indicate granted access.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {collections.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No permissions defined.</p>
+          ) : (
+            <div className="space-y-6">
+              {collections.map((collection) => {
+                const perms = permissionsByCollection[collection] ?? [];
+                return (
+                  <div key={collection}>
+                    <h4 className="text-sm font-medium text-muted-foreground capitalize mb-2">
+                      {collection}
+                    </h4>
+                    <div className="space-y-2">
+                      {perms.map((perm) => {
+                        const allowed = can(perm.action, perm.collection);
+                        return (
+                          <div
+                            key={perm.id}
+                            className="flex items-center justify-between py-2 px-3 rounded-lg bg-muted/50"
+                          >
+                            <div className="flex items-center gap-3">
+                              {allowed ? (
+                                <Check className="w-4 h-4 text-green-600 dark:text-green-400 flex-shrink-0" />
+                              ) : (
+                                <X className="w-4 h-4 text-red-500 dark:text-red-400 flex-shrink-0" />
+                              )}
+                              <span className="text-sm font-medium capitalize">
+                                {perm.action} {perm.collection}
+                              </span>
+                              {perm.description && (
+                                <span className="text-xs text-muted-foreground">
+                                  — {perm.description}
+                                </span>
+                              )}
+                            </div>
+                            <Badge variant={allowed ? 'success' : 'destructive'}>
+                              {allowed ? 'Granted' : 'Denied'}
+                            </Badge>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/pages/SettingsPage.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  ThemeToggle,
+} from '@lego-box/ui-kit';
+import { Palette, Bell, Globe } from 'lucide-react';
+
+export function SettingsPage() {
+  return (
+    <div className="space-y-6">
+      <div className="page-header">
+        <div className="page-header-left">
+          <h1 className="text-2xl font-bold text-foreground">Settings</h1>
+          <p className="text-sm text-muted-foreground mt-1">
+            Manage your application preferences
+          </p>
+        </div>
+      </div>
+
+      {/* Appearance */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+              <Palette className="h-5 w-5 text-primary" />
+            </div>
+            <div>
+              <CardTitle>Appearance</CardTitle>
+              <CardDescription>
+                Customize how the application looks
+              </CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-between rounded-lg border border-border p-4">
+            <div>
+              <p className="font-medium text-foreground">Theme</p>
+              <p className="text-sm text-muted-foreground">
+                Choose between light and dark mode
+              </p>
+            </div>
+            <ThemeToggle />
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Notifications (placeholder) */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+              <Bell className="h-5 w-5 text-primary" />
+            </div>
+            <div>
+              <CardTitle>Notifications</CardTitle>
+              <CardDescription>
+                Configure how you receive notifications
+              </CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="rounded-lg border border-border p-4">
+            <p className="text-sm text-muted-foreground">
+              Notification preferences are coming soon.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Language (placeholder) */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+              <Globe className="h-5 w-5 text-primary" />
+            </div>
+            <div>
+              <CardTitle>Language & Region</CardTitle>
+              <CardDescription>
+                Set your preferred language and region
+              </CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="rounded-lg border border-border p-4">
+            <p className="text-sm text-muted-foreground">
+              Language and region settings are coming soon.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/pages/SystemHealthCheckPage.tsx

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import {
+  HealthStatusCard,
+  ServiceStatusCard,
+  Button,
+} from '@lego-box/ui-kit';
+import { useGlobalStateContext } from 'piral';
+
+type ServiceStatus = 'operational' | 'degraded' | 'down' | 'checking';
+
+interface ServiceHealth {
+  name: string;
+  description: string;
+  status: ServiceStatus;
+  responseTime?: number;
+  details?: string;
+  lastChecked?: string;
+}
+
+type OverallHealthStatus = 'healthy' | 'degraded' | 'unhealthy' | 'checking';
+
+export function SystemHealthCheckPage() {
+  const ctx = useGlobalStateContext();
+
+  const [isRefreshing, setIsRefreshing] = React.useState(false);
+  const [lastCheckTime, setLastCheckTime] = React.useState<Date | null>(null);
+  
+  const [overallHealth, setOverallHealth] = React.useState<{
+    status: OverallHealthStatus;
+    percentage: number;
+  }>({ status: 'checking', percentage: 0 });
+
+  const [piralHealth, setPiralHealth] = React.useState<ServiceHealth>({ name: 'Piral Shell', description: 'Microfrontend orchestration', status: 'checking' });
+  const [pocketbaseHealth, setPocketbaseHealth] = React.useState<ServiceHealth>({ name: 'PocketBase', description: 'Backend database and auth', status: 'checking' });
+
+  const checkPiralHealth = React.useCallback(async (): Promise<ServiceHealth> => {
+    const startTime = performance.now();
+    try {
+      if (!ctx || !ctx.navigation) {
+        return { name: 'Piral Shell', description: 'Microfrontend orchestration', status: 'degraded', details: 'Piral context not fully available', lastChecked: new Date().toLocaleString() };
+      }
+      return { name: 'Piral Shell', description: 'Microfrontend orchestration', status: 'operational', responseTime: Math.round(performance.now() - startTime), details: 'Piral shell is running normally', lastChecked: new Date().toLocaleString() };
+    } catch (error) {
+      return { name: 'Piral Shell', description: 'Microfrontend orchestration', status: 'down', details: `Error: ${error instanceof Error ? error.message : 'Unknown error'}`, lastChecked: new Date().toLocaleString() };
+    }
+  }, [ctx]);
+
+  const checkPocketbaseHealth = React.useCallback(async (): Promise<ServiceHealth> => {
+    const startTime = performance.now();
+    const pocketbaseUrl = 'http://localhost:8090';
+    try {
+      const response = await fetch(`${pocketbaseUrl}/api/health`);
+      const responseTime = Math.round(performance.now() - startTime);
+      if (response.ok) {
+        return { name: 'PocketBase', description: 'Backend database and auth', status: 'operational', responseTime, details: 'PocketBase is running normally', lastChecked: new Date().toLocaleString() };
+      }
+      return { name: 'PocketBase', description: 'Backend database and auth', status: 'down', responseTime, details: `HTTP ${response.status}: ${response.statusText}`, lastChecked: new Date().toLocaleString() };
+    } catch (error) {
+      return { name: 'PocketBase', description: 'Backend database and auth', status: 'down', details: `Connection failed: ${error instanceof Error ? error.message : 'Server unreachable'}`, lastChecked: new Date().toLocaleString() };
+    }
+  }, []);
+
+  const calculateOverallHealth = React.useCallback((piral: ServiceHealth, pocketbase: ServiceHealth) => {
+    const services = [piral, pocketbase];
+    const operational = services.filter(s => s.status === 'operational').length;
+    const degraded = services.filter(s => s.status === 'degraded').length;
+    let status: OverallHealthStatus = 'checking';
+    let percentage = 0;
+
+    if (operational === services.length) {
+      status = 'healthy';
+      percentage = 100;
+    } else if (degraded > 0) {
+      status = 'degraded';
+      percentage = 50;
+    } else {
+      status = 'unhealthy';
+      percentage = 0;
+    }
+    
+    return { status, percentage };
+  }, []);
+
+  const runHealthChecks = React.useCallback(async () => {
+    setIsRefreshing(true);
+    setOverallHealth(prev => ({ ...prev, status: 'checking' }));
+    setPiralHealth(prev => ({ ...prev, status: 'checking' }));
+    setPocketbaseHealth(prev => ({ ...prev, status: 'checking' }));
+
+    const [piralResult, pocketbaseResult] = await Promise.all([checkPiralHealth(), checkPocketbaseHealth()]);
+
+    setPiralHealth(piralResult);
+    setPocketbaseHealth(pocketbaseResult);
+    setOverallHealth(calculateOverallHealth(piralResult, pocketbaseResult));
+    setLastCheckTime(new Date());
+    setIsRefreshing(false);
+  }, [checkPiralHealth, checkPocketbaseHealth, calculateOverallHealth]);
+
+  React.useEffect(() => { runHealthChecks(); }, [runHealthChecks]);
+  React.useEffect(() => {
+    const interval = setInterval(() => { runHealthChecks(); }, 30000);
+    return () => clearInterval(interval);
+  }, [runHealthChecks]);
+
+  const formatLastCheck = () => {
+    if (!lastCheckTime) return 'Never';
+    const diff = Math.floor((Date.now() - lastCheckTime.getTime()) / 1000);
+    if (diff < 60) return 'Just now';
+    return lastCheckTime.toLocaleString();
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="page-header">
+        <div className="page-header-left">
+          <h1 className="text-2xl font-bold text-foreground">System Health</h1>
+          <p className="text-sm text-muted-foreground mt-1">Monitor platform health and services status</p>
+        </div>
+        <div className="page-header-right">
+          <Button variant="outline" onClick={runHealthChecks} disabled={isRefreshing}>Refresh</Button>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2 text-sm">
+        <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+        <span className="text-emerald-600 dark:text-emerald-400">Monitoring active</span>
+        <div className="w-px h-4 bg-border mx-2" />
+        <span className="text-muted-foreground">Last checked: {formatLastCheck()}</span>
+      </div>
+
+      <div className="grid gap-6">
+        <HealthStatusCard
+          status={overallHealth.status}
+          percentage={overallHealth.percentage}
+          lastCheck={lastCheckTime?.toLocaleString()}
+        />
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          <ServiceStatusCard {...piralHealth} icon={<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>} />
+          <ServiceStatusCard {...pocketbaseHealth} icon={<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" /></svg>} />
+        </div>
+      </div>
+    </div>
+  );
+}