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

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.