// ==========================================
// DASHBOARD SYSTEM ENUMS & MODELS
// ==========================================

enum DashboardType {
  SYSTEM    // Pre-defined, admin-editable only
  PERSONAL  // User-created, private
  SHARED    // User-created, shared with others
}

cd packages/database
npx prisma format
# Should complete without errors

cat prisma/schema.prisma | grep -A 5 "enum DashboardType"
# Should show SYSTEM, PERSONAL, SHARED

# Remove DashboardType enum from schema.prisma

packages/database/prisma/schema.prisma (DashboardType enum)

enum ShareType {
  USER        // Shared with specific user
  TEAM        // Shared with team members
  DEPARTMENT  // Shared with department
  COMPANY     // Shared company-wide
}

enum SharePermission {
  VIEW  // Can view only
  EDIT  // Can customize their copy
}

cd packages/database
npx prisma format
# Should complete without errors

cat prisma/schema.prisma | grep -A 6 "enum ShareType"
# Should show USER, TEAM, DEPARTMENT, COMPANY

cat prisma/schema.prisma | grep -A 4 "enum SharePermission"
# Should show VIEW, EDIT

# Remove ShareType and SharePermission enums from schema.prisma

packages/database/prisma/schema.prisma (ShareType, SharePermission enums)

model Dashboard {
  id          String        @id @default(cuid())
  tenantId    String
  name        String
  description String?
  type        DashboardType @default(PERSONAL)
  ownerId     String?       // null for SYSTEM dashboards
  config      Json          // { widgets: WidgetInstance[], layout: LayoutItem[], version: string }
  isDefault   Boolean       @default(false)
  createdAt   DateTime      @default(now())
  updatedAt   DateTime      @updatedAt
  deletedAt   DateTime?

  // Relations added in Step 127

  @@index([tenantId])
  @@index([ownerId])
  @@index([type])
  @@map("dashboards")
}

cd packages/database
npx prisma format
# Should complete without errors

cat prisma/schema.prisma | grep -A 20 "model Dashboard"
# Should show all fields

# Remove Dashboard model from schema.prisma

packages/database/prisma/schema.prisma (Dashboard model - no relations)

model DashboardShare {
  id          String          @id @default(cuid())
  dashboardId String
  shareType   ShareType
  targetId    String?         // userId, teamId, deptId, or null for COMPANY
  permission  SharePermission @default(VIEW)
  sharedBy    String
  sharedAt    DateTime        @default(now())
  expiresAt   DateTime?

  // Relations added in Step 127

  @@index([dashboardId])
  @@index([targetId])
  @@map("dashboard_shares")
}

cd packages/database
npx prisma format
# Should complete without errors

cat prisma/schema.prisma | grep -A 15 "model DashboardShare"
# Should show all fields

# Remove DashboardShare model from schema.prisma

packages/database/prisma/schema.prisma (DashboardShare model - no relations)

model DashboardLayout {
  id          String    @id @default(cuid())
  dashboardId String
  userId      String
  name        String
  description String?
  layout      Json      // LayoutItem[]
  isDefault   Boolean   @default(false)
  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt

  // Relations
  dashboard   Dashboard @relation(fields: [dashboardId], references: [id], onDelete: Cascade)
  user        User      @relation("UserDashboardLayouts", fields: [userId], references: [id])

  @@index([dashboardId, userId])
  @@map("dashboard_layouts")
}

model Dashboard {
  id          String        @id @default(cuid())
  tenantId    String
  name        String
  description String?
  type        DashboardType @default(PERSONAL)
  ownerId     String?
  config      Json
  isDefault   Boolean       @default(false)
  createdAt   DateTime      @default(now())
  updatedAt   DateTime      @updatedAt
  deletedAt   DateTime?

  // Relations
  tenant      Tenant            @relation(fields: [tenantId], references: [id])
  owner       User?             @relation("UserDashboards", fields: [ownerId], references: [id])
  shares      DashboardShare[]
  layouts     DashboardLayout[]

  @@index([tenantId])
  @@index([ownerId])
  @@index([type])
  @@map("dashboards")
}

model DashboardShare {
  id          String          @id @default(cuid())
  dashboardId String
  shareType   ShareType
  targetId    String?
  permission  SharePermission @default(VIEW)
  sharedBy    String
  sharedAt    DateTime        @default(now())
  expiresAt   DateTime?

  // Relations
  dashboard   Dashboard       @relation(fields: [dashboardId], references: [id], onDelete: Cascade)

  @@index([dashboardId])
  @@index([targetId])
  @@map("dashboard_shares")
}

// Add to User model
dashboards        Dashboard[]        @relation("UserDashboards")
dashboardLayouts  DashboardLayout[]  @relation("UserDashboardLayouts")

// Add to Tenant model
dashboards        Dashboard[]

cd packages/database
npx prisma format
# Should complete without errors

npx prisma validate
# Should complete without errors - all relations valid

# Remove DashboardLayout model
# Remove relations from Dashboard, DashboardShare, User, Tenant

packages/database/prisma/schema.prisma (Dashboard relations, DashboardShare relations, DashboardLayout model)

cd packages/database
npx prisma db push
npx prisma generate

npx prisma studio
# Should show: dashboards, dashboard_shares, dashboard_layouts tables
# Each table should have correct columns

# Or via CLI:
npx prisma db execute --stdin <<< "SELECT table_name FROM information_schema.tables WHERE table_schema = 'public' AND table_name LIKE 'dashboard%';"

# Drop tables (CAUTION: data loss)
npx prisma db execute --stdin <<< "DROP TABLE IF EXISTS dashboard_layouts, dashboard_shares, dashboards CASCADE;"

packages/database/prisma/schema.prisma (all dashboard models - schema locked)

mkdir -p apps/api/src/dashboards apps/api/src/dashboards/dto
mkdir -p apps/web/features/dashboard/widgets
mkdir -p apps/web/features/dashboard/components

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"],
      "@/features/*": ["./features/*"]
    }
  }
}

import { ComponentType } from 'react';

export type WidgetCategory =
  | 'metrics'       // Single values, KPIs
  | 'charts'        // Visualizations
  | 'lists'         // Data lists
  | 'ai'            // AI-powered widgets
  | 'quick-actions'; // Action shortcuts

export interface WidgetDefinition {
  // Identity
  id: string;
  title: string;
  description: string;
  category: WidgetCategory;
  icon: string; // Lucide icon name

  // Component
  component: ComponentType<WidgetProps>;

  // Size constraints (in grid units, 12-column grid)
  defaultSize: { width: number; height: number };
  minSize: { width: number; height: number };
  maxSize?: { width: number; height: number };

  // Permissions
  permissions: {
    requiredRoles?: string[];       // e.g., ['SYSTEM_ADMIN', 'HR_ADMIN']
    tenantAdminOnly?: boolean;
  };

  // Configuration
  configurable: boolean;
  configSchema?: ConfigField[];
  defaultConfig?: Record<string, unknown>;

  // Behavior
  refreshInterval?: number; // Auto-refresh in seconds
  enabled: boolean;
}

export interface WidgetProps {
  instance: WidgetInstance;
  definition: WidgetDefinition;
  isEditing: boolean;
  onConfigChange?: (config: Record<string, unknown>) => void;
}

export interface WidgetInstance {
  id: string;                              // Unique instance ID
  widgetId: string;                        // Reference to widget definition
  title?: string;                          // Custom title override
  configuration?: Record<string, unknown>; // Widget-specific config
  refreshInterval?: number;                // Override default refresh
}

export interface LayoutItem {
  i: string;      // Widget instance ID
  x: number;      // Grid X position (0-11)
  y: number;      // Grid Y position
  w: number;      // Width in grid units
  h: number;      // Height in grid units
  minW?: number;
  maxW?: number;
  minH?: number;
  maxH?: number;
  static?: boolean; // Locked position
}

export interface DashboardConfig {
  widgets: WidgetInstance[];
  layout: LayoutItem[];
  version: string;
}

export interface ConfigField {
  key: string;
  label: string;
  type: 'text' | 'number' | 'select' | 'checkbox' | 'date-range';
  options?: { value: string; label: string }[];
  defaultValue?: unknown;
  required?: boolean;
}

import { WidgetDefinition, WidgetCategory } from './types';

class WidgetRegistry {
  private widgets = new Map<string, WidgetDefinition>();

  register(widget: WidgetDefinition): void {
    if (this.widgets.has(widget.id)) {
      console.warn(`Widget ${widget.id} already registered, overwriting`);
    }
    this.widgets.set(widget.id, widget);
  }

  get(id: string): WidgetDefinition | undefined {
    return this.widgets.get(id);
  }

  getAll(): WidgetDefinition[] {
    return Array.from(this.widgets.values()).filter((w) => w.enabled);
  }

  getByCategory(category: WidgetCategory): WidgetDefinition[] {
    return this.getAll().filter((w) => w.category === category);
  }

  getForUser(userRoles: string[]): WidgetDefinition[] {
    return this.getAll().filter((w) => {
      // Check role requirements
      if (w.permissions.requiredRoles?.length) {
        const hasRole = w.permissions.requiredRoles.some((role) =>
          userRoles.includes(role)
        );
        if (!hasRole) return false;
      }
      return true;
    });
  }
}

// Singleton instance
export const widgetRegistry = new WidgetRegistry();

export * from './types';
export * from './registry';

cd apps/web
npm run build
# Should compile without type errors

# Check files exist
ls -la features/dashboard/widgets/
# Should show: types.ts, registry.ts, index.ts

rm -rf apps/web/features/dashboard/widgets/

apps/web/features/dashboard/widgets/types.ts
apps/web/features/dashboard/widgets/registry.ts

mkdir -p apps/api/src/dashboards/dto

import { IsString, IsOptional, IsEnum, IsObject, IsBoolean } from 'class-validator';
import { DashboardType } from '@prisma/client';

export class CreateDashboardDto {
  @IsString()
  name: string;

  @IsOptional()
  @IsString()
  description?: string;

  @IsOptional()
  @IsEnum(DashboardType)
  type?: DashboardType;

  @IsOptional()
  @IsObject()
  config?: {
    widgets: Array<{
      id: string;
      widgetId: string;
      title?: string;
      configuration?: Record<string, unknown>;
    }>;
    layout: Array<{
      i: string;
      x: number;
      y: number;
      w: number;
      h: number;
    }>;
    version: string;
  };

  @IsOptional()
  @IsBoolean()
  isDefault?: boolean;
}

