phuongtc/minicrm
0
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

nang cap san sang import

Browse Source
This commit is contained in:
phuongtc
2026-05-01 04:33:00 +00:00
parent 6c74c17b48
commit 6ef2e9fe4e
93 changed files with 6542 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
webappUI/aftersales_crm_core/DESIGN.md Normal file
View File

@@ -0,0 +1,178 @@
---
name: AfterSales CRM Core
colors:
surface: '#f9f9ff'
surface-dim: '#d8d9e3'
surface-bright: '#f9f9ff'
surface-container-lowest: '#ffffff'
surface-container-low: '#f2f3fd'
surface-container: '#ecedf7'
surface-container-high: '#e6e7f2'
surface-container-highest: '#e1e2ec'
on-surface: '#191b23'
on-surface-variant: '#424754'
inverse-surface: '#2e3038'
inverse-on-surface: '#eff0fa'
outline: '#727785'
outline-variant: '#c2c6d6'
surface-tint: '#005ac2'
primary: '#0058be'
on-primary: '#ffffff'
primary-container: '#2170e4'
on-primary-container: '#fefcff'
inverse-primary: '#adc6ff'
secondary: '#585f6c'
on-secondary: '#ffffff'
secondary-container: '#dce2f3'
on-secondary-container: '#5e6572'
tertiary: '#924700'
on-tertiary: '#ffffff'
tertiary-container: '#b75b00'
on-tertiary-container: '#fffbff'
error: '#ba1a1a'
on-error: '#ffffff'
error-container: '#ffdad6'
on-error-container: '#93000a'
primary-fixed: '#d8e2ff'
primary-fixed-dim: '#adc6ff'
on-primary-fixed: '#001a42'
on-primary-fixed-variant: '#004395'
secondary-fixed: '#dce2f3'
secondary-fixed-dim: '#c0c7d6'
on-secondary-fixed: '#151c27'
on-secondary-fixed-variant: '#404754'
tertiary-fixed: '#ffdcc6'
tertiary-fixed-dim: '#ffb786'
on-tertiary-fixed: '#311400'
on-tertiary-fixed-variant: '#723600'
background: '#f9f9ff'
on-background: '#191b23'
surface-variant: '#e1e2ec'
typography:
h1:
fontFamily: Manrope
fontSize: 24px
fontWeight: '600'
lineHeight: 32px
h2:
fontFamily: Manrope
fontSize: 20px
fontWeight: '600'
lineHeight: 28px
h3:
fontFamily: Manrope
fontSize: 18px
fontWeight: '600'
lineHeight: 24px
body-base:
fontFamily: Inter
fontSize: 14px
fontWeight: '400'
lineHeight: 20px
body-sm:
fontFamily: Inter
fontSize: 12px
fontWeight: '400'
lineHeight: 16px
label-semibold:
fontFamily: Inter
fontSize: 14px
fontWeight: '600'
lineHeight: 20px
button:
fontFamily: Inter
fontSize: 14px
fontWeight: '500'
lineHeight: 20px
rounded:
sm: 0.125rem
DEFAULT: 0.25rem
md: 0.375rem
lg: 0.5rem
xl: 0.75rem
full: 9999px
spacing:
container-max: 1280px
nav-height: 56px
gutter: 1rem
margin-x: 1.5rem
stack-gap: 1.5rem
grid-columns-desktop: '12'
form-gap: 1.25rem
---
## Brand & Style
This design system is built on a **Corporate / Modern** aesthetic, prioritizing utility, clarity, and reliability. It is designed for high-density information environments where user trust is paramount. The visual language utilizes a refined "Filament-inspired" approach, characterized by clean lines, subtle depth, and a structured hierarchy that minimizes cognitive load during complex CRM tasks.
The emotional response should be one of "effortless control"—where the interface recedes to let the data lead, but remains aesthetically polished and professional. It balances the rigidity of enterprise software with the fluidity of modern web applications.
## Colors
The palette is rooted in a functional spectrum. The **Primary Blue** acts as the main driver for interaction and focus, while the **Neutral Gray** scale provides the structural scaffolding.
In **Light Mode**, we use a soft gray background (`#f9fafb`) to reduce glare, paired with pure white surfaces for cards.
In **Dark Mode**, the depth is established using a deep navy-black (`#020617`) for the foundation and a slightly lighter charcoal (`#111827`) for elevated components.
Semantic colors (Success, Warning, Danger) are used sparingly to highlight status changes, ensuring they command attention without overwhelming the user.
## Typography
The typography system uses **Manrope** for headings to inject a modern, refined character into the CRM’s data-heavy views. For body text and functional UI elements, **Inter** is utilized for its exceptional legibility at small sizes.
- **Headings:** Always semibold to provide clear entry points for the eye.
- **Body:** Standardized at 14px (text-sm) to optimize information density without sacrificing readability.
- **Labels:** Use semibold Inter for form labels and table headers to distinguish them from data values.
## Layout & Spacing
The system follows a **Fluid Grid** philosophy with fixed breakpoints.
- **Top Navigation:** A sticky 56px bar provides constant access to global controls.
- **Page Layout:** Content is centered in a max-width container (1280px) with 24px (1.5rem) side margins.
- **Forms:** Employ a responsive 2-column layout on desktop, collapsing to a single column on mobile devices.
- **Tables:** Designed for horizontal scrolling on smaller viewports to preserve data integrity.
- **Rhythm:** A 4px/8px baseline grid maintains consistent vertical rhythm across all component stacks.
## Elevation & Depth
Visual hierarchy is established through **Tonal Layers** and **Ambient Shadows**.
- **Level 0 (Background):** Flat, using the base background token.
- **Level 1 (Cards/Tables):** Pure white (light mode) or #111827 (dark mode) with a subtle `shadow-sm` and a 1px border.
- **Level 2 (Dropdowns/Modals):** Increased shadow depth (`shadow-lg`) and a distinct border to separate floating elements from the surface.
In dark mode, shadows are deepened and opacity is reduced, relying more on subtle border highlights (1px white/10%) to define edges.
## Shapes
The shape language is **Soft** and approachable.
- **Components:** Standard buttons, input fields, and cards use a 0.25rem (4px) corner radius.
- **Large Elements:** Modals and large cards use 0.5rem (8px) for a slightly more modern feel.
- **Avatars/Badges:** Notification badges and user avatars use a full pill/circular shape to contrast against the predominantly rectangular UI.
## Components
### Buttons
- **Primary:** Solid #3b82f6 background, white text, subtle hover state brightness increase.
- **Secondary:** White background with a 1px gray-300 border and gray-700 text.
- **Tertiary:** Ghost style, no background/border until hover.
### Inputs & Forms
- Inputs use a consistent 14px text size with a 1px border.
- Focus state: 2px ring of primary color with 20% opacity.
- Form groups: Label on top, followed by input, followed by optional hint text.
### Cards
- Clean white surfaces with `shadow-sm`.
- Header section separated by a thin light-gray divider.
- Padding should be a consistent 1.5rem (24px) for desktop.
### Navigation (Top Bar)
- Sticky positioning with a subtle bottom border.
- Nav items use a 14px medium weight; active states are indicated by a primary color shift or subtle bottom indicator.
- Notifications: A 20px circular badge in Danger Red sits at the top right of the bell icon.
### Tables
- Headers are sticky where possible.
- Row hover states use a very faint gray (gray-50) to assist with line tracking.
- Status indicators (Chips) should use a "Soft" style: light background tint with high-contrast text of the same hue (e.g., Success green text on a light green background).

BIN
webappUI/aftersales_crm_core/DESIGN.md:Zone.Identifier Normal file
View File

Binary file not shown.

365
webappUI/channel_list_desktop/code.html Normal file
View File

@@ -0,0 +1,365 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Channels - AfterSales CRM</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=Manrope:wght@500;600;700&amp;display=swap" rel="stylesheet"/>
<!-- Material Symbols -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<!-- Tailwind Theme Configuration -->
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"outline": "#727785",
"on-tertiary-fixed": "#311400",
"on-tertiary": "#ffffff",
"primary": "#0058be",
"surface-container-highest": "#e1e2ec",
"error": "#ba1a1a",
"surface-container": "#ecedf7",
"secondary-container": "#dce2f3",
"on-tertiary-fixed-variant": "#723600",
"secondary-fixed": "#dce2f3",
"tertiary-fixed": "#ffdcc6",
"on-primary-fixed": "#001a42",
"surface-variant": "#e1e2ec",
"inverse-on-surface": "#eff0fa",
"background": "#f9f9ff",
"surface-container-lowest": "#ffffff",
"surface-bright": "#f9f9ff",
"surface": "#f9f9ff",
"on-tertiary-container": "#fffbff",
"surface-container-high": "#e6e7f2",
"on-primary": "#ffffff",
"outline-variant": "#c2c6d6",
"on-background": "#191b23",
"inverse-surface": "#2e3038",
"surface-dim": "#d8d9e3",
"on-error": "#ffffff",
"inverse-primary": "#adc6ff",
"primary-fixed-dim": "#adc6ff",
"on-secondary-fixed": "#151c27",
"on-secondary-container": "#5e6572",
"on-primary-container": "#fefcff",
"tertiary-container": "#b75b00",
"surface-tint": "#005ac2",
"on-primary-fixed-variant": "#004395",
"on-secondary-fixed-variant": "#404754",
"on-error-container": "#93000a",
"primary-fixed": "#d8e2ff",
"on-surface": "#191b23",
"on-secondary": "#ffffff",
"tertiary-fixed-dim": "#ffb786",
"surface-container-low": "#f2f3fd",
"tertiary": "#924700",
"secondary": "#585f6c",
"on-surface-variant": "#424754",
"error-container": "#ffdad6",
"secondary-fixed-dim": "#c0c7d6",
"primary-container": "#2170e4"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"nav-height": "56px",
"margin-x": "1.5rem",
"gutter": "1rem",
"container-max": "1280px",
"grid-columns-desktop": "12",
"stack-gap": "1.5rem",
"form-gap": "1.25rem"
},
"fontFamily": {
"h1": ["Manrope"],
"body-base": ["Inter"],
"h2": ["Manrope"],
"button": ["Inter"],
"body-sm": ["Inter"],
"label-semibold": ["Inter"],
"h3": ["Manrope"]
},
"fontSize": {
"h1": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
"body-base": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
"h2": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
"button": ["14px", { "lineHeight": "20px", "fontWeight": "500" }],
"body-sm": ["12px", { "lineHeight": "16px", "fontWeight": "400" }],
"label-semibold": ["14px", { "lineHeight": "20px", "fontWeight": "600" }],
"h3": ["18px", { "lineHeight": "24px", "fontWeight": "600" }]
}
}
}
}
</script>
</head>
<body class="bg-background text-on-surface antialiased min-h-screen flex flex-col relative font-body-base">
<!-- TopNavBar Shared Component -->
<header class="w-full bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm font-manrope text-sm font-medium sticky top-0 z-40">
<div class="sticky top-0 z-50 flex items-center justify-between w-full h-14 px-6 max-w-[1280px] mx-auto">
<!-- Brand -->
<div class="flex items-center gap-8">
<span class="text-xl font-bold text-blue-600 dark:text-blue-400">AfterSales CRM</span>
<!-- Navigation Links -->
<nav class="hidden md:flex items-center gap-6 h-full">
<a class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center h-full mt-1" href="#">Feedback</a>
<a class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center h-full mt-1" href="#">Products</a>
<a class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center h-full mt-1" href="#">Customers</a>
<!-- Active State -->
<a class="text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 pb-1 cursor-pointer active:opacity-80 flex items-center h-full mt-1" href="#">Channels</a>
<a class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center h-full mt-1" href="#">Tags</a>
</nav>
</div>
<!-- Trailing Icons -->
<div class="flex items-center gap-4 text-gray-600 dark:text-gray-400">
<button class="hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80">
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
</button>
<button class="hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
</button>
<div class="w-8 h-8 rounded-full bg-surface-variant ml-2 overflow-hidden border border-outline-variant">
<img alt="User profile" class="w-full h-full object-cover" data-alt="Close up portrait of a professional woman with neutral expression, soft lighting, corporate headshot style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCtgcCRGIvrzLtU0fbqKycm4HDiWOwCuBpUZCh9684mb56LbSsAiOc1KP6lAl5U-f5om6q8tn-60-QCEk-O-QMhlMN_nfWn2uV7dzwncfuL5-2XtOvRb16sOEPgP8RQAY5xVnYbcmx66lO8OiQhuAPPICGSIVMx40snqA-zQhSNjDIezJlouwfTm2zq0nL_wN8ZOpOkfWpcGmH1KBLaVqUuVHOiIGEHBwlxz3aSElv2OoEsaF8Pe7xx9YSGDdTDcSmmyGt4USXaniA"/>
</div>
</div>
</div>
</header>
<!-- Main Content Canvas -->
<main class="flex-grow w-full max-w-[1280px] mx-auto px-margin-x py-8 flex flex-col gap-stack-gap">
<!-- Page Header -->
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div>
<h1 class="font-h1 text-h1 text-on-surface">Channels</h1>
<p class="font-body-base text-body-base text-on-surface-variant mt-1">Manage intake sources and communication pathways.</p>
</div>
<button class="inline-flex items-center justify-center gap-2 bg-primary text-on-primary font-button text-button px-4 py-2 rounded-lg shadow-sm hover:brightness-110 transition-all self-start sm:self-auto">
<span class="material-symbols-outlined text-[20px]" data-icon="add">add</span>
Add Channel
</button>
</div>
<!-- Data Table Card -->
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse min-w-[800px]">
<thead class="bg-surface border-b border-outline-variant">
<tr>
<th class="py-3 px-4 font-label-semibold text-label-semibold text-on-surface-variant w-[25%]">Name</th>
<th class="py-3 px-4 font-label-semibold text-label-semibold text-on-surface-variant w-[20%]">Slug</th>
<th class="py-3 px-4 font-label-semibold text-label-semibold text-on-surface-variant w-[15%]">Status</th>
<th class="py-3 px-4 font-label-semibold text-label-semibold text-on-surface-variant w-[15%] text-right">Feedbacks</th>
<th class="py-3 px-4 font-label-semibold text-label-semibold text-on-surface-variant w-[15%]">Created</th>
<th class="py-3 px-4 font-label-semibold text-label-semibold text-on-surface-variant w-[10%] text-right">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant">
<!-- Row 1 -->
<tr class="hover:bg-surface transition-colors group">
<td class="py-3 px-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded bg-secondary-container flex items-center justify-center text-on-secondary-container">
<span class="material-symbols-outlined text-[18px]" data-icon="language">language</span>
</div>
<span class="font-label-semibold text-label-semibold text-on-surface">Web Portal</span>
</div>
</td>
<td class="py-3 px-4 font-body-base text-body-base text-on-surface-variant font-mono text-sm">web-portal</td>
<td class="py-3 px-4">
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-primary-fixed text-on-primary-fixed-variant font-body-sm text-body-sm border border-primary-fixed-dim">
<span class="material-symbols-outlined text-[14px]" data-icon="check_circle" data-weight="fill" style="font-variation-settings: 'FILL' 1;">check_circle</span>
Active
</span>
</td>
<td class="py-3 px-4 font-body-base text-body-base text-on-surface text-right">12,450</td>
<td class="py-3 px-4 font-body-base text-body-base text-on-surface-variant">Oct 12, 2023</td>
<td class="py-3 px-4 text-right">
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="p-1.5 rounded hover:bg-surface-variant text-on-surface-variant hover:text-on-surface transition-colors">
<span class="material-symbols-outlined text-[20px]" data-icon="edit">edit</span>
</button>
</div>
</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-surface transition-colors group">
<td class="py-3 px-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded bg-secondary-container flex items-center justify-center text-on-secondary-container">
<span class="material-symbols-outlined text-[18px]" data-icon="smartphone">smartphone</span>
</div>
<span class="font-label-semibold text-label-semibold text-on-surface">iOS App</span>
</div>
</td>
<td class="py-3 px-4 font-body-base text-body-base text-on-surface-variant font-mono text-sm">ios-app</td>
<td class="py-3 px-4">
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-primary-fixed text-on-primary-fixed-variant font-body-sm text-body-sm border border-primary-fixed-dim">
<span class="material-symbols-outlined text-[14px]" data-icon="check_circle" data-weight="fill" style="font-variation-settings: 'FILL' 1;">check_circle</span>
Active
</span>
</td>
<td class="py-3 px-4 font-body-base text-body-base text-on-surface text-right">8,204</td>
<td class="py-3 px-4 font-body-base text-body-base text-on-surface-variant">Nov 05, 2023</td>
<td class="py-3 px-4 text-right">
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="p-1.5 rounded hover:bg-surface-variant text-on-surface-variant hover:text-on-surface transition-colors">
<span class="material-symbols-outlined text-[20px]" data-icon="edit">edit</span>
</button>
</div>
</td>
</tr>
<!-- Row 3 -->
<tr class="hover:bg-surface transition-colors group">
<td class="py-3 px-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded bg-secondary-container flex items-center justify-center text-on-secondary-container">
<span class="material-symbols-outlined text-[18px]" data-icon="android">android</span>
</div>
<span class="font-label-semibold text-label-semibold text-on-surface">Android App</span>
</div>
</td>
<td class="py-3 px-4 font-body-base text-body-base text-on-surface-variant font-mono text-sm">android-app</td>
<td class="py-3 px-4">
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-surface-variant text-on-surface-variant font-body-sm text-body-sm border border-outline-variant">
<span class="material-symbols-outlined text-[14px]" data-icon="cancel">cancel</span>
Inactive
</span>
</td>
<td class="py-3 px-4 font-body-base text-body-base text-on-surface text-right">542</td>
<td class="py-3 px-4 font-body-base text-body-base text-on-surface-variant">Jan 22, 2024</td>
<td class="py-3 px-4 text-right">
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="p-1.5 rounded hover:bg-surface-variant text-on-surface-variant hover:text-on-surface transition-colors">
<span class="material-symbols-outlined text-[20px]" data-icon="edit">edit</span>
</button>
</div>
</td>
</tr>
<!-- Row 4 -->
<tr class="hover:bg-surface transition-colors group">
<td class="py-3 px-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded bg-secondary-container flex items-center justify-center text-on-secondary-container">
<span class="material-symbols-outlined text-[18px]" data-icon="mail">mail</span>
</div>
<span class="font-label-semibold text-label-semibold text-on-surface">Email Parsing</span>
</div>
</td>
<td class="py-3 px-4 font-body-base text-body-base text-on-surface-variant font-mono text-sm">email-parsing</td>
<td class="py-3 px-4">
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-primary-fixed text-on-primary-fixed-variant font-body-sm text-body-sm border border-primary-fixed-dim">
<span class="material-symbols-outlined text-[14px]" data-icon="check_circle" data-weight="fill" style="font-variation-settings: 'FILL' 1;">check_circle</span>
Active
</span>
</td>
<td class="py-3 px-4 font-body-base text-body-base text-on-surface text-right">45,102</td>
<td class="py-3 px-4 font-body-base text-body-base text-on-surface-variant">Sep 01, 2023</td>
<td class="py-3 px-4 text-right">
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="p-1.5 rounded hover:bg-surface-variant text-on-surface-variant hover:text-on-surface transition-colors">
<span class="material-symbols-outlined text-[20px]" data-icon="edit">edit</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination Footer (Decorative) -->
<div class="bg-surface border-t border-outline-variant py-3 px-4 flex items-center justify-between text-sm text-on-surface-variant">
<span>Showing 1 to 4 of 4 results</span>
<div class="flex gap-1">
<button class="px-2 py-1 rounded border border-outline-variant opacity-50 cursor-not-allowed">Prev</button>
<button class="px-2 py-1 rounded border border-outline-variant opacity-50 cursor-not-allowed">Next</button>
</div>
</div>
</div>
</main>
<!-- Footer Shared Component -->
<footer class="w-full py-8 border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-950 font-manrope text-xs text-gray-500 mt-auto">
<div class="w-full flex flex-col md:flex-row justify-between items-center px-6 max-w-[1280px] mx-auto transition-all">
<!-- Brand Logo explicitly hidden via JSON -->
<div class="mb-4 md:mb-0">
© 2024 AfterSales CRM. All rights reserved.
</div>
<div class="flex items-center gap-4 text-gray-500">
<a class="hover:underline transition-all" href="#">Support</a>
<a class="hover:underline transition-all" href="#">Privacy Policy</a>
<a class="hover:underline transition-all" href="#">Terms of Service</a>
</div>
</div>
</footer>
<!--
Modal Overlay for Create/Edit
(Positioned fixed to demonstrate Level 2 Elevation,
representing an active "Edit iOS App" state for context)
-->
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-on-background/40 backdrop-blur-sm">
<!-- Modal Card (Level 2 Elevation) -->
<div class="w-full max-w-md bg-surface-container-lowest rounded-xl shadow-lg border border-outline-variant flex flex-col overflow-hidden animate-fade-in-up">
<!-- Modal Header -->
<div class="px-6 py-4 border-b border-outline-variant flex justify-between items-center bg-surface">
<h2 class="font-h2 text-h2 text-on-surface">Edit Channel</h2>
<button class="text-on-surface-variant hover:text-on-surface transition-colors p-1 rounded-md hover:bg-surface-variant">
<span class="material-symbols-outlined" data-icon="close">close</span>
</button>
</div>
<!-- Modal Body (Form) -->
<div class="p-6 flex flex-col gap-form-gap">
<!-- Input Group: Name -->
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Channel Name</label>
<input class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg px-3 py-2 font-body-base text-body-base text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" type="text" value="iOS App"/>
</div>
<!-- Input Group: Slug -->
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Slug Identifier</label>
<input class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg px-3 py-2 font-body-base text-body-base text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" type="text" value="ios-app"/>
<span class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">Used for API routing. Must be unique.</span>
</div>
<!-- Input Group: Icon -->
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Icon Name</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-on-surface-variant">
<span class="material-symbols-outlined text-[18px]" data-icon="smartphone">smartphone</span>
</span>
<input class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg pl-10 pr-3 py-2 font-body-base text-body-base text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" type="text" value="smartphone"/>
</div>
<span class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">Use Material Symbol names (e.g., 'mail', 'android').</span>
</div>
<!-- Toggle: Active Status -->
<div class="flex items-center justify-between pt-2">
<div class="flex flex-col">
<label class="font-label-semibold text-label-semibold text-on-surface">Active Status</label>
<span class="font-body-sm text-body-sm text-on-surface-variant">Allow new intake from this channel.</span>
</div>
<!-- Toggle Switch UI -->
<button aria-checked="true" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-primary transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary/20 focus:ring-offset-2" role="switch" type="button">
<span aria-hidden="true" class="translate-x-5 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
</button>
</div>
</div>
<!-- Modal Footer -->
<div class="px-6 py-4 border-t border-outline-variant bg-surface flex justify-end gap-3">
<button class="bg-surface-container-lowest border border-outline-variant text-on-surface-variant px-4 py-2 rounded-lg font-button text-button hover:bg-surface-variant transition-colors">
Cancel
</button>
<button class="bg-primary text-on-primary px-4 py-2 rounded-lg font-button text-button shadow-sm hover:brightness-110 transition-colors">
Save Changes
</button>
</div>
</div>
</div>
</body></html>

BIN
webappUI/channel_list_desktop/code.html:Zone.Identifier Normal file
View File

Binary file not shown.

BIN
webappUI/channel_list_desktop/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 188 KiB

BIN
webappUI/channel_list_desktop/screen.png:Zone.Identifier Normal file
View File

Binary file not shown.

198
webappUI/create_edit_channel_desktop/code.html Normal file
View File

