Technical Blog Article — App 52: Administrative Panel with React, TypeScript, Vite, and Fluent UI

Introduction

Enterprise applications rarely begin with complex business logic. Most professional systems first establish a strong administrative foundation. Before building CRMs, ERPs, analytics platforms, approval systems, SharePoint-style portals, or Microsoft 365 dashboards, developers usually create an administration layer responsible for navigation, metrics, monitoring, management, and operational visibility.

In App 52 — Administrative Panel, we build a Microsoft-style enterprise administration dashboard using:

• React
• TypeScript
• Vite
• Fluent UI
• Component composition
• Enterprise layouts
• Data-driven rendering

This application belongs to Block 3 — Professional Fluent UI Applications, where the roadmap transitions from basic React rendering into enterprise architecture patterns and Microsoft-style UI composition.

This app introduces several critical concepts:

The most important architectural idea introduced here is:

Enterprise UI is component composition driven by structured data.

React applications become scalable when:

• UI is separated into reusable pieces
• data drives rendering
• layout becomes composable
• components have focused responsibilities

1. Creating the Project

Create the application

cd C:\ReactApps
New-Item bloco03 -ItemType Directory -Force
cd bloco03
npm create vite@latest app52-administrative-panel -- --template react-ts
cd app52-administrative-panel
npm install

Install Fluent UI:

npm install @fluentui/react-components @fluentui/react-icons

2. Creating the Folder Structure

Enterprise React projects should never place all logic inside one file. Even small apps should establish scalable architecture from the beginning.

Create folders:

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

Create files:

New-Item src\models\AdminMetric.ts -ItemType File
New-Item src\data\adminMetrics.ts -ItemType File
New-Item src\components\AdminSidebar.tsx -ItemType File
New-Item src\components\AdminHeader.tsx -ItemType File
New-Item src\components\AdminDashboard.tsx -ItemType File
New-Item artigo.md -ItemType File

3. Final Project Structure

app52-administrative-panel/
  src/
    components/
      AdminSidebar.tsx
      AdminHeader.tsx
      AdminDashboard.tsx
    data/
      adminMetrics.ts
    models/
      AdminMetric.ts
    styles/
    App.tsx
    main.tsx
    index.css
  artigo.md
  package.json
  vite.config.ts

This structure matters because each file has a specific responsibility.

This is one of the core React architecture ideas:

Each component should own one responsibility.

4. Creating the Model Layer

src\models\AdminMetric.ts

export interface AdminMetric {
  id: number;
  title: string;
  value: string;
  description: string;
}

This file defines the shape of dashboard metrics.

Every metric card must contain:

This introduces one of the most important enterprise React concepts:

UI structure should be typed and predictable.

TypeScript helps:

• prevent invalid data
• improve autocomplete
• improve refactoring
• improve maintainability
• improve scalability

Without typing, large React apps become harder to maintain safely.

Official documentation:

• TypeScript Documentation

5. Creating the Data Layer

src\data\adminMetrics.ts

import type { AdminMetric } from "../models/AdminMetric";
export const adminMetrics: AdminMetric[] = [
  {
    id: 1,
    title: "Active Users",
    value: "1,248",
    description: "Users currently enabled in the system",
  },
  {
    id: 2,
    title: "Open Tickets",
    value: "37",
    description: "Support tickets waiting for action",
  },
  {
    id: 3,
    title: "Pending Approvals",
    value: "14",
    description: "Requests waiting for administrator approval",
  },
  {
    id: 4,
    title: "Security Alerts",
    value: "5",
    description: "Important alerts requiring review",
  },
];

This file introduces another important React architecture principle:

The UI should derive from data.

Instead of manually writing many dashboard cards directly inside JSX, we store structured data and render dynamically.

Benefits:

• easier scalability
• easier updates
• cleaner components
• reusable rendering logic

Later, this same architecture can evolve into:

• REST APIs
• database responses
• Graph API
• SharePoint APIs
• real analytics systems

6. Building the Sidebar

