all
This commit is contained in:
ghassan committed
1 parent
a43805e30c
commit
b1986e8654
20 files changed
+1925
No files matched your search
@@ -0,0 +1,168 @@
|
||||
<h2>Add Account Modal — Both Type Variants</h2>
|
||||
<p class="subtitle">Left: Microsoft 365 (Azure AD) fields. Right: SMTP fields. The type dropdown switches which fields appear. Account name is a slug used in code.</p>
|
||||
|
||||
<div class="split">
|
||||
|
||||
<!-- Azure variant -->
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">Add Mail Account — Microsoft 365</div>
|
||||
<div class="mockup-body" style="padding:24px;background:#fff;">
|
||||
|
||||
<div style="margin-bottom:16px;">
|
||||
<div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;">Account Name <span style="color:#9ca3af;font-weight:400;">(used in code)</span></div>
|
||||
<div style="height:38px;background:#fff;border:1px solid #d1d5db;border-radius:7px;padding:0 12px;display:flex;align-items:center;">
|
||||
<span style="font-size:13px;color:#374151;">customer-support</span>
|
||||
</div>
|
||||
<div style="font-size:11px;color:#9ca3af;margin-top:3px;">Lowercase, hyphens only. Used as <code style="background:#f3f4f6;padding:1px 5px;border-radius:3px;">Mail::mailer('customer-support')</code></div>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom:16px;">
|
||||
<div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;">Type</div>
|
||||
<div style="height:38px;background:#fff;border:1px solid #2563eb;border-radius:7px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;">
|
||||
<span style="font-size:13px;color:#374151;">✉️ Microsoft 365 (Azure AD)</span>
|
||||
<span style="font-size:11px;color:#9ca3af;">▼</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="border-top:1px solid #f3f4f6;margin:0 0 16px;padding-top:16px;">
|
||||
<div style="font-size:11px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;">Azure AD Credentials</div>
|
||||
|
||||
<div style="margin-bottom:12px;">
|
||||
<div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;">Tenant ID</div>
|
||||
<div style="height:36px;background:#fff;border:1px solid #d1d5db;border-radius:7px;padding:0 12px;display:flex;align-items:center;">
|
||||
<span style="font-size:12px;color:#9ca3af;">xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-bottom:12px;">
|
||||
<div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;">Client ID</div>
|
||||
<div style="height:36px;background:#fff;border:1px solid #d1d5db;border-radius:7px;padding:0 12px;display:flex;align-items:center;">
|
||||
<span style="font-size:12px;color:#9ca3af;">xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-bottom:12px;">
|
||||
<div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;">Client Secret</div>
|
||||
<div style="height:36px;background:#fff;border:1px solid #d1d5db;border-radius:7px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;">
|
||||
<span style="font-size:12px;color:#9ca3af;letter-spacing:2px;">••••••••••••</span>
|
||||
<span style="font-size:11px;color:#6b7280;background:#f9fafb;padding:2px 7px;border-radius:4px;border:1px solid #e5e7eb;">Show</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="border-top:1px solid #f3f4f6;padding-top:16px;margin-bottom:16px;">
|
||||
<div style="font-size:11px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;">Sender</div>
|
||||
<div style="margin-bottom:12px;">
|
||||
<div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;">From Address</div>
|
||||
<div style="height:36px;background:#fff;border:1px solid #d1d5db;border-radius:7px;padding:0 12px;display:flex;align-items:center;">
|
||||
<span style="font-size:12px;color:#9ca3af;">[email protected]</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;">From Name <span style="color:#9ca3af;font-weight:400;">(optional)</span></div>
|
||||
<div style="height:36px;background:#fff;border:1px solid #d1d5db;border-radius:7px;padding:0 12px;display:flex;align-items:center;">
|
||||
<span style="font-size:12px;color:#9ca3af;">SteelERP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f3f4f6;padding-top:16px;">
|
||||
<span style="font-size:13px;color:#2563eb;text-decoration:underline;cursor:pointer;">🔗 Test Connection</span>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<div style="padding:8px 16px;background:#f9fafb;color:#374151;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;">Cancel</div>
|
||||
<div style="padding:8px 20px;background:#111827;color:#fff;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;">Save Account</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SMTP variant -->
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">Add Mail Account — SMTP</div>
|
||||
<div class="mockup-body" style="padding:24px;background:#fff;">
|
||||
|
||||
<div style="margin-bottom:16px;">
|
||||
<div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;">Account Name <span style="color:#9ca3af;font-weight:400;">(used in code)</span></div>
|
||||
<div style="height:38px;background:#fff;border:1px solid #d1d5db;border-radius:7px;padding:0 12px;display:flex;align-items:center;">
|
||||
<span style="font-size:13px;color:#374151;">invoices</span>
|
||||
</div>
|
||||
<div style="font-size:11px;color:#9ca3af;margin-top:3px;">Lowercase, hyphens only. Used as <code style="background:#f3f4f6;padding:1px 5px;border-radius:3px;">Mail::mailer('invoices')</code></div>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom:16px;">
|
||||
<div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;">Type</div>
|
||||
<div style="height:38px;background:#fff;border:1px solid #2563eb;border-radius:7px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;">
|
||||
<span style="font-size:13px;color:#374151;">📧 SMTP</span>
|
||||
<span style="font-size:11px;color:#9ca3af;">▼</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="border-top:1px solid #f3f4f6;margin:0 0 16px;padding-top:16px;">
|
||||
<div style="font-size:11px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;">SMTP Server</div>
|
||||
|
||||
<div style="display:flex;gap:10px;margin-bottom:12px;">
|
||||
<div style="flex:1;">
|
||||
<div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;">Host</div>
|
||||
<div style="height:36px;background:#fff;border:1px solid #d1d5db;border-radius:7px;padding:0 12px;display:flex;align-items:center;">
|
||||
<span style="font-size:12px;color:#9ca3af;">smtp.gmail.com</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:80px;">
|
||||
<div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;">Port</div>
|
||||
<div style="height:36px;background:#fff;border:1px solid #d1d5db;border-radius:7px;padding:0 12px;display:flex;align-items:center;">
|
||||
<span style="font-size:12px;color:#374151;">587</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:90px;">
|
||||
<div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;">Encryption</div>
|
||||
<div style="height:36px;background:#fff;border:1px solid #d1d5db;border-radius:7px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;">
|
||||
<span style="font-size:12px;color:#374151;">TLS</span>
|
||||
<span style="font-size:10px;color:#9ca3af;">▼</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom:12px;">
|
||||
<div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;">Username</div>
|
||||
<div style="height:36px;background:#fff;border:1px solid #d1d5db;border-radius:7px;padding:0 12px;display:flex;align-items:center;">
|
||||
<span style="font-size:12px;color:#9ca3af;">[email protected]</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-bottom:12px;">
|
||||
<div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;">Password</div>
|
||||
<div style="height:36px;background:#fff;border:1px solid #d1d5db;border-radius:7px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;">
|
||||
<span style="font-size:12px;color:#9ca3af;letter-spacing:2px;">••••••••••••</span>
|
||||
<span style="font-size:11px;color:#6b7280;background:#f9fafb;padding:2px 7px;border-radius:4px;border:1px solid #e5e7eb;">Show</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="border-top:1px solid #f3f4f6;padding-top:16px;margin-bottom:16px;">
|
||||
<div style="font-size:11px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;">Sender</div>
|
||||
<div style="margin-bottom:12px;">
|
||||
<div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;">From Address</div>
|
||||
<div style="height:36px;background:#fff;border:1px solid #d1d5db;border-radius:7px;padding:0 12px;display:flex;align-items:center;">
|
||||
<span style="font-size:12px;color:#9ca3af;">[email protected]</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;">From Name <span style="color:#9ca3af;font-weight:400;">(optional)</span></div>
|
||||
<div style="height:36px;background:#fff;border:1px solid #d1d5db;border-radius:7px;padding:0 12px;display:flex;align-items:center;">
|
||||
<span style="font-size:12px;color:#9ca3af;">SteelERP Invoices</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f3f4f6;padding-top:16px;">
|
||||
<span style="font-size:13px;color:#2563eb;text-decoration:underline;cursor:pointer;">🔗 Test Connection</span>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<div style="padding:8px 16px;background:#f9fafb;color:#374151;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;">Cancel</div>
|
||||
<div style="padding:8px 20px;background:#111827;color:#fff;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;">Save Account</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p class="subtitle" style="margin-top:16px;">Both variants use the same modal shell — only the credential section changes based on the Type dropdown. Does this look right? Let me know in the terminal.</p>
|
||||
@@ -0,0 +1,133 @@
|
||||
<h2>Email Tab — Full Design</h2>
|
||||
<p class="subtitle">Here's what the Email (Microsoft 365) tab looks like with all its fields. Does this match what you had in mind?</p>
|
||||
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">Settings — Integrations (Email tab active)</div>
|
||||
<div class="mockup-body" style="background:#f9fafb;padding:24px;">
|
||||
<div style="max-width:680px;margin:0 auto;">
|
||||
|
||||
<!-- Page heading -->
|
||||
<div style="margin-bottom:20px;">
|
||||
<div style="font-size:20px;font-weight:700;color:#111827;margin-bottom:4px;">Settings — Integrations</div>
|
||||
<div style="font-size:13px;color:#6b7280;">Configure third-party service integrations.</div>
|
||||
</div>
|
||||
|
||||
<!-- Pill tabs -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:20px;">
|
||||
<div style="padding:7px 18px;background:#fff;color:#374151;border:1px solid #d1d5db;border-radius:999px;font-size:13px;font-weight:500;cursor:pointer;">
|
||||
💬 WhatsApp
|
||||
</div>
|
||||
<div style="padding:7px 18px;background:#111827;color:#fff;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;">
|
||||
✉️ Email
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email card -->
|
||||
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;">
|
||||
|
||||
<!-- Card header -->
|
||||
<div style="padding:16px 24px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:12px;">
|
||||
<div style="width:32px;height:32px;background:#eff6ff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;">✉️</div>
|
||||
<div>
|
||||
<div style="font-size:14px;font-weight:600;color:#111827;">Microsoft 365 (Azure Mail)</div>
|
||||
<div style="font-size:12px;color:#6b7280;">Send emails via Microsoft Graph API using Azure AD</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form body -->
|
||||
<div style="padding:24px;">
|
||||
|
||||
<!-- Enable toggle -->
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;">
|
||||
<div>
|
||||
<div style="font-size:14px;font-weight:500;color:#374151;margin-bottom:2px;">Enable Email Notifications</div>
|
||||
<div style="font-size:12px;color:#6b7280;">When disabled, no emails will be sent.</div>
|
||||
</div>
|
||||
<div style="width:44px;height:24px;border-radius:12px;background:#d1d5db;position:relative;">
|
||||
<div style="position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="border-top:1px solid #e5e7eb;margin-bottom:20px;"></div>
|
||||
|
||||
<!-- Tenant ID -->
|
||||
<div style="margin-bottom:16px;">
|
||||
<div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;">Tenant ID</div>
|
||||
<div style="height:38px;background:#fff;border:1px solid #d1d5db;border-radius:7px;padding:0 12px;display:flex;align-items:center;">
|
||||
<span style="font-size:13px;color:#9ca3af;">xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Client ID -->
|
||||
<div style="margin-bottom:16px;">
|
||||
<div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;">Client ID</div>
|
||||
<div style="height:38px;background:#fff;border:1px solid #d1d5db;border-radius:7px;padding:0 12px;display:flex;align-items:center;">
|
||||
<span style="font-size:13px;color:#9ca3af;">xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Client Secret -->
|
||||
<div style="margin-bottom:16px;">
|
||||
<div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;">Client Secret</div>
|
||||
<div style="height:38px;background:#fff;border:1px solid #d1d5db;border-radius:7px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;">
|
||||
<span style="font-size:13px;color:#9ca3af;letter-spacing:2px;">••••••••••••••••</span>
|
||||
<span style="font-size:11px;color:#6b7280;background:#f9fafb;padding:2px 8px;border-radius:4px;border:1px solid #e5e7eb;cursor:pointer;">Show</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- From Address -->
|
||||
<div style="margin-bottom:24px;">
|
||||
<div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;">From Address</div>
|
||||
<div style="height:38px;background:#fff;border:1px solid #d1d5db;border-radius:7px;padding:0 12px;display:flex;align-items:center;">
|
||||
<span style="font-size:13px;color:#9ca3af;">[email protected]</span>
|
||||
</div>
|
||||
<div style="font-size:11px;color:#6b7280;margin-top:4px;">Must be a mailbox in your Microsoft 365 tenant.</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid #f3f4f6;">
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<span style="font-size:13px;color:#2563eb;text-decoration:underline;cursor:pointer;">🔗 Test Connection</span>
|
||||
</div>
|
||||
<div style="padding:8px 20px;background:#111827;color:#fff;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;">Save Settings</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Send Test Email accordion -->
|
||||
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;margin-top:14px;overflow:hidden;">
|
||||
<div style="padding:14px 24px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;">
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
<span style="font-size:16px;">📧</span>
|
||||
<span style="font-size:14px;font-weight:600;color:#111827;">Send Test Email</span>
|
||||
<span style="font-size:12px;color:#6b7280;">— verify the connection works end-to-end</span>
|
||||
</div>
|
||||
<span style="font-size:12px;color:#9ca3af;">▼</span>
|
||||
</div>
|
||||
<!-- Expanded state shown -->
|
||||
<div style="padding:0 24px 20px;border-top:1px solid #e5e7eb;">
|
||||
<div style="height:12px;"></div>
|
||||
<div style="margin-bottom:12px;">
|
||||
<div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;">To</div>
|
||||
<div style="height:38px;background:#fff;border:1px solid #d1d5db;border-radius:7px;padding:0 12px;display:flex;align-items:center;">
|
||||
<span style="font-size:13px;color:#9ca3af;">[email protected]</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-bottom:12px;">
|
||||
<div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;">Subject</div>
|
||||
<div style="height:38px;background:#fff;border:1px solid #d1d5db;border-radius:7px;padding:0 12px;display:flex;align-items:center;">
|
||||
<span style="font-size:13px;color:#6b7280;">Test Email from SteelERP</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:9px 18px;background:#2563eb;color:#fff;border-radius:8px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:7px;cursor:pointer;">
|
||||
✉️ Send Email
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="subtitle" style="margin-top:16px;">Does this look right? Let me know in the terminal if you'd like any changes — different fields, different layout, etc.</p>
|
||||
@@ -0,0 +1,117 @@
|
||||
<h2>Integrations Page — Tab Layout</h2>
|
||||
<p class="subtitle">Here's how the integrations page would look with WhatsApp and Email tabs. Which tab style feels right?</p>
|
||||
|
||||
<div class="cards">
|
||||
|
||||
<!-- Option A: Pill tabs -->
|
||||
<div class="card" data-choice="a" onclick="toggleSelect(this)">
|
||||
<div class="card-image" style="background:#f9fafb;padding:20px;">
|
||||
<div style="max-width:560px;margin:0 auto;">
|
||||
<div style="margin-bottom:16px;">
|
||||
<div style="font-size:18px;font-weight:700;color:#111827;margin-bottom:4px;">Settings — Integrations</div>
|
||||
<div style="font-size:13px;color:#6b7280;">Configure third-party service integrations.</div>
|
||||
</div>
|
||||
<!-- Pill tabs -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:20px;">
|
||||
<div style="padding:7px 18px;background:#111827;color:#fff;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;">
|
||||
<span style="margin-right:6px;">💬</span>WhatsApp
|
||||
</div>
|
||||
<div style="padding:7px 18px;background:#fff;color:#374151;border:1px solid #d1d5db;border-radius:999px;font-size:13px;font-weight:500;cursor:pointer;">
|
||||
<span style="margin-right:6px;">✉️</span>Email
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card -->
|
||||
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:10px;">
|
||||
<div style="padding:16px 20px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:10px;">
|
||||
<div style="width:10px;height:10px;border-radius:50%;background:#22c55e;"></div>
|
||||
<span style="font-size:14px;font-weight:600;color:#111827;">WhatsApp (UltraMSG)</span>
|
||||
<span style="margin-left:auto;font-size:11px;color:#6b7280;background:#f3f4f6;padding:2px 8px;border-radius:999px;">Active</span>
|
||||
</div>
|
||||
<div style="padding:16px 20px;">
|
||||
<div style="height:10px;background:#f3f4f6;border-radius:4px;width:60%;margin-bottom:8px;"></div>
|
||||
<div style="height:10px;background:#f3f4f6;border-radius:4px;width:40%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>A — Pill Tabs</h3>
|
||||
<p>Rounded pill-style tabs. Modern, clean. Active tab is filled dark.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Option B: Underline tabs -->
|
||||
<div class="card" data-choice="b" onclick="toggleSelect(this)">
|
||||
<div class="card-image" style="background:#f9fafb;padding:20px;">
|
||||
<div style="max-width:560px;margin:0 auto;">
|
||||
<div style="margin-bottom:16px;">
|
||||
<div style="font-size:18px;font-weight:700;color:#111827;margin-bottom:4px;">Settings — Integrations</div>
|
||||
<div style="font-size:13px;color:#6b7280;">Configure third-party service integrations.</div>
|
||||
</div>
|
||||
<!-- Underline tabs -->
|
||||
<div style="display:flex;gap:0;border-bottom:2px solid #e5e7eb;margin-bottom:20px;">
|
||||
<div style="padding:8px 20px;font-size:13px;font-weight:600;color:#111827;border-bottom:2px solid #111827;margin-bottom:-2px;cursor:pointer;">
|
||||
<span style="margin-right:6px;">💬</span>WhatsApp
|
||||
</div>
|
||||
<div style="padding:8px 20px;font-size:13px;font-weight:500;color:#6b7280;cursor:pointer;">
|
||||
<span style="margin-right:6px;">✉️</span>Email
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card -->
|
||||
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:10px;">
|
||||
<div style="padding:16px 20px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:10px;">
|
||||
<div style="width:10px;height:10px;border-radius:50%;background:#22c55e;"></div>
|
||||
<span style="font-size:14px;font-weight:600;color:#111827;">WhatsApp (UltraMSG)</span>
|
||||
<span style="margin-left:auto;font-size:11px;color:#6b7280;background:#f3f4f6;padding:2px 8px;border-radius:999px;">Active</span>
|
||||
</div>
|
||||
<div style="padding:16px 20px;">
|
||||
<div style="height:10px;background:#f3f4f6;border-radius:4px;width:60%;margin-bottom:8px;"></div>
|
||||
<div style="height:10px;background:#f3f4f6;border-radius:4px;width:40%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>B — Underline Tabs</h3>
|
||||
<p>Classic tab style with bottom border indicator. Matches settings pages in most ERP systems.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Option C: Side nav -->
|
||||
<div class="card" data-choice="c" onclick="toggleSelect(this)">
|
||||
<div class="card-image" style="background:#f9fafb;padding:20px;">
|
||||
<div style="max-width:560px;margin:0 auto;">
|
||||
<div style="margin-bottom:16px;">
|
||||
<div style="font-size:18px;font-weight:700;color:#111827;margin-bottom:4px;">Settings — Integrations</div>
|
||||
<div style="font-size:13px;color:#6b7280;">Configure third-party service integrations.</div>
|
||||
</div>
|
||||
<!-- Side nav + content -->
|
||||
<div style="display:flex;gap:16px;">
|
||||
<div style="width:140px;flex-shrink:0;display:flex;flex-direction:column;gap:4px;">
|
||||
<div style="padding:9px 14px;background:#111827;color:#fff;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;">
|
||||
<span>💬</span>WhatsApp
|
||||
</div>
|
||||
<div style="padding:9px 14px;color:#374151;border-radius:7px;font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;">
|
||||
<span>✉️</span>Email
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;background:#fff;border:1px solid #e5e7eb;border-radius:10px;">
|
||||
<div style="padding:12px 16px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:8px;height:8px;border-radius:50%;background:#22c55e;"></div>
|
||||
<span style="font-size:13px;font-weight:600;color:#111827;">WhatsApp (UltraMSG)</span>
|
||||
</div>
|
||||
<div style="padding:12px 16px;">
|
||||
<div style="height:8px;background:#f3f4f6;border-radius:4px;width:60%;margin-bottom:8px;"></div>
|
||||
<div style="height:8px;background:#f3f4f6;border-radius:4px;width:40%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>C — Sidebar Nav</h3>
|
||||
<p>Left sidebar with integration list. Scales well if more integrations are added later.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,106 @@
|
||||
<h2>Email Tab — Multi-Account Design</h2>
|
||||
<p class="subtitle">The Email tab becomes a list of named accounts. Each account has a type badge, from address, and actions. Here's how it looks with a few accounts configured.</p>
|
||||
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">Settings — Integrations (Email tab active)</div>
|
||||
<div class="mockup-body" style="background:#f9fafb;padding:24px;">
|
||||
<div style="max-width:680px;margin:0 auto;">
|
||||
|
||||
<!-- Page heading -->
|
||||
<div style="margin-bottom:20px;">
|
||||
<div style="font-size:20px;font-weight:700;color:#111827;margin-bottom:4px;">Settings — Integrations</div>
|
||||
<div style="font-size:13px;color:#6b7280;">Configure third-party service integrations.</div>
|
||||
</div>
|
||||
|
||||
<!-- Pill tabs -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:20px;">
|
||||
<div style="padding:7px 18px;background:#fff;color:#374151;border:1px solid #d1d5db;border-radius:999px;font-size:13px;font-weight:500;">💬 WhatsApp</div>
|
||||
<div style="padding:7px 18px;background:#111827;color:#fff;border-radius:999px;font-size:13px;font-weight:600;">✉️ Email</div>
|
||||
</div>
|
||||
|
||||
<!-- Header row: title + Add button -->
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;">
|
||||
<div>
|
||||
<div style="font-size:15px;font-weight:600;color:#111827;">Mail Accounts</div>
|
||||
<div style="font-size:12px;color:#6b7280;">3 accounts configured</div>
|
||||
</div>
|
||||
<div style="padding:8px 16px;background:#111827;color:#fff;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:7px;">
|
||||
<span style="font-size:16px;line-height:1;">+</span> Add Account
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Account list -->
|
||||
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;">
|
||||
|
||||
<!-- Account 1: Azure -->
|
||||
<div style="padding:16px 20px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #f3f4f6;">
|
||||
<div style="width:36px;height:36px;background:#eff6ff;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:17px;">✉️</div>
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:2px;">
|
||||
<span style="font-size:14px;font-weight:600;color:#111827;">customer-support</span>
|
||||
<span style="font-size:11px;font-weight:600;color:#2563eb;background:#eff6ff;padding:2px 8px;border-radius:999px;">Microsoft 365</span>
|
||||
</div>
|
||||
<div style="font-size:12px;color:#6b7280;">[email protected]</div>
|
||||
</div>
|
||||
<!-- Toggle: ON -->
|
||||
<div style="width:44px;height:24px;border-radius:12px;background:#22c55e;position:relative;cursor:pointer;flex-shrink:0;">
|
||||
<div style="position:absolute;top:2px;left:22px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);"></div>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;flex-shrink:0;">
|
||||
<button style="font-size:12px;color:#6b7280;background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;padding:5px 10px;cursor:pointer;">Edit</button>
|
||||
<button style="font-size:12px;color:#dc2626;background:#fff5f5;border:1px solid #fecaca;border-radius:6px;padding:5px 10px;cursor:pointer;">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Account 2: SMTP -->
|
||||
<div style="padding:16px 20px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #f3f4f6;">
|
||||
<div style="width:36px;height:36px;background:#f0fdf4;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:17px;">📧</div>
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:2px;">
|
||||
<span style="font-size:14px;font-weight:600;color:#111827;">invoices</span>
|
||||
<span style="font-size:11px;font-weight:600;color:#16a34a;background:#f0fdf4;padding:2px 8px;border-radius:999px;">SMTP</span>
|
||||
</div>
|
||||
<div style="font-size:12px;color:#6b7280;">[email protected] · smtp.gmail.com:587</div>
|
||||
</div>
|
||||
<!-- Toggle: ON -->
|
||||
<div style="width:44px;height:24px;border-radius:12px;background:#22c55e;position:relative;cursor:pointer;flex-shrink:0;">
|
||||
<div style="position:absolute;top:2px;left:22px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);"></div>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;flex-shrink:0;">
|
||||
<button style="font-size:12px;color:#6b7280;background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;padding:5px 10px;cursor:pointer;">Edit</button>
|
||||
<button style="font-size:12px;color:#dc2626;background:#fff5f5;border:1px solid #fecaca;border-radius:6px;padding:5px 10px;cursor:pointer;">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Account 3: SMTP disabled -->
|
||||
<div style="padding:16px 20px;display:flex;align-items:center;gap:14px;opacity:.6;">
|
||||
<div style="width:36px;height:36px;background:#f3f4f6;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:17px;">📧</div>
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:2px;">
|
||||
<span style="font-size:14px;font-weight:600;color:#111827;">notifications</span>
|
||||
<span style="font-size:11px;font-weight:600;color:#16a34a;background:#f0fdf4;padding:2px 8px;border-radius:999px;">SMTP</span>
|
||||
</div>
|
||||
<div style="font-size:12px;color:#6b7280;">[email protected] · mail.steelco.com:465</div>
|
||||
</div>
|
||||
<!-- Toggle: OFF -->
|
||||
<div style="width:44px;height:24px;border-radius:12px;background:#d1d5db;position:relative;cursor:pointer;flex-shrink:0;">
|
||||
<div style="position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);"></div>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;flex-shrink:0;">
|
||||
<button style="font-size:12px;color:#6b7280;background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;padding:5px 10px;cursor:pointer;">Edit</button>
|
||||
<button style="font-size:12px;color:#dc2626;background:#fff5f5;border:1px solid #fecaca;border-radius:6px;padding:5px 10px;cursor:pointer;">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Empty state hint -->
|
||||
<div style="margin-top:10px;font-size:12px;color:#9ca3af;text-align:center;">
|
||||
Use account names in code: <code style="background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:11px;">Mail::mailer('customer-support')</code>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="subtitle" style="margin-top:16px;">This is the Email tab redesigned as a list. Click "Add Account" opens a modal (next screen). Does this list layout look right? Let me know in the terminal.</p>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Continuing in terminal...</p>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Design approved — writing the implementation plan in terminal...</p>
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
{"reason":"idle timeout","timestamp":1779788510216}
|
||||
@@ -0,0 +1 @@
|
||||
2033
|
||||
Reference in new issue
Block a user