@@ -0,0 +1,198 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Create Channel - AfterSales CRM</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=Manrope:wght@600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary-container": "#b75b00",
"surface-container-highest": "#e1e2ec",
"on-tertiary-fixed-variant": "#723600",
"on-secondary": "#ffffff",
"surface-dim": "#d8d9e3",
"on-tertiary-container": "#fffbff",
"on-tertiary": "#ffffff",
"on-primary-container": "#fefcff",
"error": "#ba1a1a",
"primary": "#0058be",
"primary-container": "#2170e4",
"background": "#f9f9ff",
"secondary-fixed-dim": "#c0c7d6",
"surface-container-low": "#f2f3fd",
"outline": "#727785",
"on-primary-fixed": "#001a42",
"secondary-fixed": "#dce2f3",
"outline-variant": "#c2c6d6",
"on-tertiary-fixed": "#311400",
"on-surface-variant": "#424754",
"surface": "#f9f9ff",
"on-error": "#ffffff",
"surface-bright": "#f9f9ff",
"secondary": "#585f6c",
"on-secondary-container": "#5e6572",
"inverse-on-surface": "#eff0fa",
"secondary-container": "#dce2f3",
"on-primary-fixed-variant": "#004395",
"error-container": "#ffdad6",
"on-secondary-fixed-variant": "#404754",
"primary-fixed-dim": "#adc6ff",
"on-surface": "#191b23",
"on-secondary-fixed": "#151c27",
"tertiary-fixed-dim": "#ffb786",
"surface-tint": "#005ac2",
"surface-container-high": "#e6e7f2",
"surface-container-lowest": "#ffffff",
"on-error-container": "#93000a",
"on-primary": "#ffffff",
"tertiary": "#924700",
"on-background": "#191b23",
"tertiary-fixed": "#ffdcc6",
"surface-variant": "#e1e2ec",
"primary-fixed": "#d8e2ff",
"inverse-primary": "#adc6ff",
"inverse-surface": "#2e3038",
"surface-container": "#ecedf7"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"stack-gap": "1.5rem",
"gutter": "1rem",
"margin-x": "1.5rem",
"form-gap": "1.25rem",
"container-max": "1280px",
"nav-height": "56px",
"grid-columns-desktop": "12"
},
"fontFamily": {
"button": ["Inter"],
"label-semibold": ["Inter"],
"body-base": ["Inter"],
"h2": ["Manrope"],
"body-sm": ["Inter"],
"h3": ["Manrope"],
"h1": ["Manrope"]
},
"fontSize": {
"button": ["14px", {"lineHeight": "20px", "fontWeight": "500"}],
"label-semibold": ["14px", {"lineHeight": "20px", "fontWeight": "600"}],
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"h2": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"body-sm": ["12px", {"lineHeight": "16px", "fontWeight": "400"}],
"h3": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
"h1": ["24px", {"lineHeight": "32px", "fontWeight": "600"}]
}
}
}
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
</style>
</head>
<body class="bg-surface-container-low min-h-screen font-body-base text-body-base text-on-surface antialiased">
<!-- Main Content Canvas (Navigation suppressed for task-focused view) -->
<main class="w-full max-w-[800px] mx-auto px-margin-x py-10">
<!-- Header Section -->
<header class="mb-stack-gap">
<!-- Breadcrumb -->
<nav aria-label="Breadcrumb" class="flex items-center space-x-2 text-body-sm font-body-sm text-on-surface-variant mb-4">
<a class="hover:text-primary transition-colors flex items-center gap-1" href="#">
<span class="material-symbols-outlined text-[16px]">home</span>
Dashboard
</a>
<span class="material-symbols-outlined text-[14px] text-outline-variant">chevron_right</span>
<a class="hover:text-primary transition-colors" href="#">Channels</a>
<span class="material-symbols-outlined text-[14px] text-outline-variant">chevron_right</span>
<span aria-current="page" class="text-on-surface font-medium">New Channel</span>
</nav>
<div class="flex items-center justify-between">
<h1 class="font-h1 text-h1 text-on-surface tracking-tight">Create New Channel</h1>
</div>
<p class="font-body-base text-body-base text-on-surface-variant mt-2">
Define a new distribution or communication channel for your products.
</p>
</header>
<!-- Form Card -->
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl shadow-sm overflow-hidden">
<form action="#" method="POST">
<div class="p-8">
<h2 class="font-h3 text-h3 text-on-surface mb-6 pb-4 border-b border-surface-variant">Channel Details</h2>
<!-- 2-Column Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-form-gap">
<!-- Name Field -->
<div class="flex flex-col gap-2">
<label class="font-label-semibold text-label-semibold text-on-surface" for="channel_name">
Channel Name <span class="text-error">*</span>
</label>
<input class="h-10 px-3 border border-outline-variant rounded bg-surface-container-lowest text-on-surface font-body-base text-body-base focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 placeholder:text-outline transition-all" id="channel_name" name="channel_name" placeholder="e.g., Retail Partners EMEA" required="" type="text"/>
</div>
<!-- Slug Field -->
<div class="flex flex-col gap-2">
<label class="font-label-semibold text-label-semibold text-on-surface" for="channel_slug">
Identifier (Slug) <span class="text-error">*</span>
</label>
<div class="flex shadow-sm rounded border border-outline-variant focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all overflow-hidden bg-surface-container-lowest">
<span class="inline-flex items-center px-3 bg-surface-container text-on-surface-variant border-r border-outline-variant font-body-base text-body-base select-none">
ch_
</span>
<input class="flex-1 h-10 px-3 border-none bg-transparent text-on-surface font-body-base text-body-base focus:ring-0 placeholder:text-outline" id="channel_slug" name="channel_slug" placeholder="retail-emea" required="" type="text"/>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant">Used for API integration.</p>
</div>
<!-- Icon Field -->
<div class="flex flex-col gap-2">
<label class="font-label-semibold text-label-semibold text-on-surface" for="channel_icon">
Display Icon
</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-outline">
<span class="material-symbols-outlined text-[20px]">search</span>
</span>
<input class="w-full h-10 pl-10 pr-10 border border-outline-variant rounded bg-surface-container-lowest text-on-surface font-body-base text-body-base focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 placeholder:text-outline transition-all" id="channel_icon" name="channel_icon" placeholder="Search icon name..." type="text" value="storefront"/>
<span class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-primary">
<span class="material-symbols-outlined text-[20px]">storefront</span>
</span>
</div>
</div>
<!-- Active Toggle -->
<div class="flex flex-col gap-2 justify-center pt-2">
<label class="font-label-semibold text-label-semibold text-on-surface mb-1">Status</label>
<label class="relative inline-flex items-center cursor-pointer select-none">
<input checked="" class="sr-only peer" name="is_active" type="checkbox"/>
<div class="w-11 h-6 bg-surface-variant peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-outline-variant after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
<div class="ml-3 flex flex-col">
<span class="font-body-base text-body-base text-on-surface font-medium">Active</span>
</div>
</label>
</div>
</div>
</div>
<!-- Footer Actions -->
<div class="px-8 py-5 bg-surface border-t border-outline-variant flex items-center justify-end gap-3 rounded-b-xl">
<button class="h-10 px-4 inline-flex items-center justify-center font-button text-button text-on-surface bg-surface-container-lowest border border-outline-variant rounded hover:bg-surface-variant transition-colors focus:outline-none focus:ring-2 focus:ring-primary/20" type="button">
Cancel
</button>
<button class="h-10 px-6 inline-flex items-center justify-center font-button text-button text-on-primary bg-primary rounded hover:brightness-110 transition-all shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 focus:ring-offset-surface-container-lowest" type="submit">
Save Channel
</button>
</div>
</form>
</div>
</main>
</body></html>

BIN
webappUI/create_edit_channel_desktop/code.html:Zone.Identifier Normal file
View File

Binary file not shown.

BIN
webappUI/create_edit_channel_desktop/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
webappUI/create_edit_channel_desktop/screen.png:Zone.Identifier Normal file
View File

Binary file not shown.

228
webappUI/create_edit_channel_desktop_horizontal_menu/code.html Normal file
View File

@@ -0,0 +1,228 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Create Channel - AfterSales CRM</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=Manrope:wght@600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary-container": "#b75b00",
"surface-container-highest": "#e1e2ec",
"on-tertiary-fixed-variant": "#723600",
"on-secondary": "#ffffff",
"surface-dim": "#d8d9e3",
"on-tertiary-container": "#fffbff",
"on-tertiary": "#ffffff",
"on-primary-container": "#fefcff",
"error": "#ba1a1a",
"primary": "#0058be",
"primary-container": "#2170e4",
"background": "#f9f9ff",
"secondary-fixed-dim": "#c0c7d6",
"surface-container-low": "#f2f3fd",
"outline": "#727785",
"on-primary-fixed": "#001a42",
"secondary-fixed": "#dce2f3",
"outline-variant": "#c2c6d6",
"on-tertiary-fixed": "#311400",
"on-surface-variant": "#424754",
"surface": "#f9f9ff",
"on-error": "#ffffff",
"surface-bright": "#f9f9ff",
"secondary": "#585f6c",
"on-secondary-container": "#5e6572",
"inverse-on-surface": "#eff0fa",
"secondary-container": "#dce2f3",
"on-primary-fixed-variant": "#004395",
"error-container": "#ffdad6",
"on-secondary-fixed-variant": "#404754",
"primary-fixed-dim": "#adc6ff",
"on-surface": "#191b23",
"on-secondary-fixed": "#151c27",
"tertiary-fixed-dim": "#ffb786",
"surface-tint": "#005ac2",
"surface-container-high": "#e6e7f2",
"surface-container-lowest": "#ffffff",
"on-error-container": "#93000a",
"on-primary": "#ffffff",
"tertiary": "#924700",
"on-background": "#191b23",
"tertiary-fixed": "#ffdcc6",
"surface-variant": "#e1e2ec",
"primary-fixed": "#d8e2ff",
"inverse-primary": "#adc6ff",
"inverse-surface": "#2e3038",
"surface-container": "#ecedf7"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"stack-gap": "1.5rem",
"gutter": "1rem",
"margin-x": "1.5rem",
"form-gap": "1.25rem",
"container-max": "1280px",
"nav-height": "56px",
"grid-columns-desktop": "12"
},
"fontFamily": {
"button": ["Inter"],
"label-semibold": ["Inter"],
"body-base": ["Inter"],
"h2": ["Manrope"],
"body-sm": ["Inter"],
"h3": ["Manrope"],
"h1": ["Manrope"]
},
"fontSize": {
"button": ["14px", {"lineHeight": "20px", "fontWeight": "500"}],
"label-semibold": ["14px", {"lineHeight": "20px", "fontWeight": "600"}],
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"h2": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"body-sm": ["12px", {"lineHeight": "16px", "fontWeight": "400"}],
"h3": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
"h1": ["24px", {"lineHeight": "32px", "fontWeight": "600"}]
}
}
}
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
</style>
</head>
<body class="bg-surface-container-low min-h-screen font-body-base text-body-base text-on-surface antialiased">
<nav class="bg-white dark:bg-gray-950 font-manrope text-sm antialiased sticky top-0 w-full z-50 border-b border-gray-200 dark:border-gray-800 shadow-sm">
<div class="flex items-center justify-between px-6 h-14 max-w-7xl mx-auto w-full">
<!-- Logo and Links -->
<div class="flex items-center gap-8 h-full">
<div class="text-xl font-bold tracking-tight text-blue-600 dark:text-blue-400 cursor-pointer active:opacity-70 transition-opacity">
AfterSales CRM
</div>
<div class="hidden md:flex items-center gap-6 h-full pt-1">
<a class="text-gray-600 dark:text-gray-400 font-medium pb-4 mt-4 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70" href="#">Dashboard</a>
<a class="text-gray-600 dark:text-gray-400 font-medium pb-4 mt-4 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70" href="#">Customer Care</a>
<a class="text-gray-600 dark:text-gray-400 font-medium pb-4 mt-4 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70" href="#">Products</a>
<a class="text-gray-600 dark:text-gray-400 font-medium pb-4 mt-4 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70" href="#">Customers</a>
<a class="text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 pb-4 mt-4 font-semibold hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70" href="#">Channels</a>
<a class="text-gray-600 dark:text-gray-400 font-medium pb-4 mt-4 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70" href="#">Tags</a>
</div>
</div>
<!-- Trailing Actions -->
<div class="flex items-center gap-4">
<button class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70">
<span class="material-symbols-outlined">notifications</span>
</button>
<button class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70">
<span class="material-symbols-outlined">settings</span>
</button>
<button class="w-8 h-8 rounded-full bg-gray-200 overflow-hidden cursor-pointer active:opacity-70 transition-opacity flex items-center justify-center">
<span class="material-symbols-outlined text-gray-500 text-lg">person</span>
</button>
</div>
</div>
</nav>
<!-- Main Content Canvas (Navigation suppressed for task-focused view) -->
<main class="w-full max-w-[800px] mx-auto px-margin-x py-10">
<!-- Header Section -->
<header class="mb-stack-gap">
<!-- Breadcrumb -->
<nav aria-label="Breadcrumb" class="flex items-center space-x-2 text-body-sm font-body-sm text-on-surface-variant mb-4">
<a class="hover:text-primary transition-colors flex items-center gap-1" href="#">
<span class="material-symbols-outlined text-[16px]">home</span>
Dashboard
</a>
<span class="material-symbols-outlined text-[14px] text-outline-variant">chevron_right</span>
<a class="hover:text-primary transition-colors" href="#">Channels</a>
<span class="material-symbols-outlined text-[14px] text-outline-variant">chevron_right</span>
<span aria-current="page" class="text-on-surface font-medium">New Channel</span>
</nav>
<div class="flex items-center justify-between">
<h1 class="font-h1 text-h1 text-on-surface tracking-tight">Create New Channel</h1>
</div>
<p class="font-body-base text-body-base text-on-surface-variant mt-2">
Define a new distribution or communication channel for your products.
</p>
</header>
<!-- Form Card -->
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl shadow-sm overflow-hidden">
<form action="#" method="POST">
<div class="p-8">
<h2 class="font-h3 text-h3 text-on-surface mb-6 pb-4 border-b border-surface-variant">Channel Details</h2>
<!-- 2-Column Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-form-gap">
<!-- Name Field -->
<div class="flex flex-col gap-2">
<label class="font-label-semibold text-label-semibold text-on-surface" for="channel_name">
Channel Name <span class="text-error">*</span>
</label>
<input class="h-10 px-3 border border-outline-variant rounded bg-surface-container-lowest text-on-surface font-body-base text-body-base focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 placeholder:text-outline transition-all" id="channel_name" name="channel_name" placeholder="e.g., Retail Partners EMEA" required="" type="text"/>
</div>
<!-- Slug Field -->
<div class="flex flex-col gap-2">
<label class="font-label-semibold text-label-semibold text-on-surface" for="channel_slug">
Identifier (Slug) <span class="text-error">*</span>
</label>
<div class="flex shadow-sm rounded border border-outline-variant focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all overflow-hidden bg-surface-container-lowest">
<span class="inline-flex items-center px-3 bg-surface-container text-on-surface-variant border-r border-outline-variant font-body-base text-body-base select-none">
ch_
</span>
<input class="flex-1 h-10 px-3 border-none bg-transparent text-on-surface font-body-base text-body-base focus:ring-0 placeholder:text-outline" id="channel_slug" name="channel_slug" placeholder="retail-emea" required="" type="text"/>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant">Used for API integration.</p>
</div>
<!-- Icon Field -->
<div class="flex flex-col gap-2">
<label class="font-label-semibold text-label-semibold text-on-surface" for="channel_icon">
Display Icon
</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-outline">
<span class="material-symbols-outlined text-[20px]">search</span>
</span>
<input class="w-full h-10 pl-10 pr-10 border border-outline-variant rounded bg-surface-container-lowest text-on-surface font-body-base text-body-base focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 placeholder:text-outline transition-all" id="channel_icon" name="channel_icon" placeholder="Search icon name..." type="text" value="storefront"/>
<span class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-primary">
<span class="material-symbols-outlined text-[20px]">storefront</span>
</span>
</div>
</div>
<!-- Active Toggle -->
<div class="flex flex-col gap-2 justify-center pt-2">
<label class="font-label-semibold text-label-semibold text-on-surface mb-1">Status</label>
<label class="relative inline-flex items-center cursor-pointer select-none">
<input checked="" class="sr-only peer" name="is_active" type="checkbox"/>
<div class="w-11 h-6 bg-surface-variant peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-outline-variant after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
<div class="ml-3 flex flex-col">
<span class="font-body-base text-body-base text-on-surface font-medium">Active</span>
</div>
</label>
</div>
</div>
</div>
<!-- Footer Actions -->
<div class="px-8 py-5 bg-surface border-t border-outline-variant flex items-center justify-end gap-3 rounded-b-xl">
<button class="h-10 px-4 inline-flex items-center justify-center font-button text-button text-on-surface bg-surface-container-lowest border border-outline-variant rounded hover:bg-surface-variant transition-colors focus:outline-none focus:ring-2 focus:ring-primary/20" type="button">
Cancel
</button>
<button class="h-10 px-6 inline-flex items-center justify-center font-button text-button text-on-primary bg-primary rounded hover:brightness-110 transition-all shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 focus:ring-offset-surface-container-lowest" type="submit">
Save Channel
</button>
</div>
</form>
</div>
</main>
</body></html>

BIN
webappUI/create_edit_channel_desktop_horizontal_menu/code.html:Zone.Identifier Normal file
View File

Binary file not shown.

BIN
webappUI/create_edit_channel_desktop_horizontal_menu/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
webappUI/create_edit_channel_desktop_horizontal_menu/screen.png:Zone.Identifier Normal file
View File

Binary file not shown.

225
webappUI/create_edit_product_desktop_horizontal_menu/code.html Normal file
View File

@@ -0,0 +1,225 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>AfterSales CRM - New Product</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<style>
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
</style>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary-container": "#b75b00",
"surface-container-highest": "#e1e2ec",
"on-tertiary-fixed-variant": "#723600",
"on-secondary": "#ffffff",
"surface-dim": "#d8d9e3",
"on-tertiary-container": "#fffbff",
"on-tertiary": "#ffffff",
"on-primary-container": "#fefcff",
"error": "#ba1a1a",
"primary": "#0058be",
"primary-container": "#2170e4",
"background": "#f9f9ff",
"secondary-fixed-dim": "#c0c7d6",
"surface-container-low": "#f2f3fd",
"outline": "#727785",
"on-primary-fixed": "#001a42",
"secondary-fixed": "#dce2f3",
"outline-variant": "#c2c6d6",
"on-tertiary-fixed": "#311400",
"on-surface-variant": "#424754",
"surface": "#f9f9ff",
"on-error": "#ffffff",
"surface-bright": "#f9f9ff",
"secondary": "#585f6c",
"on-secondary-container": "#5e6572",
"inverse-on-surface": "#eff0fa",
"secondary-container": "#dce2f3",
"on-primary-fixed-variant": "#004395",
"error-container": "#ffdad6",
"on-secondary-fixed-variant": "#404754",
"primary-fixed-dim": "#adc6ff",
"on-surface": "#191b23",
"on-secondary-fixed": "#151c27",
"tertiary-fixed-dim": "#ffb786",
"surface-tint": "#005ac2",
"surface-container-high": "#e6e7f2",
"surface-container-lowest": "#ffffff",
"on-error-container": "#93000a",
"on-primary": "#ffffff",
"tertiary": "#924700",
"on-background": "#191b23",
"tertiary-fixed": "#ffdcc6",
"surface-variant": "#e1e2ec",
"primary-fixed": "#d8e2ff",
"inverse-primary": "#adc6ff",
"inverse-surface": "#2e3038",
"surface-container": "#ecedf7"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"stack-gap": "1.5rem",
"gutter": "1rem",
"margin-x": "1.5rem",
"form-gap": "1.25rem",
"container-max": "1280px",
"nav-height": "56px",
"grid-columns-desktop": "12"
},
"fontFamily": {
"button": ["Inter"],
"label-semibold": ["Inter"],
"body-base": ["Inter"],
"h2": ["Manrope"],
"body-sm": ["Inter"],
"h3": ["Manrope"],
"h1": ["Manrope"]
},
"fontSize": {
"button": ["14px", { "lineHeight": "20px", "fontWeight": "500" }],
"label-semibold": ["14px", { "lineHeight": "20px", "fontWeight": "600" }],
"body-base": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
"h2": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
"body-sm": ["12px", { "lineHeight": "16px", "fontWeight": "400" }],
"h3": ["18px", { "lineHeight": "24px", "fontWeight": "600" }],
"h1": ["24px", { "lineHeight": "32px", "fontWeight": "600" }]
}
}
}
}
</script>
</head>
<body class="bg-surface text-on-surface font-body-base antialiased flex flex-col h-screen overflow-hidden">
<!-- TopNavBar -->
<header class="bg-white dark:bg-gray-950 sticky top-0 w-full z-50 border-b border-gray-200 dark:border-gray-800 shadow-sm font-manrope text-sm antialiased">
<div class="flex items-center justify-between px-6 h-14 max-w-7xl mx-auto w-full">
<!-- Brand -->
<div class="flex items-center gap-4">
<h1 class="text-xl font-bold tracking-tight text-blue-600 dark:text-blue-400">AfterSales CRM</h1>
</div>
<!-- Desktop Nav Links -->
<nav class="hidden md:flex items-center h-full gap-6">
<a class="h-full flex items-center text-gray-600 dark:text-gray-400 font-medium pb-4 mt-4 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70 transition-opacity" href="#">Dashboard</a>
<a class="h-full flex items-center text-gray-600 dark:text-gray-400 font-medium pb-4 mt-4 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70 transition-opacity" href="#">Customer Care</a>
<a class="h-full flex items-center text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 pb-4 mt-4 font-semibold hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70 transition-opacity" href="#">Products</a>
<a class="h-full flex items-center text-gray-600 dark:text-gray-400 font-medium pb-4 mt-4 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70 transition-opacity" href="#">Customers</a>
<a class="h-full flex items-center text-gray-600 dark:text-gray-400 font-medium pb-4 mt-4 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70 transition-opacity" href="#">Channels</a>
<a class="h-full flex items-center text-gray-600 dark:text-gray-400 font-medium pb-4 mt-4 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70 transition-opacity" href="#">Tags</a>
</nav>
<!-- Trailing Actions -->
<div class="flex items-center gap-4">
<button class="p-1.5 rounded-full text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 relative cursor-pointer active:opacity-70 transition-opacity">
<span class="material-symbols-outlined">notifications</span>
<span class="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-error"></span>
</button>
<button class="p-1.5 rounded-full text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70 transition-opacity">
<span class="material-symbols-outlined">settings</span>
</button>
<div class="w-8 h-8 rounded-full overflow-hidden border border-outline-variant cursor-pointer ml-2 active:opacity-70 transition-opacity">
<img alt="User Avatar" class="w-full h-full object-cover" data-alt="Professional headshot of a smiling man in a business casual shirt against a neutral background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBFCDmQ54zCSFvpIjCuFbFUrf7cGFaweOYU7ObePbapYlxT809h132MSJz3z0VwJwu9MTHswZEWz_Oya0orK7ERl97LgGsP9Qa6opVPJtg6vJ8VwBwGHYQWy8-8ct1Kd6SYGrgeE17KUFuPnGm9q7JdFrAmLOIX47k4h6muCxDbp3wQKZLZSfzmoyWQubP0Y-R3sGZ_-S1n7hJIU9MIpfa1fEBplP4gbNyimNrsKW-juiBTHTkW7YvaXR2eWNTxkpn3CrlUQy-2QXQ"/>
</div>
</div>
</div>
</header>
<!-- Main Content Wrapper -->
<div class="flex-1 flex flex-col min-w-0 w-full">
<!-- Page Content -->
<main class="flex-1 overflow-y-auto bg-surface p-4 md:p-6 lg:p-8">
<div class="max-w-[1280px] mx-auto">
<!-- Breadcrumb -->
<nav aria-label="Breadcrumb" class="flex text-sm text-on-surface-variant mb-6">
<ol class="inline-flex items-center space-x-1 md:space-x-2">
<li class="inline-flex items-center">
<a class="hover:text-primary transition-colors font-body-sm text-body-sm" href="#">Dashboard</a>
</li>
<li>
<div class="flex items-center">
<span class="material-symbols-outlined text-[16px] mx-1">chevron_right</span>
<a class="hover:text-primary transition-colors font-body-sm text-body-sm" href="#">Products</a>
</div>
</li>
<li aria-current="page">
<div class="flex items-center">
<span class="material-symbols-outlined text-[16px] mx-1">chevron_right</span>
<span class="text-on-surface font-body-sm text-body-sm font-medium">New Product</span>
</div>
</li>
</ol>
</nav>
<!-- Header -->
<div class="mb-8">
<h1 class="font-h1 text-h1 text-on-surface">New Product</h1>
<p class="font-body-base text-body-base text-on-surface-variant mt-1">Enter the details below to add a new item to the inventory catalog.</p>
</div>
<!-- Form Card -->
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant p-margin-x">
<form>
<!-- Grid Layout -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-form-gap">
<!-- Name Field -->
<div class="col-span-1">
<label class="font-label-semibold text-label-semibold text-on-surface mb-2 block" for="product-name">Product Name</label>
<input class="w-full border border-outline rounded-DEFAULT px-3 py-2 font-body-base text-body-base text-on-surface bg-surface-container-lowest focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-shadow" id="product-name" name="product-name" placeholder="e.g. Industrial Sensor X-200" type="text"/>
</div>
<!-- Status Field -->
<div class="col-span-1">
<label class="font-label-semibold text-label-semibold text-on-surface mb-2 block" for="product-status">Status</label>
<div class="relative">
<select class="w-full border border-outline rounded-DEFAULT px-3 py-2 font-body-base text-body-base text-on-surface bg-surface-container-lowest focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none appearance-none transition-shadow cursor-pointer" id="product-status" name="product-status">
<option value="active">Active</option>
<option value="inactive">Inactive</option>
<option value="sold_out">Sold Out</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-on-surface-variant">
<span class="material-symbols-outlined text-[20px]">expand_more</span>
</div>
</div>
</div>
<!-- Description Field -->
<div class="col-span-1 md:col-span-2">
<label class="font-label-semibold text-label-semibold text-on-surface mb-2 block" for="product-description">Description</label>
<textarea class="w-full border border-outline rounded-DEFAULT px-3 py-2 font-body-base text-body-base text-on-surface bg-surface-container-lowest focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-shadow resize-y" id="product-description" name="product-description" placeholder="Provide a detailed description of the product, including specifications and features." rows="4"></textarea>
</div>
</div>
<!-- Actions -->
<div class="flex justify-end gap-3 mt-8 pt-6 border-t border-outline-variant">
<button class="font-button text-button px-5 py-2 rounded-DEFAULT border border-outline text-on-surface bg-surface-container-lowest hover:bg-surface-container-low transition-colors" type="button">
Cancel
</button>
<button class="font-button text-button px-5 py-2 rounded-DEFAULT bg-primary text-on-primary hover:bg-primary-container shadow-sm transition-colors flex items-center gap-2" type="submit">
<span class="material-symbols-outlined text-[18px]">save</span>
Save Product
</button>
</div>
</form>
</div>
</div>
</main>
</div>
</body></html>

BIN
webappUI/create_edit_product_desktop_horizontal_menu/code.html:Zone.Identifier Normal file
View File

Binary file not shown.

BIN
webappUI/create_edit_product_desktop_horizontal_menu/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
webappUI/create_edit_product_desktop_horizontal_menu/screen.png:Zone.Identifier Normal file
View File

