Django React UI/UX for Inventory Tool English/Korean -- 2
Budget: $30 – $250 USD
I'm looking for a skilled developer with experience in Django and React to create a UI/UX for a tool manager focused on inventory management.
Key Features:
- Item tracking: The system should allow for detailed tracking of each item within the inventory.
- Stock alerts: There should be a feature to alert users when stock is low or when it's time to reorder.
- User process (by UAC): The system should support user processes based on User Access Control, ensuring that different users have access to appropriate features.
- Docker compose for deployment
User Roles:
The system should support the following user roles:
- Administrator: Full control over the system, managing all aspects of the inventory.
- Manager: Overseeing inventory and stock levels, with the ability to make decisions based on the data.
- Employee: Basic access for handling inventory tasks.
- Developer: Access for maintenance and upgrades of the system.
Ideal skills for the job include:
- Proficiency in Django and React
- UI/UX design experience
- Understanding of inventory management systems
- Knowledge of User Access Control systems
Project term: 3 days
Github collaboration is required
Please provide examples of similar projects you've completed in your proposal. Refer to this scenario:
---
## **? Storyboard for AI_TIM Frontend UI**
Each screen should be designed as a **step-by-step interactive UI** for the tool management system.
### **1️⃣ Home Screen (Welcome & Authentication)**
- **Elements:**
- AI_TIM **logo & branding**
- "Welcome to AI_TIM Tool Management System" **message**
- **Login options**:
- **Employee ID Card Scan**
- **Smartphone NFC Login**
- **Proceed button** → Takes user to **Tool Selection Screen**.
---
### **2️⃣ Tool Selection Screen**
- **Elements:**
- **Toolbox UI** (Grid-style layout showing available & unavailable tools)
- **LED Status Indicators**:
- **Red** → Tool missing
- **Blue** → Tool present
- **Click to select tool** → Shows a **popup confirmation** ("Are you sure you want to take this tool?")
- **Proceed button** → Moves to **Confirmation & Instructions**
---
### **3️⃣ Confirmation & Instructions**
- **Elements:**
- **Big checkmark animation** (Tool successfully selected)
- "Confirmed. Listen to the instructions and take it with you."
- **Audio Guide Button** (For accessibility)
- **Proceed button** → Moves to **Tool Info & Notifications**
---
### **4️⃣ Tool Info & Notifications**
- **Elements:**
- **Tool Details UI**:
- Tool Name, ID, Condition, Last Maintenance Date
- "The system provides basic information on tool rental"
- **Send Notification to User’s Phone** (via SMS/Push notification)
- **Proceed button** → Moves to **Return Reminder System**
---
### **5️⃣ Return Reminder System**
- **Elements:**
- "Before the return deadline, you will receive a **notification text message**."
- **Countdown Timer** until tool return deadline
- **Extend Rental Button** (Optional)
- **Proceed button** → Moves to **Return Process**
---
### **6️⃣ Tool Return Process**
- **Elements:**
- "Place tool on the table for scanning."
- **Visual Guide:** Image of a user placing the tool
- **Audio Confirmation: "Return Scanned Successfully!"**
- **Proceed button** → Moves to **Toolbox Placement**
---
### **7️⃣ Insert Tool in Toolbox**
- **Elements:**
- **Animated Guide** → "Insert tool into the correct slot."
- **LED Flashing Status**
- **Blue LED** = Tool placed correctly
- **Red LED** = Error, wrong slot
- **Proceed button** → Moves to **Final Confirmation Screen**
---
### **8️⃣ Final Confirmation & Exit**
- **Elements:**
- "Return Successful! Thank you."
- **Notification Sent**: "Return confirmation message sent to your phone."
- **Exit Button** → Takes user back to **Home Screen**
---
## **? Next Steps for Figma Design**
Your designer can create:
- A **mobile-friendly UI** flow
- **Interactive components** (LED status, tool selection, notifications)
- **Animations for transitions**
---
## Notification
### **? Storyboard Notification Features for Check-in/Check-out & Backlogs**
We will integrate **real-time notifications** at key steps in the **AI_TIM Tool Management System**, ensuring that users receive alerts during:
- **Check-in & Check-out Progress**
- **Pending Return Reminders (Backlogs)**
- **User Access Control (UAC) Alerts**
---
## **? Notification Features Overview**
### **1️⃣ Check-out Notifications (Tool Borrowing Process)**
? **Trigger:** When a user selects a tool for checkout.
? **Notification Type:** Push Notification / SMS / In-App Alert
**Message Example:**
✅ *"You have successfully checked out [Tool Name]. Please return it before [Due Date]."*
? **UAC Integration:**
- Admins can set **checkout limits** (e.g., max tools per user).
- If a user exceeds the limit → **Warning Notification:**
⚠️ *"You have exceeded the maximum number of checked-out tools. Return a tool before borrowing another."*
---
### **2️⃣ Check-in Notifications (Tool Return Process)**
? **Trigger:** When a tool is scanned for return.
? **Notification Type:** In-App Alert + Confirmation SMS
**Message Example:**
✅ *"Tool [Tool Name] has been successfully returned. Thank you!"*
? **UAC Integration:**
- If the tool is damaged or missing parts → **Admin Alert:**
⚠️ *"Tool [Tool Name] requires maintenance. Please inspect before approving return."*
---
### **3️⃣ Backlog Reminders (Overdue Tools)**
? **Trigger:** If the return deadline is missed.
? **Notification Type:** Push Notification / Email Reminder
? **First Reminder (1 hour before deadline)**
⚠️ *"Reminder: Tool [Tool Name] is due for return in 1 hour. Please return on time to avoid penalties."*
? **Second Reminder (After deadline is missed)**
⚠️ *"Overdue Alert: Tool [Tool Name] was due on [Due Date]. Please return it immediately."*
? **Escalation to Admins (24 hours overdue)**
? *"User [User Name] has an overdue tool [Tool Name]. Please take necessary action."*
? **UAC Integration:**
- If a user has **multiple overdue tools**, their **checkout privileges can be temporarily revoked** until they return tools.
- Admins can **override and grant extensions** via the dashboard.
---
### **4️⃣ User Access Control (UAC) Notifications**
? **Trigger:** Unauthorized actions or security events.
? **Notification Type:** Admin Dashboard Alert
✅ **Access Granted:**
*"User [User Name] has successfully logged into AI_TIM system."*
⚠️ **Unauthorized Attempt:**
*"Security Alert: Unauthorized access attempt detected from [Device/IP]."*
? **Suspicious Activity Alert:**
*"User [User Name] attempted to check out [Tool Name] but has an active overdue tool. Action required."*
---
## **? Next Steps for Implementation in UI/UX**
?? **Frontend Design (Figma) Updates:**
- **Notification Popup UI** for real-time alerts
- **Notification History Page** in user dashboard
- **Admin Dashboard Alerts** for overdue tools & security warnings
? **Backend (Streamlit) Integration:**
- Use **Twilio / Firebase** for SMS & push notifications
- Implement **WebSockets for live alerts** in Streamlit UI
---
Key Features:
- Item tracking: The system should allow for detailed tracking of each item within the inventory.
- Stock alerts: There should be a feature to alert users when stock is low or when it's time to reorder.
- User process (by UAC): The system should support user processes based on User Access Control, ensuring that different users have access to appropriate features.
- Docker compose for deployment
User Roles:
The system should support the following user roles:
- Administrator: Full control over the system, managing all aspects of the inventory.
- Manager: Overseeing inventory and stock levels, with the ability to make decisions based on the data.
- Employee: Basic access for handling inventory tasks.
- Developer: Access for maintenance and upgrades of the system.
Ideal skills for the job include:
- Proficiency in Django and React
- UI/UX design experience
- Understanding of inventory management systems
- Knowledge of User Access Control systems
Project term: 3 days
Github collaboration is required
Please provide examples of similar projects you've completed in your proposal. Refer to this scenario:
---
## **? Storyboard for AI_TIM Frontend UI**
Each screen should be designed as a **step-by-step interactive UI** for the tool management system.
### **1️⃣ Home Screen (Welcome & Authentication)**
- **Elements:**
- AI_TIM **logo & branding**
- "Welcome to AI_TIM Tool Management System" **message**
- **Login options**:
- **Employee ID Card Scan**
- **Smartphone NFC Login**
- **Proceed button** → Takes user to **Tool Selection Screen**.
---
### **2️⃣ Tool Selection Screen**
- **Elements:**
- **Toolbox UI** (Grid-style layout showing available & unavailable tools)
- **LED Status Indicators**:
- **Red** → Tool missing
- **Blue** → Tool present
- **Click to select tool** → Shows a **popup confirmation** ("Are you sure you want to take this tool?")
- **Proceed button** → Moves to **Confirmation & Instructions**
---
### **3️⃣ Confirmation & Instructions**
- **Elements:**
- **Big checkmark animation** (Tool successfully selected)
- "Confirmed. Listen to the instructions and take it with you."
- **Audio Guide Button** (For accessibility)
- **Proceed button** → Moves to **Tool Info & Notifications**
---
### **4️⃣ Tool Info & Notifications**
- **Elements:**
- **Tool Details UI**:
- Tool Name, ID, Condition, Last Maintenance Date
- "The system provides basic information on tool rental"
- **Send Notification to User’s Phone** (via SMS/Push notification)
- **Proceed button** → Moves to **Return Reminder System**
---
### **5️⃣ Return Reminder System**
- **Elements:**
- "Before the return deadline, you will receive a **notification text message**."
- **Countdown Timer** until tool return deadline
- **Extend Rental Button** (Optional)
- **Proceed button** → Moves to **Return Process**
---
### **6️⃣ Tool Return Process**
- **Elements:**
- "Place tool on the table for scanning."
- **Visual Guide:** Image of a user placing the tool
- **Audio Confirmation: "Return Scanned Successfully!"**
- **Proceed button** → Moves to **Toolbox Placement**
---
### **7️⃣ Insert Tool in Toolbox**
- **Elements:**
- **Animated Guide** → "Insert tool into the correct slot."
- **LED Flashing Status**
- **Blue LED** = Tool placed correctly
- **Red LED** = Error, wrong slot
- **Proceed button** → Moves to **Final Confirmation Screen**
---
### **8️⃣ Final Confirmation & Exit**
- **Elements:**
- "Return Successful! Thank you."
- **Notification Sent**: "Return confirmation message sent to your phone."
- **Exit Button** → Takes user back to **Home Screen**
---
## **? Next Steps for Figma Design**
Your designer can create:
- A **mobile-friendly UI** flow
- **Interactive components** (LED status, tool selection, notifications)
- **Animations for transitions**
---
## Notification
### **? Storyboard Notification Features for Check-in/Check-out & Backlogs**
We will integrate **real-time notifications** at key steps in the **AI_TIM Tool Management System**, ensuring that users receive alerts during:
- **Check-in & Check-out Progress**
- **Pending Return Reminders (Backlogs)**
- **User Access Control (UAC) Alerts**
---
## **? Notification Features Overview**
### **1️⃣ Check-out Notifications (Tool Borrowing Process)**
? **Trigger:** When a user selects a tool for checkout.
? **Notification Type:** Push Notification / SMS / In-App Alert
**Message Example:**
✅ *"You have successfully checked out [Tool Name]. Please return it before [Due Date]."*
? **UAC Integration:**
- Admins can set **checkout limits** (e.g., max tools per user).
- If a user exceeds the limit → **Warning Notification:**
⚠️ *"You have exceeded the maximum number of checked-out tools. Return a tool before borrowing another."*
---
### **2️⃣ Check-in Notifications (Tool Return Process)**
? **Trigger:** When a tool is scanned for return.
? **Notification Type:** In-App Alert + Confirmation SMS
**Message Example:**
✅ *"Tool [Tool Name] has been successfully returned. Thank you!"*
? **UAC Integration:**
- If the tool is damaged or missing parts → **Admin Alert:**
⚠️ *"Tool [Tool Name] requires maintenance. Please inspect before approving return."*
---
### **3️⃣ Backlog Reminders (Overdue Tools)**
? **Trigger:** If the return deadline is missed.
? **Notification Type:** Push Notification / Email Reminder
? **First Reminder (1 hour before deadline)**
⚠️ *"Reminder: Tool [Tool Name] is due for return in 1 hour. Please return on time to avoid penalties."*
? **Second Reminder (After deadline is missed)**
⚠️ *"Overdue Alert: Tool [Tool Name] was due on [Due Date]. Please return it immediately."*
? **Escalation to Admins (24 hours overdue)**
? *"User [User Name] has an overdue tool [Tool Name]. Please take necessary action."*
? **UAC Integration:**
- If a user has **multiple overdue tools**, their **checkout privileges can be temporarily revoked** until they return tools.
- Admins can **override and grant extensions** via the dashboard.
---
### **4️⃣ User Access Control (UAC) Notifications**
? **Trigger:** Unauthorized actions or security events.
? **Notification Type:** Admin Dashboard Alert
✅ **Access Granted:**
*"User [User Name] has successfully logged into AI_TIM system."*
⚠️ **Unauthorized Attempt:**
*"Security Alert: Unauthorized access attempt detected from [Device/IP]."*
? **Suspicious Activity Alert:**
*"User [User Name] attempted to check out [Tool Name] but has an active overdue tool. Action required."*
---
## **? Next Steps for Implementation in UI/UX**
?? **Frontend Design (Figma) Updates:**
- **Notification Popup UI** for real-time alerts
- **Notification History Page** in user dashboard
- **Admin Dashboard Alerts** for overdue tools & security warnings
? **Backend (Streamlit) Integration:**
- Use **Twilio / Firebase** for SMS & push notifications
- Implement **WebSockets for live alerts** in Streamlit UI
---