Download index.html from theflu/roofpro: direct link, hf CLI and curl.
- Browser
- Download file 51.3 kB
-
https://huggingface.co/spaces/theflu/roofpro/resolve/main/index.html
- Command line
-
hf download hf://spaces/theflu/roofpro/index.html
-
curl -L -o index.html https://huggingface.co/spaces/theflu/roofpro/resolve/main/index.html
51.3 kB
| <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> |