Data
→ React Components
→ JSX
→ Declarative UI
→ Enterprise Dashboard

Enterprise dashboards are compositions of reusable components.

cd C:\ReactApps
New-Item bloco03 -ItemType Directory
cd bloco03
npm create vite@latest app45-executive-dashboard -- --template react-ts
cd app45-executive-dashboard
npm install
npm install @fluentui/react-components @fluentui/react-icons

New-Item src\components -ItemType Directory
New-Item src\models -ItemType Directory
New-Item src\data -ItemType Directory
New-Item src\styles -ItemType Directory

New-Item src\models\ExecutiveMetric.ts -ItemType File
New-Item src\data\executiveMetrics.ts -ItemType File
New-Item src\components\MetricCard.tsx -ItemType File
New-Item src\components\ExecutiveDashboard.tsx -ItemType File
New-Item artigo.md -ItemType File

app45-executive-dashboard/
  src/
    components/
      ExecutiveDashboard.tsx
      MetricCard.tsx
    data/
      executiveMetrics.ts
    models/
      ExecutiveMetric.ts
    styles/
    App.tsx
    main.tsx
    index.css
  artigo.md

export interface ExecutiveMetric {
  id: number;
  title: string;
  value: string;
  variation: string;
  status: "Positive" | "Warning" | "Critical";
  description: string;
}

import type { ExecutiveMetric } from "../models/ExecutiveMetric";
export const executiveMetrics: ExecutiveMetric[] = [
  {
    id: 1,
    title: "Revenue",
    value: "$1.2M",
    variation: "+18%",
    status: "Positive",
    description: "Monthly revenue performance.",
  },
  {
    id: 2,
    title: "Customer Satisfaction",
    value: "91%",
    variation: "+6%",
    status: "Positive",
    description: "Enterprise customer satisfaction score.",
  },
  {
    id: 3,
    title: "Open Risks",
    value: "14",
    variation: "-3",
    status: "Warning",
    description: "Business risks under review.",
  },
  {
    id: 4,
    title: "Delayed Projects",
    value: "5",
    variation: "+2",
    status: "Critical",
    description: "Projects requiring leadership attention.",
  },
];

The UI is generated from data.

import {
  Badge,
  Body1,
  Card,
  CardHeader,
  Caption1,
  Title3,
} from "@fluentui/react-components";
import {
  ArrowTrending24Regular,
  Warning24Regular,
  ErrorCircle24Regular,
} from "@fluentui/react-icons";
import type { ExecutiveMetric } from "../models/ExecutiveMetric";
interface MetricCardProps {
  metric: ExecutiveMetric;
}
function getIcon(status: ExecutiveMetric["status"]) {
  if (status === "Positive") {
    return <ArrowTrending24Regular />;
  }
  if (status === "Warning") {
    return <Warning24Regular />;
  }
  return <ErrorCircle24Regular />;
}
export function MetricCard({
  metric,
}: MetricCardProps) {
  return (
    <Card
      style={{
        padding: "24px",
        minHeight: "200px",
      }}
    >
      <CardHeader
        image={getIcon(metric.status)}
        header={<Title3>{metric.title}</Title3>}
        description={
          <Caption1>
            {metric.description}
          </Caption1>
        }
      />
      <Body1
        style={{
          fontSize: "32px",
          fontWeight: 700,
        }}
      >
        {metric.value}
      </Body1>
      <Badge appearance="filled">
        {metric.variation}
      </Badge>
    </Card>
  );
}

RevenueCard
CustomerCard
RiskCard
ProjectCard

MetricCard

Reusable UI components.

metric: ExecutiveMetric;

getIcon(status)

Positive
→ Trending icon
Warning
→ Warning icon
Critical
→ Error icon

import {
  Button,
  Card,
  Text,
  Title1,
  Title2,
} from "@fluentui/react-components";
import {
  Board24Regular,
  DocumentBulletList24Regular,
} from "@fluentui/react-icons";
import { executiveMetrics } from "../data/executiveMetrics";
import { MetricCard } from "./MetricCard";
export function ExecutiveDashboard() {
  return (
    <main
      style={{
        minHeight: "100vh",
        backgroundColor: "#f5f5f5",
        padding: "48px",
        boxSizing: "border-box",
      }}
    >
      <section
        style={{
          maxWidth: "1200px",
          margin: "0 auto",
        }}
      >
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            marginBottom: "32px",
          }}
        >
          <div>
            <Title1>
              Executive Dashboard
            </Title1>
            <Text>
              Enterprise KPI overview using Fluent UI.
            </Text>
          </div>
          <Button
            appearance="primary"
            icon={<DocumentBulletList24Regular />}
          >
            Export Report
          </Button>
        </div>
        <div
          style={{
            display: "grid",
            gridTemplateColumns:
              "repeat(auto-fit, minmax(240px, 1fr))",
            gap: "20px",
          }}
        >
          {executiveMetrics.map((metric) => (
            <MetricCard
              key={metric.id}
              metric={metric}
            />
          ))}
        </div>
        <Card
          style={{
            marginTop: "32px",
            padding: "24px",
          }}
        >
          <Title2>
            Business Summary
          </Title2>
          <Text>
            Revenue performance remains positive,
            while delayed projects require immediate
            executive review.
          </Text>
        </Card>
      </section>
    </main>
  );
}

executiveMetrics.map((metric) => (
  <MetricCard
    key={metric.id}
    metric={metric}
  />
))

Metric data
→ React component
→ Rendered dashboard card

For each metric,
render a MetricCard.

key={metric.id}

display: "grid",
gridTemplateColumns:
  "repeat(auto-fit, minmax(240px, 1fr))",

Create as many columns as possible.
Each column must be at least 240px.
Distribute extra space equally.

import { ExecutiveDashboard }
  from "./components/ExecutiveDashboard";
function App() {
  return <ExecutiveDashboard />;
}
export default App;

import React from "react";
import ReactDOM from "react-dom/client";
import {
  FluentProvider,
  webLightTheme,
} from "@fluentui/react-components";
import App from "./App";
import "./index.css";
ReactDOM.createRoot(
  document.getElementById("root")!
).render(
  <React.StrictMode>
    <FluentProvider theme={webLightTheme}>
      <App />
    </FluentProvider>
  </React.StrictMode>
);

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
}
* {
  box-sizing: border-box;
}

Do not add state until state is necessary.

main.tsx
  renders App
App
  renders ExecutiveDashboard
ExecutiveDashboard
  maps executiveMetrics
MetricCard
  renders each KPI card
Fluent UI
  styles enterprise components
ReactDOM
  updates browser DOM

Data
→ Reusable components
→ Responsive layout
→ Executive dashboard

Dashboards are compositions.
Components are reusable.
UI derives from data.