# Dashboard Widget Development {#dashboard-widget-development}


Create custom dashboard widgets for the Gauzy dashboard.


## Overview {#overview}


Dashboard widgets provide at-a-glance metrics and data visualizations on the main dashboard.


## Widget Architecture {#widget-architecture}


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


## Creating a Widget {#creating-a-widget}



### 1. Create the Component {#1-create-the-component}


```typescript
@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();
  }
}
```


### 2. Register the Widget {#2-register-the-widget}


```typescript
@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 {}
```


## Built-in Widgets {#built-in-widgets}


| Widget           | Description          | Default Size |
| ---------------- | -------------------- | ------------ |
| Today's Log      | Current day time log | 4 × 2        |
| Active Tasks     | Tasks in progress    | 4 × 2        |
| Team Activity    | Team member status   | 4 × 3        |
| Income/Expense   | Financial summary    | 6 × 3        |
| Project Progress | Project completion   | 6 × 3        |


## API Reference {#api-reference}


- [Dashboard Endpoints](https://sourcey-gauzy.pages.dev/api/dashboard-endpoints/index.md) — dashboard data API
- [Dashboard Widget Endpoints](https://sourcey-gauzy.pages.dev/api/dashboard-endpoints/index.md) — widget CRUD


## Related Pages {#related-pages}


- [Admin Dashboard](https://sourcey-gauzy.pages.dev/admin/admin-dashboard/index.md) — dashboard guide
- [Angular Module Architecture](https://sourcey-gauzy.pages.dev/frontend/angular-module-architecture/index.md) — module patterns