Employee Time In Out System

Web Version by Khian Victory D. Calderon

A web version of my Python Employee Time In Out System Desktop Application.

Note: Updated on November 7, 2025 — this web version migrated from localStorage to IndexedDB for more reliable local storage. All data is still stored locally in your browser, so no server or online database is required.

This system allows small offices or demo environments to track employee attendance easily.

---

📌 Getting Started (For Users)

1. Open index.html in a modern web browser (Chrome, Firefox, Edge).
2. Navigate the menu to access:
   • Time In / Out – Employees can log their attendance.
   • Logs – View, export, or import attendance logs.
   • Employees – Add, edit, or delete employee entries.
   • Read Me – Learn how to use ETIOS safely.
   • Credits – Developer info and clear all data if needed.
3. Data Management:
   • Export employee lists and logs as .csv or .json files for backup.
   • Import previously exported data to merge with current records.
   • Clear only logs or all data as needed, but always back up first.

---

✅ Features

• 🕒 Time In / Out Logging – Quickly log employee attendance.
• 🗂 View Logs – Review past logs sorted by date and time.
• 👥 Employee Management – Add, edit, or remove employees.
• 💾 Export & Import – Use .csv or .json for backups.
• 🔒 Local Browser Storage – Data is stored using IndexedDB, not sent online.
• 📱 Responsive Design – Works on both desktop and mobile devices.
• ⚠️ Safety Tips:
  • Back up regularly before importing or clearing data.
  • Ensure unique employee IDs to avoid errors.
  • Be mindful of browser storage limits (~5MB).

---

🖼 Preview

---

👨‍💻 Developer Info

• Built With: HTML, Tailwind CSS, Vanilla JavaScript.
• Dynamic Content: Each page (Time In/Out, Logs, Employees, Read Me, Credits) is loaded dynamically using JavaScript template strings.
• Storage: Data is managed with IndexedDB for reliable local persistence.
• Exports/Imports: Handles CSV and JSON formats with automatic merging and sorting.
• Responsive Navbar: Supports desktop and mobile menus with active button highlighting.
• Source Code: GitHub Repository

---

⚙️ Notes for Developers

• JavaScript functions are modular:
  • addEmployee / getAllEmployees / deleteEmployee – Handles employee records in IndexedDB.
  • addLog / getAllLogs – Handles time logs storage and retrieval.
  • renderLogs / renderEmployees – Updates DOM dynamically.
  • exportLogsCSV / exportLogsJSON / importLogs – File management utilities.
• Navigation uses History API to maintain browser URLs without page reload.
• All logs are linked to employee names; deleted employees are labeled (Deleted Employee).
• Migration from localStorage ensures existing user workflows remain consistent while improving data reliability.