import { PartialType } from '@nestjs/mapped-types';
import { CreateDashboardDto } from './create-dashboard.dto';

export class UpdateDashboardDto extends PartialType(CreateDashboardDto) {}

import { IsEnum, IsOptional, IsString } from 'class-validator';
import { ShareType, SharePermission } from '@prisma/client';

export class ShareDashboardDto {
  @IsEnum(ShareType)
  shareType: ShareType;

  @IsOptional()
  @IsString()
  targetId?: string; // userId, teamId, deptId - null for COMPANY

  @IsOptional()
  @IsEnum(SharePermission)
  permission?: SharePermission;
}

import { IsString, IsOptional, IsArray, IsBoolean, ValidateNested } from 'class-validator';
import { Type } from 'class-transformer';

class LayoutItemDto {
  @IsString()
  i: string;

  x: number;
  y: number;
  w: number;
  h: number;
}

export class SaveLayoutDto {
  @IsString()
  name: string;

  @IsOptional()
  @IsString()
  description?: string;

  @IsArray()
  @ValidateNested({ each: true })
  @Type(() => LayoutItemDto)
  layout: LayoutItemDto[];

  @IsOptional()
  @IsBoolean()
  isDefault?: boolean;
}

export * from './create-dashboard.dto';
export * from './update-dashboard.dto';
export * from './share-dashboard.dto';
export * from './save-layout.dto';

import { Injectable, NotFoundException, ForbiddenException } from '@nestjs/common';
import { PrismaService } from '../prisma/prisma.service';
import { DashboardType, ShareType } from '@prisma/client';
import {
  CreateDashboardDto,
  UpdateDashboardDto,
  ShareDashboardDto,
  SaveLayoutDto,
} from './dto';

@Injectable()
export class DashboardService {
  constructor(private prisma: PrismaService) {}

  // List dashboards accessible to user
  async listForUser(tenantId: string, userId: string) {
    const [owned, shared, system] = await Promise.all([
      // User's own dashboards
      this.prisma.dashboard.findMany({
        where: {
          tenantId,
          ownerId: userId,
          deletedAt: null,
        },
        orderBy: { updatedAt: 'desc' },
      }),
      // Dashboards shared with user
      this.prisma.dashboard.findMany({
        where: {
          tenantId,
          deletedAt: null,
          shares: {
            some: {
              AND: [
                {
                  OR: [
                    { shareType: ShareType.USER, targetId: userId },
                    { shareType: ShareType.COMPANY },
                    // Team/Department sharing would need user's team/dept IDs
                  ],
                },
                {
                  OR: [
                    { expiresAt: null },
                    { expiresAt: { gt: new Date() } },
                  ],
                },
              ],
            },
          },
        },
        include: {
          shares: true,
        },
      }),
      // System dashboards
      this.prisma.dashboard.findMany({
        where: {
          tenantId,
          type: DashboardType.SYSTEM,
          deletedAt: null,
        },
      }),
    ]);

    // Deduplicate
    const seen = new Set<string>();
    const result = [];
    for (const dashboard of [...owned, ...shared, ...system]) {
      if (!seen.has(dashboard.id)) {
        seen.add(dashboard.id);
        result.push(dashboard);
      }
    }

    return result;
  }

  // Get single dashboard with access check
  async getWithAccessCheck(id: string, tenantId: string, userId: string) {
    const dashboard = await this.prisma.dashboard.findFirst({
      where: {
        id,
        tenantId,
        deletedAt: null,
      },
      include: {
        shares: true,
        layouts: {
          where: { userId },
        },
      },
    });

    if (!dashboard) {
      throw new NotFoundException('Dashboard not found');
    }

    // Check access
    const hasAccess =
      dashboard.type === DashboardType.SYSTEM ||
      dashboard.ownerId === userId ||
      dashboard.shares.some(
        (s) =>
          (s.shareType === ShareType.USER && s.targetId === userId) ||
          s.shareType === ShareType.COMPANY
      );

    if (!hasAccess) {
      throw new ForbiddenException('Access denied');
    }

    return dashboard;
  }

  // Create dashboard
  async create(dto: CreateDashboardDto, tenantId: string, userId: string) {
    const defaultConfig = {
      widgets: [],
      layout: [],
      version: '1.0',
    };

    return this.prisma.dashboard.create({
      data: {
        tenantId,
        ownerId: userId,
        name: dto.name,
        description: dto.description,
        type: dto.type || DashboardType.PERSONAL,
        config: dto.config || defaultConfig,
        isDefault: dto.isDefault || false,
      },
    });
  }

  // Update dashboard
  async update(
    id: string,
    dto: UpdateDashboardDto,
    tenantId: string,
    userId: string
  ) {
    const dashboard = await this.getWithAccessCheck(id, tenantId, userId);

    // Only owner can update
    if (dashboard.ownerId !== userId && dashboard.type !== DashboardType.SYSTEM) {
      throw new ForbiddenException('Only owner can update dashboard');
    }

    // Use updateMany to enforce tenant isolation
    const result = await this.prisma.dashboard.updateMany({
      where: { id, tenantId },
      data: {
        name: dto.name,
        description: dto.description,
        config: dto.config,
        isDefault: dto.isDefault,
      },
    });

    if (result.count === 0) {
      throw new NotFoundException('Dashboard not found');
    }

    return this.prisma.dashboard.findUnique({ where: { id } });
  }

