roofpro / index.html
theflu's picture
Add 2 files
7ee468e verified
Raw History Blame Contribute Delete
51.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RoofPro - Roofing Management System</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>
.pdf-dropzone {
border: 2px dashed #cbd5e0;
transition: all 0.3s ease;
}
.pdf-dropzone:hover, .pdf-dropzone.dragover {
border-color: #4f46e5;
background-color: #f5f3ff;
}
.roof-visualization {
background-color: #f8fafc;
border: 1px solid #e2e8f0;
}
.estimate-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.nav-item.active {
border-bottom: 3px solid #4f46e5;
color: #4f46e5;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.3s ease;
}
.material-option.selected {
border-color: #4f46e5;
background-color: #eef2ff;
}
.project-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.status-badge {
padding: 0.25rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
}
.progress-bar {
height: 0.5rem;
border-radius: 0.25rem;
background-color: #e5e7eb;
}
.progress-fill {
height: 100%;
border-radius: 0.25rem;
transition: width 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.gantt-bar {
height: 20px;
border-radius: 4px;
background-color: #4f46e5;
}
.chart-container {
height: 300px;
}
.notification-dot {
position: absolute;
top: -2px;
right: -2px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ef4444;
}
</style>
</head>
<body class="bg-gray-50">
<header class="bg-white shadow-sm">
<div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-roof text-indigo-600 text-3xl mr-3"></i>
<h1 class="text-2xl font-bold text-gray-800">RoofPro</h1>
<span class="ml-2 px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded-full">AI-Powered</span>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<i class="fas fa-bell text-gray-500 text-xl cursor-pointer hover:text-indigo-600"></i>
<span class="notification-dot"></span>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="h-8 w-8 rounded-full">
<span class="ml-2 text-sm font-medium text-gray-700">John D.</span>
</div>
</div>
</div>
</header>
<div class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
<nav class="flex space-x-8 border-b border-gray-200">
<div class="nav-item pb-3 px-1 cursor-pointer font-medium text-sm text-gray-500 hover:text-gray-700" data-tab="dashboard">
<i class="fas fa-tachometer-alt mr-2"></i>Dashboard
</div>
<div class="nav-item pb-3 px-1 cursor-pointer font-medium text-sm text-gray-500 hover:text-gray-700" data-tab="estimates">
<i class="fas fa-file-invoice-dollar mr-2"></i>Estimates
</div>
<div class="nav-item active pb-3 px-1 cursor-pointer font-medium text-sm" data-tab="projects">
<i class="fas fa-project-diagram mr-2"></i>Projects
</div>
<div class="nav-item pb-3 px-1 cursor-pointer font-medium text-sm text-gray-500 hover:text-gray-700" data-tab="analytics">
<i class="fas fa-chart-line mr-2"></i>Analytics
</div>
<div class="nav-item pb-3 px-1 cursor-pointer font-medium text-sm text-gray-500 hover:text-gray-700" data-tab="settings">
<i class="fas fa-cog mr-2"></i>Settings
</div>
</nav>
<!-- Dashboard Tab -->
<div class="tab-content mt-8" id="dashboard">
<div class="flex justify-between items-center mb-8">
<h2 class="text-2xl font-bold text-gray-800">Dashboard Overview</h2>
<div class="flex items-center space-x-3">
<div class="relative">
<select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>This Week</option>
<option>Last Week</option>
<option>This Month</option>
<option>Last Month</option>
<option>This Quarter</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<i class="fas fa-chevron-down text-gray-400"></i>
</div>
</div>
<button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition flex items-center">
<i class="fas fa-download mr-2"></i> Export
</button>
</div>
</div>
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
<div class="bg-white p-4 rounded-lg shadow">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">Total Revenue</p>
<p class="text-2xl font-bold text-indigo-600">$284,750</p>
<p class="text-xs text-green-500 mt-1"><i class="fas fa-arrow-up mr-1"></i> 12.5% from last month</p>
</div>
<div class="p-2 rounded-full bg-indigo-100 text-indigo-600">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">Active Projects</p>
<p class="text-2xl font-bold text-green-600">12</p>
<p class="text-xs text-green-500 mt-1"><i class="fas fa-arrow-up mr-1"></i> 3 new this week</p>
</div>
<div class="p-2 rounded-full bg-green-100 text-green-600">
<i class="fas fa-hard-hat"></i>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">Pending Estimates</p>
<p class="text-2xl font-bold text-blue-600">7</p>
<p class="text-xs text-red-500 mt-1"><i class="fas fa-arrow-down mr-1"></i> 2 expired</p>
</div>
<div class="p-2 rounded-full bg-blue-100 text-blue-600">
<i class="fas fa-file-invoice"></i>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">Team Productivity</p>
<p class="text-2xl font-bold text-yellow-600">84%</p>
<p class="text-xs text-green-500 mt-1"><i class="fas fa-arrow-up mr-1"></i> 6% improvement</p>
</div>
<div class="p-2 rounded-full bg-yellow-100 text-yellow-600">
<i class="fas fa-chart-line"></i>
</div>
</div>
</div>
</div>
<!-- Charts Row -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div class="bg-white p-6 rounded-lg shadow">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium text-gray-800">Revenue Overview</h3>
<div class="flex space-x-2">
<button class="px-3 py-1 text-xs bg-indigo-100 text-indigo-800 rounded-md">Monthly</button>
<button class="px-3 py-1 text-xs bg-white text-gray-600 border border-gray-300 rounded-md">Quarterly</button>
</div>
</div>
<div class="chart-container">
<canvas id="revenueChart"></canvas>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium text-gray-800">Project Status</h3>
<div class="flex space-x-2">
<button class="px-3 py-1 text-xs bg-indigo-100 text-indigo-800 rounded-md">Current</button>
<button class="px-3 py-1 text-xs bg-white text-gray-600 border border-gray-300 rounded-md">All Time</button>
</div>
</div>
<div class="chart-container">
<canvas id="projectStatusChart"></canvas>
</div>
</div>
</div>
<!-- Recent Activity & Upcoming Projects -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="bg-white p-6 rounded-lg shadow lg:col-span-2">
<h3 class="text-lg font-medium text-gray-800 mb-4">Recent Activity</h3>
<div class="space-y-4">
<div class="flex items-start">
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">Mike Johnson <span class="text-gray-500">completed</span> Garcia Complex inspection</p>
<p class="text-xs text-gray-500 mt-1">2 hours ago</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">Sarah Williams <span class="text-gray-500">uploaded</span> Anderson Villa blueprints</p>
<p class="text-xs text-gray-500 mt-1">5 hours ago</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">John Doe <span class="text-gray-500">created</span> new estimate for Brown Residence</p>
<p class="text-xs text-gray-500 mt-1">Yesterday</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">Robert Chen <span class="text-gray-500">approved</span> materials order for Johnson Residence</p>
<p class="text-xs text-gray-500 mt-1">Yesterday</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/33.jpg" alt="User">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">Lisa Miller <span class="text-gray-500">scheduled</span> Williams Repair for next week</p>
<p class="text-xs text-gray-500 mt-1">2 days ago</p>
</div>
</div>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow">
<h3 class="text-lg font-medium text-gray-800 mb-4">Upcoming Projects</h3>
<div class="space-y-4">
<div class="border-l-4 border-indigo-500 pl-4 py-1">
<p class="text-sm font-medium text-gray-900">Brown Residence</p>
<p class="text-xs text-gray-500">Starts Jun 20 • $38,500</p>
</div>
<div class="border-l-4 border-green-500 pl-4 py-1">
<p class="text-sm font-medium text-gray-900">Taylor Office Park</p>
<p class="text-xs text-gray-500">Starts Jun 22 • $125,000</p>
</div>
<div class="border-l-4 border-blue-500 pl-4 py-1">
<p class="text-sm font-medium text-gray-900">Martinez Villa</p>
<p class="text-xs text-gray-500">Starts Jun 25 • $275,000</p>
</div>
<div class="border-l-4 border-yellow-500 pl-4 py-1">
<p class="text-sm font-medium text-gray-900">Wilson Repair</p>
<p class="text-xs text-gray-500">Starts Jun 28 • $12,750</p>
</div>
<div class="border-l-4 border-purple-500 pl-4 py-1">
<p class="text-sm font-medium text-gray-900">Davis Complex</p>
<p class="text-xs text-gray-500">Starts Jul 5 • $210,000</p>
</div>
</div>
<div class="mt-6">
<h4 class="text-sm font-medium text-gray-800 mb-2">Quick Actions</h4>
<div class="grid grid-cols-2 gap-2">
<button class="px-3 py-2 bg-indigo-50 text-indigo-700 text-xs font-medium rounded-md hover:bg-indigo-100">
<i class="fas fa-plus mr-1"></i> New Project
</button>
<button class="px-3 py-2 bg-green-50 text-green-700 text-xs font-medium rounded-md hover:bg-green-100">
<i class="fas fa-file-invoice mr-1"></i> Create Estimate
</button>
<button class="px-3 py-2 bg-blue-50 text-blue-700 text-xs font-medium rounded-md hover:bg-blue-100">
<i class="fas fa-users mr-1"></i> Assign Team
</button>
<button class="px-3 py-2 bg-purple-50 text-purple-700 text-xs font-medium rounded-md hover:bg-purple-100">
<i class="fas fa-truck mr-1"></i> Order Materials
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Estimates Tab -->
<div class="tab-content mt-8" id="estimates">
<div class="flex justify-between items-center mb-8">
<h2 class="text-2xl font-bold text-gray-800">Estimates</h2>
<div class="flex space-x-3">
<div class="relative">
<select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>All Estimates</option>
<option>Pending</option>
<option>Approved</option>
<option>Rejected</option>
<option>Expired</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<i class="fas fa-chevron-down text-gray-400"></i>
</div>
</div>
<button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition flex items-center">
<i class="fas fa-plus mr-2"></i> New Estimate
</button>
</div>
</div>
<!-- Estimate Stats -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
<div class="bg-white p-4 rounded-lg shadow">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">Total Estimates</p>
<p class="text-2xl font-bold text-indigo-600">24</p>
</div>
<div class="p-2 rounded-full bg-indigo-100 text-indigo-600">
<i class="fas fa-file-invoice-dollar"></i>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">Pending</p>
<p class="text-2xl font-bold text-yellow-600">7</p>
</div>
<div class="p-2 rounded-full bg-yellow-100 text-yellow-600">
<i class="fas fa-clock"></i>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">Approved</p>
<p class="text-2xl font-bold text-green-600">14</p>
</div>
<div class="p-2 rounded-full bg-green-100 text-green-600">
<i class="fas fa-check-circle"></i>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">Rejected</p>
<p class="text-2xl font-bold text-red-600">3</p>
</div>
<div class="p-2 rounded-full bg-red-100 text-red-600">
<i class="fas fa-times-circle"></i>
</div>
</div>
</div>
</div>
<!-- Estimate Filters -->
<div class="bg-white p-4 rounded-lg shadow mb-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Project Type</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>All Types</option>
<option>Residential</option>
<option>Commercial</option>
<option>Repair</option>
<option>Replacement</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Material</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>All Materials</option>
<option>Asphalt Shingles</option>
<option>Metal Roofing</option>
<option>Tile Roofing</option>
<option>Wood Shakes</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Timeframe</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>All Time</option>
<option>Last 7 Days</option>
<option>Last 30 Days</option>
<option>Last Quarter</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Amount Range</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>All Amounts</option>
<option>Under $50k</option>
<option>$50k - $100k</option>
<option>$100k - $250k</option>
<option>Over $250k</option>
</select>
</div>
</div>
</div>
<!-- Estimates Table -->
<div class="bg-white shadow rounded-lg overflow-hidden">
<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">Estimate #</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Project</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</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">EST-2023-056</td>
<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="https://randomuser.me/api/portraits/women/44.jpg" 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">Residential</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Complete roof replacement</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$24,239</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">Approved</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 15, 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></a>
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-edit"></i></a>
<a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></a>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">EST-2023-057</td>
<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="https://randomuser.me/api/portraits/men/75.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Michael Smith</div>
<div class="text-sm text-gray-500">Commercial</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Warehouse metal roof</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$42,360</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">Approved</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 18, 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></a>
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-edit"></i></a>
<a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></a>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">EST-2023-058</td>
<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="https://randomuser.me/api/portraits/women/33.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Lisa Williams</div>
<div class="text-sm text-gray-500">Residential</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Storm damage repair</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$8,450</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">Pending</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 22, 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></a>
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-edit"></i></a>
<a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></a>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">EST-2023-059</td>
<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="https://randomuser.me/api/portraits/men/68.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Robert Anderson</div>
<div class="text-sm text-gray-500">Residential</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Luxury tile roof</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$32,500</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">Approved</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 25, 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></a>
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-edit"></i></a>
<a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></a>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">EST-2023-060</td>
<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="https://randomuser.me/api/portraits/women/68.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Emily Thompson</div>
<div class="text-sm text-gray-500">Commercial</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Flat roof membrane</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$28,750</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">Approved</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 28, 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></a>
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-edit"></i></a>
<a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></a>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">EST-2023-061</td>
<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="https://randomuser.me/api/portraits/men/41.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Carlos Garcia</div>
<div class="text-sm text-gray-500">Commercial</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Multi-building roofing</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$185,000</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">Pending</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 1, 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></a>
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-edit"></i></a>
<a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
<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">6</span> of <span class="font-medium">24</span> estimates
</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 class="fas fa-chevron-left"></i>
</a>
<a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 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 class="fas fa-chevron-right"></i>
</a>
</nav>
</div>
</div>
</div>
</div>
</div>
<!-- Projects Tab -->
<div class="tab-content active mt-8" id="projects">
<div class="flex justify-between items-center mb-8">
<h2 class="text-2xl font-bold text-gray-800">Current Projects</h2>
<div class="flex space-x-3">
<div class="relative">
<select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>All Projects</option>
<option>Active</option>
<option>Completed</option>
<option>On Hold</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<i class="fas fa-chevron-down text-gray-400"></i>
</div>
</div>
<button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition flex items-center">
<i class="fas fa-plus mr-2"></i> New Project
</button>
</div>
</div>
<!-- Project Stats -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
<div class="bg-white p-4 rounded-lg shadow">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">Total Projects</p>
<p class="text-2xl font-bold text-indigo-600">18</p>
</div>
<div class="p-2 rounded-full bg-indigo-100 text-indigo-600">
<i class="fas fa-project-diagram"></i>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">Active</p>
<p class="text-2xl font-bold text-green-600">12</p>
</div>
<div class="p-2 rounded-full bg-green-100 text-green-600">
<i class="fas fa-hard-hat"></i>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">Completed</p>
<p class="text-2xl font-bold text-blue-600">4</p>
</div>
<div class="p-2 rounded-full bg-blue-100 text-blue-600">
<i class="fas fa-check-circle"></i>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">On Hold</p>
<p class="text-2xl font-bold text-yellow-600">2</p>
</div>
<div class="p-2 rounded-full bg-yellow-100 text-yellow-600">
<i class="fas fa-pause-circle"></i>
</div>
</div>
</div>
</div>
<!-- Project Filters -->
<div class="bg-white p-4 rounded-lg shadow mb-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Project Type</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>All Types</option>
<option>Residential</option>
<option>Commercial</option>
<option>Repair</option>
<option>Replacement</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Material</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>All Materials</option>
<option>Asphalt Shingles</option>
<option>Metal Roofing</option>
<option>Tile Roofing</option>
<option>Wood Shakes</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Timeline</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>All Timelines</option>
<option>Upcoming</option>
<option>In Progress</option>
<option>Finalizing</option>
<option>Completed</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Budget Range</label>
<select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>All Budgets</option>
<option>Under $50k</option>
<option>$50k - $100k</option>
<option>$100k - $250k</option>
<option>Over $250k</option>
</select>
</div>
</div>
</div>
<!-- Project Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Project Card 1 -->
<div class="project-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
<div class="p-5">
<div class="flex justify-between items-start mb-3">
<div>
<span class="status-badge bg-green-100 text-green-800">In Progress</span>
</div>
<div class="text-gray-500 text-sm">
<i class="fas fa-calendar-alt mr-1"></i> Due Jun 15
</div>
</div>
<h3 class="text-lg font-bold text-gray-800 mb-2">Johnson Residence</h3>
<p class="text-gray-600 text-sm mb-4">Complete roof replacement with architectural shingles</p>
<div class="flex items-center mb-4">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">Sarah Johnson</p>
<p class="text-xs text-gray-500">Residential</p>
</div>
</div>
<div class="mb-4">
<div class="flex justify-between text-sm text-gray-600 mb-1">
<span>Progress</span>
<span>65%</span>
</div>
<div class="progress-bar">
<div class="progress-fill bg-green-500" style="width: 65%"></div>
</div>
</div>
<div class="flex justify-between text-sm">
<div>
<p class="text-gray-500">Budget</p>
<p class="font-medium">$240,239</p>
</div>
<div>
<p class="text-gray-500">Materials</p>
<p class="font-medium">Asphalt</p>
</div>
<div>
<p class="text-gray-500">Team</p>
<div class="flex -space-x-2">
<img class="h-6 w-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team member">
<img class="h-6 w-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/22.jpg" alt="Team member">
<img class="h-6 w-6 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Team member">
</div>
</极速赛车开奖直播官网
</html>