spine-framework 0.1.0

package/.framework/src/pages/admin/DesignedPage.tsx

@@ -0,0 +1,491 @@
+/**
+ * @module src/pages/admin/DesignedPage
+ * @audience installer
+ * @layer frontend-page
+ * @stability testing
+ *
+ * A properly designed page with left navigation and content area.
+ * Demonstrates shadcn components in a real application context.
+ */
+
+import { useState } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../components/ui/card'
+import { Button } from '../../components/ui/button'
+import { Input } from '../../components/ui/input'
+import { Label } from '../../components/ui/label'
+import { Badge } from '../../components/ui/badge'
+import { 
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../components/ui/select'
+import { Checkbox } from '../../components/ui/checkbox'
+import { Switch } from '../../components/ui/switch'
+import { Separator } from '../../components/ui/separator'
+import { 
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '../../components/ui/dialog'
+import { 
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '../../components/ui/tabs'
+import { 
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '../../components/ui/accordion'
+import { Alert, AlertDescription, AlertTitle } from '../../components/ui/alert'
+import { 
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../components/ui/dropdown-menu'
+import { 
+  Plus,
+  Settings,
+  Users,
+  FileText,
+  BarChart3,
+  Bell,
+  Search,
+  Filter,
+  MoreHorizontal,
+  Download,
+  Edit,
+  Trash2,
+  Eye,
+  ChevronRight,
+  Home,
+  Database,
+  Shield,
+  Zap
+} from 'lucide-react'
+
+export function DesignedPage() {
+  const [selectedTab, setSelectedTab] = useState('overview')
+  const [searchQuery, setSearchQuery] = useState('')
+  const [notifications, setNotifications] = useState(true)
+  const [autoSave, setAutoSave] = useState(true)
+
+  return (
+    <div className="flex min-h-screen bg-background">
+      {/* Left Navigation */}
+      <div className="w-64 flex-shrink-0 border-r border-border bg-card">
+        <div className="flex h-16 items-center px-6 border-b border-border">
+          <div className="flex items-center gap-2">
+            <div className="h-8 w-8 rounded-lg bg-primary flex items-center justify-center">
+              <Zap className="h-4 w-4 text-primary-foreground" />
+            </div>
+            <span className="text-lg font-semibold">Spine</span>
+          </div>
+        </div>
+        
+        <nav className="p-4 space-y-2">
+          <div className="space-y-1">
+            <Button variant="ghost" className="w-full justify-start gap-2 text-primary bg-primary/10">
+              <Home className="h-4 w-4" />
+              Dashboard
+            </Button>
+            <Button variant="ghost" className="w-full justify-start gap-2">
+              <Database className="h-4 w-4" />
+              Data Management
+            </Button>
+            <Button variant="ghost" className="w-full justify-start gap-2">
+              <Users className="h-4 w-4" />
+              User Accounts
+            </Button>
+            <Button variant="ghost" className="w-full justify-start gap-2">
+              <Shield className="h-4 w-4" />
+              Security
+            </Button>
+            <Button variant="ghost" className="w-full justify-start gap-2">
+              <BarChart3 className="h-4 w-4" />
+              Analytics
+            </Button>
+            <Button variant="ghost" className="w-full justify-start gap-2">
+              <FileText className="h-4 w-4" />
+              Reports
+            </Button>
+            <Button variant="ghost" className="w-full justify-start gap-2">
+              <Settings className="h-4 w-4" />
+              Settings
+            </Button>
+          </div>
+          
+          <Separator className="my-4" />
+          
+          <div className="space-y-1">
+            <Button variant="ghost" className="w-full justify-start gap-2">
+              <Bell className="h-4 w-4" />
+              Notifications
+              <Badge variant="secondary" className="ml-auto">3</Badge>
+            </Button>
+            <Button variant="ghost" className="w-full justify-start gap-2">
+              <Plus className="h-4 w-4" />
+              New Project
+            </Button>
+          </div>
+        </nav>
+      </div>
+
+      {/* Main Content Area */}
+      <div className="flex-1 flex flex-col min-w-0">
+        {/* Header */}
+        <header className="h-16 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 flex-shrink-0">
+          <div className="flex h-16 items-center justify-between px-6">
+            <div className="flex items-center gap-4">
+              <h1 className="text-2xl font-semibold">Dashboard Overview</h1>
+              <Badge variant="outline">Production</Badge>
+            </div>
+            
+            <div className="flex items-center gap-4">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="Search..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-10 w-64"
+                />
+              </div>
+              
+              <Button variant="outline" size="sm">
+                <Filter className="h-4 w-4 mr-2" />
+                Filter
+              </Button>
+              
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline" size="sm">
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuLabel>Settings</DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                    <Edit className="h-4 w-4 mr-2" />
+                    Edit Profile
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <Bell className="h-4 w-4 mr-2" />
+                    Notifications
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>
+                    <Download className="h-4 w-4 mr-2" />
+                    Export Data
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </div>
+        </header>
+
+        {/* Page Content */}
+        <main className="flex-1 overflow-auto p-6">
+          <div className="max-w-7xl mx-auto space-y-6">
+            {/* Stats Cards */}
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="text-sm font-medium">Total Users</CardTitle>
+                  <Users className="h-4 w-4 text-muted-foreground" />
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold">2,847</div>
+                  <p className="text-xs text-muted-foreground">
+                    +12% from last month
+                  </p>
+                </CardContent>
+              </Card>
+              
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="text-sm font-medium">Active Projects</CardTitle>
+                  <FileText className="h-4 w-4 text-muted-foreground" />
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold">142</div>
+                  <p className="text-xs text-muted-foreground">
+                    +5% from last month
+                  </p>
+                </CardContent>
+              </Card>
+              
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="text-sm font-medium">Data Processed</CardTitle>
+                  <Database className="h-4 w-4 text-muted-foreground" />
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold">1.2M</div>
+                  <p className="text-xs text-muted-foreground">
+                    +18% from last month
+                  </p>
+                </CardContent>
+              </Card>
+              
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="text-sm font-medium">System Health</CardTitle>
+                  <Shield className="h-4 w-4 text-muted-foreground" />
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold">98.5%</div>
+                  <p className="text-xs text-muted-foreground">
+                    +0.5% from last month
+                  </p>
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* Main Content Tabs */}
+            <Tabs value={selectedTab} onValueChange={setSelectedTab} className="space-y-4">
+              <TabsList className="grid w-full grid-cols-4">
+                <TabsTrigger value="overview">Overview</TabsTrigger>
+                <TabsTrigger value="analytics">Analytics</TabsTrigger>
+                <TabsTrigger value="reports">Reports</TabsTrigger>
+                <TabsTrigger value="settings">Settings</TabsTrigger>
+              </TabsList>
+              
+              <TabsContent value="overview" className="space-y-4">
+                <div className="grid gap-6 lg:grid-cols-3">
+                  {/* Recent Activity */}
+                  <Card className="lg:col-span-2">
+                    <CardHeader>
+                      <CardTitle>Recent Activity</CardTitle>
+                      <CardDescription>
+                        Latest system events and user actions
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="space-y-4">
+                        <div className="flex items-center gap-4 p-3 rounded-lg border border-border/50">
+                          <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
+                            <Users className="h-4 w-4 text-primary" />
+                          </div>
+                          <div className="flex-1">
+                            <p className="text-sm font-medium">New user registration</p>
+                            <p className="text-xs text-muted-foreground">John Doe joined 2 minutes ago</p>
+                          </div>
+                          <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                        </div>
+                        
+                        <div className="flex items-center gap-4 p-3 rounded-lg border border-border/50">
+                          <div className="h-8 w-8 rounded-full bg-secondary/10 flex items-center justify-center">
+                            <FileText className="h-4 w-4 text-secondary-foreground" />
+                          </div>
+                          <div className="flex-1">
+                            <p className="text-sm font-medium">Report generated</p>
+                            <p className="text-xs text-muted-foreground">Monthly analytics report completed</p>
+                          </div>
+                          <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                        </div>
+                        
+                        <div className="flex items-center gap-4 p-3 rounded-lg border border-border/50">
+                          <div className="h-8 w-8 rounded-full bg-destructive/10 flex items-center justify-center">
+                            <Alert className="h-4 w-4 text-destructive" />
+                          </div>
+                          <div className="flex-1">
+                            <p className="text-sm font-medium">System alert</p>
+                            <p className="text-xs text-muted-foreground">High memory usage detected</p>
+                          </div>
+                          <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                  
+                  {/* Quick Actions */}
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>Quick Actions</CardTitle>
+                      <CardDescription>
+                        Common tasks and shortcuts
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-3">
+                      <Button className="w-full justify-start gap-2">
+                        <Plus className="h-4 w-4" />
+                        Create New Project
+                      </Button>
+                      <Button variant="outline" className="w-full justify-start gap-2">
+                        <Users className="h-4 w-4" />
+                        Invite Team Member
+                      </Button>
+                      <Button variant="outline" className="w-full justify-start gap-2">
+                        <Download className="h-4 w-4" />
+                        Export Report
+                      </Button>
+                      <Button variant="outline" className="w-full justify-start gap-2">
+                        <Settings className="h-4 w-4" />
+                        System Settings
+                      </Button>
+                    </CardContent>
+                  </Card>
+                </div>
+              </TabsContent>
+              
+              <TabsContent value="analytics" className="space-y-4">
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Analytics Dashboard</CardTitle>
+                    <CardDescription>
+                      System performance and usage metrics
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="h-64 flex items-center justify-center border-2 border-dashed border-border rounded-lg">
+                      <div className="text-center">
+                        <BarChart3 className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+                        <p className="text-muted-foreground">Analytics charts would be displayed here</p>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </TabsContent>
+              
+              <TabsContent value="reports" className="space-y-4">
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Reports</CardTitle>
+                    <CardDescription>
+                      Generated reports and documentation
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-4">
+                      {[
+                        { name: 'Monthly Analytics', date: '2024-01-15', status: 'completed' },
+                        { name: 'User Activity Report', date: '2024-01-14', status: 'completed' },
+                        { name: 'System Performance', date: '2024-01-13', status: 'processing' },
+                      ].map((report, index) => (
+                        <div key={index} className="flex items-center justify-between p-3 border border-border/50 rounded-lg">
+                          <div className="flex items-center gap-3">
+                            <FileText className="h-4 w-4 text-muted-foreground" />
+                            <div>
+                              <p className="text-sm font-medium">{report.name}</p>
+                              <p className="text-xs text-muted-foreground">{report.date}</p>
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <Badge variant={report.status === 'completed' ? 'default' : 'secondary'}>
+                              {report.status}
+                            </Badge>
+                            <Button variant="ghost" size="sm">
+                              <Eye className="h-4 w-4" />
+                            </Button>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </CardContent>
+                </Card>
+              </TabsContent>
+              
+              <TabsContent value="settings" className="space-y-4">
+                <div className="grid gap-6 lg:grid-cols-2">
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>Preferences</CardTitle>
+                      <CardDescription>
+                        Customize your experience
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                      <div className="flex items-center justify-between">
+                        <div className="space-y-0.5">
+                          <Label htmlFor="notifications">Notifications</Label>
+                          <p className="text-sm text-muted-foreground">
+                            Receive system notifications
+                          </p>
+                        </div>
+                        <Switch
+                          id="notifications"
+                          checked={notifications}
+                          onCheckedChange={setNotifications}
+                        />
+                      </div>
+                      
+                      <div className="flex items-center justify-between">
+                        <div className="space-y-0.5">
+                          <Label htmlFor="autosave">Auto-save</Label>
+                          <p className="text-sm text-muted-foreground">
+                            Automatically save changes
+                          </p>
+                        </div>
+                        <Switch
+                          id="autosave"
+                          checked={autoSave}
+                          onCheckedChange={setAutoSave}
+                        />
+                      </div>
+                      
+                      <div className="space-y-2">
+                        <Label htmlFor="theme">Theme</Label>
+                        <Select>
+                          <SelectTrigger id="theme">
+                            <SelectValue placeholder="Select theme" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="light">Light</SelectItem>
+                            <SelectItem value="dark">Dark</SelectItem>
+                            <SelectItem value="system">System</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </CardContent>
+                  </Card>
+                  
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>Security</CardTitle>
+                      <CardDescription>
+                        Manage your security settings
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                      <Alert>
+                        <Shield className="h-4 w-4" />
+                        <AlertTitle>Two-factor authentication</AlertTitle>
+                        <AlertDescription>
+                          Add an extra layer of security to your account
+                        </AlertDescription>
+                      </Alert>
+                      
+                      <div className="space-y-2">
+                        <Label htmlFor="current-password">Current Password</Label>
+                        <Input id="current-password" type="password" />
+                      </div>
+                      
+                      <div className="space-y-2">
+                        <Label htmlFor="new-password">New Password</Label>
+                        <Input id="new-password" type="password" />
+                      </div>
+                      
+                      <Button className="w-full">Update Password</Button>
+                    </CardContent>
+                  </Card>
+                </div>
+              </TabsContent>
+            </Tabs>
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}