  // Delete dashboard (soft delete)
  async delete(id: string, tenantId: string, userId: string) {
    const dashboard = await this.getWithAccessCheck(id, tenantId, userId);

    if (dashboard.ownerId !== userId) {
      throw new ForbiddenException('Only owner can delete dashboard');
    }

    if (dashboard.type === DashboardType.SYSTEM) {
      throw new ForbiddenException('Cannot delete system dashboard');
    }

    // Use updateMany to enforce tenant isolation
    const result = await this.prisma.dashboard.updateMany({
      where: { id, tenantId },
      data: { deletedAt: new Date() },
    });

    if (result.count === 0) {
      throw new NotFoundException('Dashboard not found');
    }
  }

  // Share dashboard
  async share(
    id: string,
    dto: ShareDashboardDto,
    tenantId: string,
    userId: string
  ) {
    const dashboard = await this.getWithAccessCheck(id, tenantId, userId);

    if (dashboard.ownerId !== userId) {
      throw new ForbiddenException('Only owner can share dashboard');
    }

    // Mark as SHARED type if it was PERSONAL (use updateMany for tenant isolation)
    if (dashboard.type === DashboardType.PERSONAL) {
      await this.prisma.dashboard.updateMany({
        where: { id, tenantId },
        data: { type: DashboardType.SHARED },
      });
    }

    return this.prisma.dashboardShare.create({
      data: {
        dashboardId: id,
        shareType: dto.shareType,
        targetId: dto.targetId,
        permission: dto.permission,
        sharedBy: userId,
      },
    });
  }

  // Revoke share
  async revokeShare(dashboardId: string, shareId: string, tenantId: string, userId: string) {
    const dashboard = await this.getWithAccessCheck(dashboardId, tenantId, userId);

    if (dashboard.ownerId !== userId) {
      throw new ForbiddenException('Only owner can revoke share');
    }

    // Use deleteMany with dashboardId to ensure share belongs to this dashboard
    const result = await this.prisma.dashboardShare.deleteMany({
      where: { id: shareId, dashboardId },
    });

    if (result.count === 0) {
      throw new NotFoundException('Share not found');
    }
  }

  // Save layout
  async saveLayout(
    dashboardId: string,
    dto: SaveLayoutDto,
    tenantId: string,
    userId: string
  ) {
    await this.getWithAccessCheck(dashboardId, tenantId, userId);

    // If setting as default, unset other defaults
    if (dto.isDefault) {
      await this.prisma.dashboardLayout.updateMany({
        where: { dashboardId, userId, isDefault: true },
        data: { isDefault: false },
      });
    }

    return this.prisma.dashboardLayout.create({
      data: {
        dashboardId,
        userId,
        name: dto.name,
        description: dto.description,
        layout: dto.layout,
        isDefault: dto.isDefault || false,
      },
    });
  }

  // Get saved layouts
  async getLayouts(dashboardId: string, tenantId: string, userId: string) {
    await this.getWithAccessCheck(dashboardId, tenantId, userId);

    return this.prisma.dashboardLayout.findMany({
      where: { dashboardId, userId },
      orderBy: { createdAt: 'desc' },
    });
  }

  // Delete layout
  async deleteLayout(
    dashboardId: string,
    layoutId: string,
    tenantId: string,
    userId: string
  ) {
    await this.getWithAccessCheck(dashboardId, tenantId, userId);

    const layout = await this.prisma.dashboardLayout.findFirst({
      where: { id: layoutId, dashboardId, userId },
    });

    if (!layout) {
      throw new NotFoundException('Layout not found');
    }

    await this.prisma.dashboardLayout.delete({
      where: { id: layoutId },
    });
  }
}

cd apps/api
npm run build
# Should compile without errors

# Check files exist
ls -la src/dashboards/
# Should show: dashboard.service.ts, dto/

rm -rf apps/api/src/dashboards/