Binary file not shown.

207
webappUI/create_edit_tag_desktop_horizontal_menu/code.html Normal file
View File

@@ -0,0 +1,207 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Create Tag - AfterSales CRM</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=Manrope:wght@600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary-container": "#b75b00",
"surface-container-highest": "#e1e2ec",
"on-tertiary-fixed-variant": "#723600",
"on-secondary": "#ffffff",
"surface-dim": "#d8d9e3",
"on-tertiary-container": "#fffbff",
"on-tertiary": "#ffffff",
"on-primary-container": "#fefcff",
"error": "#ba1a1a",
"primary": "#0058be",
"primary-container": "#2170e4",
"background": "#f9f9ff",
"secondary-fixed-dim": "#c0c7d6",
"surface-container-low": "#f2f3fd",
"outline": "#727785",
"on-primary-fixed": "#001a42",
"secondary-fixed": "#dce2f3",
"outline-variant": "#c2c6d6",
"on-tertiary-fixed": "#311400",
"on-surface-variant": "#424754",
"surface": "#f9f9ff",
"on-error": "#ffffff",
"surface-bright": "#f9f9ff",
"secondary": "#585f6c",
"on-secondary-container": "#5e6572",
"inverse-on-surface": "#eff0fa",
"secondary-container": "#dce2f3",
"on-primary-fixed-variant": "#004395",
"error-container": "#ffdad6",
"on-secondary-fixed-variant": "#404754",
"primary-fixed-dim": "#adc6ff",
"on-surface": "#191b23",
"on-secondary-fixed": "#151c27",
"tertiary-fixed-dim": "#ffb786",
"surface-tint": "#005ac2",
"surface-container-high": "#e6e7f2",
"surface-container-lowest": "#ffffff",
"on-error-container": "#93000a",
"on-primary": "#ffffff",
"tertiary": "#924700",
"on-background": "#191b23",
"tertiary-fixed": "#ffdcc6",
"surface-variant": "#e1e2ec",
"primary-fixed": "#d8e2ff",
"inverse-primary": "#adc6ff",
"inverse-surface": "#2e3038",
"surface-container": "#ecedf7"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"stack-gap": "1.5rem",
"gutter": "1rem",
"margin-x": "1.5rem",
"form-gap": "1.25rem",
"container-max": "1280px",
"nav-height": "56px",
"grid-columns-desktop": "12"
},
"fontFamily": {
"button": ["Inter"],
"label-semibold": ["Inter"],
"body-base": ["Inter"],
"h2": ["Manrope"],
"body-sm": ["Inter"],
"h3": ["Manrope"],
"h1": ["Manrope"]
},
"fontSize": {
"button": ["14px", {"lineHeight": "20px", "fontWeight": "500"}],
"label-semibold": ["14px", {"lineHeight": "20px", "fontWeight": "600"}],
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"h2": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"body-sm": ["12px", {"lineHeight": "16px", "fontWeight": "400"}],
"h3": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
"h1": ["24px", {"lineHeight": "32px", "fontWeight": "600"}]
}
}
}
}
</script>
</head>
<body class="bg-background text-on-background font-body-base text-body-base min-h-screen flex flex-col">
<!-- TopNavBar -->
<nav class="sticky top-0 w-full z-50 bg-white dark:bg-gray-950 border-b border-gray-200 dark:border-gray-800 shadow-sm">
<div class="flex items-center justify-between px-6 h-14 max-w-7xl mx-auto w-full">
<div class="flex items-center gap-6 h-full">
<span class="text-xl font-bold tracking-tight text-blue-600 dark:text-blue-400">AfterSales CRM</span>
<div class="hidden md:flex gap-6 h-full items-center font-manrope text-sm antialiased">
<a class="text-gray-600 dark:text-gray-400 font-medium pb-4 mt-4 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70 flex items-center h-full" href="#">Dashboard</a>
<a class="text-gray-600 dark:text-gray-400 font-medium pb-4 mt-4 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70 flex items-center h-full" href="#">Customer Care</a>
<a class="text-gray-600 dark:text-gray-400 font-medium pb-4 mt-4 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70 flex items-center h-full" href="#">Products</a>
<a class="text-gray-600 dark:text-gray-400 font-medium pb-4 mt-4 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70 flex items-center h-full" href="#">Customers</a>
<a class="text-gray-600 dark:text-gray-400 font-medium pb-4 mt-4 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70 flex items-center h-full" href="#">Channels</a>
<a class="text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 pb-4 mt-4 font-semibold hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70 flex items-center h-full" href="#">Tags</a>
</div>
</div>
<div class="flex items-center gap-4">
<button class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70 relative">
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
<span class="absolute top-0 right-0 w-[8px] h-[8px] bg-error rounded-full"></span>
</button>
<button class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 cursor-pointer active:opacity-70">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
</button>
<div class="w-8 h-8 rounded-full bg-surface-container-high overflow-hidden cursor-pointer active:opacity-70 ml-2">
<img alt="User Avatar" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBBxQeFEsk-EHs1XojE5HtYEbm2Db8FXZ5S7xb0mDIwz1r_oJ2ItZ_7Fv_qZ493Q4UY1Y5bWjMA9mtjexxDg4gZM6Q0DP96Gk-tpn77GZOWJqyrUJuomxj3b7QKiBkTnKh7-jTAM8M9NvrmeFoOZNkjm34F-bj16a_n9zRXan_PTB1b3jGG5Hbs9iKg3ELfp8Yhc4kw-S-ggQt3vG8m9qAwQR6nKPqv34ODwoqJBO1zG-WL7klfEoLkmXOn8-I-gxlqhnX-PcMGUGU"/>
</div>
</div>
</div>
</nav>
<div class="flex flex-1 overflow-hidden">
<!-- Main Content Canvas -->
<main class="flex-1 overflow-y-auto bg-surface p-6 md:p-8">
<div class="max-w-[800px] mx-auto w-full">
<!-- Breadcrumbs & Header -->
<div class="mb-stack-gap">
<nav class="flex items-center gap-2 text-on-surface-variant font-body-sm text-body-sm mb-2">
<a class="hover:text-primary transition-colors" href="#">Dashboard</a>
<span class="material-symbols-outlined text-[16px]" data-icon="chevron_right">chevron_right</span>
<a class="hover:text-primary transition-colors" href="#">Tags</a>
<span class="material-symbols-outlined text-[16px]" data-icon="chevron_right">chevron_right</span>
<span class="text-on-surface">New Tag</span>
</nav>
<div class="flex items-center justify-between">
<h1 class="font-h1 text-h1 text-on-surface">Create New Tag</h1>
</div>
</div>
<!-- Form Card -->
<div class="bg-surface-container-lowest rounded-xl border border-outline-variant shadow-sm overflow-hidden">
<div class="px-6 py-4 border-b border-outline-variant bg-surface-container-lowest">
<h2 class="font-h3 text-h3 text-on-surface">Tag Details</h2>
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">Configure the identity and appearance of your tag.</p>
</div>
<div class="p-6">
<form class="space-y-form-gap">
<!-- Name Field -->
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface" for="tagName">Name</label>
<input class="w-full px-3 py-2 border border-outline-variant rounded bg-surface-container-lowest text-on-surface font-body-base text-body-base focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" id="tagName" name="tagName" placeholder="e.g. High Priority" type="text"/>
<p class="font-body-sm text-body-sm text-on-surface-variant">The display name of the tag used across the CRM.</p>
</div>
<!-- Slug Field -->
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface" for="tagSlug">Slug</label>
<input class="w-full px-3 py-2 border border-outline-variant rounded bg-surface-container-lowest text-on-surface font-body-base text-body-base focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" id="tagSlug" name="tagSlug" placeholder="e.g. high-priority" type="text"/>
<p class="font-body-sm text-body-sm text-on-surface-variant">A unique identifier used in URLs and API responses (auto-generated if left blank).</p>
</div>
<!-- Color Field (Bento-style picker) -->
<div class="flex flex-col gap-1.5 pt-2">
<label class="font-label-semibold text-label-semibold text-on-surface" for="tagColorHex">Color</label>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-start">
<!-- Hex Input -->
<div class="flex items-center border border-outline-variant rounded bg-surface-container-lowest focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary transition-all overflow-hidden">
<div class="pl-3 pr-2 py-2 text-on-surface-variant font-body-base text-body-base border-r border-outline-variant bg-surface-container-low">#</div>
<input class="w-full px-3 py-2 bg-transparent border-none text-on-surface font-body-base text-body-base focus:outline-none uppercase" id="tagColorHex" name="tagColorHex" type="text" value="E2F3DC"/>
</div>
<!-- Quick Pick Palette -->
<div class="flex flex-wrap gap-2 pt-1">
<button aria-label="Select color Red" class="w-8 h-8 rounded-full border border-outline-variant bg-[#ffdad6] ring-2 ring-transparent focus:ring-primary/50 cursor-pointer" type="button"></button>
<button aria-label="Select color Orange" class="w-8 h-8 rounded-full border border-outline-variant bg-[#ffb786] ring-2 ring-transparent focus:ring-primary/50 cursor-pointer" type="button"></button>
<button aria-label="Select color Yellow" class="w-8 h-8 rounded-full border border-outline-variant bg-[#ffdcc6] ring-2 ring-transparent focus:ring-primary/50 cursor-pointer" type="button"></button>
<button aria-label="Select color Green (Selected)" class="w-8 h-8 rounded-full border border-outline-variant bg-[#e2f3dc] ring-2 ring-primary ring-offset-1 cursor-pointer flex items-center justify-center" type="button">
<span class="material-symbols-outlined text-[16px] text-on-surface">check</span>
</button>
<button aria-label="Select color Blue" class="w-8 h-8 rounded-full border border-outline-variant bg-[#dce2f3] ring-2 ring-transparent focus:ring-primary/50 cursor-pointer" type="button"></button>
<button aria-label="Select color Gray" class="w-8 h-8 rounded-full border border-outline-variant bg-[#e1e2ec] ring-2 ring-transparent focus:ring-primary/50 cursor-pointer" type="button"></button>
</div>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">Select a color to visually distinguish this tag.</p>
</div>
</form>
</div>
<!-- Actions Footer -->
<div class="px-6 py-4 border-t border-outline-variant bg-surface-container flex justify-end gap-3">
<button class="px-4 py-2 bg-surface-container-lowest border border-outline-variant text-on-surface font-button text-button rounded hover:bg-surface-container-low transition-colors" type="button">
Cancel
</button>
<button class="px-4 py-2 bg-primary text-on-primary font-button text-button rounded hover:brightness-110 transition-all shadow-sm" type="submit">
Save Tag
</button>
</div>
</div>
</div>
</main>
</div>
</body></html>

BIN
webappUI/create_edit_tag_desktop_horizontal_menu/code.html:Zone.Identifier Normal file
View File

Binary file not shown.

BIN
webappUI/create_edit_tag_desktop_horizontal_menu/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
webappUI/create_edit_tag_desktop_horizontal_menu/screen.png:Zone.Identifier Normal file
View File

Binary file not shown.

293
webappUI/create_feedback_desktop/code.html Normal file
View File

