1500	  status: 'in-progress' | 'planned' | 'completed'
1501	  priority: 'high' | 'medium' | 'low'
1502	}
1503
1504	export const roadmapItems: RoadmapItem[] = [
1505	  // NOW
1506	  {
1507	    id: 'r1',
1508	    phase: 'now',
1509	    theme: 'governance',
1510	    title: 'Governance Framework v1 Activation',
1511	    description: 'Activate the formal AI Adoption governance model including review forums, approval pathways, and reporting cadences.',
1512	    owner: 'adoption-office',
1513	    status: 'in-progress',
1514	    priority: 'high',
1515	  },
1516	  {
1517	    id: 'r2',
1518	    phase: 'now',
1519	    theme: 'command-center',
1520	    title: 'Executive AI Dashboard — Phase 1',
1521	    description: 'Launch the first version of the AI Adoption executive dashboard covering top KPIs, adoption trends, and use case pipeline.',
1522	    owner: 'command-center',
1523	    status: 'in-progress',
1524	    priority: 'high',
1525	  },
1526	  {
1527	    id: 'r3',
1528	    phase: 'now',
1529	    theme: 'champions',
1530	    title: 'AI Champions Network Expansion',
1531	    description: 'Grow the AI Champions network to 120 active champions across all 12 DEWA divisions.',
1532	    owner: 'adoption-office',
1533	    status: 'in-progress',
1534	    priority: 'high',
1535	  },
1536	  {
1537	    id: 'r4',
1538	    phase: 'now',
1539	    theme: 'capability',
1540	    title: 'AI Academy — Cohort 2 Launch',
1541	    description: 'Launch the second AI Academy cohort targeting 400 additional employees across Engineering and Operations.',
1542	    owner: 'ai-acceleration',
1543	    status: 'in-progress',
1544	    priority: 'high',
1545	  },
1546	  // NEXT
1547	  {
1548	    id: 'r5',
1549	    phase: 'next',
1550	    theme: 'analytics',
1551	    title: 'Adoption Analytics — Advanced Insights',
1552	    description: 'Build advanced analytics layer with cohort analysis, drop-off detection, and division-level benchmarking.',
1553	    owner: 'command-center',
1554	    status: 'planned',
1555	    priority: 'high',
1556	  },
1557	  {
1558	    id: 'r6',
1559	    phase: 'next',
1560	    theme: 'value-tracking',
1561	    title: 'Business Value Tracking Model',
1562	    description: 'Deploy a structured methodology for quantifying and reporting AI-driven cost savings, productivity gains, and process improvements.',
1563	    owner: 'adoption-office',
1564	    status: 'planned',
1565	    priority: 'high',
1566	  },
1567	  {
1568	    id: 'r7',
1569	    phase: 'next',
1570	    theme: 'partnerships',
1571	    title: 'Strategic AI Partner Ecosystem Expansion',
1572	    description: 'Formalise partnerships with 3 additional strategic AI technology providers to expand enterprise tool access.',
1573	    owner: 'ai-acceleration',
1574	    status: 'planned',
1575	    priority: 'medium',
1576	  },
1577	  {
1578	    id: 'r8',
1579	    phase: 'next',
1580	    theme: 'command-center',
1581	    title: 'Physical Command Center Design',
1582	    description: 'Design and plan the physical AI Command Center space for leadership briefings, showcase events, and live adoption monitoring.',
1583	    owner: 'command-center',
1584	    status: 'planned',
1585	    priority: 'medium',
1586	  },
1587	  // FUTURE
1588	  {
1589	    id: 'r9',
1590	    phase: 'future',
1591	    theme: 'command-center',
1592	    title: 'Physical AI Command Center Launch',
1593	    description: 'Open the permanent physical AI Command Center as an executive showcase and live operations hub.',
1594	    owner: 'command-center',
1595	    status: 'planned',
1596	    priority: 'high',
1597	  },
1598	  {
1599	    id: 'r10',
1600	    phase: 'future',
1601	    theme: 'governance',
1602	    title: 'AI Governance Maturity Level 3',
1603	    description: 'Advance governance maturity to include automated compliance monitoring, AI ethics review boards, and enterprise AI policy.',
1604	    owner: 'adoption-office',
1605	    status: 'planned',
1606	    priority: 'high',
1607	  },
1608	  {
1609	    id: 'r11',
1610	    phase: 'future',
1611	    theme: 'capability',
1612	    title: 'AI Centre of Excellence',
1613	    description: 'Evolve the AI Academy into a permanent Centre of Excellence providing continuous learning, certifications, and advanced tracks.',
1614	    owner: 'ai-acceleration',
1615	    status: 'planned',
1616	    priority: 'medium',
1617	  },
1618	  {
1619	    id: 'r12',
1620	    phase: 'future',
1621	    theme: 'strategy',
1622	    title: 'Enterprise AI Adoption Index',
1623	    description: 'Publish an annual DEWA AI Adoption Index benchmarking enterprise adoption against regional and global energy sector peers.',
1624	    owner: 'command-center',
1625	    status: 'planned',
1626	    priority: 'low',
1627	  },
1628	]
1629	```
1630
1631	---
1632
1633	# FILE: content/risks.ts
1634
1635	```typescript
1636	export type RiskSeverity = 'high' | 'medium' | 'low'
1637	export type RiskCategory =
1638	  | 'adoption'
1639	  | 'governance'
1640	  | 'data'
1641	  | 'change-management'
1642	  | 'technology'
1643	  | 'dependencies'
1644
1645	export interface Risk {
1646	  id: string
1647	  category: RiskCategory
1648	  title: string
1649	  description: string
1650	  severity: RiskSeverity
1651	  likelihood: RiskSeverity
1652	  owner: string
1653	  mitigations: string[]
1654	  dependencies: string[]
1655	  status: 'open' | 'mitigated' | 'monitoring'
1656	}
1657
1658	export const risks: Risk[] = [
1659	  {
1660	    id: 'risk-1',
1661	    category: 'adoption',
1662	    title: 'Low Divisional Adoption Velocity',
1663	    description:
1664	      'Some divisions may resist or deprioritise AI adoption due to workload pressures, unclear mandates, or limited local champions.',
1665	    severity: 'high',
1666	    likelihood: 'medium',
1667	    owner: 'AI Adoption Office',
1668	    mitigations: [
1669	      'Activate division-level AI Champions to drive peer adoption',
1670	      'Escalate low-adoption divisions to Department Head for leadership intervention',
1671	      'Provide targeted divisional enablement support through AI Acceleration',
1672	    ],
1673	    dependencies: ['Divisional Director engagement', 'AI Champions activation rate'],
1674	    status: 'monitoring',
1675	  },
1676	  {
1677	    id: 'risk-2',
1678	    category: 'governance',
1679	    title: 'Governance Action Backlog',
1680	    description:
1681	      'Governance review forums may accumulate unresolved actions if participation is inconsistent or capacity is constrained.',
1682	    severity: 'medium',
1683	    likelihood: 'medium',
1684	    owner: 'AI Adoption Office',
1685	    mitigations: [
1686	      'Enforce bi-weekly governance forum attendance with named deputies',
1687	      'Track open actions in the Command Center dashboard with RAG status',
1688	      'Escalate overdue actions to Department Head monthly',
1689	    ],
1690	    dependencies: ['Governance forum participation', 'Command Center reporting accuracy'],
1691	    status: 'open',
1692	  },
1693	  {
1694	    id: 'risk-3',
1695	    category: 'data',
1696	    title: 'Adoption Data Quality Gaps',
1697	    description:
1698	      'Inconsistent or incomplete usage data from AI tools may reduce confidence in KPI reporting and executive dashboards.',
1699	    severity: 'high',
1700	    likelihood: 'medium',
1701	    owner: 'AI Command Center',
1702	    mitigations: [
1703	      'Establish data quality validation process before each reporting cycle',
1704	      'Work with IT to standardise usage data exports from all AI platforms',
1705	      'Flag data gaps visibly in dashboards rather than suppressing incomplete data',
1706	    ],
1707	    dependencies: ['IT platform data exports', 'Vendor API access'],
1708	    status: 'monitoring',
1709	  },
1710	  {
1711	    id: 'risk-4',
1712	    category: 'change-management',
1713	    title: 'Employee Resistance to AI Adoption',
1714	    description:
1715	      'Employees may be concerned about AI replacing roles, creating hesitance to engage with tools or programs.',
1716	    severity: 'high',
1717	    likelihood: 'medium',
1718	    owner: 'AI Acceleration',
1719	    mitigations: [
1720	      'Lead communications with productivity and empowerment narratives, not automation narratives',
1721	      'Engage HR and Communications in messaging strategy',
1722	      'Feature employee success stories prominently in campaigns',
1723	    ],
1724	    dependencies: ['HR communications alignment', 'Leadership tone-setting'],
1725	    status: 'monitoring',
1726	  },
1727	  {
1728	    id: 'risk-5',
1729	    category: 'technology',
1730	    title: 'AI Tool Security or Compliance Issue',
1731	    description:
1732	      'A deployed AI tool may have a security vulnerability, data handling issue, or compliance breach that requires rapid containment.',
1733	    severity: 'high',
1734	    likelihood: 'low',
1735	    owner: 'AI Adoption Office + IT Governance',
1736	    mitigations: [
1737	      'All tools must pass security review before enterprise access is granted',
1738	      'Maintain rapid response protocol for tool suspension if needed',
1739	      'Monitor vendor security advisories continuously',
1740	    ],
1741	    dependencies: ['IT Governance review process', 'Vendor security disclosures'],
1742	    status: 'open',
1743	  },
1744	  {
1745	    id: 'risk-6',
1746	    category: 'dependencies',
1747	    title: 'Cross-Divisional Alignment Delays',
1748	    description:
1749	      'Slow response from divisional stakeholders may delay use case approvals, training deployment, or governance actions.',
[result-id: r7]

  status: 'in-progress' | 'planned' | 'completed'
  priority: 'high' | 'medium' | 'low'
}

export const roadmapItems: RoadmapItem[] = [
  // NOW
  {
    id: 'r1',
    phase: 'now',
    theme: 'governance',
    title: 'Governance Framework v1 Activation',
    description: 'Activate the formal AI Adoption governance model including review forums, approval pathways, and reporting cadences.',
    owner: 'adoption-office',
    status: 'in-progress',
    priority: 'high',
  },
  {
    id: 'r2',
    phase: 'now',
    theme: 'command-center',
    title: 'Executive AI Dashboard — Phase 1',
    description: 'Launch the first version of the AI Adoption executive dashboard covering top KPIs, adoption trends, and use case pipeline.',
    owner: 'command-center',
    status: 'in-progress',
    priority: 'high',
  },
  {
    id: 'r3',
    phase: 'now',
    theme: 'champions',
    title: 'AI Champions Network Expansion',
    description: 'Grow the AI Champions network to 120 active champions across all 12 DEWA divisions.',
    owner: 'adoption-office',
    status: 'in-progress',
    priority: 'high',
  },
  {
    id: 'r4',
    phase: 'now',
    theme: 'capability',
    title: 'AI Academy — Cohort 2 Launch',
    description: 'Launch the second AI Academy cohort targeting 400 additional employees across Engineering and Operations.',
    owner: 'ai-acceleration',
    status: 'in-progress',
    priority: 'high',
  },
  // NEXT
  {
    id: 'r5',
    phase: 'next',
    theme: 'analytics',
    title: 'Adoption Analytics — Advanced Insights',
    description: 'Build advanced analytics layer with cohort analysis, drop-off detection, and division-level benchmarking.',
    owner: 'command-center',
    status: 'planned',
    priority: 'high',
  },
  {
    id: 'r6',
    phase: 'next',
    theme: 'value-tracking',
    title: 'Business Value Tracking Model',
    description: 'Deploy a structured methodology for quantifying and reporting AI-driven cost savings, productivity gains, and process improvements.',
    owner: 'adoption-office',
    status: 'planned',
    priority: 'high',
  },
  {
    id: 'r7',
    phase: 'next',
    theme: 'partnerships',
    title: 'Strategic AI Partner Ecosystem Expansion',
    description: 'Formalise partnerships with 3 additional strategic AI technology providers to expand enterprise tool access.',
    owner: 'ai-acceleration',
    status: 'planned',
    priority: 'medium',
  },
  {
    id: 'r8',
    phase: 'next',
    theme: 'command-center',
    title: 'Physical Command Center Design',
    description: 'Design and plan the physical AI Command Center space for leadership briefings, showcase events, and live adoption monitoring.',
    owner: 'command-center',
    status: 'planned',
    priority: 'medium',
  },
  // FUTURE
  {
    id: 'r9',
    phase: 'future',
    theme: 'command-center',
    title: 'Physical AI Command Center Launch',
    description: 'Open the permanent physical AI Command Center as an executive showcase and live operations hub.',
    owner: 'command-center',
    status: 'planned',
    priority: 'high',
  },
  {
    id: 'r10',
    phase: 'future',
    theme: 'governance',
    title: 'AI Governance Maturity Level 3',
    description: 'Advance governance maturity to include automated compliance monitoring, AI ethics review boards, and enterprise AI policy.',
    owner: 'adoption-office',
    status: 'planned',
    priority: 'high',
  },
  {
    id: 'r11',
    phase: 'future',
    theme: 'capability',
    title: 'AI Centre of Excellence',
    description: 'Evolve the AI Academy into a permanent Centre of Excellence providing continuous learning, certifications, and advanced tracks.',
    owner: 'ai-acceleration',
    status: 'planned',
    priority: 'medium',
  },
  {
    id: 'r12',
    phase: 'future',
    theme: 'strategy',
    title: 'Enterprise AI Adoption Index',
    description: 'Publish an annual DEWA AI Adoption Index benchmarking enterprise adoption against regional and global energy sector peers.',
    owner: 'command-center',
    status: 'planned',
    priority: 'low',
  },
]
```

---

# FILE: content/risks.ts

```typescript
export type RiskSeverity = 'high' | 'medium' | 'low'
export type RiskCategory =
  | 'adoption'
  | 'governance'
  | 'data'
  | 'change-management'
  | 'technology'
  | 'dependencies'

export interface Risk {
  id: string
  category: RiskCategory
  title: string
  description: string
  severity: RiskSeverity
  likelihood: RiskSeverity
  owner: string
  mitigations: string[]
  dependencies: string[]
  status: 'open' | 'mitigated' | 'monitoring'
}

export const risks: Risk[] = [
  {
    id: 'risk-1',
    category: 'adoption',
    title: 'Low Divisional Adoption Velocity',
    description:
      'Some divisions may resist or deprioritise AI adoption due to workload pressures, unclear mandates, or limited local champions.',
    severity: 'high',
    likelihood: 'medium',
    owner: 'AI Adoption Office',
    mitigations: [
      'Activate division-level AI Champions to drive peer adoption',
      'Escalate low-adoption divisions to Department Head for leadership intervention',
      'Provide targeted divisional enablement support through AI Acceleration',
    ],
    dependencies: ['Divisional Director engagement', 'AI Champions activation rate'],
    status: 'monitoring',
  },
  {
    id: 'risk-2',
    category: 'governance',
    title: 'Governance Action Backlog',
    description:
      'Governance review forums may accumulate unresolved actions if participation is inconsistent or capacity is constrained.',
    severity: 'medium',
    likelihood: 'medium',
    owner: 'AI Adoption Office',
    mitigations: [
      'Enforce bi-weekly governance forum attendance with named deputies',
      'Track open actions in the Command Center dashboard with RAG status',
      'Escalate overdue actions to Department Head monthly',
    ],
    dependencies: ['Governance forum participation', 'Command Center reporting accuracy'],
    status: 'open',
  },
  {
    id: 'risk-3',
    category: 'data',
    title: 'Adoption Data Quality Gaps',
    description:
      'Inconsistent or incomplete usage data from AI tools may reduce confidence in KPI reporting and executive dashboards.',
    severity: 'high',
    likelihood: 'medium',
    owner: 'AI Command Center',
    mitigations: [
      'Establish data quality validation process before each reporting cycle',
      'Work with IT to standardise usage data exports from all AI platforms',
      'Flag data gaps visibly in dashboards rather than suppressing incomplete data',
    ],
    dependencies: ['IT platform data exports', 'Vendor API access'],
    status: 'monitoring',
  },
  {
    id: 'risk-4',
    category: 'change-management',
    title: 'Employee Resistance to AI Adoption',
    description:
      'Employees may be concerned about AI replacing roles, creating hesitance to engage with tools or programs.',
    severity: 'high',
    likelihood: 'medium',
    owner: 'AI Acceleration',
    mitigations: [
      'Lead communications with productivity and empowerment narratives, not automation narratives',
      'Engage HR and Communications in messaging strategy',
      'Feature employee success stories prominently in campaigns',
    ],
    dependencies: ['HR communications alignment', 'Leadership tone-setting'],
    status: 'monitoring',
  },
  {
    id: 'risk-5',
    category: 'technology',
    title: 'AI Tool Security or Compliance Issue',
    description:
      'A deployed AI tool may have a security vulnerability, data handling issue, or compliance breach that requires rapid containment.',
    severity: 'high',
    likelihood: 'low',
    owner: 'AI Adoption Office + IT Governance',
    mitigations: [
      'All tools must pass security review before enterprise access is granted',
      'Maintain rapid response protocol for tool suspension if needed',
      'Monitor vendor security advisories continuously',
    ],
    dependencies: ['IT Governance review process', 'Vendor security disclosures'],
    status: 'open',
  },
  {
    id: 'risk-6',
    category: 'dependencies',
    title: 'Cross-Divisional Alignment Delays',
    description:
      'Slow response from divisional stakeholders may delay use case approvals, training deployment, or governance actions.',


1750	    severity: 'medium',
1751	    likelihood: 'high',
1752	    owner: 'AI Adoption Office',
1753	    mitigations: [
1754	      'Maintain a named engagement contact in each division',
1755	      'Escalate alignment gaps to EVP level if unresolved after 2 cycles',
1756	      'Build flexibility into program timelines to absorb divisional delays',
1757	    ],
1758	    dependencies: ['Divisional Director availability', 'Cross-divisional governance mandate'],
1759	    status: 'open',
1760	  },
1761	]
1762	```
1763
1764	---
1765
1766	> **All files above are ready to push to Claude Code.**
1767	> Once loaded, run the build sequence in `Agent.md` Phase 1 → Phase 2 → Phase 3.
1768	> Start Claude Code with: *"Read README.md, Design.md, and Agent.md first, then begin Phase 1 of the build sequence."*
1769
[result-id: r8]

    severity: 'medium',
    likelihood: 'high',
    owner: 'AI Adoption Office',
    mitigations: [
      'Maintain a named engagement contact in each division',
      'Escalate alignment gaps to EVP level if unresolved after 2 cycles',
      'Build flexibility into program timelines to absorb divisional delays',
    ],
    dependencies: ['Divisional Director availability', 'Cross-divisional governance mandate'],
    status: 'open',
  },
]
```

---

> **All files above are ready to push to Claude Code.**
> Once loaded, run the build sequence in `Agent.md` Phase 1 → Phase 2 → Phase 3.
> Start Claude Code with: *"Read README.md, Design.md, and Agent.md first, then begin Phase 1 of the build sequence."*


Now I have the full bundle. Let me check the current project state and create all files.


CLAUDE_CODE_BUNDLE.md
README.md
next-env.d.ts
next.config.mjs
node_modules
package-lock.json
package.json
postcss.config.mjs
src
tailwind.config.ts
tsconfig.json
[rerun: b1]


{
  "name": "dewa-ai-adoption",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.35"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "eslint": "^8",
    "eslint-config-next": "14.2.35"
  }
}
[result-id: r9]
[rerun: b2]


