ENVOYOU SEC Dashboard

A modern React + Next.js frontend dashboard for the ENVOYOU SEC API Climate Disclosure Rule Compliance Platform.

Features

• Next.js 16.0.0 with App Router and TypeScript 5.9.3
• React 19.2.0 with latest React DOM
• Tailwind CSS 4.1.15 with modern CSS-first configuration
• shadcn/ui component library with Radix UI primitives
• ESLint 9.38.0 & Prettier 3.6.2 for code quality and formatting
• Zustand 5.0.8 for client state management
• TanStack React Query 5.90.5 for server state management
• React Hook Form 7.65.0 + Zod 4.1.12 for form handling and validation
• Husky 9.1.7 + lint-staged 16.2.6 for Git hooks and pre-commit checks

Getting Started

Prerequisites

• Node.js 20+ (required for Tailwind CSS v4)
• npm or yarn

Installation

1. Clone the repository

2. Install dependencies:

   npm install

3. Copy environment variables:

   cp .env.local.example .env.local

4. Update the environment variables in .env.local

5. Run the development server:

   npm run dev

6. Open http://localhost:3000 in your browser

Project Structure

src/
├── app/                    # Next.js App Router
│   ├── (auth)/            # Auth group routes
│   ├── (dashboard)/       # Protected dashboard routes
│   ├── globals.css        # Global styles
│   └── layout.tsx         # Root layout
├── components/            # Reusable components
│   ├── ui/               # shadcn/ui components
│   ├── forms/            # Form components
│   ├── layout/           # Layout components
│   └── features/         # Feature-specific components
├── lib/                  # Utilities and configurations
├── stores/              # Zustand stores
├── types/               # TypeScript type definitions
└── hooks/               # Custom React hooks

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run lint:fix - Fix ESLint issues automatically
• npm run type-check - Run TypeScript type checking
• npm run format - Format code with Prettier
• npm run format:check - Check code formatting
• npm run prepare - Setup Husky Git hooks

Technology Stack

Core Framework

• Framework: Next.js 16.0.0 with App Router
• Runtime: React 19.2.0 + React DOM 19.2.0
• Language: TypeScript 5.9.3

Styling & UI

• Styling: Tailwind CSS 4.1.15 with CSS-first configuration
• UI Components: shadcn/ui with Radix UI primitives
  • Dialog, Dropdown Menu, Label, Select, Separator, Slot, Switch, Tabs, Toast
• Icons: Lucide React 0.546.0
• Utilities: Class Variance Authority 0.7.1, clsx 2.1.1, Tailwind Merge 3.3.1

State Management & Data

• Client State: Zustand 5.0.8
• Server State: TanStack React Query 5.90.5
• HTTP Client: Axios 1.12.2
• Forms & Validation: React Hook Form 7.65.0 + Zod 4.1.12

Development Tools

• Linting: ESLint 9.38.0 + TypeScript ESLint 8.46.2
• Formatting: Prettier 3.6.2 + Tailwind CSS Plugin 0.7.1
• Git Hooks: Husky 9.1.7 + lint-staged 16.2.6
• Charts: Recharts 3.3.0
• Date Handling: date-fns 4.1.0
• File Upload: React Dropzone 14.3.8

Tailwind CSS v4 Configuration

This project uses Tailwind CSS v4 with modern CSS-first configuration:

Key Features

• CSS-first configuration using @theme directive
• Native CSS cascade layers for better performance
• Custom utilities with @utility directive
• Modern browser support (Safari 16.4+, Chrome 111+, Firefox 128+)

Theme Customization

Theme variables are defined in src/app/globals.css using the @theme directive:

@theme {
  --color-primary: 221.2 83.2% 53.3%;
  --color-background: 0 0% 100%;
  --radius: 0.5rem;
}

Custom Utilities

Add custom utilities using the @utility directive:

@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
  max-width: 1400px;
}

Development Guidelines

• Follow TypeScript strict mode with latest v5.9.3 features
• Use ESLint 9.38.0 and Prettier 3.6.2 for code quality
• Leverage React 19.2.0 features and concurrent rendering
• Implement responsive design for all components
• Ensure WCAG 2.1 AA accessibility compliance
• Use semantic HTML and proper ARIA labels
• Utilize Tailwind CSS v4 theme variables for consistent styling
• Pre-commit hooks automatically run linting and formatting

License

MIT - ENVOYOU SEC API Platform