@@ -0,0 +1,293 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Feedback - AfterSales CRM</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"outline": "#727785",
"on-tertiary-fixed": "#311400",
"on-tertiary": "#ffffff",
"primary": "#0058be",
"surface-container-highest": "#e1e2ec",
"error": "#ba1a1a",
"surface-container": "#ecedf7",
"secondary-container": "#dce2f3",
"on-tertiary-fixed-variant": "#723600",
"secondary-fixed": "#dce2f3",
"tertiary-fixed": "#ffdcc6",
"on-primary-fixed": "#001a42",
"surface-variant": "#e1e2ec",
"inverse-on-surface": "#eff0fa",
"background": "#f9f9ff",
"surface-container-lowest": "#ffffff",
"surface-bright": "#f9f9ff",
"surface": "#f9f9ff",
"on-tertiary-container": "#fffbff",
"surface-container-high": "#e6e7f2",
"on-primary": "#ffffff",
"outline-variant": "#c2c6d6",
"on-background": "#191b23",
"inverse-surface": "#2e3038",
"surface-dim": "#d8d9e3",
"on-error": "#ffffff",
"inverse-primary": "#adc6ff",
"primary-fixed-dim": "#adc6ff",
"on-secondary-fixed": "#151c27",
"on-secondary-container": "#5e6572",
"on-primary-container": "#fefcff",
"tertiary-container": "#b75b00",
"surface-tint": "#005ac2",
"on-primary-fixed-variant": "#004395",
"on-secondary-fixed-variant": "#404754",
"on-error-container": "#93000a",
"primary-fixed": "#d8e2ff",
"on-surface": "#191b23",
"on-secondary": "#ffffff",
"tertiary-fixed-dim": "#ffb786",
"surface-container-low": "#f2f3fd",
"tertiary": "#924700",
"secondary": "#585f6c",
"on-surface-variant": "#424754",
"error-container": "#ffdad6",
"secondary-fixed-dim": "#c0c7d6",
"primary-container": "#2170e4"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"nav-height": "56px",
"margin-x": "1.5rem",
"gutter": "1rem",
"container-max": "1280px",
"grid-columns-desktop": "12",
"stack-gap": "1.5rem",
"form-gap": "1.25rem"
},
"fontFamily": {
"h1": ["Manrope"],
"body-base": ["Inter"],
"h2": ["Manrope"],
"button": ["Inter"],
"body-sm": ["Inter"],
"label-semibold": ["Inter"],
"h3": ["Manrope"]
},
"fontSize": {
"h1": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
"body-base": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
"h2": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
"button": ["14px", { "lineHeight": "20px", "fontWeight": "500" }],
"body-sm": ["12px", { "lineHeight": "16px", "fontWeight": "400" }],
"label-semibold": ["14px", { "lineHeight": "20px", "fontWeight": "600" }],
"h3": ["18px", { "lineHeight": "24px", "fontWeight": "600" }]
}
}
}
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.icon-fill {
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
</style>
</head>
<body class="bg-background text-on-background font-body-base min-h-screen flex flex-col">
<!-- TopNavBar -->
<nav class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm docked full-width top-0 sticky z-50 w-full h-14">
<div class="flex items-center justify-between w-full h-full px-6 max-w-[1280px] mx-auto">
<div class="flex items-center gap-8">
<div class="text-xl font-bold text-blue-600 dark:text-blue-400 font-h2">AfterSales CRM</div>
<div class="hidden md:flex items-center gap-6">
<a class="text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 pb-1 font-manrope text-sm font-medium hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80" href="#">Feedback</a>
<a class="text-gray-600 dark:text-gray-400 font-manrope text-sm font-medium hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80" href="#">Products</a>
<a class="text-gray-600 dark:text-gray-400 font-manrope text-sm font-medium hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80" href="#">Customers</a>
<a class="text-gray-600 dark:text-gray-400 font-manrope text-sm font-medium hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80" href="#">Channels</a>
<a class="text-gray-600 dark:text-gray-400 font-manrope text-sm font-medium hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80" href="#">Tags</a>
</div>
</div>
<div class="flex items-center gap-4">
<div class="relative flex items-center bg-surface-container-low rounded-full px-3 py-1.5 border border-outline-variant focus-within:border-primary focus-within:ring-1 focus-within:ring-primary w-64">
<span class="material-symbols-outlined text-outline text-[20px] mr-2">search</span>
<input class="bg-transparent border-none focus:ring-0 text-body-sm w-full p-0 text-on-surface placeholder:text-outline-variant" placeholder="Search..." type="text"/>
</div>
<button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 relative">
<span class="material-symbols-outlined text-[24px]">notifications</span>
<span class="absolute top-0 right-0 w-2 h-2 bg-error rounded-full"></span>
</button>
<button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80">
<span class="material-symbols-outlined text-[24px]">settings</span>
</button>
<img alt="User profile" class="w-8 h-8 rounded-full border border-outline-variant" data-alt="Close-up of a professional user profile picture with neutral background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuADV3_Q1lBAyb061SRswKMVcRp6hCPgwfwmdMbQO58iyUWL0oabxofYIwpIuotiAScsRO4d8MUCxBw6_tcjGnA-Ced7gbwuOMgpMdu_2AcnrmgIdx7zboNGcwZvL5sGqZPSNAgJRnUVJsnKSNHlzVcahNAIfIi53csIQ0vb0zMIzVVMiu_2o1S-Ibp_QqOgOdeg8roj8OZ77JbPgBdLK_23B084Gz7csOxroTonJ-ObTMPAvxsV24mxTmDmaNoGARnl0_F0XMcKHHY"/>
</div>
</div>
</nav>
<!-- Main Content Canvas -->
<main class="flex-1 w-full max-w-[1280px] mx-auto px-6 py-8">
<div class="flex items-center justify-between mb-8">
<h1 class="font-h1 text-h1 text-on-surface">Create Feedback</h1>
<div class="flex items-center gap-3">
<button class="px-4 py-2 bg-surface-container-lowest border border-outline-variant rounded text-on-surface font-button text-button hover:bg-surface-container-low transition-colors shadow-sm" type="button">Cancel</button>
<button class="px-4 py-2 bg-primary text-on-primary rounded font-button text-button hover:bg-primary-container hover:text-on-primary-container transition-colors shadow-sm" type="submit">Create Feedback</button>
</div>
</div>
<form class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
<!-- Left Column: Core Details (8 cols) -->
<div class="lg:col-span-8 flex flex-col gap-6">
<!-- Customer & Channel Group -->
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant p-6 flex flex-col gap-form-gap">
<div class="grid grid-cols-1 md:grid-cols-2 gap-form-gap">
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Customer</label>
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-[18px]">search</span>
<input class="w-full pl-9 pr-3 py-2 bg-surface-container-lowest border border-outline-variant rounded focus:border-primary focus:ring-1 focus:ring-primary text-body-base text-on-surface" placeholder="Search customer..." type="text"/>
</div>
</div>
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Channel <span class="text-error">*</span></label>
<select class="w-full px-3 py-2 bg-surface-container-lowest border border-outline-variant rounded focus:border-primary focus:ring-1 focus:ring-primary text-body-base text-on-surface appearance-none">
<option disabled="" selected="" value="">Select channel</option>
<option value="email">Email</option>
<option value="phone">Phone</option>
<option value="portal">Customer Portal</option>
<option value="social">Social Media</option>
</select>
<span class="material-symbols-outlined absolute right-3 top-9 pointer-events-none text-outline text-[18px]">arrow_drop_down</span>
</div>
</div>
<div class="flex items-center gap-3 py-2 border-t border-outline-variant border-opacity-30 mt-2">
<input class="w-4 h-4 text-primary bg-surface-container-lowest border-outline-variant rounded focus:ring-primary" id="general-feedback" type="checkbox"/>
<label class="font-body-base text-body-base text-on-surface cursor-pointer select-none" for="general-feedback">This is general feedback (no specific product)</label>
</div>
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Product</label>
<select class="w-full px-3 py-2 bg-surface-container-lowest border border-outline-variant rounded focus:border-primary focus:ring-1 focus:ring-primary text-body-base text-on-surface appearance-none" disabled="">
<option disabled="" selected="" value="">Select a customer first to filter products</option>
</select>
<span class="material-symbols-outlined absolute right-3 top-9 pointer-events-none text-outline text-[18px] opacity-50">arrow_drop_down</span>
</div>
</div>
<!-- Feedback Content Group -->
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant p-6 flex flex-col gap-form-gap">
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Title <span class="text-error">*</span></label>
<input class="w-full px-3 py-2 bg-surface-container-lowest border border-outline-variant rounded focus:border-primary focus:ring-1 focus:ring-primary text-body-base text-on-surface" placeholder="Brief summary of feedback" type="text"/>
</div>
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Content</label>
<textarea class="w-full px-3 py-2 bg-surface-container-lowest border border-outline-variant rounded focus:border-primary focus:ring-1 focus:ring-primary text-body-base text-on-surface resize-y" placeholder="Detailed feedback description..." rows="6"></textarea>
</div>
</div>
<!-- Attachments Group -->
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant p-6 flex flex-col gap-form-gap">
<div class="flex items-center justify-between">
<h2 class="font-h3 text-h3 text-on-surface">Attachments</h2>
<span class="text-body-sm text-on-surface-variant font-body-sm">General, Proof, Evidence</span>
</div>
<div class="border-2 border-dashed border-outline-variant rounded-lg p-8 flex flex-col items-center justify-center bg-surface-container-low hover:bg-surface-container transition-colors cursor-pointer group">
<div class="w-12 h-12 rounded-full bg-secondary-container flex items-center justify-center mb-3 group-hover:bg-primary-container transition-colors">
<span class="material-symbols-outlined text-on-secondary-container group-hover:text-on-primary-container text-[24px]">cloud_upload</span>
</div>
<p class="font-label-semibold text-label-semibold text-on-surface mb-1">Click to upload or drag and drop</p>
<p class="font-body-sm text-body-sm text-outline">SVG, PNG, JPG or PDF (max. 10MB)</p>
</div>
</div>
</div>
<!-- Right Column: Metadata & Assignment (4 cols) -->
<div class="lg:col-span-4 flex flex-col gap-6">
<!-- Status & Classification -->
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant p-6 flex flex-col gap-form-gap">
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Status</label>
<div class="w-full px-3 py-2 bg-surface-container border border-outline-variant border-opacity-50 rounded text-body-base text-on-surface-variant flex items-center justify-between cursor-not-allowed">
<span>Pending</span>
<span class="material-symbols-outlined text-[18px] text-outline">pending</span>
</div>
</div>
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Tags</label>
<div class="w-full min-h-[42px] px-2 py-1.5 bg-surface-container-lowest border border-outline-variant rounded focus-within:border-primary focus-within:ring-1 focus-within:ring-primary flex flex-wrap gap-2 items-center cursor-text">
<div class="flex items-center gap-1 bg-surface-variant text-on-surface-variant px-2 py-0.5 rounded text-body-sm font-body-sm">
Feature Request
<span class="material-symbols-outlined text-[14px] cursor-pointer hover:text-on-surface">close</span>
</div>
<input class="flex-1 min-w-[80px] bg-transparent border-none focus:ring-0 p-0 text-body-base text-on-surface placeholder:text-outline-variant" placeholder="Add tag..." type="text"/>
</div>
</div>
</div>
<!-- Assignment & Routing -->
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant p-6 flex flex-col gap-form-gap">
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Department</label>
<select class="w-full px-3 py-2 bg-surface-container-lowest border border-outline-variant rounded focus:border-primary focus:ring-1 focus:ring-primary text-body-base text-on-surface appearance-none">
<option disabled="" selected="" value="">Select department</option>
<option value="support">Support</option>
<option value="product">Product Team</option>
<option value="engineering">Engineering</option>
<option value="sales">Sales</option>
</select>
<span class="material-symbols-outlined absolute right-9 mt-[34px] pointer-events-none text-outline text-[18px]">arrow_drop_down</span>
</div>
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Assign To</label>
<select class="w-full px-3 py-2 bg-surface-container-lowest border border-outline-variant rounded focus:border-primary focus:ring-1 focus:ring-primary text-body-base text-on-surface appearance-none">
<option selected="" value="unassigned">Unassigned (Queue)</option>
<option value="user1">Alex Johnson</option>
<option value="user2">Sarah Smith</option>
</select>
<span class="material-symbols-outlined absolute right-9 mt-[34px] pointer-events-none text-outline text-[18px]">arrow_drop_down</span>
</div>
</div>
<!-- Admin Only Panel -->
<div class="bg-error-container bg-opacity-20 rounded-xl shadow-sm border border-error border-opacity-30 p-6 flex flex-col gap-form-gap">
<div class="flex items-center justify-between mb-2">
<h3 class="font-label-semibold text-label-semibold text-error flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">admin_panel_settings</span>
Admin Controls
</h3>
</div>
<div class="flex items-center justify-between py-2">
<div class="flex flex-col">
<label class="font-label-semibold text-label-semibold text-on-surface">Escalate Feedback</label>
<span class="font-body-sm text-body-sm text-on-surface-variant">Flag for immediate manager review</span>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only peer" type="checkbox" value=""/>
<div class="w-11 h-6 bg-surface-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-outline-variant after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-error"></div>
</label>
</div>
</div>
</div>
</form>
</main>
<!-- Footer -->
<footer class="bg-gray-50 dark:bg-gray-950 border-t border-gray-200 dark:border-gray-800 full-width py-8 flat no shadows mt-auto">
<div class="w-full flex flex-col md:flex-row justify-between items-center px-6 max-w-[1280px] mx-auto">
<div class="font-manrope text-xs text-gray-500 mb-4 md:mb-0">
© 2024 AfterSales CRM. All rights reserved.
</div>
<div class="flex items-center gap-6">
<a class="text-gray-500 font-manrope text-xs hover:underline transition-all" href="#">Support</a>
<a class="text-gray-500 font-manrope text-xs hover:underline transition-all" href="#">Privacy Policy</a>
<a class="text-gray-500 font-manrope text-xs hover:underline transition-all" href="#">Terms of Service</a>
</div>
</div>
</footer>
</body></html>

BIN
webappUI/create_feedback_desktop/code.html:Zone.Identifier Normal file
View File

Binary file not shown.

BIN
webappUI/create_feedback_desktop/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 176 KiB

BIN
webappUI/create_feedback_desktop/screen.png:Zone.Identifier Normal file
View File

Binary file not shown.

310
webappUI/customer_list_desktop/code.html Normal file
View File

@@ -0,0 +1,310 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Customers - AfterSales CRM</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"outline": "#727785",
"on-tertiary-fixed": "#311400",
"on-tertiary": "#ffffff",
"primary": "#0058be",
"surface-container-highest": "#e1e2ec",
"error": "#ba1a1a",
"surface-container": "#ecedf7",
"secondary-container": "#dce2f3",
"on-tertiary-fixed-variant": "#723600",
"secondary-fixed": "#dce2f3",
"tertiary-fixed": "#ffdcc6",
"on-primary-fixed": "#001a42",
"surface-variant": "#e1e2ec",
"inverse-on-surface": "#eff0fa",
"background": "#f9f9ff",
"surface-container-lowest": "#ffffff",
"surface-bright": "#f9f9ff",
"surface": "#f9f9ff",
"on-tertiary-container": "#fffbff",
"surface-container-high": "#e6e7f2",
"on-primary": "#ffffff",
"outline-variant": "#c2c6d6",
"on-background": "#191b23",
"inverse-surface": "#2e3038",
"surface-dim": "#d8d9e3",
"on-error": "#ffffff",
"inverse-primary": "#adc6ff",
"primary-fixed-dim": "#adc6ff",
"on-secondary-fixed": "#151c27",
"on-secondary-container": "#5e6572",
"on-primary-container": "#fefcff",
"tertiary-container": "#b75b00",
"surface-tint": "#005ac2",
"on-primary-fixed-variant": "#004395",
"on-secondary-fixed-variant": "#404754",
"on-error-container": "#93000a",
"primary-fixed": "#d8e2ff",
"on-surface": "#191b23",
"on-secondary": "#ffffff",
"tertiary-fixed-dim": "#ffb786",
"surface-container-low": "#f2f3fd",
"tertiary": "#924700",
"secondary": "#585f6c",
"on-surface-variant": "#424754",
"error-container": "#ffdad6",
"secondary-fixed-dim": "#c0c7d6",
"primary-container": "#2170e4"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"nav-height": "56px",
"margin-x": "1.5rem",
"gutter": "1rem",
"container-max": "1280px",
"grid-columns-desktop": "12",
"stack-gap": "1.5rem",
"form-gap": "1.25rem"
},
"fontFamily": {
"h1": ["Manrope"],
"body-base": ["Inter"],
"h2": ["Manrope"],
"button": ["Inter"],
"body-sm": ["Inter"],
"label-semibold": ["Inter"],
"h3": ["Manrope"]
},
"fontSize": {
"h1": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
"body-base": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
"h2": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
"button": ["14px", { "lineHeight": "20px", "fontWeight": "500" }],
"body-sm": ["12px", { "lineHeight": "16px", "fontWeight": "400" }],
"label-semibold": ["14px", { "lineHeight": "20px", "fontWeight": "600" }],
"h3": ["18px", { "lineHeight": "24px", "fontWeight": "600" }]
}
}
}
}
</script>
</head>
<body class="bg-background text-on-surface font-body-base min-h-screen flex flex-col">
<!-- TopNavBar -->
<nav class="bg-surface-container-lowest font-body-base border-b border-outline-variant shadow-sm w-full top-0 sticky z-50 h-nav-height">
<div class="flex items-center justify-between w-full h-full px-margin-x max-w-[1280px] mx-auto">
<!-- Brand & Search -->
<div class="flex items-center gap-8">
<div class="text-h2 font-h2 text-primary font-bold">AfterSales CRM</div>
<!-- Search Bar -->
<div class="hidden md:flex relative items-center w-64">
<span class="material-symbols-outlined absolute left-3 text-on-surface-variant text-body-base">search</span>
<input class="w-full bg-surface-container border border-outline-variant rounded-DEFAULT py-1.5 pl-9 pr-3 text-body-base font-body-base focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-20 transition-all" placeholder="Search..." type="text"/>
</div>
</div>
<!-- Navigation Links -->
<div class="hidden md:flex items-center h-full gap-6">
<a class="h-full flex items-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Feedback</a>
<a class="h-full flex items-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Products</a>
<a class="h-full flex items-center text-primary border-b-2 border-primary pb-1 cursor-pointer active:opacity-80" href="#">Customers</a>
<a class="h-full flex items-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Channels</a>
<a class="h-full flex items-center text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Tags</a>
</div>
<!-- Trailing Actions -->
<div class="flex items-center gap-4">
<button class="relative p-1 text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80">
<span class="material-symbols-outlined">notifications</span>
<span class="absolute top-0 right-0 w-2 h-2 bg-error rounded-full"></span>
</button>
<button class="p-1 text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80">
<span class="material-symbols-outlined">settings</span>
</button>
<img alt="User profile" class="w-8 h-8 rounded-full border border-outline-variant ml-2 cursor-pointer" data-alt="Professional headshot of a business woman in modern office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBEWSayONhVE0XkvW0qkHKufwaAiQZpMbTIYSg-GxcLEqjFoxrjpVArJJs4Vl2Qrm87tQI1F1Oh4h-QHvV2IE3dMBRVRnvyE-sx6jGr7_q2NgILXs475LE-JuOGKjoWAQHs6Glw94tjt7bi_6u3eaaGsFLLHqsTY1XF-eua2eTxv3zE07JRsZIqO992aZ8nOVqzQUTrt7fAKVuXtF0KsmBOY8yqDvArLcC2DzsfRl_rgrXK2gwsDi6ZbuugToY6XBu6qusN6Vfv4rQ"/>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="flex-grow w-full max-w-[1280px] mx-auto px-margin-x py-8 flex flex-col gap-stack-gap">
<!-- Page Header -->
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
<div class="flex flex-col gap-1">
<div class="flex items-center gap-2 text-body-sm font-body-sm text-on-surface-variant">
<a class="hover:underline" href="#">Home</a>
<span class="material-symbols-outlined text-[14px]">chevron_right</span>
<span class="text-on-surface">Customers</span>
</div>
<h1 class="text-h1 font-h1 text-on-surface">Customers</h1>
</div>
<button class="bg-primary hover:bg-surface-tint text-on-primary text-button font-button py-2 px-4 rounded-DEFAULT transition-colors flex items-center gap-2 shadow-sm">
<span class="material-symbols-outlined text-[18px]">add</span>
+ New Customer
</button>
</div>
<!-- Filters & Table Container -->
<div class="bg-surface-container-lowest rounded-lg border border-outline-variant shadow-sm flex flex-col">
<!-- Toolbar / Filters -->
<div class="p-4 border-b border-outline-variant flex flex-col md:flex-row justify-between items-center gap-4 bg-surface-container-lowest rounded-t-lg">
<div class="relative w-full md:w-80">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-[18px]">search</span>
<input class="w-full bg-surface border border-outline-variant rounded-DEFAULT py-2 pl-10 pr-3 text-body-base font-body-base focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-20 transition-all" placeholder="Search customers..." type="text"/>
</div>
<div class="flex items-center gap-3 w-full md:w-auto">
<span class="text-body-sm font-label-semibold text-on-surface-variant">Status:</span>
<select class="bg-surface border border-outline-variant rounded-DEFAULT py-1.5 px-3 text-body-base font-body-base focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-20 text-on-surface appearance-none pr-8 relative">
<option value="all">All Statuses</option>
<option value="active">Active</option>
<option value="inactive">Inactive</option>
<option value="pending">Pending</option>
</select>
<!-- Custom select arrow since appearance-none removes default -->
<div class="pointer-events-none absolute right-5 top-1/2 -translate-y-1/2 md:static md:translate-y-0 md:-ml-8 flex items-center md:pointer-events-none">
<span class="material-symbols-outlined text-on-surface-variant text-[18px]">expand_more</span>
</div>
<button class="p-2 border border-outline-variant rounded-DEFAULT text-on-surface-variant hover:bg-surface-container transition-colors ml-auto md:ml-2">
<span class="material-symbols-outlined text-[18px]">filter_list</span>
</button>
</div>
</div>
<!-- Table -->
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead class="bg-surface-container-low border-b border-outline-variant">
<tr>
<th class="py-3 px-4 text-body-sm font-label-semibold text-on-surface-variant font-medium whitespace-nowrap">Name</th>
<th class="py-3 px-4 text-body-sm font-label-semibold text-on-surface-variant font-medium whitespace-nowrap">Email</th>
<th class="py-3 px-4 text-body-sm font-label-semibold text-on-surface-variant font-medium whitespace-nowrap">Phone</th>
<th class="py-3 px-4 text-body-sm font-label-semibold text-on-surface-variant font-medium whitespace-nowrap">Status</th>
<th class="py-3 px-4 text-body-sm font-label-semibold text-on-surface-variant font-medium whitespace-nowrap text-right">Products</th>
<th class="py-3 px-4 text-body-sm font-label-semibold text-on-surface-variant font-medium whitespace-nowrap text-right">Feedbacks</th>
<th class="py-3 px-4 text-body-sm font-label-semibold text-on-surface-variant font-medium whitespace-nowrap">Created</th>
<th class="py-3 px-4 w-10"></th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant">
<!-- Row 1 -->
<tr class="hover:bg-surface-container-low/50 transition-colors group cursor-pointer">
<td class="py-3 px-4">
<div class="flex items-center gap-3">
<img alt="Avatar" class="w-8 h-8 rounded-full bg-surface-variant" data-alt="Portrait of a young professional man in a bright setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAhQwuA6ymMlBKkGeg6X2kXhCnfLpgqqLaKYk_soBYxclNihoyDUyzrZOzUMgng1OIeNnykqDF68YjX8YQ7KK0f0XMZpd9uyE9GFSzdr1fWobvnGzLyedUeWICblVALTVVOuEqck5FNlVKC5Mu134dXtIu647-XTIePTFh8mEFEaLgwJxbbc4U2-jabJH9BgdUsVhMjyni7ns9AmGBOcdvuxTLtADMN3jI613s4OQ2LxzjozyqqbAmt65E12SUio8X-guHlJUFm9RM"/>
<span class="text-body-base font-label-semibold text-on-surface">Alex Mercer</span>
</div>
</td>
<td class="py-3 px-4 text-body-base font-body-base text-on-surface-variant">alex.m@example.com</td>
<td class="py-3 px-4 text-body-base font-body-base text-on-surface-variant">+1 (555) 123-4567</td>
<td class="py-3 px-4">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-body-sm font-label-semibold bg-primary-fixed text-on-primary-fixed-variant">Active</span>
</td>
<td class="py-3 px-4 text-body-base font-body-base text-on-surface text-right">3</td>
<td class="py-3 px-4 text-body-base font-body-base text-on-surface text-right">12</td>
<td class="py-3 px-4 text-body-base font-body-base text-on-surface-variant">Oct 12, 2023</td>
<td class="py-3 px-4 text-right">
<button class="text-on-surface-variant hover:text-primary opacity-0 group-hover:opacity-100 transition-all">
<span class="material-symbols-outlined text-[18px]">more_vert</span>
</button>
</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-surface-container-low/50 transition-colors group cursor-pointer">
<td class="py-3 px-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-tertiary-fixed text-on-tertiary-fixed flex items-center justify-center text-body-sm font-label-semibold">SJ</div>
<span class="text-body-base font-label-semibold text-on-surface">Sarah Jenkins</span>
</div>
</td>
<td class="py-3 px-4 text-body-base font-body-base text-on-surface-variant">s.jenkins@corp.com</td>
<td class="py-3 px-4 text-body-base font-body-base text-on-surface-variant">+44 20 7123 4567</td>
<td class="py-3 px-4">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-body-sm font-label-semibold bg-error-container text-on-error-container">Inactive</span>
</td>
<td class="py-3 px-4 text-body-base font-body-base text-on-surface text-right">1</td>
<td class="py-3 px-4 text-body-base font-body-base text-on-surface text-right">0</td>
<td class="py-3 px-4 text-body-base font-body-base text-on-surface-variant">Nov 05, 2023</td>
<td class="py-3 px-4 text-right">
<button class="text-on-surface-variant hover:text-primary opacity-0 group-hover:opacity-100 transition-all">
<span class="material-symbols-outlined text-[18px]">more_vert</span>
</button>
</td>
</tr>
<!-- Row 3 -->
<tr class="hover:bg-surface-container-low/50 transition-colors group cursor-pointer">
<td class="py-3 px-4">
<div class="flex items-center gap-3">
<img alt="Avatar" class="w-8 h-8 rounded-full bg-surface-variant" data-alt="Headshot of mature business woman with glasses" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD_Z8cJZFWwAh3GxgqdcumUyqAJa1msJi6hMSWRNpCBhxl_xokVz7Fjy3X_QFfxGfjAp0eEqV10yrZ0ECVV8F9glK3PuB8PXcB_eUeBI2h1Y4-2YBuwUEqt760GISEHBGOUx6aPByBUh9xWW2eGs8k0N4LWVmHoewsfQnYRMIG4yXchoQ5IWE4xQMmH5naefG9KeuC614lrnOLq65xVW5vovIgEkVf8Tp9rXTuL9ZezCBcDUPHvrCp0PyRpOchXUmjgzYdiWSpTM24"/>
<span class="text-body-base font-label-semibold text-on-surface">Elena Rodriguez</span>
</div>
</td>
<td class="py-3 px-4 text-body-base font-body-base text-on-surface-variant">elena.r@startup.io</td>
<td class="py-3 px-4 text-body-base font-body-base text-on-surface-variant">+1 (555) 987-6543</td>
<td class="py-3 px-4">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-body-sm font-label-semibold bg-secondary-container text-on-secondary-container">Pending</span>
</td>
<td class="py-3 px-4 text-body-base font-body-base text-on-surface text-right">5</td>
<td class="py-3 px-4 text-body-base font-body-base text-on-surface text-right">24</td>
<td class="py-3 px-4 text-body-base font-body-base text-on-surface-variant">Jan 18, 2024</td>
<td class="py-3 px-4 text-right">
<button class="text-on-surface-variant hover:text-primary opacity-0 group-hover:opacity-100 transition-all">
<span class="material-symbols-outlined text-[18px]">more_vert</span>
</button>
</td>
</tr>
<!-- Row 4 -->
<tr class="hover:bg-surface-container-low/50 transition-colors group cursor-pointer">
<td class="py-3 px-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-primary-fixed text-on-primary-fixed flex items-center justify-center text-body-sm font-label-semibold">DT</div>
<span class="text-body-base font-label-semibold text-on-surface">David Thompson</span>
</div>
</td>
<td class="py-3 px-4 text-body-base font-body-base text-on-surface-variant">david.t@globaltech.net</td>
<td class="py-3 px-4 text-body-base font-body-base text-on-surface-variant">+61 4 1234 5678</td>
<td class="py-3 px-4">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-body-sm font-label-semibold bg-primary-fixed text-on-primary-fixed-variant">Active</span>
</td>
<td class="py-3 px-4 text-body-base font-body-base text-on-surface text-right">2</td>
<td class="py-3 px-4 text-body-base font-body-base text-on-surface text-right">5</td>
<td class="py-3 px-4 text-body-base font-body-base text-on-surface-variant">Feb 02, 2024</td>
<td class="py-3 px-4 text-right">
<button class="text-on-surface-variant hover:text-primary opacity-0 group-hover:opacity-100 transition-all">
<span class="material-symbols-outlined text-[18px]">more_vert</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination (Placeholder) -->
<div class="p-4 border-t border-outline-variant flex items-center justify-between text-body-sm font-body-sm text-on-surface-variant bg-surface-container-lowest rounded-b-lg">
<span>Showing 1 to 4 of 24 entries</span>
<div class="flex gap-1">
<button class="px-2 py-1 border border-outline-variant rounded-DEFAULT hover:bg-surface-container disabled:opacity-50" disabled="">Prev</button>
<button class="px-2 py-1 border border-primary bg-primary text-on-primary rounded-DEFAULT">1</button>
<button class="px-2 py-1 border border-outline-variant rounded-DEFAULT hover:bg-surface-container">2</button>
<button class="px-2 py-1 border border-outline-variant rounded-DEFAULT hover:bg-surface-container">3</button>
<button class="px-2 py-1 border border-outline-variant rounded-DEFAULT hover:bg-surface-container">Next</button>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-surface-bright font-body-sm py-8 border-t border-outline-variant w-full mt-auto">
<div class="w-full flex flex-col md:flex-row justify-between items-center px-margin-x max-w-[1280px] mx-auto text-on-surface-variant text-xs">
<span class="mb-4 md:mb-0">© 2024 AfterSales CRM. All rights reserved.</span>
<div class="flex gap-4">
<a class="hover:underline hover:text-primary transition-all" href="#">Support</a>
<a class="hover:underline hover:text-primary transition-all" href="#">Privacy Policy</a>
<a class="hover:underline hover:text-primary transition-all" href="#">Terms of Service</a>
</div>
</div>
</footer>
</body></html>

BIN
webappUI/customer_list_desktop/code.html:Zone.Identifier Normal file
View File

Binary file not shown.

BIN
webappUI/customer_list_desktop/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 155 KiB

BIN
webappUI/customer_list_desktop/screen.png:Zone.Identifier Normal file
View File

Binary file not shown.

420
webappUI/dashboard_desktop/code.html Normal file
View File