Bash

ls /Users/khalidbinkalban/Desktop/My\ Workstation/dewa-ai-adoption/src/ && cat /Users/khalidbinkalban/Desktop/My\ Workstation/dewa-ai-adoption/src/app/globals.css | head -30


app
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}
[result-id: r10]
[rerun: b3]


Good. Now let me create all files simultaneously. Starting with the doc files and content files.


Write

# DEWA AI Adoption Department — Executive UI

A premium, executive-level strategic dashboard presenting the full operating
model of the DEWA AI Adoption Department to leadership, department heads,
and internal teams.

---

## Project Purpose

This is not a generic org chart.
This is a digital operating model — an executive command center that makes
the AI Adoption Department's strategy, structure, responsibilities, KPIs,
governance, and roadmap immediately clear to any leadership audience.

---

## Tech Stack

| Layer        | Choice                          |
|---|---|
| Framework    | Next.js 14 (App Router)         |
| Language     | TypeScript (strict mode)        |
| Styling      | Tailwind CSS + CSS variables    |
| Components   | shadcn/ui (New York style)      |
| Animation    | Framer Motion                   |
| Charts       | Recharts                        |
| Icons        | Lucide React                    |
| Data         | Local TypeScript content files  |

---

## Folder Structure

```
dewa-ai-adoption/
├── README.md
├── Design.md
├── Agent.md
├── package.json
├── tsconfig.json
├── tailwind.config.ts
├── next.config.ts
│
├── public/
│   └── dewa-logo.svg
│
├── content/                        ← All editable content lives here
│   ├── department.ts
│   ├── sections.ts
│   ├── kpis.ts
│   ├── governance.ts
│   ├── operating-model.ts
│   ├── roadmap.ts
│   └── risks.ts
│
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx                ← Entry: overview screen
│   │   └── globals.css
│   │
│   ├── components/
│   │   ├── layout/
│   │   │   ├── SiteNav.tsx
│   │   │   ├── SideNav.tsx
│   │   │   └── SectionWrapper.tsx
│   │   │
│   │   ├── overview/
│   │   │   ├── HeroBanner.tsx
│   │   │   ├── MissionStatement.tsx
│   │   │   ├── ValuePillars.tsx
│   │   │   ├── KpiStrip.tsx
│   │   │   └── SectionQuickView.tsx
│   │   │
│   │   ├── structure/
│   │   │   ├── DepartmentMap.tsx
│   │   │   ├── SectionCard.tsx
│   │   │   └── ConnectionFlow.tsx
│   │   │
│   │   ├── responsibilities/
│   │   │   ├── ResponsibilityPanel.tsx
│   │   │   └── ResponsibilityRow.tsx
│   │   │
│   │   ├── kpis/
│   │   │   ├── KpiCockpit.tsx
│   │   │   ├── KpiCard.tsx
│   │   │   ├── KpiTrend.tsx
│   │   │   └── KpiTargetBar.tsx
│   │   │
│   │   ├── governance/
│   │   │   ├── GovernanceMap.tsx
│   │   │   ├── PrincipleCard.tsx
│   │   │   └── DecisionLayer.tsx
│   │   │
│   │   ├── operating-model/
│   │   │   ├── OperatingFlow.tsx
│   │   │   ├── FlowStage.tsx
│   │   │   └── SectionSwimlane.tsx
│   │   │
│   │   ├── roadmap/
│   │   │   ├── RoadmapView.tsx
│   │   │   └── RoadmapPhase.tsx
│   │   │
│   │   ├── risks/
│   │   │   ├── RiskRegister.tsx
│   │   │   └── RiskCard.tsx
│   │   │
│   │   ├── impact/
│   │   │   └── StrategicImpact.tsx
│   │   │
│   │   └── ui/                     ← shadcn/ui primitives (auto-generated)
│   │
│   ├── hooks/
│   │   └── useActiveSection.ts
│   │
│   └── lib/
│       ├── utils.ts
│       └── tokens.ts               ← Design token constants
```

