Dashboard Widget Development

interface IDashboardWidget {
  id: string;
  name: string;
  component: Type<any>;
  defaultWidth: number; // Grid columns (1-12)
  defaultHeight: number; // Grid rows
  permissions?: string[];
}

@Component({
  selector: "ga-my-widget",
  template: `
    <nb-card>
      <nb-card-header>My Widget</nb-card-header>
      <nb-card-body>
        <div class="widget-content">
          <span class="metric">{{ value }}</span>
          <span class="label">Active Tasks</span>
        </div>
      </nb-card-body>
    </nb-card>
  `,
})
export class MyWidgetComponent implements OnInit {
  value: number;

  ngOnInit() {
    this.loadData();
  }

  async loadData() {
    this.value = await this.dashboardService.getActiveTaskCount();
  }
}

@NgModule({
  declarations: [MyWidgetComponent],
  providers: [
    {
      provide: DASHBOARD_WIDGETS,
      useValue: {
        id: "my-widget",
        name: "Active Tasks",
        component: MyWidgetComponent,
        defaultWidth: 4,
        defaultHeight: 2,
      },
      multi: true,
    },
  ],
})
export class MyWidgetModule {}