@@ -0,0 +1,420 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>AfterSales CRM - Dashboard</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=Manrope:wght@600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-primary-fixed": "#001a42",
"surface-dim": "#d8d9e3",
"tertiary": "#924700",
"tertiary-container": "#b75b00",
"surface-container-lowest": "#ffffff",
"on-primary-container": "#fefcff",
"secondary": "#585f6c",
"on-primary-fixed-variant": "#004395",
"inverse-primary": "#adc6ff",
"on-surface": "#191b23",
"on-tertiary-fixed-variant": "#723600",
"surface-container": "#ecedf7",
"on-background": "#191b23",
"secondary-fixed": "#dce2f3",
"surface-container-highest": "#e1e2ec",
"surface-variant": "#e1e2ec",
"error-container": "#ffdad6",
"primary-fixed": "#d8e2ff",
"surface": "#f9f9ff",
"surface-container-low": "#f2f3fd",
"on-tertiary-fixed": "#311400",
"on-tertiary": "#ffffff",
"on-secondary": "#ffffff",
"inverse-on-surface": "#eff0fa",
"secondary-fixed-dim": "#c0c7d6",
"on-secondary-fixed-variant": "#404754",
"tertiary-fixed-dim": "#ffb786",
"primary-fixed-dim": "#adc6ff",
"surface-bright": "#f9f9ff",
"on-primary": "#ffffff",
"on-tertiary-container": "#fffbff",
"tertiary-fixed": "#ffdcc6",
"on-secondary-fixed": "#151c27",
"on-secondary-container": "#5e6572",
"on-surface-variant": "#424754",
"primary-container": "#2170e4",
"primary": "#0058be",
"on-error-container": "#93000a",
"surface-container-high": "#e6e7f2",
"secondary-container": "#dce2f3",
"surface-tint": "#005ac2",
"on-error": "#ffffff",
"inverse-surface": "#2e3038",
"background": "#f9f9ff",
"outline": "#727785",
"outline-variant": "#c2c6d6",
"error": "#ba1a1a"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"stack-gap": "1.5rem",
"nav-height": "56px",
"margin-x": "1.5rem",
"form-gap": "1.25rem",
"container-max": "1280px",
"grid-columns-desktop": "12",
"gutter": "1rem"
},
"fontFamily": {
"body-base": ["Inter"],
"body-sm": ["Inter"],
"h3": ["Manrope"],
"h1": ["Manrope"],
"h2": ["Manrope"],
"label-semibold": ["Inter"],
"button": ["Inter"]
},
"fontSize": {
"body-base": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
"body-sm": ["12px", { "lineHeight": "16px", "fontWeight": "400" }],
"h3": ["18px", { "lineHeight": "24px", "fontWeight": "600" }],
"h1": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
"h2": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
"label-semibold": ["14px", { "lineHeight": "20px", "fontWeight": "600" }],
"button": ["14px", { "lineHeight": "20px", "fontWeight": "500" }]
}
}
}
}
</script>
</head>
<body class="bg-background text-on-background min-h-screen font-body-base">
<!-- TopNavBar from JSON Component 3 -->
<header class="bg-surface-container-lowest border-b border-surface-container-high fixed top-0 w-full h-[56px] shadow-sm z-50">
<div class="flex items-center justify-between px-6 max-w-[1280px] mx-auto w-full h-full">
<div class="flex items-center gap-8">
<!-- Brand Logo -->
<div class="text-xl font-bold text-primary font-h1">
AfterSales CRM
</div>
<!-- Navigation Links -->
<nav class="hidden md:flex items-center gap-6 h-full mt-4">
<!-- Dashboard is Active -->
<a class="text-primary border-b-2 border-primary pb-4 font-body-base font-medium transition-colors" href="#">
Dashboard
</a>
<a class="text-on-surface-variant pb-4 hover:text-primary transition-colors font-body-base font-medium" href="#">
Customer Care
</a>
<a class="text-on-surface-variant pb-4 hover:text-primary transition-colors font-body-base font-medium" href="#">
Management
</a>
</nav>
</div>
<!-- Trailing Actions -->
<div class="flex items-center gap-4">
<button class="relative p-2 text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-70 rounded-full hover:bg-surface-container-low">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">notifications</span>
<span class="absolute top-1.5 right-1.5 w-2 h-2 bg-error rounded-full border border-surface-container-lowest"></span>
</button>
<div class="flex items-center gap-3 border-l border-surface-container-high pl-4">
<span class="text-on-surface-variant font-body-sm font-medium hidden sm:block">Admin</span>
<img alt="User avatar" class="w-8 h-8 rounded-full border border-surface-variant cursor-pointer active:opacity-70" data-alt="professional headshot of a middle-aged man in a modern office environment, soft natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCeu44rd8DoV9RPduY5T5quf8GwR042hpMguBxD-yPHS7DtBiwx9sM_dKq3ztv79v8T0SxSB4M5t1OF45hPhuExOiAe8huQ_Vq1ouXQh6Ia-qobf0h3xrszF93sqP0DRzmupGHW2gop0puS8YXhWCKXL08DMdDTXC_VAUrCevCWooDlvrQPWmbYjcKeGB5v_2vzy28Ii8pRBX2RkmEjZN0u92tSBPMt9t_IvYvtIen1DN6Wk5uajkfCmAMZ09ZFa3BPCtiCaazdtfs"/>
</div>
</div>
</div>
</header>
<!-- Main Content Canvas -->
<main class="pt-[80px] pb-12 px-margin-x max-w-container-max mx-auto">
<!-- Page Header -->
<div class="mb-stack-gap flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div>
<h1 class="font-h1 text-h1 text-on-background">Dashboard Overview</h1>
<p class="font-body-base text-body-base text-on-surface-variant mt-1">Real-time metrics and ticket tracking.</p>
</div>
<div class="flex items-center gap-3">
<button class="bg-surface-container-lowest border border-outline-variant text-on-surface font-button text-button px-4 py-2 rounded shadow-sm hover:bg-surface-container-low transition-colors flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">calendar_today</span>
Last 30 Days
</button>
<button class="bg-primary text-on-primary font-button text-button px-4 py-2 rounded shadow-sm hover:bg-primary-container transition-colors">
Export Report
</button>
</div>
</div>
<!-- Stat Cards Grid (4 columns) -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-gutter mb-stack-gap">
<!-- Resolved Tickets -->
<div class="bg-surface-container-lowest border border-surface-container-high rounded-lg p-5 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden group">
<div class="absolute top-0 left-0 w-1 h-full bg-[#22c55e]"></div>
<div class="flex justify-between items-start mb-4">
<h3 class="font-label-semibold text-label-semibold text-on-surface-variant">Resolved Tickets</h3>
<div class="p-2 bg-[#dcfce7] rounded-full text-[#15803d]">
<span class="material-symbols-outlined text-[20px]">check_circle</span>
</div>
</div>
<div class="flex items-baseline gap-2">
<span class="font-h1 text-[32px] font-bold text-on-background">128</span>
<span class="font-body-sm text-body-sm text-[#15803d] flex items-center">
<span class="material-symbols-outlined text-[14px]">trending_up</span> 12%
</span>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">vs last month</p>
</div>
<!-- Avg Time -->
<div class="bg-surface-container-lowest border border-surface-container-high rounded-lg p-5 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden group">
<div class="absolute top-0 left-0 w-1 h-full bg-[#f59e0b]"></div>
<div class="flex justify-between items-start mb-4">
<h3 class="font-label-semibold text-label-semibold text-on-surface-variant">Avg Resolution Time</h3>
<div class="p-2 bg-[#fef3c7] rounded-full text-[#b45309]">
<span class="material-symbols-outlined text-[20px]">timer</span>
</div>
</div>
<div class="flex items-baseline gap-2">
<span class="font-h1 text-[32px] font-bold text-on-background">45 <span class="text-h3 text-on-surface-variant">min</span></span>
<span class="font-body-sm text-body-sm text-[#b45309] flex items-center">
<span class="material-symbols-outlined text-[14px]">trending_down</span> 5%
</span>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">vs last month</p>
</div>
<!-- Pending Tickets -->
<div class="bg-surface-container-lowest border border-surface-container-high rounded-lg p-5 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden group">
<div class="absolute top-0 left-0 w-1 h-full bg-[#ef4444]"></div>
<div class="flex justify-between items-start mb-4">
<h3 class="font-label-semibold text-label-semibold text-on-surface-variant">Pending Tickets</h3>
<div class="p-2 bg-[#fee2e2] rounded-full text-[#b91c1c]">
<span class="material-symbols-outlined text-[20px]">pending_actions</span>
</div>
</div>
<div class="flex items-baseline gap-2">
<span class="font-h1 text-[32px] font-bold text-on-background">12</span>
<span class="font-body-sm text-body-sm text-[#b91c1c] flex items-center">
<span class="material-symbols-outlined text-[14px]">trending_up</span> 2
</span>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">requires immediate action</p>
</div>
<!-- Escalated -->
<div class="bg-surface-container-lowest border border-surface-container-high rounded-lg p-5 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden group">
<div class="absolute top-0 left-0 w-1 h-full bg-[#6b7280]"></div>
<div class="flex justify-between items-start mb-4">
<h3 class="font-label-semibold text-label-semibold text-on-surface-variant">Escalated</h3>
<div class="p-2 bg-[#f3f4f6] rounded-full text-[#374151]">
<span class="material-symbols-outlined text-[20px]">assignment_late</span>
</div>
</div>
<div class="flex items-baseline gap-2">
<span class="font-h1 text-[32px] font-bold text-on-background">5</span>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">assigned to management</p>
</div>
</div>
<!-- Middle Section: Chart & Quick Actions (Asymmetric Layout) -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-gutter mb-stack-gap">
<!-- Bar Chart: Avg Processing Time by Handler (Takes up 2 cols) -->
<div class="bg-surface-container-lowest border border-surface-container-high rounded-lg shadow-sm lg:col-span-2 flex flex-col">
<div class="px-6 py-4 border-b border-surface-container-high flex justify-between items-center">
<h2 class="font-h2 text-h2 text-on-background">Avg Processing Time by Handler</h2>
<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined">more_vert</span></button>
</div>
<div class="p-6 flex-grow flex items-end justify-around gap-2 h-[300px] relative">
<!-- Y-axis labels (mocked) -->
<div class="absolute left-6 top-6 bottom-12 w-8 flex flex-col justify-between text-on-surface-variant font-body-sm text-body-sm text-right pr-2">
<span>60m</span>
<span>45m</span>
<span>30m</span>
<span>15m</span>
<span>0m</span>
</div>
<!-- Chart Bars (Mocked) -->
<div class="w-full pl-12 pr-4 flex justify-around items-end h-[240px] border-b border-surface-container-high relative">
<!-- Horizontal Grid Lines -->
<div class="absolute w-full border-t border-surface-container-low top-[0%] left-0"></div>
<div class="absolute w-full border-t border-surface-container-low top-[25%] left-0"></div>
<div class="absolute w-full border-t border-surface-container-low top-[50%] left-0"></div>
<div class="absolute w-full border-t border-surface-container-low top-[75%] left-0"></div>
<!-- Bar 1 -->
<div class="flex flex-col items-center w-1/5 group relative z-10">
<div class="w-12 bg-primary-fixed rounded-t-sm hover:bg-primary transition-colors h-[180px] cursor-pointer"></div>
<span class="mt-2 font-body-sm text-body-sm text-on-surface-variant truncate w-full text-center">Alice W.</span>
</div>
<!-- Bar 2 -->
<div class="flex flex-col items-center w-1/5 group relative z-10">
<div class="w-12 bg-primary rounded-t-sm hover:bg-primary-container transition-colors h-[210px] cursor-pointer"></div>
<span class="mt-2 font-body-sm text-body-sm text-on-surface-variant truncate w-full text-center">Bob M.</span>
</div>
<!-- Bar 3 -->
<div class="flex flex-col items-center w-1/5 group relative z-10">
<div class="w-12 bg-primary-fixed rounded-t-sm hover:bg-primary transition-colors h-[150px] cursor-pointer"></div>
<span class="mt-2 font-body-sm text-body-sm text-on-surface-variant truncate w-full text-center">Charlie D.</span>
</div>
<!-- Bar 4 -->
<div class="flex flex-col items-center w-1/5 group relative z-10">
<div class="w-12 bg-primary-fixed rounded-t-sm hover:bg-primary transition-colors h-[190px] cursor-pointer"></div>
<span class="mt-2 font-body-sm text-body-sm text-on-surface-variant truncate w-full text-center">Diana S.</span>
</div>
<!-- Bar 5 -->
<div class="flex flex-col items-center w-1/5 group relative z-10">
<div class="w-12 bg-tertiary-fixed-dim rounded-t-sm hover:bg-tertiary transition-colors h-[230px] cursor-pointer"></div>
<span class="mt-2 font-body-sm text-body-sm text-on-surface-variant truncate w-full text-center">Evan T.</span>
</div>
</div>
</div>
</div>
<!-- Bento/Glass Card for Quick Insights -->
<div class="bg-gradient-to-br from-surface-container-low to-surface-container-lowest border border-surface-container-high rounded-lg shadow-sm p-6 relative overflow-hidden flex flex-col justify-between">
<!-- Decorative background element -->
<div class="absolute -right-10 -top-10 w-40 h-40 bg-primary-fixed-dim rounded-full blur-3xl opacity-20"></div>
<div>
<h2 class="font-h2 text-h2 text-on-background mb-4">System Insights</h2>
<div class="space-y-4">
<div class="flex items-start gap-3 bg-surface-container-lowest p-3 rounded border border-surface-container-high shadow-sm">
<span class="material-symbols-outlined text-[#f59e0b] mt-0.5">warning</span>
<div>
<h4 class="font-label-semibold text-label-semibold text-on-surface">High Volume Alert</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">Returns department seeing 20% higher volume today.</p>
</div>
</div>
<div class="flex items-start gap-3 bg-surface-container-lowest p-3 rounded border border-surface-container-high shadow-sm">
<span class="material-symbols-outlined text-primary mt-0.5">check_circle</span>
<div>
<h4 class="font-label-semibold text-label-semibold text-on-surface">SLA Target Met</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">Global resolution time is under 48 hours target.</p>
</div>
</div>
</div>
</div>
<button class="mt-6 w-full bg-surface-container border border-outline-variant text-on-surface font-button text-button py-2 rounded shadow-sm hover:bg-surface-container-highest transition-colors">
View All Reports
</button>
</div>
</div>
<!-- Table: Tickets Awaiting Closure -->
<div class="bg-surface-container-lowest border border-surface-container-high rounded-lg shadow-sm overflow-hidden mb-8">
<div class="px-6 py-4 border-b border-surface-container-high flex justify-between items-center bg-surface">
<h2 class="font-h2 text-h2 text-on-background">Tickets Awaiting Closure</h2>
<div class="flex gap-2">
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-[18px]">search</span>
<input class="pl-9 pr-4 py-1.5 border border-outline-variant rounded font-body-base text-body-base text-on-surface focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none" placeholder="Search tickets..." type="text"/>
</div>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse min-w-[800px]">
<thead>
<tr class="bg-surface-container-low border-b border-surface-container-high">
<th class="px-6 py-3 font-label-semibold text-label-semibold text-on-surface-variant font-medium">#</th>
<th class="px-6 py-3 font-label-semibold text-label-semibold text-on-surface-variant font-medium">Ticket</th>
<th class="px-6 py-3 font-label-semibold text-label-semibold text-on-surface-variant font-medium">Customer</th>
<th class="px-6 py-3 font-label-semibold text-label-semibold text-on-surface-variant font-medium">Handler</th>
<th class="px-6 py-3 font-label-semibold text-label-semibold text-on-surface-variant font-medium">Department</th>
<th class="px-6 py-3 font-label-semibold text-label-semibold text-on-surface-variant font-medium">Resolved Date</th>
<th class="px-6 py-3 font-label-semibold text-label-semibold text-on-surface-variant font-medium text-right">Actions</th>
</tr>
</thead>
<tbody class="font-body-base text-body-base text-on-surface">
<!-- Row 1 -->
<tr class="border-b border-surface-container-high hover:bg-surface-container-lowest transition-colors">
<td class="px-6 py-4 text-on-surface-variant">1</td>
<td class="px-6 py-4"><a class="text-primary hover:underline font-medium" href="#">TKT-8902</a></td>
<td class="px-6 py-4">TechCorp Inc.</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<div class="w-6 h-6 rounded-full bg-primary-fixed text-primary text-[10px] flex items-center justify-center font-bold">AW</div>
Alice W.
</div>
</td>
<td class="px-6 py-4">Hardware Support</td>
<td class="px-6 py-4 text-on-surface-variant">Oct 24, 2023</td>
<td class="px-6 py-4 text-right">
<button class="text-primary hover:text-primary-container font-button text-button">Close Ticket</button>
</td>
</tr>
<!-- Row 2 -->
<tr class="border-b border-surface-container-high hover:bg-surface-container-lowest transition-colors bg-surface-bright">
<td class="px-6 py-4 text-on-surface-variant">2</td>
<td class="px-6 py-4"><a class="text-primary hover:underline font-medium" href="#">TKT-8905</a></td>
<td class="px-6 py-4">Jane Smith</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<div class="w-6 h-6 rounded-full bg-secondary-fixed text-secondary text-[10px] flex items-center justify-center font-bold">BM</div>
Bob M.
</div>
</td>
<td class="px-6 py-4">Billing</td>
<td class="px-6 py-4 text-on-surface-variant">Oct 24, 2023</td>
<td class="px-6 py-4 text-right">
<button class="text-primary hover:text-primary-container font-button text-button">Close Ticket</button>
</td>
</tr>
<!-- Row 3 -->
<tr class="border-b border-surface-container-high hover:bg-surface-container-lowest transition-colors">
<td class="px-6 py-4 text-on-surface-variant">3</td>
<td class="px-6 py-4"><a class="text-primary hover:underline font-medium" href="#">TKT-8911</a></td>
<td class="px-6 py-4">Acme Logistics</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<div class="w-6 h-6 rounded-full bg-tertiary-fixed text-tertiary-container text-[10px] flex items-center justify-center font-bold">CD</div>
Charlie D.
</div>
</td>
<td class="px-6 py-4">Software Config</td>
<td class="px-6 py-4 text-on-surface-variant">Oct 23, 2023</td>
<td class="px-6 py-4 text-right">
<button class="text-primary hover:text-primary-container font-button text-button">Close Ticket</button>
</td>
</tr>
<!-- Row 4 -->
<tr class="hover:bg-surface-container-lowest transition-colors bg-surface-bright">
<td class="px-6 py-4 text-on-surface-variant">4</td>
<td class="px-6 py-4"><a class="text-primary hover:underline font-medium" href="#">TKT-8915</a></td>
<td class="px-6 py-4">Global Retail</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<div class="w-6 h-6 rounded-full bg-error-container text-on-error-container text-[10px] flex items-center justify-center font-bold">DS</div>
Diana S.
</div>
</td>
<td class="px-6 py-4">Returns</td>
<td class="px-6 py-4 text-on-surface-variant">Oct 22, 2023</td>
<td class="px-6 py-4 text-right">
<button class="text-primary hover:text-primary-container font-button text-button">Close Ticket</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination Footer -->
<div class="px-6 py-3 border-t border-surface-container-high bg-surface-container-lowest flex justify-between items-center">
<span class="font-body-sm text-body-sm text-on-surface-variant">Showing 1 to 4 of 12 entries</span>
<div class="flex gap-1">
<button class="p-1 rounded text-on-surface-variant hover:bg-surface-container-low disabled:opacity-50" disabled="">
<span class="material-symbols-outlined text-[20px]">chevron_left</span>
</button>
<button class="w-8 h-8 rounded bg-primary text-on-primary font-body-sm font-medium flex items-center justify-center">1</button>
<button class="w-8 h-8 rounded hover:bg-surface-container-low text-on-surface font-body-sm font-medium flex items-center justify-center">2</button>
<button class="w-8 h-8 rounded hover:bg-surface-container-low text-on-surface font-body-sm font-medium flex items-center justify-center">3</button>
<button class="p-1 rounded text-on-surface-variant hover:bg-surface-container-low">
<span class="material-symbols-outlined text-[20px]">chevron_right</span>
</button>
</div>
</div>
</div>
</main>
</body></html>

BIN
webappUI/dashboard_desktop/code.html:Zone.Identifier Normal file
View File

Binary file not shown.

BIN
webappUI/dashboard_desktop/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 309 KiB

BIN
webappUI/dashboard_desktop/screen.png:Zone.Identifier Normal file
View File

Binary file not shown.

355
webappUI/edit_customer_desktop/code.html Normal file
View File