---

## Getting Started

```bash
# 1. Install dependencies
npm install

# 2. Run dev server
npm run dev

# 3. Open in browser
http://localhost:3000
```

---

## Content Editing

All department content is in `/content/*.ts`.
Edit those files to update any section without touching components.

---

## Key Constraints

- Desktop-first. Tablet fallback required. Mobile is secondary.
- No Lorem Ipsum anywhere. All placeholder text must be DEWA-context relevant.
- No startup/SaaS visual patterns.
- No emoji in headings or body copy.
- No generic gradient backgrounds.
- Every section must answer a specific leadership question (see Design.md).


<tool_use_error>File has not been read yet. Read it first before writing to it.</tool_use_error>

Error: File has not been read yet. Read it first before writing to it.


1	This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
2
3	## Getting Started
4
5	First, run the development server:

This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).

## Getting Started

First, run the development server:


Now I can write all the files. Let me create everything in parallel.


# DEWA AI Adoption Department — Executive UI

A premium, executive-level strategic dashboard presenting the full operating
model of the DEWA AI Adoption Department to leadership, department heads,
and internal teams.

---

## Project Purpose

This is not a generic org chart.
This is a digital operating model — an executive command center that makes
the AI Adoption Department's strategy, structure, responsibilities, KPIs,
governance, and roadmap immediately clear to any leadership audience.

---

## Tech Stack

| Layer        | Choice                          |
|---|---|
| Framework    | Next.js 14 (App Router)         |
| Language     | TypeScript (strict mode)        |
| Styling      | Tailwind CSS + CSS variables    |
| Components   | shadcn/ui (New York style)      |
| Animation    | Framer Motion                   |
| Charts       | Recharts                        |
| Icons        | Lucide React                    |
| Data         | Local TypeScript content files  |

---

## Folder Structure

```
dewa-ai-adoption/
├── README.md
├── Design.md
├── Agent.md
├── package.json
├── tsconfig.json
├── tailwind.config.ts
├── next.config.ts
│
├── public/
│   └── dewa-logo.svg
│
├── content/                        ← All editable content lives here
│   ├── department.ts
│   ├── sections.ts
│   ├── kpis.ts
│   ├── governance.ts
│   ├── operating-model.ts
│   ├── roadmap.ts
│   └── risks.ts
│
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx                ← Entry: overview screen
│   │   └── globals.css
│   │
│   ├── components/
│   │   ├── layout/
│   │   │   ├── SiteNav.tsx
│   │   │   ├── SideNav.tsx
│   │   │   └── SectionWrapper.tsx
│   │   │
│   │   ├── overview/
│   │   │   ├── HeroBanner.tsx
│   │   │   ├── MissionStatement.tsx
│   │   │   ├── ValuePillars.tsx
│   │   │   ├── KpiStrip.tsx
│   │   │   └── SectionQuickView.tsx
│   │   │
│   │   ├── structure/
│   │   │   ├── DepartmentMap.tsx
│   │   │   ├── SectionCard.tsx
│   │   │   └── ConnectionFlow.tsx
│   │   │
│   │   ├── responsibilities/
│   │   │   ├── ResponsibilityPanel.tsx
│   │   │   └── ResponsibilityRow.tsx
│   │   │
│   │   ├── kpis/
│   │   │   ├── KpiCockpit.tsx
│   │   │   ├── KpiCard.tsx
│   │   │   ├── KpiTrend.tsx
│   │   │   └── KpiTargetBar.tsx
│   │   │
│   │   ├── governance/
│   │   │   ├── GovernanceMap.tsx
│   │   │   ├── PrincipleCard.tsx
│   │   │   └── DecisionLayer.tsx
│   │   │
│   │   ├── operating-model/
│   │   │   ├── OperatingFlow.tsx
│   │   │   ├── FlowStage.tsx
│   │   │   └── SectionSwimlane.tsx
│   │   │
│   │   ├── roadmap/
│   │   │   ├── RoadmapView.tsx
│   │   │   └── RoadmapPhase.tsx
│   │   │
│   │   ├── risks/
│   │   │   ├── RiskRegister.tsx
│   │   │   └── RiskCard.tsx
│   │   │
│   │   ├── impact/
│   │   │   └── StrategicImpact.tsx
│   │   │
│   │   └── ui/                     ← shadcn/ui primitives (auto-generated)
│   │
│   ├── hooks/
│   │   └── useActiveSection.ts
│   │
│   └── lib/
│       ├── utils.ts
│       └── tokens.ts               ← Design token constants
```

---

## Getting Started

```bash
# 1. Install dependencies
npm install

# 2. Run dev server
npm run dev

# 3. Open in browser
http://localhost:3000
```

---

## Content Editing

All department content is in `/content/*.ts`.
Edit those files to update any section without touching components.

---

## Key Constraints

- Desktop-first. Tablet fallback required. Mobile is secondary.
- No Lorem Ipsum anywhere. All placeholder text must be DEWA-context relevant.
- No startup/SaaS visual patterns.
- No emoji in headings or body copy.
- No generic gradient backgrounds.
- Every section must answer a specific leadership question (see Design.md).


The file /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/README.md has been updated successfully.

# DEWA AI Adoption Department — Executive UI

A premium, executive-level strategic dashboard presenting the full operating
model of the DEWA AI Adoption Department to leadership, department heads,
and internal teams.

---

## Project Purpose

This is not a generic org chart.
This is a digital operating model — an executive command center that makes
the AI Adoption Department's strategy, structure, responsibilities, KPIs,
governance, and roadmap immediately clear to any leadership audience.

---

## Tech Stack

| Layer        | Choice                          |
|---|---|
| Framework    | Next.js 14 (App Router)         |
| Language     | TypeScript (strict mode)        |
| Styling      | Tailwind CSS + CSS variables    |
| Components   | shadcn/ui (New York style)      |
| Animation    | Framer Motion                   |
| Charts       | Recharts                        |
| Icons        | Lucide React                    |
| Data         | Local TypeScript content files  |

---

## Folder Structure

```
dewa-ai-adoption/
├── README.md
├── Design.md
├── Agent.md
├── package.json
├── tsconfig.json
├── tailwind.config.ts
├── next.config.ts
│
├── public/
│   └── dewa-logo.svg
│
├── content/                        ← All editable content lives here
│   ├── department.ts
│   ├── sections.ts
│   ├── kpis.ts
│   ├── governance.ts
│   ├── operating-model.ts
│   ├── roadmap.ts
│   └── risks.ts
│
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx                ← Entry: overview screen
│   │   └── globals.css
│   │
│   ├── components/
│   │   ├── layout/
│   │   │   ├── SiteNav.tsx
│   │   │   ├── SideNav.tsx
│   │   │   └── SectionWrapper.tsx
│   │   │
│   │   ├── overview/
│   │   │   ├── HeroBanner.tsx
│   │   │   ├── MissionStatement.tsx
│   │   │   ├── ValuePillars.tsx
│   │   │   ├── KpiStrip.tsx
│   │   │   └── SectionQuickView.tsx
│   │   │
│   │   ├── structure/
│   │   │   ├── DepartmentMap.tsx
│   │   │   ├── SectionCard.tsx
│   │   │   └── ConnectionFlow.tsx
│   │   │
│   │   ├── responsibilities/
│   │   │   ├── ResponsibilityPanel.tsx
│   │   │   └── ResponsibilityRow.tsx
│   │   │
│   │   ├── kpis/
│   │   │   ├── KpiCockpit.tsx
│   │   │   ├── KpiCard.tsx
│   │   │   ├── KpiTrend.tsx
│   │   │   └── KpiTargetBar.tsx
│   │   │
│   │   ├── governance/
│   │   │   ├── GovernanceMap.tsx
│   │   │   ├── PrincipleCard.tsx
│   │   │   └── DecisionLayer.tsx
│   │   │
│   │   ├── operating-model/
│   │   │   ├── OperatingFlow.tsx
│   │   │   ├── FlowStage.tsx
│   │   │   └── SectionSwimlane.tsx
│   │   │
│   │   ├── roadmap/
│   │   │   ├── RoadmapView.tsx
│   │   │   └── RoadmapPhase.tsx
│   │   │
│   │   ├── risks/
│   │   │   ├── RiskRegister.tsx
│   │   │   └── RiskCard.tsx
│   │   │
│   │   ├── impact/
│   │   │   └── StrategicImpact.tsx
│   │   │
│   │   └── ui/                     ← shadcn/ui primitives (auto-generated)
│   │
│   ├── hooks/
│   │   └── useActiveSection.ts
│   │
│   └── lib/
│       ├── utils.ts
│       └── tokens.ts               ← Design token constants
```

---

## Getting Started

```bash
# 1. Install dependencies
npm install

# 2. Run dev server
npm run dev

# 3. Open in browser
http://localhost:3000
```

---

## Content Editing

All department content is in `/content/*.ts`.
Edit those files to update any section without touching components.

---

## Key Constraints

- Desktop-first. Tablet fallback required. Mobile is secondary.
- No Lorem Ipsum anywhere. All placeholder text must be DEWA-context relevant.
- No startup/SaaS visual patterns.
- No emoji in headings or body copy.
- No generic gradient backgrounds.
- Every section must answer a specific leadership question (see Design.md).

-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).

+# DEWA AI Adoption Department — Executive UI

+A premium, executive-level strategic dashboard presenting the full operating

+model of the DEWA AI Adoption Department to leadership, department heads,

+This is a digital operating model — an executive command center that makes

+the AI Adoption Department's strategy, structure, responsibilities, KPIs,

+governance, and roadmap immediately clear to any leadership audience.

+| Layer        | Choice                          |

+| Framework    | Next.js 14 (App Router)         |

+| Language     | TypeScript (strict mode)        |

+| Styling      | Tailwind CSS + CSS variables    |

+| Components   | shadcn/ui (New York style)      |

+| Animation    | Framer Motion                   |

+| Charts       | Recharts                        |

+| Icons        | Lucide React                    |

+| Data         | Local TypeScript content files  |

+├── content/                        ← All editable content lives here

+│   │   ├── page.tsx                ← Entry: overview screen

+│   │   │   ├── ResponsibilityPanel.tsx

+│   │   └── ui/                     ← shadcn/ui primitives (auto-generated)

+│       └── tokens.ts               ← Design token constants

-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.

