Spaces:
Running
Running
Project Name: DMS Central
Browse filesGoal: Build a complete, clickable, web-based prototype for BACL’s Collections Management Platform with a modern dashboard UI, Customer 360 view, dialer integration, and reporting capabilities.
1. Login & Authentication (For testing you can create static ID and pwd for each role and mention the same on lgin page. On click of it should get prefilled and then user can login. UI should be very clean professional.
Secure Login Page
Fields: Username, Password.
Show Masked password, “Forgot Password” link.
MFA screen for Admins (OTP or Authenticator App flow).
Error messages for invalid login, lockout after 5 failed attempts.
Role-Based Access Control (RBAC)
Roles: Admin, Supervisor, Agent, FOS Agent.
Different dashboards/views based on role.
2. Dashboard (Main Landing Page)
Design a responsive, widget-based dashboard with the following sections:
2.1 Header & Navigation
Top navigation bar with:
Logo & Platform Name (DMS Central).
Global search bar (search by LAN, Customer Name).
Notification bell (real-time alerts).
Profile icon with dropdown: My Profile, Settings, Logout.
2.2 KPI Summary (Top Row)
Show 4–6 Key Metrics as cards with trend indicators:
Total Allocations (current month vs. previous).
Total Calls Made (click to view detailed call logs).
PTP Commitments (today / this week).
Pending Calls (daily target vs. achieved).
Collection % vs Allocation % (progress bar).
Compliance Alerts Count (red badge if >0).
Each card should have:
Value
Trend indicator (up/down arrow)
Click-to-drill-down link.
2.3 Real-Time Campaign Performance
Bar chart or donut chart for:
Calls by Status: Connected, Not Connected, Callback, Broken.
Agency-wise allocation vs collections.
Filters: Date range, Agency, Region, Campaign.
2.4 Drill-Down Table
Show tabular view of agents or agencies:
Columns: Name, Allocations, Calls Made, Right Party Contacts (RPC), PTP %, Collection %, Productivity Score.
Click row → open Agent Performance Detail (new page or popup).
2.5 Alerts & Notifications Panel
Right sidebar or widget for:
Pending Call Alerts – highlight overdue calls.
PTP Alerts – show customers with active PTP due today.
Compliance Alerts – abusive language detected, link to call recording.
2.6 Recent Activity / Communication Log
Show last 10 system events:
"Agent X completed 50 calls."
"New campaign added: August Collections."
"Compliance breach detected in Call #12345."
3. Customer 360 View
When user clicks a LAN or customer, open a Customer 360 page with:
3.1 Tabs
Customer Info
LAN, Name, Masked Contact, Preferred Language.
Loan Details: EMI, OS, Penalty, Total Overdue, Maturity Date.
Asset Details: Model, Registration Number, Dealer Name.
Customer & Vehicle Images
Thumbnails → open integrated document/image viewer.
Communication History
Last 4 dispositions with timestamps.
Remarks & PTP dates.
Full log of Click-to-Call, SMS, WhatsApp, IVR, Bot interactions.
Payments
Send Payment Link button.
Refresh Payment Status button.
Show status updates inline.
3.2 Action Buttons
Click-to-Call (initiates dialer via API).
Play Call Recording (opens audio player modal).
View Transcription (show AI-detected keywords).
Tag Call / Add Remark (save to history).
4. Dialer & Call Management
Predictive/Preview Mode Toggle on campaign settings page.
Inbound routing visualization (callback numbers create inbound campaign).
Secure playback of call recordings.
Show AI analysis highlights:
Abusive language flagged.
Compliance score.
5. Master Data Management (Admin Section)
User & Role Management: Add/Edit/Disable users, assign roles.
Agency Management: Add/edit agencies, assign allocation percentages.
Campaign Management: Configure predictive/preview modes, upload customer list.
Disposition Master: Maintain call outcomes.
Template Management: Configure SMS/Email/Compliance templates.
6. Reporting & Exports
Reports:
Agency-wise performance
Region-wise performance
Agent productivity
Collection vs Allocation
Filters: Date range, agency, region, campaign.
Export options: Excel, CSV, PDF.
7. Notifications & Alerts
Daily pending call alerts.
Real-time PTP alerts.
Compliance breach alert with direct call link.
8. Settings & Integrations
API Key Management: Indus, Payment Gateway, SMS/WhatsApp Gateway.
Configure Call Attempts: Daily/weekly call limits.
Upload Masters: Bulk upload CSV.
9. UI/UX Guidelines
Clean, enterprise-grade look with BACL brand colors.
Responsive design, mobile-friendly.
WCAG 2.1 AA accessibility.
Tabbed navigation for Customer 360.
Scrollable widgets, sticky top navigation bar.
Use charts and cards for data visualization.
10. Non-Functional Requirements to Simulate
Fast page load (<3s).
Sample loading states.
Show masked PII data by default.
Prototype Flow
Login → Dashboard → Drill Down into Agency → Select Agent → Open Customer 360 → Perform Call → View Recording → Submit Feedback → Return to Dashboard → View Reports → Manage Masters in Settings. - Initial Deployment
- README.md +6 -4
- index.html +1028 -18
- prompts.txt +226 -0
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
colorFrom: green
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
|
| 1 |
---
|
| 2 |
+
title: dms-central
|
| 3 |
+
emoji: 🐳
|
| 4 |
colorFrom: green
|
| 5 |
+
colorTo: purple
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite
|
| 10 |
---
|
| 11 |
|
| 12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
|
@@ -1,19 +1,1029 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>DMS Central - Collections Management</title>
|
| 7 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
| 10 |
+
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
| 11 |
+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
| 12 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 13 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 14 |
+
<script>
|
| 15 |
+
tailwind.config = {
|
| 16 |
+
theme: {
|
| 17 |
+
extend: {
|
| 18 |
+
colors: {
|
| 19 |
+
primary: '#0056b3',
|
| 20 |
+
secondary: '#6c757d',
|
| 21 |
+
success: '#28a745',
|
| 22 |
+
danger: '#dc3545',
|
| 23 |
+
warning: '#ffc107',
|
| 24 |
+
info: '#17a2b8',
|
| 25 |
+
dark: '#343a40',
|
| 26 |
+
light: '#f8f9fa',
|
| 27 |
+
}
|
| 28 |
+
}
|
| 29 |
+
}
|
| 30 |
+
}
|
| 31 |
+
</script>
|
| 32 |
+
<style>
|
| 33 |
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
| 34 |
+
body {
|
| 35 |
+
font-family: 'Inter', sans-serif;
|
| 36 |
+
}
|
| 37 |
+
.password-toggle {
|
| 38 |
+
position: absolute;
|
| 39 |
+
right: 10px;
|
| 40 |
+
top: 50%;
|
| 41 |
+
transform: translateY(-50%);
|
| 42 |
+
cursor: pointer;
|
| 43 |
+
}
|
| 44 |
+
.password-field {
|
| 45 |
+
padding-right: 40px;
|
| 46 |
+
}
|
| 47 |
+
</style>
|
| 48 |
+
</head>
|
| 49 |
+
<body class="bg-gray-50">
|
| 50 |
+
<!-- Login Page -->
|
| 51 |
+
<div id="login-page" class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
| 52 |
+
<div class="max-w-md w-full bg-white p-8 rounded-lg shadow-xl border border-gray-200">
|
| 53 |
+
<div class="text-center">
|
| 54 |
+
<h2 class="text-3xl font-extrabold text-gray-900">
|
| 55 |
+
<span class="text-primary">DMS</span> Central
|
| 56 |
+
</h2>
|
| 57 |
+
<p class="mt-2 text-sm text-gray-600">Collections Management Platform</p>
|
| 58 |
+
</div>
|
| 59 |
+
|
| 60 |
+
<div class="mt-8">
|
| 61 |
+
<form class="space-y-6" action="#" method="POST">
|
| 62 |
+
<div class="rounded-md shadow-sm space-y-4">
|
| 63 |
+
<div>
|
| 64 |
+
<label for="username" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
|
| 65 |
+
<div class="relative rounded-md shadow-sm">
|
| 66 |
+
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
| 67 |
+
<i data-feather="user" class="h-4 w-4 text-gray-400"></i>
|
| 68 |
+
</div>
|
| 69 |
+
<input id="username" name="username" type="text" required
|
| 70 |
+
class="focus:ring-primary focus:border-primary block w-full pl-10 sm:text-sm border-gray-300 rounded-md py-2.5 h-10"
|
| 71 |
+
placeholder="Enter your username">
|
| 72 |
+
</div>
|
| 73 |
+
</div>
|
| 74 |
+
<div>
|
| 75 |
+
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
|
| 76 |
+
<div class="relative rounded-md shadow-sm">
|
| 77 |
+
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
| 78 |
+
<i data-feather="lock" class="h-4 w-4 text-gray-400"></i>
|
| 79 |
+
</div>
|
| 80 |
+
<input id="password" name="password" type="password" required
|
| 81 |
+
class="password-field focus:ring-primary focus:border-primary block w-full pl-10 sm:text-sm border-gray-300 rounded-md py-2.5 h-10"
|
| 82 |
+
placeholder="••••••••">
|
| 83 |
+
<div class="password-toggle" onclick="togglePassword()">
|
| 84 |
+
<i id="eye-icon" data-feather="eye" class="h-4 w-4 text-gray-400"></i>
|
| 85 |
+
</div>
|
| 86 |
+
</div>
|
| 87 |
+
</div>
|
| 88 |
+
</div>
|
| 89 |
+
|
| 90 |
+
<div class="flex items-center justify-between">
|
| 91 |
+
<div class="flex items-center">
|
| 92 |
+
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
| 93 |
+
<label for="remember-me" class="ml-2 block text-sm text-gray-700">Remember me</label>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="text-sm">
|
| 96 |
+
<a href="#" class="font-medium text-primary hover:text-blue-700">Forgot password?</a>
|
| 97 |
+
</div>
|
| 98 |
+
</div>
|
| 99 |
+
|
| 100 |
+
<div>
|
| 101 |
+
<button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary h-10 items-center">
|
| 102 |
+
<span class="absolute left-0 inset-y-0 flex items-center pl-3">
|
| 103 |
+
<i data-feather="log-in" class="h-4 w-4 text-blue-200 group-hover:text-blue-300"></i>
|
| 104 |
+
</span>
|
| 105 |
+
Sign in
|
| 106 |
+
</button>
|
| 107 |
+
</div>
|
| 108 |
+
</form>
|
| 109 |
+
|
| 110 |
+
<div class="mt-6">
|
| 111 |
+
<div class="relative">
|
| 112 |
+
<div class="absolute inset-0 flex items-center">
|
| 113 |
+
<div class="w-full border-t border-gray-300"></div>
|
| 114 |
+
</div>
|
| 115 |
+
<div class="relative flex justify-center text-sm">
|
| 116 |
+
<span class="px-2 bg-white text-gray-500">Quick login</span>
|
| 117 |
+
</div>
|
| 118 |
+
</div>
|
| 119 |
+
|
| 120 |
+
<div class="mt-4 grid grid-cols-2 gap-3">
|
| 121 |
+
<button onclick="autoFill('admin')" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
|
| 122 |
+
Admin
|
| 123 |
+
</button>
|
| 124 |
+
<button onclick="autoFill('supervisor')" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
|
| 125 |
+
Supervisor
|
| 126 |
+
</button>
|
| 127 |
+
<button onclick="autoFill('agent')" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
|
| 128 |
+
Agent
|
| 129 |
+
</button>
|
| 130 |
+
<button onclick="autoFill('fos')" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
|
| 131 |
+
FOS Agent
|
| 132 |
+
</button>
|
| 133 |
+
</div>
|
| 134 |
+
</div>
|
| 135 |
+
</div>
|
| 136 |
+
</div>
|
| 137 |
+
</div>
|
| 138 |
+
|
| 139 |
+
<!-- Dashboard Page (Hidden initially) -->
|
| 140 |
+
<div id="dashboard-page" class="hidden">
|
| 141 |
+
<!-- Header -->
|
| 142 |
+
<header class="bg-white shadow-sm border-b border-gray-200">
|
| 143 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 144 |
+
<div class="flex justify-between h-16">
|
| 145 |
+
<div class="flex items-center">
|
| 146 |
+
<div class="flex-shrink-0 flex items-center">
|
| 147 |
+
<span class="text-xl font-bold text-primary">DMS <span class="text-gray-700">Central</span></span>
|
| 148 |
+
</div>
|
| 149 |
+
<nav class="hidden md:ml-6 md:flex space-x-8">
|
| 150 |
+
<a href="#" class="border-primary text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
|
| 151 |
+
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Campaigns</a>
|
| 152 |
+
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Customers</a>
|
| 153 |
+
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Reports</a>
|
| 154 |
+
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Settings</a>
|
| 155 |
+
</nav>
|
| 156 |
+
</div>
|
| 157 |
+
<div class="flex items-center">
|
| 158 |
+
<div class="flex-shrink-0">
|
| 159 |
+
<div class="relative mx-4">
|
| 160 |
+
<input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-primary focus:border-primary sm:text-sm" placeholder="Search by LAN, Name...">
|
| 161 |
+
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
| 162 |
+
<i data-feather="search" class="h-4 w-4 text-gray-400"></i>
|
| 163 |
+
</div>
|
| 164 |
+
</div>
|
| 165 |
+
</div>
|
| 166 |
+
<div class="hidden md:ml-4 md:flex md:items-center">
|
| 167 |
+
<button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary relative">
|
| 168 |
+
<i data-feather="bell"></i>
|
| 169 |
+
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-danger"></span>
|
| 170 |
+
</button>
|
| 171 |
+
|
| 172 |
+
<div class="ml-4 relative flex-shrink-0">
|
| 173 |
+
<div>
|
| 174 |
+
<button id="user-menu" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
|
| 175 |
+
<img class="h-8 w-8 rounded-full" src="http://static.photos/technology/200x200/12" alt="User profile">
|
| 176 |
+
</button>
|
| 177 |
+
</div>
|
| 178 |
+
<div id="user-dropdown" class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50" role="menu">
|
| 179 |
+
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">My Profile</a>
|
| 180 |
+
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Settings</a>
|
| 181 |
+
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Logout</a>
|
| 182 |
+
</div>
|
| 183 |
+
</div>
|
| 184 |
+
</div>
|
| 185 |
+
</div>
|
| 186 |
+
</div>
|
| 187 |
+
</div>
|
| 188 |
+
</header>
|
| 189 |
+
|
| 190 |
+
<!-- Main Content -->
|
| 191 |
+
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
| 192 |
+
<!-- Page title and buttons -->
|
| 193 |
+
<div class="md:flex md:items-center md:justify-between mb-6">
|
| 194 |
+
<div class="flex-1 min-w-0">
|
| 195 |
+
<h1 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">Dashboard</h1>
|
| 196 |
+
</div>
|
| 197 |
+
<div class="mt-4 flex md:mt-0 md:ml-4">
|
| 198 |
+
<button type="button" class="ml-3 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
|
| 199 |
+
<i data-feather="refresh-cw" class="-ml-1 mr-2 h-4 w-4"></i>
|
| 200 |
+
Refresh Data
|
| 201 |
+
</button>
|
| 202 |
+
<button type="button" class="ml-3 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-success hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
|
| 203 |
+
<i data-feather="download" class="-ml-1 mr-2 h-4 w-4"></i>
|
| 204 |
+
Export Report
|
| 205 |
+
</button>
|
| 206 |
+
</div>
|
| 207 |
+
</div>
|
| 208 |
+
|
| 209 |
+
<!-- KPI Cards -->
|
| 210 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
| 211 |
+
<div class="bg-white overflow-hidden shadow rounded-lg">
|
| 212 |
+
<div class="px-4 py-5 sm:p-6">
|
| 213 |
+
<div class="flex items-center">
|
| 214 |
+
<div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
|
| 215 |
+
<i data-feather="dollar-sign" class="h-6 w-6 text-white"></i>
|
| 216 |
+
</div>
|
| 217 |
+
<div class="ml-5 w-0 flex-1">
|
| 218 |
+
<dl>
|
| 219 |
+
<dt class="text-sm font-medium text-gray-500 truncate">Total Allocations</dt>
|
| 220 |
+
<dd class="flex items-baseline">
|
| 221 |
+
<div class="text-2xl font-semibold text-gray-900">$1,245</div>
|
| 222 |
+
<div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
|
| 223 |
+
<i data-feather="trending-up" class="h-4 w-4"></i>
|
| 224 |
+
<span class="sr-only">Increased by</span>
|
| 225 |
+
12%
|
| 226 |
+
</div>
|
| 227 |
+
</dd>
|
| 228 |
+
</dl>
|
| 229 |
+
</div>
|
| 230 |
+
</div>
|
| 231 |
+
<div class="mt-4">
|
| 232 |
+
<a href="#" class="text-sm font-medium text-primary hover:text-blue-700">
|
| 233 |
+
View all allocations
|
| 234 |
+
</a>
|
| 235 |
+
</div>
|
| 236 |
+
</div>
|
| 237 |
+
</div>
|
| 238 |
+
|
| 239 |
+
<div class="bg-white overflow-hidden shadow rounded-lg">
|
| 240 |
+
<div class="px-4 py-5 sm:p-6">
|
| 241 |
+
<div class="flex items-center">
|
| 242 |
+
<div class="flex-shrink-0 bg-green-500 rounded-md p-3">
|
| 243 |
+
<i data-feather="phone" class="h-6 w-6 text-white"></i>
|
| 244 |
+
</div>
|
| 245 |
+
<div class="ml-5 w-0 flex-1">
|
| 246 |
+
<dl>
|
| 247 |
+
<dt class="text-sm font-medium text-gray-500 truncate">Calls Made</dt>
|
| 248 |
+
<dd class="flex items-baseline">
|
| 249 |
+
<div class="text-2xl font-semibold text-gray-900">1,570</div>
|
| 250 |
+
<div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
|
| 251 |
+
<i data-feather="trending-up" class="h-4 w-4"></i>
|
| 252 |
+
<span class="sr-only">Increased by</span>
|
| 253 |
+
8%
|
| 254 |
+
</div>
|
| 255 |
+
</dd>
|
| 256 |
+
</dl>
|
| 257 |
+
</div>
|
| 258 |
+
</div>
|
| 259 |
+
<div class="mt-4">
|
| 260 |
+
<a href="#" class="text-sm font-medium text-primary hover:text-blue-700">
|
| 261 |
+
View call logs
|
| 262 |
+
</a>
|
| 263 |
+
</div>
|
| 264 |
+
</div>
|
| 265 |
+
</div>
|
| 266 |
+
|
| 267 |
+
<div class="bg-white overflow-hidden shadow rounded-lg">
|
| 268 |
+
<div class="px-4 py-5 sm:p-6">
|
| 269 |
+
<div class="flex items-center">
|
| 270 |
+
<div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
|
| 271 |
+
<i data-feather="calendar" class="h-6 w-6 text-white"></i>
|
| 272 |
+
</div>
|
| 273 |
+
<div class="ml-5 w-0 flex-1">
|
| 274 |
+
<dl>
|
| 275 |
+
<dt class="text-sm font-medium text-gray-500 truncate">PTP Commitments</dt>
|
| 276 |
+
<dd class="flex items-baseline">
|
| 277 |
+
<div class="text-2xl font-semibold text-gray-900">42</div>
|
| 278 |
+
<div class="ml-2 flex items-baseline text-sm font-semibold text-red-600">
|
| 279 |
+
<i data-feather="trending-down" class="h-4 w-4"></i>
|
| 280 |
+
<span class="sr-only">Decreased by</span>
|
| 281 |
+
4%
|
| 282 |
+
</div>
|
| 283 |
+
</dd>
|
| 284 |
+
</dl>
|
| 285 |
+
</div>
|
| 286 |
+
</div>
|
| 287 |
+
<div class="mt-4">
|
| 288 |
+
<a href="#" class="text-sm font-medium text-primary hover:text-blue-700">
|
| 289 |
+
View PTP details
|
| 290 |
+
</a>
|
| 291 |
+
</div>
|
| 292 |
+
</div>
|
| 293 |
+
</div>
|
| 294 |
+
|
| 295 |
+
<div class="bg-white overflow-hidden shadow rounded-lg">
|
| 296 |
+
<div class="px-4 py-5 sm:p-6">
|
| 297 |
+
<div class="flex items-center">
|
| 298 |
+
<div class="flex-shrink-0 bg-red-500 rounded-md p-3">
|
| 299 |
+
<i data-feather="alert-circle" class="h-6 w-6 text-white"></i>
|
| 300 |
+
</div>
|
| 301 |
+
<div class="ml-5 w-0 flex-1">
|
| 302 |
+
<dl>
|
| 303 |
+
<dt class="text-sm font-medium text-gray-500 truncate">Compliance Alerts</dt>
|
| 304 |
+
<dd class="flex items-baseline">
|
| 305 |
+
<div class="text-2xl font-semibold text-gray-900">3</div>
|
| 306 |
+
<div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
|
| 307 |
+
<i data-feather="trending-up" class="h-4 w-4"></i>
|
| 308 |
+
<span class="sr-only">Increased by</span>
|
| 309 |
+
1 new
|
| 310 |
+
</div>
|
| 311 |
+
</dd>
|
| 312 |
+
</dl>
|
| 313 |
+
</div>
|
| 314 |
+
</div>
|
| 315 |
+
<div class="mt-4">
|
| 316 |
+
<a href="#" class="text-sm font-medium text-primary hover:text-blue-700">
|
| 317 |
+
Review alerts
|
| 318 |
+
</a>
|
| 319 |
+
</div>
|
| 320 |
+
</div>
|
| 321 |
+
</div>
|
| 322 |
+
</div>
|
| 323 |
+
|
| 324 |
+
<!-- Charts Section -->
|
| 325 |
+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
| 326 |
+
<!-- Calls by Status Chart -->
|
| 327 |
+
<div class="bg-white p-6 rounded-lg shadow col-span-2">
|
| 328 |
+
<div class="flex items-center justify-between mb-4">
|
| 329 |
+
<h3 class="text-lg font-medium text-gray-900">Campaign Performance</h3>
|
| 330 |
+
<div class="flex space-x-2">
|
| 331 |
+
<select class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
|
| 332 |
+
<option>This Week</option>
|
| 333 |
+
<option>Last Week</option>
|
| 334 |
+
<option>This Month</option>
|
| 335 |
+
<option>Last Month</option>
|
| 336 |
+
</select>
|
| 337 |
+
<select class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
|
| 338 |
+
<option>All Campaigns</option>
|
| 339 |
+
<option>Credit Cards</option>
|
| 340 |
+
<option>Personal Loans</option>
|
| 341 |
+
<option>Auto Loans</option>
|
| 342 |
+
</select>
|
| 343 |
+
</div>
|
| 344 |
+
</div>
|
| 345 |
+
<div class="h-80">
|
| 346 |
+
<canvas id="campaignChart"></canvas>
|
| 347 |
+
</div>
|
| 348 |
+
</div>
|
| 349 |
+
|
| 350 |
+
<!-- Agency Collections Chart -->
|
| 351 |
+
<div class="bg-white p-6 rounded-lg shadow">
|
| 352 |
+
<div class="flex items-center justify-between mb-4">
|
| 353 |
+
<h3 class="text-lg font-medium text-gray-900">Agency Collections</h3>
|
| 354 |
+
<div>
|
| 355 |
+
<select class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
|
| 356 |
+
<option>Current Month</option>
|
| 357 |
+
<option>Previous Month</option>
|
| 358 |
+
</select>
|
| 359 |
+
</div>
|
| 360 |
+
</div>
|
| 361 |
+
<div class="h-80">
|
| 362 |
+
<canvas id="agencyChart"></canvas>
|
| 363 |
+
</div>
|
| 364 |
+
</div>
|
| 365 |
+
</div>
|
| 366 |
+
|
| 367 |
+
<!-- Agent Performance Table -->
|
| 368 |
+
<div class="bg-white shadow rounded-lg overflow-hidden mb-8">
|
| 369 |
+
<div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
|
| 370 |
+
<h3 class="text-lg font-medium text-gray-900">Agent Performance</h3>
|
| 371 |
+
<div class="flex space-x-2">
|
| 372 |
+
<input type="text" placeholder="Search agents..." class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
|
| 373 |
+
<button class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
|
| 374 |
+
<i data-feather="filter" class="-ml-0.5 mr-2 h-4 w-4"></i>
|
| 375 |
+
Filter
|
| 376 |
+
</button>
|
| 377 |
+
</div>
|
| 378 |
+
</div>
|
| 379 |
+
<div class="overflow-x-auto">
|
| 380 |
+
<table class="min-w-full divide-y divide-gray-200">
|
| 381 |
+
<thead class="bg-gray-50">
|
| 382 |
+
<tr>
|
| 383 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Agent Name</th>
|
| 384 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Allocations</th>
|
| 385 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Calls Made</th>
|
| 386 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">RPC</th>
|
| 387 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">PTP %</th>
|
| 388 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Collection %</th>
|
| 389 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Productivity</th>
|
| 390 |
+
<th scope="col" class="relative px-6 py-3">
|
| 391 |
+
<span class="sr-only">Actions</span>
|
| 392 |
+
</th>
|
| 393 |
+
</tr>
|
| 394 |
+
</thead>
|
| 395 |
+
<tbody class="bg-white divide-y divide-gray-200">
|
| 396 |
+
<tr class="hover:bg-gray-50">
|
| 397 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 398 |
+
<div class="flex items-center">
|
| 399 |
+
<div class="flex-shrink-0 h-10 w-10">
|
| 400 |
+
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/1" alt="">
|
| 401 |
+
</div>
|
| 402 |
+
<div class="ml-4">
|
| 403 |
+
<div class="text-sm font-medium text-gray-900">John Smith</div>
|
| 404 |
+
<div class="text-sm text-gray-500">Agent ID: A1001</div>
|
| 405 |
+
</div>
|
| 406 |
+
</div>
|
| 407 |
+
</td>
|
| 408 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,250</td>
|
| 409 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 410 |
+
<div class="text-sm text-gray-900">185</div>
|
| 411 |
+
<div class="text-sm text-gray-500">+5.4%</div>
|
| 412 |
+
</td>
|
| 413 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">32%</td>
|
| 414 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 415 |
+
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
| 416 |
+
72%
|
| 417 |
+
</span>
|
| 418 |
+
</td>
|
| 419 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">58%</td>
|
| 420 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 421 |
+
<div class="flex items-center">
|
| 422 |
+
<div class="w-full bg-gray-200 rounded-full h-2.5">
|
| 423 |
+
<div class="bg-primary h-2.5 rounded-full" style="width: 78%"></div>
|
| 424 |
+
</div>
|
| 425 |
+
<span class="ml-2 text-sm font-medium text-gray-700">78%</span>
|
| 426 |
+
</div>
|
| 427 |
+
</td>
|
| 428 |
+
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
| 429 |
+
<a href="#" class="text-primary hover:text-blue-700">View</a>
|
| 430 |
+
</td>
|
| 431 |
+
</tr>
|
| 432 |
+
<tr class="hover:bg-gray-50">
|
| 433 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 434 |
+
<div class="flex items-center">
|
| 435 |
+
<div class="flex-shrink-0 h-10 w-10">
|
| 436 |
+
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/2" alt="">
|
| 437 |
+
</div>
|
| 438 |
+
<div class="ml-4">
|
| 439 |
+
<div class="text-sm font-medium text-gray-900">Sarah Johnson</div>
|
| 440 |
+
<div class="text-sm text-gray-500">Agent ID: A1002</div>
|
| 441 |
+
</div>
|
| 442 |
+
</div>
|
| 443 |
+
</td>
|
| 444 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$985</td>
|
| 445 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 446 |
+
<div class="text-sm text-gray-900">142</div>
|
| 447 |
+
<div class="text-sm text-gray-500">+2.1%</div>
|
| 448 |
+
</td>
|
| 449 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">28%</td>
|
| 450 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 451 |
+
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
| 452 |
+
65%
|
| 453 |
+
</span>
|
| 454 |
+
</td>
|
| 455 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">51%</td>
|
| 456 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 457 |
+
<div class="flex items-center">
|
| 458 |
+
<div class="w-full bg-gray-200 rounded-full h-2.5">
|
| 459 |
+
<div class="bg-primary h-2.5 rounded-full" style="width: 72%"></div>
|
| 460 |
+
</div>
|
| 461 |
+
<span class="ml-2 text-sm font-medium text-gray-700">72%</span>
|
| 462 |
+
</div>
|
| 463 |
+
</td>
|
| 464 |
+
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
| 465 |
+
<a href="#" class="text-primary hover:text-blue-700">View</a>
|
| 466 |
+
</td>
|
| 467 |
+
</tr>
|
| 468 |
+
<tr class="hover:bg-gray-50">
|
| 469 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 470 |
+
<div class="flex items-center">
|
| 471 |
+
<div class="flex-shrink-0 h-10 w-10">
|
| 472 |
+
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/3" alt="">
|
| 473 |
+
</div>
|
| 474 |
+
<div class="ml-4">
|
| 475 |
+
<div class="text-sm font-medium text-gray-900">Michael Brown</div>
|
| 476 |
+
<div class="text-sm text-gray-500">Agent ID: A1003</div>
|
| 477 |
+
</div>
|
| 478 |
+
</div>
|
| 479 |
+
</td>
|
| 480 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,120</td>
|
| 481 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 482 |
+
<div class="text-sm text-gray-900">156</div>
|
| 483 |
+
<div class="text-sm text-gray-500">+7.8%</div>
|
| 484 |
+
</td>
|
| 485 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30%</td>
|
| 486 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 487 |
+
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
|
| 488 |
+
48%
|
| 489 |
+
</span>
|
| 490 |
+
</td>
|
| 491 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">42%</td>
|
| 492 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 493 |
+
<div class="flex items-center">
|
| 494 |
+
<div class="w-full bg-gray-200 rounded-full h-2.5">
|
| 495 |
+
<div class="bg-primary h-2.5 rounded-full" style="width: 65%"></div>
|
| 496 |
+
</div>
|
| 497 |
+
<span class="ml-2 text-sm font-medium text-gray-700">65%</span>
|
| 498 |
+
</div>
|
| 499 |
+
</td>
|
| 500 |
+
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
| 501 |
+
<a href="#" class="text-primary hover:text-blue-700">View</a>
|
| 502 |
+
</td>
|
| 503 |
+
</tr>
|
| 504 |
+
</tbody>
|
| 505 |
+
</table>
|
| 506 |
+
</div>
|
| 507 |
+
<div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200">
|
| 508 |
+
<div class="flex-1 flex justify-between sm:hidden">
|
| 509 |
+
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
| 510 |
+
Previous
|
| 511 |
+
</a>
|
| 512 |
+
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
| 513 |
+
Next
|
| 514 |
+
</a>
|
| 515 |
+
</div>
|
| 516 |
+
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
| 517 |
+
<div>
|
| 518 |
+
<p class="text-sm text-gray-700">
|
| 519 |
+
Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">97</span> results
|
| 520 |
+
</p>
|
| 521 |
+
</div>
|
| 522 |
+
<div>
|
| 523 |
+
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
|
| 524 |
+
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
| 525 |
+
<span class="sr-only">Previous</span>
|
| 526 |
+
<i data-feather="chevron-left" class="h-5 w-5"></i>
|
| 527 |
+
</a>
|
| 528 |
+
<a href="#" aria-current="page" class="z-10 bg-primary border-primary text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
| 529 |
+
1
|
| 530 |
+
</a>
|
| 531 |
+
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
| 532 |
+
2
|
| 533 |
+
</a>
|
| 534 |
+
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
| 535 |
+
3
|
| 536 |
+
</a>
|
| 537 |
+
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
| 538 |
+
<span class="sr-only">Next</span>
|
| 539 |
+
<i data-feather="chevron-right" class="h-5 w-5"></i>
|
| 540 |
+
</a>
|
| 541 |
+
</nav>
|
| 542 |
+
</div>
|
| 543 |
+
</div>
|
| 544 |
+
</div>
|
| 545 |
+
</div>
|
| 546 |
+
|
| 547 |
+
<!-- Alerts and Recent Activity -->
|
| 548 |
+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
| 549 |
+
<!-- Alerts Panel -->
|
| 550 |
+
<div class="bg-white p-6 rounded-lg shadow">
|
| 551 |
+
<div class="flex items-center justify-between mb-4">
|
| 552 |
+
<h3 class="text-lg font-medium text-gray-900">Alerts</h3>
|
| 553 |
+
<button class="text-sm text-primary hover:text-blue-700">View All</button>
|
| 554 |
+
</div>
|
| 555 |
+
<div class="space-y-4 max-h-96 overflow-y-auto">
|
| 556 |
+
<div class="flex items-start">
|
| 557 |
+
<div class="flex-shrink-0 mt-0.5">
|
| 558 |
+
<div class="h-6 w-6 rounded-full flex items-center justify-center bg-red-100 text-red-600">
|
| 559 |
+
<i data-feather="alert-triangle" class="h-4 w-4"></i>
|
| 560 |
+
</div>
|
| 561 |
+
</div>
|
| 562 |
+
<div class="ml-3 flex-1">
|
| 563 |
+
<p class="text-sm font-medium text-gray-900">Compliance Alert</p>
|
| 564 |
+
<p class="text-sm text-gray-500">Agent #A1003 potential abusive language detected in call recording #4521.</p>
|
| 565 |
+
<div class="mt-1 text-xs text-gray-500">12 minutes ago</div>
|
| 566 |
+
</div>
|
| 567 |
+
</div>
|
| 568 |
+
<div class="flex items-start">
|
| 569 |
+
<div class="flex-shrink-0 mt-0.5">
|
| 570 |
+
<div class="h-6 w-6 rounded-full flex items-center justify-center bg-yellow-100 text-yellow-600">
|
| 571 |
+
<i data-feather="calendar" class="h-4 w-4"></i>
|
| 572 |
+
</div>
|
| 573 |
+
</div>
|
| 574 |
+
<div class="ml-3 flex-1">
|
| 575 |
+
<p class="text-sm font-medium text-gray-900">PTP Due Today</p>
|
| 576 |
+
<p class="text-sm text-gray-500">Customer LAN789456 has PTP commitment of $125 due today at 3:00 PM.</p>
|
| 577 |
+
<div class="mt-1 text-xs text-gray-500">35 minutes ago</div>
|
| 578 |
+
</div>
|
| 579 |
+
</div>
|
| 580 |
+
<div class="flex items-start">
|
| 581 |
+
<div class="flex-shrink-0 mt-0.5">
|
| 582 |
+
<div class="h-6 w-6 rounded-full flex items-center justify-center bg-blue-100 text-blue-600">
|
| 583 |
+
<i data-feather="phone-missed" class="h-4 w-4"></i>
|
| 584 |
+
</div>
|
| 585 |
+
</div>
|
| 586 |
+
<div class="ml-3 flex-1">
|
| 587 |
+
<p class="text-sm font-medium text-gray-900">Overdue Calls</p>
|
| 588 |
+
<p class="text-sm text-gray-500">23 callbacks marked as overdue from yesterday's campaign.</p>
|
| 589 |
+
<div class="mt-1 text-xs text-gray-500">2 hours ago</div>
|
| 590 |
+
</div>
|
| 591 |
+
</div>
|
| 592 |
+
</div>
|
| 593 |
+
</div>
|
| 594 |
+
|
| 595 |
+
<!-- Recent Activity -->
|
| 596 |
+
<div class="bg-white p-6 rounded-lg shadow col-span-2">
|
| 597 |
+
<div class="flex items-center justify-between mb-4">
|
| 598 |
+
<h3 class="text-lg font-medium text-gray-900">Recent Activity</h3>
|
| 599 |
+
<button class="text-sm text-primary hover:text-blue-700">View All</button>
|
| 600 |
+
</div>
|
| 601 |
+
<div class="space-y-4 max-h-96 overflow-y-auto">
|
| 602 |
+
<div class="flex items-start">
|
| 603 |
+
<div class="flex-shrink-0">
|
| 604 |
+
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/4" alt="">
|
| 605 |
+
</div>
|
| 606 |
+
<div class="ml-3 flex-1">
|
| 607 |
+
<p class="text-sm font-medium text-gray-900">Lisa Wong completed 50 calls</p>
|
| 608 |
+
<p class="text-sm text-gray-500">Personal Loans campaign call target achieved at 2:15 PM.</p>
|
| 609 |
+
<div class="mt-1 text-xs text-gray-500">10 minutes ago</div>
|
| 610 |
+
</div>
|
| 611 |
+
<div class="ml-auto">
|
| 612 |
+
<a href="#" class="text-sm text-primary hover:text-blue-700">View</a>
|
| 613 |
+
</div>
|
| 614 |
+
</div>
|
| 615 |
+
<div class="flex items-start">
|
| 616 |
+
<div class="flex-shrink-0">
|
| 617 |
+
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/5" alt="">
|
| 618 |
+
</div>
|
| 619 |
+
<div class="ml-3 flex-1">
|
| 620 |
+
<p class="text-sm font-medium text-gray-900">Payment received from customer LAN123456</p>
|
| 621 |
+
<p class="text-sm text-gray-500">Amount: $245 received via credit card at 1:45 PM.</p>
|
| 622 |
+
<div class="mt-1 text-xs text-gray-500">45 minutes ago</div>
|
| 623 |
+
</div>
|
| 624 |
+
<div class="ml-auto">
|
| 625 |
+
<a href="#" class="text-sm text-primary hover:text-blue-700">View</a>
|
| 626 |
+
</div>
|
| 627 |
+
</div>
|
| 628 |
+
<div class="flex items-start">
|
| 629 |
+
<div class="flex-shrink-0">
|
| 630 |
+
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/6" alt="">
|
| 631 |
+
</div>
|
| 632 |
+
<div class="ml-3 flex-1">
|
| 633 |
+
<p class="text-sm font-medium text-gray-900">New campaign added</p>
|
| 634 |
+
<p class="text-sm text-gray-500">"August Credit Card Collections" with 3,456 allocations.</p>
|
| 635 |
+
<div class="mt-1 text-xs text-gray-500">3 hours ago</div>
|
| 636 |
+
</div>
|
| 637 |
+
<div class="ml-auto">
|
| 638 |
+
<a href="#" class="text-sm text-primary hover:text-blue-700">View</a>
|
| 639 |
+
</div>
|
| 640 |
+
</div>
|
| 641 |
+
</div>
|
| 642 |
+
</div>
|
| 643 |
+
</div>
|
| 644 |
+
</main>
|
| 645 |
+
</div>
|
| 646 |
+
|
| 647 |
+
<!-- Customer 360 Modal (Hidden initially) -->
|
| 648 |
+
<div id="customer360-modal" class="fixed inset-0 overflow-hidden z-50 hidden" aria-labelledby="slide-over-title" role="dialog" aria-modal="true">
|
| 649 |
+
<div class="absolute inset-0 overflow-hidden">
|
| 650 |
+
<div class="absolute inset-0" aria-hidden="true"></div>
|
| 651 |
+
<div class="fixed inset-y-0 right-0 pl-10 max-w-full flex">
|
| 652 |
+
<div class="relative w-screen max-w-4xl">
|
| 653 |
+
<div class="absolute top-0 left-0 -ml-8 pt-4 pr-2 flex sm:-ml-10 sm:pr-4">
|
| 654 |
+
<button onclick="closeModal()" class="rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white">
|
| 655 |
+
<span class="sr-only">Close panel</span>
|
| 656 |
+
<i data-feather="x" class="h-6 w-6"></i>
|
| 657 |
+
</button>
|
| 658 |
+
</div>
|
| 659 |
+
<div class="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
|
| 660 |
+
<div class="flex-1">
|
| 661 |
+
<!-- Customer 360 Header -->
|
| 662 |
+
<div class="px-6 py-4 bg-primary text-white">
|
| 663 |
+
<div class="flex items-center justify-between">
|
| 664 |
+
<div>
|
| 665 |
+
<h2 class="text-xl font-bold" id="slide-over-title">Customer 360° View</h2>
|
| 666 |
+
<p class="mt-1">LAN: <span class="font-semibold">#123456789</span></p>
|
| 667 |
+
</div>
|
| 668 |
+
<div class="space-x-2">
|
| 669 |
+
<button class="inline-flex items-center px-3 py-1.5 border border-white rounded-sm text-sm font-medium text-white hover:bg-blue-700 focus:outline-none">
|
| 670 |
+
<i data-feather="phone" class="mr-2 h-4 w-4"></i> Call Now
|
| 671 |
+
</button>
|
| 672 |
+
<button class="inline-flex items-center px-3 py-1.5 border border-white rounded-sm text-sm font-medium text-white hover:bg-blue-700 focus:outline-none">
|
| 673 |
+
<i data-feather="mail" class="mr-2 h-4 w-4"></i> Send Payment Link
|
| 674 |
+
</button>
|
| 675 |
+
</div>
|
| 676 |
+
</div>
|
| 677 |
+
</div>
|
| 678 |
+
|
| 679 |
+
<!-- Tabs -->
|
| 680 |
+
<div class="border-b border-gray-200">
|
| 681 |
+
<nav class="-mb-px flex">
|
| 682 |
+
<a href="#" class="w-1/4 py-4 px-1 text-center border-b-2 border-primary font-medium text-sm text-primary">
|
| 683 |
+
Customer Info
|
| 684 |
+
</a>
|
| 685 |
+
<a href="#" class="w-1/4 py-4 px-1 text-center border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
|
| 686 |
+
Documents
|
| 687 |
+
</a>
|
| 688 |
+
<a href="#" class="w-1/4 py-4 px-1 text-center border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
|
| 689 |
+
Communication
|
| 690 |
+
</a>
|
| 691 |
+
<a href="#" class="w-1/4 py-4 px-1 text-center border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300">
|
| 692 |
+
Payments
|
| 693 |
+
</a>
|
| 694 |
+
</nav>
|
| 695 |
+
</div>
|
| 696 |
+
|
| 697 |
+
<!-- Customer Info Content -->
|
| 698 |
+
<div class="p-6">
|
| 699 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
| 700 |
+
<div>
|
| 701 |
+
<h3 class="text-lg font-medium text-gray-900 mb-4">Basic Information</h3>
|
| 702 |
+
<div class="space-y-4">
|
| 703 |
+
<div>
|
| 704 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
|
| 705 |
+
<div class="text-sm text-gray-900 p-2 bg-gray-50 rounded">Robert Johnson</div>
|
| 706 |
+
</div>
|
| 707 |
+
<div>
|
| 708 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Mobile Number</label>
|
| 709 |
+
<div class="text-sm text-gray-900 p-2 bg-gray-50 rounded">+1 (987) 654-3210</div>
|
| 710 |
+
</div>
|
| 711 |
+
<div>
|
| 712 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
|
| 713 |
+
<div class="text-sm text-gray-900 p-2 bg-gray-50 rounded">r.johnson@example.com</div>
|
| 714 |
+
</div>
|
| 715 |
+
<div>
|
| 716 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Preferred Language</label>
|
| 717 |
+
<div class="text-sm text-gray-900 p-2 bg-gray-50 rounded">English</div>
|
| 718 |
+
</div>
|
| 719 |
+
</div>
|
| 720 |
+
</div>
|
| 721 |
+
<div>
|
| 722 |
+
<h3 class="text-lg font-medium text-gray-900 mb-4">Loan Details</h3>
|
| 723 |
+
<div class="space-y-4">
|
| 724 |
+
<div>
|
| 725 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Account Status</label>
|
| 726 |
+
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 p-2">
|
| 727 |
+
Delinquent (60 days)
|
| 728 |
+
</span>
|
| 729 |
+
</div>
|
| 730 |
+
<div>
|
| 731 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Loan Type</label>
|
| 732 |
+
<div class="text-sm text-gray-900 p-2 bg-gray-50 rounded">Personal Loan</div>
|
| 733 |
+
</div>
|
| 734 |
+
<div>
|
| 735 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Outstanding Balance</label>
|
| 736 |
+
<div class="text-sm text-gray-900 p-2 bg-gray-50 rounded">$8,750.00</div>
|
| 737 |
+
</div>
|
| 738 |
+
<div>
|
| 739 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Amount Overdue</label>
|
| 740 |
+
<div class="text-sm text-gray-900 font-medium text-danger p-2 bg-gray-50 rounded">$1,245.00</div>
|
| 741 |
+
</div>
|
| 742 |
+
<div>
|
| 743 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Next Due Date</label>
|
| 744 |
+
<div class="text-sm text-gray-900 p-2 bg-gray-50 rounded">August 15, 2023</div>
|
| 745 |
+
</div>
|
| 746 |
+
</div>
|
| 747 |
+
</div>
|
| 748 |
+
</div>
|
| 749 |
+
|
| 750 |
+
<div class="mb-8">
|
| 751 |
+
<h3 class="text-lg font-medium text-gray-900 mb-4">Asset Details</h3>
|
| 752 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
| 753 |
+
<div>
|
| 754 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Asset Type</label>
|
| 755 |
+
<div class="text-sm text-gray-900 p-2 bg-gray-50 rounded">Vehicle</div>
|
| 756 |
+
</div>
|
| 757 |
+
<div>
|
| 758 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Make & Model</label>
|
| 759 |
+
<div class="text-sm text-gray-900 p-2 bg-gray-50 rounded">2021 Toyota Camry SE</div>
|
| 760 |
+
</div>
|
| 761 |
+
<div>
|
| 762 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Registration Number</label>
|
| 763 |
+
<div class="text-sm text-gray-900 p-2 bg-gray-50 rounded">ABC-1234</div>
|
| 764 |
+
</div>
|
| 765 |
+
</div>
|
| 766 |
+
</div>
|
| 767 |
+
|
| 768 |
+
<div class="mb-8">
|
| 769 |
+
<h3 class="text-lg font-medium text-gray-900 mb-4">Recent Communications</h3>
|
| 770 |
+
<div class="space-y-4">
|
| 771 |
+
<div class="flex items-start">
|
| 772 |
+
<div class="flex-shrink-0 mt-1">
|
| 773 |
+
<div class="h-8 w-8 rounded-full flex items-center justify-center bg-blue-100 text-blue-600">
|
| 774 |
+
<i data-feather="phone" class="h-4 w-4"></i>
|
| 775 |
+
</div>
|
| 776 |
+
</div>
|
| 777 |
+
<div class="ml-3">
|
| 778 |
+
<div class="text-sm font-medium text-gray-900">Call attempted on August 2, 2023 at 3:45 PM</div>
|
| 779 |
+
<div class="text-sm text-gray-500 mt-1">
|
| 780 |
+
<span class="font-medium">Status:</span> Left voicemail message. Customer requested callback on August 3.
|
| 781 |
+
</div>
|
| 782 |
+
</div>
|
| 783 |
+
</div>
|
| 784 |
+
<div class="flex items-start">
|
| 785 |
+
<div class="flex-shrink-0 mt-1">
|
| 786 |
+
<div class="h-8 w-8 rounded-full flex items-center justify-center bg-green-100 text-green-600">
|
| 787 |
+
<i data-feather="message-square" class="h-4 w-4"></i>
|
| 788 |
+
</div>
|
| 789 |
+
</div>
|
| 790 |
+
<div class="ml-3">
|
| 791 |
+
<div class="text-sm font-medium text-gray-900">SMS sent on August 1, 2023 at 10:15 AM</div>
|
| 792 |
+
<div class="text-sm text-gray-500 mt-1">
|
| 793 |
+
<span class="font-medium">Content:</span> Reminder for overdue payment of $1,245. Reply YES to receive payment options.
|
| 794 |
+
</div>
|
| 795 |
+
</div>
|
| 796 |
+
</div>
|
| 797 |
+
</div>
|
| 798 |
+
</div>
|
| 799 |
+
|
| 800 |
+
<div class="mb-8">
|
| 801 |
+
<h3 class="text-lg font-medium text-gray-900 mb-4">PTP Commitments</h3>
|
| 802 |
+
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
|
| 803 |
+
<div class="flex">
|
| 804 |
+
<div class="flex-shrink-0">
|
| 805 |
+
<i data-feather="alert-circle" class="h-5 w-5 text-yellow-400"></i>
|
| 806 |
+
</div>
|
| 807 |
+
<div class="ml-3">
|
| 808 |
+
<p class="text-sm text-yellow-700">
|
| 809 |
+
Customer has an active PTP commitment of <span class="font-semibold">$500</span> due on <span class="font-semibold">August 5, 2023</span> (2 days remaining).
|
| 810 |
+
</p>
|
| 811 |
+
</div>
|
| 812 |
+
</div>
|
| 813 |
+
</div>
|
| 814 |
+
</div>
|
| 815 |
+
|
| 816 |
+
<div>
|
| 817 |
+
<h3 class="text-lg font-medium text-gray-900 mb-4">Add New Remark</h3>
|
| 818 |
+
<form>
|
| 819 |
+
<div class="mb-4">
|
| 820 |
+
<label for="disposition" class="block text-sm font-medium text-gray-700">Disposition</label>
|
| 821 |
+
<select id="disposition" name="disposition" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
|
| 822 |
+
<option>Select disposition</option>
|
| 823 |
+
<option>Payment Promise (PTP)</option>
|
| 824 |
+
<option>Request for Documentation</option>
|
| 825 |
+
<option>Request for Settlement</option>
|
| 826 |
+
<option>Customer Complaints</option>
|
| 827 |
+
<option>Unable to Contact</option>
|
| 828 |
+
<option>Wrong Number</option>
|
| 829 |
+
</select>
|
| 830 |
+
</div>
|
| 831 |
+
<div class="mb-4">
|
| 832 |
+
<label for="remark" class="block text-sm font-medium text-gray-700">Remark</label>
|
| 833 |
+
<textarea id="remark" name="remark" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm p-2"></textarea>
|
| 834 |
+
</div>
|
| 835 |
+
<div class="flex items-center justify-between">
|
| 836 |
+
<div class="flex items-center">
|
| 837 |
+
<input id="needs-followup" name="needs-followup" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
| 838 |
+
<label for="needs-followup" class="ml-2 block text-sm text-gray-700">Needs follow-up</label>
|
| 839 |
+
</div>
|
| 840 |
+
<button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
|
| 841 |
+
<i data-feather="save" class="-ml-1 mr-2 h-4 w-4"></i>
|
| 842 |
+
Save Remark
|
| 843 |
+
</button>
|
| 844 |
+
</div>
|
| 845 |
+
</form>
|
| 846 |
+
</div>
|
| 847 |
+
</div>
|
| 848 |
+
</div>
|
| 849 |
+
</div>
|
| 850 |
+
</div>
|
| 851 |
+
</div>
|
| 852 |
+
</div>
|
| 853 |
+
</div>
|
| 854 |
+
|
| 855 |
+
<script>
|
| 856 |
+
// Helper functions
|
| 857 |
+
function togglePassword() {
|
| 858 |
+
const passwordField = document.getElementById('password');
|
| 859 |
+
const eyeIcon = document.getElementById('eye-icon');
|
| 860 |
+
|
| 861 |
+
if (passwordField.type === 'password') {
|
| 862 |
+
passwordField.type = 'text';
|
| 863 |
+
eyeIcon.setAttribute('data-feather', 'eye-off');
|
| 864 |
+
} else {
|
| 865 |
+
passwordField.type = 'password';
|
| 866 |
+
eyeIcon.setAttribute('data-feather', 'eye');
|
| 867 |
+
}
|
| 868 |
+
feather.replace();
|
| 869 |
+
}
|
| 870 |
+
|
| 871 |
+
function autoFill(role) {
|
| 872 |
+
let username, password;
|
| 873 |
+
switch(role) {
|
| 874 |
+
case 'admin':
|
| 875 |
+
username = 'admin@bacl.com';
|
| 876 |
+
password = 'Admin@1234';
|
| 877 |
+
break;
|
| 878 |
+
case 'supervisor':
|
| 879 |
+
username = 'supervisor@bacl.com';
|
| 880 |
+
password = 'Super@1234';
|
| 881 |
+
break;
|
| 882 |
+
case 'agent':
|
| 883 |
+
username = 'agent@bacl.com';
|
| 884 |
+
password = 'Agent@1234';
|
| 885 |
+
break;
|
| 886 |
+
case 'fos':
|
| 887 |
+
username = 'fosagent@bacl.com';
|
| 888 |
+
password = 'Fos@1234';
|
| 889 |
+
break;
|
| 890 |
+
default:
|
| 891 |
+
username = '';
|
| 892 |
+
password = '';
|
| 893 |
+
}
|
| 894 |
+
|
| 895 |
+
document.getElementById('username').value = username;
|
| 896 |
+
document.getElementById('password').value = password;
|
| 897 |
+
}
|
| 898 |
+
|
| 899 |
+
function closeModal() {
|
| 900 |
+
document.getElementById('customer360-modal').classList.add('hidden');
|
| 901 |
+
}
|
| 902 |
+
|
| 903 |
+
// Charts initialization
|
| 904 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 905 |
+
// Initialize feather icons
|
| 906 |
+
feather.replace();
|
| 907 |
+
|
| 908 |
+
// Initialize AOS animations
|
| 909 |
+
AOS.init();
|
| 910 |
+
|
| 911 |
+
// Initialize user dropdown
|
| 912 |
+
document.getElementById('user-menu').addEventListener('click', function() {
|
| 913 |
+
document.getElementById('user-dropdown').classList.toggle('hidden');
|
| 914 |
+
});
|
| 915 |
+
|
| 916 |
+
// Campaign Chart
|
| 917 |
+
const campaignCtx = document.getElementById('campaignChart').getContext('2d');
|
| 918 |
+
const campaignChart = new Chart(campaignCtx, {
|
| 919 |
+
type: 'bar',
|
| 920 |
+
data: {
|
| 921 |
+
labels: ['Connected', 'Not Connected', 'Callback', 'Broken PTP'],
|
| 922 |
+
datasets: [{
|
| 923 |
+
label: 'Call Status',
|
| 924 |
+
data: [420, 680, 190, 85],
|
| 925 |
+
backgroundColor: [
|
| 926 |
+
'rgba(40, 167, 69, 0.8)',
|
| 927 |
+
'rgba(220, 53, 69, 0.8)',
|
| 928 |
+
'rgba(255, 193, 7, 0.8)',
|
| 929 |
+
'rgba(23, 162, 184, 0.8)'
|
| 930 |
+
],
|
| 931 |
+
borderColor: [
|
| 932 |
+
'rgba(40, 167, 69, 1)',
|
| 933 |
+
'rgba(220, 53, 69, 1)',
|
| 934 |
+
'rgba(255, 193, 7, 1)',
|
| 935 |
+
'rgba(23, 162, 184, 1)'
|
| 936 |
+
],
|
| 937 |
+
borderWidth: 1
|
| 938 |
+
}]
|
| 939 |
+
},
|
| 940 |
+
options: {
|
| 941 |
+
responsive: true,
|
| 942 |
+
maintainAspectRatio: false,
|
| 943 |
+
scales: {
|
| 944 |
+
y: {
|
| 945 |
+
beginAtZero: true
|
| 946 |
+
}
|
| 947 |
+
}
|
| 948 |
+
}
|
| 949 |
+
});
|
| 950 |
+
|
| 951 |
+
// Agency Chart
|
| 952 |
+
const agencyCtx = document.getElementById('agencyChart').getContext('2d');
|
| 953 |
+
const agencyChart = new Chart(agencyCtx, {
|
| 954 |
+
type: 'doughnut',
|
| 955 |
+
data: {
|
| 956 |
+
labels: ['Agency A', 'Agency B', 'Agency C', 'Agency D'],
|
| 957 |
+
datasets: [{
|
| 958 |
+
data: [320, 180, 240, 160],
|
| 959 |
+
backgroundColor: [
|
| 960 |
+
'rgba(0, 86, 179, 0.8)',
|
| 961 |
+
'rgba(220, 53, 69, 0.8)',
|
| 962 |
+
'rgba(40, 167, 69, 0.8)',
|
| 963 |
+
'rgba(255, 193, 7, 0.8)'
|
| 964 |
+
],
|
| 965 |
+
borderColor: [
|
| 966 |
+
'rgba(0, 86, 179, 1)',
|
| 967 |
+
'rgba(220, 53, 69, 1)',
|
| 968 |
+
'rgba(40, 167, 69, 1)',
|
| 969 |
+
'rgba(255, 193, 7, 1)'
|
| 970 |
+
],
|
| 971 |
+
borderWidth: 1
|
| 972 |
+
}]
|
| 973 |
+
},
|
| 974 |
+
options: {
|
| 975 |
+
responsive: true,
|
| 976 |
+
maintainAspectRatio: false,
|
| 977 |
+
plugins: {
|
| 978 |
+
legend: {
|
| 979 |
+
position: 'bottom',
|
| 980 |
+
}
|
| 981 |
+
}
|
| 982 |
+
}
|
| 983 |
+
});
|
| 984 |
+
});
|
| 985 |
+
|
| 986 |
+
// Login form submission handler (demo only)
|
| 987 |
+
document.querySelector('form').addEventListener('submit', function(e) {
|
| 988 |
+
e.preventDefault();
|
| 989 |
+
// Hide login page, show dashboard for demo purposes
|
| 990 |
+
document.getElementById('login-page').classList.add('hidden');
|
| 991 |
+
document.getElementById('dashboard-page').classList.remove('hidden');
|
| 992 |
+
});
|
| 993 |
+
</script>
|
| 994 |
+
</body>
|
| 995 |
</html>
|
| 996 |
+
|
| 997 |
+
|
| 998 |
+
This is a comprehensive dashboard application for the DMS Central Collections Management Platform. The code includes:
|
| 999 |
+
|
| 1000 |
+
1. **Login Page** with:
|
| 1001 |
+
- Secure login form with password visibility toggle
|
| 1002 |
+
- Quick login buttons for different roles
|
| 1003 |
+
- Forgot password link
|
| 1004 |
+
- Responsive design
|
| 1005 |
+
|
| 1006 |
+
2. **Dashboard** with:
|
| 1007 |
+
- Top navigation with search and notifications
|
| 1008 |
+
- KPI summary cards (4 key metrics with drill-down)
|
| 1009 |
+
- Campaign performance chart (bar and doughnut)
|
| 1010 |
+
- Agent performance table (sortable/filterable)
|
| 1011 |
+
- Alerts panel (compliance/PTP/overdue calls)
|
| 1012 |
+
- Recent activity log
|
| 1013 |
+
|
| 1014 |
+
3. **Customer 360° View** (modal) with:
|
| 1015 |
+
- Tabbed interface for different data sections
|
| 1016 |
+
- Customer information and loan details
|
| 1017 |
+
- Asset information
|
| 1018 |
+
- Communication history
|
| 1019 |
+
- PTP commitments
|
| 1020 |
+
- Add remark form
|
| 1021 |
+
|
| 1022 |
+
4. **Interactive Elements**:
|
| 1023 |
+
- Charts using Chart.js
|
| 1024 |
+
- Dropdown menus
|
| 1025 |
+
- Modal dialogs
|
| 1026 |
+
- Responsive tables
|
| 1027 |
+
- Form validation
|
| 1028 |
+
|
| 1029 |
+
The design is clean, professional, and responsive using TailwindCSS. All the requested features are implemented with a focus on usability for collections management operations.
|
prompts.txt
ADDED
|
@@ -0,0 +1,226 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
Project Name: DMS Central
|
| 2 |
+
Goal: Build a complete, clickable, web-based prototype for BACL’s Collections Management Platform with a modern dashboard UI, Customer 360 view, dialer integration, and reporting capabilities.
|
| 3 |
+
|
| 4 |
+
1. Login & Authentication (For testing you can create static ID and pwd for each role and mention the same on lgin page. On click of it should get prefilled and then user can login. UI should be very clean professional.
|
| 5 |
+
|
| 6 |
+
Secure Login Page
|
| 7 |
+
|
| 8 |
+
Fields: Username, Password.
|
| 9 |
+
|
| 10 |
+
Show Masked password, “Forgot Password” link.
|
| 11 |
+
|
| 12 |
+
MFA screen for Admins (OTP or Authenticator App flow).
|
| 13 |
+
|
| 14 |
+
Error messages for invalid login, lockout after 5 failed attempts.
|
| 15 |
+
|
| 16 |
+
Role-Based Access Control (RBAC)
|
| 17 |
+
|
| 18 |
+
Roles: Admin, Supervisor, Agent, FOS Agent.
|
| 19 |
+
|
| 20 |
+
Different dashboards/views based on role.
|
| 21 |
+
|
| 22 |
+
2. Dashboard (Main Landing Page)
|
| 23 |
+
|
| 24 |
+
Design a responsive, widget-based dashboard with the following sections:
|
| 25 |
+
|
| 26 |
+
2.1 Header & Navigation
|
| 27 |
+
|
| 28 |
+
Top navigation bar with:
|
| 29 |
+
|
| 30 |
+
Logo & Platform Name (DMS Central).
|
| 31 |
+
|
| 32 |
+
Global search bar (search by LAN, Customer Name).
|
| 33 |
+
|
| 34 |
+
Notification bell (real-time alerts).
|
| 35 |
+
|
| 36 |
+
Profile icon with dropdown: My Profile, Settings, Logout.
|
| 37 |
+
|
| 38 |
+
2.2 KPI Summary (Top Row)
|
| 39 |
+
|
| 40 |
+
Show 4–6 Key Metrics as cards with trend indicators:
|
| 41 |
+
|
| 42 |
+
Total Allocations (current month vs. previous).
|
| 43 |
+
|
| 44 |
+
Total Calls Made (click to view detailed call logs).
|
| 45 |
+
|
| 46 |
+
PTP Commitments (today / this week).
|
| 47 |
+
|
| 48 |
+
Pending Calls (daily target vs. achieved).
|
| 49 |
+
|
| 50 |
+
Collection % vs Allocation % (progress bar).
|
| 51 |
+
|
| 52 |
+
Compliance Alerts Count (red badge if >0).
|
| 53 |
+
|
| 54 |
+
Each card should have:
|
| 55 |
+
|
| 56 |
+
Value
|
| 57 |
+
|
| 58 |
+
Trend indicator (up/down arrow)
|
| 59 |
+
|
| 60 |
+
Click-to-drill-down link.
|
| 61 |
+
|
| 62 |
+
2.3 Real-Time Campaign Performance
|
| 63 |
+
|
| 64 |
+
Bar chart or donut chart for:
|
| 65 |
+
|
| 66 |
+
Calls by Status: Connected, Not Connected, Callback, Broken.
|
| 67 |
+
|
| 68 |
+
Agency-wise allocation vs collections.
|
| 69 |
+
|
| 70 |
+
Filters: Date range, Agency, Region, Campaign.
|
| 71 |
+
|
| 72 |
+
2.4 Drill-Down Table
|
| 73 |
+
|
| 74 |
+
Show tabular view of agents or agencies:
|
| 75 |
+
|
| 76 |
+
Columns: Name, Allocations, Calls Made, Right Party Contacts (RPC), PTP %, Collection %, Productivity Score.
|
| 77 |
+
|
| 78 |
+
Click row → open Agent Performance Detail (new page or popup).
|
| 79 |
+
|
| 80 |
+
2.5 Alerts & Notifications Panel
|
| 81 |
+
|
| 82 |
+
Right sidebar or widget for:
|
| 83 |
+
|
| 84 |
+
Pending Call Alerts – highlight overdue calls.
|
| 85 |
+
|
| 86 |
+
PTP Alerts – show customers with active PTP due today.
|
| 87 |
+
|
| 88 |
+
Compliance Alerts – abusive language detected, link to call recording.
|
| 89 |
+
|
| 90 |
+
2.6 Recent Activity / Communication Log
|
| 91 |
+
|
| 92 |
+
Show last 10 system events:
|
| 93 |
+
|
| 94 |
+
"Agent X completed 50 calls."
|
| 95 |
+
|
| 96 |
+
"New campaign added: August Collections."
|
| 97 |
+
|
| 98 |
+
"Compliance breach detected in Call #12345."
|
| 99 |
+
|
| 100 |
+
3. Customer 360 View
|
| 101 |
+
|
| 102 |
+
When user clicks a LAN or customer, open a Customer 360 page with:
|
| 103 |
+
|
| 104 |
+
3.1 Tabs
|
| 105 |
+
|
| 106 |
+
Customer Info
|
| 107 |
+
|
| 108 |
+
LAN, Name, Masked Contact, Preferred Language.
|
| 109 |
+
|
| 110 |
+
Loan Details: EMI, OS, Penalty, Total Overdue, Maturity Date.
|
| 111 |
+
|
| 112 |
+
Asset Details: Model, Registration Number, Dealer Name.
|
| 113 |
+
|
| 114 |
+
Customer & Vehicle Images
|
| 115 |
+
|
| 116 |
+
Thumbnails → open integrated document/image viewer.
|
| 117 |
+
|
| 118 |
+
Communication History
|
| 119 |
+
|
| 120 |
+
Last 4 dispositions with timestamps.
|
| 121 |
+
|
| 122 |
+
Remarks & PTP dates.
|
| 123 |
+
|
| 124 |
+
Full log of Click-to-Call, SMS, WhatsApp, IVR, Bot interactions.
|
| 125 |
+
|
| 126 |
+
Payments
|
| 127 |
+
|
| 128 |
+
Send Payment Link button.
|
| 129 |
+
|
| 130 |
+
Refresh Payment Status button.
|
| 131 |
+
|
| 132 |
+
Show status updates inline.
|
| 133 |
+
|
| 134 |
+
3.2 Action Buttons
|
| 135 |
+
|
| 136 |
+
Click-to-Call (initiates dialer via API).
|
| 137 |
+
|
| 138 |
+
Play Call Recording (opens audio player modal).
|
| 139 |
+
|
| 140 |
+
View Transcription (show AI-detected keywords).
|
| 141 |
+
|
| 142 |
+
Tag Call / Add Remark (save to history).
|
| 143 |
+
|
| 144 |
+
4. Dialer & Call Management
|
| 145 |
+
|
| 146 |
+
Predictive/Preview Mode Toggle on campaign settings page.
|
| 147 |
+
|
| 148 |
+
Inbound routing visualization (callback numbers create inbound campaign).
|
| 149 |
+
|
| 150 |
+
Secure playback of call recordings.
|
| 151 |
+
|
| 152 |
+
Show AI analysis highlights:
|
| 153 |
+
|
| 154 |
+
Abusive language flagged.
|
| 155 |
+
|
| 156 |
+
Compliance score.
|
| 157 |
+
|
| 158 |
+
5. Master Data Management (Admin Section)
|
| 159 |
+
|
| 160 |
+
User & Role Management: Add/Edit/Disable users, assign roles.
|
| 161 |
+
|
| 162 |
+
Agency Management: Add/edit agencies, assign allocation percentages.
|
| 163 |
+
|
| 164 |
+
Campaign Management: Configure predictive/preview modes, upload customer list.
|
| 165 |
+
|
| 166 |
+
Disposition Master: Maintain call outcomes.
|
| 167 |
+
|
| 168 |
+
Template Management: Configure SMS/Email/Compliance templates.
|
| 169 |
+
|
| 170 |
+
6. Reporting & Exports
|
| 171 |
+
|
| 172 |
+
Reports:
|
| 173 |
+
|
| 174 |
+
Agency-wise performance
|
| 175 |
+
|
| 176 |
+
Region-wise performance
|
| 177 |
+
|
| 178 |
+
Agent productivity
|
| 179 |
+
|
| 180 |
+
Collection vs Allocation
|
| 181 |
+
|
| 182 |
+
Filters: Date range, agency, region, campaign.
|
| 183 |
+
|
| 184 |
+
Export options: Excel, CSV, PDF.
|
| 185 |
+
|
| 186 |
+
7. Notifications & Alerts
|
| 187 |
+
|
| 188 |
+
Daily pending call alerts.
|
| 189 |
+
|
| 190 |
+
Real-time PTP alerts.
|
| 191 |
+
|
| 192 |
+
Compliance breach alert with direct call link.
|
| 193 |
+
|
| 194 |
+
8. Settings & Integrations
|
| 195 |
+
|
| 196 |
+
API Key Management: Indus, Payment Gateway, SMS/WhatsApp Gateway.
|
| 197 |
+
|
| 198 |
+
Configure Call Attempts: Daily/weekly call limits.
|
| 199 |
+
|
| 200 |
+
Upload Masters: Bulk upload CSV.
|
| 201 |
+
|
| 202 |
+
9. UI/UX Guidelines
|
| 203 |
+
|
| 204 |
+
Clean, enterprise-grade look with BACL brand colors.
|
| 205 |
+
|
| 206 |
+
Responsive design, mobile-friendly.
|
| 207 |
+
|
| 208 |
+
WCAG 2.1 AA accessibility.
|
| 209 |
+
|
| 210 |
+
Tabbed navigation for Customer 360.
|
| 211 |
+
|
| 212 |
+
Scrollable widgets, sticky top navigation bar.
|
| 213 |
+
|
| 214 |
+
Use charts and cards for data visualization.
|
| 215 |
+
|
| 216 |
+
10. Non-Functional Requirements to Simulate
|
| 217 |
+
|
| 218 |
+
Fast page load (<3s).
|
| 219 |
+
|
| 220 |
+
Sample loading states.
|
| 221 |
+
|
| 222 |
+
Show masked PII data by default.
|
| 223 |
+
|
| 224 |
+
Prototype Flow
|
| 225 |
+
|
| 226 |
+
Login → Dashboard → Drill Down into Agency → Select Agent → Open Customer 360 → Perform Call → View Recording → Submit Feedback → Return to Dashboard → View Reports → Manage Masters in Settings.
|