@@ -0,0 +1,355 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Edit Customer - AfterSales CRM</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=Manrope:wght@500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"outline": "#727785",
"on-tertiary-fixed": "#311400",
"on-tertiary": "#ffffff",
"primary": "#0058be",
"surface-container-highest": "#e1e2ec",
"error": "#ba1a1a",
"surface-container": "#ecedf7",
"secondary-container": "#dce2f3",
"on-tertiary-fixed-variant": "#723600",
"secondary-fixed": "#dce2f3",
"tertiary-fixed": "#ffdcc6",
"on-primary-fixed": "#001a42",
"surface-variant": "#e1e2ec",
"inverse-on-surface": "#eff0fa",
"background": "#f9f9ff",
"surface-container-lowest": "#ffffff",
"surface-bright": "#f9f9ff",
"surface": "#f9f9ff",
"on-tertiary-container": "#fffbff",
"surface-container-high": "#e6e7f2",
"on-primary": "#ffffff",
"outline-variant": "#c2c6d6",
"on-background": "#191b23",
"inverse-surface": "#2e3038",
"surface-dim": "#d8d9e3",
"on-error": "#ffffff",
"inverse-primary": "#adc6ff",
"primary-fixed-dim": "#adc6ff",
"on-secondary-fixed": "#151c27",
"on-secondary-container": "#5e6572",
"on-primary-container": "#fefcff",
"tertiary-container": "#b75b00",
"surface-tint": "#005ac2",
"on-primary-fixed-variant": "#004395",
"on-secondary-fixed-variant": "#404754",
"on-error-container": "#93000a",
"primary-fixed": "#d8e2ff",
"on-surface": "#191b23",
"on-secondary": "#ffffff",
"tertiary-fixed-dim": "#ffb786",
"surface-container-low": "#f2f3fd",
"tertiary": "#924700",
"secondary": "#585f6c",
"on-surface-variant": "#424754",
"error-container": "#ffdad6",
"secondary-fixed-dim": "#c0c7d6",
"primary-container": "#2170e4"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"nav-height": "56px",
"margin-x": "1.5rem",
"gutter": "1rem",
"container-max": "1280px",
"grid-columns-desktop": "12",
"stack-gap": "1.5rem",
"form-gap": "1.25rem"
},
"fontFamily": {
"h1": ["Manrope"],
"body-base": ["Inter"],
"h2": ["Manrope"],
"button": ["Inter"],
"body-sm": ["Inter"],
"label-semibold": ["Inter"],
"h3": ["Manrope"]
},
"fontSize": {
"h1": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
"body-base": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
"h2": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
"button": ["14px", { "lineHeight": "20px", "fontWeight": "500" }],
"body-sm": ["12px", { "lineHeight": "16px", "fontWeight": "400" }],
"label-semibold": ["14px", { "lineHeight": "20px", "fontWeight": "600" }],
"h3": ["18px", { "lineHeight": "24px", "fontWeight": "600" }]
}
}
}
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.fill {
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
</style>
</head>
<body class="bg-background text-on-background font-body-base min-h-screen flex flex-col">
<!-- TopNavBar -->
<header class="bg-white dark:bg-gray-900 font-manrope text-sm font-medium docked full-width top-0 border-b border-b border-gray-200 dark:border-gray-800 shadow-sm sticky top-0 z-50 flex items-center justify-between w-full h-14 px-6 max-w-[1280px] mx-auto">
<div class="flex items-center gap-8">
<div class="text-xl font-bold text-blue-600 dark:text-blue-400">AfterSales CRM</div>
<nav class="hidden md:flex gap-6 items-center h-full">
<a class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center h-full pt-1" href="#">Feedback</a>
<a class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center h-full pt-1" href="#">Products</a>
<a class="text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 pb-1 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center h-full pt-1" href="#">Customers</a>
<a class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center h-full pt-1" href="#">Channels</a>
<a class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center h-full pt-1" href="#">Tags</a>
</nav>
</div>
<div class="flex items-center gap-4">
<button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center justify-center w-8 h-8 rounded-full">
<span class="material-symbols-outlined text-[20px]">notifications</span>
</button>
<button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center justify-center w-8 h-8 rounded-full">
<span class="material-symbols-outlined text-[20px]">settings</span>
</button>
<div class="w-8 h-8 rounded-full bg-surface-container overflow-hidden border border-outline-variant flex-shrink-0 ml-2">
<img alt="User profile" class="w-full h-full object-cover" data-alt="close up portrait of a professional man in a modern office environment with soft natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBO4yq_Aan0j2nuVXjQc-EslHqkxgUACCMlmngyoq8rMbOWTx31dbPPXxV4dPegkdtZLScBNW08dJlKE7FwENp0TjvR1K78ixpYqglg56lpC0lucZiHATRe7LZanaoBuBvh8InaMSSsJyF4QBWdKelBXmR4h4KEkv8G8YYGMC5rr9_aaGkczYPk24EMqFPqIZ1P2A5j17ps_REz3LhWI8MKOLhQPrm7QrnX-MySCLWAnu9u0uFxeEABjOX4VXKnI0h0_dBlUC06VT8"/>
</div>
</div>
</header>
<!-- Main Canvas -->
<main class="flex-1 w-full max-w-[1280px] mx-auto px-margin-x py-8 flex flex-col gap-stack-gap">
<!-- Header Section -->
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
<div>
<div class="flex items-center gap-2 text-on-surface-variant font-body-sm text-body-sm mb-1">
<a class="hover:text-primary transition-colors" href="#">Customers</a>
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
<span class="text-on-surface">Alex Mercer</span>
</div>
<h1 class="font-h1 text-h1 text-on-background flex items-center gap-3">
<div class="w-10 h-10 rounded bg-primary-fixed text-on-primary-fixed flex items-center justify-center font-bold text-lg">AM</div>
Edit Customer Profile
</h1>
</div>
<div class="flex items-center gap-3 w-full md:w-auto">
<button class="flex-1 md:flex-none bg-surface-container-lowest text-on-surface border border-outline-variant font-button text-button rounded-lg px-4 py-2 hover:bg-surface-container transition-colors focus:ring-2 focus:ring-primary/20 outline-none" type="button">Cancel</button>
<button class="flex-1 md:flex-none bg-primary text-on-primary font-button text-button rounded-lg px-4 py-2 hover:bg-surface-tint transition-colors shadow-sm focus:ring-2 focus:ring-primary/20 outline-none flex items-center justify-center gap-2" type="button">
<span class="material-symbols-outlined text-[18px]">save</span>
Save Changes
</button>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
<!-- Left Column: Form -->
<div class="lg:col-span-4 flex flex-col gap-6">
<!-- Contact Info Card -->
<div class="bg-surface-container-lowest shadow-sm rounded-xl border border-outline-variant overflow-hidden">
<div class="px-6 py-4 border-b border-outline-variant bg-surface-bright flex items-center justify-between">
<h2 class="font-h3 text-h3 text-on-surface">Contact Information</h2>
</div>
<div class="p-6 flex flex-col gap-form-gap">
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Full Name</label>
<input class="w-full font-body-base text-body-base bg-surface-container-lowest border border-outline-variant rounded-lg px-3 py-2 text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-shadow" type="text" value="Alex Mercer"/>
</div>
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Email Address</label>
<input class="w-full font-body-base text-body-base bg-surface-container-lowest border border-outline-variant rounded-lg px-3 py-2 text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-shadow" type="email" value="alex.mercer@example.com"/>
</div>
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Phone Number</label>
<input class="w-full font-body-base text-body-base bg-surface-container-lowest border border-outline-variant rounded-lg px-3 py-2 text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-shadow" type="tel" value="+1 (555) 019-2834"/>
</div>
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Account Status</label>
<div class="flex items-center gap-3">
<label class="flex items-center gap-2 cursor-pointer">
<input checked="" class="w-4 h-4 text-primary bg-surface-container-lowest border-outline-variant focus:ring-primary" name="status" type="radio" value="active"/>
<span class="font-body-base text-body-base text-on-surface">Active</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input class="w-4 h-4 text-primary bg-surface-container-lowest border-outline-variant focus:ring-primary" name="status" type="radio" value="inactive"/>
<span class="font-body-base text-body-base text-on-surface">Inactive</span>
</label>
</div>
</div>
</div>
</div>
<!-- Owned Products Card -->
<div class="bg-surface-container-lowest shadow-sm rounded-xl border border-outline-variant overflow-hidden">
<div class="px-6 py-4 border-b border-outline-variant bg-surface-bright flex items-center justify-between">
<h2 class="font-h3 text-h3 text-on-surface">Owned Products</h2>
<button class="text-primary hover:text-surface-tint flex items-center gap-1 font-button text-button transition-colors" type="button">
<span class="material-symbols-outlined text-[18px]">add</span>
Add
</button>
</div>
<div class="p-6">
<div class="flex flex-wrap gap-2">
<div class="inline-flex items-center gap-1.5 bg-secondary-container text-on-secondary-container font-body-sm text-body-sm px-2.5 py-1.5 rounded-lg border border-outline-variant/30">
<span>Pro Series Router AC3200</span>
<button class="hover:text-error transition-colors flex items-center justify-center rounded-full p-0.5 hover:bg-white/50"><span class="material-symbols-outlined text-[14px]">close</span></button>
</div>
<div class="inline-flex items-center gap-1.5 bg-secondary-container text-on-secondary-container font-body-sm text-body-sm px-2.5 py-1.5 rounded-lg border border-outline-variant/30">
<span>Mesh Wi-Fi Node (Gen 2)</span>
<button class="hover:text-error transition-colors flex items-center justify-center rounded-full p-0.5 hover:bg-white/50"><span class="material-symbols-outlined text-[14px]">close</span></button>
</div>
</div>
<div class="mt-4 relative">
<input class="w-full font-body-base text-body-base bg-surface-container-lowest border border-outline-variant rounded-lg pl-9 pr-3 py-2 text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-shadow" placeholder="Search products..." type="text"/>
<span class="material-symbols-outlined absolute left-3 top-2.5 text-on-surface-variant text-[18px]">search</span>
</div>
</div>
</div>
</div>
<!-- Right Column: Tabs & Table -->
<div class="lg:col-span-8 flex flex-col gap-6">
<!-- Address Card (Span full width of right col) -->
<div class="bg-surface-container-lowest shadow-sm rounded-xl border border-outline-variant overflow-hidden">
<div class="px-6 py-4 border-b border-outline-variant bg-surface-bright">
<h2 class="font-h3 text-h3 text-on-surface">Billing Address</h2>
</div>
<div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-form-gap">
<div class="flex flex-col gap-1.5 md:col-span-2">
<label class="font-label-semibold text-label-semibold text-on-surface">Street Address</label>
<input class="w-full font-body-base text-body-base bg-surface-container-lowest border border-outline-variant rounded-lg px-3 py-2 text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-shadow" type="text" value="1234 Silicon Valley Blvd, Suite 200"/>
</div>
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">City</label>
<input class="w-full font-body-base text-body-base bg-surface-container-lowest border border-outline-variant rounded-lg px-3 py-2 text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-shadow" type="text" value="San Jose"/>
</div>
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">State/Province</label>
<input class="w-full font-body-base text-body-base bg-surface-container-lowest border border-outline-variant rounded-lg px-3 py-2 text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-shadow" type="text" value="CA"/>
</div>
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">ZIP/Postal Code</label>
<input class="w-full font-body-base text-body-base bg-surface-container-lowest border border-outline-variant rounded-lg px-3 py-2 text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-shadow" type="text" value="95129"/>
</div>
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Country</label>
<select class="w-full font-body-base text-body-base bg-surface-container-lowest border border-outline-variant rounded-lg px-3 py-2 text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-shadow appearance-none">
<option selected="" value="US">United States</option>
<option value="CA">Canada</option>
<option value="UK">United Kingdom</option>
</select>
</div>
</div>
</div>
<!-- Tabs Section -->
<div class="bg-surface-container-lowest shadow-sm rounded-xl border border-outline-variant overflow-hidden flex flex-col h-full min-h-[400px]">
<div class="px-6 border-b border-outline-variant bg-surface-bright flex items-center gap-6 overflow-x-auto">
<button class="py-4 text-on-surface-variant hover:text-on-surface font-label-semibold text-label-semibold transition-colors border-b-2 border-transparent whitespace-nowrap">Activity Log</button>
<button class="py-4 text-primary border-b-2 border-primary font-label-semibold text-label-semibold transition-colors whitespace-nowrap">Feedback History</button>
<button class="py-4 text-on-surface-variant hover:text-on-surface font-label-semibold text-label-semibold transition-colors border-b-2 border-transparent whitespace-nowrap">Service Tickets</button>
</div>
<!-- Table Container -->
<div class="overflow-x-auto flex-1">
<table class="w-full text-left border-collapse min-w-[800px]">
<thead>
<tr class="bg-surface-container-lowest border-b border-outline-variant">
<th class="py-3 px-6 font-label-semibold text-body-sm text-on-surface-variant font-medium">Title</th>
<th class="py-3 px-6 font-label-semibold text-body-sm text-on-surface-variant font-medium">Product</th>
<th class="py-3 px-6 font-label-semibold text-body-sm text-on-surface-variant font-medium">Status</th>
<th class="py-3 px-6 font-label-semibold text-body-sm text-on-surface-variant font-medium">Tags</th>
<th class="py-3 px-6 font-label-semibold text-body-sm text-on-surface-variant font-medium">Channel</th>
<th class="py-3 px-6 font-label-semibold text-body-sm text-on-surface-variant font-medium text-right">Interactions</th>
<th class="py-3 px-6 font-label-semibold text-body-sm text-on-surface-variant font-medium text-right">Created</th>
</tr>
</thead>
<tbody class="font-body-base text-body-base text-on-surface divide-y divide-outline-variant/50">
<tr class="hover:bg-surface-container-low transition-colors group">
<td class="py-3 px-6">
<a class="font-medium text-primary group-hover:underline" href="#">Router keeps dropping connection on 5GHz</a>
</td>
<td class="py-3 px-6 text-on-surface-variant">Pro Series Router AC3200</td>
<td class="py-3 px-6">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-error-container text-on-error-container">Open</span>
</td>
<td class="py-3 px-6">
<div class="flex gap-1">
<span class="inline-block px-1.5 py-0.5 bg-surface-container rounded text-xs text-on-surface-variant border border-outline-variant/30">Connectivity</span>
<span class="inline-block px-1.5 py-0.5 bg-surface-container rounded text-xs text-on-surface-variant border border-outline-variant/30">Urgent</span>
</div>
</td>
<td class="py-3 px-6 text-on-surface-variant flex items-center gap-1.5">
<span class="material-symbols-outlined text-[16px]">mail</span> Email
</td>
<td class="py-3 px-6 text-right text-on-surface-variant">4</td>
<td class="py-3 px-6 text-right text-on-surface-variant">Oct 12, 2024</td>
</tr>
<tr class="hover:bg-surface-container-low transition-colors group">
<td class="py-3 px-6">
<a class="font-medium text-primary group-hover:underline" href="#">Feature Request: Guest Network Scheduling</a>
</td>
<td class="py-3 px-6 text-on-surface-variant">Pro Series Router AC3200</td>
<td class="py-3 px-6">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-tertiary-container text-on-tertiary-container">Under Review</span>
</td>
<td class="py-3 px-6">
<div class="flex gap-1">
<span class="inline-block px-1.5 py-0.5 bg-surface-container rounded text-xs text-on-surface-variant border border-outline-variant/30">Enhancement</span>
</div>
</td>
<td class="py-3 px-6 text-on-surface-variant flex items-center gap-1.5">
<span class="material-symbols-outlined text-[16px]">forum</span> Portal
</td>
<td class="py-3 px-6 text-right text-on-surface-variant">1</td>
<td class="py-3 px-6 text-right text-on-surface-variant">Sep 28, 2024</td>
</tr>
<tr class="hover:bg-surface-container-low transition-colors group">
<td class="py-3 px-6">
<a class="font-medium text-primary group-hover:underline" href="#">Setup was confusing, took 2 hours</a>
</td>
<td class="py-3 px-6 text-on-surface-variant">Mesh Wi-Fi Node (Gen 2)</td>
<td class="py-3 px-6">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-surface-variant text-on-surface-variant">Closed</span>
</td>
<td class="py-3 px-6">
<div class="flex gap-1">
<span class="inline-block px-1.5 py-0.5 bg-surface-container rounded text-xs text-on-surface-variant border border-outline-variant/30">UX</span>
<span class="inline-block px-1.5 py-0.5 bg-surface-container rounded text-xs text-on-surface-variant border border-outline-variant/30">Docs</span>
</div>
</td>
<td class="py-3 px-6 text-on-surface-variant flex items-center gap-1.5">
<span class="material-symbols-outlined text-[16px]">phone_in_talk</span> Phone
</td>
<td class="py-3 px-6 text-right text-on-surface-variant">2</td>
<td class="py-3 px-6 text-right text-on-surface-variant">Aug 05, 2024</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-gray-50 dark:bg-gray-950 font-manrope text-xs text-gray-500 full-width py-8 border-t border-t border-gray-200 dark:border-gray-800 flat no shadows w-full flex flex-col md:flex-row justify-between items-center px-6 max-w-[1280px] mx-auto mt-auto">
<div class="mb-4 md:mb-0">
© 2024 AfterSales CRM. All rights reserved.
</div>
<div class="flex gap-6">
<a class="text-gray-500 hover:underline transition-all" href="#">Support</a>
<a class="text-gray-500 hover:underline transition-all" href="#">Privacy Policy</a>
<a class="text-gray-500 hover:underline transition-all" href="#">Terms of Service</a>
</div>
</footer>
</body></html>

BIN
webappUI/edit_customer_desktop/code.html:Zone.Identifier Normal file
View File

Binary file not shown.

BIN
webappUI/edit_customer_desktop/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 227 KiB

BIN
webappUI/edit_customer_desktop/screen.png:Zone.Identifier Normal file
View File

Binary file not shown.

404
webappUI/edit_feedback_desktop/code.html Normal file
View File

@@ -0,0 +1,404 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Edit Feedback - AfterSales CRM</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=Manrope:wght@500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-primary-fixed": "#001a42",
"surface-dim": "#d8d9e3",
"tertiary": "#924700",
"tertiary-container": "#b75b00",
"surface-container-lowest": "#ffffff",
"on-primary-container": "#fefcff",
"secondary": "#585f6c",
"on-primary-fixed-variant": "#004395",
"inverse-primary": "#adc6ff",
"on-surface": "#191b23",
"on-tertiary-fixed-variant": "#723600",
"surface-container": "#ecedf7",
"on-background": "#191b23",
"secondary-fixed": "#dce2f3",
"surface-container-highest": "#e1e2ec",
"surface-variant": "#e1e2ec",
"error-container": "#ffdad6",
"primary-fixed": "#d8e2ff",
"surface": "#f9f9ff",
"surface-container-low": "#f2f3fd",
"on-tertiary-fixed": "#311400",
"on-tertiary": "#ffffff",
"on-secondary": "#ffffff",
"inverse-on-surface": "#eff0fa",
"secondary-fixed-dim": "#c0c7d6",
"on-secondary-fixed-variant": "#404754",
"tertiary-fixed-dim": "#ffb786",
"primary-fixed-dim": "#adc6ff",
"surface-bright": "#f9f9ff",
"on-primary": "#ffffff",
"on-tertiary-container": "#fffbff",
"tertiary-fixed": "#ffdcc6",
"on-secondary-fixed": "#151c27",
"on-secondary-container": "#5e6572",
"on-surface-variant": "#424754",
"primary-container": "#2170e4",
"primary": "#0058be",
"on-error-container": "#93000a",
"surface-container-high": "#e6e7f2",
"secondary-container": "#dce2f3",
"surface-tint": "#005ac2",
"on-error": "#ffffff",
"inverse-surface": "#2e3038",
"background": "#f9f9ff",
"outline": "#727785",
"outline-variant": "#c2c6d6",
"error": "#ba1a1a"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"stack-gap": "1.5rem",
"nav-height": "56px",
"margin-x": "1.5rem",
"form-gap": "1.25rem",
"container-max": "1280px",
"grid-columns-desktop": "12",
"gutter": "1rem"
},
"fontFamily": {
"body-base": ["Inter"],
"body-sm": ["Inter"],
"h3": ["Manrope"],
"h1": ["Manrope"],
"h2": ["Manrope"],
"label-semibold": ["Inter"],
"button": ["Inter"]
},
"fontSize": {
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"body-sm": ["12px", {"lineHeight": "16px", "fontWeight": "400"}],
"h3": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
"h1": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"h2": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"label-semibold": ["14px", {"lineHeight": "20px", "fontWeight": "600"}],
"button": ["14px", {"lineHeight": "20px", "fontWeight": "500"}]
}
}
}
}
</script>
</head>
<body class="bg-background text-on-background min-h-screen font-body-base font-body-base antialiased">
<!-- TopNavBar -->
<nav class="fixed top-0 w-full h-[56px] border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm z-50">
<div class="flex items-center justify-between px-6 max-w-[1280px] mx-auto w-full z-50 h-full">
<div class="flex items-center gap-8 h-full">
<span class="text-xl font-bold text-blue-600 dark:text-blue-400 font-h2">AfterSales CRM</span>
<div class="hidden md:flex gap-6 h-full items-end">
<!-- Navigation Links - Assuming Customer Care is active for editing feedback -->
<a class="font-manrope text-sm font-medium tracking-tight text-gray-600 dark:text-gray-400 pb-4 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-70 flex items-center h-full" href="#">Dashboard</a>
<a class="font-manrope text-sm font-medium tracking-tight text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 pb-4 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-70 flex items-center h-full pt-[2px]" href="#">Customer Care</a>
<a class="font-manrope text-sm font-medium tracking-tight text-gray-600 dark:text-gray-400 pb-4 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-70 flex items-center h-full" href="#">Management</a>
</div>
</div>
<div class="flex items-center gap-4">
<button class="relative p-1 text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-70">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">notifications</span>
<span class="absolute top-1 right-1 w-[8px] h-[8px] bg-error rounded-full"></span>
</button>
<div class="flex items-center gap-2 cursor-pointer active:opacity-70">
<img alt="User avatar" class="w-8 h-8 rounded-full object-cover border border-outline-variant" data-alt="Professional headshot of an administrator in a corporate setting, soft lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBENe7UUSiSiIl_m6vTX9487qvGFWH5bgFcMmYnnwwezqq3AXdpfZPuTyRZQti3-YZ6LuopgGW53ro7W0CsTDFujNFvVcotxjgtYX3F3yudbMBf7PgOVcDaRk5c_GJVA2ZP6dhU4GufSVWtmHJAiVV3kcga_By_x98jitb8VJiLmHfGlJNXxXIwdScQ6u-P2C4wZG8Mk93NHSfgJY7aWqoyOyjU3HQFBFiyPSzXy_zMp6fLrZb5KYsvJrHCCeXJOJA3zpyt5vOwtQQ"/>
<span class="font-body-sm font-body-sm text-gray-600 dark:text-gray-400 hidden sm:block">Admin</span>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="pt-[80px] pb-12 px-margin-x max-w-container-max mx-auto w-full">
<!-- Sticky Header / Action Bar -->
<div class="sticky top-[56px] z-40 bg-background/95 backdrop-blur-sm pb-4 pt-2 -mx-margin-x px-margin-x border-b border-outline-variant mb-6 flex flex-col sm:flex-row sm:items-end justify-between gap-4">
<div class="flex flex-col gap-2">
<!-- Breadcrumbs -->
<nav class="flex items-center gap-2 text-outline font-body-sm text-body-sm">
<a class="hover:text-primary transition-colors" href="#">Customer Care</a>
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
<a class="hover:text-primary transition-colors" href="#">Feedbacks</a>
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
<span class="text-on-surface">#FB-2023-0842</span>
</nav>
<div class="flex items-center gap-4">
<button class="flex items-center justify-center p-1.5 rounded text-secondary hover:bg-surface-variant transition-colors group">
<span class="material-symbols-outlined text-[20px] group-hover:-translate-x-0.5 transition-transform">arrow_back</span>
</button>
<h1 class="font-h1 text-h1 text-on-surface flex items-center gap-3">
Edit Feedback
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[12px] font-semibold bg-surface-container-high text-primary-container ring-1 ring-inset ring-primary-container/20">In Progress</span>
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[12px] font-semibold bg-surface-container-high text-tertiary ring-1 ring-inset ring-tertiary/20">Technical Support</span>
</h1>
</div>
</div>
<!-- Actions -->
<div class="flex flex-wrap items-center gap-2 sm:gap-3">
<div class="hidden md:flex items-center gap-2 mr-4 text-secondary font-body-sm text-body-sm border-r border-outline-variant pr-4">
<span class="material-symbols-outlined text-[16px]">person</span>
Handler: Sarah Jenkins
</div>
<button class="px-4 py-2 rounded font-button text-button bg-surface-container-lowest text-error border border-error/30 hover:bg-error-container transition-colors shadow-sm">
Delete
</button>
<button class="px-4 py-2 rounded font-button text-button bg-surface-container-lowest text-secondary border border-outline-variant hover:bg-surface-variant transition-colors shadow-sm">
Transfer Dept
</button>
<button class="px-4 py-2 rounded font-button text-button bg-surface-container-lowest text-secondary border border-outline-variant hover:bg-surface-variant transition-colors shadow-sm">
Close Ticket
</button>
<button class="px-4 py-2 rounded font-button text-button bg-primary text-on-primary hover:bg-surface-tint transition-colors shadow-sm flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">save</span>
Save Changes
</button>
</div>
</div>
<!-- Tabs -->
<div class="border-b border-outline-variant mb-6 flex gap-6">
<button class="pb-3 border-b-2 border-primary text-primary font-label-semibold text-label-semibold flex items-center gap-2 px-1">
<span class="material-symbols-outlined text-[18px]">edit_document</span>
Edit Details
</button>
<button class="pb-3 border-b-2 border-transparent text-secondary hover:text-on-surface font-label-semibold text-label-semibold flex items-center gap-2 px-1 transition-colors">
<span class="material-symbols-outlined text-[18px]">forum</span>
Interaction History
<span class="inline-flex items-center justify-center bg-surface-variant text-on-surface-variant rounded-full h-5 w-5 text-[11px] ml-1">5</span>
</button>
</div>
<!-- Form Canvas (Bento-ish Layout) -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
<!-- Left Column: Primary Details -->
<div class="lg:col-span-8 flex flex-col gap-6">
<!-- Card: Core Info -->
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant overflow-hidden">
<div class="px-6 py-4 border-b border-outline-variant/50 bg-surface/50">
<h2 class="font-h3 text-h3 text-on-surface">Core Information</h2>
</div>
<div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-form-gap">
<div class="flex flex-col gap-1.5 md:col-span-2">
<label class="font-label-semibold text-label-semibold text-on-surface">Title</label>
<input class="w-full rounded border-outline-variant bg-surface-container-lowest text-on-surface font-body-base text-body-base px-3 py-2 focus:ring-2 focus:ring-primary/20 focus:border-primary shadow-sm" type="text" value="Defective display on arrival - Screen flickering"/>
</div>
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Customer</label>
<select class="w-full rounded border-outline-variant bg-surface-container-lowest text-on-surface font-body-base text-body-base px-3 py-2 focus:ring-2 focus:ring-primary/20 focus:border-primary shadow-sm">
<option>TechCorp Industries (ID: 8492)</option>
<option>Acme Corp (ID: 1123)</option>
</select>
</div>
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Product</label>
<select class="w-full rounded border-outline-variant bg-surface-container-lowest text-on-surface font-body-base text-body-base px-3 py-2 focus:ring-2 focus:ring-primary/20 focus:border-primary shadow-sm">
<option>ProVision Monitor 32" (SN: PV32-998)</option>
<option>N/A - General Service</option>
</select>
</div>
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Channel</label>
<select class="w-full rounded border-outline-variant bg-surface-container-lowest text-on-surface font-body-base text-body-base px-3 py-2 focus:ring-2 focus:ring-primary/20 focus:border-primary shadow-sm">
<option>Customer Portal</option>
<option>Email</option>
<option>Phone</option>
</select>
</div>
<div class="flex flex-col gap-1.5 flex flex-col justify-center">
<label class="flex items-center gap-3 cursor-pointer group mt-6">
<div class="relative">
<input class="sr-only peer" type="checkbox"/>
<div class="w-10 h-6 bg-surface-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
</div>
<span class="font-label-semibold text-label-semibold text-on-surface group-hover:text-primary transition-colors">General Feedback (Non-specific product)</span>
</label>
</div>
<div class="flex flex-col gap-1.5 md:col-span-2 mt-2">
<label class="font-label-semibold text-label-semibold text-on-surface">Content</label>
<textarea class="w-full rounded border-outline-variant bg-surface-container-lowest text-on-surface font-body-base text-body-base px-3 py-2 focus:ring-2 focus:ring-primary/20 focus:border-primary shadow-sm resize-y" rows="6">The monitor arrived yesterday, but upon plugging it in, the lower half of the screen flickers continuously. I have tried different cables (HDMI and DisplayPort) and different computers, but the issue persists. Please advise on RMA process.</textarea>
<p class="text-body-sm font-body-sm text-secondary mt-1">Provide a detailed description of the customer's issue or feedback.</p>
</div>
</div>
</div>
<!-- Card: Attachments -->
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant overflow-hidden">
<div class="px-6 py-4 border-b border-outline-variant/50 bg-surface/50 flex justify-between items-center">
<h2 class="font-h3 text-h3 text-on-surface">Attachments &amp; Evidence</h2>
<span class="inline-flex items-center px-2 py-0.5 rounded text-[12px] font-medium bg-surface-variant text-secondary">2 Files</span>
</div>
<div class="p-6 flex flex-col gap-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="border border-outline-variant rounded p-3 flex items-start gap-3 bg-surface hover:border-primary/50 transition-colors group cursor-pointer">
<div class="p-2 bg-error-container text-on-error-container rounded">
<span class="material-symbols-outlined text-[20px]">image</span>
</div>
<div class="flex-1 min-w-0">
<p class="font-label-semibold text-body-sm text-on-surface truncate group-hover:text-primary transition-colors">IMG_8492.jpg</p>
<p class="font-body-sm text-[11px] text-secondary">2.4 MB • Evidence</p>
</div>
<button class="text-secondary hover:text-error transition-colors p-1"><span class="material-symbols-outlined text-[16px]">close</span></button>
</div>
<div class="border border-outline-variant rounded p-3 flex items-start gap-3 bg-surface hover:border-primary/50 transition-colors group cursor-pointer">
<div class="p-2 bg-primary-container text-on-primary-container rounded">
<span class="material-symbols-outlined text-[20px]">description</span>
</div>
<div class="flex-1 min-w-0">
<p class="font-label-semibold text-body-sm text-on-surface truncate group-hover:text-primary transition-colors">invoice_copy.pdf</p>
<p class="font-body-sm text-[11px] text-secondary">450 KB • Proof</p>
</div>
<button class="text-secondary hover:text-error transition-colors p-1"><span class="material-symbols-outlined text-[16px]">close</span></button>
</div>
</div>
<div class="border-2 border-dashed border-outline-variant rounded-lg p-8 flex flex-col items-center justify-center bg-surface hover:bg-surface-container-low hover:border-primary/50 transition-all cursor-pointer group">
<div class="p-3 bg-surface-container-highest rounded-full mb-3 group-hover:bg-primary-container group-hover:text-on-primary-container transition-colors">
<span class="material-symbols-outlined text-[24px]">cloud_upload</span>
</div>
<p class="font-label-semibold text-label-semibold text-on-surface mb-1 group-hover:text-primary">Click to upload or drag and drop</p>
<p class="font-body-sm text-body-sm text-secondary text-center mb-4">SVG, PNG, JPG or PDF (max. 10MB)</p>
<div class="w-full max-w-xs">
<select class="w-full rounded border-outline-variant bg-surface-container-lowest text-on-surface font-body-sm text-body-sm px-3 py-1.5 focus:ring-2 focus:ring-primary/20 focus:border-primary shadow-sm">
<option>Select collection (Default: General)</option>
<option>Proof of Purchase</option>
<option>Evidence (Photos/Videos)</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!-- Right Column: Metadata & Status -->
<div class="lg:col-span-4 flex flex-col gap-6">
<!-- Card: Routing -->
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant overflow-hidden">
<div class="px-6 py-4 border-b border-outline-variant/50 bg-surface/50">
<h2 class="font-h3 text-h3 text-on-surface">Routing &amp; Status</h2>
</div>
<div class="p-6 flex flex-col gap-form-gap">
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Status</label>
<select class="w-full rounded border-outline-variant bg-surface-container-lowest text-on-surface font-body-base text-body-base px-3 py-2 focus:ring-2 focus:ring-primary/20 focus:border-primary shadow-sm">
<option>Open</option>
<option selected="">In Progress</option>
<option>Pending Customer</option>
<option>Resolved</option>
<option>Closed</option>
</select>
</div>
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Department</label>
<select class="w-full rounded border-outline-variant bg-surface-container-lowest text-on-surface font-body-base text-body-base px-3 py-2 focus:ring-2 focus:ring-primary/20 focus:border-primary shadow-sm">
<option selected="">Technical Support</option>
<option>Billing</option>
<option>Sales</option>
<option>Logistics</option>
</select>
</div>
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Assign To</label>
<select class="w-full rounded border-outline-variant bg-surface-container-lowest text-on-surface font-body-base text-body-base px-3 py-2 focus:ring-2 focus:ring-primary/20 focus:border-primary shadow-sm">
<option selected="">Sarah Jenkins</option>
<option>Mike Ross</option>
<option>Unassigned</option>
</select>
</div>
<hr class="border-outline-variant my-2"/>
<div class="flex flex-col gap-1.5">
<label class="flex items-center justify-between cursor-pointer group">
<span class="font-label-semibold text-label-semibold text-error flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">warning</span>
Escalated Case
</span>
<div class="relative">
<input class="sr-only peer" type="checkbox"/>
<div class="w-10 h-6 bg-surface-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-error"></div>
</div>
</label>
</div>
</div>
</div>
<!-- Card: Classification -->
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant overflow-hidden">
<div class="px-6 py-4 border-b border-outline-variant/50 bg-surface/50">
<h2 class="font-h3 text-h3 text-on-surface">Classification</h2>
</div>
<div class="p-6 flex flex-col gap-form-gap">
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface">Tags</label>
<div class="flex flex-wrap gap-2 mb-2">
<span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-body-sm font-medium bg-surface-container-high text-on-surface border border-outline-variant">
Hardware Fault
<button class="hover:text-error transition-colors"><span class="material-symbols-outlined text-[14px]">close</span></button>
</span>
<span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-body-sm font-medium bg-surface-container-high text-on-surface border border-outline-variant">
Display
<button class="hover:text-error transition-colors"><span class="material-symbols-outlined text-[14px]">close</span></button>
</span>
</div>
<div class="relative">
<input class="w-full rounded border-outline-variant bg-surface-container-lowest text-on-surface font-body-base text-body-base px-3 py-2 focus:ring-2 focus:ring-primary/20 focus:border-primary shadow-sm pl-8" placeholder="Add tag..." type="text"/>
<span class="material-symbols-outlined absolute left-2.5 top-2.5 text-[18px] text-secondary">sell</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Below Tabs: Similar Cases Table -->
<div class="mt-8 bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant overflow-hidden">
<div class="px-6 py-4 border-b border-outline-variant/50 bg-surface/50 flex justify-between items-center">
<h2 class="font-h3 text-h3 text-on-surface flex items-center gap-2">
<span class="material-symbols-outlined text-[20px] text-primary">search</span>
Similar Cases
</h2>
<span class="text-body-sm text-secondary">Matching tags: Hardware Fault, Display</span>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-surface-container-lowest border-b border-outline-variant">
<th class="px-6 py-3 font-label-semibold text-body-sm text-secondary uppercase tracking-wider">Title</th>
<th class="px-6 py-3 font-label-semibold text-body-sm text-secondary uppercase tracking-wider">Customer</th>
<th class="px-6 py-3 font-label-semibold text-body-sm text-secondary uppercase tracking-wider">Status</th>
<th class="px-6 py-3 font-label-semibold text-body-sm text-secondary uppercase tracking-wider">Handler</th>
<th class="px-6 py-3 font-label-semibold text-body-sm text-secondary uppercase tracking-wider">Date</th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant/50">
<tr class="hover:bg-surface-container-low transition-colors group cursor-pointer">
<td class="px-6 py-4 font-body-base text-body-base text-on-surface group-hover:text-primary transition-colors">Screen bleeding on edge</td>
<td class="px-6 py-4 font-body-base text-body-base text-secondary">DesignWorks Studio</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[12px] font-semibold bg-surface-container-high text-primary-container">Resolved</span>
</td>
<td class="px-6 py-4 font-body-base text-body-base text-secondary">Sarah Jenkins</td>
<td class="px-6 py-4 font-body-base text-body-sm text-secondary">Oct 12, 2023</td>
</tr>
<tr class="hover:bg-surface-container-low transition-colors group cursor-pointer">
<td class="px-6 py-4 font-body-base text-body-base text-on-surface group-hover:text-primary transition-colors">Flickering when using HDMI 2.0</td>
<td class="px-6 py-4 font-body-base text-body-base text-secondary">Alex Mercer</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[12px] font-semibold bg-surface-container-high text-secondary">Closed</span>
</td>
<td class="px-6 py-4 font-body-base text-body-base text-secondary">Mike Ross</td>
<td class="px-6 py-4 font-body-base text-body-sm text-secondary">Sep 28, 2023</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</body></html>

BIN
webappUI/edit_feedback_desktop/code.html:Zone.Identifier Normal file
View File

Binary file not shown.

BIN
webappUI/edit_feedback_desktop/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 255 KiB

BIN
webappUI/edit_feedback_desktop/screen.png:Zone.Identifier Normal file
View File

Binary file not shown.

457
webappUI/feedback_list_desktop/code.html Normal file
View File