apps/api/src/dashboards/dashboard.service.ts
apps/api/src/dashboards/dto/*

import {
  Controller,
  Get,
  Post,
  Put,
  Delete,
  Body,
  Param,
  UseGuards,
} from '@nestjs/common';
import { TenantGuard } from '../tenant/tenant.guard';
import { TenantId } from '../tenant/tenant.decorator';
import { CurrentUser } from '../auth/current-user.decorator';
import { DashboardService } from './dashboard.service';
import {
  CreateDashboardDto,
  UpdateDashboardDto,
  ShareDashboardDto,
  SaveLayoutDto,
} from './dto';

// AuthUser type from Phase 01
interface AuthUser {
  id: string;
  systemRole: string;
}

@Controller('api/v1/dashboards')
@UseGuards(TenantGuard)
export class DashboardController {
  constructor(private readonly dashboardService: DashboardService) {}

  // List accessible dashboards
  @Get()
  async list(@TenantId() tenantId: string, @CurrentUser() user: AuthUser) {
    return {
      data: await this.dashboardService.listForUser(tenantId, user.id),
      error: null,
    };
  }

  // Get single dashboard
  @Get(':id')
  async get(
    @Param('id') id: string,
    @TenantId() tenantId: string,
    @CurrentUser() user: AuthUser
  ) {
    return {
      data: await this.dashboardService.getWithAccessCheck(id, tenantId, user.id),
      error: null,
    };
  }

  // Create dashboard
  @Post()
  async create(
    @Body() dto: CreateDashboardDto,
    @TenantId() tenantId: string,
    @CurrentUser() user: AuthUser
  ) {
    return {
      data: await this.dashboardService.create(dto, tenantId, user.id),
      error: null,
    };
  }

  // Update dashboard
  @Put(':id')
  async update(
    @Param('id') id: string,
    @Body() dto: UpdateDashboardDto,
    @TenantId() tenantId: string,
    @CurrentUser() user: AuthUser
  ) {
    return {
      data: await this.dashboardService.update(id, dto, tenantId, user.id),
      error: null,
    };
  }

  // Delete dashboard
  @Delete(':id')
  async delete(
    @Param('id') id: string,
    @TenantId() tenantId: string,
    @CurrentUser() user: AuthUser
  ) {
    await this.dashboardService.delete(id, tenantId, user.id);
    return { data: { success: true }, error: null };
  }

  // Share dashboard
  @Post(':id/share')
  async share(
    @Param('id') id: string,
    @Body() dto: ShareDashboardDto,
    @TenantId() tenantId: string,
    @CurrentUser() user: AuthUser
  ) {
    return {
      data: await this.dashboardService.share(id, dto, tenantId, user.id),
      error: null,
    };
  }

  // Revoke share
  @Delete(':id/share/:shareId')
  async revokeShare(
    @Param('id') id: string,
    @Param('shareId') shareId: string,
    @TenantId() tenantId: string,
    @CurrentUser() user: AuthUser
  ) {
    await this.dashboardService.revokeShare(id, shareId, tenantId, user.id);
    return { data: { success: true }, error: null };
  }

  // List saved layouts
  @Get(':id/layouts')
  async listLayouts(
    @Param('id') id: string,
    @TenantId() tenantId: string,
    @CurrentUser() user: AuthUser
  ) {
    return {
      data: await this.dashboardService.getLayouts(id, tenantId, user.id),
      error: null,
    };
  }

  // Save layout
  @Post(':id/layouts')
  async saveLayout(
    @Param('id') id: string,
    @Body() dto: SaveLayoutDto,
    @TenantId() tenantId: string,
    @CurrentUser() user: AuthUser
  ) {
    return {
      data: await this.dashboardService.saveLayout(id, dto, tenantId, user.id),
      error: null,
    };
  }

  // Delete layout
  @Delete(':id/layouts/:layoutId')
  async deleteLayout(
    @Param('id') id: string,
    @Param('layoutId') layoutId: string,
    @TenantId() tenantId: string,
    @CurrentUser() user: AuthUser
  ) {
    await this.dashboardService.deleteLayout(id, layoutId, tenantId, user.id);
    return { data: { success: true }, error: null };
  }
}

import { Module } from '@nestjs/common';
import { DashboardController } from './dashboard.controller';
import { DashboardService } from './dashboard.service';
import { PrismaModule } from '../prisma/prisma.module';

@Module({
  imports: [PrismaModule],
  controllers: [DashboardController],
  providers: [DashboardService],
  exports: [DashboardService],
})
export class DashboardsModule {}

import { DashboardsModule } from './dashboards/dashboards.module';

@Module({
  imports: [
    // ... existing modules
    DashboardsModule,
  ],
})
export class AppModule {}

cd apps/api
npm run build
# Should compile without errors

# Start the API
npm run start:dev

# Test endpoint (replace with valid tenant ID)
curl -X POST http://localhost:3001/api/v1/dashboards \
  -H "X-Tenant-ID: test-tenant" \
  -H "Content-Type: application/json" \
  -d '{"name": "My Dashboard"}'
# Should return created dashboard or auth error (expected if no auth middleware)

# Remove DashboardsModule from app.module.ts
rm apps/api/src/dashboards/dashboard.controller.ts
rm apps/api/src/dashboards/dashboards.module.ts

apps/api/src/dashboards/dashboard.controller.ts
apps/api/src/dashboards/dashboards.module.ts

cd apps/web
npm install react-grid-layout
npm install -D @types/react-grid-layout

cd apps/web

# Check package.json
cat package.json | grep react-grid-layout
# Should show version

# Test import compiles
cat > /tmp/test-import.tsx << 'EOF'
import { Responsive, WidthProvider } from 'react-grid-layout';
const ResponsiveGridLayout = WidthProvider(Responsive);
console.log(ResponsiveGridLayout);
EOF

npm run build
# Should compile without errors

cd apps/web
npm uninstall react-grid-layout @types/react-grid-layout

apps/web/package.json (react-grid-layout dependency)

mkdir -p apps/web/features/dashboard/components

// In apps/web/lib/api.ts, add the put method:
// Follow existing pattern - use API_URL constant and /api/v1 prefix
async put<T = unknown>(path: string, body: unknown): Promise<{ data: T; error: null }> {
  const tenantId = await getTenantId();
  const response = await fetch(`${API_URL}/api/v1${path}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
      'x-tenant-id': tenantId,
    },
    body: JSON.stringify(body),
  });

  if (!response.ok) {
    const error = await response.json().catch(() => ({ message: 'Request failed' }));
    throw new Error(error.message || 'Request failed');
  }

  const data = await response.json();
  return { data: data.data ?? data, error: null };
}

// Also add delete method if missing:
async delete<T = unknown>(path: string): Promise<{ data: T; error: null }> {
  const tenantId = await getTenantId();
  const response = await fetch(`${API_URL}/api/v1${path}`, {
    method: 'DELETE',
    headers: {
      'x-tenant-id': tenantId,
    },
  });

  if (!response.ok) {
    const error = await response.json().catch(() => ({ message: 'Request failed' }));
    throw new Error(error.message || 'Request failed');
  }

  const data = await response.json();
  return { data: data.data ?? data, error: null };
}

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from '../api';

// Export type for consistency
export type DashboardType = 'SYSTEM' | 'PERSONAL' | 'SHARED';

export interface Dashboard {
  id: string;
  tenantId: string;
  name: string;
  description: string | null;
  type: DashboardType;
  ownerId: string | null;
  config: {
    widgets: Array<{
      id: string;
      widgetId: string;
      title?: string;
      configuration?: Record<string, unknown>;
    }>;
    layout: Array<{
      i: string;
      x: number;
      y: number;
      w: number;
      h: number;
      minW?: number;
      maxW?: number;
      minH?: number;
      maxH?: number;
    }>;
    version: string;
  };
  isDefault: boolean;
  createdAt: string;
  updatedAt: string;
}

export function useDashboards() {
  return useQuery({
    queryKey: ['dashboards'],
    queryFn: async (): Promise<Dashboard[]> => {
      const response = await api.get<Dashboard[]>('/dashboards');
      return response.data;
    },
  });
}

export function useDashboard(id: string) {
  return useQuery({
    queryKey: ['dashboards', id],
    queryFn: async (): Promise<Dashboard> => {
      const response = await api.get<Dashboard>(`/dashboards/${id}`);
      return response.data;
    },
    enabled: !!id,
  });
}

export function useCreateDashboard() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: async (data: { name: string; description?: string }) => {
      const response = await api.post<Dashboard>('/dashboards', data);
      return response.data;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['dashboards'] });
    },
  });
}

export function useUpdateDashboard() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: async ({
      id,
      ...data
    }: {
      id: string;
      name?: string;
      description?: string;
      config?: Dashboard['config'];
    }) => {
      const response = await api.put<Dashboard>(`/dashboards/${id}`, data);
      return response.data;
    },
    onSuccess: (_, variables) => {
      queryClient.invalidateQueries({ queryKey: ['dashboards', variables.id] });
      queryClient.invalidateQueries({ queryKey: ['dashboards'] });
    },
  });
}

export function useDeleteDashboard() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: async (id: string) => {
      await api.delete(`/dashboards/${id}`);
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['dashboards'] });
    },
  });
}

'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Edit2, Save, X, Plus, MoreVertical, Trash2 } from 'lucide-react';
import { Dashboard, useUpdateDashboard, useDeleteDashboard } from '@/lib/queries/dashboards';

interface DashboardHeaderProps {
  dashboard: Dashboard;
  isEditing: boolean;
  onEditToggle: () => void;
  onAddWidget: () => void;
}

export function DashboardHeader({
  dashboard,
  isEditing,
  onEditToggle,
  onAddWidget,
}: DashboardHeaderProps) {
  const [isRenaming, setIsRenaming] = useState(false);
  const [name, setName] = useState(dashboard.name);
  const updateMutation = useUpdateDashboard();
  const deleteMutation = useDeleteDashboard();

  const handleSaveName = async () => {
    if (name !== dashboard.name) {
      await updateMutation.mutateAsync({ id: dashboard.id, name });
    }
    setIsRenaming(false);
  };

  const handleDelete = async () => {
    if (confirm('Are you sure you want to delete this dashboard?')) {
      await deleteMutation.mutateAsync(dashboard.id);
    }
  };

  return (
    <div className="flex items-center justify-between border-b border-gray-100 pb-4 mb-4">
      <div className="flex items-center gap-2">
        {isRenaming ? (
          <div className="flex items-center gap-2">
            <Input
              value={name}
              onChange={(e) => setName(e.target.value)}
              className="h-8 w-64"
              autoFocus
            />
            <Button size="sm" variant="ghost" onClick={handleSaveName}>
              <Save className="h-4 w-4" />
            </Button>
            <Button
              size="sm"
              variant="ghost"
              onClick={() => {
                setName(dashboard.name);
                setIsRenaming(false);
              }}
            >
              <X className="h-4 w-4" />
            </Button>
          </div>
        ) : (
          <h1
            className="text-2xl font-bold cursor-pointer hover:text-primary"
            onClick={() => dashboard.type !== 'SYSTEM' && setIsRenaming(true)}
          >
            {dashboard.name}
          </h1>
        )}
        {dashboard.type === 'SYSTEM' && (
          <span className="text-xs bg-muted px-2 py-1 rounded">System</span>
        )}
      </div>

      <div className="flex items-center gap-2">
        {isEditing && (
          <Button variant="outline" size="sm" onClick={onAddWidget}>
            <Plus className="h-4 w-4 mr-1" />
            Add Widget
          </Button>
        )}

        <Button
          variant={isEditing ? 'default' : 'outline'}
          size="sm"
          onClick={onEditToggle}
        >
          {isEditing ? (
            <>
              <Save className="h-4 w-4 mr-1" />
              Done
            </>
          ) : (
            <>
              <Edit2 className="h-4 w-4 mr-1" />
              Edit
            </>
          )}
        </Button>

        {dashboard.type !== 'SYSTEM' && (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="sm">
                <MoreVertical className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem
                className="text-destructive"
                onClick={handleDelete}
              >
                <Trash2 className="h-4 w-4 mr-2" />
                Delete Dashboard
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        )}
      </div>
    </div>
  );
}

'use client';

import { useState, useCallback } from 'react';
import { useDashboard, useUpdateDashboard, Dashboard } from '@/lib/queries/dashboards';
import { widgetRegistry, WidgetInstance, LayoutItem } from '../widgets';
import { DashboardHeader } from './DashboardHeader';
import { GridLayout } from './GridLayout';
import { WidgetGallery } from './WidgetGallery';
import { useLayoutPersistence } from '../hooks/useLayoutPersistence';

interface DashboardContainerProps {
  dashboardId: string;
}

export function DashboardContainer({ dashboardId }: DashboardContainerProps) {
  const { data: dashboard, isLoading, error } = useDashboard(dashboardId);
  const updateMutation = useUpdateDashboard();
  const [isEditing, setIsEditing] = useState(false);
  const [showGallery, setShowGallery] = useState(false);

  // Use layout persistence hook for localStorage + debounced API sync
  const { saveLayout, isSyncing } = useLayoutPersistence({
    dashboardId,
    enabled: isEditing,
  });

  const handleLayoutChange = useCallback(
    (newLayout: LayoutItem[]) => {
      if (!dashboard) return;

      // Use layout persistence hook instead of direct mutation
      // This saves to localStorage immediately and syncs to API with debounce
      saveLayout(newLayout);
    },
    [dashboard, saveLayout]
  );

  const handleAddWidget = useCallback(
    (widgetId: string) => {
      if (!dashboard) return;

      const definition = widgetRegistry.get(widgetId);
      if (!definition) return;

      const instance: WidgetInstance = {
        id: `${widgetId}-${Date.now()}`,
        widgetId,
      };

      const layoutItem: LayoutItem = {
        i: instance.id,
        x: 0,
        y: Infinity, // Add at bottom
        w: definition.defaultSize.width,
        h: definition.defaultSize.height,
        minW: definition.minSize.width,
        minH: definition.minSize.height,
        maxW: definition.maxSize?.width,
        maxH: definition.maxSize?.height,
      };

      updateMutation.mutate({
        id: dashboardId,
        config: {
          ...dashboard.config,
          widgets: [...dashboard.config.widgets, instance],
          layout: [...dashboard.config.layout, layoutItem],
        },
      });

      setShowGallery(false);
    },
    [dashboard, dashboardId, updateMutation]
  );

  const handleRemoveWidget = useCallback(
    (instanceId: string) => {
      if (!dashboard) return;

      updateMutation.mutate({
        id: dashboardId,
        config: {
          ...dashboard.config,
          widgets: dashboard.config.widgets.filter((w) => w.id !== instanceId),
          layout: dashboard.config.layout.filter((l) => l.i !== instanceId),
        },
      });
    },
    [dashboard, dashboardId, updateMutation]
  );

  if (isLoading) {
    return (
      <div className="animate-pulse space-y-4">
        <div className="h-10 bg-muted rounded w-1/3" />
        <div className="grid grid-cols-3 gap-4">
          <div className="h-48 bg-muted rounded" />
          <div className="h-48 bg-muted rounded" />
          <div className="h-48 bg-muted rounded" />
        </div>
      </div>
    );
  }

  if (error || !dashboard) {
    return (
      <div className="text-center py-12">
        <p className="text-muted-foreground">Failed to load dashboard</p>
      </div>
    );
  }

  return (
    <div className="dashboard-container">
      <DashboardHeader
        dashboard={dashboard}
        isEditing={isEditing}
        onEditToggle={() => setIsEditing(!isEditing)}
        onAddWidget={() => setShowGallery(true)}
      />

      <GridLayout
        layout={dashboard.config.layout}
        widgets={dashboard.config.widgets}
        isEditing={isEditing}
        onLayoutChange={handleLayoutChange}
        onRemoveWidget={handleRemoveWidget}
      />

      <WidgetGallery
        open={showGallery}
        onClose={() => setShowGallery(false)}
        onSelect={handleAddWidget}
      />
    </div>
  );
}

export * from './DashboardContainer';
export * from './DashboardHeader';

cd apps/web
npm run build
# May have errors for missing GridLayout and WidgetGallery - that's OK
# They will be created in next steps

# Check files exist
ls -la features/dashboard/components/
# Should show: DashboardContainer.tsx, DashboardHeader.tsx, index.ts

rm -rf apps/web/features/dashboard/components/
rm apps/web/lib/queries/dashboards.ts

apps/web/features/dashboard/components/DashboardContainer.tsx
apps/web/features/dashboard/components/DashboardHeader.tsx
apps/web/lib/queries/dashboards.ts

/* At the top of globals.css, add: */
@import 'react-grid-layout/css/styles.css';
@import 'react-resizable/css/styles.css';

