1925 lines
83 KiB
HTML
1925 lines
83 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Multi-Page Layout Simulation (Charts Removed)</title>
|
|
<!-- Chart.js library has been removed -->
|
|
|
|
<style>
|
|
/* Define a custom color palette based on the image */
|
|
:root {
|
|
--primary-color: #6c63ff; /* Purple/Blue accent */
|
|
--secondary-bg: #f5f5f9; /* Light page background */
|
|
--white: #ffffff;
|
|
--text-dark: #333333;
|
|
--text-medium: #555555;
|
|
--text-light: #999999;
|
|
--border-color: #eeeeee;
|
|
--light-gray-bg: #f7f7f7; /* Background used in the modal */
|
|
}
|
|
|
|
/* Base Styles */
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--secondary-bg);
|
|
display: flex;
|
|
color: var(--text-dark);
|
|
font-size: 14px;
|
|
min-height: 100vh; /* Ensures body takes full height and grows with content */
|
|
}
|
|
|
|
/* --- Sidebar Navigation --- */
|
|
.sidebar {
|
|
width: 250px;
|
|
background-color: var(--white);
|
|
padding: 20px 0;
|
|
box-shadow: 2px 0 10px rgba(0,0,0,0.05);
|
|
z-index: 10;
|
|
flex-shrink: 0; /* Prevents sidebar from shrinking */
|
|
}
|
|
|
|
/* --- Logo Styles (Size reduced) --- */
|
|
.logo {
|
|
padding: 10px 0; /* Added vertical padding for spacing */
|
|
margin-bottom: 20px;
|
|
text-align: center; /* Center the image */
|
|
display: block;
|
|
}
|
|
.logo-image {
|
|
/* Reduced from 80% to 70% */
|
|
max-width: 70%;
|
|
height: auto;
|
|
display: inline-block;
|
|
border-radius: 4px; /* Maintain design aesthetic */
|
|
}
|
|
/* --- End Logo Styles --- */
|
|
|
|
.sidebar h4 { color: var(--text-light); padding: 0 20px; margin-top: 25px; margin-bottom: 5px; font-size: 11px; text-transform: uppercase; font-weight: 600; }
|
|
.sidebar a {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 20px;
|
|
text-decoration: none;
|
|
color: var(--text-medium);
|
|
transition: all 0.2s;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
.sidebar .active-link {
|
|
background-color: #f1f1f5;
|
|
color: var(--primary-color);
|
|
font-weight: 600;
|
|
}
|
|
.icon-placeholder-sidebar { font-family: 'Arial', sans-serif; margin-right: 10px; font-size: 16px; }
|
|
|
|
/* --- Main Content and Header --- */
|
|
.main-content {
|
|
flex-grow: 1;
|
|
padding: 20px 30px;
|
|
}
|
|
|
|
.top-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: var(--white);
|
|
padding: 10px 30px;
|
|
margin: -20px -30px 20px -30px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.03);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 5;
|
|
}
|
|
.breadcrumbs strong { color: var(--primary-color); font-weight: 600; }
|
|
|
|
/* --- Header Action Buttons --- */
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px; /* Space between the button groups */
|
|
}
|
|
.icon-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.action-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px; /* Space between Quick Sale and User Dropdown */
|
|
}
|
|
.header-icon-btn {
|
|
background: none;
|
|
border: none;
|
|
font-size: 18px;
|
|
color: var(--text-medium);
|
|
padding: 8px;
|
|
cursor: pointer;
|
|
border-radius: 6px;
|
|
transition: background-color 0.2s;
|
|
line-height: 1;
|
|
}
|
|
.header-icon-btn:hover {
|
|
background-color: #f1f1f5;
|
|
}
|
|
|
|
/* New User Dropdown Button Styling */
|
|
.user-dropdown-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: var(--secondary-bg);
|
|
border: 1px solid var(--border-color);
|
|
padding: 4px 15px 4px 4px;
|
|
border-radius: 50px; /* Highly rounded pill shape */
|
|
cursor: pointer;
|
|
transition: background-color 0.2s, box-shadow 0.2s;
|
|
font-weight: 600;
|
|
color: var(--text-dark);
|
|
}
|
|
.user-dropdown-btn:hover {
|
|
background-color: #ebebf2;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
|
|
}
|
|
.user-profile {
|
|
width: 35px;
|
|
height: 35px;
|
|
border-radius: 50%;
|
|
margin-right: 8px;
|
|
background-color: #ddd;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* --- DROPDOWN STYLES --- */
|
|
.dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.dropdown-content {
|
|
display: none; /* Initially hidden */
|
|
position: absolute;
|
|
right: 0; /* Align to the right side of the button */
|
|
background-color: var(--white);
|
|
min-width: 280px;
|
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
|
|
z-index: 200; /* High z-index to appear above other elements */
|
|
border-radius: 8px;
|
|
padding: 10px 0;
|
|
margin-top: 10px;
|
|
border: 1px solid var(--border-color);
|
|
transform-origin: top right;
|
|
animation: fadeIn 0.15s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(-5px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.dropdown-content.show {
|
|
display: block;
|
|
}
|
|
|
|
/* Specific Dropdown styles */
|
|
.dropdown-content h5 {
|
|
color: var(--primary-color);
|
|
font-size: 14px;
|
|
padding: 5px 15px;
|
|
margin: 0 0 5px 0;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
.dropdown-item {
|
|
padding: 10px 15px;
|
|
display: block;
|
|
text-decoration: none;
|
|
color: var(--text-dark);
|
|
line-height: 1.4;
|
|
cursor: pointer;
|
|
}
|
|
.dropdown-item:hover {
|
|
background-color: var(--light-gray-bg);
|
|
}
|
|
.dropdown-item small {
|
|
display: block;
|
|
color: var(--text-medium);
|
|
font-size: 11px;
|
|
}
|
|
.dropdown-footer {
|
|
text-align: center;
|
|
padding: 10px 15px 5px;
|
|
border-top: 1px solid var(--border-color);
|
|
color: var(--primary-color);
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Adjustments for the User Menu content */
|
|
.user-menu-content {
|
|
min-width: 250px;
|
|
}
|
|
/* --- END DROPDOWN STYLES --- */
|
|
|
|
|
|
/* --- General Page Content Styles --- */
|
|
.page-container {
|
|
/* All pages start hidden, except the default active one */
|
|
display: none;
|
|
}
|
|
.page-container.active-page {
|
|
display: block;
|
|
}
|
|
.placeholder-card {
|
|
background-color: var(--white);
|
|
padding: 40px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
|
text-align: center;
|
|
border-left: 5px solid var(--primary-color);
|
|
}
|
|
.placeholder-card h2 {
|
|
font-size: 30px;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
/* --- Dashboard KPI Styles --- */
|
|
.kpi-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.kpi-card {
|
|
background-color: var(--white);
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
|
transition: transform 0.2s;
|
|
border-left: 4px solid var(--primary-color); /* Subtle accent */
|
|
height: 100%; /* Ensure all cards in a grid have equal height */
|
|
box-sizing: border-box;
|
|
}
|
|
.kpi-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 15px rgba(0,0,0,0.1);
|
|
}
|
|
.kpi-card .kpi-value {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
margin-bottom: 5px;
|
|
color: var(--text-dark);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.kpi-card .kpi-value span {
|
|
font-size: 18px;
|
|
margin-right: 10px;
|
|
color: var(--primary-color);
|
|
}
|
|
.kpi-card .kpi-label {
|
|
font-size: 14px;
|
|
color: var(--text-medium);
|
|
margin: 0;
|
|
}
|
|
.kpi-card .kpi-change {
|
|
font-size: 12px;
|
|
margin-top: 10px;
|
|
font-weight: 600;
|
|
}
|
|
.kpi-card .positive {
|
|
color: #4caf50; /* Green */
|
|
}
|
|
.kpi-card .negative {
|
|
color: #f44336; /* Red */
|
|
}
|
|
|
|
/* --- CARD LAYOUT STYLES (UPDATED) --- */
|
|
.dashboard-section {
|
|
background-color: var(--white);
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
|
margin-bottom: 20px;
|
|
}
|
|
.dashboard-section h4 {
|
|
color: var(--primary-color);
|
|
font-size: 20px;
|
|
margin-top: 0;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
/* Two-column layout for Bar Chart and Hot Sale Card */
|
|
.half-width-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr; /* Two equal columns */
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
/* Ensure responsiveness on smaller screens */
|
|
@media (max-width: 768px) {
|
|
.half-width-grid {
|
|
grid-template-columns: 1fr; /* Stack vertically on small screens */
|
|
}
|
|
}
|
|
|
|
/* Hot Sale Card/Membership Trend Card Specific Styling */
|
|
.hot-sale-card {
|
|
border-left-color: #6c63ff;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 30px; /* Increased padding for better look */
|
|
box-sizing: border-box; /* Ensure padding doesn't exceed grid size */
|
|
}
|
|
.hot-sale-card .product-name {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--primary-color);
|
|
margin: 5px 0 10px;
|
|
}
|
|
.hot-sale-card .sales-count {
|
|
font-size: 48px;
|
|
font-weight: 900;
|
|
color: #f44336;
|
|
line-height: 1;
|
|
}
|
|
.hot-sale-card .sales-label {
|
|
font-size: 16px;
|
|
color: var(--text-medium);
|
|
margin-top: 5px;
|
|
}
|
|
/* Style for the new Full-Width Profit Summary Card */
|
|
#profit-summary-card {
|
|
border-left: 5px solid #4caf50; /* Green accent */
|
|
}
|
|
.profit-data-grid {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
gap: 20px;
|
|
text-align: center;
|
|
}
|
|
.profit-item .value {
|
|
font-size: 36px;
|
|
font-weight: 800;
|
|
margin-bottom: 5px;
|
|
}
|
|
.profit-item .label {
|
|
font-size: 14px;
|
|
color: var(--text-medium);
|
|
}
|
|
/* --- END CARD LAYOUT STYLES --- */
|
|
|
|
/* --- NEW TOP 5 PRODUCTS LIST STYLES --- */
|
|
#top-products-card {
|
|
/* Inherits dashboard-section styles, adjust padding for list view */
|
|
padding: 20px 30px;
|
|
border-left: 4px solid #f44336;
|
|
}
|
|
.product-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
.product-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
.product-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.product-rank {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--primary-color);
|
|
width: 30px;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.product-details {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
align-items: center;
|
|
}
|
|
.product-image {
|
|
font-size: 24px;
|
|
margin: 0 15px;
|
|
width: 40px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
background-color: #f1f1f5;
|
|
border-radius: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
.product-info {
|
|
flex-grow: 1;
|
|
min-width: 0;
|
|
}
|
|
.product-info strong {
|
|
display: block;
|
|
font-size: 14px;
|
|
color: var(--text-dark);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.product-info small {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: var(--text-medium);
|
|
}
|
|
.product-stats {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin-left: 20px;
|
|
text-align: right;
|
|
flex-shrink: 0;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
.stat-value {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
display: block;
|
|
color: var(--text-dark);
|
|
}
|
|
/* Responsive adjustments for the product list on small screens */
|
|
@media (max-width: 500px) {
|
|
.product-stats {
|
|
flex-direction: column; /* Stack sales and burn vertically */
|
|
gap: 5px;
|
|
}
|
|
.product-item {
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
/* --- END NEW TOP 5 PRODUCTS LIST STYLES --- */
|
|
|
|
|
|
|
|
/* --- Member Profile Specific Styles (Remains the same) --- */
|
|
.profile-card {
|
|
background-color: var(--white);
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
|
margin-bottom: 20px;
|
|
}
|
|
.profile-header-content { display: flex; align-items: flex-start; }
|
|
.profile-pic { width: 90px; height: 90px; border-radius: 50%; margin-right: 25px; object-fit: cover; background-color: #ddd; }
|
|
.profile-main-info { flex-grow: 1; }
|
|
.profile-main-info h3 { margin: 0; font-size: 30px; font-weight: 700; }
|
|
.stats-badges { display: flex; align-items: flex-end; margin-bottom: 20px; font-size: 14px; }
|
|
.stat-item { display: flex; flex-direction: column; align-items: center; margin-right: 25px; }
|
|
.stat-item .value { font-size: 24px; font-weight: 700; color: var(--primary-color); margin-bottom: 2px; }
|
|
.stat-item .icon-badge { font-size: 14px; color: var(--text-medium); }
|
|
.tag { padding: 4px 10px; border-radius: 4px; margin-right: 8px; font-size: 12px; font-weight: 600; }
|
|
.tag.age { background-color: #e0f7fa; color: #00bcd4; }
|
|
.tag.places { background-color: #f3e5f5; color: #9c27b0; }
|
|
.tag.active { background-color: #e8f5e9; color: #4caf50; }
|
|
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; color: var(--text-medium); font-size: 14px; }
|
|
.profile-tabs { display: flex; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; overflow-x: auto; }
|
|
.profile-tabs button { background: none; border: none; padding: 15px 20px; cursor: pointer; font-size: 15px; color: var(--text-medium); font-weight: 500; white-space: nowrap; }
|
|
.profile-tabs button.active { color: var(--primary-color); border-bottom: 3px solid var(--primary-color); font-weight: 600; }
|
|
.tab-content-section { display: none; padding-top: 10px; }
|
|
.tab-content-section.active { display: block; }
|
|
.stats-card { background-color: var(--white); padding: 30px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
|
|
.stats-grid { display: flex; justify-content: space-between; gap: 20px; }
|
|
.stat-box { flex-basis: 32%; padding: 15px; text-align: left; }
|
|
.stat-box .count { font-size: 32px; font-weight: 700; }
|
|
.sessions .count { color: var(--primary-color); }
|
|
.revenue .count { color: #4caf50; }
|
|
.attendance .count { color: #ff9800; }
|
|
.progress-bar-container { height: 8px; background-color: var(--border-color); border-radius: 4px; margin-top: 10px; overflow: hidden; }
|
|
.sessions .progress-bar { background-color: var(--primary-color); width: 70%; }
|
|
.revenue .progress-bar { background-color: #4caf50; width: 85%; }
|
|
.attendance .progress-bar { background-color: #ff9800; width: 85%; }
|
|
.stat-box small { display: block; margin-top: 10px; color: var(--text-light); font-size: 12px; }
|
|
|
|
/* --- MODAL STYLES (UPDATED FOR QUICK SALE SCROLLING) --- */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
display: none; /* Initially hidden */
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
.modal-overlay.open {
|
|
display: flex;
|
|
opacity: 1;
|
|
}
|
|
.modal-content {
|
|
background-color: var(--white);
|
|
padding: 30px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
|
|
width: 90%;
|
|
max-width: 600px; /* Default max width */
|
|
max-height: 90vh;
|
|
overflow-y: auto; /* Allows the default modal to scroll */
|
|
transform: scale(0.95);
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
|
|
/* Quick Sale Modal Specific Sizing and Structure */
|
|
#quickSaleModal .modal-content {
|
|
max-width: 900px; /* Wider for POS view */
|
|
padding: 20px;
|
|
/* CRITICAL: Enforce a fixed height and use flex to manage internal space */
|
|
height: 85vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: hidden; /* Prevent the main modal from scrolling, we manage inner components */
|
|
}
|
|
|
|
.modal-overlay.open .modal-content {
|
|
transform: scale(1);
|
|
}
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: 10px;
|
|
margin-bottom: 20px;
|
|
flex-shrink: 0; /* Ensures header does not shrink */
|
|
}
|
|
#quickSaleModal .modal-header {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
margin-bottom: 10px;
|
|
}
|
|
.modal-header h4 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
color: var(--primary-color);
|
|
}
|
|
#quickSaleModal .modal-header h4 {
|
|
font-size: 22px;
|
|
}
|
|
#quickSaleModal .modal-header p {
|
|
font-size: 14px;
|
|
color: var(--text-medium);
|
|
margin-top: 5px;
|
|
}
|
|
.modal-close-btn {
|
|
background: none;
|
|
border: none;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
color: var(--text-medium);
|
|
padding: 5px;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* --- General Form & Button Styles (FIXED) --- */
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
.form-group label {
|
|
display: block;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text-dark);
|
|
margin-bottom: 5px;
|
|
}
|
|
.form-group input[type="text"],
|
|
.form-group input[type="email"],
|
|
.form-group input[type="tel"],
|
|
.form-group select {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
box-sizing: border-box; /* Important for full width */
|
|
font-size: 14px;
|
|
color: var(--text-dark);
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
background-color: var(--light-gray-bg);
|
|
}
|
|
.form-group input:focus,
|
|
.form-group select:focus {
|
|
border-color: var(--primary-color);
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.2);
|
|
background-color: var(--white);
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.btn-primary, .btn-secondary {
|
|
padding: 10px 20px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
|
|
border: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--primary-color);
|
|
color: var(--white);
|
|
}
|
|
.btn-primary:hover {
|
|
background-color: #5d56d1; /* Slightly darker */
|
|
box-shadow: 0 4px 10px rgba(108, 99, 255, 0.3);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: var(--light-gray-bg);
|
|
color: var(--text-medium);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
.btn-secondary:hover {
|
|
background-color: #e6e6ee;
|
|
color: var(--text-dark);
|
|
transform: translateY(-1px);
|
|
}
|
|
/* --- END GENERAL FORM & BUTTON STYLES --- */
|
|
|
|
|
|
/* --- NEW QUICK SALE POS STYLES (Updated for scrolling and spacing) --- */
|
|
.pos-container {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr; /* Catalog (2/3) | Cart (1/3) */
|
|
gap: 20px;
|
|
/* CRITICAL: Take up all available height in the flex parent modal-content */
|
|
flex-grow: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Catalog Section (Left) */
|
|
.catalog-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background-color: var(--light-gray-bg);
|
|
padding: 15px;
|
|
height: 100%; /* Fill the grid cell height */
|
|
min-height: 0; /* Important for inner scrolling */
|
|
}
|
|
|
|
/* Category Tabs */
|
|
.category-tabs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid var(--border-color);
|
|
margin-bottom: 10px;
|
|
flex-shrink: 0; /* Prevents tabs from shrinking */
|
|
}
|
|
.category-tab-btn {
|
|
background: none;
|
|
border: none;
|
|
padding: 8px 15px;
|
|
margin-right: 5px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
color: var(--text-medium);
|
|
transition: background-color 0.2s, color 0.2s;
|
|
font-size: 13px;
|
|
}
|
|
.category-tab-btn.active {
|
|
background-color: var(--white);
|
|
color: var(--primary-color);
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Product Grid */
|
|
.product-grid {
|
|
display: grid;
|
|
/* FIX: Use fixed size columns (130px) and auto-fit to prevent stretching when there are few items */
|
|
grid-template-columns: repeat(auto-fit, 130px);
|
|
gap: 15px;
|
|
overflow-y: auto; /* Scrollable catalog */
|
|
padding: 10px 0;
|
|
flex-grow: 1; /* Take up remaining space in catalog-section */
|
|
justify-content: start; /* Aligns tiles to the left, leaving space on the right */
|
|
}
|
|
.product-tile {
|
|
background-color: var(--white);
|
|
border-radius: 8px;
|
|
padding: 10px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
|
transition: transform 0.1s, box-shadow 0.1s;
|
|
/* The tile now correctly adopts the 130px width from the grid column */
|
|
}
|
|
.product-tile:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
}
|
|
.product-tile img {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 6px;
|
|
object-fit: cover;
|
|
margin-bottom: 5px;
|
|
}
|
|
.product-tile strong {
|
|
display: block;
|
|
font-size: 13px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: var(--text-dark);
|
|
}
|
|
.product-tile small {
|
|
display: block;
|
|
color: #f44336; /* Price color */
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Cart Section (Right) */
|
|
.cart-section {
|
|
background-color: var(--white);
|
|
border-radius: 8px;
|
|
padding: 20px; /* Reduced padding-bottom slightly to bring the pay button up */
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid var(--border-color);
|
|
height: 100%; /* Fill the grid cell height */
|
|
min-height: 0; /* Important for inner scrolling */
|
|
}
|
|
.cart-section h5 {
|
|
margin-top: 0;
|
|
font-size: 16px;
|
|
color: var(--primary-color);
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
flex-shrink: 0; /* Prevents header from shrinking */
|
|
}
|
|
.cart-list {
|
|
/* FIX: Re-added flex-grow: 1 to push the cart-totals to the bottom */
|
|
flex-grow: 1;
|
|
overflow-y: auto; /* Enables scrolling for the list when content overflows */
|
|
margin-bottom: 15px;
|
|
min-height: 0;
|
|
}
|
|
.cart-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
border-bottom: 1px dashed var(--border-color);
|
|
font-size: 13px;
|
|
}
|
|
.cart-item-info {
|
|
flex-grow: 1;
|
|
padding-right: 10px;
|
|
}
|
|
.cart-item-name {
|
|
font-weight: 600;
|
|
}
|
|
.cart-item-price {
|
|
color: var(--text-medium);
|
|
font-size: 11px;
|
|
}
|
|
.quantity-control {
|
|
display: flex;
|
|
align-items: center;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
.qty-btn {
|
|
background-color: var(--light-gray-bg);
|
|
border: none;
|
|
width: 25px;
|
|
height: 25px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
transition: background-color 0.1s;
|
|
}
|
|
.qty-btn:hover {
|
|
background-color: #e0e0e0;
|
|
}
|
|
.qty-display {
|
|
padding: 0 8px;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Totals Area */
|
|
.cart-totals {
|
|
padding-top: 10px;
|
|
border-top: 1px solid var(--border-color);
|
|
margin-top: 10px;
|
|
flex-shrink: 0; /* Prevents totals from shrinking */
|
|
}
|
|
.total-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 5px;
|
|
font-size: 13px;
|
|
}
|
|
.total-row.grand-total {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--text-dark);
|
|
margin-top: 10px;
|
|
}
|
|
.total-row.grand-total span {
|
|
color: #f44336;
|
|
}
|
|
.pay-button-container {
|
|
margin-top: 15px;
|
|
margin-bottom: 5px; /* Adds a small gap above the bottom padding of the cart section */
|
|
}
|
|
.pay-button {
|
|
width: 100%;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Responsive adjustments for POS modal */
|
|
@media (max-width: 768px) {
|
|
#quickSaleModal .modal-content {
|
|
padding: 10px;
|
|
height: 90vh; /* Use 90% height on mobile */
|
|
}
|
|
.pos-container {
|
|
grid-template-columns: 1fr; /* Stack catalog and cart */
|
|
gap: 10px;
|
|
}
|
|
.cart-section {
|
|
/* On mobile, limit the cart section height so both sections fit and scroll */
|
|
max-height: 45vh;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- 1. Left Navigation Sidebar (Same as before) -->
|
|
<div class="sidebar">
|
|
<!-- Logo -->
|
|
<div class="logo">
|
|
<img src="https://bio.innovator.bh/assets/img/2_1757425606.png"
|
|
alt="Take One Sports Logo"
|
|
class="logo-image"
|
|
onerror="this.onerror=null; this.src='https://placehold.co/150x50/6c63ff/ffffff?text=Logo+Error'">
|
|
</div>
|
|
<!-- Core Business -->
|
|
<h4>Core Business</h4>
|
|
<!-- dashboard_page is now the main dashboard, so we set it to active by default -->
|
|
<a id="link_dashboard_page" class="active-link" onclick="showPage('dashboard_page', this)"><span class="icon-placeholder-sidebar">🏠</span> Dashboard</a>
|
|
<a id="link_main_dashboard_page" onclick="showPage('main_dashboard_page', this)"><span class="icon-placeholder-sidebar">📊</span> Main Dashboard</a>
|
|
<a id="link_user_overview_page" onclick="showPage('user_overview_page', this)"><span class="icon-placeholder-sidebar">👤</span> User Overview</a>
|
|
<a id="link_invoicing_payments_page" onclick="showPage('invoicing_payments_page', this)"><span class="icon-placeholder-sidebar">💰</span> Invoicing & Payments</a>
|
|
<a id="link_revenue_expenses_page" onclick="showPage('revenue_expenses_page', this)"><span class="icon-placeholder-sidebar">📈</span> Revenue & Expenses</a>
|
|
<a id="link_budgeting_forecasting_page" onclick="showPage('budgeting_forecasting_page', this)"><span class="icon-placeholder-sidebar">🗓️</span> Budgeting & Forecasting</a>
|
|
<a id="link_payroll_management_page" onclick="showPage('payroll_management_page', this)"><span class="icon-placeholder-sidebar">💵</span> Payroll Management</a>
|
|
|
|
<!-- People Management -->
|
|
<h4 style="margin-top: 40px;">People Management</h4>
|
|
<div class="members-group">
|
|
<a id="link_members_page" onclick="showPage('members_page', this)"><span class="icon-placeholder-sidebar">👥</span> Members</a>
|
|
<a id="link_member_directory_page" onclick="showPage('member_directory_page', this)"><span class="icon-placeholder-sidebar">📘</span> Member Directory</a>
|
|
<a id="link_enrollments_page" onclick="showPage('enrollments_page', this)"><span class="icon-placeholder-sidebar">✍️</span> Enrollments</a>
|
|
<a id="link_attendance_page" onclick="showPage('attendance_page', this)"><span class="icon-placeholder-sidebar">✅</span> Attendance</a>
|
|
<a id="link_workouts_page" onclick="showPage('workouts_page', this)"><span class="icon-placeholder-sidebar">💪</span> Workouts</a>
|
|
<a id="link_health_progress_page" onclick="showPage('health_progress_page', this)"><span class="icon-placeholder-sidebar">🩺</span> Health & Progress</a>
|
|
<a id="link_member_groups_page" onclick="showPage('member_groups_page', this)"><span class="icon-placeholder-sidebar">📁</span> Member Groups</a>
|
|
</div>
|
|
<a id="link_staff_management_page" onclick="showPage('staff_management_page', this)"><span class="icon-placeholder-sidebar">💼</span> Staff Management</a>
|
|
</div>
|
|
|
|
<!-- 2. Main Content Area Container -->
|
|
<div class="main-content">
|
|
<!-- Top Header/Navbar -->
|
|
<div class="top-header">
|
|
<div class="breadcrumbs" id="breadcrumbs">
|
|
Core Business <span>></span> <strong>Dashboard</strong>
|
|
</div>
|
|
|
|
<div class="header-actions">
|
|
<!-- ICON GROUP (Notifications, Messages, Add Member, Quick Sale) -->
|
|
<div class="icon-group">
|
|
|
|
<!-- 1. Notifications Dropdown (Bell) -->
|
|
<div class="dropdown">
|
|
<button class="header-icon-btn" title="Notifications" onclick="toggleDropdown('notificationDropdown')">
|
|
🔔
|
|
</button>
|
|
<div id="notificationDropdown" class="dropdown-content">
|
|
<h5>Notifications (3 New)</h5>
|
|
<a class="dropdown-item">
|
|
<strong>Membership Renewal Alert</strong>
|
|
<small>John Doe's membership renews tomorrow.</small>
|
|
</a>
|
|
<a class="dropdown-item">
|
|
<strong>New Enrollment</strong>
|
|
<small>Jane Smith signed up for Premium Fitness.</small>
|
|
</a>
|
|
<a class="dropdown-item">
|
|
<strong>Support Ticket #45 Resolved</strong>
|
|
<small>Ticket resolved by Staff Member A.</small>
|
|
</a>
|
|
<div class="dropdown-footer" onclick="console.log('Viewing All Notifications...')">View All</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. Messages Dropdown (Chat) -->
|
|
<div class="dropdown">
|
|
<button class="header-icon-btn" title="Messages" onclick="toggleDropdown('messagesDropdown')">
|
|
💬
|
|
</button>
|
|
<div id="messagesDropdown" class="dropdown-content">
|
|
<h5>Messages (1 New)</h5>
|
|
<a class="dropdown-item">
|
|
<strong>Coach Tim</strong>
|
|
<small>Regarding John Doe's new workout plan. 3h ago</small>
|
|
</a>
|
|
<a class="dropdown-item">
|
|
<strong>Member Feedback</strong>
|
|
<small>Issue with the treadmill in the weight room. Yesterday</small>
|
|
</a>
|
|
<div class="dropdown-footer" onclick="console.log('Viewing All Messages...')">View All</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. Add Member Icon Button -->
|
|
<button class="header-icon-btn" title="Add New Member" onclick="showModal('addMemberModal')">
|
|
👤+
|
|
</button>
|
|
|
|
<!-- Quick Sale (Now visually next to Add Member) -->
|
|
<!-- Updated to call showQuickSaleModal() which initializes the POS UI -->
|
|
<button class="header-icon-btn" title="Quick Sale / Point of Sale" onclick="showQuickSaleModal()">
|
|
👜+
|
|
</button>
|
|
|
|
</div>
|
|
<!-- END ICON GROUP -->
|
|
|
|
<div class="action-group">
|
|
|
|
<!-- 4. User Profile Dropdown (New Rounded Button) -->
|
|
<div class="dropdown">
|
|
<button class="user-dropdown-btn" title="User Menu" onclick="toggleDropdown('userDropdown')">
|
|
<!-- User Avatar from previous request -->
|
|
<img src="https://bio.innovator.bh/assets/img/2_1757425606.png"
|
|
alt="User Avatar"
|
|
class="user-profile"
|
|
onerror="this.onerror=null; this.src='https://placehold.co/35x35/6c63ff/ffffff?text=U'">
|
|
<span>Ghazan Yussuf</span>
|
|
</button>
|
|
<div id="userDropdown" class="dropdown-content user-menu-content">
|
|
<h5>Account</h5>
|
|
<a class="dropdown-item">
|
|
<strong>View Profile</strong>
|
|
<small>Update personal details</small>
|
|
</a>
|
|
<a class="dropdown-item">
|
|
<strong>Change Password</strong>
|
|
<small>Security settings</small>
|
|
</a>
|
|
<a class="dropdown-item">
|
|
<strong>Support & Help</strong>
|
|
<small>Get assistance (Simulated support link)</small>
|
|
</a>
|
|
<div class="dropdown-footer" onclick="console.log('Logging out...')">Sign Out</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. PAGE CONTENT CONTAINERS -->
|
|
|
|
<!-- Default Active Page: Dashboard (Now customized - NO CHARTS) -->
|
|
<div id="dashboard_page" class="page-container active-page">
|
|
<h2 style="margin-top: 0;">Main Club Dashboard</h2>
|
|
<p style="color: var(--text-medium); margin-bottom: 30px;">A snapshot of real-time club performance and key metrics for decision-making.</p>
|
|
|
|
<!-- KPI Grid -->
|
|
<div class="kpi-grid">
|
|
|
|
<!-- Active Members (User Requested) -->
|
|
<div class="kpi-card">
|
|
<div class="kpi-value">
|
|
<span style="color: #6c63ff;">👥</span> 1,245
|
|
</div>
|
|
<p class="kpi-label">Active Members</p>
|
|
<div class="kpi-change positive">+3.2% since last month</div>
|
|
</div>
|
|
|
|
<!-- Monthly Revenue (User Requested) -->
|
|
<div class="kpi-card" style="border-left-color: #4caf50;">
|
|
<div class="kpi-value" style="color: #4caf50;">
|
|
<span style="color: #4caf50;">💰</span> BHD 85,400
|
|
</div>
|
|
<p class="kpi-label">Monthly Revenue</p>
|
|
<div class="kpi-change positive">+8.5% goal reached</div>
|
|
</div>
|
|
|
|
<!-- Staff On Duty Today (User Requested) -->
|
|
<div class="kpi-card" style="border-left-color: #ff9800;">
|
|
<div class="kpi-value" style="color: #ff9800;">
|
|
<span style="color: #ff9800;">💼</span> 12 / 15
|
|
</div>
|
|
<p class="kpi-label">Staff On Duty Today</p>
|
|
<div class="kpi-change negative">3 staff members off/sick</div>
|
|
</div>
|
|
|
|
<!-- Total Sales Today (User Requested) -->
|
|
<div class="kpi-card" style="border-left-color: #00bcd4;">
|
|
<div class="kpi-value" style="color: #00bcd4;">
|
|
<span style="color: #00bcd4;">🛒</span> 45
|
|
</div>
|
|
<p class="kpi-label">Total Sales Today</p>
|
|
<div class="kpi-change positive">+5 sales vs yesterday</div>
|
|
</div>
|
|
|
|
<!-- New Sign-Ups (Best Practice) -->
|
|
<div class="kpi-card" style="border-left-color: #9c27b0;">
|
|
<div class="kpi-value" style="color: #9c27b0;">
|
|
<span style="color: #9c27b0;">✍️</span> 18
|
|
</div>
|
|
<p class="kpi-label">New Sign-Ups (Week)</p>
|
|
<div class="kpi-change positive">Target: 25/week</div>
|
|
</div>
|
|
|
|
<!-- Avg. Attendance Rate (Best Practice) -->
|
|
<div class="kpi-card" style="border-left-color: #f44336;">
|
|
<div class="kpi-value" style="color: #f44336;">
|
|
<span style="color: #f44336;">✅</span> 78%
|
|
</div>
|
|
<p class="kpi-label">Avg. Attendance Rate</p>
|
|
<div class="kpi-change negative">-1.1% since last month</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. HALF WIDTH GRID ROW: Membership Trends + TOP 5 PRODUCTS -->
|
|
<div class="half-width-grid">
|
|
<!-- A. Membership Trends Card (REMAINS) -->
|
|
<div class="dashboard-section" id="top-products-card" style="margin-bottom: 0; padding: 20px 30px;">
|
|
<h4 style="color: #f44336;">Top 5 Packages (Month)</h4>
|
|
<div class="product-list">
|
|
<!-- Item 1: Protein Bar Pack -->
|
|
<div class="product-item">
|
|
<div class="product-rank">#1</div>
|
|
<div class="product-image">🍫</div>
|
|
<div class="product-details">
|
|
<div class="product-info">
|
|
<strong>Protein Bar Pack (12 Units)</strong>
|
|
<small>BHD 18.500</small>
|
|
</div>
|
|
<div class="product-stats">
|
|
<div><span class="stat-value">580</span> Sales</div>
|
|
<div><span class="stat-value" style="color: #f44336;">19</span> Daily Burn</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 2: Pre-Workout Supplement -->
|
|
<div class="product-item">
|
|
<div class="product-rank">#2</div>
|
|
<div class="product-image">☕</div>
|
|
<div class="product-details">
|
|
<div class="product-info">
|
|
<strong>Pre-Workout Powder (Berry Blast)</strong>
|
|
<small>BHD 22.000</small>
|
|
</div>
|
|
<div class="product-stats">
|
|
<div><span class="stat-value">310</span> Sales</div>
|
|
<div><span class="stat-value" style="color: #f44336;">10</span> Daily Burn</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 3: Branded Water Bottle -->
|
|
<div class="product-item">
|
|
<div class="product-rank">#3</div>
|
|
<div class="product-image">💧</div>
|
|
<div class="product-details">
|
|
<div class="product-info">
|
|
<strong>Premium Branded Water Bottle (1L)</strong>
|
|
<small>BHD 4.500</small>
|
|
</div>
|
|
<div class="product-stats">
|
|
<div><span class="stat-value">245</span> Sales</div>
|
|
<div><span class="stat-value" style="color: #f44336;">8</span> Daily Burn</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 4: Gym Towel Rental -->
|
|
<div class="product-item">
|
|
<div class="product-rank">#4</div>
|
|
<div class="product-image">🛁</div>
|
|
<div class="product-details">
|
|
<div class="product-info">
|
|
<strong>Luxury Microfiber Gym Towel Rental</strong>
|
|
<small>BHD 1.000</small>
|
|
</div>
|
|
<div class="product-stats">
|
|
<div><span class="stat-value">215</span> Sales</div>
|
|
<div><span class="stat-value" style="color: #f44336;">7</span> Daily Burn</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 5: Electrolyte Drink Case -->
|
|
<div class="product-item">
|
|
<div class="product-rank">#5</div>
|
|
<div class="product-image">⚡</div>
|
|
<div class="product-details">
|
|
<div class="product-info">
|
|
<strong>Electrolyte Drink Case (6-Pack)</strong>
|
|
<small>BHD 5.500</small>
|
|
</div>
|
|
<div class="product-stats">
|
|
<div><span class="stat-value">180</span> Sales</div>
|
|
<div><span class="stat-value" style="color: #f44336;">6</span> Daily Burn</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--<div class="kpi-card hot-sale-card" style="border-left-color: #00bcd4;">-->
|
|
<!-- <p class="kpi-label" style="font-size: 16px;">Membership Trend</p>-->
|
|
<!-- <span class="icon-placeholder-sidebar" style="font-size: 60px; margin: 10px 0; color: #00bcd4;">📈</span>-->
|
|
<!-- <p class="product-name">Growth Rate</p>-->
|
|
<!-- <div class="sales-count" style="color: #00bcd4;">+1.8%</div>-->
|
|
<!-- <p class="sales-label">Net change in last 90 days</p>-->
|
|
<!-- <div class="kpi-change positive" style="margin-top: 15px;">Target: 2.5% per quarter</div>-->
|
|
<!--</div>-->
|
|
|
|
<!-- B. TOP 5 BEST-SELLING PRODUCTS CARD (NEW DETAILED LIST) -->
|
|
<div class="dashboard-section" id="top-products-card" style="margin-bottom: 0; padding: 20px 30px;">
|
|
<h4 style="color: #f44336;">Top 5 Best-Selling Products (Month)</h4>
|
|
<div class="product-list">
|
|
<!-- Item 1: Protein Bar Pack -->
|
|
<div class="product-item">
|
|
<div class="product-rank">#1</div>
|
|
<div class="product-image">🍫</div>
|
|
<div class="product-details">
|
|
<div class="product-info">
|
|
<strong>Protein Bar Pack (12 Units)</strong>
|
|
<small>BHD 18.500</small>
|
|
</div>
|
|
<div class="product-stats">
|
|
<div><span class="stat-value">580</span> Sales</div>
|
|
<div><span class="stat-value" style="color: #f44336;">19</span> Daily Burn</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 2: Pre-Workout Supplement -->
|
|
<div class="product-item">
|
|
<div class="product-rank">#2</div>
|
|
<div class="product-image">☕</div>
|
|
<div class="product-details">
|
|
<div class="product-info">
|
|
<strong>Pre-Workout Powder (Berry Blast)</strong>
|
|
<small>BHD 22.000</small>
|
|
</div>
|
|
<div class="product-stats">
|
|
<div><span class="stat-value">310</span> Sales</div>
|
|
<div><span class="stat-value" style="color: #f44336;">10</span> Daily Burn</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 3: Branded Water Bottle -->
|
|
<div class="product-item">
|
|
<div class="product-rank">#3</div>
|
|
<div class="product-image">💧</div>
|
|
<div class="product-details">
|
|
<div class="product-info">
|
|
<strong>Premium Branded Water Bottle (1L)</strong>
|
|
<small>BHD 4.500</small>
|
|
</div>
|
|
<div class="product-stats">
|
|
<div><span class="stat-value">245</span> Sales</div>
|
|
<div><span class="stat-value" style="color: #f44336;">8</span> Daily Burn</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 4: Gym Towel Rental -->
|
|
<div class="product-item">
|
|
<div class="product-rank">#4</div>
|
|
<div class="product-image">🛁</div>
|
|
<div class="product-details">
|
|
<div class="product-info">
|
|
<strong>Luxury Microfiber Gym Towel Rental</strong>
|
|
<small>BHD 1.000</small>
|
|
</div>
|
|
<div class="product-stats">
|
|
<div><span class="stat-value">215</span> Sales</div>
|
|
<div><span class="stat-value" style="color: #f44336;">7</span> Daily Burn</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 5: Electrolyte Drink Case -->
|
|
<div class="product-item">
|
|
<div class="product-rank">#5</div>
|
|
<div class="product-image">⚡</div>
|
|
<div class="product-details">
|
|
<div class="product-info">
|
|
<strong>Electrolyte Drink Case (6-Pack)</strong>
|
|
<small>BHD 5.500</small>
|
|
</div>
|
|
<div class="product-stats">
|
|
<div><span class="stat-value">180</span> Sales</div>
|
|
<div><span class="stat-value" style="color: #f44336;">6</span> Daily Burn</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Dashboard Section: Insights -->
|
|
<div class="dashboard-section">
|
|
<h4>Retention & Scheduling Overview</h4>
|
|
<div style="display: flex; gap: 30px;">
|
|
<div style="flex-basis: 50%;">
|
|
<p style="font-weight: 600; color: #f44336;">Member Churn Alert:</p>
|
|
<p>We are currently seeing a slightly elevated churn rate in members aged 20-25 (9.2%). Consider launching a targeted retention campaign for this demographic.</p>
|
|
<button class="btn-primary" style="background-color: #f44336;">View Churn Analysis</button>
|
|
</div>
|
|
<div style="flex-basis: 50%;">
|
|
<p style="font-weight: 600; color: #ff9800;">Upcoming Class Load:</p>
|
|
<p>The 6:00 PM Yoga class is currently at 95% capacity. The 7:00 AM Spin class is only at 30%. Adjust marketing or staff resources accordingly.</p>
|
|
<button class="btn-primary" style="background-color: #ff9800;">Manage Class Schedule</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Member Profile Page (No longer default active) -->
|
|
<div id="members_page" class="page-container">
|
|
|
|
<!-- Page Intro -->
|
|
<div style="margin-bottom: 20px;">
|
|
<h2 style="margin: 0;">Member Profile</h2>
|
|
<p style="color: var(--text-medium); margin: 5px 0 0;">Comprehensive member information and analytics</p>
|
|
</div>
|
|
|
|
<!-- Member Profile Card (Always visible) -->
|
|
<div class="profile-card">
|
|
<div class="profile-header-content">
|
|
<!-- Member Profile Picture with Gravatar URL -->
|
|
<img class="profile-pic"
|
|
src="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
|
|
alt="John Doe Profile Picture"
|
|
onerror="this.onerror=null; this.src='https://placehold.co/90x90/555/fff?text=J.D.';">
|
|
|
|
<div class="profile-main-info">
|
|
<h3>John Doe</h3>
|
|
<p style="font-style: italic;">Every rep brings me closer to my best self. Consistency is my superpower!</p>
|
|
|
|
<!-- Stats Badges (Number over Icon) -->
|
|
<div class="stats-badges">
|
|
<div class="stat-item"><div class="value">4</div><div class="icon-badge">⭐</div></div>
|
|
<div class="stat-item"><div class="value">3</div><div class="icon-badge">🏅</div></div>
|
|
<div class="stat-item"><div class="value">6</div><div class="icon-badge">💪</div></div>
|
|
<div class="stat-item"><div class="value">3</div><div class="icon-badge">👟</div></div>
|
|
<div class="stat-item"><div class="value">12</div><div class="icon-badge">🗓️</div></div>
|
|
<div class="stat-item"><div class="value">0</div><div class="icon-badge">💔</div></div>
|
|
</div>
|
|
|
|
<div class="tag-group">
|
|
<span class="tag age">Age: 35</span>
|
|
<span class="tag places">9 Places</span>
|
|
<span class="tag active">Active</span>
|
|
</div>
|
|
|
|
<div class="details-grid">
|
|
<div>
|
|
<p style="margin: 0 0 8px;"><strong>🇺🇸</strong> American</p>
|
|
<p style="margin: 0 0 8px;"><strong>📅</strong> Joined June 2023</p>
|
|
<p style="margin: 0 0 8px;"><strong>🎖️</strong> Premium Fitness + Personal Training</p>
|
|
<p style="margin: 0 0 8px;"><strong>📈</strong> Attendance: 85%</p>
|
|
</div>
|
|
<div>
|
|
<p style="margin: 0 0 8px;"><strong>📧</strong> john.doe@email.com</p>
|
|
<p style="margin: 0 0 8px;"><strong>📞</strong> +1 234 567 8901</p>
|
|
<div style="font-size: 20px; color: var(--primary-color);">
|
|
🔗 📸 📱
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Profile Tabs Navigation -->
|
|
<div class="profile-tabs" id="profileTabs">
|
|
<button class="active" onclick="openTab(event, 'Overview')">Overview</button>
|
|
<button onclick="openTab(event, 'Attendance')">Attendance</button>
|
|
<button onclick="openTab(event, 'Health')">Health</button>
|
|
<button onclick="openTab(event, 'Goals')">Goals</button>
|
|
<button onclick="openTab(event, 'Achievements')">Achievements</button>
|
|
<button onclick="openTab(event, 'Tournaments')">Tournaments</button>
|
|
<button onclick="openTab(event, 'Events')">Events</button>
|
|
</div>
|
|
|
|
<!-- Tab Content Sections -->
|
|
<div id="Overview" class="tab-content-section active">
|
|
<div class="stats-card">
|
|
<h4>Profile Statistics</h4>
|
|
<p>Key performance metrics and milestones</p>
|
|
|
|
<div class="stats-grid">
|
|
<div class="stat-box sessions">
|
|
<div class="count">127</div>
|
|
<div class="label">Total Sessions</div>
|
|
<div class="progress-bar-container"><div class="progress-bar"></div></div>
|
|
<small>Sessions completed this year</small>
|
|
</div>
|
|
|
|
<div class="stat-box revenue">
|
|
<div class="count">BHD 4,250</div>
|
|
<div class="label">Total Revenue</div>
|
|
<div class="progress-bar-container"><div class="progress-bar"></div></div>
|
|
<small>Revenue generated this year</small>
|
|
</div>
|
|
|
|
<div class="stat-box attendance">
|
|
<div class="count">85%</div>
|
|
<div class="label">Attendance Rate</div>
|
|
<div class="progress-bar-container"><div class="progress-bar"></div></div>
|
|
<small>Average session attendance</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="Attendance" class="tab-content-section"><div class="stats-card"><h4 style="color: var(--primary-color);">Attendance History</h4><p>Content for attendance logs and graphs would be here.</p></div></div>
|
|
<div id="Health" class="tab-content-section"><div class="stats-card"><h4 style="color: var(--primary-color);">Health & Vitals</h4><p>Content for biometric data and health records would be here.</p></div></div>
|
|
<div id="Goals" class="tab-content-section"><div class="stats-card"><h4 style="color: var(--primary-color);">Training Goals</h4><p>Content for personal fitness objectives would be here.</p></div></div>
|
|
<div id="Achievements" class="tab-content-section"><div class="stats-card"><h4 style="color: var(--primary-color);">Trophies & Badges</h4><p>Content for milestones and virtual rewards would be here.</p></div></div>
|
|
<div id="Tournaments" class="tab-content-section"><div class="stats-card"><h4 style="color: var(--primary-color);">Tournament Participation</h4><p>Content for competitive events and rankings would be here.</p></div></div>
|
|
<div id="Events" class="tab-content-section"><div class="stats-card"><h4 style="color: var(--primary-color);">Upcoming & Past Events</h4><p>Content for calendar and event registration would be here.</p></div></div>
|
|
</div>
|
|
|
|
<!-- Placeholder Pages for Core Business (Other pages remain placeholders) -->
|
|
<div id="main_dashboard_page" class="page-container">
|
|
<div class="placeholder-card">
|
|
<h2>📊 Main Dashboard</h2>
|
|
<p>This page features the primary operational metrics for quick reference.</p>
|
|
</div>
|
|
</div>
|
|
<div id="user_overview_page" class="page-container">
|
|
<div class="placeholder-card">
|
|
<h2>👤 User Overview</h2>
|
|
<p>Detailed analytics on user acquisition, activity, and retention.</p>
|
|
</div>
|
|
</div>
|
|
<div id="invoicing_payments_page" class="page-container">
|
|
<div class="placeholder-card">
|
|
<h2>💰 Invoicing & Payments</h2>
|
|
<p>Manage all outstanding invoices, payment processing, and transaction history.</p>
|
|
</div>
|
|
</div>
|
|
<div id="revenue_expenses_page" class="page-container">
|
|
<div class="placeholder-card">
|
|
<h2>📈 Revenue & Expenses</h2>
|
|
<p>Financial reports, profit and loss statements, and expense tracking.</p>
|
|
</div>
|
|
</div>
|
|
<div id="budgeting_forecasting_page" class="page-container">
|
|
<div class="placeholder-card">
|
|
<h2>🗓️ Budgeting & Forecasting</h2>
|
|
<p>Tools for setting financial goals and predicting future performance.</p>
|
|
</div>
|
|
</div>
|
|
<div id="payroll_management_page" class="page-container">
|
|
<div class="placeholder-card">
|
|
<h2>💵 Payroll Management</h2>
|
|
<p>Manage staff salaries, deductions, and payment schedules.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Placeholder Pages for People Management -->
|
|
<div id="member_directory_page" class="page-container">
|
|
<div class="placeholder-card">
|
|
<h2>📘 Member Directory</h2>
|
|
<p>Searchable list of all members and their basic contact information.</p>
|
|
</div>
|
|
</div>
|
|
<div id="enrollments_page" class="page-container">
|
|
<div class="placeholder-card">
|
|
<h2>✍️ Enrollments</h2>
|
|
<p>Manage new member sign-ups, class registrations, and trial periods.</p>
|
|
</div>
|
|
</div>
|
|
<div id="attendance_page" class="page-container">
|
|
<div class="placeholder-card">
|
|
<h2>✅ Attendance</h2>
|
|
<p>Review and record check-ins for classes and personal training sessions.</p>
|
|
</div>
|
|
</div>
|
|
<div id="workouts_page" class="page-container">
|
|
<div class="placeholder-card">
|
|
<h2>💪 Workouts</h2>
|
|
<p>Database of workout plans and member-specific training logs.</p>
|
|
</div>
|
|
</div>
|
|
<div id="health_progress_page" class="page-container">
|
|
<div class="placeholder-card">
|
|
<h2>🩺 Health & Progress</h2>
|
|
<p>Track health metrics, body stats, and fitness progress over time.</p>
|
|
</div>
|
|
</div>
|
|
<div id="member_groups_page" class="page-container">
|
|
<div class="placeholder-card">
|
|
<h2>📁 Member Groups</h2>
|
|
<p>Manage member segments for targeted marketing or class organization.</p>
|
|
</div>
|
|
</div>
|
|
<div id="staff_management_page" class="page-container">
|
|
<div class="placeholder-card">
|
|
<h2>💼 Staff Management</h2>
|
|
<p>Overview of employees, roles, schedules, and permissions.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 4. MODAL OVERLAYS (Outside main-content for fixed positioning) -->
|
|
|
|
<!-- Quick Sale / POS Modal (NEW IMPLEMENTATION) -->
|
|
<div id="quickSaleModal" class="modal-overlay" onclick="closeModal('quickSaleModal', event)">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<div>
|
|
<h4>Quick Sale <span style="font-size: 14px; color: #ff9800;">(Point of Sale)</span></h4>
|
|
<p>Process customer purchases quickly without leaving your current page.</p>
|
|
</div>
|
|
<button class="modal-close-btn" onclick="closeModal('quickSaleModal')">×</button>
|
|
</div>
|
|
|
|
<div class="pos-container">
|
|
<!-- Product Catalog (Left Side) -->
|
|
<div class="catalog-section">
|
|
<div style="display: flex; align-items: center; margin-bottom: 5px;">
|
|
<span style="font-size: 18px; margin-right: 8px;">🛒</span>
|
|
<strong style="font-size: 15px; color: var(--text-dark);">Product Catalog</strong>
|
|
</div>
|
|
|
|
<!-- Category Tabs -->
|
|
<div class="category-tabs" id="categoryTabs">
|
|
<!-- Tabs rendered here by JS -->
|
|
</div>
|
|
|
|
<!-- Product Grid -->
|
|
<div class="product-grid" id="productGrid">
|
|
<!-- Products rendered here by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cart (Right Side) -->
|
|
<div class="cart-section">
|
|
<h5 style="color: #4caf50;">Current Order Cart</h5>
|
|
|
|
<!-- Cart List -->
|
|
<div class="cart-list" id="cartList">
|
|
<!-- Cart items rendered here by JS -->
|
|
<p style="text-align: center; color: var(--text-light); margin-top: 30px;">Add items to start the sale.</p>
|
|
</div>
|
|
|
|
<!-- Totals and Payment -->
|
|
<div class="cart-totals">
|
|
<div class="total-row">Subtotal: <span id="cartSubtotal">BHD 0.000</span></div>
|
|
<div class="total-row">Tax (5%): <span id="cartTax">BHD 0.000</span></div>
|
|
<div class="total-row grand-total">Total: <span id="cartTotal" style="color: #f44336;">BHD 0.000</span></div>
|
|
|
|
<div class="pay-button-container">
|
|
<button class="btn-primary pay-button" onclick="checkout()">
|
|
Pay <span id="payButtonAmount">BHD 0.000</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Add Member Modal (Styled with new form/button classes) -->
|
|
<div id="addMemberModal" class="modal-overlay" onclick="closeModal('addMemberModal', event)">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4>Quick Add New Member</h4>
|
|
<button class="modal-close-btn" onclick="closeModal('addMemberModal')">×</button>
|
|
</div>
|
|
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="member_first_name">First Name</label>
|
|
<input type="text" id="member_first_name" placeholder="John" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="member_last_name">Last Name</label>
|
|
<input type="text" id="member_last_name" placeholder="Doe" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="member_email">Email Address</label>
|
|
<input type="email" id="member_email" placeholder="john.doe@example.com">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="member_phone">Phone Number</label>
|
|
<input type="tel" id="member_phone" placeholder="+1 555-123-4567">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="member_plan">Membership Plan</label>
|
|
<select id="member_plan" required>
|
|
<option value="basic">Basic Access</option>
|
|
<option value="premium">Premium Fitness</option>
|
|
<option value="pt">Personal Training Package</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn-secondary" onclick="closeModal('addMemberModal')">Cancel</button>
|
|
<button type="submit" class="btn-primary">Add Member</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- JavaScript for Page, Tab, Modal, Dropdown, and POS Functionality -->
|
|
<script>
|
|
// --- POS DATA AND STATE MANAGEMENT ---
|
|
const products = [
|
|
{ id: 1, name: "Protein Shake", price: 6.500, category: "Drinks", icon: '🥛', imgUrl: 'https://placehold.co/80x80/673ab7/ffffff?text=Shake' },
|
|
{ id: 2, name: "Fresh Orange Juice", price: 4.750, category: "Drinks", icon: '🍊', imgUrl: 'https://placehold.co/80x80/ff9800/ffffff?text=Juice' },
|
|
{ id: 3, name: "Energy Drink", price: 3.500, category: "Drinks", icon: '⚡', imgUrl: 'https://placehold.co/80x80/607d8b/ffffff?text=Energy' },
|
|
{ id: 4, name: "Coconut Water", price: 1.750, category: "Drinks", icon: '🥥', imgUrl: 'https://placehold.co/80x80/00bcd4/ffffff?text=Coco' },
|
|
{ id: 5, name: "Pepsi Can", price: 0.750, category: "Drinks", icon: '🥤', imgUrl: 'https://placehold.co/80x80/f44336/ffffff?text=Pepsi' },
|
|
{ id: 6, name: "Bottled Water", price: 1.000, category: "Drinks", icon: '💧', imgUrl: 'https://placehold.co/80x80/9e9e9e/ffffff?text=Water' },
|
|
|
|
{ id: 7, name: "Sandwiches", price: 4.500, category: "Food", icon: '🥪', imgUrl: 'https://placehold.co/80x80/8bc34a/ffffff?text=Sandwich' },
|
|
{ id: 8, name: "Burger Combo", price: 7.900, category: "Food", icon: '🍔', imgUrl: 'https://placehold.co/80x80/ffeb3b/333333?text=Burger' },
|
|
|
|
{ id: 9, name: "Protein Bar", price: 1.500, category: "Snacks", icon: '🍫', imgUrl: 'https://placehold.co/80x80/795548/ffffff?text=Bar' },
|
|
{ id: 10, name: "Nut Mix Pouch", price: 2.750, category: "Snacks", icon: '🥜', imgUrl: 'https://placehold.co/80x80/ffc107/333333?text=Nuts' },
|
|
|
|
{ id: 11, name: "Training Gloves", price: 14.000, category: "Gear", icon: '🧤', imgUrl: 'https://placehold.co/80x80/6c63ff/ffffff?text=Gloves' },
|
|
{ id: 12, name: "Gym Towel", price: 8.500, category: "Gear", icon: '🛁', imgUrl: 'https://placehold.co/80x80/9c27b0/ffffff?text=Towel' }
|
|
];
|
|
|
|
const state = {
|
|
// Cart stores objects: { productId: number, quantity: number, price: number }
|
|
cart: [],
|
|
activeCategory: 'Drinks',
|
|
taxRate: 0.05, // 5% tax
|
|
categories: [...new Set(products.map(p => p.category))]
|
|
};
|
|
|
|
// --- HELPER FUNCTIONS ---
|
|
|
|
/**
|
|
* Formats a number to BHD currency string with 3 decimal places.
|
|
* @param {number} amount
|
|
*/
|
|
function formatCurrency(amount) {
|
|
return `BHD ${amount.toFixed(3)}`;
|
|
}
|
|
|
|
/**
|
|
* Initializes and displays the Quick Sale modal.
|
|
*/
|
|
function showQuickSaleModal() {
|
|
// Ensure the initial state is set
|
|
if (state.cart.length === 0) {
|
|
// Initialize the view only if the cart is empty or on first open
|
|
state.activeCategory = state.categories[0] || 'Drinks';
|
|
}
|
|
|
|
renderCategories();
|
|
renderCatalog();
|
|
renderCart();
|
|
showModal('quickSaleModal');
|
|
}
|
|
|
|
/**
|
|
* Renders the category tabs based on unique product categories.
|
|
*/
|
|
function renderCategories() {
|
|
const container = document.getElementById('categoryTabs');
|
|
if (!container) return;
|
|
|
|
container.innerHTML = state.categories.map(category => `
|
|
<button class="category-tab-btn ${category === state.activeCategory ? 'active' : ''}"
|
|
onclick="setActiveCategory('${category}')">
|
|
${category}
|
|
</button>
|
|
`).join('');
|
|
}
|
|
|
|
/**
|
|
* Sets the active category and re-renders the product grid.
|
|
* @param {string} category
|
|
*/
|
|
function setActiveCategory(category) {
|
|
state.activeCategory = category;
|
|
|
|
// Re-render categories to update active state
|
|
document.querySelectorAll('.category-tab-btn').forEach(btn => {
|
|
if (btn.textContent.trim() === category) {
|
|
btn.classList.add('active');
|
|
} else {
|
|
btn.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
renderCatalog();
|
|
}
|
|
|
|
/**
|
|
* Renders products filtered by the active category into the grid.
|
|
*/
|
|
function renderCatalog() {
|
|
const container = document.getElementById('productGrid');
|
|
if (!container) return;
|
|
|
|
const filteredProducts = products.filter(p => p.category === state.activeCategory);
|
|
|
|
container.innerHTML = filteredProducts.map(p => `
|
|
<div class="product-tile" onclick="addToCart(${p.id})">
|
|
<img src="${p.imgUrl}" onerror="this.onerror=null; this.src='https://placehold.co/80x80/999999/ffffff?text=${p.icon}';" alt="${p.name}">
|
|
<strong>${p.name}</strong>
|
|
<small>${formatCurrency(p.price)}</small>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
/**
|
|
* Adds a product to the cart or increments its quantity.
|
|
* @param {number} productId
|
|
*/
|
|
function addToCart(productId) {
|
|
const cartItemIndex = state.cart.findIndex(item => item.productId === productId);
|
|
const product = products.find(p => p.id === productId);
|
|
|
|
if (!product) return;
|
|
|
|
if (cartItemIndex > -1) {
|
|
// Item already in cart, increment quantity
|
|
state.cart[cartItemIndex].quantity += 1;
|
|
} else {
|
|
// Item not in cart, add new item
|
|
state.cart.push({
|
|
productId: productId,
|
|
name: product.name,
|
|
price: product.price,
|
|
quantity: 1
|
|
});
|
|
}
|
|
renderCart();
|
|
}
|
|
|
|
/**
|
|
* Updates the quantity of a cart item.
|
|
* @param {number} productId
|
|
* @param {number} delta - either 1 (increment) or -1 (decrement).
|
|
*/
|
|
function updateQuantity(productId, delta) {
|
|
const cartItemIndex = state.cart.findIndex(item => item.productId === productId);
|
|
|
|
if (cartItemIndex > -1) {
|
|
state.cart[cartItemIndex].quantity += delta;
|
|
|
|
if (state.cart[cartItemIndex].quantity <= 0) {
|
|
// Remove item if quantity drops to zero or below
|
|
state.cart.splice(cartItemIndex, 1);
|
|
}
|
|
}
|
|
renderCart();
|
|
}
|
|
|
|
/**
|
|
* Renders the entire cart list and updates the totals section.
|
|
*/
|
|
function renderCart() {
|
|
const listContainer = document.getElementById('cartList');
|
|
const subtotalEl = document.getElementById('cartSubtotal');
|
|
const taxEl = document.getElementById('cartTax');
|
|
const totalEl = document.getElementById('cartTotal');
|
|
const payButtonAmountEl = document.getElementById('payButtonAmount');
|
|
|
|
if (!listContainer || !subtotalEl || !taxEl || !totalEl || !payButtonAmountEl) return;
|
|
|
|
let subtotal = 0;
|
|
|
|
// 1. Render List Items
|
|
if (state.cart.length === 0) {
|
|
listContainer.innerHTML = `<p style="text-align: center; color: var(--text-light); margin-top: 30px;">Add items to start the sale.</p>`;
|
|
} else {
|
|
listContainer.innerHTML = state.cart.map(item => {
|
|
const lineTotal = item.quantity * item.price;
|
|
subtotal += lineTotal;
|
|
|
|
return `
|
|
<div class="cart-item">
|
|
<div class="cart-item-info">
|
|
<div class="cart-item-name">${item.name}</div>
|
|
<div class="cart-item-price">${formatCurrency(item.price)}</div>
|
|
</div>
|
|
|
|
<div class="quantity-control">
|
|
<button class="qty-btn" onclick="updateQuantity(${item.productId}, -1)">-</button>
|
|
<span class="qty-display">${item.quantity}</span>
|
|
<button class="qty-btn" onclick="updateQuantity(${item.productId}, 1)">+</button>
|
|
</div>
|
|
<div style="width: 70px; text-align: right; font-weight: 600;">
|
|
${formatCurrency(lineTotal)}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
// 2. Calculate and Render Totals
|
|
const taxAmount = subtotal * state.taxRate;
|
|
const grandTotal = subtotal + taxAmount;
|
|
|
|
subtotalEl.textContent = formatCurrency(subtotal);
|
|
taxEl.textContent = formatCurrency(taxAmount);
|
|
totalEl.textContent = formatCurrency(grandTotal);
|
|
payButtonAmountEl.textContent = formatCurrency(grandTotal);
|
|
}
|
|
|
|
/**
|
|
* Placeholder function for checkout process.
|
|
*/
|
|
function checkout() {
|
|
if (state.cart.length === 0) {
|
|
console.log("Cart is empty. Cannot checkout.");
|
|
// Replace with a custom UI message instead of alert()
|
|
// NOTE: Using alert() here as a temporary placeholder since complex custom modals are outside the scope of this file.
|
|
alert("Please add at least one item to the cart before checking out.");
|
|
return;
|
|
}
|
|
|
|
const grandTotal = state.cart.reduce((total, item) => total + (item.quantity * item.price), 0) * (1 + state.taxRate);
|
|
|
|
console.log("--- CHECKOUT INITIATED ---");
|
|
console.log(`Final Total: ${formatCurrency(grandTotal)}`);
|
|
console.log("Items:", state.cart);
|
|
console.log("--- END CHECKOUT ---");
|
|
|
|
// For demo: Clear cart and close modal
|
|
state.cart = [];
|
|
renderCart();
|
|
closeModal('quickSaleModal');
|
|
|
|
// In a real application, you would navigate to a payment screen or process payment here.
|
|
// NOTE: Using alert() here as a temporary placeholder since complex custom modals are outside the scope of this file.
|
|
alert(`Sale Completed! Total: ${formatCurrency(grandTotal)}. (Simulated transaction)`);
|
|
}
|
|
|
|
|
|
// --- GENERAL UI FUNCTIONS (Kept from previous version) ---
|
|
|
|
function closeAllDropdowns() {
|
|
document.querySelectorAll('.dropdown-content.show').forEach(el => {
|
|
el.classList.remove('show');
|
|
});
|
|
}
|
|
|
|
function closeAllModals() {
|
|
document.querySelectorAll('.modal-overlay.open').forEach(el => {
|
|
el.classList.remove('open');
|
|
});
|
|
}
|
|
|
|
function toggleDropdown(dropdownId) {
|
|
const dropdown = document.getElementById(dropdownId);
|
|
const isShowing = dropdown.classList.contains('show');
|
|
|
|
// Close all dropdowns first
|
|
closeAllDropdowns();
|
|
|
|
// Do not close modals here, only dropdowns
|
|
|
|
if (!isShowing) {
|
|
// If it was closed, open it
|
|
if (dropdown) {
|
|
dropdown.classList.add('show');
|
|
}
|
|
}
|
|
}
|
|
|
|
function showModal(modalId) {
|
|
closeAllDropdowns();
|
|
closeAllModals();
|
|
|
|
const modal = document.getElementById(modalId);
|
|
if (modal) {
|
|
modal.classList.add('open');
|
|
}
|
|
}
|
|
|
|
function closeModal(modalId, event) {
|
|
if (!event || event.target.id === modalId || event.target.classList.contains('modal-close-btn')) {
|
|
const modal = document.getElementById(modalId);
|
|
if (modal) {
|
|
modal.classList.remove('open');
|
|
}
|
|
}
|
|
}
|
|
|
|
function showPage(pageId, linkElement) {
|
|
closeAllDropdowns();
|
|
closeAllModals();
|
|
|
|
document.querySelectorAll('.page-container').forEach(el => {
|
|
el.classList.remove('active-page');
|
|
});
|
|
document.querySelectorAll('.sidebar a').forEach(el => {
|
|
el.classList.remove('active-link');
|
|
});
|
|
|
|
document.getElementById(pageId).classList.add('active-page');
|
|
linkElement.classList.add('active-link');
|
|
|
|
const breadcrumbsEl = document.getElementById('breadcrumbs');
|
|
const linkText = linkElement.textContent.trim();
|
|
|
|
let parentH4 = linkElement.closest('.members-group') ? 'People Management' : 'Core Business';
|
|
let breadcrumbText = '';
|
|
|
|
if (linkText === 'Members') {
|
|
breadcrumbText = `${parentH4} <span>></span> ${linkText} <span>></span> <strong>Member Profile</strong>`;
|
|
} else if (linkText.includes('Dashboard')) {
|
|
breadcrumbText = `${parentH4} <span>></span> <strong>${linkText.replace(' Dashboard', '')}</strong>`;
|
|
} else {
|
|
breadcrumbText = `${parentH4} <span>></span> ${linkText}`;
|
|
}
|
|
|
|
breadcrumbsEl.innerHTML = breadcrumbText;
|
|
|
|
document.querySelector('.main-content').scrollTop = 0;
|
|
}
|
|
|
|
function openTab(evt, tabName) {
|
|
var i, tabcontent, tablinks;
|
|
|
|
tabcontent = document.getElementsByClassName("tab-content-section");
|
|
for (i = 0; i < tabcontent.length; i++) {
|
|
tabcontent[i].classList.remove("active");
|
|
}
|
|
|
|
tablinks = document.getElementById("profileTabs").getElementsByTagName("button");
|
|
for (i = 0; i < tablinks.length; i++) {
|
|
tablinks[i].classList.remove("active");
|
|
}
|
|
|
|
document.getElementById(tabName).classList.add("active");
|
|
evt.currentTarget.classList.add("active");
|
|
}
|
|
|
|
window.onclick = function(event) {
|
|
// Close all dropdowns if the click is outside any dropdown container
|
|
if (!event.target.closest('.dropdown')) {
|
|
closeAllDropdowns();
|
|
}
|
|
}
|
|
|
|
window.onload = function() {
|
|
document.getElementById('dashboard_page').classList.add('active-page');
|
|
document.getElementById('link_dashboard_page').classList.add('active-link');
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|