@@ -0,0 +1,457 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>AfterSales CRM - Feedbacks</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=Manrope:wght@500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-primary-fixed": "#001a42",
"surface-dim": "#d8d9e3",
"tertiary": "#924700",
"tertiary-container": "#b75b00",
"surface-container-lowest": "#ffffff",
"on-primary-container": "#fefcff",
"secondary": "#585f6c",
"on-primary-fixed-variant": "#004395",
"inverse-primary": "#adc6ff",
"on-surface": "#191b23",
"on-tertiary-fixed-variant": "#723600",
"surface-container": "#ecedf7",
"on-background": "#191b23",
"secondary-fixed": "#dce2f3",
"surface-container-highest": "#e1e2ec",
"surface-variant": "#e1e2ec",
"error-container": "#ffdad6",
"primary-fixed": "#d8e2ff",
"surface": "#f9f9ff",
"surface-container-low": "#f2f3fd",
"on-tertiary-fixed": "#311400",
"on-tertiary": "#ffffff",
"on-secondary": "#ffffff",
"inverse-on-surface": "#eff0fa",
"secondary-fixed-dim": "#c0c7d6",
"on-secondary-fixed-variant": "#404754",
"tertiary-fixed-dim": "#ffb786",
"primary-fixed-dim": "#adc6ff",
"surface-bright": "#f9f9ff",
"on-primary": "#ffffff",
"on-tertiary-container": "#fffbff",
"tertiary-fixed": "#ffdcc6",
"on-secondary-fixed": "#151c27",
"on-secondary-container": "#5e6572",
"on-surface-variant": "#424754",
"primary-container": "#2170e4",
"primary": "#0058be",
"on-error-container": "#93000a",
"surface-container-high": "#e6e7f2",
"secondary-container": "#dce2f3",
"surface-tint": "#005ac2",
"on-error": "#ffffff",
"inverse-surface": "#2e3038",
"background": "#f9f9ff",
"outline": "#727785",
"outline-variant": "#c2c6d6",
"error": "#ba1a1a"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"stack-gap": "1.5rem",
"nav-height": "56px",
"margin-x": "1.5rem",
"form-gap": "1.25rem",
"container-max": "1280px",
"grid-columns-desktop": "12",
"gutter": "1rem"
},
"fontFamily": {
"body-base": [
"Inter"
],
"body-sm": [
"Inter"
],
"h3": [
"Manrope"
],
"h1": [
"Manrope"
],
"h2": [
"Manrope"
],
"label-semibold": [
"Inter"
],
"button": [
"Inter"
]
},
"fontSize": {
"body-base": [
"14px",
{
"lineHeight": "20px",
"fontWeight": "400"
}
],
"body-sm": [
"12px",
{
"lineHeight": "16px",
"fontWeight": "400"
}
],
"h3": [
"18px",
{
"lineHeight": "24px",
"fontWeight": "600"
}
],
"h1": [
"24px",
{
"lineHeight": "32px",
"fontWeight": "600"
}
],
"h2": [
"20px",
{
"lineHeight": "28px",
"fontWeight": "600"
}
],
"label-semibold": [
"14px",
{
"lineHeight": "20px",
"fontWeight": "600"
}
],
"button": [
"14px",
{
"lineHeight": "20px",
"fontWeight": "500"
}
]
}
}
}
}
</script>
</head>
<body class="bg-background font-body-base text-on-surface antialiased">
<!-- TopNavBar -->
<header class="fixed top-0 w-full h-[56px] border-b bg-surface-container-lowest border-surface-variant shadow-sm z-50">
<div class="flex items-center justify-between px-6 max-w-[1280px] mx-auto w-full h-full">
<!-- Brand -->
<div class="flex items-center gap-8 h-full">
<span class="font-h2 text-h2 text-primary font-bold tracking-tight">AfterSales CRM</span>
<!-- Navigation Links -->
<nav class="hidden md:flex items-center gap-6 h-full pt-4">
<a class="font-label-semibold text-label-semibold text-on-surface-variant pb-4 hover:text-primary transition-colors cursor-pointer active:opacity-70" href="#">Dashboard</a>
<a class="font-label-semibold text-label-semibold text-primary border-b-2 border-primary pb-4 cursor-pointer active:opacity-70" href="#">Customer Care</a>
<a class="font-label-semibold text-label-semibold text-on-surface-variant pb-4 hover:text-primary transition-colors cursor-pointer active:opacity-70" href="#">Management</a>
</nav>
</div>
<!-- Trailing Actions -->
<div class="flex items-center gap-4">
<button class="relative text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-70">
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
<span class="absolute top-0 right-0 w-2 h-2 bg-error rounded-full border border-surface-container-lowest"></span>
</button>
<div class="flex items-center gap-2 border-l border-outline-variant pl-4 ml-2">
<img alt="User avatar" class="w-8 h-8 rounded-full bg-surface-variant" data-alt="Professional headshot of a corporate administrator on a clean background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAvCqgsEFwLUsK_1yk8Cc7RgsfJH9SD8j0fZOW0GwJ0mmYKsqUKJbNmHaKdqlqx78gmRna4KYNp2IMW40Pni-46ZQT4MzdxW65k6nnH3-brk7fIiPOcYilyi3HnclHVloQffLSLHqEALLebtj6GJp5iRa5_-IhMadBjq8bR8v-vB8SkEAA19hA3anyg5-7m35hamAQfTbnJac0g6cxyfoksamc7jIzQirzHKPlw_tfUGZYO6N5-6te4Nz6X74sp2SELIzteZX6JLqs"/>
<span class="font-label-semibold text-label-semibold text-on-surface hidden md:block">Admin</span>
</div>
</div>
</div>
</header>
<!-- Main Content Canvas -->
<main class="pt-[80px] pb-12 px-margin-x max-w-container-max mx-auto min-h-screen">
<!-- Page Header Section -->
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-stack-gap">
<div>
<!-- Breadcrumb -->
<nav class="flex items-center gap-2 mb-2">
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Dashboard</a>
<span class="material-symbols-outlined text-[16px] text-outline">chevron_right</span>
<span class="font-body-sm text-body-sm text-on-surface font-medium">Customer Care</span>
<span class="material-symbols-outlined text-[16px] text-outline">chevron_right</span>
<span class="font-body-sm text-body-sm text-on-surface font-medium">Feedbacks</span>
</nav>
<h1 class="font-h1 text-h1 text-on-surface">Feedbacks</h1>
</div>
<div class="flex items-center gap-3">
<button class="flex items-center justify-center h-10 px-4 rounded bg-primary text-on-primary font-button text-button hover:brightness-110 transition-all shadow-sm">
<span class="material-symbols-outlined mr-2 text-[18px]">add</span>
New Feedback
</button>
</div>
</div>
<!-- Filters & Tools Bar -->
<div class="bg-surface-container-lowest rounded-lg border border-outline-variant shadow-sm p-4 mb-stack-gap">
<div class="flex flex-wrap items-center justify-between gap-4">
<!-- Filter Group -->
<div class="flex flex-wrap items-center gap-3 flex-1">
<!-- Status Filter -->
<div class="relative w-40">
<select class="w-full h-9 pl-3 pr-8 rounded border border-outline-variant bg-surface-container-lowest text-body-sm font-body-sm text-on-surface focus:ring-2 focus:ring-primary/20 focus:border-primary appearance-none">
<option value="">Status: All</option>
<option value="pending">Pending</option>
<option value="processing">Processing</option>
<option value="resolved">Resolved</option>
<option value="closed">Closed</option>
</select>
<span class="material-symbols-outlined absolute right-2 top-1/2 -translate-y-1/2 text-outline pointer-events-none text-[20px]">arrow_drop_down</span>
</div>
<!-- Channel Filter -->
<div class="relative w-40">
<select class="w-full h-9 pl-3 pr-8 rounded border border-outline-variant bg-surface-container-lowest text-body-sm font-body-sm text-on-surface focus:ring-2 focus:ring-primary/20 focus:border-primary appearance-none">
<option value="">Channel: All</option>
<option value="email">Email</option>
<option value="portal">Portal</option>
<option value="phone">Phone</option>
</select>
<span class="material-symbols-outlined absolute right-2 top-1/2 -translate-y-1/2 text-outline pointer-events-none text-[20px]">arrow_drop_down</span>
</div>
<!-- Dept Filter -->
<div class="relative w-40">
<select class="w-full h-9 pl-3 pr-8 rounded border border-outline-variant bg-surface-container-lowest text-body-sm font-body-sm text-on-surface focus:ring-2 focus:ring-primary/20 focus:border-primary appearance-none">
<option value="">Dept: All</option>
<option value="support">Support</option>
<option value="technical">Technical</option>
<option value="billing">Billing</option>
</select>
<span class="material-symbols-outlined absolute right-2 top-1/2 -translate-y-1/2 text-outline pointer-events-none text-[20px]">arrow_drop_down</span>
</div>
<!-- Handler Filter -->
<div class="relative w-40">
<select class="w-full h-9 pl-3 pr-8 rounded border border-outline-variant bg-surface-container-lowest text-body-sm font-body-sm text-on-surface focus:ring-2 focus:ring-primary/20 focus:border-primary appearance-none">
<option value="">Handler: All</option>
<option value="unassigned">Unassigned</option>
<option value="me">Assigned to me</option>
</select>
<span class="material-symbols-outlined absolute right-2 top-1/2 -translate-y-1/2 text-outline pointer-events-none text-[20px]">arrow_drop_down</span>
</div>
<button class="h-9 px-3 text-body-sm font-label-semibold text-on-surface-variant hover:text-on-surface hover:bg-surface-container rounded transition-colors flex items-center">
Reset Filters
</button>
</div>
<!-- Bulk Actions & Global Search -->
<div class="flex items-center gap-3">
<div class="flex items-center bg-surface-container-low border border-outline-variant rounded divide-x divide-outline-variant mr-2 opacity-50 pointer-events-none" id="bulk-actions">
<button class="h-9 px-3 text-body-sm font-label-semibold text-on-surface hover:bg-surface-container transition-colors flex items-center gap-1" title="Export Selected">
<span class="material-symbols-outlined text-[18px]">download</span>
</button>
<button class="h-9 px-3 text-body-sm font-label-semibold text-error hover:bg-error-container hover:text-on-error-container transition-colors flex items-center gap-1" title="Delete Selected">
<span class="material-symbols-outlined text-[18px]">delete</span>
</button>
</div>
<div class="relative w-64">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-[20px]">search</span>
<input class="w-full h-9 pl-10 pr-3 rounded border border-outline-variant bg-surface-container-lowest text-body-sm font-body-base text-on-surface focus:ring-2 focus:ring-primary/20 focus:border-primary" placeholder="Search feedbacks..." type="text"/>
</div>
</div>
</div>
</div>
<!-- Data Table Container -->
<div class="bg-surface-container-lowest rounded-lg border border-outline-variant shadow-sm overflow-hidden flex flex-col">
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse min-w-[1200px]">
<thead>
<tr class="bg-surface-container-low border-b border-outline-variant">
<th class="p-4 w-12 align-middle">
<input class="rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/>
</th>
<th class="p-3 font-label-semibold text-body-sm text-on-surface-variant w-20"># ID</th>
<th class="p-3 font-label-semibold text-body-sm text-on-surface-variant w-48">
Title
<input class="mt-1 w-full h-7 px-2 rounded border border-outline-variant bg-surface-container-lowest text-[11px] font-body-base focus:ring-1 focus:ring-primary/50 focus:border-primary" placeholder="Filter..." type="text"/>
</th>
<th class="p-3 font-label-semibold text-body-sm text-on-surface-variant w-40">Customer</th>
<th class="p-3 font-label-semibold text-body-sm text-on-surface-variant w-32">Product</th>
<th class="p-3 font-label-semibold text-body-sm text-on-surface-variant w-24">Channel</th>
<th class="p-3 font-label-semibold text-body-sm text-on-surface-variant w-48">Tags</th>
<th class="p-3 font-label-semibold text-body-sm text-on-surface-variant w-32">Status</th>
<th class="p-3 font-label-semibold text-body-sm text-on-surface-variant w-24">Dept</th>
<th class="p-3 font-label-semibold text-body-sm text-on-surface-variant w-32">Handler</th>
<th class="p-3 font-label-semibold text-body-sm text-on-surface-variant w-16 text-center" title="Escalated">Esc</th>
<th class="p-3 font-label-semibold text-body-sm text-on-surface-variant w-32">Created</th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant bg-surface-container-lowest">
<!-- Row 1 -->
<tr class="hover:bg-surface-container-low transition-colors group">
<td class="p-4 align-middle">
<input class="rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/>
</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">FB-1042</td>
<td class="p-3">
<a class="font-label-semibold text-body-sm text-primary hover:underline block truncate w-44" href="#">Device won't power on after update</a>
</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">
<div class="truncate w-36">Sarah Jenkins</div>
<div class="text-[11px] text-on-surface-variant">Corp Solutions Inc.</div>
</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">ProScanner 500</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">Email</td>
<td class="p-3">
<div class="flex flex-wrap gap-1">
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-surface-container-high text-on-surface-variant border border-outline-variant">Hardware</span>
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-surface-container-high text-on-surface-variant border border-outline-variant">Urgent</span>
</div>
</td>
<td class="p-3">
<span class="inline-flex items-center px-2 py-1 rounded bg-[#fff8e1] text-[#b45309] font-label-semibold text-[11px] border border-[#fde68a]">Pending</span>
</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">Technical</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface-variant">Unassigned</td>
<td class="p-3 text-center">
<span class="material-symbols-outlined text-[#b45309] text-[18px]" title="Escalated">warning</span>
</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface-variant">Oct 24, 09:15</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-surface-container-low transition-colors group">
<td class="p-4 align-middle">
<input class="rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/>
</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">FB-1041</td>
<td class="p-3">
<a class="font-label-semibold text-body-sm text-primary hover:underline block truncate w-44" href="#">Billing discrepancy for Q3</a>
</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">
<div class="truncate w-36">Marcus Vance</div>
<div class="text-[11px] text-on-surface-variant">Global Logistics</div>
</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">Enterprise Sub</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">Portal</td>
<td class="p-3">
<div class="flex flex-wrap gap-1">
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-surface-container-high text-on-surface-variant border border-outline-variant">Finance</span>
</div>
</td>
<td class="p-3">
<span class="inline-flex items-center px-2 py-1 rounded bg-primary-fixed text-on-primary-fixed-variant font-label-semibold text-[11px] border border-inverse-primary">Processing</span>
</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">Billing</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">
<div class="flex items-center gap-1">
<div class="w-4 h-4 rounded-full bg-secondary-container text-[8px] flex items-center justify-center font-bold text-on-surface">JD</div>
<span class="truncate w-20">Jane Doe</span>
</div>
</td>
<td class="p-3 text-center">
<span class="material-symbols-outlined text-outline-variant text-[18px]">remove</span>
</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface-variant">Oct 23, 14:30</td>
</tr>
<!-- Row 3 -->
<tr class="hover:bg-surface-container-low transition-colors group">
<td class="p-4 align-middle">
<input class="rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/>
</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">FB-1040</td>
<td class="p-3">
<a class="font-label-semibold text-body-sm text-primary hover:underline block truncate w-44" href="#">Feature request: dark mode</a>
</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">
<div class="truncate w-36">Elena Rostova</div>
</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">Web App</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">Portal</td>
<td class="p-3">
<div class="flex flex-wrap gap-1">
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-surface-container-high text-on-surface-variant border border-outline-variant">UI/UX</span>
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-surface-container-high text-on-surface-variant border border-outline-variant">Feature</span>
</div>
</td>
<td class="p-3">
<span class="inline-flex items-center px-2 py-1 rounded bg-[#ecfdf5] text-[#047857] font-label-semibold text-[11px] border border-[#a7f3d0]">Resolved</span>
</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">Support</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">
<div class="flex items-center gap-1">
<div class="w-4 h-4 rounded-full bg-secondary-container text-[8px] flex items-center justify-center font-bold text-on-surface">TR</div>
<span class="truncate w-20">Tom Riddle</span>
</div>
</td>
<td class="p-3 text-center">
<span class="material-symbols-outlined text-[#047857] text-[18px]" title="Resolved OK">check_circle</span>
</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface-variant">Oct 22, 11:05</td>
</tr>
<!-- Row 4 -->
<tr class="hover:bg-surface-container-low transition-colors group">
<td class="p-4 align-middle">
<input class="rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/>
</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">FB-1039</td>
<td class="p-3">
<a class="font-label-semibold text-body-sm text-primary hover:underline block truncate w-44" href="#">Cannot reset password</a>
</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">
<div class="truncate w-36">Anonymous</div>
</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">General</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">Phone</td>
<td class="p-3">
<div class="flex flex-wrap gap-1">
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-surface-container-high text-on-surface-variant border border-outline-variant">Access</span>
</div>
</td>
<td class="p-3">
<span class="inline-flex items-center px-2 py-1 rounded bg-surface-container-high text-on-surface-variant font-label-semibold text-[11px] border border-outline-variant">Closed</span>
</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">Support</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface">
<div class="flex items-center gap-1">
<div class="w-4 h-4 rounded-full bg-secondary-container text-[8px] flex items-center justify-center font-bold text-on-surface">JD</div>
<span class="truncate w-20">Jane Doe</span>
</div>
</td>
<td class="p-3 text-center">
<span class="material-symbols-outlined text-[#047857] text-[18px]" title="Resolved OK">check_circle</span>
</td>
<td class="p-3 font-body-sm text-body-sm text-on-surface-variant">Oct 20, 16:45</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination Footer -->
<div class="bg-surface-container-low border-t border-outline-variant p-3 flex items-center justify-between">
<span class="font-body-sm text-body-sm text-on-surface-variant">Showing 1 to 4 of 42 entries</span>
<div class="flex items-center gap-1">
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant text-on-surface-variant hover:bg-surface-container hover:text-on-surface disabled:opacity-50 disabled:cursor-not-allowed" disabled="">
<span class="material-symbols-outlined text-[18px]">chevron_left</span>
</button>
<button class="w-8 h-8 flex items-center justify-center rounded bg-primary text-on-primary font-body-sm text-body-sm">1</button>
<button class="w-8 h-8 flex items-center justify-center rounded border border-surface-container text-on-surface hover:bg-surface-container font-body-sm text-body-sm">2</button>
<button class="w-8 h-8 flex items-center justify-center rounded border border-surface-container text-on-surface hover:bg-surface-container font-body-sm text-body-sm">3</button>
<span class="px-1 text-outline">...</span>
<button class="w-8 h-8 flex items-center justify-center rounded border border-surface-container text-on-surface hover:bg-surface-container font-body-sm text-body-sm">11</button>
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant text-on-surface-variant hover:bg-surface-container hover:text-on-surface">
<span class="material-symbols-outlined text-[18px]">chevron_right</span>
</button>
</div>
</div>
</div>
</main>
</body></html>

BIN
webappUI/feedback_list_desktop/code.html:Zone.Identifier Normal file
View File

Binary file not shown.

BIN
webappUI/feedback_list_desktop/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 164 KiB

BIN
webappUI/feedback_list_desktop/screen.png:Zone.Identifier Normal file
View File

Binary file not shown.

290
webappUI/product_list_desktop/code.html Normal file
View File