src\components\AdminSidebar.tsx

import { Button, Card, Title3 } from "@fluentui/react-components";
import {
  Home24Regular,
  People24Regular,
  TicketDiagonal24Regular,
  Shield24Regular,
  Settings24Regular,
} from "@fluentui/react-icons";
export function AdminSidebar() {
  return (
    <Card
      style={{
        width: "260px",
        minHeight: "100vh",
        borderRadius: 0,
        padding: "24px",
        display: "flex",
        flexDirection: "column",
        gap: "16px",
      }}
    >
      <Title3>Admin Center</Title3>
      <Button appearance="subtle" icon={<Home24Regular />}>
        Overview
      </Button>
      <Button appearance="subtle" icon={<People24Regular />}>
        Users
      </Button>
      <Button appearance="subtle" icon={<TicketDiagonal24Regular />}>
        Tickets
      </Button>
      <Button appearance="subtle" icon={<Shield24Regular />}>
        Security
      </Button>
      <Button appearance="subtle" icon={<Settings24Regular />}>
        Settings
      </Button>
    </Card>
  );
}

7. Understanding the Sidebar Layout

The sidebar uses:

display: "flex"
flexDirection: "column"

This creates vertical stacking.

The layout becomes:

Admin Center
Overview
Users
Tickets
Security
Settings

This is one of the most common enterprise navigation patterns.

The fixed width:

width: "260px"

creates stable navigation spacing.

The height:

minHeight: "100vh"

ensures the sidebar fills the browser height.

This is typical in:

• SharePoint-style portals
• Microsoft admin centers
• dashboard systems
• ERP applications

8. Understanding Fluent UI Buttons

Each menu item uses:

<Button appearance="subtle">

This is important.

Why not primary?

Because sidebar navigation should not visually compete with primary business actions.

subtle creates:

• softer visuals
• cleaner enterprise navigation
• better dashboard hierarchy

The icons come from:

@fluentui/react-icons

These are:

• SVG-based
• scalable
• Microsoft-style
• theme-aware

Official documentation:

• Fluent UI React Components

9. Creating the Header

src\components\AdminHeader.tsx

import {
  Button,
  Text,
  Title1,
} from "@fluentui/react-components";
import {
  Add24Regular,
} from "@fluentui/react-icons";
export function AdminHeader() {
  return (
    <header
      style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: "32px",
      }}
    >
      <div>
        <Title1>Administrative Panel</Title1>
        <Text>
          Enterprise administration overview built with Fluent UI.
        </Text>
      </div>
      <Button
        appearance="primary"
        icon={<Add24Regular />}
      >
        New Request
      </Button>
    </header>
  );
}

10. Understanding the Header Layout

The header uses:

justifyContent: "space-between"

This separates:

• title/content
• action button

Result:

Administrative Panel                [ New Request ]

This is a common enterprise pattern because:

• titles establish context
• actions stay visually accessible
• dashboards remain balanced

11. Why Fluent UI Typography Matters

Instead of raw HTML like:

<h1>
<p>

we use:

<Title1>
<Text>

This provides:

• Microsoft typography scaling
• accessibility
• consistent spacing
• enterprise visual standards

Typography consistency is extremely important in large dashboard systems.

12. Creating the Dashboard Grid

src\components\AdminDashboard.tsx

import {
  Card,
  Text,
  Title2,
  Title3,
} from "@fluentui/react-components";
import { adminMetrics } from "../data/adminMetrics";
export function AdminDashboard() {
  return (
    <section>
      <div
        style={{
          display: "grid",
          gridTemplateColumns:
            "repeat(auto-fit, minmax(220px, 1fr))",
          gap: "20px",
        }}
      >
        {adminMetrics.map((metric) => (
          <Card
            key={metric.id}
            style={{
              padding: "24px",
            }}
          >
            <Title3>{metric.title}</Title3>
            <Title2>{metric.value}</Title2>
            <Text>{metric.description}</Text>
          </Card>
        ))}
      </div>
    </section>
  );
}

