|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>TaxPro CRM | Tax Planning Services Management</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.sidebar.collapsed { |
|
|
width: 70px; |
|
|
} |
|
|
.sidebar.collapsed .nav-text { |
|
|
display: none; |
|
|
} |
|
|
.sidebar.collapsed .logo-text { |
|
|
display: none; |
|
|
} |
|
|
.sidebar.collapsed .nav-item { |
|
|
justify-content: center; |
|
|
} |
|
|
.client-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
|
|
} |
|
|
#calendar { |
|
|
height: 500px; |
|
|
} |
|
|
.fc-event { |
|
|
cursor: pointer; |
|
|
} |
|
|
.progress-bar { |
|
|
height: 8px; |
|
|
} |
|
|
.progress-bar::-webkit-progress-bar { |
|
|
background-color: #e5e7eb; |
|
|
border-radius: 4px; |
|
|
} |
|
|
.progress-bar::-webkit-progress-value { |
|
|
border-radius: 4px; |
|
|
background-color: #3b82f6; |
|
|
} |
|
|
.chart-container { |
|
|
position: relative; |
|
|
height: 300px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar bg-blue-800 text-white w-64 flex flex-col"> |
|
|
<div class="p-4 flex items-center space-x-3 border-b border-blue-700"> |
|
|
<div class="bg-white p-2 rounded-lg"> |
|
|
<i class="fas fa-file-invoice-dollar text-blue-800 text-xl"></i> |
|
|
</div> |
|
|
<span class="logo-text text-xl font-bold">TaxPro CRM</span> |
|
|
</div> |
|
|
<div class="flex-1 overflow-y-auto py-4"> |
|
|
<div class="px-4 space-y-2"> |
|
|
<div class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-blue-700 cursor-pointer"> |
|
|
<i class="fas fa-tachometer-alt"></i> |
|
|
<span class="nav-text">Dashboard</span> |
|
|
</div> |
|
|
<div class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-blue-700 cursor-pointer"> |
|
|
<i class="fas fa-users"></i> |
|
|
<span class="nav-text">Clients</span> |
|
|
</div> |
|
|
<div class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-blue-700 cursor-pointer"> |
|
|
<i class="fas fa-calendar-check"></i> |
|
|
<span class="nav-text">Appointments</span> |
|
|
</div> |
|
|
<div class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-blue-700 cursor-pointer"> |
|
|
<i class="fas fa-file-alt"></i> |
|
|
<span class="nav-text">Documents</span> |
|
|
</div> |
|
|
<div class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-blue-700 cursor-pointer"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
<span class="nav-text">Reports</span> |
|
|
</div> |
|
|
<div class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-blue-700 cursor-pointer"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
<span class="nav-text">Messages</span> |
|
|
</div> |
|
|
<div class="nav-item flex items-center space-x-3 p-3 rounded-lg hover:bg-blue-700 cursor-pointer"> |
|
|
<i class="fas fa-cog"></i> |
|
|
<span class="nav-text">Settings</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-auto px-4 py-6 border-t border-blue-700"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="nav-text font-medium">Admin User</div> |
|
|
<div class="nav-text text-sm text-blue-200">Tax Consultant</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-auto"> |
|
|
|
|
|
<header class="bg-white shadow-sm"> |
|
|
<div class="flex items-center justify-between px-6 py-4"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button id="sidebarToggle" class="text-gray-600 hover:text-gray-900"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-semibold text-gray-800">Dashboard</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<button class="text-gray-600 hover:text-gray-900"> |
|
|
<i class="fas fa-bell text-xl"></i> |
|
|
<span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<button class="text-gray-600 hover:text-gray-900"> |
|
|
<i class="fas fa-envelope text-xl"></i> |
|
|
<span class="absolute top-0 right-0 w-2 h-2 bg-blue-500 rounded-full"></span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="p-6"> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500">Total Clients</p> |
|
|
<h3 class="text-2xl font-bold mt-1">248</h3> |
|
|
<p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 12% from last month</p> |
|
|
</div> |
|
|
<div class="bg-blue-100 p-3 rounded-full"> |
|
|
<i class="fas fa-users text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500">Upcoming Appointments</p> |
|
|
<h3 class="text-2xl font-bold mt-1">14</h3> |
|
|
<p class="text-red-500 text-sm mt-2"><i class="fas fa-arrow-down mr-1"></i> 3 today</p> |
|
|
</div> |
|
|
<div class="bg-green-100 p-3 rounded-full"> |
|
|
<i class="fas fa-calendar-check text-green-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500">Documents Pending</p> |
|
|
<h3 class="text-2xl font-bold mt-1">32</h3> |
|
|
<p class="text-yellow-500 text-sm mt-2"><i class="fas fa-exclamation-circle mr-1"></i> 5 urgent</p> |
|
|
</div> |
|
|
<div class="bg-purple-100 p-3 rounded-full"> |
|
|
<i class="fas fa-file-alt text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500">Revenue This Month</p> |
|
|
<h3 class="text-2xl font-bold mt-1">$24,580</h3> |
|
|
<p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 18% from last month</p> |
|
|
</div> |
|
|
<div class="bg-yellow-100 p-3 rounded-full"> |
|
|
<i class="fas fa-dollar-sign text-yellow-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
|
|
|
<div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h2 class="text-lg font-semibold">Recent Clients</h2> |
|
|
<button class="text-blue-600 hover:text-blue-800 flex items-center"> |
|
|
<span>View All</span> |
|
|
<i class="fas fa-chevron-right ml-1 text-sm"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th> |
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tax Type</th> |
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Contact</th> |
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-4 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> |
|
|
<span class="text-blue-600">JD</span> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">John Doe</div> |
|
|
<div class="text-sm text-gray-500">[email protected]</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Personal</td> |
|
|
<td class="px-4 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Active</span> |
|
|
</td> |
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">2 days ago</td> |
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-blue-600 hover:text-blue-900 mr-3" onclick="openClientModal()"><i class="fas fa-eye"></i></button> |
|
|
<button class="text-green-600 hover:text-green-900"><i class="fas fa-edit"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-4 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center"> |
|
|
<span class="text-purple-600">AS</span> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Acme Solutions</div> |
|
|
<div class="text-sm text-gray-500">[email protected]</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Corporate</td> |
|
|
<td class="px-4 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Pending</span> |
|
|
</td> |
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">1 week ago</td> |
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button> |
|
|
<button class="text-green-600 hover:text-green-900"><i class="fas fa-edit"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-4 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-pink-100 flex items-center justify-center"> |
|
|
<span class="text-pink-600">MJ</span> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Mary Johnson</div> |
|
|
<div class="text-sm text-gray-500">[email protected]</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Estate</td> |
|
|
<td class="px-4 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">Overdue</span> |
|
|
</td> |
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">3 weeks ago</td> |
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button> |
|
|
<button class="text-green-600 hover:text-green-900"><i class="fas fa-edit"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h2 class="text-lg font-semibold">Upcoming Tasks</h2> |
|
|
<button class="text-blue-600 hover:text-blue-800 flex items-center"> |
|
|
<span>Add New</span> |
|
|
<i class="fas fa-plus ml-1 text-sm"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div class="border-l-4 border-blue-500 pl-4 py-2"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h4 class="font-medium">Tax Return for John Doe</h4> |
|
|
<p class="text-sm text-gray-500">Due: Apr 15, 2023</p> |
|
|
</div> |
|
|
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">High</span> |
|
|
</div> |
|
|
<div class="mt-2 flex items-center text-sm text-gray-500"> |
|
|
<i class="fas fa-user mr-1"></i> |
|
|
<span>Assigned to you</span> |
|
|
</div> |
|
|
<div class="mt-3"> |
|
|
<progress class="progress-bar w-full" value="75" max="100"></progress> |
|
|
<div class="flex justify-between text-xs text-gray-500 mt-1"> |
|
|
<span>75% complete</span> |
|
|
<span>3 of 4 docs</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-l-4 border-green-500 pl-4 py-2"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h4 class="font-medium">Quarterly Review - Acme</h4> |
|
|
<p class="text-sm text-gray-500">Due: Apr 20, 2023</p> |
|
|
</div> |
|
|
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Medium</span> |
|
|
</div> |
|
|
<div class="mt-2 flex items-center text-sm text-gray-500"> |
|
|
<i class="fas fa-user mr-1"></i> |
|
|
<span>Assigned to team</span> |
|
|
</div> |
|
|
<div class="mt-3"> |
|
|
<progress class="progress-bar w-full" value="30" max="100"></progress> |
|
|
<div class="flex justify-between text-xs text-gray-500 mt-1"> |
|
|
<span>30% complete</span> |
|
|
<span>1 of 3 docs</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-l-4 border-yellow-500 pl-4 py-2"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h4 class="font-medium">Tax Planning Session</h4> |
|
|
<p class="text-sm text-gray-500">Due: Apr 22, 2023</p> |
|
|
</div> |
|
|
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Low</span> |
|
|
</div> |
|
|
<div class="mt-2 flex items-center text-sm text-gray-500"> |
|
|
<i class="fas fa-user mr-1"></i> |
|
|
<span>Assigned to you</span> |
|
|
</div> |
|
|
<div class="mt-3"> |
|
|
<progress class="progress-bar w-full" value="10" max="100"></progress> |
|
|
<div class="flex justify-between text-xs text-gray-500 mt-1"> |
|
|
<span>10% complete</span> |
|
|
<span>0 of 2 docs</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full mt-4 py-2 border border-dashed border-gray-300 rounded-lg text-gray-500 hover:text-gray-700 hover:border-gray-400" onclick="alert('Add task functionality would open a form here')"> |
|
|
<i class="fas fa-plus mr-1"></i> Add Task |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h2 class="text-lg font-semibold">Appointment Calendar</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="p-1 rounded hover:bg-gray-100"> |
|
|
<i class="fas fa-chevron-left"></i> |
|
|
</button> |
|
|
<button class="p-1 rounded hover:bg-gray-100"> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div id="calendar"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h2 class="text-lg font-semibold">Upcoming Tax Deadlines</h2> |
|
|
<button class="text-blue-600 hover:text-blue-800"> |
|
|
<i class="fas fa-sync-alt"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start p-3 rounded-lg bg-red-50"> |
|
|
<div class="bg-red-100 p-2 rounded-lg mr-3"> |
|
|
<i class="fas fa-exclamation text-red-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Personal Tax Returns</h4> |
|
|
<p class="text-sm text-gray-600">April 18, 2023</p> |
|
|
<p class="text-xs text-red-600 mt-1">5 days remaining</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start p-3 rounded-lg bg-yellow-50"> |
|
|
<div class="bg-yellow-100 p-2 rounded-lg mr-3"> |
|
|
<i class="fas fa-clock text-yellow-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Q1 Estimated Payments</h4> |
|
|
<p class="text-sm text-gray-600">April 25, 2023</p> |
|
|
<p class="text-xs text-yellow-600 mt-1">12 days remaining</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start p-3 rounded-lg bg-blue-50"> |
|
|
<div class="bg-blue-100 p-2 rounded-lg mr-3"> |
|
|
<i class="fas fa-calendar-alt text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Corporate Tax Returns</h4> |
|
|
<p class="text-sm text-gray-600">May 15, 2023</p> |
|
|
<p class="text-xs text-blue-600 mt-1">32 days remaining</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start p-3 rounded-lg bg-green-50"> |
|
|
<div class="bg-green-100 p-2 rounded-lg mr-3"> |
|
|
<i class="fas fa-calendar-alt text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Q2 Estimated Payments</h4> |
|
|
<p class="text-sm text-gray-600">June 15, 2023</p> |
|
|
<p class="text-xs text-green-600 mt-1">63 days remaining</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<h2 class="text-lg font-semibold">Quick Actions</h2> |
|
|
<button class="text-blue-600 hover:text-blue-800"> |
|
|
<i class="fas fa-ellipsis-h"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:border-blue-500 hover:bg-blue-50" onclick="openClientModal()"> |
|
|
<div class="bg-blue-100 p-3 rounded-full mb-2"> |
|
|
<i class="fas fa-user-plus text-blue-600"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium">Add Client</span> |
|
|
</button> |
|
|
<button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:border-green-500 hover:bg-green-50"> |
|
|
<div class="bg-green-100 p-3 rounded-full mb-2"> |
|
|
<i class="fas fa-calendar-plus text-green-600"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium">Schedule</span> |
|
|
</button> |
|
|
<button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:border-purple-500 hover:bg-purple-50"> |
|
|
<div class="bg-purple-100 p-3 rounded-full mb-2"> |
|
|
<i class="fas fa-file-upload text-purple-600"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium">Upload Doc</span> |
|
|
</button> |
|
|
<button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:border-red-500 hover:bg-red-50"> |
|
|
<div class="bg-red-100 p-3 rounded-full mb-2"> |
|
|
<i class="fas fa-file-invoice-dollar text-red-600"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium">Create Invoice</span> |
|
|
</button> |
|
|
<button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:border-yellow-500 hover:bg-yellow-50"> |
|
|
<div class="bg-yellow-100 p-3 rounded-full mb-2"> |
|
|
<i class="fas fa-chart-pie text-yellow-600"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium">Reports</span> |
|
|
</button> |
|
|
<button class="flex flex-col items-center justify-center p-4 rounded-lg border border-gray-200 hover:border-indigo-500 hover:bg-indigo-50"> |
|
|
<div class="bg-indigo-100 p-3 rounded-full mb-2"> |
|
|
<i class="fas fa-envelope text-indigo-600"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium">Message</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="clientModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-6"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold">Client Details</h3> |
|
|
<p class="text-gray-500">View and edit client information</p> |
|
|
</div> |
|
|
<button id="closeModal" class="text-gray-400 hover:text-gray-600"> |
|
|
<i class="fas fa-times text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> |
|
|
<div class="md:col-span-1"> |
|
|
<div class="bg-gray-100 rounded-lg p-4 flex flex-col items-center"> |
|
|
<div class="w-24 h-24 rounded-full bg-blue-200 flex items-center justify-center text-3xl font-bold text-blue-700 mb-3"> |
|
|
JD |
|
|
</div> |
|
|
<h4 class="font-bold text-lg">John Doe</h4> |
|
|
<p class="text-gray-500 text-sm">Personal Tax Client</p> |
|
|
<div class="mt-4 w-full"> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span class="text-gray-500">Status</span> |
|
|
<span class="font-medium text-green-600">Active</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span class="text-gray-500">Since</span> |
|
|
<span class="font-medium">Jan 2021</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span class="text-gray-500">Last Contact</span> |
|
|
<span class="font-medium">2 days ago</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:col-span-2"> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label> |
|
|
<input type="text" value="John Doe" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Email</label> |
|
|
<input type="email" value="[email protected]" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Phone</label> |
|
|
<input type="tel" value="(555) 123-4567" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Address</label> |
|
|
<input type="text" value="123 Main St, Anytown, USA" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Tax Type</label> |
|
|
<select class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option>Personal</option> |
|
|
<option>Corporate</option> |
|
|
<option>Estate</option> |
|
|
<option>Non-profit</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Status</label> |
|
|
<select class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option class="text-green-600">Active</option> |
|
|
<option class="text-yellow-600">Pending</option> |
|
|
<option class="text-red-600">Inactive</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-200 pt-6"> |
|
|
<h4 class="font-bold mb-4">Tax Documents</h4> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center justify-between p-3 border rounded-lg"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-file-pdf text-red-500 text-xl mr-3"></i> |
|
|
<div> |
|
|
<p class="font-medium">2022 Tax Return</p> |
|
|
<p class="text-sm text-gray-500">Uploaded: Mar 15, 2023</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-blue-600 hover:text-blue-800"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-gray-600 hover:text-gray-800"> |
|
|
<i class="fas fa-download"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-between p-3 border rounded-lg"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-file-excel text-green-500 text-xl mr-3"></i> |
|
|
<div> |
|
|
<p class="font-medium">Income Statements</p> |
|
|
<p class="text-sm text-gray-500">Uploaded: Feb 28, 2023</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-blue-600 hover:text-blue-800"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-gray-600 hover:text-gray-800"> |
|
|
<i class="fas fa-download"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full py-2 border border-dashed border-gray-300 rounded-lg text-gray-500 hover:text-gray-700 hover:border-gray-400 flex items-center justify-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Add Document |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-end space-x-3"> |
|
|
<button class="px-4 py-2 border rounded-lg hover:bg-gray-100">Cancel</button> |
|
|
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Save Changes</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const clientModal = document.getElementById('clientModal'); |
|
|
const closeModal = document.getElementById('closeModal'); |
|
|
|
|
|
|
|
|
let currentUser = null; |
|
|
const authToken = localStorage.getItem('authToken'); |
|
|
|
|
|
|
|
|
function openClientModal() { |
|
|
clientModal.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function closeClientModal() { |
|
|
clientModal.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
closeModal.addEventListener('click', closeClientModal); |
|
|
|
|
|
|
|
|
if (authToken) { |
|
|
currentUser = JSON.parse(localStorage.getItem('user')); |
|
|
showDashboard(); |
|
|
} else { |
|
|
showLogin(); |
|
|
} |
|
|
|
|
|
|
|
|
const sidebarToggle = document.getElementById('sidebarToggle'); |
|
|
const sidebar = document.querySelector('.sidebar'); |
|
|
|
|
|
sidebarToggle.addEventListener('click', function() { |
|
|
sidebar.classList.toggle('collapsed'); |
|
|
|
|
|
const isCollapsed = sidebar.classList.contains('collapsed'); |
|
|
localStorage.setItem('sidebarCollapsed', isCollapsed); |
|
|
}); |
|
|
|
|
|
|
|
|
if (localStorage.getItem('sidebarCollapsed') === 'true') { |
|
|
sidebar.classList.add('collapsed'); |
|
|
} |
|
|
|
|
|
|
|
|
function showLogin() { |
|
|
document.getElementById('loginPage').classList.remove('hidden'); |
|
|
document.getElementById('dashboardPage').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function showRegister() { |
|
|
document.getElementById('registerPage').classList.remove('hidden'); |
|
|
document.getElementById('loginPage').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function showDashboard() { |
|
|
document.getElementById('dashboardPage').classList.remove('hidden'); |
|
|
document.getElementById('loginPage').classList.add('hidden'); |
|
|
document.getElementById('registerPage').classList.add('hidden'); |
|
|
loadDashboardData(); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('loginForm').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
const email = document.getElementById('loginEmail').value; |
|
|
const password = document.getElementById('loginPassword').value; |
|
|
|
|
|
|
|
|
currentUser = { email, name: "Admin User" }; |
|
|
localStorage.setItem('authToken', 'sample-token'); |
|
|
localStorage.setItem('user', JSON.stringify(currentUser)); |
|
|
showDashboard(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('registerForm').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
const name = document.getElementById('registerName').value; |
|
|
const email = document.getElementById('registerEmail').value; |
|
|
const password = document.getElementById('registerPassword').value; |
|
|
|
|
|
|
|
|
alert('Registration successful! Please login.'); |
|
|
showLogin(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('logoutBtn').addEventListener('click', function() { |
|
|
localStorage.removeItem('authToken'); |
|
|
localStorage.removeItem('user'); |
|
|
currentUser = null; |
|
|
showLogin(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const calendarEl = document.getElementById('calendar'); |
|
|
|
|
|
|
|
|
calendarEl.innerHTML = ` |
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="font-medium">April 2023</span> |
|
|
</div> |
|
|
<div class="grid grid-cols-7 gap-1 text-center text-sm font-medium text-gray-500"> |
|
|
<div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-7 gap-1 mt-1"> |
|
|
${Array(35).fill().map((_, i) => { |
|
|
const day = i - 5 + 1; |
|
|
if (day <= 0 || day > 30) { |
|
|
return `<div class="h-12"></div>`; |
|
|
} |
|
|
|
|
|
let content = ''; |
|
|
if (day === 10) content = '<div class="text-xs bg-blue-100 text-blue-800 rounded p-1 mb-1">Meeting with John</div>'; |
|
|
if (day === 15) content = '<div class="text-xs bg-red-100 text-red-800 rounded p-1 mb-1">Tax Deadline</div>'; |
|
|
if (day === 18) content = '<div class="text-xs bg-green-100 text-green-800 rounded p-1 mb-1">Client Call</div>'; |
|
|
if (day === 22) content = '<div class="text-xs bg-purple-100 text-purple-800 rounded p-1 mb-1">Review Docs</div>'; |
|
|
|
|
|
const todayClass = day === 18 ? 'border-2 border-blue-500' : ''; |
|
|
|
|
|
return ` |
|
|
<div class="h-24 p-1 border ${todayClass}"> |
|
|
<div class="text-right">${day}</div> |
|
|
${content} |
|
|
</div> |
|
|
`; |
|
|
}).join('')} |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
}); |
|
|
|
|
|
|
|
|
function loadDashboardData() { |
|
|
|
|
|
if (currentUser) { |
|
|
const userElements = document.querySelectorAll('.nav-text.font-medium'); |
|
|
userElements.forEach(el => el.textContent = currentUser.name); |
|
|
} |
|
|
|
|
|
|
|
|
const calendarEl = document.getElementById('calendar'); |
|
|
if (calendarEl) { |
|
|
calendarEl.innerHTML = ` |
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="font-medium">April 2023</span> |
|
|
</div> |
|
|
<div class="grid grid-cols-7 gap-1 text-center text-sm font-medium text-gray-500"> |
|
|
<div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-7 gap-1 mt-1"> |
|
|
${Array(35).fill().map((_, i) => { |
|
|
const day = i - 5 + 1; |
|
|
if (day <= 0 || day > 30) { |
|
|
return `<div class="h-12"></div>`; |
|
|
} |
|
|
|
|
|
let content = ''; |
|
|
if (day === 10) content = '<div class="text-xs bg-blue-100 text-blue-800 rounded p-1 mb-1">Meeting with John</div>'; |
|
|
if (day === 15) content = '<div class="text-xs bg-red-100 text-red-800 rounded p-1 mb-1">Tax Deadline</div>'; |
|
|
if (day === 18) content = '<div class="text-xs bg-green-100 text-green-800 rounded p-1 mb-1">Client Call</div>'; |
|
|
if (day === 22) content = '<div class="text-xs bg-purple-100 text-purple-800 rounded p-1 mb-1">Review Docs</div>'; |
|
|
|
|
|
const todayClass = day === 18 ? 'border-2 border-blue-500' : ''; |
|
|
|
|
|
return ` |
|
|
<div class="h-24 p-1 border ${todayClass}"> |
|
|
<div class="text-right">${day}</div> |
|
|
${content} |
|
|
</div> |
|
|
`; |
|
|
}).join('')} |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.progress-bar').forEach(bar => { |
|
|
let value = 0; |
|
|
const target = parseInt(bar.value); |
|
|
const interval = setInterval(() => { |
|
|
if (value >= target) { |
|
|
clearInterval(interval); |
|
|
return; |
|
|
} |
|
|
value++; |
|
|
bar.value = value; |
|
|
}, 20); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=RAMANJAN/crm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