@@ -0,0 +1,290 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Products - AfterSales CRM</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"outline": "#727785",
"on-tertiary-fixed": "#311400",
"on-tertiary": "#ffffff",
"primary": "#0058be",
"surface-container-highest": "#e1e2ec",
"error": "#ba1a1a",
"surface-container": "#ecedf7",
"secondary-container": "#dce2f3",
"on-tertiary-fixed-variant": "#723600",
"secondary-fixed": "#dce2f3",
"tertiary-fixed": "#ffdcc6",
"on-primary-fixed": "#001a42",
"surface-variant": "#e1e2ec",
"inverse-on-surface": "#eff0fa",
"background": "#f9f9ff",
"surface-container-lowest": "#ffffff",
"surface-bright": "#f9f9ff",
"surface": "#f9f9ff",
"on-tertiary-container": "#fffbff",
"surface-container-high": "#e6e7f2",
"on-primary": "#ffffff",
"outline-variant": "#c2c6d6",
"on-background": "#191b23",
"inverse-surface": "#2e3038",
"surface-dim": "#d8d9e3",
"on-error": "#ffffff",
"inverse-primary": "#adc6ff",
"primary-fixed-dim": "#adc6ff",
"on-secondary-fixed": "#151c27",
"on-secondary-container": "#5e6572",
"on-primary-container": "#fefcff",
"tertiary-container": "#b75b00",
"surface-tint": "#005ac2",
"on-primary-fixed-variant": "#004395",
"on-secondary-fixed-variant": "#404754",
"on-error-container": "#93000a",
"primary-fixed": "#d8e2ff",
"on-surface": "#191b23",
"on-secondary": "#ffffff",
"tertiary-fixed-dim": "#ffb786",
"surface-container-low": "#f2f3fd",
"tertiary": "#924700",
"secondary": "#585f6c",
"on-surface-variant": "#424754",
"error-container": "#ffdad6",
"secondary-fixed-dim": "#c0c7d6",
"primary-container": "#2170e4"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"nav-height": "56px",
"margin-x": "1.5rem",
"gutter": "1rem",
"container-max": "1280px",
"grid-columns-desktop": "12",
"stack-gap": "1.5rem",
"form-gap": "1.25rem"
},
"fontFamily": {
"h1": ["Manrope"],
"body-base": ["Inter"],
"h2": ["Manrope"],
"button": ["Inter"],
"body-sm": ["Inter"],
"label-semibold": ["Inter"],
"h3": ["Manrope"]
},
"fontSize": {
"h1": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
"body-base": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
"h2": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
"button": ["14px", { "lineHeight": "20px", "fontWeight": "500" }],
"body-sm": ["12px", { "lineHeight": "16px", "fontWeight": "400" }],
"label-semibold": ["14px", { "lineHeight": "20px", "fontWeight": "600" }],
"h3": ["18px", { "lineHeight": "24px", "fontWeight": "600" }]
}
}
}
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
</style>
</head>
<body class="bg-background text-on-background font-body-base min-h-screen flex flex-col">
<header class="sticky top-0 z-50 w-full bg-surface-container-lowest border-b border-outline-variant shadow-sm h-[56px] flex justify-center">
<div class="flex items-center justify-between w-full h-full px-margin-x max-w-container-max mx-auto">
<div class="flex items-center gap-8">
<span class="font-h2 text-h2 text-primary tracking-tight">AfterSales CRM</span>
<nav class="hidden md:flex items-center gap-6 h-full pt-[2px]">
<a class="font-body-base text-body-base text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Feedback</a>
<a class="font-body-base text-body-base text-primary border-b-2 border-primary pb-[14px] cursor-pointer active:opacity-80 pt-[14px]" href="#">Products</a>
<a class="font-body-base text-body-base text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Customers</a>
<a class="font-body-base text-body-base text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Channels</a>
<a class="font-body-base text-body-base text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Tags</a>
</nav>
</div>
<div class="flex items-center gap-4">
<button class="text-on-surface-variant hover:text-primary transition-colors hidden md:block">
<span class="material-symbols-outlined text-[20px]" data-icon="search">search</span>
</button>
<button class="relative text-on-surface-variant hover:text-primary transition-colors">
<span class="material-symbols-outlined text-[20px]" data-icon="notifications">notifications</span>
<span class="absolute top-0 right-0 w-[8px] h-[8px] bg-error rounded-full ring-2 ring-surface-container-lowest"></span>
</button>
<button class="text-on-surface-variant hover:text-primary transition-colors">
<span class="material-symbols-outlined text-[20px]" data-icon="settings">settings</span>
</button>
<img alt="User profile" class="w-8 h-8 rounded-full border border-outline-variant object-cover" data-alt="Headshot of a smiling professional man wearing a collared shirt with a blurred background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDrC3Lo7CX2FOxbLaL60WQ0BSNvnS3yXyjNHJlyZ-TyzsDkyuWoU4ouFCUGsQQgkeZYsIohcVdX9mzd0_q_MAZnXQC2pAl_veRJTsxBwZRfecu5cNujEW7Gt6YbKVhmGhYuo1yxMKFAKXIefgGMJ_oBeIYXIM9IVWhs42GgLlaor0mOtDHzzQTlkrQuRuRoGayrWsucJcSg_kjOTTZMELb2CaAKl1slxJe_C3gOEJxzUaOWZxKImvg37wNJJV0tzoXZNKXVhFwsw98"/>
</div>
</div>
</header>
<main class="flex-1 w-full max-w-container-max mx-auto px-margin-x py-8 flex flex-col gap-stack-gap">
<div class="flex flex-col gap-2">
<nav aria-label="Breadcrumb" class="flex text-body-sm font-body-sm text-on-surface-variant">
<ol class="inline-flex items-center space-x-1 md:space-x-2">
<li class="inline-flex items-center">
<a class="hover:text-primary transition-colors" href="#">Dashboard</a>
</li>
<li>
<div class="flex items-center">
<span class="material-symbols-outlined text-[14px] mx-1">chevron_right</span>
<span class="text-on-surface">Products</span>
</div>
</li>
</ol>
</nav>
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mt-2">
<h1 class="font-h1 text-h1 text-on-background">Products</h1>
<div class="flex items-center gap-3 w-full sm:w-auto">
<div class="relative flex-1 sm:flex-none">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-[18px]">search</span>
<input class="w-full sm:w-64 pl-9 pr-4 py-2 border border-outline-variant rounded-DEFAULT bg-surface-container-lowest text-body-base font-body-base text-on-surface focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-shadow placeholder:text-on-surface-variant/70" placeholder="Search products..." type="text"/>
</div>
<button class="bg-primary text-on-primary font-button text-button px-4 py-2 rounded-DEFAULT hover:brightness-110 transition-all flex items-center gap-2 whitespace-nowrap shadow-sm">
<span class="material-symbols-outlined text-[18px]">add</span>
New Product
</button>
</div>
</div>
</div>
<div class="bg-surface-container-lowest shadow-sm rounded-lg border border-outline-variant flex flex-col mt-4">
<div class="p-4 border-b border-outline-variant flex flex-col sm:flex-row sm:items-center gap-4 bg-surface-bright rounded-t-lg">
<div class="flex items-center gap-2">
<span class="text-body-sm font-label-semibold text-on-surface-variant flex items-center gap-1">
<span class="material-symbols-outlined text-[16px]">filter_list</span> Filter:
</span>
<div class="relative">
<select class="appearance-none border border-outline-variant rounded-DEFAULT bg-surface-container-lowest text-body-base font-body-base text-on-surface py-1.5 pl-3 pr-8 focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none cursor-pointer">
<option>All Statuses</option>
<option>Active</option>
<option>Inactive</option>
<option>Sold Out</option>
</select>
<span class="material-symbols-outlined absolute right-2 top-1/2 -translate-y-1/2 text-on-surface-variant text-[18px] pointer-events-none">expand_more</span>
</div>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse min-w-[800px]">
<thead class="bg-surface-container-low text-body-sm font-label-semibold text-on-surface-variant border-b border-outline-variant">
<tr>
<th class="py-3 px-4 font-label-semibold w-[25%]">Name</th>
<th class="py-3 px-4 font-label-semibold w-[15%]">Status</th>
<th class="py-3 px-4 font-label-semibold w-[35%]">Description</th>
<th class="py-3 px-4 font-label-semibold w-[10%] text-right">Owners</th>
<th class="py-3 px-4 font-label-semibold w-[15%]">Created</th>
</tr>
</thead>
<tbody class="text-body-base font-body-base text-on-surface divide-y divide-outline-variant">
<tr class="hover:bg-surface-container-low transition-colors group cursor-pointer">
<td class="py-4 px-4 font-label-semibold text-primary group-hover:underline">Enterprise Server Rack Q4</td>
<td class="py-4 px-4">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-label-semibold bg-primary-fixed text-on-primary-fixed-variant border border-primary-fixed-dim">
Active
</span>
</td>
<td class="py-4 px-4 text-on-surface-variant truncate max-w-[250px]" title="High-density server rack designed for optimal airflow and cable management in large data centers.">
High-density server rack designed for optimal ai...
</td>
<td class="py-4 px-4 text-right font-label-semibold text-on-surface">1,402</td>
<td class="py-4 px-4 text-on-surface-variant text-body-sm">Oct 12, 2023</td>
</tr>
<tr class="hover:bg-surface-container-low transition-colors group cursor-pointer">
<td class="py-4 px-4 font-label-semibold text-primary group-hover:underline">Cloud Gateway Pro</td>
<td class="py-4 px-4">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-label-semibold bg-primary-fixed text-on-primary-fixed-variant border border-primary-fixed-dim">
Active
</span>
</td>
<td class="py-4 px-4 text-on-surface-variant truncate max-w-[250px]" title="Secure Edge routing gateway with integrated threat management and VPN tunneling.">
Secure Edge routing gateway with integrated thre...
</td>
<td class="py-4 px-4 text-right font-label-semibold text-on-surface">845</td>
<td class="py-4 px-4 text-on-surface-variant text-body-sm">Nov 05, 2023</td>
</tr>
<tr class="hover:bg-surface-container-low transition-colors group cursor-pointer">
<td class="py-4 px-4 font-label-semibold text-primary group-hover:underline">Legacy Switch Module X1</td>
<td class="py-4 px-4">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-label-semibold bg-surface-container-highest text-on-surface border border-outline-variant">
Inactive
</span>
</td>
<td class="py-4 px-4 text-on-surface-variant truncate max-w-[250px]" title="Deprecated 24-port switch module. Scheduled for end-of-life support next quarter.">
Deprecated 24-port switch module. Scheduled for ...
</td>
<td class="py-4 px-4 text-right font-label-semibold text-on-surface">312</td>
<td class="py-4 px-4 text-on-surface-variant text-body-sm">Jan 18, 2021</td>
</tr>
<tr class="hover:bg-surface-container-low transition-colors group cursor-pointer">
<td class="py-4 px-4 font-label-semibold text-primary group-hover:underline">Quantum Encryption Key V2</td>
<td class="py-4 px-4">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-label-semibold bg-error-container text-on-error-container border border-[#ffb4ab]">
Sold Out
</span>
</td>
<td class="py-4 px-4 text-on-surface-variant truncate max-w-[250px]" title="Hardware security module for post-quantum cryptographic key generation.">
Hardware security module for post-quantum crypto...
</td>
<td class="py-4 px-4 text-right font-label-semibold text-on-surface">2,055</td>
<td class="py-4 px-4 text-on-surface-variant text-body-sm">Feb 22, 2024</td>
</tr>
<tr class="hover:bg-surface-container-low transition-colors group cursor-pointer">
<td class="py-4 px-4 font-label-semibold text-primary group-hover:underline">Optical Transceiver 100G</td>
<td class="py-4 px-4">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-label-semibold bg-primary-fixed text-on-primary-fixed-variant border border-primary-fixed-dim">
Active
</span>
</td>
<td class="py-4 px-4 text-on-surface-variant truncate max-w-[250px]" title="High-speed optical module for long-haul fiber connections up to 40km.">
High-speed optical module for long-haul fiber co...
</td>
<td class="py-4 px-4 text-right font-label-semibold text-on-surface">4,190</td>
<td class="py-4 px-4 text-on-surface-variant text-body-sm">Mar 10, 2024</td>
</tr>
</tbody>
</table>
</div>
<div class="p-4 border-t border-outline-variant text-body-sm font-body-sm text-on-surface-variant flex flex-col sm:flex-row justify-between items-center gap-4 bg-surface-bright rounded-b-lg">
<span>Showing 1 to 5 of 124 entries</span>
<div class="flex items-center gap-1">
<button class="p-1 rounded-DEFAULT hover:bg-surface-container-high text-on-surface-variant transition-colors disabled:opacity-50" disabled="">
<span class="material-symbols-outlined text-[20px]">chevron_left</span>
</button>
<button class="w-8 h-8 rounded-DEFAULT bg-primary text-on-primary font-button flex items-center justify-center">1</button>
<button class="w-8 h-8 rounded-DEFAULT hover:bg-surface-container-high text-on-surface font-button flex items-center justify-center transition-colors">2</button>
<button class="w-8 h-8 rounded-DEFAULT hover:bg-surface-container-high text-on-surface font-button flex items-center justify-center transition-colors">3</button>
<span class="px-1 text-on-surface-variant">...</span>
<button class="w-8 h-8 rounded-DEFAULT hover:bg-surface-container-high text-on-surface font-button flex items-center justify-center transition-colors">25</button>
<button class="p-1 rounded-DEFAULT hover:bg-surface-container-high text-on-surface transition-colors">
<span class="material-symbols-outlined text-[20px]">chevron_right</span>
</button>
</div>
</div>
</div>
</main>
<footer class="w-full py-8 border-t border-outline-variant bg-surface-container-lowest mt-auto">
<div class="w-full flex flex-col md:flex-row justify-between items-center px-margin-x max-w-container-max mx-auto gap-4">
<span class="font-body-sm text-body-sm text-on-surface-variant">© 2024 AfterSales CRM. All rights reserved.</span>
<div class="flex items-center gap-6">
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary hover:underline transition-all" href="#">Support</a>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary hover:underline transition-all" href="#">Privacy Policy</a>
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary hover:underline transition-all" href="#">Terms of Service</a>
</div>
</div>
</footer>
</body></html>

BIN
webappUI/product_list_desktop/code.html:Zone.Identifier Normal file
View File

Binary file not shown.

BIN
webappUI/product_list_desktop/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 KiB

BIN
webappUI/product_list_desktop/screen.png:Zone.Identifier Normal file
View File

Binary file not shown.

356
webappUI/tag_list_desktop/code.html Normal file
View File

@@ -0,0 +1,356 @@
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>AfterSales CRM - Tags</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=Manrope:wght@600;700&amp;display=swap" rel="stylesheet"/>
<!-- Material Symbols -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"outline": "#727785",
"on-tertiary-fixed": "#311400",
"on-tertiary": "#ffffff",
"primary": "#0058be",
"surface-container-highest": "#e1e2ec",
"error": "#ba1a1a",
"surface-container": "#ecedf7",
"secondary-container": "#dce2f3",
"on-tertiary-fixed-variant": "#723600",
"secondary-fixed": "#dce2f3",
"tertiary-fixed": "#ffdcc6",
"on-primary-fixed": "#001a42",
"surface-variant": "#e1e2ec",
"inverse-on-surface": "#eff0fa",
"background": "#f9f9ff",
"surface-container-lowest": "#ffffff",
"surface-bright": "#f9f9ff",
"surface": "#f9f9ff",
"on-tertiary-container": "#fffbff",
"surface-container-high": "#e6e7f2",
"on-primary": "#ffffff",
"outline-variant": "#c2c6d6",
"on-background": "#191b23",
"inverse-surface": "#2e3038",
"surface-dim": "#d8d9e3",
"on-error": "#ffffff",
"inverse-primary": "#adc6ff",
"primary-fixed-dim": "#adc6ff",
"on-secondary-fixed": "#151c27",
"on-secondary-container": "#5e6572",
"on-primary-container": "#fefcff",
"tertiary-container": "#b75b00",
"surface-tint": "#005ac2",
"on-primary-fixed-variant": "#004395",
"on-secondary-fixed-variant": "#404754",
"on-error-container": "#93000a",
"primary-fixed": "#d8e2ff",
"on-surface": "#191b23",
"on-secondary": "#ffffff",
"tertiary-fixed-dim": "#ffb786",
"surface-container-low": "#f2f3fd",
"tertiary": "#924700",
"secondary": "#585f6c",
"on-surface-variant": "#424754",
"error-container": "#ffdad6",
"secondary-fixed-dim": "#c0c7d6",
"primary-container": "#2170e4"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"nav-height": "56px",
"margin-x": "1.5rem",
"gutter": "1rem",
"container-max": "1280px",
"stack-gap": "1.5rem",
"form-gap": "1.25rem"
},
"fontFamily": {
"h1": ["Manrope"],
"body-base": ["Inter"],
"h2": ["Manrope"],
"button": ["Inter"],
"body-sm": ["Inter"],
"label-semibold": ["Inter"],
"h3": ["Manrope"]
},
"fontSize": {
"h1": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
"body-base": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
"h2": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
"button": ["14px", { "lineHeight": "20px", "fontWeight": "500" }],
"body-sm": ["12px", { "lineHeight": "16px", "fontWeight": "400" }],
"label-semibold": ["14px", { "lineHeight": "20px", "fontWeight": "600" }],
"h3": ["18px", { "lineHeight": "24px", "fontWeight": "600" }]
}
}
}
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.filled {
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
</style>
</head>
<body class="bg-background text-on-background min-h-screen flex flex-col antialiased">
<!-- TopNavBar -->
<header class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm w-full">
<div class="sticky top-0 z-50 flex items-center justify-between w-full h-14 px-6 max-w-[1280px] mx-auto">
<!-- Brand & Search -->
<div class="flex items-center gap-8">
<span class="text-xl font-extrabold text-blue-600 dark:text-blue-400 tracking-tight">AfterSales CRM</span>
<div class="hidden md:flex items-center bg-surface-container-low border border-outline-variant rounded px-3 py-1.5 focus-within:ring-2 focus-within:ring-primary/20 transition-all">
<span class="material-symbols-outlined text-outline text-sm mr-2">search</span>
<input class="bg-transparent border-none outline-none font-body-sm text-body-sm text-on-surface w-48 placeholder:text-outline focus:ring-0 p-0" placeholder="Search..." type="text"/>
</div>
</div>
<!-- Navigation Links -->
<nav class="hidden md:flex items-center gap-6 h-full font-manrope text-sm font-medium">
<a class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors h-full flex items-center cursor-pointer active:opacity-80" href="#">Feedback</a>
<a class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors h-full flex items-center cursor-pointer active:opacity-80" href="#">Products</a>
<a class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors h-full flex items-center cursor-pointer active:opacity-80" href="#">Customers</a>
<a class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors h-full flex items-center cursor-pointer active:opacity-80" href="#">Channels</a>
<!-- Active Link -->
<a class="text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 pb-1 h-full flex items-center mt-1 cursor-pointer active:opacity-80" href="#">Tags</a>
</nav>
<!-- Trailing Actions -->
<div class="flex items-center gap-4">
<button class="relative text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center justify-center">
<span class="material-symbols-outlined">notifications</span>
<span class="absolute top-0 right-0 w-2 h-2 bg-error rounded-full"></span>
</button>
<button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center justify-center">
<span class="material-symbols-outlined">settings</span>
</button>
<div class="w-8 h-8 rounded-full bg-surface-container-highest border border-outline-variant overflow-hidden ml-2 cursor-pointer">
<img alt="User profile" class="w-full h-full object-cover" data-alt="Default user profile placeholder image with initials" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBvPzTU52rKzV8E2G_u3A5RLQsq36XERgW8j4UrxWoXiaZfd4Dm_pRz1hWPtjQB28ABPVC85u851hAQWeZzW9rqeCkQsiyE3M07NVOWYj4tPfnAMycT3s8qriDeFg7shPhYN6GupA8oUEvV90XR1vDoflC8f2czj9UjG4HDB3S5M_a0ko_0tBdN61UzSGrJWDO4qX0yEoxdFUYx9H6-YuzValxWZYUGk9asj1bLI82fEGoiUuvzCPbrsUMIY-7JW4DCePzc1Y5Ao7I"/>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="flex-1 w-full max-w-[1280px] mx-auto px-margin-x py-8">
<!-- Page Header -->
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-stack-gap">
<div>
<h1 class="font-h1 text-h1 text-on-surface">Tag Management</h1>
<p class="font-body-base text-body-base text-on-surface-variant mt-1">Organize and categorize your CRM data with descriptive tags.</p>
</div>
<div class="flex items-center gap-3">
<button class="flex items-center gap-2 bg-surface-container-lowest border border-outline-variant text-on-surface font-button text-button px-4 py-2 rounded shadow-sm hover:bg-surface-container-low transition-colors">
<span class="material-symbols-outlined text-sm">filter_list</span>
Filter
</button>
<button class="flex items-center gap-2 bg-primary text-on-primary font-button text-button px-4 py-2 rounded shadow-sm hover:bg-primary-container transition-colors">
<span class="material-symbols-outlined text-sm">add</span>
New Tag
</button>
</div>
</div>
<!-- Layout Grid -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-stack-gap items-start">
<!-- Table Section (Takes up 8 columns on desktop) -->
<div class="lg:col-span-8 flex flex-col gap-4">
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant overflow-hidden">
<!-- Table Toolbar -->
<div class="p-4 border-b border-outline-variant bg-surface-container-lowest flex items-center justify-between">
<div class="relative w-64">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-sm">search</span>
<input class="w-full bg-surface-container text-on-surface font-body-base text-body-base rounded pl-9 pr-3 py-1.5 border border-transparent focus:border-primary focus:ring-1 focus:ring-primary focus:bg-surface-container-lowest transition-colors outline-none" placeholder="Search tags..." type="text"/>
</div>
<span class="font-body-sm text-body-sm text-on-surface-variant">Showing 5 of 24 tags</span>
</div>
<!-- Data Table -->
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse min-w-[600px]">
<thead>
<tr class="bg-surface-container-low border-b border-outline-variant">
<th class="py-3 px-4 font-label-semibold text-label-semibold text-on-surface-variant w-1/3">Name</th>
<th class="py-3 px-4 font-label-semibold text-label-semibold text-on-surface-variant w-1/4">Slug</th>
<th class="py-3 px-4 font-label-semibold text-label-semibold text-on-surface-variant w-1/6">Color</th>
<th class="py-3 px-4 font-label-semibold text-label-semibold text-on-surface-variant">Updated</th>
<th class="py-3 px-4 font-label-semibold text-label-semibold text-on-surface-variant text-right">Actions</th>
</tr>
</thead>
<tbody class="font-body-base text-body-base text-on-surface divide-y divide-outline-variant/50">
<tr class="hover:bg-surface-container-low/50 transition-colors group cursor-pointer">
<td class="py-3 px-4 font-medium">VIP Customer</td>
<td class="py-3 px-4 text-on-surface-variant font-mono text-xs">vip-customer</td>
<td class="py-3 px-4">
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-tertiary-container border border-outline-variant/30"></div>
<span class="text-xs text-on-surface-variant">Gold</span>
</div>
</td>
<td class="py-3 px-4 text-on-surface-variant">2 hours ago</td>
<td class="py-3 px-4 text-right opacity-0 group-hover:opacity-100 transition-opacity">
<button class="text-outline hover:text-primary transition-colors p-1"><span class="material-symbols-outlined text-[18px]">edit</span></button>
<button class="text-outline hover:text-error transition-colors p-1 ml-1"><span class="material-symbols-outlined text-[18px]">delete</span></button>
</td>
</tr>
<tr class="hover:bg-surface-container-low/50 transition-colors group cursor-pointer">
<td class="py-3 px-4 font-medium">High Priority</td>
<td class="py-3 px-4 text-on-surface-variant font-mono text-xs">high-priority</td>
<td class="py-3 px-4">
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-error border border-outline-variant/30"></div>
<span class="text-xs text-on-surface-variant">Red</span>
</div>
</td>
<td class="py-3 px-4 text-on-surface-variant">Yesterday</td>
<td class="py-3 px-4 text-right opacity-0 group-hover:opacity-100 transition-opacity">
<button class="text-outline hover:text-primary transition-colors p-1"><span class="material-symbols-outlined text-[18px]">edit</span></button>
<button class="text-outline hover:text-error transition-colors p-1 ml-1"><span class="material-symbols-outlined text-[18px]">delete</span></button>
</td>
</tr>
<tr class="hover:bg-surface-container-low/50 transition-colors group cursor-pointer bg-primary-fixed-dim/10">
<td class="py-3 px-4 font-medium">Feature Request</td>
<td class="py-3 px-4 text-on-surface-variant font-mono text-xs">feature-request</td>
<td class="py-3 px-4">
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-primary border border-outline-variant/30"></div>
<span class="text-xs text-on-surface-variant">Blue</span>
</div>
</td>
<td class="py-3 px-4 text-on-surface-variant">Oct 24, 2023</td>
<td class="py-3 px-4 text-right">
<button class="text-primary transition-colors p-1"><span class="material-symbols-outlined text-[18px]">edit</span></button>
<button class="text-outline hover:text-error transition-colors p-1 ml-1"><span class="material-symbols-outlined text-[18px]">delete</span></button>
</td>
</tr>
<tr class="hover:bg-surface-container-low/50 transition-colors group cursor-pointer">
<td class="py-3 px-4 font-medium">Bug Report</td>
<td class="py-3 px-4 text-on-surface-variant font-mono text-xs">bug-report</td>
<td class="py-3 px-4">
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-tertiary border border-outline-variant/30"></div>
<span class="text-xs text-on-surface-variant">Orange</span>
</div>
</td>
<td class="py-3 px-4 text-on-surface-variant">Oct 20, 2023</td>
<td class="py-3 px-4 text-right opacity-0 group-hover:opacity-100 transition-opacity">
<button class="text-outline hover:text-primary transition-colors p-1"><span class="material-symbols-outlined text-[18px]">edit</span></button>
<button class="text-outline hover:text-error transition-colors p-1 ml-1"><span class="material-symbols-outlined text-[18px]">delete</span></button>
</td>
</tr>
<tr class="hover:bg-surface-container-low/50 transition-colors group cursor-pointer">
<td class="py-3 px-4 font-medium">Documentation</td>
<td class="py-3 px-4 text-on-surface-variant font-mono text-xs">documentation</td>
<td class="py-3 px-4">
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-secondary border border-outline-variant/30"></div>
<span class="text-xs text-on-surface-variant">Gray</span>
</div>
</td>
<td class="py-3 px-4 text-on-surface-variant">Sep 15, 2023</td>
<td class="py-3 px-4 text-right opacity-0 group-hover:opacity-100 transition-opacity">
<button class="text-outline hover:text-primary transition-colors p-1"><span class="material-symbols-outlined text-[18px]">edit</span></button>
<button class="text-outline hover:text-error transition-colors p-1 ml-1"><span class="material-symbols-outlined text-[18px]">delete</span></button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination Footer -->
<div class="p-4 border-t border-outline-variant bg-surface-container-lowest flex items-center justify-between">
<button class="text-outline hover:text-on-surface transition-colors font-button text-body-sm flex items-center gap-1 disabled:opacity-50" disabled="">
<span class="material-symbols-outlined text-sm">chevron_left</span> Previous
</button>
<div class="flex items-center gap-1">
<button class="w-6 h-6 flex items-center justify-center rounded bg-primary text-on-primary font-button text-body-sm">1</button>
<button class="w-6 h-6 flex items-center justify-center rounded text-on-surface-variant hover:bg-surface-container font-button text-body-sm transition-colors">2</button>
<button class="w-6 h-6 flex items-center justify-center rounded text-on-surface-variant hover:bg-surface-container font-button text-body-sm transition-colors">3</button>
</div>
<button class="text-outline hover:text-on-surface transition-colors font-button text-body-sm flex items-center gap-1">
Next <span class="material-symbols-outlined text-sm">chevron_right</span>
</button>
</div>
</div>
</div>
<!-- Form Section (Takes up 4 columns on desktop) -->
<div class="lg:col-span-4 sticky top-[88px]">
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant p-6 flex flex-col gap-form-gap">
<div class="border-b border-outline-variant pb-4 mb-2 flex items-center justify-between">
<h2 class="font-h2 text-h2 text-on-surface">Edit Tag</h2>
<span class="bg-primary-fixed text-on-primary-fixed px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider">Editing</span>
</div>
<!-- Form Group: Name -->
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface" for="tagName">Tag Name</label>
<input class="w-full bg-surface-container-lowest text-on-surface font-body-base text-body-base rounded border border-outline-variant px-3 py-2 focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all placeholder:text-outline/60" id="tagName" type="text" value="Feature Request"/>
<p class="font-body-sm text-body-sm text-on-surface-variant">The display name used in the UI.</p>
</div>
<!-- Form Group: Slug -->
<div class="flex flex-col gap-1.5">
<label class="font-label-semibold text-label-semibold text-on-surface" for="tagSlug">URL Slug</label>
<input class="w-full bg-surface-container text-on-surface-variant font-mono text-sm rounded border border-outline-variant px-3 py-2 focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all" id="tagSlug" type="text" value="feature-request"/>
<p class="font-body-sm text-body-sm text-on-surface-variant">Auto-generated identifier. Use lowercase and hyphens.</p>
</div>
<!-- Form Group: Color Picker (Bento style) -->
<div class="flex flex-col gap-2 pt-2">
<label class="font-label-semibold text-label-semibold text-on-surface flex items-center justify-between">
Tag Color
<span class="w-4 h-4 rounded-full bg-primary border border-outline-variant/20 shadow-sm inline-block"></span>
</label>
<div class="bg-surface-container-low border border-outline-variant/50 rounded-lg p-3">
<div class="grid grid-cols-6 gap-2">
<!-- Swatches -->
<button class="aspect-square rounded border border-outline-variant/20 bg-[#f87171] hover:scale-110 transition-transform cursor-pointer" type="button"></button>
<button class="aspect-square rounded border border-outline-variant/20 bg-[#fb923c] hover:scale-110 transition-transform cursor-pointer" type="button"></button>
<button class="aspect-square rounded border border-outline-variant/20 bg-[#fbbf24] hover:scale-110 transition-transform cursor-pointer" type="button"></button>
<button class="aspect-square rounded border border-outline-variant/20 bg-[#34d399] hover:scale-110 transition-transform cursor-pointer" type="button"></button>
<button class="aspect-square rounded border border-outline-variant/20 bg-[#38bdf8] hover:scale-110 transition-transform cursor-pointer" type="button"></button>
<button class="aspect-square rounded border-2 border-primary bg-primary flex items-center justify-center hover:scale-110 transition-transform cursor-pointer" type="button">
<span class="material-symbols-outlined text-[14px] text-white font-bold">check</span>
</button>
<button class="aspect-square rounded border border-outline-variant/20 bg-[#818cf8] hover:scale-110 transition-transform cursor-pointer" type="button"></button>
<button class="aspect-square rounded border border-outline-variant/20 bg-[#c084fc] hover:scale-110 transition-transform cursor-pointer" type="button"></button>
<button class="aspect-square rounded border border-outline-variant/20 bg-[#f472b6] hover:scale-110 transition-transform cursor-pointer" type="button"></button>
<button class="aspect-square rounded border border-outline-variant/20 bg-[#94a3b8] hover:scale-110 transition-transform cursor-pointer" type="button"></button>
<button class="aspect-square rounded border border-outline-variant/20 bg-[#475569] hover:scale-110 transition-transform cursor-pointer" type="button"></button>
<button class="aspect-square rounded border border-outline border-dashed bg-surface-container-lowest flex items-center justify-center hover:bg-surface-container transition-colors cursor-pointer" title="Custom color" type="button">
<span class="material-symbols-outlined text-[16px] text-outline">add</span>
</button>
</div>
</div>
</div>
<!-- Form Actions -->
<div class="flex items-center justify-end gap-3 pt-4 border-t border-outline-variant mt-2">
<button class="bg-transparent text-on-surface font-button text-button px-4 py-2 rounded hover:bg-surface-container transition-colors" type="button">Cancel</button>
<button class="bg-primary text-on-primary font-button text-button px-4 py-2 rounded shadow-sm hover:bg-primary-container transition-colors" type="submit">Save Changes</button>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-gray-50 dark:bg-gray-950 border-t border-gray-200 dark:border-gray-800 w-full mt-auto">
<div class="w-full flex flex-col md:flex-row justify-between items-center px-6 max-w-[1280px] mx-auto py-8">
<p class="font-manrope text-xs text-gray-500 mb-4 md:mb-0">© 2024 AfterSales CRM. All rights reserved.</p>
<div class="flex gap-6">
<a class="font-manrope text-xs text-gray-500 hover:underline transition-all" href="#">Support</a>
<a class="font-manrope text-xs text-gray-500 hover:underline transition-all" href="#">Privacy Policy</a>
<a class="font-manrope text-xs text-gray-500 hover:underline transition-all" href="#">Terms of Service</a>
</div>
</div>
</footer>
</body></html>

BIN
webappUI/tag_list_desktop/code.html:Zone.Identifier Normal file
View File

Binary file not shown.

BIN
webappUI/tag_list_desktop/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 180 KiB

BIN
webappUI/tag_list_desktop/screen.png:Zone.Identifier Normal file
View File

Binary file not shown.