🎓 EdPEx Category 7 Quality Assurance & KPI Tracking System (PWA)

An enterprise-grade Progressive Web Application (PWA) engineered for the Faculty of Education, Chandrakasem Rajabhat University, streamlining 5-year strategic performance tracking, bi-directional Google Sheets cloud synchronization, and automated quality assurance reporting across 95 KPIs.

---

📌 Project Overview & Context

EdPEx (Education Criteria for Performance Excellence) Category 7 measures organizational operational outcomes and overall educational performance. Educational institutions traditionally manage this through disconnected spreadsheets, resulting in data desynchronization, delayed report collection from responsible staff, and cumbersome preparation for executive board audits.

This project delivers a centralized, cloud-synchronized performance tracking hub that bridges academic administration with modern web technology, empowering university executives, responsible staff, and QA administrators.

---

✨ Core Feature Highlights

1. 👑 Executive Strategic Dashboard (High-Level Overview)

• 5-Year Strategic Roadmap (2567 - 2571): Trend charts comparing actual performance against the university strategic target (85%).
• Unified Donut Chart: Categorization into 4 key statuses: Met Target, Monitor (80-99%), OFI - Opportunity for Improvement (<80%), and Pending.
• 5 Category Drilldown Cards: Instant filtering across Category 7.1 (Learners), 7.2 (Customers), 7.3 (Workforce), 7.4 (Leadership/Governance), and 7.5 (Finance/Strategy).
• Official A4 Report & Excel Exporter: Generate board-ready summary documents with official university letterheads and signature blocks.

---

2. 👨‍💼 Staff Portal & Evidence Cloud Uploader

• Personalized KPI Workspace: Filtered views displaying only KPIs assigned to the logged-in staff member with real-time completion progress (0% - 100%).
• Dual-Mode Evidence Attachment:
  • Direct Google Drive folder/file URL embedding.
  • Direct file drag-and-drop uploading to the Faculty Google Drive folder with automatic Sheets URL linking.
• Deadline Countdown Alerts: Visual countdown clocks for the 6-month and 12-month reporting milestones.

---

3. 🛡️ Admin Command Center & Automation Suite

• 1-Click Google Sheets Access: Instant navigation button to the central database spreadsheet.
• 5-Year KPI Target Manager: Configure yearly targets (2567-2571), Thai KPI titles, units of measure, external benchmarks, and staff assignments with Auto-DropUp UI protection.
• 12 Staff Matrix Directory: Personnel workload distribution cards with click-to-view KPI tags and 1-click cloud synchronization.
• Automated Email Dispatcher: One-click automated HTML email dispatch via Google Apps Script directly into staff @chandra.ac.th inboxes for pending items.
• View-As Simulator: Super Admin view emulator enabling instant role simulation without credential requests.

---

🏗️ Technical Architecture & Data Flow

graph TD
    subgraph Client ["Frontend Client (React 18 + PWA)"]
        UI["Tailwind CSS + Lucide Icons"]
        State["Dynamic KPI State & Year Filter"]
        Worker["Service Worker & Offline Cache"]
    end

    subgraph Roles ["Role-Based Portals"]
        Exec["Executive Dashboard (Roadmap / A4 Print)"]
        Staff["Staff Portal (Input & Drive Upload)"]
        Admin["Admin Center (Matrix / Target / Email)"]
    end

    subgraph Integration ["Cloud Integration & Automation Layer"]
        GAS["Google Apps Script (GAS) Webhook API"]
        GSheets[("Central Google Sheets Database")]
        GDrive["Faculty Evidence Storage (Google Drive)"]
        Gmail["Automated Gmail Notification Engine"]
    end

    UI --> State
    State --> Worker
    State --> Exec
    State --> Staff
    State --> Admin

    Staff --> GAS
    Admin --> GAS
    GAS <--> GSheets
    GAS --> GDrive
    GAS --> Gmail

Loading