wirabasalamah/BizOne-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial BizOne portal setup

Browse Source
This commit is contained in:
Wira Irawan
2026-05-11 11:36:33 +07:00
commit 57017dd397
249 changed files with 41305 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

481
stitch_bizone/campaign_detail_whatsapp_business_admin/code.html Normal file
View File

@ -0,0 +1,481 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Campaign Detail | 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&amp;family=Inter:wght@400;500;600&amp;family=JetBrains+Mono&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"/>
<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": {
"primary-fixed-dim": "#3de273",
"on-surface": "#151e16",
"error": "#ba1a1a",
"surface": "#f3fcef",
"secondary-container": "#8cf1e1",
"surface-tint": "#006d2f",
"secondary-fixed-dim": "#72d8c8",
"on-primary": "#ffffff",
"status-error": "#EF4444",
"surface-bright": "#f3fcef",
"on-tertiary-container": "#78351b",
"on-secondary-container": "#006f64",
"on-primary-fixed": "#002109",
"background": "#f3fcef",
"surface-variant": "#dce5d8",
"on-tertiary-fixed": "#380d00",
"on-surface-variant": "#3c4a3d",
"on-primary-container": "#005523",
"tertiary-container": "#ffa07e",
"primary-fixed": "#66ff8e",
"secondary-fixed": "#8ff4e3",
"on-tertiary": "#ffffff",
"tertiary-fixed-dim": "#ffb59b",
"on-error-container": "#93000a",
"on-background": "#151e16",
"inverse-primary": "#3de273",
"on-primary-fixed-variant": "#005322",
"surface-container-low": "#edf6e9",
"surface-card": "#FFFFFF",
"outline-variant": "#bbcbb9",
"tertiary": "#93492e",
"on-secondary-fixed-variant": "#005047",
"status-warning": "#F59E0B",
"surface-container-highest": "#dce5d8",
"on-secondary-fixed": "#00201c",
"text-primary": "#1A1C1E",
"surface-dim": "#d3ddd0",
"on-error": "#ffffff",
"background-main": "#F8F9FA",
"status-success": "#25D366",
"error-container": "#ffdad6",
"outline": "#6c7b6b",
"surface-container": "#e7f1e4",
"surface-container-lowest": "#ffffff",
"text-secondary": "#64748B",
"tertiary-fixed": "#ffdbcf",
"secondary": "#006b5f",
"inverse-on-surface": "#eaf3e6",
"status-info": "#3B82F6",
"border-subtle": "#E2E8F0",
"surface-container-high": "#e2ebde",
"primary": "#006d2f",
"on-tertiary-fixed-variant": "#763319",
"on-secondary": "#ffffff",
"inverse-surface": "#2a332a",
"primary-container": "#25d366"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"container-margin": "32px",
"gutter": "24px",
"sidebar-width": "260px",
"toolbar-height": "64px",
"card-padding": "20px",
"base": "8px"
},
"fontFamily": {
"headline-md": ["Plus Jakarta Sans"],
"body-md": ["Inter"],
"title-sm": ["Plus Jakarta Sans"],
"body-sm": ["Inter"],
"label-caps": ["Inter"],
"display-lg": ["Plus Jakarta Sans"],
"mono-code": ["JetBrains Mono"]
}
}
}
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.whatsapp-bubble-in {
background-color: #ffffff;
border-radius: 0 12px 12px 12px;
box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
}
</style>
</head>
<body class="bg-background font-body-md text-on-surface">
<!-- SideNavBar Shell -->
<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 border-r border-outline-variant/30">
<div class="mb-8 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">Admin Console</p>
</div>
<nav class="flex-1 space-y-1">
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-[22px]">dashboard</span>
<span class="font-body-md">Dashboard</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-[22px]">chat</span>
<span class="font-body-md">Conversations</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-[22px]">contacts</span>
<span class="font-body-md">Contacts</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-[22px]">description</span>
<span class="font-body-md">Templates</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-[22px]">webhook</span>
<span class="font-body-md">Webhooks</span>
</a>
<!-- Active State Navigation -->
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-surface-container-low text-primary font-bold shadow-sm transition-transform duration-200 scale-[0.98]" href="#">
<span class="material-symbols-outlined text-[22px]" style="font-variation-settings: 'FILL' 1;">monitoring</span>
<span class="font-body-md">Analytics</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors group" href="#">
<span class="material-symbols-outlined text-[22px]">settings</span>
<span class="font-body-md">Settings</span>
</a>
</nav>
<div class="mt-auto pt-6 border-t border-outline-variant/20 space-y-1">
<button class="w-full bg-primary text-on-primary py-3 rounded-xl font-title-sm mb-4 flex items-center justify-center gap-2 hover:opacity-90 transition-opacity">
<span class="material-symbols-outlined text-[20px]">add_circle</span>
New Broadcast
</button>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined text-[22px]">help</span>
<span class="font-body-md">Help Center</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-on-surface-variant hover:bg-surface-container-low transition-colors" href="#">
<span class="material-symbols-outlined text-[22px]">logout</span>
<span class="font-body-md">Logout</span>
</a>
</div>
</aside>
<!-- Main Content Area -->
<main class="ml-[260px] min-h-screen flex flex-col">
<!-- TopNavBar Shell -->
<header class="h-toolbar-height bg-surface-container-lowest shadow-sm flex justify-between items-center px-gutter sticky top-0 z-40">
<div class="flex items-center gap-4 flex-1">
<div class="relative w-full max-w-md">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
<input class="w-full pl-10 pr-4 py-2 bg-surface-container rounded-full border-none focus:ring-2 focus:ring-primary/20 text-body-sm" placeholder="Search campaign data..." type="text"/>
</div>
</div>
<div class="flex items-center gap-6">
<div class="flex items-center gap-4 border-r border-outline-variant/30 pr-6 h-8">
<a class="font-title-sm text-title-sm text-primary font-bold border-b-2 border-primary" href="#">English</a>
<a class="font-title-sm text-title-sm text-on-surface-variant hover:text-primary transition-all" href="#">Bahasa</a>
</div>
<div class="flex items-center gap-3">
<button class="w-10 h-10 flex items-center justify-center rounded-full text-on-surface-variant hover:bg-surface-container transition-colors">
<span class="material-symbols-outlined">notifications</span>
</button>
<button class="w-10 h-10 flex items-center justify-center rounded-full text-on-surface-variant hover:bg-surface-container transition-colors">
<span class="material-symbols-outlined">settings</span>
</button>
<div class="w-10 h-10 rounded-full bg-primary-container overflow-hidden">
<img alt="Admin Profile Image" class="w-full h-full object-cover" data-alt="Close-up professional portrait of a tech administrator with a friendly expression. The lighting is bright and clean with a soft-focus office background, matching a high-end corporate software interface aesthetic. The color palette is composed of natural skin tones and a clean white background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAbqLlBEgLKC7ZLaHEfSxtT04AJhcu_4ArEPq3y_6dXgpGYhyiGiB-XlErU42lfjl5Rrlo73HkHwlCNC-RIjbBKCkFxcr4O-NbuEkR1is8D_fBWYIAQg99nE7Fdl9ygXUH0Gs7T18KuEgwDmpovPKDjpBTR_wwKipvTWGs8vFqj2qNdCTbp7lg_lLsLzDixcxKV-r3jwQi09NBR3OzzfeOt0RthyEIgOvlvlXRt33T1K2hkeFb1EMNsi8Y2RAu0a0TyaMeAywXKwBI"/>
</div>
</div>
</div>
</header>
<!-- Page Canvas -->
<div class="p-container-margin space-y-gutter flex-1">
<!-- Breadcrumbs & Title -->
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
<div>
<div class="flex items-center gap-2 text-on-surface-variant text-body-sm mb-1">
<span>Campaigns</span>
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
<span class="text-primary font-medium">Flash Sale Q4 2023</span>
</div>
<div class="flex items-center gap-3">
<h2 class="font-display-lg text-display-lg text-on-surface">Flash Sale Q4 2023</h2>
<span class="px-3 py-1 bg-status-success/10 text-status-success text-label-caps rounded-full border border-status-success/20">Completed</span>
</div>
</div>
<div class="flex gap-3">
<button class="flex items-center gap-2 px-4 py-2 border border-outline-variant rounded-lg font-title-sm hover:bg-surface-container-low transition-colors">
<span class="material-symbols-outlined">download</span>
Export Report
</button>
<button class="flex items-center gap-2 px-4 py-2 bg-primary text-on-primary rounded-lg font-title-sm hover:opacity-90 transition-opacity">
<span class="material-symbols-outlined">refresh</span>
Re-run Campaign
</button>
</div>
</div>
<!-- Analytics Bento Grid -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-gutter">
<!-- Delivery Rate -->
<div class="bg-surface-container-lowest p-card-padding rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant/10">
<div class="flex items-center justify-between mb-4">
<span class="text-label-caps text-on-surface-variant">DELIVERY RATE</span>
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">check_circle</span>
</div>
<div class="flex items-baseline gap-2">
<span class="text-[32px] font-bold text-on-surface">98.2%</span>
<span class="text-status-success text-body-sm font-medium">↑ 1.2%</span>
</div>
<p class="text-on-surface-variant text-body-sm mt-1">12,450 / 12,678 Messages</p>
</div>
<!-- Read Rate -->
<div class="bg-surface-container-lowest p-card-padding rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant/10">
<div class="flex items-center justify-between mb-4">
<span class="text-label-caps text-on-surface-variant">READ RATE</span>
<span class="material-symbols-outlined text-status-info">visibility</span>
</div>
<div class="flex items-baseline gap-2">
<span class="text-[32px] font-bold text-on-surface">84.5%</span>
<span class="text-status-success text-body-sm font-medium">↑ 4.5%</span>
</div>
<p class="text-on-surface-variant text-body-sm mt-1">10,522 Messages Opened</p>
</div>
<!-- CTR -->
<div class="bg-surface-container-lowest p-card-padding rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant/10">
<div class="flex items-center justify-between mb-4">
<span class="text-label-caps text-on-surface-variant">CLICK-THROUGH</span>
<span class="material-symbols-outlined text-tertiary">ads_click</span>
</div>
<div class="flex items-baseline gap-2">
<span class="text-[32px] font-bold text-on-surface">12.8%</span>
<span class="text-status-error text-body-sm font-medium">↓ 0.3%</span>
</div>
<p class="text-on-surface-variant text-body-sm mt-1">1,620 Links Clicked</p>
</div>
<!-- Reply Rate -->
<div class="bg-surface-container-lowest p-card-padding rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant/10">
<div class="flex items-center justify-between mb-4">
<span class="text-label-caps text-on-surface-variant">REPLY RATE</span>
<span class="material-symbols-outlined text-secondary">forum</span>
</div>
<div class="flex items-baseline gap-2">
<span class="text-[32px] font-bold text-on-surface">5.4%</span>
<span class="text-status-success text-body-sm font-medium">↑ 2.1%</span>
</div>
<p class="text-on-surface-variant text-body-sm mt-1">685 Customers Replied</p>
</div>
</div>
<!-- Campaign Visuals & Content Section -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-gutter">
<!-- Message Preview Mockup -->
<div class="lg:col-span-4 bg-surface-container p-8 rounded-xl border border-outline-variant/10 flex flex-col items-center">
<h3 class="text-label-caps text-on-surface-variant mb-6 w-full">CAMPAIGN PREVIEW</h3>
<div class="w-[280px] h-[520px] bg-white rounded-[40px] border-[8px] border-on-surface shadow-2xl relative overflow-hidden flex flex-col">
<!-- Phone Header -->
<div class="h-14 bg-primary text-on-primary flex items-center px-4 gap-3">
<span class="material-symbols-outlined">arrow_back</span>
<div class="w-8 h-8 rounded-full bg-surface-container-lowest/20"></div>
<div class="flex-1">
<div class="text-[14px] font-bold leading-tight">Flash Sale Bot</div>
<div class="text-[10px] opacity-80">online</div>
</div>
</div>
<!-- Chat Area -->
<div class="flex-1 bg-[#E5DDD5] p-4 space-y-4">
<div class="whatsapp-bubble-in p-2.5 max-w-[85%] relative">
<img alt="Campaign Product Image" class="rounded-lg w-full mb-2 h-32 object-cover" data-alt="A vibrant marketing photograph showing a variety of tech gadgets on a minimalist wooden table. The lighting is warm and inviting, emphasizing a retail 'flash sale' vibe. The image is framed as a WhatsApp message attachment with high contrast and sharp details to match a premium e-commerce design language." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAI2HS0obWO5yveOIGO2nzsWbylrWPZpQDbwJVZ0mesFJRcTYQTUQm8b3f7wx8x2Uj-HZoi7RrbxOL58rSN03j6zptqj0i9cfO-X1ETIFF2IIkPaC1vBuLQ-qTkxUjWDD0A0pQx5B613wTe8HjqmHcJ5dW7z74zqf8Lg9atszDogfjz9CNwYpohogVfzNBhPF7tYx5F1LxUp2iaVGpnB3xVRgaSaFrXBa98VKsWbPBwX1JJzsWYfeBPwUh_5S3wBBB5ni9b2xkI82k"/>
<p class="text-[13px] text-[#111b21] leading-snug">
Hey there! 🎁 Our Year-End Flash Sale is LIVE! Get 40% OFF all items in our store for the next 24 hours.
</p>
<div class="mt-3 flex flex-col gap-1">
<button class="w-full py-1.5 bg-white border border-gray-100 text-status-info text-[12px] font-bold rounded-md shadow-sm">Shop Now</button>
<button class="w-full py-1.5 bg-white border border-gray-100 text-status-info text-[12px] font-bold rounded-md shadow-sm">View Catalog</button>
</div>
<span class="text-[10px] text-on-surface-variant/60 block text-right mt-1">10:45 AM</span>
</div>
</div>
</div>
</div>
<!-- Engagement Chart -->
<div class="lg:col-span-8 bg-surface-container-lowest p-card-padding rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant/10">
<div class="flex items-center justify-between mb-8">
<div>
<h3 class="font-title-sm text-title-sm text-on-surface">Engagement Over Time</h3>
<p class="text-body-sm text-on-surface-variant">Visualizing interaction density for the first 12 hours</p>
</div>
<div class="flex gap-2">
<span class="flex items-center gap-1.5 text-[12px] text-on-surface-variant">
<span class="w-2.5 h-2.5 rounded-full bg-primary"></span> Read
</span>
<span class="flex items-center gap-1.5 text-[12px] text-on-surface-variant">
<span class="w-2.5 h-2.5 rounded-full bg-status-info"></span> Click
</span>
</div>
</div>
<!-- Simplified Visual Representation of a Chart -->
<div class="h-[360px] flex items-end justify-between gap-2 pt-10">
<div class="flex-1 bg-surface-container-low relative rounded-t-lg group" style="height: 30%;">
<div class="absolute bottom-0 left-0 w-full bg-primary/20 rounded-t-lg transition-all group-hover:bg-primary/40" style="height: 60%"></div>
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant">9 AM</div>
</div>
<div class="flex-1 bg-surface-container-low relative rounded-t-lg group" style="height: 45%;">
<div class="absolute bottom-0 left-0 w-full bg-primary/20 rounded-t-lg" style="height: 70%"></div>
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant">10 AM</div>
</div>
<div class="flex-1 bg-surface-container-low relative rounded-t-lg group" style="height: 85%;">
<div class="absolute bottom-0 left-0 w-full bg-primary/40 rounded-t-lg" style="height: 80%"></div>
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant font-bold">11 AM</div>
</div>
<div class="flex-1 bg-surface-container-low relative rounded-t-lg group" style="height: 100%;">
<div class="absolute bottom-0 left-0 w-full bg-primary rounded-t-lg" style="height: 90%"></div>
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant">12 PM</div>
</div>
<div class="flex-1 bg-surface-container-low relative rounded-t-lg group" style="height: 75%;">
<div class="absolute bottom-0 left-0 w-full bg-primary/40 rounded-t-lg" style="height: 75%"></div>
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant">1 PM</div>
</div>
<div class="flex-1 bg-surface-container-low relative rounded-t-lg group" style="height: 60%;">
<div class="absolute bottom-0 left-0 w-full bg-primary/30 rounded-t-lg" style="height: 65%"></div>
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant">2 PM</div>
</div>
<div class="flex-1 bg-surface-container-low relative rounded-t-lg group" style="height: 50%;">
<div class="absolute bottom-0 left-0 w-full bg-primary/20 rounded-t-lg" style="height: 50%"></div>
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant">3 PM</div>
</div>
<div class="flex-1 bg-surface-container-low relative rounded-t-lg group" style="height: 40%;">
<div class="absolute bottom-0 left-0 w-full bg-primary/10 rounded-t-lg" style="height: 40%"></div>
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-on-surface-variant">4 PM</div>
</div>
</div>
</div>
</div>
<!-- Recipient Status Table -->
<div class="bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant/10 overflow-hidden">
<div class="p-card-padding flex justify-between items-center bg-surface-container-lowest">
<h3 class="font-title-sm text-title-sm text-on-surface">Recipient List</h3>
<div class="flex gap-4">
<select class="bg-surface-container border-none text-body-sm rounded-lg py-1.5 pl-3 pr-8 focus:ring-1 focus:ring-primary">
<option>All Status</option>
<option>Read</option>
<option>Delivered</option>
<option>Failed</option>
</select>
<div class="relative">
<span class="material-symbols-outlined absolute left-2 top-1/2 -translate-y-1/2 text-[18px] text-on-surface-variant">filter_list</span>
<input class="pl-8 pr-3 py-1.5 bg-surface-container border-none rounded-lg text-body-sm focus:ring-1 focus:ring-primary" placeholder="Filter by name..." type="text"/>
</div>
</div>
</div>
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-surface-container-low/50">
<th class="px-6 py-3 text-label-caps text-on-surface-variant">RECIPIENT</th>
<th class="px-6 py-3 text-label-caps text-on-surface-variant">PHONE NUMBER</th>
<th class="px-6 py-3 text-label-caps text-on-surface-variant">STATUS</th>
<th class="px-6 py-3 text-label-caps text-on-surface-variant">LAST UPDATED</th>
<th class="px-6 py-3 text-label-caps text-on-surface-variant">ACTION</th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant/10">
<tr class="hover:bg-surface-container-low transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-secondary-container flex items-center justify-center text-[12px] font-bold text-on-secondary-container">JS</div>
<span class="font-body-md font-medium">John Smith</span>
</div>
</td>
<td class="px-6 py-4 font-mono-code text-body-sm">+1 (555) 0123-4567</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary text-[18px]" style="font-variation-settings: 'FILL' 1;">done_all</span>
<span class="text-body-sm font-medium">Read</span>
</div>
</td>
<td class="px-6 py-4 text-body-sm text-on-surface-variant">Nov 24, 10:48 AM</td>
<td class="px-6 py-4">
<button class="text-primary hover:underline text-body-sm font-medium">View Thread</button>
</td>
</tr>
<tr class="hover:bg-surface-container-low transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-tertiary-container flex items-center justify-center text-[12px] font-bold text-on-tertiary-container">AW</div>
<span class="font-body-md font-medium">Alice Wong</span>
</div>
</td>
<td class="px-6 py-4 font-mono-code text-body-sm">+852 9123-4567</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary text-[18px]">done_all</span>
<span class="text-body-sm font-medium">Delivered</span>
</div>
</td>
<td class="px-6 py-4 text-body-sm text-on-surface-variant">Nov 24, 10:46 AM</td>
<td class="px-6 py-4">
<button class="text-primary hover:underline text-body-sm font-medium">View Thread</button>
</td>
</tr>
<tr class="hover:bg-surface-container-low transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-error-container flex items-center justify-center text-[12px] font-bold text-on-error-container">RM</div>
<span class="font-body-md font-medium">Robert Miller</span>
</div>
</td>
<td class="px-6 py-4 font-mono-code text-body-sm">+44 7700 900123</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-status-error text-[18px]">error</span>
<span class="text-body-sm font-medium text-status-error">Failed</span>
</div>
</td>
<td class="px-6 py-4 text-body-sm text-on-surface-variant">Nov 24, 10:45 AM</td>
<td class="px-6 py-4">
<button class="text-primary hover:underline text-body-sm font-medium">Retry</button>
</td>
</tr>
<tr class="hover:bg-surface-container-low transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-surface-variant flex items-center justify-center text-[12px] font-bold text-on-surface-variant">CK</div>
<span class="font-body-md font-medium">Catherine Kim</span>
</div>
</td>
<td class="px-6 py-4 font-mono-code text-body-sm">+82 10-1234-5678</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary text-[18px]" style="font-variation-settings: 'FILL' 1;">done_all</span>
<span class="text-body-sm font-medium">Read</span>
</div>
</td>
<td class="px-6 py-4 text-body-sm text-on-surface-variant">Nov 24, 11:02 AM</td>
<td class="px-6 py-4">
<button class="text-primary hover:underline text-body-sm font-medium">View Thread</button>
</td>
</tr>
</tbody>
</table>
<div class="p-4 bg-surface-container-lowest border-t border-outline-variant/10 flex justify-between items-center">
<span class="text-body-sm text-on-surface-variant">Showing 1-10 of 12,678 recipients</span>
<div class="flex gap-2">
<button class="p-1.5 rounded border border-outline-variant hover:bg-surface-container transition-colors disabled:opacity-50" disabled="">
<span class="material-symbols-outlined text-[18px]">chevron_left</span>
</button>
<button class="px-3 py-1 bg-primary text-on-primary rounded text-body-sm font-bold">1</button>
<button class="px-3 py-1 rounded border border-outline-variant hover:bg-surface-container text-body-sm transition-colors">2</button>
<button class="px-3 py-1 rounded border border-outline-variant hover:bg-surface-container text-body-sm transition-colors">3</button>
<button class="p-1.5 rounded border border-outline-variant hover:bg-surface-container transition-colors">
<span class="material-symbols-outlined text-[18px]">chevron_right</span>
</button>
</div>
</div>
</div>
</div>
<!-- Footer Note -->
<footer class="p-gutter text-center border-t border-outline-variant/10">
<p class="text-body-sm text-on-surface-variant/60">© 2023 WhatsApp Business Admin Console. Data refreshed every 5 minutes.</p>
</footer>
</main>
</body></html>

BIN
stitch_bizone/campaign_detail_whatsapp_business_admin/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 312 KiB