-To learn more about Next.js, take a look at the following resources:

-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!

+All department content is in `/content/*.ts`.

+Edit those files to update any section without touching components.

-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

+- Desktop-first. Tablet fallback required. Mobile is secondary.

+- No Lorem Ipsum anywhere. All placeholder text must be DEWA-context relevant.

+- Every section must answer a specific leadership question (see Design.md).

This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.


# Design System — DEWA AI Adoption Executive UI

This file is the single source of truth for all visual decisions.
Claude Code must follow this exactly and not deviate.

---

## Design Philosophy

This UI must feel like a McKinsey strategy deck brought to life digitally.
It is not a product dashboard. It is not a SaaS app. It is an executive
operating model — premium, authoritative, and instantly legible.

Every visual decision must reinforce three qualities:
1. **Strategic authority** — this department is serious
2. **Executive clarity** — leadership understands in under 2 minutes
3. **Enterprise maturity** — this is not a pilot project

---

## Colour Tokens

Define these in `tailwind.config.ts` and `globals.css` as CSS variables.

```css
/* Base */
--color-bg:               #070D1A;   /* Deep navy — page background */
--color-surface:          #0D1627;   /* Card and panel background */
--color-surface-raised:   #132035;   /* Elevated card, hover state */
--color-surface-border:   #1E3A5F;   /* Borders, dividers */

/* Brand */
--color-primary:          #0066FF;   /* Electric blue — primary actions */
--color-primary-dim:      #0044BB;   /* Pressed/active primary */
--color-accent:           #00C2FF;   /* Cyan — AI/innovation signals */
--color-gold:             #F0A500;   /* Soft gold — executive emphasis */
--color-gold-dim:         #C98800;   /* Secondary gold use */

/* Semantic */
--color-success:          #22C55E;   /* On-track indicators */
--color-warning:          #F59E0B;   /* At-risk indicators */
--color-danger:           #EF4444;   /* Critical risks */
--color-info:             #38BDF8;   /* Info, neutral signal */

/* Typography */
--color-text:             #EEF2FF;   /* Primary body text */
--color-text-secondary:   #8BAFD4;   /* Muted text, labels */
--color-text-dim:         #4A6B8A;   /* Disabled, placeholder */
```

### Colour Usage Rules

| Element                      | Token                        |
|---|---|
| Page background              | `--color-bg`                 |
| Cards / panels               | `--color-surface`            |
| Hovered / active cards       | `--color-surface-raised`     |
| All borders                  | `--color-surface-border`     |
| Primary CTAs                 | `--color-primary`            |
| AI / innovation signals      | `--color-accent`             |
| Executive KPI emphasis       | `--color-gold`               |
| Strategic pillar highlights  | gradient: primary → accent   |
| Section 1 (AI Adoption Office)    | `--color-primary`       |
| Section 2 (AI Acceleration)       | `--color-accent`        |
| Section 3 (AI Command Center)     | `--color-gold`          |

---

## Typography

Font: **Inter** (via next/font/google)

```css
/* Scale */
--text-xs:    11px;
--text-sm:    13px;
--text-base:  15px;
--text-md:    17px;
--text-lg:    20px;
--text-xl:    24px;
--text-2xl:   30px;
--text-3xl:   38px;
--text-4xl:   48px;

/* Weight */
--weight-regular:  400;
--weight-medium:   500;
--weight-semibold: 600;
--weight-bold:     700;

/* Line height */
--leading-tight:   1.2;
--leading-normal:  1.5;
--leading-relaxed: 1.7;

/* Letter spacing */
--tracking-wide:    0.04em;  /* Labels, caps, kpis */
--tracking-widest:  0.1em;   /* Section eyebrows */
```

### Typography Hierarchy

| Role                   | Size     | Weight    | Color              | Transform   |
|---|---|---|---|---|
| Page hero headline     | 4xl      | bold      | text               | none        |
| Section headline       | 2xl      | semibold  | text               | none        |
| Card title             | lg       | semibold  | text               | none        |
| Eyebrow / label        | xs       | medium    | text-secondary     | uppercase   |
| Body copy              | base     | regular   | text-secondary     | none        |
| KPI number             | 3xl      | bold      | gold               | none        |
| KPI label              | xs       | medium    | text-dim           | uppercase   |
| Badge / tag text       | xs       | semibold  | varies             | uppercase   |

---

## Spacing

Base unit: `4px`

```
space-1  =  4px
space-2  =  8px
space-3  =  12px
space-4  =  16px
space-5  =  20px
space-6  =  24px
space-8  =  32px
space-10 =  40px
space-12 =  48px
space-16 =  64px
space-20 =  80px
space-24 =  96px
```

Section vertical padding: `space-20` top, `space-20` bottom.
Card internal padding: `space-6` all sides.
Grid gap between cards: `space-6`.

---

## Border Radius

```
--radius-sm:   4px    (tags, badges, small inputs)
--radius-md:   8px    (buttons, small cards)
--radius-lg:   12px   (standard cards)
--radius-xl:   16px   (hero cards, large panels)
--radius-full: 9999px (pills, avatars)
```

---

## Elevation / Shadow

```css
--shadow-card:   0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(30,58,95,0.6);
--shadow-raised: 0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,102,255,0.15);
--shadow-glow-blue: 0 0 24px rgba(0,102,255,0.2);
--shadow-glow-gold: 0 0 24px rgba(240,165,0,0.15);
```

Use `shadow-card` by default.
Use `shadow-raised` on hover.
Use `shadow-glow-blue` on primary action cards.
Use `shadow-glow-gold` on executive KPI highlight cards.

---

## Animation

Library: Framer Motion

```ts
// Standard page section reveal
const sectionReveal = {
  initial: { opacity: 0, y: 24 },
  animate: { opacity: 1, y: 0 },
  transition: { duration: 0.45, ease: [0.22, 1, 0.36, 1] }
};

// Card hover lift
const cardHover = {
  whileHover: { y: -3, transition: { duration: 0.2 } }
};

// Stagger children
const staggerContainer = {
  animate: { transition: { staggerChildren: 0.07 } }
};

// Number count-up for KPIs
// Use: react-countup or manual framer-motion useTransform
```

### Animation Rules

- Entrance: fade + translate Y only. Never scale on entrance.
- Duration: 350–500ms for sections. 150–200ms for micro-interactions.
- Easing: always use a custom ease curve, never `linear`.
- No looping animations on the main UI (no pulsing rings, no rotating elements).
- Subtle gradient shimmer on KPI cards is acceptable.
- Navigation transitions: cross-fade, 200ms.

---

## Layout

### Grid System

```
max-width:      1440px
content-width:  1200px
gutter:         24px
columns:        12
```

### Navigation

Sticky top navigation bar:
- Height: 64px
- Background: `--color-bg` with `backdrop-blur`
- Left: DEWA logo + department name
- Right: section anchor links (Overview, Structure, Responsibilities, KPIs, Governance, Operating Model, Roadmap, Risks, Impact)
- Active link: underline with `--color-primary`
- Mobile: collapses to hamburger menu

### Responsive Breakpoints

```
sm:  640px   — phones (secondary)
md:  768px   — tablets (required fallback)
lg:  1024px  — small laptop (primary)
xl:  1280px  — desktop (primary)
2xl: 1440px  — large display (primary)
```

Tablet (`md`): Two-column card grids become one column.
Mobile (`sm`): Navigation becomes bottom sheet. Cards full-width.

---

## Component Patterns

### Card

```tsx
// Standard card
<div className="
  bg-surface border border-surface-border rounded-xl p-6
  shadow-card hover:shadow-raised hover:bg-surface-raised
  transition-all duration-200
">
```

### Section Eyebrow

```tsx
// Always appears above section headlines
<p className="text-xs font-medium tracking-widest uppercase text-text-dim mb-2">
  Section Label
</p>
```

### KPI Card

```tsx
<div className="bg-surface border border-surface-border rounded-xl p-6 shadow-glow-gold">
  <p className="text-xs uppercase tracking-widest text-text-dim mb-1">KPI Label</p>
  <p className="text-3xl font-bold text-gold">87%</p>
  <p className="text-xs text-text-secondary mt-1">↑ 4.2% vs last quarter</p>
</div>
```

### Status Badge

```tsx
// on-track | at-risk | critical | planned
const statusMap = {
  "on-track": "bg-success/10 text-success border-success/20",
  "at-risk":  "bg-warning/10 text-warning border-warning/20",
  "critical": "bg-danger/10 text-danger border-danger/20",
  "planned":  "bg-primary/10 text-primary border-primary/20",
};
<span className={`text-xs font-semibold uppercase tracking-wide px-2.5 py-1 rounded-full border ${statusMap[status]}`}>
  {label}
</span>
```

### Section Divider

```tsx
<div className="w-12 h-0.5 bg-gradient-to-r from-primary to-accent rounded-full my-4" />
```

---

## What to Avoid

Never use:
- White or light backgrounds
- Rounded pill cards (use `rounded-xl`, not `rounded-full` for cards)
- Gradient text on body copy (only on hero headline)
- Neon glow effects on more than one element per section
- Generic SaaS illustration styles (no isometric people/rockets)
- More than 3 colours in any single card
- Horizontal scrolling anywhere
- Skeleton loaders with white shimmer (use dark shimmer)
- Emoji in any UI text

---

## Leadership Questions Each Section Must Answer

| Screen               | Question Answered                                  |
|---|---|
| Overview             | What is this department and why does it exist?     |
| Department Structure | How is it structured and how do the parts relate?  |
| Responsibilities     | Who owns what and what does each section deliver?  |
| KPI Framework        | How is success measured?                           |
| Governance           | How is AI adoption controlled and overseen?        |
| Operating Model      | How does the department work end-to-end?           |
| Roadmap              | What is happening now, next, and in the future?    |
| Risks                | What are the risks and how are they mitigated?     |
| Strategic Impact     | Why does this department matter to DEWA?           |


File created successfully at: /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/Design.md

# Design System — DEWA AI Adoption Executive UI

This file is the single source of truth for all visual decisions.
Claude Code must follow this exactly and not deviate.

---

## Design Philosophy

This UI must feel like a McKinsey strategy deck brought to life digitally.
It is not a product dashboard. It is not a SaaS app. It is an executive
operating model — premium, authoritative, and instantly legible.

Every visual decision must reinforce three qualities:
1. **Strategic authority** — this department is serious
2. **Executive clarity** — leadership understands in under 2 minutes
3. **Enterprise maturity** — this is not a pilot project

---

## Colour Tokens

Define these in `tailwind.config.ts` and `globals.css` as CSS variables.

```css
/* Base */
--color-bg:               #070D1A;   /* Deep navy — page background */
--color-surface:          #0D1627;   /* Card and panel background */
--color-surface-raised:   #132035;   /* Elevated card, hover state */
--color-surface-border:   #1E3A5F;   /* Borders, dividers */

/* Brand */
--color-primary:          #0066FF;   /* Electric blue — primary actions */
--color-primary-dim:      #0044BB;   /* Pressed/active primary */
--color-accent:           #00C2FF;   /* Cyan — AI/innovation signals */
--color-gold:             #F0A500;   /* Soft gold — executive emphasis */
--color-gold-dim:         #C98800;   /* Secondary gold use */

/* Semantic */
--color-success:          #22C55E;   /* On-track indicators */
--color-warning:          #F59E0B;   /* At-risk indicators */
--color-danger:           #EF4444;   /* Critical risks */
--color-info:             #38BDF8;   /* Info, neutral signal */

/* Typography */
--color-text:             #EEF2FF;   /* Primary body text */
--color-text-secondary:   #8BAFD4;   /* Muted text, labels */
--color-text-dim:         #4A6B8A;   /* Disabled, placeholder */
```

