Spaces:

divyanshushekhar
/

dms-central

Running

App Files Files Community

dms-central / index.html

divyanshushekhar

not able to see the changes - Follow Up Deployment

6896c91 verified 8 months ago

raw

history blame contribute delete

79.6 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>DMS Central - Collections Management</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<script src="https://cdn.tailwindcss.com"></script>
	<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
	<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	primary: '#0056b3',
	secondary: '#6c757d',
	success: '#28a745',
	danger: '#dc3545',
	warning: '#ffc107',
	info: '#17a2b8',
	dark: '#343a40',
	light: '#f8f9fa',
	}
	}
	}
	}
	</script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
	body {
	font-family: 'Inter', sans-serif;
	}
	.password-toggle {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	}
	.password-field {
	padding-right: 40px;
	}
	</style>
	</head>
	<body class="bg-gray-50">
	<!-- Login Page -->
	<div id="login-page" class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
	<div class="max-w-md w-full bg-white p-8 rounded-lg shadow-xl border border-gray-200">
	<div class="text-center">
	<h2 class="text-3xl font-extrabold text-gray-900">
	<span class="text-primary">DMS</span> Central
	</h2>
	<p class="mt-2 text-sm text-gray-600">Collections Management Platform</p>
	</div>

	<div class="mt-8">
	<form class="space-y-6" action="#" method="POST">
	<div class="rounded-md shadow-sm space-y-4">
	<div>
	<label for="username" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
	<div class="relative rounded-md shadow-sm">
	<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
	<i data-feather="user" class="h-4 w-4 text-gray-400"></i>
	</div>
	<input id="username" name="username" type="text" required
	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"
	placeholder="Enter your username">
	</div>
	</div>
	<div>
	<label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
	<div class="relative rounded-md shadow-sm">
	<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
	<i data-feather="lock" class="h-4 w-4 text-gray-400"></i>
	</div>
	<input id="password" name="password" type="password" required
	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"
	placeholder="••••••••">
	<div class="password-toggle" onclick="togglePassword()">
	<i id="eye-icon" data-feather="eye" class="h-4 w-4 text-gray-400"></i>
	</div>
	</div>
	</div>
	</div>

	<div class="flex items-center justify-between">
	<div class="flex items-center">
	<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
	<label for="remember-me" class="ml-2 block text-sm text-gray-700">Remember me</label>
	</div>
	<div class="text-sm">
	<a href="#" class="font-medium text-primary hover:text-blue-700">Forgot password?</a>
	</div>
	</div>

	<div>
	<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">
	<span class="absolute left-0 inset-y-0 flex items-center pl-3">
	<i data-feather="log-in" class="h-4 w-4 text-blue-200 group-hover:text-blue-300"></i>
	</span>
	Sign in
	</button>
	</div>
	</form>

	<div class="mt-6">
	<div class="relative">
	<div class="absolute inset-0 flex items-center">
	<div class="w-full border-t border-gray-300"></div>
	</div>
	<div class="relative flex justify-center text-sm">
	<span class="px-2 bg-white text-gray-500">Quick login</span>
	</div>
	</div>

	<div class="mt-4 grid grid-cols-2 gap-3">
	<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">
	Admin
	</button>
	<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">
	Supervisor
	</button>
	<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">
	Agent
	</button>
	<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">
	FOS Agent
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Dashboard Page (Hidden initially) -->
	<div id="dashboard-page" class="content-page hidden">
	<!-- Header -->
	<header class="bg-white shadow-sm border-b border-gray-200">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="flex justify-between h-16">
	<div class="flex items-center">
	<div class="flex-shrink-0 flex items-center">
	<span class="text-xl font-bold text-primary">DMS <span class="text-gray-700">Central</span></span>
	</div>
	<nav class="hidden md:ml-6 md:flex space-x-8">
	<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>
	<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>
	<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>
	<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>
	<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>
	</nav>
	</div>
	<div class="flex items-center">
	<div class="flex-shrink-0">
	<div class="relative mx-4">
	<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...">
	<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
	<i data-feather="search" class="h-4 w-4 text-gray-400"></i>
	</div>
	</div>
	</div>
	<div class="hidden md:ml-4 md:flex md:items-center">
	<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">
	<i data-feather="bell"></i>
	<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-danger"></span>
	</button>

	<div class="ml-4 relative flex-shrink-0">
	<div>
	<button id="user-menu" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
	<img class="h-8 w-8 rounded-full" src="http://static.photos/technology/200x200/12" alt="User profile">
	</button>
	</div>
	<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">
	<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">My Profile</a>
	<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Settings</a>
	<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Logout</a>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</header>

	<!-- Main Content -->
	<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
	<!-- Page title and buttons -->
	<div class="md:flex md:items-center md:justify-between mb-6">
	<div class="flex-1 min-w-0">
	<h1 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">Dashboard</h1>
	</div>
	<div class="mt-4 flex md:mt-0 md:ml-4">
	<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">
	<i data-feather="refresh-cw" class="-ml-1 mr-2 h-4 w-4"></i>
	Refresh Data
	</button>
	<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">
	<i data-feather="download" class="-ml-1 mr-2 h-4 w-4"></i>
	Export Report
	</button>
	</div>
	</div>

	<!-- KPI Cards -->
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
	<div class="bg-white overflow-hidden shadow rounded-lg">
	<div class="px-4 py-5 sm:p-6">
	<div class="flex items-center">
	<div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
	<i data-feather="dollar-sign" class="h-6 w-6 text-white"></i>
	</div>
	<div class="ml-5 w-0 flex-1">
	<dl>
	<dt class="text-sm font-medium text-gray-500 truncate">Total Allocations</dt>
	<dd class="flex items-baseline">
	<div class="text-2xl font-semibold text-gray-900">$1,245</div>
	<div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
	<i data-feather="trending-up" class="h-4 w-4"></i>
	<span class="sr-only">Increased by</span>
	12%
	</div>
	</dd>
	</dl>
	</div>
	</div>
	<div class="mt-4">
	<a href="#" class="text-sm font-medium text-primary hover:text-blue-700">
	View all allocations
	</a>
	</div>
	</div>
	</div>

	<div class="bg-white overflow-hidden shadow rounded-lg">
	<div class="px-4 py-5 sm:p-6">
	<div class="flex items-center">
	<div class="flex-shrink-0 bg-green-500 rounded-md p-3">
	<i data-feather="phone" class="h-6 w-6 text-white"></i>
	</div>
	<div class="ml-5 w-0 flex-1">
	<dl>
	<dt class="text-sm font-medium text-gray-500 truncate">Calls Made</dt>
	<dd class="flex items-baseline">
	<div class="text-2xl font-semibold text-gray-900">1,570</div>
	<div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
	<i data-feather="trending-up" class="h-4 w-4"></i>
	<span class="sr-only">Increased by</span>
	8%
	</div>
	</dd>
	</dl>
	</div>
	</div>
	<div class="mt-4">
	<a href="#" class="text-sm font-medium text-primary hover:text-blue-700">
	View call logs
	</a>
	</div>
	</div>
	</div>

	<div class="bg-white overflow-hidden shadow rounded-lg">
	<div class="px-4 py-5 sm:p-6">
	<div class="flex items-center">
	<div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
	<i data-feather="calendar" class="h-6 w-6 text-white"></i>
	</div>
	<div class="ml-5 w-0 flex-1">
	<dl>
	<dt class="text-sm font-medium text-gray-500 truncate">PTP Commitments</dt>
	<dd class="flex items-baseline">
	<div class="text-2xl font-semibold text-gray-900">42</div>
	<div class="ml-2 flex items-baseline text-sm font-semibold text-red-600">
	<i data-feather="trending-down" class="h-4 w-4"></i>
	<span class="sr-only">Decreased by</span>
	4%
	</div>
	</dd>
	</dl>
	</div>
	</div>
	<div class="mt-4">
	<a href="#" class="text-sm font-medium text-primary hover:text-blue-700">
	View PTP details
	</a>
	</div>
	</div>
	</div>

	<div class="bg-white overflow-hidden shadow rounded-lg">
	<div class="px-4 py-5 sm:p-6">
	<div class="flex items-center">
	<div class="flex-shrink-0 bg-red-500 rounded-md p-3">
	<i data-feather="alert-circle" class="h-6 w-6 text-white"></i>
	</div>
	<div class="ml-5 w-0 flex-1">
	<dl>
	<dt class="text-sm font-medium text-gray-500 truncate">Compliance Alerts</dt>
	<dd class="flex items-baseline">
	<div class="text-2xl font-semibold text-gray-900">3</div>
	<div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
	<i data-feather="trending-up" class="h-4 w-4"></i>
	<span class="sr-only">Increased by</span>
	1 new
	</div>
	</dd>
	</dl>
	</div>
	</div>
	<div class="mt-4">
	<a href="#" class="text-sm font-medium text-primary hover:text-blue-700">
	Review alerts
	</a>
	</div>
	</div>
	</div>
	</div>

	<!-- Charts Section -->
	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
	<!-- Calls by Status Chart -->
	<div class="bg-white p-6 rounded-lg shadow col-span-2">
	<div class="flex items-center justify-between mb-4">
	<h3 class="text-lg font-medium text-gray-900">Campaign Performance</h3>
	<div class="flex space-x-2">
	<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">
	<option>This Week</option>
	<option>Last Week</option>
	<option>This Month</option>
	<option>Last Month</option>
	</select>
	<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">
	<option>All Campaigns</option>
	<option>Credit Cards</option>
	<option>Personal Loans</option>
	<option>Auto Loans</option>
	</select>
	</div>
	</div>
	<div class="h-80">
	<canvas id="campaignChart"></canvas>
	</div>
	</div>

	<!-- Agency Collections Chart -->
	<div class="bg-white p-6 rounded-lg shadow">
	<div class="flex items-center justify-between mb-4">
	<h3 class="text-lg font-medium text-gray-900">Agency Collections</h3>
	<div>
	<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">
	<option>Current Month</option>
	<option>Previous Month</option>
	</select>
	</div>
	</div>
	<div class="h-80">
	<canvas id="agencyChart"></canvas>
	</div>
	</div>
	</div>

	<!-- Agent Performance Table -->
	<div class="bg-white shadow rounded-lg overflow-hidden mb-8">
	<div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
	<h3 class="text-lg font-medium text-gray-900">Agent Performance</h3>
	<div class="flex space-x-2">
	<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">
	<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">
	<i data-feather="filter" class="-ml-0.5 mr-2 h-4 w-4"></i>
	Filter
	</button>
	</div>
	</div>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Agent Name</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Allocations</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Calls Made</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">RPC</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">PTP %</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Collection %</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Productivity</th>
	<th scope="col" class="relative px-6 py-3">
	<span class="sr-only">Actions</span>
	</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr class="hover:bg-gray-50">
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10">
	<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/1" alt="">
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">John Smith</div>
	<div class="text-sm text-gray-500">Agent ID: A1001</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,250</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">185</div>
	<div class="text-sm text-gray-500">+5.4%</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">32%</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
	72%
	</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">58%</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-primary h-2.5 rounded-full" style="width: 78%"></div>
	</div>
	<span class="ml-2 text-sm font-medium text-gray-700">78%</span>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
	<a href="#agent-performance" data-page="agent-performance" onclick="showAgentDetails('Agent X')" class="text-primary hover:text-blue-700">View</a>
	</td>
	</tr>
	<tr class="hover:bg-gray-50">
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10">
	<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/2" alt="">
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">Sarah Johnson</div>
	<div class="text-sm text-gray-500">Agent ID: A1002</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$985</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">142</div>
	<div class="text-sm text-gray-500">+2.1%</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">28%</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
	65%
	</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">51%</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-primary h-2.5 rounded-full" style="width: 72%"></div>
	</div>
	<span class="ml-2 text-sm font-medium text-gray-700">72%</span>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
	<a href="#" class="text-primary hover:text-blue-700">View</a>
	</td>
	</tr>
	<tr class="hover:bg-gray-50">
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10">
	<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/3" alt="">
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">Michael Brown</div>
	<div class="text-sm text-gray-500">Agent ID: A1003</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,120</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">156</div>
	<div class="text-sm text-gray-500">+7.8%</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30%</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
	48%
	</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">42%</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-primary h-2.5 rounded-full" style="width: 65%"></div>
	</div>
	<span class="ml-2 text-sm font-medium text-gray-700">65%</span>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
	<a href="#" class="text-primary hover:text-blue-700">View</a>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	<div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200">
	<div class="flex-1 flex justify-between sm:hidden">
	<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">
	Previous
	</a>
	<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">
	Next
	</a>
	</div>
	<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
	<div>
	<p class="text-sm text-gray-700">
	Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">97</span> results
	</p>
	</div>
	<div>
	<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
	<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">
	<span class="sr-only">Previous</span>
	<i data-feather="chevron-left" class="h-5 w-5"></i>
	</a>
	<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">
	1
	</a>
	<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">
	2
	</a>
	<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">
	3
	</a>
	<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">
	<span class="sr-only">Next</span>
	<i data-feather="chevron-right" class="h-5 w-5"></i>
	</a>
	</nav>
	</div>
	</div>
	</div>
	</div>

	<!-- Alerts and Recent Activity -->
	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
	<!-- Alerts Panel -->
	<div class="bg-white p-6 rounded-lg shadow">
	<div class="flex items-center justify-between mb-4">
	<h3 class="text-lg font-medium text-gray-900">Alerts</h3>
	<button class="text-sm text-primary hover:text-blue-700">View All</button>
	</div>
	<div class="space-y-4 max-h-96 overflow-y-auto">
	<div class="flex items-start">
	<div class="flex-shrink-0 mt-0.5">
	<div class="h-6 w-6 rounded-full flex items-center justify-center bg-red-100 text-red-600">
	<i data-feather="alert-triangle" class="h-4 w-4"></i>
	</div>
	</div>
	<div class="ml-3 flex-1">
	<p class="text-sm font-medium text-gray-900">Compliance Alert</p>
	<p class="text-sm text-gray-500">Agent #A1003 potential abusive language detected in call recording #4521.</p>
	<div class="mt-1 text-xs text-gray-500">12 minutes ago</div>
	</div>
	</div>
	<div class="flex items-start">
	<div class="flex-shrink-0 mt-0.5">
	<div class="h-6 w-6 rounded-full flex items-center justify-center bg-yellow-100 text-yellow-600">
	<i data-feather="calendar" class="h-4 w-4"></i>
	</div>
	</div>
	<div class="ml-3 flex-1">
	<p class="text-sm font-medium text-gray-900">PTP Due Today</p>
	<p class="text-sm text-gray-500">Customer LAN789456 has PTP commitment of $125 due today at 3:00 PM.</p>
	<div class="mt-1 text-xs text-gray-500">35 minutes ago</div>
	</div>
	</div>
	<div class="flex items-start">
	<div class="flex-shrink-0 mt-0.5">
	<div class="h-6 w-6 rounded-full flex items-center justify-center bg-blue-100 text-blue-600">
	<i data-feather="phone-missed" class="h-4 w-4"></i>
	</div>
	</div>
	<div class="ml-3 flex-1">
	<p class="text-sm font-medium text-gray-900">Overdue Calls</p>
	<p class="text-sm text-gray-500">23 callbacks marked as overdue from yesterday's campaign.</p>
	<div class="mt-1 text-xs text-gray-500">2 hours ago</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Recent Activity -->
	<div class="bg-white p-6 rounded-lg shadow col-span-2">
	<div class="flex items-center justify-between mb-4">
	<h3 class="text-lg font-medium text-gray-900">Recent Activity</h3>
	<button class="text-sm text-primary hover:text-blue-700">View All</button>
	</div>
	<div class="space-y-4 max-h-96 overflow-y-auto">
	<div class="flex items-start">
	<div class="flex-shrink-0">
	<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/4" alt="">
	</div>
	<div class="ml-3 flex-1">
	<p class="text-sm font-medium text-gray-900">Lisa Wong completed 50 calls</p>
	<p class="text-sm text-gray-500">Personal Loans campaign call target achieved at 2:15 PM.</p>
	<div class="mt-1 text-xs text-gray-500">10 minutes ago</div>
	</div>
	<div class="ml-auto">
	<a href="#" class="text-sm text-primary hover:text-blue-700">View</a>
	</div>
	</div>
	<div class="flex items-start">
	<div class="flex-shrink-0">
	<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/5" alt="">
	</div>
	<div class="ml-3 flex-1">
	<p class="text-sm font-medium text-gray-900">Payment received from customer LAN123456</p>
	<p class="text-sm text-gray-500">Amount: $245 received via credit card at 1:45 PM.</p>
	<div class="mt-1 text-xs text-gray-500">45 minutes ago</div>
	</div>
	<div class="ml-auto">
	<a href="#" class="text-sm text-primary hover:text-blue-700">View</a>
	</div>
	</div>
	<div class="flex items-start">
	<div class="flex-shrink-0">
	<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/6" alt="">
	</div>
	<div class="ml-3 flex-1">
	<p class="text-sm font-medium text-gray-900">New campaign added</p>
	<p class="text-sm text-gray-500">"August Credit Card Collections" with 3,456 allocations.</p>
	<div class="mt-1 text-xs text-gray-500">3 hours ago</div>
	</div>
	<div class="ml-auto">
	<a href="#" class="text-sm text-primary hover:text-blue-700">View</a>
	</div>
	</div>
	</div>
	</div>
	</div>
	</main>
	</div>

	<!-- Customer 360 Modal (Hidden initially) -->
	<div id="customer360-modal" class="fixed inset-0 overflow-hidden z-50 hidden" aria-labelledby="slide-over-title" role="dialog" aria-modal="true">

	<!-- Additional Pages (Hidden initially) -->
	<div id="campaigns" class="content-page hidden p-6">
	<h2 class="text-2xl font-bold mb-6">Campaign Management</h2>
	<div class="bg-white shadow rounded-lg p-6">
	<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
	<div class="border rounded-lg p-4 cursor-pointer hover:bg-gray-50">
	<h3 class="font-medium mb-2">Current Campaigns</h3>
	<div class="text-3xl font-bold text-primary">5</div>
	</div>
	<div class="border rounded-lg p-4 cursor-pointer hover:bg-gray-50">
	<h3 class="font-medium mb-2">Active Agents</h3>
	<div class="text-3xl font-bold text-primary">23</div>
	</div>
	<div class="border rounded-lg p-4 cursor-pointer hover:bg-gray-50">
	<h3 class="font-medium mb-2">Avg. Calls/Day</h3>
	<div class="text-3xl font-bold text-primary">82</div>
	</div>
	</div>
	<div class="mt-6">
	<h4 class="font-medium mb-2">Campaign List</h4>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Start Date</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">End Date</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Allocations</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr class="hover:bg-gray-50">
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">August CC Collections</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">01 Aug 2023</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">31 Aug 2023</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3,456</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</div>
	</div>

	<div id="customers" class="content-page hidden p-6">
	<h2 class="text-2xl font-bold mb-6">Customer Management</h2>
	<div class="bg-white shadow rounded-lg p-6">
	<p>Customer management content goes here...</p>
	</div>
	</div>

	<div id="reports" class="content-page hidden p-6">
	<h2 class="text-2xl font-bold mb-6">Reports</h2>
	<div class="bg-white shadow rounded-lg p-6">
	<p>Reports content goes here...</p>
	</div>
	</div>

	<div id="settings" class="content-page hidden p-6">
	<h2 class="text-2xl font-bold mb-6">Settings</h2>
	<div class="bg-white shadow rounded-lg p-6">
	<p>Settings content goes here...</p>
	</div>
	</div>
	<div class="absolute inset-0 overflow-hidden">
	<div class="absolute inset-0" aria-hidden="true"></div>
	<div class="fixed inset-y-0 right-0 pl-10 max-w-full flex">
	<div class="relative w-screen max-w-4xl">
	<div class="absolute top-0 left-0 -ml-8 pt-4 pr-2 flex sm:-ml-10 sm:pr-4">
	<button onclick="closeModal()" class="rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white">
	<span class="sr-only">Close panel</span>
	<i data-feather="x" class="h-6 w-6"></i>
	</button>
	</div>
	<div class="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
	<div class="flex-1">
	<!-- Customer 360 Header -->
	<div class="px-6 py-4 bg-primary text-white">
	<div class="flex items-center justify-between">
	<div>
	<h2 class="text-xl font-bold" id="slide-over-title">Customer 360° View</h2>
	<p class="mt-1">LAN: <span class="font-semibold">#123456789</span></p>
	</div>
	<div class="space-x-2">
	<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">
	<i data-feather="phone" class="mr-2 h-4 w-4"></i> Call Now
	</button>
	<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">
	<i data-feather="mail" class="mr-2 h-4 w-4"></i> Send Payment Link
	</button>
	</div>
	</div>
	</div>

	<!-- Tabs -->
	<div class="border-b border-gray-200">
	<nav class="-mb-px flex">
	<a href="#" class="w-1/4 py-4 px-1 text-center border-b-2 border-primary font-medium text-sm text-primary">
	Customer Info
	</a>
	<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">
	Documents
	</a>
	<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">
	Communication
	</a>
	<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">
	Payments
	</a>
	</nav>
	</div>
	<!-- Tab contents -->
	<div id="customer-info" class="tab-content">

	<!-- Customer Info Content -->
	<div class="p-6" id="documents" class="tab-content hidden">
	<h3 class="text-lg font-medium text-gray-900 mb-4">Customer Documents</h3>
	<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
	<div class="border rounded-lg overflow-hidden">
	<img src="http://static.photos/document/320x240/1" class="w-full h-32 object-cover">
	<div class="p-3">
	<p class="text-sm font-medium">Loan Agreement</p>
	<p class="text-xs text-gray-500">Uploaded: 15 Jan 2023</p>
	</div>
	</div>
	<div class="border rounded-lg overflow-hidden">
	<img src="http://static.photos/document/320x240/2" class="w-full h-32 object-cover">
	<div class="p-3">
	<p class="text-sm font-medium">ID Proof</p>
	<p class="text-xs text-gray-500">Uploaded: 15 Jan 2023</p>
	</div>
	</div>
	<div class="border rounded-lg overflow-hidden">
	<img src="http://static.photos/car/320x240/1" class="w-full h-32 object-cover">
	<div class="p-3">
	<p class="text-sm font-medium">Vehicle Photo</p>
	<p class="text-xs text-gray-500">Uploaded: 20 Jan 2023</p>
	</div>
	</div>
	<div class="border rounded-lg overflow-hidden">
	<img src="http://static.photos/document/320x240/3" class="w-full h-32 object-cover">
	<div class="p-3">
	<p class="text-sm font-medium">Address Proof</p>
	<p class="text-xs text-gray-500">Uploaded: 15 Jan 2023</p>
	</div>
	</div>
	</div>
	</div>

	<div class="p-6" id="communication" class="tab-content hidden">
	<!-- Communication History -->
	<h3 class="text-lg font-medium text-gray-900 mb-4">Communication History</h3>
	<div class="space-y-4">
	<div class="border rounded-lg p-4">
	<div class="flex items-center justify-between">
	<div class="flex items-center">
	<i data-feather="phone" class="h-4 w-4 text-primary mr-2"></i>
	<span class="text-sm font-medium">Outbound Call</span>
	</div>
	<span class="text-xs text-gray-500">Today, 10:30 AM</span>
	</div>
	<div class="mt-2 pl-6">
	<p class="text-sm">Status: Customer promised payment (PTP) of $500 by Aug 5</p>
	<p class="text-sm mt-1">Agent: John Smith</p>
	</div>
	</div>
	<div class="border rounded-lg p-4">
	<div class="flex items-center justify-between">
	<div class="flex items-center">
	<i data-feather="message-square" class="h-4 w-4 text-green-600 mr-2"></i>
	<span class="text-sm font-medium">SMS Sent</span>
	</div>
	<span class="text-xs text-gray-500">Yesterday, 2:15 PM</span>
	</div>
	<div class="mt-2 pl-6">
	<p class="text-sm">Content: Reminder for overdue payment of $1,245</p>
	<p class="text-sm mt-1">Status: Delivered</p>
	</div>
	</div>
	</div>
	</div>

	<div class="p-6" id="payments" class="tab-content hidden">
	<!-- Payment History -->
	<h3 class="text-lg font-medium text-gray-900 mb-4">Payment History</h3>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mode</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 Jul 2023</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$750.00</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Credit Card</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span>
	</td>
	</tr>
	<tr>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30 Jun 2023</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$1,000.00</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Bank Transfer</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	<div class="mt-4">
	<button 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">
	<i data-feather="share-2" class="-ml-1 mr-2 h-4 w-4"></i>
	Send Payment Link
	</button>
	</div>
	</div>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
	<div>
	<h3 class="text-lg font-medium text-gray-900 mb-4">Basic Information</h3>
	<div class="space-y-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
	<div class="text-sm text-gray-900 p-2 bg-gray-50 rounded">Robert Johnson</div>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Mobile Number</label>
	<div class="text-sm text-gray-900 p-2 bg-gray-50 rounded">+1 (987) 654-3210</div>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
	<div class="text-sm text-gray-900 p-2 bg-gray-50 rounded">r.johnson@example.com</div>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Preferred Language</label>
	<div class="text-sm text-gray-900 p-2 bg-gray-50 rounded">English</div>
	</div>
	</div>
	</div>
	<div>
	<h3 class="text-lg font-medium text-gray-900 mb-4">Loan Details</h3>
	<div class="space-y-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Account Status</label>
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 p-2">
	Delinquent (60 days)
	</span>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Loan Type</label>
	<div class="text-sm text-gray-900 p-2 bg-gray-50 rounded">Personal Loan</div>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Outstanding Balance</label>
	<div class="text-sm text-gray-900 p-2 bg-gray-50 rounded">$8,750.00</div>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Amount Overdue</label>
	<div class="text-sm text-gray-900 font-medium text-danger p-2 bg-gray-50 rounded">$1,245.00</div>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Next Due Date</label>
	<div class="text-sm text-gray-900 p-2 bg-gray-50 rounded">August 15, 2023</div>
	</div>
	</div>
	</div>
	</div>

	<div class="mb-8">
	<h3 class="text-lg font-medium text-gray-900 mb-4">Asset Details</h3>
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Asset Type</label>
	<div class="text-sm text-gray-900 p-2 bg-gray-50 rounded">Vehicle</div>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Make & Model</label>
	<div class="text-sm text-gray-900 p-2 bg-gray-50 rounded">2021 Toyota Camry SE</div>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Registration Number</label>
	<div class="text-sm text-gray-900 p-2 bg-gray-50 rounded">ABC-1234</div>
	</div>
	</div>
	</div>

	<div class="mb-8">
	<h3 class="text-lg font-medium text-gray-900 mb-4">Recent Communications</h3>
	<div class="space-y-4">
	<div class="flex items-start">
	<div class="flex-shrink-0 mt-1">
	<div class="h-8 w-8 rounded-full flex items-center justify-center bg-blue-100 text-blue-600">
	<i data-feather="phone" class="h-4 w-4"></i>
	</div>
	</div>
	<div class="ml-3">
	<div class="text-sm font-medium text-gray-900">Call attempted on August 2, 2023 at 3:45 PM</div>
	<div class="text-sm text-gray-500 mt-1">
	<span class="font-medium">Status:</span> Left voicemail message. Customer requested callback on August 3.
	</div>
	</div>
	</div>
	<div class="flex items-start">
	<div class="flex-shrink-0 mt-1">
	<div class="h-8 w-8 rounded-full flex items-center justify-center bg-green-100 text-green-600">
	<i data-feather="message-square" class="h-4 w-4"></i>
	</div>
	</div>
	<div class="ml-3">
	<div class="text-sm font-medium text-gray-900">SMS sent on August 1, 2023 at 10:15 AM</div>
	<div class="text-sm text-gray-500 mt-1">
	<span class="font-medium">Content:</span> Reminder for overdue payment of $1,245. Reply YES to receive payment options.
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="mb-8">
	<h3 class="text-lg font-medium text-gray-900 mb-4">PTP Commitments</h3>
	<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
	<div class="flex">
	<div class="flex-shrink-0">
	<i data-feather="alert-circle" class="h-5 w-5 text-yellow-400"></i>
	</div>
	<div class="ml-3">
	<p class="text-sm text-yellow-700">
	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).
	</p>
	</div>
	</div>
	</div>
	</div>

	<div>
	<h3 class="text-lg font-medium text-gray-900 mb-4">Add New Remark</h3>
	<form>
	<div class="mb-4">
	<label for="disposition" class="block text-sm font-medium text-gray-700">Disposition</label>
	<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">
	<option>Select disposition</option>
	<option>Payment Promise (PTP)</option>
	<option>Request for Documentation</option>
	<option>Request for Settlement</option>
	<option>Customer Complaints</option>
	<option>Unable to Contact</option>
	<option>Wrong Number</option>
	</select>
	</div>
	<div class="mb-4">
	<label for="remark" class="block text-sm font-medium text-gray-700">Remark</label>
	<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>
	</div>
	<div class="flex items-center justify-between">
	<div class="flex items-center">
	<input id="needs-followup" name="needs-followup" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
	<label for="needs-followup" class="ml-2 block text-sm text-gray-700">Needs follow-up</label>
	</div>
	<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">
	<i data-feather="save" class="-ml-1 mr-2 h-4 w-4"></i>
	Save Remark
	</button>
	</div>
	</form>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<script>
	// Helper functions
	function togglePassword() {
	const passwordField = document.getElementById('password');
	const eyeIcon = document.getElementById('eye-icon');

	if (passwordField.type === 'password') {
	passwordField.type = 'text';
	eyeIcon.setAttribute('data-feather', 'eye-off');
	} else {
	passwordField.type = 'password';
	eyeIcon.setAttribute('data-feather', 'eye');
	}
	feather.replace();
	}

	function autoFill(role) {
	let username, password;
	switch(role) {
	case 'admin':
	username = 'admin@bacl.com';
	password = 'Admin@1234';
	break;
	case 'supervisor':
	username = 'supervisor@bacl.com';
	password = 'Super@1234';
	break;
	case 'agent':
	username = 'agent@bacl.com';
	password = 'Agent@1234';
	break;
	case 'fos':
	username = 'fosagent@bacl.com';
	password = 'Fos@1234';
	break;
	default:
	username = '';
	password = '';
	}

	document.getElementById('username').value = username;
	document.getElementById('password').value = password;
	}

	function closeModal() {
	document.getElementById('customer360-modal').classList.add('hidden');
	}

	// Charts initialization
	document.addEventListener('DOMContentLoaded', function() {
	// Initialize feather icons
	feather.replace();

	// Initialize AOS animations
	AOS.init();

	// Initialize user dropdown
	document.getElementById('user-menu').addEventListener('click', function(e) {
	e.stopPropagation();
	document.getElementById('user-dropdown').classList.toggle('hidden');
	});

	// Close dropdown when clicking outside
	document.addEventListener('click', function() {
	document.getElementById('user-dropdown').classList.add('hidden');
	});

	// Tab switching in customer 360
	document.querySelectorAll('.tab-link').forEach(tab => {
	tab.addEventListener('click', function(e) {
	e.preventDefault();
	const tabId = this.getAttribute('data-tab');

	// Update tab styling
	document.querySelectorAll('.tab-link').forEach(t => {
	t.classList.remove('border-primary', 'text-primary');
	t.classList.add('border-transparent', 'text-gray-500');
	});
	this.classList.add('border-primary', 'text-primary');
	this.classList.remove('border-transparent', 'text-gray-500');

	// Show/hide tab content
	document.querySelectorAll('.tab-content').forEach(content => {
	content.classList.add('hidden');
	});
	document.getElementById(tabId).classList.remove('hidden');
	});
	});

	function logout() {
	document.getElementById('dashboard-page').classList.add('hidden');
	document.getElementById('login-page').classList.remove('hidden');
	location.hash = '';
	}

	function showAgentDetails(agentName) {
	alert(`Showing details for ${agentName}`);
	// In a real app, this would load agent details from API
	}

	// Campaign Chart
	const campaignCtx = document.getElementById('campaignChart').getContext('2d');
	const campaignChart = new Chart(campaignCtx, {
	type: 'bar',
	data: {
	labels: ['Connected', 'Not Connected', 'Callback', 'Broken PTP'],
	datasets: [{
	label: 'Call Status',
	data: [420, 680, 190, 85],
	backgroundColor: [
	'rgba(40, 167, 69, 0.8)',
	'rgba(220, 53, 69, 0.8)',
	'rgba(255, 193, 7, 0.8)',
	'rgba(23, 162, 184, 0.8)'
	],
	borderColor: [
	'rgba(40, 167, 69, 1)',
	'rgba(220, 53, 69, 1)',
	'rgba(255, 193, 7, 1)',
	'rgba(23, 162, 184, 1)'
	],
	borderWidth: 1
	}]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	scales: {
	y: {
	beginAtZero: true
	}
	}
	}
	});

	// Agency Chart
	const agencyCtx = document.getElementById('agencyChart').getContext('2d');
	const agencyChart = new Chart(agencyCtx, {
	type: 'doughnut',
	data: {
	labels: ['Agency A', 'Agency B', 'Agency C', 'Agency D'],
	datasets: [{
	data: [320, 180, 240, 160],
	backgroundColor: [
	'rgba(0, 86, 179, 0.8)',
	'rgba(220, 53, 69, 0.8)',
	'rgba(40, 167, 69, 0.8)',
	'rgba(255, 193, 7, 0.8)'
	],
	borderColor: [
	'rgba(0, 86, 179, 1)',
	'rgba(220, 53, 69, 1)',
	'rgba(40, 167, 69, 1)',
	'rgba(255, 193, 7, 1)'
	],
	borderWidth: 1
	}]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	plugins: {
	legend: {
	position: 'bottom',
	}
	}
	}
	});
	});

	// Login form submission handler (demo only)
	document.querySelector('form').addEventListener('submit', function(e) {
	e.preventDefault();
	// Hide login page, show dashboard for demo purposes
	document.getElementById('login-page').classList.add('hidden');
	document.getElementById('dashboard-page').classList.remove('hidden');
	});
	</script>
	</body>
	</html>


	This is a comprehensive dashboard application for the DMS Central Collections Management Platform. The code includes:

	1. Login Page with:
	- Secure login form with password visibility toggle
	- Quick login buttons for different roles
	- Forgot password link
	- Responsive design

	2. Dashboard with:
	- Top navigation with search and notifications
	- KPI summary cards (4 key metrics with drill-down)
	- Campaign performance chart (bar and doughnut)
	- Agent performance table (sortable/filterable)
	- Alerts panel (compliance/PTP/overdue calls)
	- Recent activity log

	3. Customer 360° View (modal) with:
	- Tabbed interface for different data sections
	- Customer information and loan details
	- Asset information
	- Communication history
	- PTP commitments
	- Add remark form

	4. Interactive Elements:
	- Charts using Chart.js
	- Dropdown menus
	- Modal dialogs
	- Responsive tables
	- Form validation

	The design is clean, professional, and responsive using TailwindCSS. All the requested features are implemented with a focus on usability for collections management operations.