13. Understanding map() Rendering

This line is extremely important:

adminMetrics.map((metric) => ...)

React transforms data into UI.

Conceptually:

Data
→ React rendering
→ Dashboard cards

This is declarative rendering.

We do NOT manually create cards one by one.

Instead, React receives data and generates the interface automatically.

Official documentation:

• Rendering Lists

14. Why key={metric.id} Matters

Each rendered card uses:

key={metric.id}

React uses keys to identify list items.

Without keys:

• React shows warnings
• updates become less efficient
• DOM reconciliation becomes harder

Keys are critical for dynamic rendering.

15. Understanding CSS Grid

The dashboard uses:

display: "grid"

combined with:

gridTemplateColumns:
  "repeat(auto-fit, minmax(220px, 1fr))"

This creates a responsive enterprise dashboard.

Meaning:

Create as many columns as possible.
Each card must be at least 220px.
Extra space is distributed evenly.

This allows:

• responsive dashboards
• scalable layouts
• clean metric organization

16. Building the Root Layout

src\App.tsx

import { AdminDashboard } from "./components/AdminDashboard";
import { AdminHeader } from "./components/AdminHeader";
import { AdminSidebar } from "./components/AdminSidebar";
function App() {
  return (
    <div
      style={{
        display: "flex",
        minHeight: "100vh",
      }}
    >
      <AdminSidebar />
      <main
        style={{
          flex: 1,
          padding: "40px",
          backgroundColor: "#f5f5f5",
        }}
      >
        <AdminHeader />
        <AdminDashboard />
      </main>
    </div>
  );
}
export default App;

17. Understanding the Main Layout

The root layout uses Flexbox:

display: "flex"

This creates:

Sidebar | Main Dashboard

The sidebar has fixed width.

The main area uses:

flex: 1

Meaning:

Take all remaining available space.

This is one of the most common enterprise application layouts.

18. Understanding main.tsx

src\main.tsx

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>
);

This file connects:

• React
• ReactDOM
• Fluent UI
• the browser DOM

The most important part is:

<FluentProvider theme={webLightTheme}>

This activates:

• Microsoft theme tokens
• Fluent UI styling
• accessibility behavior
• typography system
• enterprise colors

19. Understanding Why There Is No State Yet

This app intentionally does NOT use:

• useState
• useEffect

Why?

Because the dashboard is currently static.

React Learn strongly recommends avoiding unnecessary state and effects.

Official guidance:

• You Might Not Need an Effect

The dashboard currently derives entirely from static data.

This keeps the architecture simpler and cleaner.

Later versions may introduce:

• API integration
• real-time updates
• filters
• notifications
• async data
• charts
• reducers

20. Running the Application

Development:

npm run dev

Production validation:

npm run build

Production preview:

npm run preview

21. Full Rendering Flow

main.tsx
  mounts App
App
  composes Sidebar + Main Layout
AdminHeader
  renders enterprise title and actions
AdminDashboard
  renders dashboard grid
adminMetrics.ts
  provides structured data
map()
  converts data into Fluent UI cards
ReactDOM
  renders the final browser UI

22. Technical Summary

23. Concept Table

24. Official Documentation

React

• React Learn
• Describing the UI
• Rendering Lists
• Keeping Components Pure
• Thinking in React

Fluent UI

• Fluent UI React Components
• Fluent UI Card
• Fluent UI Button

Vite

• Vite Guide

TypeScript

• TypeScript Documentation

25. Final Architectural Insight

App 52 introduces one of the most important enterprise React patterns:

Structured Data
→ Component Composition
→ Dashboard Rendering
→ Enterprise UI

This is the foundation for:

• admin portals
• analytics systems
• SharePoint-inspired dashboards
• Microsoft 365 interfaces
• CRM systems
• ERP applications
• enterprise management platforms

The key idea is:

React components compose the layout.
Data drives the rendering.
Fluent UI provides the enterprise visual system.

Current Project Progress