### Colour Usage Rules

| Element                      | Token                        |
|---|---|
| Page background              | `--color-bg`                 |
| Cards / panels               | `--color-surface`            |
| Hovered / active cards       | `--color-surface-raised`     |
| All borders                  | `--color-surface-border`     |
| Primary CTAs                 | `--color-primary`            |
| AI / innovation signals      | `--color-accent`             |
| Executive KPI emphasis       | `--color-gold`               |
| Strategic pillar highlights  | gradient: primary → accent   |
| Section 1 (AI Adoption Office)    | `--color-primary`       |
| Section 2 (AI Acceleration)       | `--color-accent`        |
| Section 3 (AI Command Center)     | `--color-gold`          |

---

## Typography

Font: **Inter** (via next/font/google)

```css
/* Scale */
--text-xs:    11px;
--text-sm:    13px;
--text-base:  15px;
--text-md:    17px;
--text-lg:    20px;
--text-xl:    24px;
--text-2xl:   30px;
--text-3xl:   38px;
--text-4xl:   48px;

/* Weight */
--weight-regular:  400;
--weight-medium:   500;
--weight-semibold: 600;
--weight-bold:     700;

/* Line height */
--leading-tight:   1.2;
--leading-normal:  1.5;
--leading-relaxed: 1.7;

/* Letter spacing */
--tracking-wide:    0.04em;  /* Labels, caps, kpis */
--tracking-widest:  0.1em;   /* Section eyebrows */
```

### Typography Hierarchy

| Role                   | Size     | Weight    | Color              | Transform   |
|---|---|---|---|---|
| Page hero headline     | 4xl      | bold      | text               | none        |
| Section headline       | 2xl      | semibold  | text               | none        |
| Card title             | lg       | semibold  | text               | none        |
| Eyebrow / label        | xs       | medium    | text-secondary     | uppercase   |
| Body copy              | base     | regular   | text-secondary     | none        |
| KPI number             | 3xl      | bold      | gold               | none        |
| KPI label              | xs       | medium    | text-dim           | uppercase   |
| Badge / tag text       | xs       | semibold  | varies             | uppercase   |

---

## Spacing

Base unit: `4px`

```
space-1  =  4px
space-2  =  8px
space-3  =  12px
space-4  =  16px
space-5  =  20px
space-6  =  24px
space-8  =  32px
space-10 =  40px
space-12 =  48px
space-16 =  64px
space-20 =  80px
space-24 =  96px
```

Section vertical padding: `space-20` top, `space-20` bottom.
Card internal padding: `space-6` all sides.
Grid gap between cards: `space-6`.

---

## Border Radius

```
--radius-sm:   4px    (tags, badges, small inputs)
--radius-md:   8px    (buttons, small cards)
--radius-lg:   12px   (standard cards)
--radius-xl:   16px   (hero cards, large panels)
--radius-full: 9999px (pills, avatars)
```

---

## Elevation / Shadow

```css
--shadow-card:   0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(30,58,95,0.6);
--shadow-raised: 0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,102,255,0.15);
--shadow-glow-blue: 0 0 24px rgba(0,102,255,0.2);
--shadow-glow-gold: 0 0 24px rgba(240,165,0,0.15);
```

Use `shadow-card` by default.
Use `shadow-raised` on hover.
Use `shadow-glow-blue` on primary action cards.
Use `shadow-glow-gold` on executive KPI highlight cards.

---

## Animation

Library: Framer Motion

```ts
// Standard page section reveal
const sectionReveal = {
  initial: { opacity: 0, y: 24 },
  animate: { opacity: 1, y: 0 },
  transition: { duration: 0.45, ease: [0.22, 1, 0.36, 1] }
};

// Card hover lift
const cardHover = {
  whileHover: { y: -3, transition: { duration: 0.2 } }
};

// Stagger children
const staggerContainer = {
  animate: { transition: { staggerChildren: 0.07 } }
};

// Number count-up for KPIs
// Use: react-countup or manual framer-motion useTransform
```

### Animation Rules

- Entrance: fade + translate Y only. Never scale on entrance.
- Duration: 350–500ms for sections. 150–200ms for micro-interactions.
- Easing: always use a custom ease curve, never `linear`.
- No looping animations on the main UI (no pulsing rings, no rotating elements).
- Subtle gradient shimmer on KPI cards is acceptable.
- Navigation transitions: cross-fade, 200ms.

---

## Layout

### Grid System

```
max-width:      1440px
content-width:  1200px
gutter:         24px
columns:        12
```

### Navigation

Sticky top navigation bar:
- Height: 64px
- Background: `--color-bg` with `backdrop-blur`
- Left: DEWA logo + department name
- Right: section anchor links (Overview, Structure, Responsibilities, KPIs, Governance, Operating Model, Roadmap, Risks, Impact)
- Active link: underline with `--color-primary`
- Mobile: collapses to hamburger menu

### Responsive Breakpoints

```
sm:  640px   — phones (secondary)
md:  768px   — tablets (required fallback)
lg:  1024px  — small laptop (primary)
xl:  1280px  — desktop (primary)
2xl: 1440px  — large display (primary)
```

Tablet (`md`): Two-column card grids become one column.
Mobile (`sm`): Navigation becomes bottom sheet. Cards full-width.

---

## Component Patterns

### Card

```tsx
// Standard card
<div className="
  bg-surface border border-surface-border rounded-xl p-6
  shadow-card hover:shadow-raised hover:bg-surface-raised
  transition-all duration-200
">
```

### Section Eyebrow

```tsx
// Always appears above section headlines
<p className="text-xs font-medium tracking-widest uppercase text-text-dim mb-2">
  Section Label
</p>
```

### KPI Card

```tsx
<div className="bg-surface border border-surface-border rounded-xl p-6 shadow-glow-gold">
  <p className="text-xs uppercase tracking-widest text-text-dim mb-1">KPI Label</p>
  <p className="text-3xl font-bold text-gold">87%</p>
  <p className="text-xs text-text-secondary mt-1">↑ 4.2% vs last quarter</p>
</div>
```

### Status Badge

```tsx
// on-track | at-risk | critical | planned
const statusMap = {
  "on-track": "bg-success/10 text-success border-success/20",
  "at-risk":  "bg-warning/10 text-warning border-warning/20",
  "critical": "bg-danger/10 text-danger border-danger/20",
  "planned":  "bg-primary/10 text-primary border-primary/20",
};
<span className={`text-xs font-semibold uppercase tracking-wide px-2.5 py-1 rounded-full border ${statusMap[status]}`}>
  {label}
</span>
```

### Section Divider

```tsx
<div className="w-12 h-0.5 bg-gradient-to-r from-primary to-accent rounded-full my-4" />
```

---

## What to Avoid

Never use:
- White or light backgrounds
- Rounded pill cards (use `rounded-xl`, not `rounded-full` for cards)
- Gradient text on body copy (only on hero headline)
- Neon glow effects on more than one element per section
- Generic SaaS illustration styles (no isometric people/rockets)
- More than 3 colours in any single card
- Horizontal scrolling anywhere
- Skeleton loaders with white shimmer (use dark shimmer)
- Emoji in any UI text

---

## Leadership Questions Each Section Must Answer

| Screen               | Question Answered                                  |
|---|---|
| Overview             | What is this department and why does it exist?     |
| Department Structure | How is it structured and how do the parts relate?  |
| Responsibilities     | Who owns what and what does each section deliver?  |
| KPI Framework        | How is success measured?                           |
| Governance           | How is AI adoption controlled and overseen?        |
| Operating Model      | How does the department work end-to-end?           |
| Roadmap              | What is happening now, next, and in the future?    |
| Risks                | What are the risks and how are they mitigated?     |
| Strategic Impact     | Why does this department matter to DEWA?           |


# Agent Instructions — DEWA AI Adoption Executive UI
> Read this file before writing any code.
> This file defines how Claude Code should behave as a build agent on this project.

---

## Agent Role

You are a senior full-stack engineer and UI/UX specialist building a premium
executive web experience for the DEWA AI Adoption Department.

You are not building a generic dashboard template.
You are building a strategic command center for leadership audiences.

---

## Core Mandate

1. Follow `Design.md` exactly for all visual decisions. Do not invent new colours, fonts, or patterns.
2. All department content comes from `/content/*.ts`. Never hardcode content strings inside components.
3. Every component must be typed with TypeScript. No `any`.
4. Every section must be independently navigable via the sticky nav.
5. The UI must tell a clear strategic story from top to bottom.

---

## Build Sequence

Follow this exact order. Do not skip ahead.

### Phase 1 — Foundation
- [ ] Init Next.js 14 App Router project with TypeScript
- [ ] Configure Tailwind with all tokens from Design.md
- [ ] Install and configure shadcn/ui (New York style, dark mode)
- [ ] Install framer-motion, recharts, lucide-react
- [ ] Create `/content/` folder and all data files
- [ ] Build root layout with sticky SiteNav
- [ ] Implement smooth anchor scroll behaviour

### Phase 2 — Sections (build in this order)
- [ ] Section 0: HeroBanner + MissionStatement + ValuePillars
- [ ] Section 1: KpiStrip (top-level metrics)
- [ ] Section 2: Department Structure (DepartmentMap + SectionCards)
- [ ] Section 3: Responsibilities (expandable panels per section)
- [ ] Section 4: KPI Cockpit (section-level KPIs with trends)
- [ ] Section 5: Governance (principles + decision layers)
- [ ] Section 6: Operating Model (flow + swimlane)
- [ ] Section 7: Roadmap (Now / Next / Future)
- [ ] Section 8: Risks & Dependencies
- [ ] Section 9: Strategic Impact Summary

### Phase 3 — Polish
- [ ] Add Framer Motion entrance animations to all sections
- [ ] Add hover states to all cards
- [ ] Verify responsive layout at md and sm breakpoints
- [ ] Add count-up animation to all KPI numbers
- [ ] Final typography and spacing pass
- [ ] Lighthouse performance check (target: >90)

---

## Component Rules

### Naming
- Components: PascalCase (`KpiCard.tsx`)
- Hooks: camelCase with `use` prefix (`useActiveSection.ts`)
- Content files: kebab-case (`operating-model.ts`)
- CSS classes: Tailwind only. No inline styles. No CSS modules.

### Structure
Every component file must follow this order:
1. Imports
2. TypeScript interface(s)
3. Component function
4. Export default

### Props
- All props must have explicit TypeScript interfaces
- Use `interface`, not `type` for component props
- Optional props must have `?` and sensible defaults

### Content
- Never write content strings inside JSX
- Always import from `/content/`
- Example:
  ```ts
  // correct
  import { department } from '@/content/department'
  // wrong
  <p>AI Adoption is a strategic enabler...</p>
  ```

---

## Data Handling

All content files export typed objects and arrays.
No API calls. No environment variables needed for content.
The app is fully static and self-contained.

```ts
// Example pattern for all content files
export interface SectionDefinition {
  id: string
  name: string
  color: string
  purpose: string
  responsibilities: string[]
  deliverables: string[]
  kpis: string[]
}

export const sections: SectionDefinition[] = [ ... ]
```

