Untitled
unknown
plain_text
10 months ago
34 kB
20
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard - Home Food Platform</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f8fafc;
color: #334155;
}
.dashboard {
display: flex;
min-height: 100vh;
}
.sidebar {
width: 280px;
background: #1e293b;
color: white;
padding: 0;
position: fixed;
height: 100vh;
overflow-y: auto;
}
.logo {
padding: 24px;
border-bottom: 1px solid #334155;
font-size: 20px;
font-weight: bold;
background: #0f172a;
}
.nav-menu {
padding: 16px 0;
}
.nav-item {
display: flex;
align-items: center;
padding: 12px 24px;
color: #cbd5e1;
text-decoration: none;
transition: all 0.2s;
border-left: 3px solid transparent;
}
.nav-item:hover, .nav-item.active {
background: #334155;
color: white;
border-left-color: #3b82f6;
}
.nav-item .icon {
width: 20px;
margin-right: 12px;
font-size: 18px;
}
.main-content {
flex: 1;
margin-left: 280px;
padding: 24px;
}
.header {
display: flex;
justify-content: between;
align-items: center;
margin-bottom: 32px;
background: white;
padding: 20px 24px;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.page-title {
font-size: 28px;
font-weight: bold;
color: #1e293b;
}
.section-container {
display: none;
animation: fadeIn 0.3s ease-in;
}
.section-container.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 32px;
}
.metric-card {
background: white;
padding: 24px;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
border-left: 4px solid #3b82f6;
}
.metric-value {
font-size: 32px;
font-weight: bold;
color: #1e293b;
margin-bottom: 8px;
}
.metric-label {
color: #64748b;
font-size: 14px;
margin-bottom: 4px;
}
.metric-change {
font-size: 12px;
color: #10b981;
}
.content-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 24px;
}
.card {
background: white;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
overflow: hidden;
}
.card-header {
padding: 20px 24px;
border-bottom: 1px solid #e2e8f0;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-title {
font-size: 18px;
font-weight: 600;
color: #1e293b;
}
.card-content {
padding: 24px;
}
.btn {
padding: 8px 16px;
border-radius: 6px;
border: none;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
display: inline-block;
}
.btn-primary {
background: #3b82f6;
color: white;
}
.btn-primary:hover {
background: #2563eb;
}
.btn-secondary {
background: #e2e8f0;
color: #475569;
}
.btn-secondary:hover {
background: #cbd5e1;
}
.btn-danger {
background: #ef4444;
color: white;
}
.btn-success {
background: #10b981;
color: white;
}
.filter-bar {
display: flex;
gap: 12px;
margin-bottom: 24px;
padding: 16px;
background: white;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.filter-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.filter-item label {
font-size: 12px;
color: #64748b;
font-weight: 500;
}
.filter-item select,
.filter-item input {
padding: 6px 12px;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 14px;
}
.data-table {
width: 100%;
border-collapse: collapse;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.data-table th,
.data-table td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid #e2e8f0;
}
.data-table th {
background: #f8fafc;
font-weight: 600;
color: #374151;
}
.data-table tr:hover {
background: #f8fafc;
}
.status-badge {
padding: 4px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.status-active {
background: #dcfce7;
color: #166534;
}
.status-pending {
background: #fef3c7;
color: #92400e;
}
.status-inactive {
background: #fee2e2;
color: #991b1b;
}
.action-buttons {
display: flex;
gap: 8px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: #374151;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
}
.tabs {
display: flex;
border-bottom: 1px solid #e2e8f0;
margin-bottom: 24px;
}
.tab {
padding: 12px 24px;
border: none;
background: none;
cursor: pointer;
color: #64748b;
border-bottom: 2px solid transparent;
transition: all 0.2s;
}
.tab.active {
color: #3b82f6;
border-bottom-color: #3b82f6;
}
.reviews-summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.review-stat {
text-align: center;
padding: 16px;
background: #f8fafc;
border-radius: 8px;
}
.review-stat .number {
font-size: 24px;
font-weight: bold;
color: #1e293b;
}
.review-stat .label {
font-size: 12px;
color: #64748b;
}
</style>
</head>
<body>
<div class="dashboard">
<!-- Sidebar Navigation -->
<div class="sidebar">
<div class="logo">
🍳 HomeFood Admin
</div>
<nav class="nav-menu">
<a href="#" class="nav-item active" data-section="dashboard">
<span class="icon">📊</span>
Dashboard
</a>
<a href="#" class="nav-item" data-section="catalogue">
<span class="icon">📋</span>
Catalogue
</a>
<a href="#" class="nav-item" data-section="menu">
<span class="icon">🍽️</span>
Daily Menu
</a>
<a href="#" class="nav-item" data-section="orders">
<span class="icon">📦</span>
Orders
</a>
<a href="#" class="nav-item" data-section="profiles">
<span class="icon">👥</span>
Profiles
</a>
<a href="#" class="nav-item" data-section="settings">
<span class="icon">⚙️</span>
Settings
</a>
</nav>
</div>
<!-- Main Content Area -->
<div class="main-content">
<div class="header">
<h1 class="page-title" id="pageTitle">Dashboard Overview</h1>
</div>
<!-- Dashboard Section -->
<div class="section-container active" id="dashboard">
<div class="metrics-grid">
<div class="metric-card">
<div class="metric-label">Total Revenue</div>
<div class="metric-value">$24,580</div>
<div class="metric-change">+12% from last month</div>
</div>
<div class="metric-card">
<div class="metric-label">Active Orders</div>
<div class="metric-value">156</div>
<div class="metric-change">+5 from yesterday</div>
</div>
<div class="metric-card">
<div class="metric-label">Total Users</div>
<div class="metric-value">2,847</div>
<div class="metric-change">+18% growth</div>
</div>
<div class="metric-card">
<div class="metric-label">Active Kitchens</div>
<div class="metric-value">89</div>
<div class="metric-change">+3 this week</div>
</div>
</div>
<div class="content-grid">
<div class="card">
<div class="card-header">
<h3 class="card-title">Recent Orders</h3>
<a href="#" class="btn btn-secondary">View All</a>
</div>
<div class="card-content">
<table class="data-table">
<thead>
<tr>
<th>Order ID</th>
<th>Customer</th>
<th>Kitchen</th>
<th>Status</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>#ORD-001</td>
<td>John Doe</td>
<td>Maria's Kitchen</td>
<td><span class="status-badge status-active">Delivered</span></td>
<td>$24.50</td>
</tr>
<tr>
<td>#ORD-002</td>
<td>Sarah Wilson</td>
<td>Chef Ahmed</td>
<td><span class="status-badge status-pending">In Progress</span></td>
<td>$18.75</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Top Performing Meals</h3>
</div>
<div class="card-content">
<div style="margin-bottom: 16px;">
<strong>Chicken Biryani</strong>
<div style="color: #64748b; font-size: 14px;">145 orders this week</div>
</div>
<div style="margin-bottom: 16px;">
<strong>Homemade Pasta</strong>
<div style="color: #64748b; font-size: 14px;">132 orders this week</div>
</div>
<div style="margin-bottom: 16px;">
<strong>Traditional Souvlaki</strong>
<div style="color: #64748b; font-size: 14px;">98 orders this week</div>
</div>
</div>
</div>
</div>
</div>
<!-- Catalogue Section -->
<div class="section-container" id="catalogue">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
<div class="tabs">
<button class="tab active">All Meals</button>
<button class="tab">Categories</button>
<button class="tab">Pricing</button>
<button class="tab">Analytics</button>
</div>
<a href="#" class="btn btn-primary">+ Add New Meal</a>
</div>
<div class="filter-bar">
<div class="filter-item">
<label>Category</label>
<select>
<option>All Categories</option>
<option>Main Course</option>
<option>Appetizers</option>
<option>Desserts</option>
</select>
</div>
<div class="filter-item">
<label>Cuisine Type</label>
<select>
<option>All Cuisines</option>
<option>Mediterranean</option>
<option>Asian</option>
<option>Italian</option>
</select>
</div>
<div class="filter-item">
<label>Price Range</label>
<select>
<option>All Prices</option>
<option>$10-20</option>
<option>$20-30</option>
<option>$30+</option>
</select>
</div>
<div class="filter-item">
<label>Search</label>
<input type="text" placeholder="Search meals...">
</div>
</div>
<div class="card">
<div class="card-content">
<table class="data-table">
<thead>
<tr>
<th>Meal Name</th>
<th>Category</th>
<th>Base Price</th>
<th>Commission</th>
<th>Orders (30d)</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="display: flex; align-items: center; gap: 12px;">
<div style="width: 40px; height: 40px; background: #f3f4f6; border-radius: 6px;"></div>
<div>
<strong>Chicken Biryani</strong>
<div style="font-size: 12px; color: #64748b;">Traditional spiced rice dish</div>
</div>
</div>
</td>
<td>Main Course</td>
<td>$18.00</td>
<td>25%</td>
<td>145</td>
<td><span class="status-badge status-active">Active</span></td>
<td>
<div class="action-buttons">
<button class="btn btn-secondary">Edit</button>
<button class="btn btn-secondary">Stats</button>
<button class="btn btn-danger">Archive</button>
</div>
</td>
</tr>
<tr>
<td>
<div style="display: flex; align-items: center; gap: 12px;">
<div style="width: 40px; height: 40px; background: #f3f4f6; border-radius: 6px;"></div>
<div>
<strong>Homemade Pasta</strong>
<div style="font-size: 12px; color: #64748b;">Fresh pasta with tomato sauce</div>
</div>
</div>
</td>
<td>Main Course</td>
<td>$15.50</td>
<td>20%</td>
<td>132</td>
<td><span class="status-badge status-active">Active</span></td>
<td>
<div class="action-buttons">
<button class="btn btn-secondary">Edit</button>
<button class="btn btn-secondary">Stats</button>
<button class="btn btn-danger">Archive</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Daily Menu Section -->
<div class="section-container" id="menu">
<div style="margin-bottom: 24px;">
<h3 style="margin-bottom: 16px;">Today's Available Meals - September 15, 2025</h3>
</div>
<div class="filter-bar">
<div class="filter-item">
<label>Neighborhood</label>
<select>
<option>All Areas</option>
<option>Downtown</option>
<option>Westside</option>
<option>North End</option>
</select>
</div>
<div class="filter-item">
<label>Availability</label>
<select>
<option>All</option>
<option>Available Now</option>
<option>Limited Stock</option>
<option>Sold Out</option>
</select>
</div>
<div class="filter-item">
<label>Kitchen Rating</label>
<select>
<option>All Ratings</option>
<option>4.5+ Stars</option>
<option>4.0+ Stars</option>
</select>
</div>
<div class="filter-item">
<label>Prep Time</label>
<select>
<option>All Times</option>
<option>30 min or less</option>
<option>30-60 min</option>
</select>
</div>
</div>
<div class="card">
<div class="card-content">
<table class="data-table">
<thead>
<tr>
<th>Kitchen & Meal</th>
<th>Location</th>
<th>Available Portions</th>
<th>Price</th>
<th>Rating</th>
<th>Prep Time</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<strong>Maria's Kitchen</strong>
<div style="font-size: 14px; color: #64748b;">Chicken Biryani</div>
</div>
</td>
<td>Downtown</td>
<td>12 portions</td>
<td>$22.50</td>
<td>⭐ 4.8 (89 reviews)</td>
<td>45 min</td>
<td><span class="status-badge status-active">Available</span></td>
<td>
<div class="action-buttons">
<button class="btn btn-secondary">View</button>
<button class="btn btn-secondary">Contact</button>
</div>
</td>
</tr>
<tr>
<td>
<div>
<strong>Chef Ahmed</strong>
<div style="font-size: 14px; color: #64748b;">Mediterranean Platter</div>
</div>
</td>
<td>Westside</td>
<td>3 portions</td>
<td>$19.75</td>
<td>⭐ 4.6 (45 reviews)</td>
<td>30 min</td>
<td><span class="status-badge status-pending">Limited</span></td>
<td>
<div class="action-buttons">
<button class="btn btn-secondary">View</button>
<button class="btn btn-secondary">Contact</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Orders Section -->
<div class="section-container" id="orders">
<div class="tabs">
<button class="tab active">All Orders</button>
<button class="tab">Pending</button>
<button class="tab">In Progress</button>
<button class="tab">Completed</button>
<button class="tab">Issues</button>
</div>
<div class="filter-bar">
<div class="filter-item">
<label>Date Range</label>
<input type="date">
</div>
<div class="filter-item">
<label>Status</label>
<select>
<option>All Status</option>
<option>Pending Payment</option>
<option>Confirmed</option>
<option>Preparing</option>
<option>Ready for Pickup</option>
<option>Out for Delivery</option>
<option>Delivered</option>
<option>Cancelled</option>
</select>
</div>
<div class="filter-item">
<label>Delivery Partner</label>
<select>
<option>All Partners</option>
<option>Available</option>
<option>Assigned</option>
</select>
</div>
<div class="filter-item">
<label>Search</label>
<input type="text" placeholder="Order ID, Customer...">
</div>
</div>
<div class="card">
<div class="card-content">
<table class="data-table">
<thead>
<tr>
<th>Order ID</th>
<th>Customer</th>
<th>Kitchen</th>
<th>Delivery Partner</th>
<th>Amount</th>
<th>Status</th>
<th>Created</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>#ORD-1234</td>
<td>John Doe</td>
<td>Maria's Kitchen</td>
<td>Alex Driver</td>
<td>$24.50</td>
<td><span class="status-badge status-pending">Out for Delivery</span></td>
<td>2 hours ago</td>
<td>
<div class="action-buttons">
<button class="btn btn-secondary">View</button>
<button class="btn btn-secondary">Track</button>
<button class="btn btn-secondary">Contact</button>
</div>
</td>
</tr>
<tr>
<td>#ORD-1235</td>
<td>Sarah Wilson</td>
<td>Chef Ahmed</td>
<td>Unassigned</td>
<td>$18.75</td>
<td><span class="status-badge status-pending">Ready for Pickup</span></td>
<td>1 hour ago</td>
<td>
<div class="action-buttons">
<button class="btn btn-primary">Assign Driver</button>
<button class="btn btn-secondary">View</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Profiles Section -->
<div class="section-container" id="profiles">
<div class="tabs">
<button class="tab active">All Users</button>
<button class="tab">Kitchens</button>
<button class="tab">Customers</button>
<button class="tab">Delivery Partners</button>
<button class="tab">Admins</button>
</div>
<div class="content-grid">
<div class="card">
<div class="card-header">
<h3 class="card-title">Kitchen Profile - Maria's Kitchen</h3>
<div>
<button class="btn btn-secondary">Edit</button>
<button class="btn btn-success">Verify</button>
</div>
</div>
<div class="card-content">
<div class="form-group">
<label>Kitchen Name</label>
<input type="text" value="Maria's Kitchen" readonly>
</div>
<div class="form-group">
<label>Owner</label>
<input type="text" value="Maria Rodriguez" readonly>
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" value="+1 (555) 123-4567" readonly>
</div>
<div class="form-group">
<label>Address</label>
<input type="text" value="123 Main St, Downtown" readonly>
</div>
<div class="form-group">
<label>Verification Status</label>
<span class="status-badge status-active">Verified</span>
</div>
<div class="reviews-summary">
<div class="review-stat">
<div class="number">4.8</div>
<div class="label">Average Rating</div>
</div>
<div class="review-stat">
<div class="number">89</div>
<div class="label">Total Reviews</div>
</div>
<div class="review-stat">
<div class="number">234</div>
<div class="label">Orders Completed</div>
</div>
</div>
</div>
</div>
<div>
<div class="card" style="margin-bottom: 20px;">
<div class="card-header">
<h3 class="card-title">Performance Metrics</h3>
</div>
<div class="card-content">
<div style="margin-bottom: 16px;">
<strong>Monthly Revenue:</strong> $2,456
</div>
<div style="margin-bottom: 16px;">
<strong>Average Prep Time:</strong> 42 minutes
</div>
<div style="margin-bottom: 16px;">
<strong>Order Acceptance Rate:</strong> 94%
</div>
<div>
<strong>Customer Satisfaction:</strong> 4.8/5
</div>
</div>
</div>Editor is loading...
Leave a Comment