'use client';

import { useCallback, useMemo } from 'react';
import { Responsive, WidthProvider, Layout, Layouts } from 'react-grid-layout';
import { WidgetInstance, LayoutItem } from '../widgets';
import { WidgetRenderer } from './WidgetRenderer';

// CSS moved to globals.css for Next.js App Router compatibility

const ResponsiveGridLayout = WidthProvider(Responsive);

const BREAKPOINTS = { xl: 1920, lg: 1200, md: 996, sm: 768, xs: 480 };
const COLS = { xl: 12, lg: 12, md: 8, sm: 4, xs: 1 };
const ROW_HEIGHT = 120;
const MARGIN: [number, number] = [16, 16];

interface GridLayoutProps {
  layout: LayoutItem[];
  widgets: WidgetInstance[];
  isEditing: boolean;
  onLayoutChange: (layout: LayoutItem[]) => void;
  onRemoveWidget: (instanceId: string) => void;
}

export function GridLayout({
  layout,
  widgets,
  isEditing,
  onLayoutChange,
  onRemoveWidget,
}: GridLayoutProps) {
  // Convert our layout format to react-grid-layout format
  const rglLayout = useMemo(
    () =>
      layout.map((item) => ({
        i: item.i,
        x: item.x,
        y: item.y,
        w: item.w,
        h: item.h,
        minW: item.minW,
        minH: item.minH,
        maxW: item.maxW,
        maxH: item.maxH,
        static: item.static,
      })),
    [layout]
  );

  const handleLayoutChange = useCallback(
    (currentLayout: Layout[], allLayouts: Layouts) => {
      // Convert react-grid-layout format back to our format
      const newLayout: LayoutItem[] = currentLayout.map((item) => ({
        i: item.i,
        x: item.x,
        y: item.y,
        w: item.w,
        h: item.h,
        minW: item.minW,
        minH: item.minH,
        maxW: item.maxW,
        maxH: item.maxH,
      }));
      onLayoutChange(newLayout);
    },
    [onLayoutChange]
  );

  if (widgets.length === 0) {
    return (
      <div className="text-center py-24 border-2 border-dashed rounded-lg">
        <p className="text-muted-foreground">
          {isEditing
            ? 'Click "Add Widget" to add your first widget'
            : 'No widgets on this dashboard'}
        </p>
      </div>
    );
  }

  return (
    <ResponsiveGridLayout
      layouts={{ lg: rglLayout }}
      breakpoints={BREAKPOINTS}
      cols={COLS}
      rowHeight={ROW_HEIGHT}
      margin={MARGIN}
      isDraggable={isEditing}
      isResizable={isEditing}
      onLayoutChange={handleLayoutChange}
      compactType="vertical"
      preventCollision={false}
      useCSSTransforms={true}
      resizeHandles={['se', 'sw', 'ne', 'nw', 'e', 'w', 'n', 's']}
      draggableHandle=".widget-drag-handle"
    >
      {widgets.map((widget) => (
        <div key={widget.id} className="widget-wrapper">
          <WidgetRenderer
            instance={widget}
            isEditing={isEditing}
            onRemove={() => onRemoveWidget(widget.id)}
          />
        </div>
      ))}
    </ResponsiveGridLayout>
  );
}

'use client';

import { Suspense } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { GripVertical, X, AlertCircle } from 'lucide-react';
import { widgetRegistry, WidgetInstance } from '../widgets';
import { ErrorBoundary } from 'react-error-boundary';

interface WidgetRendererProps {
  instance: WidgetInstance;
  isEditing: boolean;
  onRemove: () => void;
}

function WidgetError({ error }: { error?: Error }) {
  return (
    <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
      <AlertCircle className="h-8 w-8 mb-2" />
      <p className="text-sm">Widget failed to load</p>
      {error && <p className="text-xs mt-1">{error.message}</p>}
    </div>
  );
}

function WidgetSkeleton() {
  return (
    <div className="animate-pulse h-full">
      <div className="h-4 bg-muted rounded w-1/2 mb-4" />
      <div className="h-24 bg-muted rounded" />
    </div>
  );
}

export function WidgetRenderer({
  instance,
  isEditing,
  onRemove,
}: WidgetRendererProps) {
  const definition = widgetRegistry.get(instance.widgetId);

  if (!definition) {
    return (
      <Card className="h-full">
        <CardContent className="flex items-center justify-center h-full">
          <WidgetError error={new Error(`Widget "${instance.widgetId}" not found`)} />
        </CardContent>
      </Card>
    );
  }

  const WidgetComponent = definition.component;
  const title = instance.title || definition.title;

  return (
    <Card className="h-full flex flex-col overflow-hidden">
      <CardHeader className="py-3 px-4 flex-shrink-0">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            {isEditing && (
              <GripVertical className="h-4 w-4 text-muted-foreground cursor-move widget-drag-handle" />
            )}
            <CardTitle className="text-sm font-medium">{title}</CardTitle>
          </div>
          {isEditing && (
            <Button
              variant="ghost"
              size="sm"
              className="h-6 w-6 p-0"
              onClick={onRemove}
            >
              <X className="h-4 w-4" />
            </Button>
          )}
        </div>
      </CardHeader>
      <CardContent className="flex-1 overflow-auto p-6">
        <ErrorBoundary fallbackRender={({ error }) => <WidgetError error={error} />}>
          <Suspense fallback={<WidgetSkeleton />}>
            <WidgetComponent
              instance={instance}
              definition={definition}
              isEditing={isEditing}
            />
          </Suspense>
        </ErrorBoundary>
      </CardContent>
    </Card>
  );
}