---

## Quality Gates

Before marking any section complete, verify:

- [ ] No content strings hardcoded in JSX
- [ ] No TypeScript errors or `any` types
- [ ] Component matches Design.md colour tokens exactly
- [ ] Card hover state implemented
- [ ] Section entrance animation implemented
- [ ] Section is reachable via sticky nav link
- [ ] Layout does not break at 768px width
- [ ] No horizontal overflow

---

## What NOT to Do

- Do not use white or light mode at any point
- Do not install libraries not listed in README.md without flagging it
- Do not use `console.log` in production components
- Do not create `pages/` directory (this is App Router)
- Do not put content in component files
- Do not use `style={{}}` inline styles
- Do not use generic placeholder text (no Lorem Ipsum, no "Coming soon")
- Do not add loading spinners (use skeleton loaders with dark shimmer)
- Do not use horizontal scroll carousels on desktop
- Do not add social media links, footer links, or unrelated content
- Do not add a light/dark mode toggle (dark only)

---

## Prompt Patterns for This Project

When the user asks you to build or improve a section, follow this pattern:

1. Re-read the relevant section in the spec
2. Check the content file for that section
3. Build the component consuming content from the file
4. Apply Design.md tokens exactly
5. Add Framer Motion entrance animation
6. Confirm the section answers its leadership question (see Design.md)

---

## Escalation

If you encounter a decision not covered by this file or Design.md, stop and ask before proceeding. Do not make visual or structural assumptions on executive-facing screens.


File created successfully at: /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/Agent.md

# Agent Instructions — DEWA AI Adoption Executive UI
> Read this file before writing any code.
> This file defines how Claude Code should behave as a build agent on this project.

---

## Agent Role

You are a senior full-stack engineer and UI/UX specialist building a premium
executive web experience for the DEWA AI Adoption Department.

You are not building a generic dashboard template.
You are building a strategic command center for leadership audiences.

---

## Core Mandate

1. Follow `Design.md` exactly for all visual decisions. Do not invent new colours, fonts, or patterns.
2. All department content comes from `/content/*.ts`. Never hardcode content strings inside components.
3. Every component must be typed with TypeScript. No `any`.
4. Every section must be independently navigable via the sticky nav.
5. The UI must tell a clear strategic story from top to bottom.

---

## Build Sequence

Follow this exact order. Do not skip ahead.

### Phase 1 — Foundation
- [ ] Init Next.js 14 App Router project with TypeScript
- [ ] Configure Tailwind with all tokens from Design.md
- [ ] Install and configure shadcn/ui (New York style, dark mode)
- [ ] Install framer-motion, recharts, lucide-react
- [ ] Create `/content/` folder and all data files
- [ ] Build root layout with sticky SiteNav
- [ ] Implement smooth anchor scroll behaviour

### Phase 2 — Sections (build in this order)
- [ ] Section 0: HeroBanner + MissionStatement + ValuePillars
- [ ] Section 1: KpiStrip (top-level metrics)
- [ ] Section 2: Department Structure (DepartmentMap + SectionCards)
- [ ] Section 3: Responsibilities (expandable panels per section)
- [ ] Section 4: KPI Cockpit (section-level KPIs with trends)
- [ ] Section 5: Governance (principles + decision layers)
- [ ] Section 6: Operating Model (flow + swimlane)
- [ ] Section 7: Roadmap (Now / Next / Future)
- [ ] Section 8: Risks & Dependencies
- [ ] Section 9: Strategic Impact Summary

### Phase 3 — Polish
- [ ] Add Framer Motion entrance animations to all sections
- [ ] Add hover states to all cards
- [ ] Verify responsive layout at md and sm breakpoints
- [ ] Add count-up animation to all KPI numbers
- [ ] Final typography and spacing pass
- [ ] Lighthouse performance check (target: >90)

---

## Component Rules

### Naming
- Components: PascalCase (`KpiCard.tsx`)
- Hooks: camelCase with `use` prefix (`useActiveSection.ts`)
- Content files: kebab-case (`operating-model.ts`)
- CSS classes: Tailwind only. No inline styles. No CSS modules.

### Structure
Every component file must follow this order:
1. Imports
2. TypeScript interface(s)
3. Component function
4. Export default

### Props
- All props must have explicit TypeScript interfaces
- Use `interface`, not `type` for component props
- Optional props must have `?` and sensible defaults

### Content
- Never write content strings inside JSX
- Always import from `/content/`
- Example:
  ```ts
  // correct
  import { department } from '@/content/department'
  // wrong
  <p>AI Adoption is a strategic enabler...</p>
  ```

---

## Data Handling

All content files export typed objects and arrays.
No API calls. No environment variables needed for content.
The app is fully static and self-contained.

```ts
// Example pattern for all content files
export interface SectionDefinition {
  id: string
  name: string
  color: string
  purpose: string
  responsibilities: string[]
  deliverables: string[]
  kpis: string[]
}

export const sections: SectionDefinition[] = [ ... ]
```

---

## Quality Gates

Before marking any section complete, verify:

- [ ] No content strings hardcoded in JSX
- [ ] No TypeScript errors or `any` types
- [ ] Component matches Design.md colour tokens exactly
- [ ] Card hover state implemented
- [ ] Section entrance animation implemented
- [ ] Section is reachable via sticky nav link
- [ ] Layout does not break at 768px width
- [ ] No horizontal overflow

---

## What NOT to Do

- Do not use white or light mode at any point
- Do not install libraries not listed in README.md without flagging it
- Do not use `console.log` in production components
- Do not create `pages/` directory (this is App Router)
- Do not put content in component files
- Do not use `style={{}}` inline styles
- Do not use generic placeholder text (no Lorem Ipsum, no "Coming soon")
- Do not add loading spinners (use skeleton loaders with dark shimmer)
- Do not use horizontal scroll carousels on desktop
- Do not add social media links, footer links, or unrelated content
- Do not add a light/dark mode toggle (dark only)

---

## Prompt Patterns for This Project

When the user asks you to build or improve a section, follow this pattern:

1. Re-read the relevant section in the spec
2. Check the content file for that section
3. Build the component consuming content from the file
4. Apply Design.md tokens exactly
5. Add Framer Motion entrance animation
6. Confirm the section answers its leadership question (see Design.md)

---

## Escalation

If you encounter a decision not covered by this file or Design.md, stop and ask before proceeding. Do not make visual or structural assumptions on executive-facing screens.


Now create all content files in parallel:


Bash

mkdir -p /Users/khalidbinkalban/Desktop/My\ Workstation/dewa-ai-adoption/content


[rerun: b4]


Write

export interface DepartmentOverview {
  name: string
  tagline: string
  mission: string
  mandate: string
  strategicContext: string
  alhashbahNote: string
  valuePillars: ValuePillar[]
  topMetrics: TopMetric[]
}

export interface ValuePillar {
  id: string
  title: string
  description: string
  icon: string
}

export interface TopMetric {
  id: string
  label: string
  value: string
  unit: string
  trend: string
  trendDirection: 'up' | 'down' | 'neutral'
  emphasis: boolean
}

export const department: DepartmentOverview = {
  name: 'AI Adoption Department',
  tagline: 'Enterprise AI. Measurable Value. Strategic Scale.',
  mission:
    'Accelerate safe, measurable, enterprise-wide AI adoption across DEWA — improving efficiency, reducing cost, enhancing processes, strengthening governance, and enabling sustainable business value.',
  mandate:
    'The AI Adoption Department is the central function responsible for orchestrating AI adoption strategy, capability building, partner engagement, performance visibility, and governance alignment across all DEWA divisions.',
  strategicContext:
    'As DEWA advances its digital transformation agenda, the AI Adoption Department serves as the operational backbone that converts AI capability into measurable enterprise outcomes — connecting technology, people, and strategy into a unified adoption engine.',
  alhashbahNote:
    'The department directly supports DEWA\'s AlHasbah cost reduction direction by identifying and scaling AI use cases that reduce operational cost, eliminate process waste, and improve productivity across business functions.',
  valuePillars: [
    {
      id: 'cost-reduction',
      title: 'Cost Reduction',
      description:
        'Identify, accelerate, and scale AI use cases that reduce operational expenditure and process inefficiency across DEWA.',
      icon: 'TrendingDown',
    },
    {
      id: 'productivity',
      title: 'Productivity & Efficiency',
      description:
        'Enable employees to work faster, smarter, and more effectively through targeted AI adoption and capability building.',
      icon: 'Zap',
    },
    {
      id: 'enterprise-enablement',
      title: 'Enterprise AI Enablement',
      description:
        'Build the governance frameworks, partnerships, infrastructure, and skills that allow DEWA to scale AI safely and sustainably.',
      icon: 'Building2',
    },
  ],
  topMetrics: [
    {
      id: 'adoption-rate',
      label: 'Enterprise Adoption Rate',
      value: '68',
      unit: '%',
      trend: '+12% vs last quarter',
      trendDirection: 'up',
      emphasis: true,
    },
    {
      id: 'active-users',
      label: 'Active AI Users',
      value: '3,240',
      unit: '',
      trend: '+480 this month',
      trendDirection: 'up',
      emphasis: false,
    },
    {
      id: 'hours-saved',
      label: 'Estimated Hours Saved',
      value: '18,600',
      unit: 'hrs',
      trend: 'This quarter',
      trendDirection: 'up',
      emphasis: true,
    },
    {
      id: 'use-cases',
      label: 'Active Use Cases',
      value: '42',
      unit: '',
      trend: '14 scaled enterprise-wide',
      trendDirection: 'up',
      emphasis: false,
    },
    {
      id: 'champions',
      label: 'AI Champions',
      value: '86',
      unit: '',
      trend: 'Across 12 divisions',
      trendDirection: 'neutral',
      emphasis: false,
    },
    {
      id: 'programs',
      label: 'Training Programs',
      value: '9',
      unit: '',
      trend: '1,200+ enrolled',
      trendDirection: 'up',
      emphasis: false,
    },
  ],
}


File created successfully at: /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/content/department.ts

export interface DepartmentOverview {
  name: string
  tagline: string
  mission: string
  mandate: string
  strategicContext: string
  alhashbahNote: string
  valuePillars: ValuePillar[]
  topMetrics: TopMetric[]
}

export interface ValuePillar {
  id: string
  title: string
  description: string
  icon: string
}

export interface TopMetric {
  id: string
  label: string
  value: string
  unit: string
  trend: string
  trendDirection: 'up' | 'down' | 'neutral'
  emphasis: boolean
}

