Spaces:
Running
Running
File size: 8,199 Bytes
0591225 923bfa5 0591225 923bfa5 0591225 923bfa5 0591225 923bfa5 0591225 923bfa5 0591225 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reports | InvoiceGenius AI</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="components/navbar.js"></script>
<script src="components/sidebar.js"></script>
<script src="components/footer.js"></script>
</head>
<body class="bg-gray-50 min-h-screen">
<custom-navbar></custom-navbar>
<div class="flex">
<custom-sidebar></custom-sidebar>
<main class="flex-1 p-8">
<div class="max-w-6xl mx-auto">
<div class="flex justify-between items-center mb-8">
<h1 class="text-3xl font-bold text-gray-800">Reports</h1>
<div class="flex space-x-3">
<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center">
<i data-feather="calendar" class="mr-2"></i> Date Range
</button>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
<i data-feather="download" class="mr-2"></i> Export
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<!-- Report Cards -->
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-medium">Revenue Overview</h3>
<button class="text-gray-500 hover:text-gray-700">
<i data-feather="more-vertical"></i>
</button>
</div>
<div class="h-64 relative">
<canvas id="revenueChart" class="absolute inset-0 w-full h-full"></canvas>
</div>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-medium">Expense Breakdown</h3>
<button class="text-gray-500 hover:text-gray-700">
<i data-feather="more-vertical"></i>
</button>
</div>
<div class="h-64 relative">
<canvas id="expenseChart" class="absolute inset-0 w-full h-full"></canvas>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-8">
<div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
<h2 class="text-lg font-semibold">Client Payment History</h2>
<select class="text-sm border border-gray-300 rounded-md px-3 py-1 focus:outline-none focus:ring-2 focus:ring-indigo-500">
<option>Last 30 Days</option>
<option>Last 90 Days</option>
<option>This Year</option>
<option>All Time</option>
</select>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Invoices</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Paid</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pending</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Overdue</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Acme Corp</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$15,250.00</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$2,500.00</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$0.00</td>
</tr>
<!-- More client rows would go here -->
</tbody>
</table>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
<h2 class="text-lg font-semibold">Vendor Spending</h2>
<select class="text-sm border border-gray-300 rounded-md px-3 py-1 focus:outline-none focus:ring-2 focus:ring-indigo-500">
<option>Last 30 Days</option>
<option>Last 90 Days</option>
<option>This Year</option>
<option>All Time</option>
</select>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Vendor</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">POs</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Spent</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Order</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">SupplyCo Inc</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$6,850.00</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Oct 15, 2023</td>
</tr>
<!-- More vendor rows would go here -->
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
<custom-footer></custom-footer>
<script>feather.replace();</script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="script.js"></script>
</body>
</html> |