310 lines
19 KiB
HTML
310 lines
19 KiB
HTML
<!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&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Inter:wght@400;500;600&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": {
|
|
"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> |