export const department: DepartmentOverview = {
  name: 'AI Adoption Department',
  tagline: 'Enterprise AI. Measurable Value. Strategic Scale.',
  mission:
    'Accelerate safe, measurable, enterprise-wide AI adoption across DEWA — improving efficiency, reducing cost, enhancing processes, strengthening governance, and enabling sustainable business value.',
  mandate:
    'The AI Adoption Department is the central function responsible for orchestrating AI adoption strategy, capability building, partner engagement, performance visibility, and governance alignment across all DEWA divisions.',
  strategicContext:
    'As DEWA advances its digital transformation agenda, the AI Adoption Department serves as the operational backbone that converts AI capability into measurable enterprise outcomes — connecting technology, people, and strategy into a unified adoption engine.',
  alhashbahNote:
    'The department directly supports DEWA\'s AlHasbah cost reduction direction by identifying and scaling AI use cases that reduce operational cost, eliminate process waste, and improve productivity across business functions.',
  valuePillars: [
    {
      id: 'cost-reduction',
      title: 'Cost Reduction',
      description:
        'Identify, accelerate, and scale AI use cases that reduce operational expenditure and process inefficiency across DEWA.',
      icon: 'TrendingDown',
    },
    {
      id: 'productivity',
      title: 'Productivity & Efficiency',
      description:
        'Enable employees to work faster, smarter, and more effectively through targeted AI adoption and capability building.',
      icon: 'Zap',
    },
    {
      id: 'enterprise-enablement',
      title: 'Enterprise AI Enablement',
      description:
        'Build the governance frameworks, partnerships, infrastructure, and skills that allow DEWA to scale AI safely and sustainably.',
      icon: 'Building2',
    },
  ],
  topMetrics: [
    {
      id: 'adoption-rate',
      label: 'Enterprise Adoption Rate',
      value: '68',
      unit: '%',
      trend: '+12% vs last quarter',
      trendDirection: 'up',
      emphasis: true,
    },
    {
      id: 'active-users',
      label: 'Active AI Users',
      value: '3,240',
      unit: '',
      trend: '+480 this month',
      trendDirection: 'up',
      emphasis: false,
    },
    {
      id: 'hours-saved',
      label: 'Estimated Hours Saved',
      value: '18,600',
      unit: 'hrs',
      trend: 'This quarter',
      trendDirection: 'up',
      emphasis: true,
    },
    {
      id: 'use-cases',
      label: 'Active Use Cases',
      value: '42',
      unit: '',
      trend: '14 scaled enterprise-wide',
      trendDirection: 'up',
      emphasis: false,
    },
    {
      id: 'champions',
      label: 'AI Champions',
      value: '86',
      unit: '',
      trend: 'Across 12 divisions',
      trendDirection: 'neutral',
      emphasis: false,
    },
    {
      id: 'programs',
      label: 'Training Programs',
      value: '9',
      unit: '',
      trend: '1,200+ enrolled',
      trendDirection: 'up',
      emphasis: false,
    },
  ],
}


export interface SectionDefinition {
  id: string
  order: number
  name: string
  shortName: string
  colorToken: string
  accentGradient: string
  tagline: string
  purpose: string
  mandate: string
  responsibilities: string[]
  coreActivities: string[]
  keyDeliverables: string[]
  stakeholders: string[]
  collaborationPoints: string[]
  successMeasures: string[]
}

export const sections: SectionDefinition[] = [
  {
    id: 'adoption-office',
    order: 1,
    name: 'AI Adoption Office',
    shortName: 'Adoption Office',
    colorToken: '#0066FF',
    accentGradient: 'from-primary to-primary-dim',
    tagline: 'Strategy. Governance. Alignment.',
    purpose:
      'Serve as the strategic backbone of the department — ensuring the operating model is coherent, governance is active, stakeholders are aligned, and performance is visible.',
    mandate:
      'The AI Adoption Office owns the department\'s strategic direction, governance coordination, adoption reporting, and cross-divisional engagement. It is the function that ensures AI adoption across DEWA is structured, measured, and aligned to enterprise priorities.',
    responsibilities: [
      'Define and maintain the AI Adoption operating model',
      'Align department priorities with DEWA strategic objectives and AlHasbah direction',
      'Coordinate governance and oversight mechanisms across AI adoption activities',
      'Manage adoption reporting cadence and performance visibility',
      'Orchestrate the AI Champions and AI Ambassadors network across divisions',
      'Engage divisional leadership and key stakeholders',
      'Oversee KPI tracking and business value communication',
      'Manage cross-divisional alignment and dependency resolution',
    ],
    coreActivities: [
      'Monthly performance reviews and reporting',
      'Quarterly operating model review',
      'AI Champions network management and activation',
      'Stakeholder briefings and leadership engagement',
      'Governance forum coordination',
      'Adoption strategy updates',
    ],
    keyDeliverables: [
      'AI Adoption Operating Model (living document)',
      'Monthly Adoption Performance Report',
      'Governance and Oversight Framework',
      'AI Champions Program Framework',
      'Stakeholder Engagement Calendar',
      'Cross-divisional Alignment Register',
    ],
    stakeholders: [
      'CAIO / EVP Leadership',
      'Divisional Directors',
      'IT Governance',
      'HR & Talent Management',
      'Finance (value tracking)',
    ],
    collaborationPoints: [
      'Provides strategic direction to AI Acceleration',
      'Sets reporting requirements for AI Command Center',
      'Coordinates governance decisions that affect all three sections',
    ],
    successMeasures: [
      'Stakeholder engagement coverage across divisions',
      'Reporting timeliness and accuracy',
      'Governance action closure rate',
      'AI Champion network activation rate',
      'Cross-divisional alignment progress',
    ],
  },
  {
    id: 'ai-acceleration',
    order: 2,
    name: 'AI Acceleration',
    shortName: 'Acceleration',
    colorToken: '#00C2FF',
    accentGradient: 'from-accent to-primary',
    tagline: 'Capability. Campaigns. Scale.',
    purpose:
      'Drive the active spread of AI across DEWA — through enablement programs, strategic partnerships, use case acceleration, and enterprise-wide awareness campaigns.',
    mandate:
      'AI Acceleration is the engine room of AI adoption. It executes the programs, activations, and engagements that move AI from isolated use to enterprise-scale adoption. It builds capability, expands access, and ensures every division has the support to adopt AI effectively.',
    responsibilities: [
      'Drive AI adoption campaigns and enterprise-wide activations',
      'Engage and manage strategic AI technology partners',
      'Identify and accelerate high-value use cases with business units',
      'Support AI Academy design and upskilling initiatives',
      'Run awareness, enablement, and adoption programs',
      'Coordinate AI tool access in controlled and strategic ways',
      'Manage internal and external AI events and showcases',
      'Support divisional engagement and scaling of AI capabilities',
    ],
    coreActivities: [
      'AI awareness and activation campaigns',
      'Partner engagement and management',
      'AI Academy program delivery',
      'Use case scouting and acceleration workshops',
      'Enterprise AI events and showcases',
      'Divisional AI enablement engagements',
    ],
    keyDeliverables: [
      'AI Adoption Campaign Calendar',
      'Strategic Partner Engagement Register',
      'AI Academy Program Catalogue',
      'Use Case Pipeline and Tracker',
      'Event and Activation Reports',
      'Divisional Enablement Playbooks',
    ],
    stakeholders: [
      'Business Unit Leaders',
      'HR / L&D',
      'Technology Vendors and Partners',
      'Communications Team',
      'Training and Academy Functions',
    ],
    collaborationPoints: [
      'Reports outcomes and adoption data to AI Command Center',
      'Escalates governance questions to AI Adoption Office',
      'Coordinates event visibility and reporting with Command Center',
    ],
    successMeasures: [
      'Number of awareness sessions and participation rate',
      'Number of partner engagements and outcomes',
      'Number of employees trained and capability uplifted',
      'Number of use cases accelerated and scaled',
      'Campaign reach and engagement metrics',
    ],
  },
  {
    id: 'command-center',
    order: 3,
    name: 'AI Command Center',
    shortName: 'Command Center',
    colorToken: '#F0A500',
    accentGradient: 'from-gold to-gold-dim',
    tagline: 'Visibility. Insights. Impact.',
    purpose:
      'Provide real-time centralized visibility of AI adoption, performance, and business impact — enabling leadership to make data-driven decisions and track the value of enterprise AI.',
    mandate:
      'The AI Command Center is the intelligence layer of the department. It translates AI adoption activity into dashboards, reports, and strategic insights that give leadership a clear, always-current view of how AI is performing across DEWA.',
    responsibilities: [
      'Build and maintain the executive AI adoption dashboard and command center displays',
      'Provide centralized, real-time adoption monitoring and performance visibility',
      'Track AI KPIs and enterprise performance signals across all tools and programs',
      'Monitor adoption trends, anomalies, and insights',
      'Support leadership reporting and strategic storytelling',
      'Provide one-stop view of AI initiatives, value, and priorities',
      'Shape the physical and digital command center experience',
      'Manage incident, issue, and escalation visibility',
    ],
    coreActivities: [
      'Weekly dashboard refresh and insight production',
      'Executive reporting pack preparation',
      'KPI tracking and trend analysis',
      'Command center display management',
      'Data quality and reporting accuracy assurance',
      'Insight storytelling for leadership audiences',
    ],
    keyDeliverables: [
      'Executive AI Adoption Dashboard',
      'Weekly KPI Digest',
      'Monthly Strategic Insights Report',
      'Command Center Physical and Digital Setup',
      'AI Portfolio Tracker',
      'Issue and Escalation Log',
    ],
    stakeholders: [
      'MD and CEO Office',
      'CAIO',
      'EVP Leadership',
      'Department Head',
      'IT Analytics and Data Teams',
    ],
    collaborationPoints: [
      'Consumes adoption data from AI Acceleration activities',
      'Produces reports aligned to AI Adoption Office governance requirements',
      'Provides visibility layer that serves all three sections and leadership',
    ],
    successMeasures: [
      'Dashboard availability and data accuracy',
      'Reporting cycle adherence',
      'Executive dashboard usage and satisfaction',
      'KPI coverage across AI portfolio',
      'Turnaround time on insight requests',
    ],
  },
]


File created successfully at: /Users/khalidbinkalban/Desktop/My Workstation/dewa-ai-adoption/content/sections.ts

export interface SectionDefinition {
  id: string
  order: number
  name: string
  shortName: string
  colorToken: string
  accentGradient: string
  tagline: string
  purpose: string
  mandate: string
  responsibilities: string[]
  coreActivities: string[]
  keyDeliverables: string[]
  stakeholders: string[]
  collaborationPoints: string[]
  successMeasures: string[]
}

