Spaces:
Running
Running
User Features: View turf details (e.g., location, pricing, amenities), check availability calendar, book slots, user registration/login, and confirmation emails/SMS (optional).
51448ca verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Admin Dashboard - UrbanTurf</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> | |
| <style> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-item:hover { | |
| background-color: rgba(16, 185, 129, 0.1); | |
| } | |
| .sidebar-item.active { | |
| background-color: rgba(16, 185, 129, 0.2); | |
| border-left: 4px solid #10b981; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="flex h-screen"> | |
| <!-- Sidebar --> | |
| <div class="sidebar w-64 bg-white shadow-md"> | |
| <div class="flex items-center justify-center h-16 border-b border-gray-200"> | |
| <i data-feather="grass" class="h-8 w-8 text-green-500"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-800">UrbanTurf</span> | |
| </div> | |
| <nav class="mt-6"> | |
| <div class="px-6 py-3 sidebar-item active"> | |
| <a href="#" class="flex items-center text-gray-700 hover:text-green-500"> | |
| <i data-feather="home" class="h-5 w-5"></i> | |
| <span class="mx-4 font-medium">Dashboard</span> | |
| </a> | |
| </div> | |
| <div class="px-6 py-3 sidebar-item"> | |
| <a href="#" class="flex items-center text-gray-700 hover:text-green-500"> | |
| <i data-feather="calendar" class="h-5 w-5"></i> | |
| <span class="mx-4 font-medium">Bookings</span> | |
| </a> | |
| </div> | |
| <div class="px-6 py-3 sidebar-item"> | |
| <a href="#" class="flex items-center text-gray-700 hover:text-green-500"> | |
| <i data-feather="users" class="h-5 w-5"></i> | |
| <span class="mx-4 font-medium">Customers</span> | |
| </a> | |
| </div> | |
| <div class="px-6 py-3 sidebar-item"> | |
| <a href="#" class="flex items-center text-gray-700 hover:text-green-500"> | |
| <i data-feather="dollar-sign" class="h-5 w-5"></i> | |
| <span class="mx-4 font-medium">Payments</span> | |
| </a> | |
| </div> | |
| <div class="px-6 py-3 sidebar-item"> | |
| <a href="#" class="flex items-center text-gray-700 hover:text-green-500"> | |
| <i data-feather="settings" class="h-5 w-5"></i> | |
| <span class="mx-4 font-medium">Settings</span> | |
| </a> | |
| </div> | |
| <div class="px-6 py-3 sidebar-item"> | |
| <a href="#" class="flex items-center text-gray-700 hover:text-green-500"> | |
| <i data-feather="alert-circle" class="h-5 w-5"></i> | |
| <span class="mx-4 font-medium">Blackout Dates</span> | |
| </a> | |
| </div> | |
| <div class="px-6 py-3 sidebar-item"> | |
| <a href="#" class="flex items-center text-gray-700 hover:text-green-500"> | |
| <i data-feather="bar-chart-2" class="h-5 w-5"></i> | |
| <span class="mx-4 font-medium">Reports</span> | |
| </a> | |
| </div> | |
| </nav> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm z-10"> | |
| <div class="flex items-center justify-between h-16 px-6"> | |
| <div class="flex items-center"> | |
| <button class="text-gray-500 focus:outline-none mr-4 md:hidden"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| <h2 class="text-xl font-semibold text-gray-800">Admin Dashboard</h2> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="p-1 text-gray-500 rounded-full hover:text-gray-600 focus:outline-none mr-4"> | |
| <i data-feather="bell"></i> | |
| </button> | |
| <div class="ml-4 flex items-center"> | |
| <div class="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center text-white"> | |
| <i data-feather="user"></i> | |
| </div> | |
| <span class="ml-2 text-gray-700 font-medium">Admin</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Content --> | |
| <main class="flex-1 overflow-y-auto p-6"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-500 mr-4"> | |
| <i data-feather="calendar" class="h-6 w-6"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Today's Bookings</p> | |
| <p class="text-2xl font-semibold text-gray-700">12</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-500 mr-4"> | |
| <i data-feather="dollar-sign" class="h-6 w-6"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Today's Revenue</p> | |
| <p class="text-2xl font-semibold text-gray-700">₹6,500</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-500 mr-4"> | |
| <i data-feather="users" class="h-6 w-6"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">New Customers</p> | |
| <p class="text-2xl font-semibold text-gray-700">5</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-red-100 text-red-500 mr-4"> | |
| <i data-feather="alert-circle" class="h-6 w-6"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Pending Bookings</p> | |
| <p class="text-2xl font-semibold text-gray-700">3</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Bookings Table --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden mb-6"> | |
| <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="text-lg font-medium text-gray-900">Recent Bookings</h3> | |
| <button class="text-green-500 hover:text-green-600 text-sm font-medium flex items-center"> | |
| <i data-feather="plus" class="h-4 w-4 mr-1"></i> Add New | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date & Time</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</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">Actions</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">#UT-1001</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Rahul Sharma</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 5:00 PM</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 hours</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">₹1000</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">Confirmed</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-green-500 hover:text-green-600 mr-3"> | |
| <i data-feather="check" class="h-4 w-4"></i> | |
| </button> | |
| <button class="text-red-500 hover:text-red-600"> | |
| <i data-feather="x" class="h-4 w-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#UT-1002</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Team Champions</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Tomorrow, 7:00 PM</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3 hours</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">₹1200</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"> | |
| <button class="text-green-500 hover:text-green-600 mr-3"> | |
| <i data-feather="check" class="h-4 w-4"></i> | |
| </button> | |
| <button class="text-red-500 hover:text-red-600"> | |
| <i data-feather="x" class="h-4 w-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#UT-1003</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Ajay Verma</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 6:00 PM</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 hours</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">₹800</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Completed</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-500 hover:text-blue-600"> | |
| <i data-feather="eye" class="h-4 w-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#UT-1004</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Friends Group</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Tomorrow, 4:00 PM</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 hour</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">₹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">Confirmed</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-green-500 hover:text-green-600 mr-3"> | |
| <i data-feather="check" class="h-4 w-4"></i> | |
| </button> | |
| <button class="text-red-500 hover:text-red-600"> | |
| <i data-feather="x" class="h-4 w-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#UT-1005</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Office Team</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 8:00 PM</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 hours</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">₹1000</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Cancelled</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-500 hover:text-blue-600"> | |
| <i data-feather="eye" class="h-4 w-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between"> | |
| <div class="text-sm text-gray-500"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">12</span> results | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> | |
| Previous | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> | |
| Next | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Calendar and Stats --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Calendar --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden lg:col-span-2"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h3 class="text-lg font-medium text-gray-900">Booking Calendar</h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h4 class="text-lg font-medium text-gray-900">November 2023</h4> | |
| <div class="flex space-x-2"> | |
| <button class="p-1 rounded-full bg-gray-100 text-gray-500 hover:bg-gray-200"> | |
| <i data-feather="chevron-left" class="h-4 w-4"></i> | |
| </button> | |
| <button class="p-1 rounded-full bg-gray-100 text-gray-500 hover:bg-gray-200"> | |
| <i data-feather="chevron-right" class="h-4 w-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-7 gap-1 text-center"> | |
| <div class="text-xs font-medium text-gray-500 py-2">Sun</div> | |
| <div class="text-xs font-medium text-gray-500 py-2">Mon</div> | |
| <div class="text-xs font-medium text-gray-500 py-2">Tue</div> | |
| <div class="text-xs font-medium text-gray-500 py-2">Wed</div> | |
| <div class="text-xs font-medium text-gray-500 py-2">Thu</div> | |
| <div class="text-xs font-medium text-gray-500 py-2">Fri</div> | |
| <div class="text-xs font-medium text-gray-500 py-2">Sat</div> | |
| <!-- Calendar days --> | |
| <div class="py-2"></div> | |
| <div class="py-2"></div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">1</span> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">2</span> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">3</span> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">4</span> | |
| </div> | |
| <div class="py-2 border border-gray-200 bg-green-50"> | |
| <span class="text-sm text-gray-700">5</span> | |
| <div class="text-xs text-green-500 mt-1">3 bookings</div> | |
| </div> | |
| <div class="py-2 border border-gray-200 bg-green-50"> | |
| <span class="text-sm text-gray-700">6</span> | |
| <div class="text-xs text-green-500 mt-1">5 bookings</div> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">7</span> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">8</span> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">9</span> | |
| </div> | |
| <div class="py-2 border border-gray-200 bg-yellow-50"> | |
| <span class="text-sm text-gray-700">10</span> | |
| <div class="text-xs text-yellow-500 mt-1">Maintenance</div> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">11</span> | |
| </div> | |
| <div class="py-2 border border-gray-200 bg-green-50"> | |
| <span class="text-sm text-gray-700">12</span> | |
| <div class="text-xs text-green-500 mt-1">6 bookings</div> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">13</span> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">14</span> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">15</span> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">16</span> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">17</span> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">18</span> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">19</span> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">20</span> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">21</span> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">22</span> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">23</span> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">24</span> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">25</span> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">26</span> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">27</span> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">28</span> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">29</span> | |
| </div> | |
| <div class="py-2 border border-gray-200"> | |
| <span class="text-sm text-gray-700">30</span> | |
| </div> | |
| <div class="py-2"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Stats --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h3 class="text-lg font-medium text-gray-900">Quick Stats</h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="mb-6"> | |
| <h4 class="text-sm font-medium text-gray-500 mb-2">This Week</h4> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-2xl font-semibold text-gray-900">24</p> | |
| <p class="text-sm text-gray-500">Bookings</p> | |
| </div> | |
| <div> | |
| <p class="text-2xl font-semibold text-gray-900">₹12,500</p> | |
| <p class="text-sm text-gray-500">Revenue</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="text-sm font-medium text-gray-500 mb-2">This Month</h4> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-2xl font-semibold text-gray-900">86</p> | |
| <p class="text-sm text-gray-500">Bookings</p> | |
| </div> | |
| <div> | |
| <p class="text-2xl font-semibold text-gray-900">₹43,000</p> | |
| <p class="text-sm text-gray-500">Revenue</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-medium text-gray-500 mb-2">Turf Utilization</h4> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mb-2"> | |
| <div class="bg-green-500 h-2.5 rounded-full" style="width: 75%"></div> | |
| </div> | |
| <p class="text-sm text-gray-500">75% of available slots booked this month</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |