Device-Repair-Tracker

A Full-Stack demo of a device repair tracking system built with HTML, CSS, JS, and JSON.

📱 Device Repair Tracker (Demo Version)

Welcome to the GitHub demo of the Device Repair Tracker Created by Chamicara De Silva (Óptane).

This Full-Stack version simulates the original Power Apps solution using just HTML, CSS, JS, and JSON—ideal for showcasing functionality and UI on GitHub Pages.

🔗 Live Demo: Device Repair Tracker

---

🚀 Project Purpose

This system was originally built for a device repair and return process across 100+ locations. It helps agents and external users to track devices through key phases such as:

• 📦 In-Transit
• 🏢 Warehouse
• 🛠️ Service Centre
• 🔧 Repaired
• ✅ Completed

This GitHub version showcases how the app looks and functions without backend connections—perfect for pitching, demoing, or reviewing.

---

📑 Demo Screens

The project mimics 5 core screens from the original Power App:

1. 🏠 HomeScreen – Entry point with brief intro
2. 📤 SubmitScreen – Form to submit repair request
3. 📨 WorkIDScreen – Displays assigned Work ID
4. 📊 StatusTrackingScreen – Track status using IMEI or Work ID
5. ✅ ConfirmHandoverScreen – Agent confirms handover

---

🧱 Technologies Used

• HTML/CSS/JavaScript – UI & logic
• JSON file – Simulates database
• GitHub Pages – Hosting

---

⚙️ How to Use

1. Visit the Live Demo
2. Navigate through different screens
3. Enter IMEI or Work ID to simulate tracking(Use IMEI's or WorkID's Included in repairs.json file)

---

📁 Folder Structure

Device-Repair-Tracker/ ├── index.html # HomeScreen ├── submit.html # SubmitScreen ├── workid.html # WorkIDScreen ├── status.html # StatusTrackingScreen ├── confirm.html # ConfirmHandoverScreen ├── style.css ├── app.js └── repairs.json

💡 Collaborators

• Senura De Silva (IG - https://www.instagram.com/senulk?igsh=MWY4aTlxYm85ZnVzdA==)