create-lego-one 2.0.12 → 2.0.14

package/template/docs/framework/plans/09-dashboard-plugin.md

@@ -0,0 +1,1137 @@
+# Dashboard Plugin Implementation Plan
+
+> **For AI Implementing This Plan:** This is document 09 of 13. Complete documents 01-08 first.
+
+**Goal:** Implement the Dashboard plugin with organization stats, recent activity, quick actions, and slot injection examples demonstrating the plugin system.
+
+**Architecture:** Dashboard plugin is a Modern.js app registered as a Garfish sub-app. It fetches stats from PocketBase, displays widgets, and demonstrates slot injection by adding items to host layout.
+
+**Tech Stack:** Modern.js, React, TypeScript, TanStack Query, PocketBase, Tailwind CSS
+
+---
+
+## Prerequisites
+
+- ✅ Completed `01-infrastructure-setup.md`
+- ✅ Completed `02-pocketbase-setup.md` (audit_logs collection)
+- ✅ Completed `03-host-kernel.md` through `08-plugin-system.md`
+
+---
+
+## Task 1: Create Dashboard Plugin Structure
+
+**Files:**
+- Create: `packages/plugins/@lego/plugin-dashboard/package.json`
+- Create: `packages/plugins/@lego/plugin-dashboard/tsconfig.json`
+- Create: `packages/plugins/@lego/plugin-dashboard/modern.config.ts`
+- Create: `packages/plugins/@lego/plugin-dashboard/.gitignore`
+
+### Step 1: Create package.json
+
+**File:** `packages/plugins/@lego/plugin-dashboard/package.json`
+
+```json
+{
+  "name": "@lego/plugin-dashboard",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "modern dev",
+    "build": "modern build",
+    "start": "modern start",
+    "lint": "eslint src --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@garfish/hooks": "^1.22.0",
+    "@garfish/router": "^1.22.0",
+    "@garfish/react-scope": "^1.22.0",
+    "@modern-js/runtime": "^2.60.0",
+    "@modern-js/runtime/garfish": "^2.60.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@tanstack/react-query": "^5.59.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.454.0",
+    "pocketbase": "^0.21.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwind-merge": "^2.5.4"
+  },
+  "devDependencies": {
+    "@modern-js/app-tools": "^2.60.0",
+    "@modern-js/plugin-garfish": "^2.60.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5.6.3"
+  }
+}
+```
+
+### Step 2: Create tsconfig.json
+
+**File:** `packages/plugins/@lego/plugin-dashboard/tsconfig.json`
+
+```json
+{
+  "extends": "@modern-js/tsconfig/base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}
+```
+
+### Step 3: Create modern.config.ts
+
+**File:** `packages/plugins/@lego/plugin-dashboard/modern.config.ts`
+
+```typescript
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { garfishPlugin } from '@modern-js/plugin-garfish';
+
+export default defineConfig({
+  dev: {
+    port: 3001,
+  },
+
+  runtime: {
+    router: true,
+  },
+
+  // Mark as micro-frontend sub-app
+  deploy: {
+    microFrontend: true,
+  },
+
+  plugins: [appTools(), garfishPlugin()],
+});
+```
+
+### Step 4: Create .gitignore
+
+**File:** `packages/plugins/@lego/plugin-dashboard/.gitignore`
+
+```
+node_modules/
+dist/
+.modern/
+*.local
+.DS_Store
+```
+
+### Step 5: Install dependencies
+
+**Run:** From root directory
+
+```bash
+pnpm install
+```
+
+---
+
+## Task 2: Create Plugin Configuration
+
+**Files:**
+- Create: `packages/plugins/@lego/plugin-dashboard/src/plugin.config.ts`
+- Create: `packages/plugins/@lego/plugin-dashboard/src/plugin.ts`
+
+### Step 1: Create plugin config
+
+**File:** `packages/plugins/@lego/plugin-dashboard/src/plugin.config.ts`
+
+```typescript
+import type { PluginConfig } from '@lego/kernel/plugins';
+
+import { SidebarWidget } from './components/SidebarWidget';
+import { QuickActionSlot } from './components/QuickActionSlot';
+
+/**
+ * Dashboard plugin configuration
+ *
+ * This config defines:
+ * - Plugin metadata (manifest)
+ * - Slot injections (content injected into host layout)
+ * - Routes (plugin pages)
+ * - Settings (configurable by admin)
+ */
+export const pluginConfig: PluginConfig = {
+  manifest: {
+    name: '@lego/plugin-dashboard',
+    version: '1.0.0',
+    displayName: 'Dashboard',
+    description: 'Organization dashboard with stats, activity, and quick actions',
+    author: 'Lego-One',
+    permissions: ['organizations.read', 'audit_logs.read'],
+  },
+
+  enabled: true,
+
+  // Slot injections - add content to host layout
+  slots: [
+    {
+      slot: 'sidebar:nav',
+      component: SidebarWidget,
+      order: 50, // After Home, before Todos
+      props: {
+        to: '/dashboard',
+        icon: 'LayoutDashboard',
+        label: 'Dashboard',
+      },
+    },
+    {
+      slot: 'dashboard:widgets',
+      component: QuickActionSlot,
+      order: 100,
+    },
+  ],
+
+  // Plugin routes
+  routes: [
+    {
+      path: '/dashboard',
+      component: () => import('./pages/DashboardPage').then(m => m.default),
+      protected: true,
+      permissions: ['organizations.read'],
+    },
+  ],
+
+  // Plugin settings (shown in admin UI)
+  settings: [
+    {
+      key: 'showStats',
+      type: 'boolean',
+      label: 'Show Statistics',
+      description: 'Display organization statistics on dashboard',
+      defaultValue: true,
+    },
+    {
+      key: 'showActivity',
+      type: 'boolean',
+      label: 'Show Recent Activity',
+      description: 'Display recent activity feed',
+      defaultValue: true,
+    },
+    {
+      key: 'activityLimit',
+      type: 'number',
+      label: 'Activity Feed Limit',
+      description: 'Number of activity items to show',
+      defaultValue: 10,
+    },
+  ],
+};
+```
+
+### Step 2: Create plugin entry point
+
+**File:** `packages/plugins/@lego/plugin-dashboard/src/plugin.ts`
+
+```typescript
+/**
+ * Plugin entry point
+ *
+ * This file is the main entry point for the Dashboard plugin.
+ * It exports the plugin config and the root component.
+ */
+
+import { pluginConfig } from './plugin.config';
+import DashboardApp from './App';
+
+export default {
+  config: pluginConfig,
+  App: DashboardApp,
+};
+
+// Also export for convenience
+export { pluginConfig };
+export { default as App } from './App';
+```
+
+---
+
+## Task 3: Create Plugin App Component
+
+**Files:**
+- Create: `packages/plugins/@lego/plugin-dashboard/src/App.tsx`
+- Create: `packages/plugins/@lego/plugin-dashboard/src/global.css`
+
+### Step 1: Create root app component
+
+**File:** `packages/plugins/@lego/plugin-dashboard/src/App.tsx`
+
+```typescript
+import { useEffect } from 'react';
+import { useChannelIntegration } from './hooks/useChannelIntegration';
+import './global.css';
+
+interface DashboardAppProps {
+  basename?: string; // Provided by Garfish
+}
+
+/**
+ * Dashboard Plugin App Component
+ *
+ * This is the root component of the Dashboard plugin.
+ * It handles:
+ * - Channel integration (notify host when ready)
+ * - Rendering the appropriate route
+ */
+export default function DashboardApp({ basename }: DashboardAppProps) {
+  // Notify host that plugin is ready
+  useChannelIntegration();
+
+  return (
+    <div className="dashboard-plugin">
+      {/* Routes are handled by host via activeWhen */}
+      {/* The host renders this component at /dashboard */}
+    </div>
+  );
+}
+```
+
+### Step 2: Create global CSS
+
+**File:** `packages/plugins/@lego/plugin-dashboard/src/global.css`
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+```
+
+---
+
+## Task 4: Create Dashboard Page
+
+**Files:**
+- Create: `packages/plugins/@lego/plugin-dashboard/src/pages/DashboardPage.tsx`
+- Create: `packages/plugins/@lego/plugin-dashboard/src/hooks/useChannelIntegration.ts`
+
+### Step 1: Create dashboard page
+
+**File:** `packages/plugins/@lego/plugin-dashboard/src/pages/DashboardPage.tsx`
+
+```typescript
+import { useEffect } from 'react';
+import { useDashboardStats } from '../hooks/useDashboardStats';
+import { useRecentActivity } from '../hooks/useRecentActivity';
+import { StatCard } from '../components/StatCard';
+import { ActivityFeed } from '../components/ActivityFeed';
+import { QuickActions } from '../components/QuickActions';
+import { usePluginReady, useToastChannel } from '@lego/kernel/channels';
+
+/**
+ * Dashboard Page
+ *
+ * Main dashboard page showing:
+ * - Organization statistics
+ * - Recent activity feed
+ * - Quick action buttons
+ */
+export default function DashboardPage() {
+  const { data: stats, isLoading: statsLoading } = useDashboardStats();
+  const { data: activities, isLoading: activityLoading } = useRecentActivity();
+  const publishToast = useToastChannel();
+
+  // Notify that plugin is ready
+  usePluginReady('@lego/plugin-dashboard', '1.0.0');
+
+  useEffect(() => {
+    if (stats) {
+      console.log('[Dashboard] Stats loaded:', stats);
+    }
+  }, [stats]);
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
+        <p className="text-muted-foreground">
+          Welcome to your organization dashboard
+        </p>
+      </div>
+
+      {/* Statistics Grid */}
+      {statsLoading ? (
+        <div className="grid gap-4 md:grid-cols-3">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="h-32 animate-pulse rounded-lg bg-muted" />
+          ))}
+        </div>
+      ) : stats ? (
+        <div className="grid gap-4 md:grid-cols-3">
+          <StatCard
+            title="Total Users"
+            value={stats.totalUsers}
+            icon="Users"
+            description="Active users in organization"
+            trend={{ value: 12, direction: 'up' }}
+          />
+          <StatCard
+            title="Active Todos"
+            value={stats.activeTodos}
+            icon="CheckSquare"
+            description="Tasks in progress"
+            trend={{ value: 8, direction: 'up' }}
+          />
+          <StatCard
+            title="Completed Todos"
+            value={stats.completedTodos}
+            icon="CheckCircle"
+            description="Tasks completed"
+            trend={{ value: 5, direction: 'down' }}
+          />
+        </div>
+      ) : null}
+
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* Quick Actions */}
+        <QuickActions onToast={publishToast} />
+
+        {/* Recent Activity */}
+        {activityLoading ? (
+          <div className="space-y-4">
+            {[1, 2, 3, 4, 5].map((i) => (
+              <div key={i} className="h-16 animate-pulse rounded-lg bg-muted" />
+            ))}
+          </div>
+        ) : (
+          <ActivityFeed activities={activities || []} />
+        )}
+      </div>
+    </div>
+  );
+}
+```
+
+### Step 2: Create channel integration hook
+
+**File:** `packages/plugins/@lego/plugin-dashboard/src/hooks/useChannelIntegration.ts`
+
+```typescript
+import { useEffect } from 'react';
+import { usePluginReady } from '@lego/kernel/channels';
+import { useAuthChannel, useOrganizationChannel } from '@lego/kernel/channels';
+
+/**
+ * Hook for integrating with host channels
+ *
+ * This handles:
+ * - Notifying host when plugin is ready
+ * - Listening for auth changes
+ * - Listening for organization changes
+ */
+export function useChannelIntegration() {
+  // Notify host that plugin is ready
+  usePluginReady('@lego/plugin-dashboard', '1.0.0');
+
+  // Listen for auth changes
+  useAuthChannel((data) => {
+    console.log('[Dashboard] Auth changed:', data);
+
+    if (!data.isAuthenticated) {
+      // Clear plugin data when logged out
+      console.log('[Dashboard] Clearing data due to logout');
+    }
+  });
+
+  // Listen for organization changes
+  useOrganizationChannel((data) => {
+    console.log('[Dashboard] Organization changed:', data);
+
+    // Refresh dashboard data for new organization
+    // This will trigger a refetch via TanStack Query's invalidation
+  });
+}
+```
+
+---
+
+## Task 5: Create Dashboard Hooks
+
+**Files:**
+- Create: `packages/plugins/@lego/plugin-dashboard/src/hooks/useDashboardStats.ts`
+- Create: `packages/plugins/@lego/plugin-dashboard/src/hooks/useRecentActivity.ts`
+- Create: `packages/plugins/@lego/plugin-dashboard/src/hooks/usePocketBase.ts`
+
+### Step 1: Create PocketBase hook
+
+**File:** `packages/plugins/@lego/plugin-dashboard/src/hooks/usePocketBase.ts`
+
+```typescript
+import { useEffect, useState } from 'react';
+
+/**
+ * Get PocketBase instance from host
+ *
+ * Plugins access PocketBase through the window bridge
+ * that was set up by the host's shared state system
+ */
+export function usePocketBase() {
+  const [pb, setPb] = useState<any>(null);
+
+  useEffect(() => {
+    // Access PocketBase from host's state bridge
+    const kernelState = (window as any).__LEGO_KERNEL_STATE__;
+
+    if (!kernelState) {
+      console.error('[Dashboard] Kernel state bridge not found');
+      return;
+    }
+
+    // Get PocketBase client (host should expose this)
+    // For now, we'll create a new instance pointing to the same URL
+    const pbUrl = import.meta.env.VITE_POCKETBASE_URL || 'http://127.0.0.1:8090';
+    const PocketBase = require('pocketbase').default;
+    const client = new PocketBase(pbUrl);
+
+    // Get auth token from host state
+    const state = kernelState.useGlobalKernelState.getState();
+    if (state.token) {
+      client.authStore.save(state.token, null);
+    }
+
+    // Listen for token changes
+    const unsubscribe = kernelState.useGlobalKernelState.subscribe((newState: any) => {
+      if (newState.token && newState.token !== client.authStore.token) {
+        client.authStore.save(newState.token, null);
+      }
+    });
+
+    setPb(client);
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  return pb;
+}
+```
+
+### Step 2: Create dashboard stats hook
+
+**File:** `packages/plugins/@lego/plugin-dashboard/src/hooks/useDashboardStats.ts`
+
+```typescript
+import { useQuery } from '@tanstack/react-query';
+import { usePocketBase } from './usePocketBase';
+
+interface DashboardStats {
+  totalUsers: number;
+  activeTodos: number;
+  completedTodos: number;
+}
+
+/**
+ * Fetch dashboard statistics
+ */
+export function useDashboardStats() {
+  const pb = usePocketBase();
+
+  return useQuery({
+    queryKey: ['dashboard', 'stats'],
+    queryFn: async (): Promise<DashboardStats> => {
+      if (!pb) {
+        throw new Error('PocketBase not initialized');
+      }
+
+      // Get current organization from host state
+      const kernelState = (window as any).__LEGO_KERNEL_STATE__;
+      const state = kernelState?.useGlobalKernelState?.getState();
+
+      if (!state?.organization?.id) {
+        throw new Error('No organization selected');
+      }
+
+      const orgId = state.organization.id;
+
+      // Fetch stats in parallel
+      const [usersResult, todosResult] = await Promise.all([
+        // Get users count (simplified - in production use proper aggregation)
+        pb.collection('user_roles').getList(1, 1, {
+          filter: `organizationId = "${orgId}"`,
+          requestKey: `users-count-${orgId}`,
+        }).then(() => {
+          // For simplicity, return a mock count
+          // In production, you'd use PocketBase's aggregate features
+          return Math.floor(Math.random() * 50) + 10;
+        }),
+
+        // Get active todos count
+        pb.collection('todos').getList(1, 1, {
+          filter: `organizationId = "${orgId}" && completed = false`,
+        }).then((result: any) => result.totalItems),
+
+        // Get completed todos count
+        pb.collection('todos').getList(1, 1, {
+          filter: `organizationId = "${orgId}" && completed = true`,
+        }).then((result: any) => result.totalItems),
+      ]);
+
+      return {
+        totalUsers: usersResult as number,
+        activeTodos: todosResult[0] as number,
+        completedTodos: todosResult[1] as number,
+      };
+    },
+    enabled: !!pb,
+    refetchInterval: 60000, // Refresh every minute
+  });
+}
+```
+
+### Step 3: Create recent activity hook
+
+**File:** `packages/plugins/@lego/plugin-dashboard/src/hooks/useRecentActivity.ts`
+
+```typescript
+import { useQuery } from '@tanstack/react-query';
+import { usePocketBase } from './usePocketBase';
+
+interface Activity {
+  id: string;
+  action: string;
+  resource: string;
+  userId: string;
+  userName?: string;
+  createdAt: string;
+}
+
+/**
+ * Fetch recent activity feed
+ */
+export function useRecentActivity(limit = 10) {
+  const pb = usePocketBase();
+
+  return useQuery({
+    queryKey: ['dashboard', 'activity', limit],
+    queryFn: async (): Promise<Activity[]> => {
+      if (!pb) {
+        throw new Error('PocketBase not initialized');
+      }
+
+      // Get current organization from host state
+      const kernelState = (window as any).__LEGO_KERNEL_STATE__;
+      const state = kernelState?.useGlobalKernelState?.getState();
+
+      if (!state?.organization?.id) {
+        return [];
+      }
+
+      const orgId = state.organization.id;
+
+      // Fetch recent audit logs
+      const result = await pb.collection('audit_logs').getList(1, limit, {
+        filter: `organizationId = "${orgId}"`,
+        sort: '-created',
+        expand: 'userId',
+      });
+
+      return result.items.map((item: any) => ({
+        id: item.id,
+        action: item.action,
+        resource: item.resource,
+        userId: item.userId,
+        userName: item.expand?.userId?.name || item.expand?.userId?.email || 'Unknown',
+        createdAt: item.created,
+      }));
+    },
+    enabled: !!pb,
+    refetchInterval: 30000, // Refresh every 30 seconds
+  });
+}
+```
+
+---
+
+## Task 6: Create Dashboard Components
+
+**Files:**
+- Create: `packages/plugins/@lego/plugin-dashboard/src/components/StatCard.tsx`
+- Create: `packages/plugins/@lego/plugin-dashboard/src/components/ActivityFeed.tsx`
+- Create: `packages/plugins/@lego/plugin-dashboard/src/components/QuickActions.tsx`
+- Create: `packages/plugins/@lego/plugin-dashboard/src/components/SidebarWidget.tsx`
+- Create: `packages/plugins/@lego/plugin-dashboard/src/components/QuickActionSlot.tsx`
+
+### Step 1: Create stat card component
+
+**File:** `packages/plugins/@lego/plugin-dashboard/src/components/StatCard.tsx`
+
+```typescript
+import { cn } from '@lego/kernel/lib/utils';
+import { LucideIcon } from 'lucide-react';
+
+interface StatCardProps {
+  title: string;
+  value: number;
+  icon: string;
+  description: string;
+  trend?: {
+    value: number;
+    direction: 'up' | 'down';
+  };
+}
+
+// Icon map - in production you'd use proper icon loading
+const iconMap: Record<string, LucideIcon> = {};
+
+export function StatCard({ title, value, icon, description, trend }: StatCardProps) {
+  // For now, use a simple icon fallback
+  const Icon = iconMap[icon] || ((props: any) => <div {...props} className="h-4 w-4" />);
+
+  return (
+    <div className="rounded-xl border bg-card p-6">
+      <div className="flex items-center justify-between">
+        <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+          <Icon className="h-6 w-6 text-primary" />
+        </div>
+        {trend && (
+          <div
+            className={cn(
+              'flex items-center gap-1 text-sm font-medium',
+              trend.direction === 'up' ? 'text-green-600' : 'text-red-600'
+            )}
+          >
+            <span>{trend.direction === 'up' ? '+' : '-'}</span>
+            <span>{trend.value}%</span>
+          </div>
+        )}
+      </div>
+      <div className="mt-4">
+        <div className="text-2xl font-bold">{value.toLocaleString()}</div>
+        <div className="text-sm text-muted-foreground">{title}</div>
+      </div>
+      <p className="mt-2 text-xs text-muted-foreground">{description}</p>
+    </div>
+  );
+}
+```
+
+### Step 2: Create activity feed component
+
+**File:** `packages/plugins/@lego/plugin-dashboard/src/components/ActivityFeed.tsx`
+
+```typescript
+import { Activity } from '../hooks/useRecentActivity';
+import { formatRelativeTime } from '@lego/kernel/lib/utils';
+import { User, Settings, CheckSquare, AlertCircle } from 'lucide-react';
+
+interface ActivityFeedProps {
+  activities: Activity[];
+}
+
+function getActivityIcon(action: string) {
+  if (action.includes('create')) return CheckSquare;
+  if (action.includes('delete')) return AlertCircle;
+  if (action.includes('update')) return Settings;
+  return User;
+}
+
+export function ActivityFeed({ activities }: ActivityFeedProps) {
+  return (
+    <div className="rounded-xl border bg-card p-6">
+      <h2 className="text-lg font-semibold">Recent Activity</h2>
+      <div className="mt-4 space-y-4">
+        {activities.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No recent activity</p>
+        ) : (
+          activities.map((activity) => {
+            const Icon = getActivityIcon(activity.action);
+            return (
+              <div key={activity.id} className="flex items-start gap-3">
+                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted">
+                  <Icon className="h-4 w-4 text-muted-foreground" />
+                </div>
+                <div className="flex-1 space-y-1">
+                  <p className="text-sm">
+                    <span className="font-medium">{activity.userName}</span>
+                    {' '}
+                    <span className="text-muted-foreground">
+                      {activity.action} {activity.resource}
+                    </span>
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {formatRelativeTime(activity.createdAt)}
+                  </p>
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}
+```
+
+### Step 3: Create quick actions component
+
+**File:** `packages/plugins/@lego/plugin-dashboard/src/components/QuickActions.tsx`
+
+```typescript
+import { Button } from '@lego/kernel/components';
+import { Plus, Users, CheckSquare, Settings } from 'lucide-react';
+
+interface QuickActionsProps {
+  onToast?: (data: { type: string; title: string; description?: string }) => void;
+}
+
+export function QuickActions({ onToast }: QuickActionsProps) {
+  const actions = [
+    {
+      icon: Plus,
+      label: 'New Todo',
+      description: 'Create a new todo item',
+      onClick: () => {
+        onToast?.({
+          type: 'info',
+          title: 'Quick Action',
+          description: 'Navigate to Todos to create a new item',
+        });
+      },
+    },
+    {
+      icon: Users,
+      label: 'Invite User',
+      description: 'Invite a team member',
+      onClick: () => {
+        onToast?.({
+          type: 'info',
+          title: 'Quick Action',
+          description: 'Navigate to Settings to invite users',
+        });
+      },
+    },
+    {
+      icon: Settings,
+      label: 'Settings',
+      description: 'Manage organization settings',
+      onClick: () => {
+        window.location.href = '/settings';
+      },
+    },
+  ];
+
+  return (
+    <div className="rounded-xl border bg-card p-6">
+      <h2 className="text-lg font-semibold">Quick Actions</h2>
+      <div className="mt-4 space-y-2">
+        {actions.map((action) => {
+          const Icon = action.icon;
+          return (
+            <button
+              key={action.label}
+              onClick={action.onClick}
+              className="flex w-full items-center gap-3 rounded-lg border border-transparent bg-muted/50 p-3 text-left hover:bg-muted hover:underline"
+            >
+              <div className="flex h-8 w-8 items-center justify-center rounded-md bg-background">
+                <Icon className="h-4 w-4" />
+              </div>
+              <div className="flex-1">
+                <div className="text-sm font-medium">{action.label}</div>
+                <div className="text-xs text-muted-foreground">{action.description}</div>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+```
+
+### Step 4: Create sidebar widget component
+
+**File:** `packages/plugins/@lego/plugin-dashboard/src/components/SidebarWidget.tsx`
+
+```typescript
+import { NavLink } from '@modern-js/runtime/router';
+import { cn } from '@lego/kernel/lib/utils';
+import { LayoutDashboard } from 'lucide-react';
+
+interface SidebarWidgetProps {
+  to: string;
+  icon: string;
+  label: string;
+}
+
+/**
+ * Sidebar Widget - Slot injection component
+ *
+ * This component is injected into the host's sidebar nav slot
+ * It demonstrates how plugins can add navigation items
+ */
+export function SidebarWidget({ to, label }: SidebarWidgetProps) {
+  return (
+    <NavLink
+      to={to}
+      end={to === '/'}
+      className={({ isActive }) =>
+        cn(
+          'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+          isActive
+            ? 'bg-primary text-primary-foreground'
+            : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+        )
+      }
+    >
+      <LayoutDashboard className="h-5 w-5" />
+      <span>{label}</span>
+    </NavLink>
+  );
+}
+```
+
+### Step 5: Create quick action slot component
+
+**File:** `packages/plugins/@lego/plugin-dashboard/src/components/QuickActionSlot.tsx`
+
+```typescript
+/**
+ * Quick Action Slot - Slot injection component
+ *
+ * This demonstrates how a plugin can inject a widget into
+ * the dashboard:widgets slot (if host has one)
+ */
+export function QuickActionSlot() {
+  // This would be rendered in a slot on the dashboard
+  // For now, it's a placeholder showing how slots work
+  return null;
+}
+```
+
+---
+
+## Task 7: Create Tailwind Config
+
+**Files:**
+- Create: `packages/plugins/@lego/plugin-dashboard/tailwind.config.ts`
+- Create: `packages/plugins/@lego/plugin-dashboard/postcss.config.js`
+
+### Step 1: Create Tailwind config
+
+**File:** `packages/plugins/@lego/plugin-dashboard/tailwind.config.ts`
+
+```typescript
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  darkMode: ['class'],
+  content: [
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;
+```
+
+### Step 2: Create PostCSS config
+
+**File:** `packages/plugins/@lego/plugin-dashboard/postcss.config.js`
+
+```javascript
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+```
+
+---
+
+## Task 8: Update Host Runtime Config
+
+**Files:**
+- Modify: `host/src/modern.runtime.ts`
+
+### Step 1: Add dashboard plugin to runtime config
+
+**File:** `host/src/modern.runtime.ts`
+
+Ensure the dashboard plugin is registered:
+
+```typescript
+import { defineRuntimeConfig } from '@modern-js/runtime';
+
+const isDev = import.meta.env.MODE === 'development';
+
+export default defineRuntimeConfig({
+  masterApp: {
+    apps: [
+      {
+        name: '@lego/plugin-dashboard',
+        entry: isDev
+          ? 'http://localhost:3001'
+          : () => import('@lego/plugin-dashboard'),
+        activeWhen: '/dashboard',
+      },
+      {
+        name: '@lego/plugin-todo',
+        entry: isDev
+          ? 'http://localhost:3002'
+          : () => import('@lego/plugin-todo'),
+        activeWhen: '/todos',
+      },
+    ],
+  },
+});
+```
+
+---
+
+## Verification
+
+### Step 1: Build the dashboard plugin
+
+**Run:**
+
+```bash
+cd packages/plugins/@lego/plugin-dashboard
+pnpm run build
+```
+
+Expected: Build completes without errors.
+
+### Step 2: Start dashboard plugin dev server
+
+**Run:**
+
+```bash
+cd packages/plugins/@lego/plugin-dashboard
+pnpm run dev
+```
+
+Expected: Server starts on http://localhost:3001
+
+### Step 3: Start host dev server (separate terminal)
+
+**Run:**
+
+```bash
+cd host
+pnpm run dev
+```
+
+Expected: Server starts on http://localhost:8080
+
+### Step 4: Test dashboard plugin
+
+1. Open http://localhost:8080
+2. Login with admin credentials
+3. Navigate to /dashboard
+4. Should see:
+   - Dashboard page with stats cards
+   - Recent activity feed
+   - Quick actions
+   - "Dashboard" link in sidebar (injected via slot)
+
+---
+
+## Summary
+
+After completing this document, you will have:
+
+1. ✅ Complete Dashboard plugin as Modern.js + Garfish sub-app
+2. ✅ Plugin configuration with slot injections
+3. ✅ Dashboard page with stats, activity, and quick actions
+4. ✅ Hooks for fetching data from PocketBase via host bridge
+5. ✅ Channel integration (notify host, listen for auth/org changes)
+6. ✅ Slot injection example (sidebar nav item)
+7. ✅ Independent dev server (:3001) for plugin development
+
+**Next:** `10-todo-plugin.md` - Implement the Todo plugin with full CRUD functionality.
+
+---
+
+## Files Created
+
+```
+packages/plugins/@lego/plugin-dashboard/
+├── package.json
+├── tsconfig.json
+├── modern.config.ts
+├── tailwind.config.ts
+├── postcss.config.js
+├── .gitignore
+└── src/
+    ├── global.css
+    ├── plugin.ts
+    ├── plugin.config.ts
+    ├── App.tsx
+    ├── pages/
+    │   └── DashboardPage.tsx
+    ├── components/
+    │   ├── StatCard.tsx
+    │   ├── ActivityFeed.tsx
+    │   ├── QuickActions.tsx
+    │   ├── SidebarWidget.tsx
+    │   └── QuickActionSlot.tsx
+    └── hooks/
+        ├── useChannelIntegration.ts
+        ├── useDashboardStats.ts
+        ├── useRecentActivity.ts
+        └── usePocketBase.ts
+```