Dashboard Application
Relevant source files
The following files were used as context for generating this wiki page:
The Dashboard Application is a private web interface within the Subito monorepo designed for administrative or internal management tasks. Built using Next.js 16 and React 19, it serves as the primary frontend for interacting with the platform's shared UI components and backend services. Sources: apps/dashboard/package.json:1-25, apps/dashboard/app/page.tsx:1-18
The application is integrated into a Turbo-powered monorepo, allowing it to consume local workspace packages such as @subito/ui and shared configuration sets for ESLint and TypeScript. It utilizes the Turbopack engine for development and Tailwind CSS for styling, specifically pulling global styles and theme variables from the centralized UI package. Sources: package.json:1-20, apps/dashboard/package.json:14-23, packages/ui/src/styles/globals.css:1-20
Architecture and Technical Stack
The dashboard is structured as a Next.js application leveraging the App Router. It is designed to be highly modular, depending on internal workspace packages to maintain consistency across the Subito ecosystem. Sources: apps/dashboard/package.json:14-16, apps/dashboard/app/page.tsx:1-3
Core Dependencies
The following table outlines the primary technologies powering the dashboard:
| Dependency | Purpose | Version |
|---|---|---|
| Next.js | React framework for SSR and routing | 16.1.6 |
| React | UI library | 19.2.4 |
| @subito/ui | Internal design system components | workspace:* |
| Tailwind CSS | Utility-first styling | 4.1.18 |
| Lucide React | Icon library | 1.16.0 |
| Next Themes | Dark/Light mode management | 0.4.6 |
Sources: apps/dashboard/package.json:14-23, packages/ui/package.json:13-20
Workspace Relationship
The dashboard operates within a monorepo structure where shared logic and UI are abstracted into packages.
This diagram illustrates the dependency flow where the Dashboard application consumes the shared UI package and configuration workspaces. Sources: apps/dashboard/package.json:14-25, package.json:13-16
UI and Styling System
The dashboard utilizes a centralized styling system defined in the @subito/ui package. This system uses Tailwind CSS with CSS variables to support dynamic theming, including a built-in dark mode. Sources: packages/ui/src/styles/globals.css:1-50, apps/dashboard/app/page.tsx:12-14
Theming Variables
The application implements a comprehensive color palette using oklch values, ensuring consistent visual language for cards, inputs, and primary actions.
| Variable | Light Mode Value | Dark Mode Value |
|---|---|---|
| --background | oklch(1 0 0) | oklch(0.145 0 0) |
| --foreground | oklch(0.145 0 0) | oklch(0.985 0 0) |
| --primary | oklch(0.205 0 0) | oklch(0.922 0 0) |
| --border | oklch(0.922 0 0) | oklch(1 0 0 / 10%) |
Sources: packages/ui/src/styles/globals.css:55-120
Component Integration
Components are imported from the @subito/ui workspace. The application is configured to recognize these through path aliases defined in the UI configuration. Sources: packages/ui/components.json:10-18, apps/dashboard/app/page.tsx:1
// Example of importing a shared button component in the dashboard
import { Button } from "@subito/ui/components/button"
export default function Page() {
return (
<Button className="mt-2">Button</Button>
)
}
Sources: apps/dashboard/app/page.tsx:1-12
Development Workflow
The dashboard uses pnpm and turbo for task orchestration. Key scripts allow for development, building, and type checking across the workspace. Sources: apps/dashboard/package.json:6-12, package.json:4-11
Command Reference
| Script | Command | Description |
|---|---|---|
dev | next dev --turbopack | Starts development server with Turbopack |
build | next build | Compiles the dashboard for production |
typecheck | tsc --noEmit | Validates TypeScript types |
format | prettier --write | Standardizes code formatting |
Sources: apps/dashboard/package.json:6-12
This sequence shows the startup flow for the dashboard development environment. Sources: apps/dashboard/package.json:7, package.json:5
Conclusion
The Subito Dashboard Application provides the necessary infrastructure for internal tools, leveraging modern React and Next.js features. By utilizing a shared UI package and centralized styling, it ensures that management interfaces maintain visual and functional parity with the rest of the Subito platform while benefiting from the performance of Turbopack and the efficiency of a monorepo workflow. Sources: apps/dashboard/package.json:1-3, packages/ui/src/styles/globals.css:1-10