export const sections: SectionDefinition[] = [
  {
    id: 'adoption-office',
    order: 1,
    name: 'AI Adoption Office',
    shortName: 'Adoption Office',
    colorToken: '#0066FF',
    accentGradient: 'from-primary to-primary-dim',
    tagline: 'Strategy. Governance. Alignment.',
    purpose:
      'Serve as the strategic backbone of the department — ensuring the operating model is coherent, governance is active, stakeholders are aligned, and performance is visible.',
    mandate:
      'The AI Adoption Office owns the department\'s strategic direction, governance coordination, adoption reporting, and cross-divisional engagement. It is the function that ensures AI adoption across DEWA is structured, measured, and aligned to enterprise priorities.',
    responsibilities: [
      'Define and maintain the AI Adoption operating model',
      'Align department priorities with DEWA strategic objectives and AlHasbah direction',
      'Coordinate governance and oversight mechanisms across AI adoption activities',
      'Manage adoption reporting cadence and performance visibility',
      'Orchestrate the AI Champions and AI Ambassadors network across divisions',
      'Engage divisional leadership and key stakeholders',
      'Oversee KPI tracking and business value communication',
      'Manage cross-divisional alignment and dependency resolution',
    ],
    coreActivities: [
      'Monthly performance reviews and reporting',
      'Quarterly operating model review',
      'AI Champions network management and activation',
      'Stakeholder briefings and leadership engagement',
      'Governance forum coordination',
      'Adoption strategy updates',
    ],
    keyDeliverables: [
      'AI Adoption Operating Model (living document)',
      'Monthly Adoption Performance Report',
      'Governance and Oversight Framework',
      'AI Champions Program Framework',
      'Stakeholder Engagement Calendar',
      'Cross-divisional Alignment Register',
    ],
    stakeholders: [
      'CAIO / EVP Leadership',
      'Divisional Directors',
      'IT Governance',
      'HR & Talent Management',
      'Finance (value tracking)',
    ],
    collaborationPoints: [
      'Provides strategic direction to AI Acceleration',
      'Sets reporting requirements for AI Command Center',
      'Coordinates governance decisions that affect all three sections',
    ],
    successMeasures: [
      'Stakeholder engagement coverage across divisions',
      'Reporting timeliness and accuracy',
      'Governance action closure rate',
      'AI Champion network activation rate',
      'Cross-divisional alignment progress',
    ],
  },
  {
    id: 'ai-acceleration',
    order: 2,
    name: 'AI Acceleration',
    shortName: 'Acceleration',
    colorToken: '#00C2FF',
    accentGradient: 'from-accent to-primary',
    tagline: 'Capability. Campaigns. Scale.',
    purpose:
      'Drive the active spread of AI across DEWA — through enablement programs, strategic partnerships, use case acceleration, and enterprise-wide awareness campaigns.',
    mandate:
      'AI Acceleration is the engine room of AI adoption. It executes the programs, activations, and engagements that move AI from isolated use to enterprise-scale adoption. It builds capability, expands access, and ensures every division has the support to adopt AI effectively.',
    responsibilities: [
      'Drive AI adoption campaigns and enterprise-wide activations',
      'Engage and manage strategic AI technology partners',
      'Identify and accelerate high-value use cases with business units',
      'Support AI Academy design and upskilling initiatives',
      'Run awareness, enablement, and adoption programs',
      'Coordinate AI tool access in controlled and strategic ways',
      'Manage internal and external AI events and showcases',
      'Support divisional engagement and scaling of AI capabilities',
    ],
    coreActivities: [
      'AI awareness and activation campaigns',
      'Partner engagement and management',
      'AI Academy program delivery',
      'Use case scouting and acceleration workshops',
      'Enterprise AI events and showcases',
      'Divisional AI enablement engagements',
    ],
    keyDeliverables: [
      'AI Adoption Campaign Calendar',
      'Strategic Partner Engagement Register',
      'AI Academy Program Catalogue',
      'Use Case Pipeline and Tracker',
      'Event and Activation Reports',
      'Divisional Enablement Playbooks',
    ],
    stakeholders: [
      'Business Unit Leaders',
      'HR / L&D',
      'Technology Vendors and Partners',
      'Communications Team',
      'Training and Academy Functions',
    ],
    collaborationPoints: [
      'Reports outcomes and adoption data to AI Command Center',
      'Escalates governance questions to AI Adoption Office',
      'Coordinates event visibility and reporting with Command Center',
    ],
    successMeasures: [
      'Number of awareness sessions and participation rate',
      'Number of partner engagements and outcomes',
      'Number of employees trained and capability uplifted',
      'Number of use cases accelerated and scaled',
      'Campaign reach and engagement metrics',
    ],
  },
  {
    id: 'command-center',
    order: 3,
    name: 'AI Command Center',
    shortName: 'Command Center',
    colorToken: '#F0A500',
    accentGradient: 'from-gold to-gold-dim',
    tagline: 'Visibility. Insights. Impact.',
    purpose:
      'Provide real-time centralized visibility of AI adoption, performance, and business impact — enabling leadership to make data-driven decisions and track the value of enterprise AI.',
    mandate:
      'The AI Command Center is the intelligence layer of the department. It translates AI adoption activity into dashboards, reports, and strategic insights that give leadership a clear, always-current view of how AI is performing across DEWA.',
    responsibilities: [
      'Build and maintain the executive AI adoption dashboard and command center displays',
      'Provide centralized, real-time adoption monitoring and performance visibility',
      'Track AI KPIs and enterprise performance signals across all tools and programs',
      'Monitor adoption trends, anomalies, and insights',
      'Support leadership reporting and strategic storytelling',
      'Provide one-stop view of AI initiatives, value, and priorities',
      'Shape the physical and digital command center experience',
      'Manage incident, issue, and escalation visibility',
    ],
    coreActivities: [
      'Weekly dashboard refresh and insight production',
      'Executive reporting pack preparation',
      'KPI tracking and trend analysis',
      'Command center display management',
      'Data quality and reporting accuracy assurance',
      'Insight storytelling for leadership audiences',
    ],
    keyDeliverables: [
      'Executive AI Adoption Dashboard',
      'Weekly KPI Digest',
      'Monthly Strategic Insights Report',
      'Command Center Physical and Digital Setup',
      'AI Portfolio Tracker',
      'Issue and Escalation Log',
    ],
    stakeholders: [
      'MD and CEO Office',
      'CAIO',
      'EVP Leadership',
      'Department Head',
      'IT Analytics and Data Teams',
    ],
    collaborationPoints: [
      'Consumes adoption data from AI Acceleration activities',
      'Produces reports aligned to AI Adoption Office governance requirements',
      'Provides visibility layer that serves all three sections and leadership',
    ],
    successMeasures: [
      'Dashboard availability and data accuracy',
      'Reporting cycle adherence',
      'Executive dashboard usage and satisfaction',
      'KPI coverage across AI portfolio',
      'Turnaround time on insight requests',
    ],
  },
]


export type KpiTier = 'P1' | 'P2' | 'P3'
export type KpiCategory =
  | 'adoption'
  | 'productivity'
  | 'training'
  | 'governance'
  | 'value'
  | 'engagement'

export interface Kpi {
  id: string
  label: string
  description: string
  value: string
  unit: string
  target: string
  targetUnit: string
  progress: number        // 0–100
  trend: string
  trendDirection: 'up' | 'down' | 'neutral'
  tier: KpiTier
  category: KpiCategory
  owner: string           // section id
  cadence: 'daily' | 'weekly' | 'monthly' | 'quarterly'
  status: 'on-track' | 'at-risk' | 'critical' | 'planned'
}

export const kpis: Kpi[] = [
  // --- Department Level ---
  {
    id: 'adoption-rate',
    label: 'Enterprise Adoption Rate',
    description: 'Percentage of eligible employees actively using at least one AI tool',
    value: '68',
    unit: '%',
    target: '80',
    targetUnit: '%',
    progress: 85,
    trend: '+12% vs Q3',
    trendDirection: 'up',
    tier: 'P1',
    category: 'adoption',
    owner: 'department',
    cadence: 'monthly',
    status: 'on-track',
  },
  {
    id: 'active-users',
    label: 'Active AI Users',
    description: 'Unique employees with at least one AI tool session in the past 30 days',
    value: '3,240',
    unit: '',
    target: '4,000',
    targetUnit: 'users',
    progress: 81,
    trend: '+480 this month',
    trendDirection: 'up',
    tier: 'P1',
    category: 'adoption',
    owner: 'department',
    cadence: 'monthly',
    status: 'on-track',
  },
  {
    id: 'hours-saved',
    label: 'Estimated Hours Saved',
    description: 'Productivity value generated through AI tool usage, annualised',
    value: '18,600',
    unit: 'hrs',
    target: '24,000',
    targetUnit: 'hrs/quarter',
    progress: 78,
    trend: 'On pace for target',
    trendDirection: 'up',
    tier: 'P1',
    category: 'productivity',
    owner: 'department',
    cadence: 'quarterly',
    status: 'on-track',
  },
  {
    id: 'use-cases-active',
    label: 'Active Use Cases',
    description: 'AI use cases currently in active deployment or pilot across DEWA',
    value: '42',
    unit: '',
    target: '60',
    targetUnit: 'use cases',
    progress: 70,
    trend: '14 scaled to enterprise',
    trendDirection: 'up',
    tier: 'P1',
    category: 'adoption',
    owner: 'ai-acceleration',
    cadence: 'monthly',
    status: 'on-track',
  },
  {
    id: 'champions-active',
    label: 'Active AI Champions',
    description: 'Certified AI Champions actively engaged in divisional adoption activities',
    value: '86',
    unit: '',
    target: '120',
    targetUnit: 'champions',
    progress: 72,
    trend: '+18 this quarter',
    trendDirection: 'up',
    tier: 'P1',
    category: 'engagement',
    owner: 'adoption-office',
    cadence: 'quarterly',
    status: 'on-track',
  },
  {
    id: 'divisional-coverage',
    label: 'Divisional Coverage',
    description: 'Percentage of DEWA divisions with active AI adoption engagement',
    value: '75',
    unit: '%',
    target: '100',
    targetUnit: '%',
    progress: 75,
    trend: '9 of 12 divisions active',
    trendDirection: 'up',
    tier: 'P1',
    category: 'adoption',
    owner: 'adoption-office',
    cadence: 'quarterly',
    status: 'at-risk',
  },
  // --- AI Acceleration ---
  {
    id: 'employees-trained',
    label: 'Employees Trained',
    description: 'Cumulative unique employees who have completed at least one AI training module',
    value: '1,240',
    unit: '',
    target: '2,000',
    targetUnit: 'employees',
    progress: 62,
    trend: '+310 this quarter',
    trendDirection: 'up',
    tier: 'P1',
    category: 'training',
    owner: 'ai-acceleration',
    cadence: 'monthly',
    status: 'on-track',
  },
  {
    id: 'campaigns-executed',
    label: 'Campaigns Executed',
    description: 'Number of AI awareness and activation campaigns completed this year',
    value: '11',
    unit: '',
    target: '16',
    targetUnit: 'campaigns',
    progress: 69,
    trend: 'Q4 campaigns in planning',
    trendDirection: 'neutral',
    tier: 'P2',
    category: 'engagement',
    owner: 'ai-acceleration',
    cadence: 'quarterly',
    status: 'on-track',
  },
  // --- AI Command Center ---
  {
    id: 'dashboard-accuracy',
    label: 'Dashboard Data Accuracy',
    description: 'Percentage of KPI data points validated and current within reporting window',
    value: '96',
    unit: '%',
    target: '99',
    targetUnit: '%',
    progress: 97,
    trend: 'Stable',
    trendDirection: 'neutral',
    tier: 'P1',
    category: 'governance',
    owner: 'command-center',
    cadence: 'weekly',
    status: 'on-track',
  },
  {
    id: 'reporting-adherence',
    label: 'Reporting Cadence Adherence',
    description: 'Percentage of scheduled executive reports delivered on time',
    value: '100',
    unit: '%',
    target: '100',
    targetUnit: '%',
    progress: 100,
    trend: 'All reports on schedule',
    trendDirection: 'neutral',
    tier: 'P1',
    category: 'governance',
    owner: 'command-center',
    cadence: 'monthly',
    status: 'on-track',
  },
  // --- Governance ---
  {
    id: 'governance-closure',
    label: 'Governance Action Closure Rate',
    description: 'Percentage of open governance actions closed within agreed timelines',
    value: '88',
    unit: '%',
    target: '95',
    targetUnit: '%',
    progress: 93,
    trend: '4 actions pending',
    trendDirection: 'up',
    tier: 'P2',
    category: 'governance',
    owner: 'adoption-office',
    cadence: 'monthly',
    status: 'at-risk',
  },
]