nang cap san sang import
This commit is contained in:
457
webappUI/feedback_list_desktop/code.html
Normal file
457
webappUI/feedback_list_desktop/code.html
Normal 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&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@500;600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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>
|
||||
Reference in New Issue
Block a user