380 lines
15 KiB
HTML
380 lines
15 KiB
HTML
|
<!-- Intents Dashboard - Sentient Theme -->
|
||
|
|
<!-- AI-powered intent tracking and decision management -->
|
||
|
|
|
||
|
|
<div class="intents-dashboard">
|
||
|
|
<!-- Dashboard Header -->
|
||
|
|
<div class="dashboard-header">
|
||
|
|
<div class="dashboard-title">
|
||
|
|
<h1>Dashboard</h1>
|
||
|
|
<span class="dashboard-subtitle">Analytics</span>
|
||
|
|
</div>
|
||
|
|
<div class="dashboard-actions">
|
||
|
|
<div class="search-bar">
|
||
|
|
<svg
|
||
|
|
class="search-bar-icon"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
>
|
||
|
|
<circle cx="11" cy="11" r="8" />
|
||
|
|
<path d="m21 21-4.35-4.35" />
|
||
|
|
</svg>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
class="search-bar-input"
|
||
|
|
placeholder="Search Intents"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="profile-selector">
|
||
|
|
<div class="profile-avatar">A</div>
|
||
|
|
<span class="profile-name">Profile 1</span>
|
||
|
|
<svg
|
||
|
|
class="profile-dropdown-icon"
|
||
|
|
width="12"
|
||
|
|
height="12"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
>
|
||
|
|
<polyline points="6 9 12 15 18 9" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="notification-indicator">
|
||
|
|
<svg
|
||
|
|
width="18"
|
||
|
|
height="18"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
>
|
||
|
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
|
||
|
|
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
|
||
|
|
</svg>
|
||
|
|
<span class="notification-count">3</span>
|
||
|
|
</div>
|
||
|
|
<button class="btn-new-intent">
|
||
|
|
<svg
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
>
|
||
|
|
<line x1="12" y1="5" x2="12" y2="19" />
|
||
|
|
<line x1="5" y1="12" x2="19" y2="12" />
|
||
|
|
</svg>
|
||
|
|
New Intent
|
||
|
|
</button>
|
||
|
|
<button class="icon-button" title="Settings">
|
||
|
|
<svg
|
||
|
|
width="18"
|
||
|
|
height="18"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
>
|
||
|
|
<circle cx="12" cy="12" r="3" />
|
||
|
|
<path
|
||
|
|
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Status Filters -->
|
||
|
|
<div class="status-filters">
|
||
|
|
<button class="status-filter active">
|
||
|
|
<svg
|
||
|
|
class="icon"
|
||
|
|
width="14"
|
||
|
|
height="14"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
>
|
||
|
|
<polyline points="20 6 9 17 4 12" />
|
||
|
|
</svg>
|
||
|
|
Complete
|
||
|
|
<span class="count">8</span>
|
||
|
|
</button>
|
||
|
|
<button class="status-filter">
|
||
|
|
<svg
|
||
|
|
class="icon"
|
||
|
|
width="14"
|
||
|
|
height="14"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
>
|
||
|
|
<circle cx="12" cy="12" r="10" />
|
||
|
|
<polygon points="10 8 16 12 10 16 10 8" />
|
||
|
|
</svg>
|
||
|
|
Active Intents
|
||
|
|
<span class="count">12</span>
|
||
|
|
</button>
|
||
|
|
<button class="status-filter">
|
||
|
|
<svg
|
||
|
|
class="icon"
|
||
|
|
width="14"
|
||
|
|
height="14"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
>
|
||
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
|
||
|
|
<line x1="9" y1="9" x2="15" y2="15" />
|
||
|
|
<line x1="15" y1="9" x2="9" y2="15" />
|
||
|
|
</svg>
|
||
|
|
Awaiting Decision
|
||
|
|
<span class="count">5</span>
|
||
|
|
</button>
|
||
|
|
<button class="status-filter">
|
||
|
|
<svg
|
||
|
|
class="icon"
|
||
|
|
width="14"
|
||
|
|
height="14"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
>
|
||
|
|
<rect x="6" y="4" width="4" height="16" />
|
||
|
|
<rect x="14" y="4" width="4" height="16" />
|
||
|
|
</svg>
|
||
|
|
Paused
|
||
|
|
<span class="count">2</span>
|
||
|
|
</button>
|
||
|
|
<button class="status-filter">
|
||
|
|
<svg
|
||
|
|
class="icon"
|
||
|
|
width="14"
|
||
|
|
height="14"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
|
||
|
|
/>
|
||
|
|
<line x1="12" y1="9" x2="12" y2="13" />
|
||
|
|
<line x1="12" y1="17" x2="12.01" y2="17" />
|
||
|
|
</svg>
|
||
|
|
Blocked/Issues
|
||
|
|
<span class="count">1</span>
|
||
|
|
</button>
|
||
|
|
<div class="time-saved-indicator">
|
||
|
|
<svg
|
||
|
|
class="icon"
|
||
|
|
width="14"
|
||
|
|
height="14"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
>
|
||
|
|
<circle cx="12" cy="12" r="10" />
|
||
|
|
<polyline points="12 6 12 12 16 14" />
|
||
|
|
</svg>
|
||
|
|
Active Time Saved: 23.5 hrs this week
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Main Content Area -->
|
||
|
|
<div class="dashboard-layout">
|
||
|
|
<!-- Left Column: Intent Cards -->
|
||
|
|
<div class="dashboard-main">
|
||
|
|
<div class="intents-grid">
|
||
|
|
<!-- Intent Card 1: Active -->
|
||
|
|
<article class="intent-card">
|
||
|
|
<div class="intent-card-header">
|
||
|
|
<h3 class="intent-title">
|
||
|
|
Launch Q4 Campaign for Verse
|
||
|
|
</h3>
|
||
|
|
</div>
|
||
|
|
<div class="intent-progress">
|
||
|
|
<div class="progress-bar">
|
||
|
|
<div
|
||
|
|
class="progress-bar-fill"
|
||
|
|
style="width: 75%"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
<span class="progress-text">5/7 Steps</span>
|
||
|
|
<span class="progress-text">75%</span>
|
||
|
|
</div>
|
||
|
|
<div class="intent-status-line">
|
||
|
|
<span class="intent-status-label">STATUS</span>
|
||
|
|
<span class="intent-status-badge active">
|
||
|
|
<svg
|
||
|
|
width="10"
|
||
|
|
height="10"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="currentColor"
|
||
|
|
>
|
||
|
|
<circle cx="12" cy="12" r="6" />
|
||
|
|
</svg>
|
||
|
|
Active
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="intent-description">
|
||
|
|
<strong>Budget Allocation: 50k</strong><br />
|
||
|
|
<span class="pending"
|
||
|
|
>Distributing budget in media channels</span
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
class="intent-meta-tag"
|
||
|
|
style="margin-left: 8px; display: inline-flex"
|
||
|
|
>Est: 15min ⏱</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="intent-status-line" style="margin-top: 16px">
|
||
|
|
<span class="intent-status-label">INTEGRITY</span>
|
||
|
|
</div>
|
||
|
|
<div class="intent-meta">
|
||
|
|
<span class="intent-meta-tag">Started 2h ago</span>
|
||
|
|
<span class="intent-meta-tag">Due Nov 15th</span>
|
||
|
|
<span class="intent-health good"
|
||
|
|
>Intent Health 90%</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<a href="#" class="intent-detailed-link">Detailed View</a>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<!-- Intent Card 2: Awaiting Decision -->
|
||
|
|
<article class="intent-card selected">
|
||
|
|
<div class="intent-card-header">
|
||
|
|
<h3 class="intent-title">
|
||
|
|
Make a financial CRM for Deloitte
|
||
|
|
</h3>
|
||
|
|
</div>
|
||
|
|
<div class="intent-progress">
|
||
|
|
<div class="progress-bar">
|
||
|
|
<div
|
||
|
|
class="progress-bar-fill warning"
|
||
|
|
style="width: 45%"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
<span class="progress-text warning">25/60 Steps</span>
|
||
|
|
<span class="progress-text warning">45%</span>
|
||
|
|
</div>
|
||
|
|
<div class="intent-status-line">
|
||
|
|
<span class="intent-status-label">STATUS</span>
|
||
|
|
<span class="intent-status-badge awaiting">
|
||
|
|
<svg
|
||
|
|
width="10"
|
||
|
|
height="10"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="currentColor"
|
||
|
|
>
|
||
|
|
<rect
|
||
|
|
x="3"
|
||
|
|
y="3"
|
||
|
|
width="18"
|
||
|
|
height="18"
|
||
|
|
rx="2"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
Awaiting Decision
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="intent-description">
|
||
|
|
<strong>Implement User Authentication System</strong
|
||
|
|
><br />
|
||
|
|
<span class="pending"
|
||
|
|
>The authentication system needs to balance
|
||
|
|
security...</span
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
class="intent-meta-tag"
|
||
|
|
style="margin-left: 8px; display: inline-flex"
|
||
|
|
>Pending ⏸</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="intent-status-line" style="margin-top: 16px">
|
||
|
|
<span class="intent-status-label">INTEGRITY</span>
|
||
|
|
</div>
|
||
|
|
<div class="intent-meta">
|
||
|
|
<span class="intent-meta-tag">Started 5d ago</span>
|
||
|
|
<span class="intent-meta-tag">Due Nov 30th</span>
|
||
|
|
<span class="intent-health warning"
|
||
|
|
>Intent Health 85%</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Right Column: Detail Panel -->
|
||
|
|
<div class="dashboard-sidebar">
|
||
|
|
<div class="detail-panel">
|
||
|
|
<!-- Detail Header -->
|
||
|
|
<div class="detail-panel-header">
|
||
|
|
<div class="detail-panel-nav">
|
||
|
|
<button class="nav-btn" title="Previous">
|
||
|
|
<svg
|
||
|
|
width="14"
|
||
|
|
height="14"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
>
|
||
|
|
<polyline points="15 18 9 12 15 6" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<h2>Make a financial CRM for Deloitte</h2>
|
||
|
|
<div class="detail-panel-actions">
|
||
|
|
<span class="intent-status-badge awaiting">
|
||
|
|
<svg
|
||
|
|
width="10"
|
||
|
|
height="10"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="currentColor"
|
||
|
|
>
|
||
|
|
<rect
|
||
|
|
x="3"
|
||
|
|
y="3"
|
||
|
|
width="18"
|
||
|
|
height="18"
|
||
|
|
rx="2"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
Awaiting Decision
|
||
|
|
</span>
|
||
|
|
<button class="action-btn-pause" title="Pause Intent">
|
||
|
|
<svg
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
>
|
||
|
|
<rect x="6" y="4" width="4" height="16" />
|
||
|
|
<rect x="14" y="4" width="4" height="16" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Progress Bar in Header -->
|
||
|
|
<div class="detail-status">
|
||
|
|
<div class="detail-progress-bar" style="flex: 1"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|