System Full Overview (v1.1.7)

System Overview: KPI Dashboard Pro (v1.1.7)

1. Core Purpose & High-Level Functionality
KPI Dashboard Pro is a comprehensive, client-side, single-page web application designed for managers and team leads to track, manage, and visualize various Key Performance Indicators (KPIs) for their teams. It is built entirely with web technologies and runs completely within the user’s browser, using localStorage for all data persistence. This makes it a portable, serverless, and offline-capable tool.
The application is architected around a modular, tab-based interface, providing a clear and organized way to access different performance areas.

2. Key Modules & Features
The dashboard is divided into the following primary tabs:
Service Desk:
Functionality: Tracks IT service desk ticket logs, including accomplished, pending, and violated tickets for each technician over specified date ranges.
KPIs: Automatically calculates and displays key metrics like Closure Rate and SLA Compliance.
Visualization: Features interactive charts to visualize ticket volume by technician and a breakdown of overall ticket status. Users can switch between bar, line, pie, and doughnut chart types.
Reporting: Provides a detailed ticket log table and a summary report, both with robust filtering (by technician, date range) and sorting capabilities.
Meetings:
Functionality: Manages meeting schedules and tracks employee attendance. It supports creating single meetings as well as complex recurring meetings (daily, weekly, monthly).
Attendance Tracking: Records attendance status (‘On Time’, ‘Late’, ‘Excused Absent’, etc.) and automatically calculates an attendance score based on punctuality. It intelligently marks employees as ‘Excused’ if they have a registered leave on the meeting date.
Visualization: Includes charts for overall attendance breakdown, monthly performance trends, and a detailed status chart for individual employees.
Reporting: A comprehensive report table shows individual employee attendance statistics, and a separate list manages all scheduled meetings.
Leave Tracker:
Functionality: Manages all employee leave records, including type, reason, and duration.
Calculations: Automatically calculates the total hours for each leave based on a pre-defined work week schedule. It also tracks each employee’s used vs. remaining leave allowance.
Reporting: Provides tables for upcoming leaves (next 30 days) and a complete history of all leave records.
Visualization: Includes charts to show leave trends over time, both for individual employees and for the entire team.
Performance Scorecard:
Functionality: A powerful module for conducting formal performance reviews. It allows for the creation of highly detailed scorecards based on a fully customizable set of metrics and KPIs.
Customization: Users can define their own KPIs, assign weights, set scoring directions (higher is better vs. lower is better), and define the target values for different performance levels (e.g., Poor, Meets, Exceptional).
Scoring: Automatically calculates a final weighted score (on a 1-5 scale) and provides a qualitative interpretation (e.g., “Exceeds Expectations”).
History & Export: Saves a history of all completed scorecards. Crucially, it allows for the PDF export of individual scorecards, which can be branded with a custom company logo and footer text.
Dashboard: An integrated dashboard visualizes performance trends, comparisons between employees, and metric breakdowns.
Employees:
Functionality: A central repository for all employee data. It stores not only basic information (name, leave allowance) but also role-specific details (isTechnician) and information required for the Performance Scorecard (ID number, position, department).
Data Integrity: Deleting an employee correctly cascades the removal of their associated records from all other modules (meetings, tickets, scorecards) to maintain data consistency.
Settings & Data:
Functionality: The application’s control center, offering extensive customization and data management.
UI Customization: Users can change the application title, primary theme color, background color, and upload a custom logo for the main dashboard header. They can also hide unused tabs and toggle the chart layout between a compact (2-per-row) and full-width (1-per-row) view.
Data Management: Provides robust tools for full application backup and restore via a single JSON file. It also allows for the export of individual data modules (Employees, Tickets, etc.) to CSV format.
Backup Reminders: An intelligent reminder system prompts the user to back up their data at configurable intervals (e.g., daily, weekly) to prevent data loss.
Danger Zone: A protected section allows for the complete wipe of all application data (excluding UI settings), with a confirmation step to prevent accidental deletion.

3. Technical Architecture
Framework: React 19 with TypeScript, using modern hooks (useState, useEffect, useCallback, useMemo) for state management and side effects.
Styling: A combination of Tailwind CSS for rapid, utility-first UI development and custom CSS for global theming, animations, and component-specific styles. Font Awesome is used for icons.
Data Persistence: All application data and settings are stored in the user’s browser via the localStorage API.
Charting: The Recharts library is used for all data visualizations, providing interactive and responsive charts.
PDF Generation: jsPDF and the jspdf-autotable plugin are leveraged to dynamically generate professional-looking PDF scorecards.
Code Structure: The application is highly modular, with code separated into logical components (e.g., Modal, PaginationControls), tabs (for each main feature), types, and constants. The main application state is managed in the top-level App.tsx component and passed down to children via props.