Initial BizOne portal setup
This commit is contained in:
390
stitch_bizone/contact_detail_whatsapp_business_admin/code.html
Normal file
390
stitch_bizone/contact_detail_whatsapp_business_admin/code.html
Normal file
@ -0,0 +1,390 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Contact Details - WhatsApp Business Admin</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Inter:wght@400;600&family=JetBrains+Mono&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": {
|
||||
"surface-container-highest": "#dce5d8",
|
||||
"secondary": "#006b5f",
|
||||
"secondary-fixed": "#8ff4e3",
|
||||
"on-primary-fixed": "#002109",
|
||||
"on-primary-fixed-variant": "#005322",
|
||||
"on-surface": "#151e16",
|
||||
"on-tertiary-container": "#78351b",
|
||||
"on-surface-variant": "#3c4a3d",
|
||||
"surface-container-high": "#e2ebde",
|
||||
"error-container": "#ffdad6",
|
||||
"text-secondary": "#64748B",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"primary-fixed-dim": "#3de273",
|
||||
"border-subtle": "#E2E8F0",
|
||||
"tertiary-container": "#ffa07e",
|
||||
"secondary-fixed-dim": "#72d8c8",
|
||||
"on-tertiary": "#ffffff",
|
||||
"status-success": "#25D366",
|
||||
"outline-variant": "#bbcbb9",
|
||||
"tertiary-fixed-dim": "#ffb59b",
|
||||
"tertiary-fixed": "#ffdbcf",
|
||||
"background": "#f3fcef",
|
||||
"surface-container": "#e7f1e4",
|
||||
"on-secondary": "#ffffff",
|
||||
"status-error": "#EF4444",
|
||||
"tertiary": "#93492e",
|
||||
"surface-card": "#FFFFFF",
|
||||
"surface-variant": "#dce5d8",
|
||||
"inverse-on-surface": "#eaf3e6",
|
||||
"on-secondary-fixed": "#00201c",
|
||||
"on-tertiary-fixed-variant": "#763319",
|
||||
"on-tertiary-fixed": "#380d00",
|
||||
"on-primary-container": "#005523",
|
||||
"inverse-primary": "#3de273",
|
||||
"surface": "#f3fcef",
|
||||
"secondary-container": "#8cf1e1",
|
||||
"background-main": "#F8F9FA",
|
||||
"status-info": "#3B82F6",
|
||||
"surface-tint": "#006d2f",
|
||||
"status-warning": "#F59E0B",
|
||||
"surface-bright": "#f3fcef",
|
||||
"primary": "#006d2f",
|
||||
"surface-container-low": "#edf6e9",
|
||||
"on-error-container": "#93000a",
|
||||
"error": "#ba1a1a",
|
||||
"on-error": "#ffffff",
|
||||
"surface-dim": "#d3ddd0",
|
||||
"on-secondary-fixed-variant": "#005047",
|
||||
"on-secondary-container": "#006f64",
|
||||
"outline": "#6c7b6b",
|
||||
"inverse-surface": "#2a332a",
|
||||
"primary-fixed": "#66ff8e",
|
||||
"on-background": "#151e16",
|
||||
"on-primary": "#ffffff",
|
||||
"text-primary": "#1A1C1E",
|
||||
"primary-container": "#25d366"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter": "24px",
|
||||
"base": "8px",
|
||||
"card-padding": "20px",
|
||||
"toolbar-height": "64px",
|
||||
"container-margin": "32px",
|
||||
"sidebar-width": "260px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"title-sm": ["Plus Jakarta Sans"],
|
||||
"label-caps": ["Inter"],
|
||||
"display-lg": ["Plus Jakarta Sans"],
|
||||
"body-md": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"headline-md": ["Plus Jakarta Sans"],
|
||||
"mono-code": ["JetBrains Mono"]
|
||||
},
|
||||
"fontSize": {
|
||||
"title-sm": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
||||
"display-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"headline-md": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
||||
"mono-code": ["13px", {"lineHeight": "20px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
body {
|
||||
background-color: #f3fcef;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
.bento-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="text-on-surface">
|
||||
<!-- SideNavBar -->
|
||||
<aside class="fixed left-0 top-0 h-full w-[260px] bg-surface-container-lowest shadow-sm flex flex-col py-6 px-4 z-50">
|
||||
<div class="mb-10 px-2">
|
||||
<h1 class="font-headline-md text-headline-md font-bold text-primary">WhatsApp Business</h1>
|
||||
<p class="font-body-sm text-on-surface-variant opacity-70">Admin Console</p>
|
||||
</div>
|
||||
<nav class="flex-grow space-y-2">
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
<span class="font-body-md">Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined">chat</span>
|
||||
<span class="font-body-md">Conversations</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-primary font-bold bg-surface-container-low transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined">contacts</span>
|
||||
<span class="font-body-md">Contacts</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined">description</span>
|
||||
<span class="font-body-md">Templates</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined">webhook</span>
|
||||
<span class="font-body-md">Webhooks</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined">monitoring</span>
|
||||
<span class="font-body-md">Analytics</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="font-body-md">Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto pt-6 border-t border-surface-container space-y-1">
|
||||
<button class="w-full bg-primary text-on-primary font-bold py-3 rounded-xl mb-4 hover:opacity-90 transition-opacity">
|
||||
New Broadcast
|
||||
</button>
|
||||
<a class="flex items-center gap-3 px-4 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
<span class="font-body-sm">Help Center</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">logout</span>
|
||||
<span class="font-body-sm">Logout</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- TopNavBar -->
|
||||
<header class="fixed top-0 right-0 w-[calc(100%-260px)] h-[64px] bg-surface-container-lowest shadow-sm flex justify-between items-center px-gutter z-40">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
|
||||
<input class="pl-10 pr-4 py-2 bg-surface-container-low border-none rounded-full w-80 text-body-sm focus:ring-2 focus:ring-primary/20" placeholder="Search contacts or messages..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex items-center gap-4 font-title-sm text-on-surface-variant">
|
||||
<button class="hover:text-primary transition-colors">English</button>
|
||||
<div class="h-4 w-[1px] bg-surface-container-highest"></div>
|
||||
<button class="hover:text-primary transition-colors">Bahasa</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 border-l border-surface-container-highest pl-6">
|
||||
<button class="p-2 text-on-surface-variant hover:text-primary relative">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
<span class="absolute top-2 right-2 w-2 h-2 bg-status-error rounded-full"></span>
|
||||
</button>
|
||||
<button class="p-2 text-on-surface-variant hover:text-primary">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
</button>
|
||||
<img alt="Admin Avatar" class="w-8 h-8 rounded-full border border-surface-container-highest" data-alt="A professional headshot of a corporate male administrator in his 30s, wearing a clean white shirt. The lighting is soft and even, typical of a professional studio environment. The background is a minimalist, light gray gradient that complements a clean SaaS dashboard aesthetic. The mood is trustworthy and efficient." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDdHxHkIPj1i86hTXVDEzzo9CscVxxWbz2SZR5yDfzgZKn4nqU9n3f1SMosiJeQT7mhcwSXJvMGhrv6DlKFAaqzyJSwFBqXHVpZOnNKLr44J69dPNZtoO6dgaMbooORPvZVYAbiQt69dE0pu6BnsnMUZHL35LenKuo4RmFRGvbcG7oYu0dos9oYCUhSTg-paEqYSIvOJ5XK7s0UQQQJfj9O-0bTnLjTc0kEf0-gtgsmATNh6xecHC9W0hW2DA6TV7yYAfSS8Rilny8"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-[260px] pt-[64px] p-container-margin">
|
||||
<!-- Breadcrumbs -->
|
||||
<nav class="flex items-center gap-2 mb-8 text-on-surface-variant font-body-sm">
|
||||
<a class="hover:text-primary" href="#">Contacts</a>
|
||||
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
|
||||
<span class="text-primary font-bold">Sarah Jenkins</span>
|
||||
</nav>
|
||||
<div class="bento-grid">
|
||||
<!-- Profile Header Card (Full Width) -->
|
||||
<section class="col-span-12 bg-surface-card rounded-xl shadow-sm p-8 flex items-center justify-between border border-surface-container">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="relative">
|
||||
<img alt="Sarah Jenkins" class="w-24 h-24 rounded-full border-4 border-surface-container-low object-cover" data-alt="A high-quality close-up portrait of a professional woman in her early 30s with a warm and approachable expression. She is in a brightly lit modern office setting with soft natural light streaming in. Her attire is business casual. The visual style is crisp, clean, and optimistic, perfectly suited for a premium enterprise contact management system." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAMrVyj_7HZm8_nsnC868XN7bNsblyBom8qvUe2kXl7HDjZB3wis63Q8x4wpb6kjMBNE8KqwMBaMv2gnVNUbSqCPOq524tt1P3ideoa6-3LOjhI41beoO81ETfdJaBwkjejdgNrBKo0Dtiq0uxrPkNCgD650IkCRn4ieELjZfitQk-H-Vh4DDJvJVBy72mmqZWvsRcaMOsICYQO0qnbTTCNWm_Lzgz9SY1_YycYE5NPSk6r4RqgDMeT12t6-y4zhH83_GsUXz8Vaic"/>
|
||||
<div class="absolute bottom-1 right-1 w-5 h-5 bg-status-success border-4 border-surface-card rounded-full"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-1">
|
||||
<h2 class="font-display-lg text-display-lg text-primary">Sarah Jenkins</h2>
|
||||
<span class="bg-surface-container px-3 py-1 rounded-full text-label-caps text-on-surface-variant">ID: 98421</span>
|
||||
</div>
|
||||
<p class="text-on-surface-variant font-body-md flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-status-success text-[18px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
Active Customer • Last seen 12 mins ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="flex items-center gap-2 px-6 py-3 border border-outline-variant rounded-xl font-body-md hover:bg-surface-container-low transition-all">
|
||||
<span class="material-symbols-outlined">edit</span>
|
||||
Edit Contact
|
||||
</button>
|
||||
<button class="flex items-center gap-2 px-6 py-3 bg-primary text-on-primary rounded-xl font-bold shadow-sm hover:opacity-90 transition-all">
|
||||
<span class="material-symbols-outlined">chat</span>
|
||||
Message
|
||||
</button>
|
||||
<button class="p-3 text-status-error hover:bg-error-container/20 rounded-xl transition-all">
|
||||
<span class="material-symbols-outlined">block</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Contact Details (Left Column) -->
|
||||
<aside class="col-span-4 space-y-6">
|
||||
<!-- Info Card -->
|
||||
<div class="bg-surface-card rounded-xl shadow-sm p-6 border border-surface-container">
|
||||
<h3 class="font-title-sm text-title-sm mb-6 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">info</span>
|
||||
Contact Information
|
||||
</h3>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<label class="text-label-caps text-on-surface-variant block mb-1">PHONE NUMBER</label>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-body-md font-bold">+1 (555) 0123-4567</span>
|
||||
<button class="text-primary hover:bg-primary/10 p-1 rounded"><span class="material-symbols-outlined text-[20px]">content_copy</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-label-caps text-on-surface-variant block mb-1">EMAIL ADDRESS</label>
|
||||
<span class="font-body-md">sarah.jenkins@retailflow.com</span>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-label-caps text-on-surface-variant block mb-1">LOCATION</label>
|
||||
<span class="font-body-md">San Francisco, CA</span>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-label-caps text-on-surface-variant block mb-4">TAGS</label>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="bg-primary-container text-on-primary-container px-3 py-1 rounded-full text-label-caps">VIP CUSTOMER</span>
|
||||
<span class="bg-secondary-container text-on-secondary-container px-3 py-1 rounded-full text-label-caps">RETAIL</span>
|
||||
<span class="bg-tertiary-fixed text-on-tertiary-fixed-variant px-3 py-1 rounded-full text-label-caps">TECH SAVVY</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Notes Section -->
|
||||
<div class="bg-surface-card rounded-xl shadow-sm p-6 border border-surface-container">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="font-title-sm text-title-sm flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">sticky_note_2</span>
|
||||
Internal Notes
|
||||
</h3>
|
||||
<button class="text-primary font-body-sm hover:underline">Add Note</button>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="bg-surface-container-low p-4 rounded-lg border-l-4 border-primary">
|
||||
<p class="font-body-sm mb-2 italic">"Prefers afternoon communication. Interested in upcoming fall collection preview."</p>
|
||||
<div class="flex items-center justify-between text-label-caps text-on-surface-variant">
|
||||
<span>- Alex Rivera</span>
|
||||
<span>Oct 24, 2023</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low p-4 rounded-lg">
|
||||
<p class="font-body-sm mb-2">"Resolved shipping delay issue for Order #88291. Customer satisfied with credit offered."</p>
|
||||
<div class="flex items-center justify-between text-label-caps text-on-surface-variant">
|
||||
<span>- Maya Chen</span>
|
||||
<span>Sep 12, 2023</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Interaction History Timeline (Right Column) -->
|
||||
<section class="col-span-8 bg-surface-card rounded-xl shadow-sm p-6 border border-surface-container">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<h3 class="font-title-sm text-title-sm flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">history</span>
|
||||
Interaction History
|
||||
</h3>
|
||||
<div class="flex gap-2">
|
||||
<button class="px-4 py-2 bg-surface-container rounded-lg text-label-caps text-on-surface-variant hover:bg-surface-container-high transition-colors">ALL ACTIVITY</button>
|
||||
<button class="px-4 py-2 rounded-lg text-label-caps text-on-surface-variant hover:bg-surface-container transition-colors">MESSAGES</button>
|
||||
<button class="px-4 py-2 rounded-lg text-label-caps text-on-surface-variant hover:bg-surface-container transition-colors">SYSTEM</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Timeline -->
|
||||
<div class="relative ml-4 space-y-8 before:content-[''] before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-[2px] before:bg-surface-container-highest">
|
||||
<!-- Timeline Item: Message -->
|
||||
<div class="relative pl-10">
|
||||
<div class="absolute left-0 top-1 w-6 h-6 bg-primary-container rounded-full flex items-center justify-center z-10 border-4 border-surface-card">
|
||||
<span class="material-symbols-outlined text-[14px] text-on-primary-container" style="font-variation-settings: 'FILL' 1;">chat</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="font-body-md font-bold">Message Sent</span>
|
||||
<span class="text-on-surface-variant text-label-caps">• 12 minutes ago</span>
|
||||
</div>
|
||||
<div class="bg-surface-container-low p-4 rounded-xl border border-surface-container max-w-lg">
|
||||
<p class="text-body-sm text-on-surface mb-3">"Hi Sarah! Your recent order for the Signature Canvas Tote has been processed and is ready for dispatch."</p>
|
||||
<div class="flex items-center gap-4 text-label-caps text-on-surface-variant">
|
||||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px] text-status-success">done_all</span> Delivered</span>
|
||||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">visibility</span> Read at 10:48 AM</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Timeline Item: Status Change -->
|
||||
<div class="relative pl-10">
|
||||
<div class="absolute left-0 top-1 w-6 h-6 bg-secondary-container rounded-full flex items-center justify-center z-10 border-4 border-surface-card">
|
||||
<span class="material-symbols-outlined text-[14px] text-on-secondary-container" style="font-variation-settings: 'FILL' 1;">person_pin</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-body-md font-bold">Status Updated</span>
|
||||
<span class="text-on-surface-variant text-label-caps">• Yesterday, 4:15 PM</span>
|
||||
</div>
|
||||
<p class="text-body-sm text-on-surface-variant mt-1">Status changed from <span class="text-on-surface font-semibold">Inactive</span> to <span class="text-status-success font-semibold">Active Customer</span> by System Trigger.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Timeline Item: Inbound Message -->
|
||||
<div class="relative pl-10">
|
||||
<div class="absolute left-0 top-1 w-6 h-6 bg-surface-container-highest rounded-full flex items-center justify-center z-10 border-4 border-surface-card">
|
||||
<span class="material-symbols-outlined text-[14px] text-on-surface-variant" style="font-variation-settings: 'FILL' 1;">call_received</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="font-body-md font-bold">Inbound Message</span>
|
||||
<span class="text-on-surface-variant text-label-caps">• Oct 24, 09:12 AM</span>
|
||||
</div>
|
||||
<div class="bg-surface-container-highest/30 p-4 rounded-xl border border-surface-container max-w-lg">
|
||||
<p class="text-body-sm text-on-surface italic">"Thanks for the update! Looking forward to receiving it."</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Timeline Item: Tag Added -->
|
||||
<div class="relative pl-10">
|
||||
<div class="absolute left-0 top-1 w-6 h-6 bg-tertiary-container rounded-full flex items-center justify-center z-10 border-4 border-surface-card">
|
||||
<span class="material-symbols-outlined text-[14px] text-on-tertiary-container" style="font-variation-settings: 'FILL' 1;">sell</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-body-md font-bold">Tag Added</span>
|
||||
<span class="text-on-surface-variant text-label-caps">• Oct 22, 11:30 AM</span>
|
||||
</div>
|
||||
<p class="text-body-sm text-on-surface-variant mt-1">Tag <span class="bg-primary-container text-on-primary-container px-2 py-0.5 rounded text-[11px] font-bold">VIP CUSTOMER</span> added by Admin Alex Rivera.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 flex justify-center">
|
||||
<button class="text-primary font-bold text-body-sm flex items-center gap-1 hover:opacity-80 transition-opacity">
|
||||
View Full History
|
||||
<span class="material-symbols-outlined">expand_more</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
stitch_bizone/contact_detail_whatsapp_business_admin/screen.png
Normal file
BIN
stitch_bizone/contact_detail_whatsapp_business_admin/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 350 KiB |
Reference in New Issue
Block a user