nang cap san sang import
This commit is contained in:
404
webappUI/edit_feedback_desktop/code.html
Normal file
404
webappUI/edit_feedback_desktop/code.html
Normal 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&family=Manrope:wght@500;600;700;800&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"/>
|
||||
<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 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 & 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 & 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
BIN
webappUI/edit_feedback_desktop/code.html:Zone.Identifier
Normal file
Binary file not shown.
BIN
webappUI/edit_feedback_desktop/screen.png
Normal file
BIN
webappUI/edit_feedback_desktop/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 255 KiB |
BIN
webappUI/edit_feedback_desktop/screen.png:Zone.Identifier
Normal file
BIN
webappUI/edit_feedback_desktop/screen.png:Zone.Identifier
Normal file
Binary file not shown.
Reference in New Issue
Block a user