Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The ActivityWatch Central Dashboard is a comprehensive web application designed for organizations to collect, consolidate, and visualize telemetry data from ActivityWatch across multiple machines. This dashboard serves as a centralized hub for executives, managers, and IT administrators to gain insights into workforce engagement, productivity patterns, and device management.

## CORE FEATURES
1. **Dashboard Views**: Tailored dashboards for executives, managers, and IT admins displaying key performance indicators (KPIs) such as active hours, productivity index, and device status.
2. **Device Management**: Functionality for onboarding, updating, and offboarding devices, including API key generation and health checks.
3. **Data Visualization**: Interactive charts and graphs presenting historical data trends, app usage breakdowns, and activity heatmaps.
4. **User Authentication**: Secure access control with roles (admin, manager, viewer) and JWT-based authentication for user sessions.
5. **Metrics API**: Robust backend API to ingest telemetry data from devices and serve aggregated metrics to the frontend.
6. **Alerts & Notifications**: Real-time alerts for anomalies such as sudden drops in activity or unexpected new app usage.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The main layout structure includes a top navigation bar, a sidebar for navigation links, and a central content area displaying the selected dashboard or feature.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Zustand for managing authentication and device state.

## IMPLEMENTATION STEPS
1. **Project Setup**: Initialize a new React project with TypeScript and install Tailwind CSS along with shadcn/ui for UI components.
2. **Folder Structure**: Organize the project into folders for components, pages, and hooks.
3. **Authentication Flow**: Implement JWT authentication using a login page and protected routes for accessing dashboard views.
4. **Create Dashboard Components**: Develop components for the executive, manager, and IT admin dashboards, utilizing charts for data visualization.
5. **Device Management Features**: Build forms and tables for onboarding devices, showing their status, and allowing updates.
6. **Metrics API Integration**: Connect the frontend to the backend API for real-time data fetching and display.
7. **Implement Alerts**: Add functionality to notify users of any anomalies detected in device activity.

## USER EXPERIENCE
Users will interact with the application through a responsive interface that allows for easy navigation between different dashboards. Executives can quickly view high-level KPIs at a glance, while managers can drill down into team-specific metrics. IT admins will have the tools necessary to manage device onboarding and monitor sync health. The minimalist design ensures that users focus on the data without distractions, while the use of interactive charts makes it easy to derive insights from the telemetry data.

This prompt provides a complete structure ready for implementation in Lovable, focusing on building a functional, minimalist web application that aligns with the user's vision.