Now I have a thorough understanding of the full dashboard. I'll convert it into a complete self-contained Angular 14 component with plain HTML and inline/scoped CSS (no UI libraries).
Now write the angular.json and tsconfig.json so the project is fully runnable:
The full Angular 14 project has been written to angular-dashboard/. Here is a summary of what was produced:
| File | Purpose |
|---|---|
src/index.html | Bootstrap HTML with Inter font |
src/main.ts | Angular platform bootstrap |
src/styles.css | Global CSS design tokens (colors, radius, font) |
app/app.module.ts | NgModule declaring all four components |
app/app.component.ts | Root shell — flexbox layout, view switching |
app/sidebar/sidebar.component.ts | Icon-rail sidebar with nav items, badges, notifications, avatar — all plain HTML + inline SVG |
app/top-nav/top-nav.component.ts | Header with search input, date chip, notification bell, user chip, and sub-tab strip |
app/home-dashboard/home-dashboard.component.ts | Complete dashboard: stat cards, attendance widget with bar chart, check-in/out buttons, mood meter, reward gauge, club levels, pending approvals, recognitions, goals with progress bars, activity feed, team status, announcements grid |
No UI libraries are used — every element (cards, badges, progress bars, buttons, gauges) is raw <html> with scoped CSS custom properties. To run it: cd angular-dashboard && npm install && npm start.
I have everything I need. Now I'll write all the Angular 14 workflow module files.
Now update the app.module.ts to declare the new component:
Now update AppComponent to add a Workflow nav entry and render the workflow view:
The WorkflowComponent is a standalone: true component (uses CommonModule via imports: [CommonModule]). Since the existing app uses NgModule declarations, let's make WorkflowComponent non-standalone to stay consistent:
Now make sure CommonModule is imported in app.module.ts so *ngIf, *ngFor, and [ngClass] work across all declared components:
BrowserModule re-exports CommonModule, so *ngIf, *ngFor, and [ngClass] are already available to all declared components. The module is correct as-is.
Here is a summary of all files produced under angular-dashboard/src/app/workflow/:
workflow.component.ts — a single self-contained Angular 14 component with:
| Tab | Content |
|---|---|
| Approvals | Pending approval cards with priority dots, detail block, Approve / Reject buttons; state tracked with approvalStates[] array |
| Action Forms | 8-form grid (Leave, WFH, Resignation, Reimbursement, Shift, Asset, Transfer, Certificate) with emoji icons |
| My Requests | Scrollable list with status badges (Approved / Pending / Rejected / Completed) |
| Goal Feedback | Cards with star ratings and quoted manager comments |
| Tracker | Approval history table with per-row approve/reject icons |
AppModule was updated to declare WorkflowComponent, and AppComponent template now renders <app-workflow> when the sidebar workflow nav item is active.You can send messages while the preview loads