A premium, customizable floating dashboard Chrome Extension to track biometric office hours, breaks, and exit time in real-time. Built with Manifest V3 and modular ES components.

• Node.js: v18.0.0 or higher
• NPM: v9.0.0 or higher
• Google Chrome (or any Chromium-based browser like Edge, Brave, Vivaldi)

All source code is cleanly split into single-responsibility modules in src/. Built assets are output to dist/:

hrms-extension/
├── manifest.json                  # Manifest V3 extension configuration
├── package.json                   # NPM dependencies and development scripts
├── build.js                       # Lightning-fast esbuild bundler script
├── dist/                          # Compiled distribution folder (DO NOT EDIT DIRECTLY)
│   └── content-script.js          # Compiled bundle output injected into HRMS page
├── assets/
│   └── icons/                     # Extension icons (16px, 48px, 128px)
└── src/
    ├── background/
    │   └── background.js          # MV3 Service Worker for background alarms & notifications
    ├── styles/
    │   └── widget.css             # Vanilla CSS stylesheet & design tokens
    ├── modules/
    │   ├── api.js                 # Backend HRMS API fetchers
    │   ├── storage.js             # Storage abstraction (localStorage & chrome.storage.local)
    │   ├── metrics.js             # Pure business calculations (work/break mins, target exit time)
    │   ├── notifier.js            # Desktop notification manager & throttler
    │   ├── icons.js               # Centralized SVG icon registry
    │   ├── state.js               # Central reactive state manager & subscriber
    │   ├── todo.js                # Core pure business logic & urgency calculations for tasks
    │   └── utils.js               # Time formatting & formula expression parser
    ├── controllers/
    │   └── WidgetController.js    # Main widget UI controller, polling timers & lifecycle
    ├── components/
    │   ├── Draggable.js           # Drag & Drop controller with bounds detection
    │   ├── BadgeView.js           # Collapsed floating badge UI
    │   ├── DashboardCard.js       # Main expanded dashboard card UI
    │   ├── TodoPanel.js           # Interactive TODO manager subpanel
    │   ├── ShortcutsPanel.js      # Quick bookmark links manager subpanel
    │   ├── SettingsPanel.js       # Settings modal (custom target hours, themes, notification toggles)
    │   └── SyncPanel.js           # Mobile PWA QR code sync modal
    └── content.js                 # Clean 15-line entry point bootstrapping WidgetController

Open your terminal in the project root directory:

npm install

(Note for Windows PowerShell users: If script execution is blocked, run cmd /c npm install)

1. Open Google Chrome and navigate to chrome://extensions/.
2. Enable Developer mode using the toggle switch in the top-right corner.
3. Click the "Load unpacked" button in the top-left menu.
4. Select the hrms-extension project folder.
5. Open or refresh https://apps.pal.tech/hrms/.
6. The floating HRMS Attendance widget will appear in the bottom-right corner!

When developing new features or tweaking styles:

1. Start watch mode in your terminal:

   npm run watch

2. Edit source code inside src/:
   • Styles -> src/styles/widget.css
   • UI views -> src/components/
   • Controller logic -> src/controllers/WidgetController.js
   • Data & calculation logic -> src/modules/
3. The build script automatically updates dist/content-script.js.
4. Refresh the https://apps.pal.tech/hrms/ webpage in Chrome to see your changes instantly!
5. If you modify manifest.json or src/background/background.js, go to chrome://extensions/ and click the Reload 🔄 button on the extension card.

• Content Script Console Logs: Open Chrome DevTools (F12 or Ctrl + Shift + I) on the HRMS webpage to view logs, network calls, and UI state.
• Background Service Worker Logs: On chrome://extensions/, click "service worker" under the extension card to open DevTools for background.js.
• Reset Storage State: To clear saved settings and drag position during testing, run this in the Chrome Console on the HRMS page:

  localStorage.clear();
  location.reload();

• src/content.js: Pure bootstrap (~15 lines). Initializes WidgetController.
• src/controllers/WidgetController.js: Owns UI mounting, collapse state toggling, and 1-sec / 1-min timers.
• src/modules/notifier.js: Owns desktop notification permission checks and 5-minute interval throttling.
• src/modules/metrics.js: Pure functions for work/break math. Zero DOM dependencies.
• docs/NOTIFICATION_GUIDE.md: Detailed architectural guide on how desktop notifications work.
• dist/content-script.js: Generated bundle file output by esbuild. Never edit manually!