@extends('layouts.portal.app')

@section('title', "Dashboard InsightsReady")

@push('styles')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset("portal-assets/portal.css") }}"/>
@endpush

@section('content')
    <style>
        .integration-flow-diagram{display:flex;flex-direction:row;justify-content:space-between;gap:5px;margin-top:20px;padding:10px 0}
        .integration-column{flex:1;background:white;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.08);padding:20px;display:flex;flex-direction:column;max-width:32%}
        .sources-column .source-list{flex:1}
        .sources-column{background-color:#f9f9ff;border-left:5px solid #4361ee;display:flex;flex-direction:column}
        .processing-column{background-color:#f6fff9;border-left:5px solid #2dc653;display:flex;flex-direction:column;justify-content:space-between}
        .applications-column{background-color:#fff9f6;border-left:5px solid #e85d04;display:flex;flex-direction:column}
        .column-header{display:flex;align-items:center;margin-bottom:25px}
        .column-header i{font-size:22px;margin-right:10px;color:var(--primary-color)}
        .column-header h3{margin:0;font-size:18px;font-weight:600}
        .arrows-column{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 5px}
        .process-arrow{position:relative;width:30px;height:40px;display:flex;align-items:center;justify-content:center}
        .arrow-line{position:absolute;height:3px;width:100%;background-color:#ddd}
        .process-arrow i{font-size:16px;color:#888;position:absolute;z-index:2;background:white;border-radius:50%;padding:3px}
        @media (max-width:1024px){
            .integration-flow-diagram{flex-direction:column;gap:20px}
            .integration-column{max-width:100%}
            .arrows-column{transform:rotate(90deg);height:30px;margin:10px 0}
        }
        .header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
        .run-status{margin-top:10px;border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:#fff}
        .run-status__top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
        .run-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;font-weight:700;font-size:12px;border:1px solid var(--border);background:#f6f7fb;color:#4b5563}
        .run-badge--running{background:#fff8da;color:#7a5f00}
        .run-badge--queued{background:#f3f6fb;color:#334155}
        .run-badge--ok{background:#eef7f6;color:#0f7b6c}
        .run-badge--err{background:#fff2f2;color:#941b1b}
        .progress{height:10px;border-radius:999px;background:#f0f2f6;overflow:hidden;position:relative;border:1px solid var(--border)}
        .progress__bar{height:100%;width:0%;background:linear-gradient(90deg,rgba(78,163,161,.18) 0%,rgba(78,163,161,.45) 100%);position:relative;transition:width .4s ease}
        .progress--running .progress__bar{background:repeating-linear-gradient(45deg,rgba(78,163,161,.35) 0 10px,rgba(78,163,161,.55) 10px 20px),linear-gradient(90deg,rgba(78,163,161,.2),rgba(78,163,161,.5));animation:progress-stripes 1.2s linear infinite}
        @keyframes progress-stripes{from{background-position:0 0,0 0}to{background-position:40px 0,0 0}}
        .progress--ok .progress__bar{background:linear-gradient(90deg,#bfe7e1,#4ea3a1)}
        .progress--err .progress__bar{background:linear-gradient(90deg,#f8b4b4,#d64545)}
        .progress--queued .progress__bar{background:linear-gradient(90deg,#dbe4ee,#9fb3c8)}
        .run-kv{display:flex;gap:14px;color:var(--ink-700);font-size:12px}
        .dataset-list,.list{list-style:none;margin:0;padding:0}
        .list > li{list-style:none}
        .dataset-item{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin:10px}
        .dataset-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
        .dataset-title{font-weight:800;font-size:16px;line-height:1.1}
        .dataset-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
        .pill-compact{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--border);border-radius:999px;font:700 12px/1 Inter;background:#eef7f6;color:#0f7b6c}
        .btn-compact{appearance:none;border:1px solid var(--border);background:#fff;padding:8px 10px;border-radius:10px;font-weight:700;cursor:pointer;text-decoration:none;color:inherit}
        .btn-compact:hover{box-shadow:var(--shadow)}
        .btn-compact.is-disabled{opacity:.6;pointer-events:none}
        .run-status{margin-top:8px;border:1px solid var(--border);border-radius:10px;padding:8px 10px;background:#fff}
        .run-status__top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
        .run-badge{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;font:700 11px/1 Inter;border:1px solid var(--border)}
        .run-badge--running{background:#fff8da;color:#7a5f00}
        .run-badge--queued{background:#f3f6fb;color:#334155}
        .run-badge--ok{background:#eef7f6;color:#0f7b6c}
        .run-badge--err{background:#fff2f2;color:#941b1b}
        .run-kv{display:flex;gap:12px;color:var(--ink-700);font-size:11px}
        .progress{height:8px;border-radius:999px;background:#f0f2f6;overflow:hidden;border:1px solid var(--border)}
        .progress__bar{height:100%;width:0%;transition:width .4s ease}
        .progress--running .progress__bar{background:repeating-linear-gradient(45deg,rgba(78,163,161,.35) 0 10px,rgba(78,163,161,.55) 10px 20px),linear-gradient(90deg,rgba(78,163,161,.2),rgba(78,163,161,.5));animation:progress-stripes 1.2s linear infinite}
        @keyframes progress-stripes{from{background-position:0 0,0 0}to{background-position:40px 0,0 0}}
        .progress--ok .progress__bar{background:linear-gradient(90deg,#bfe7e1,#4ea3a1)}
        .progress--err .progress__bar{background:linear-gradient(90deg,#f8b4b4,#d64545)}
        .progress--queued .progress__bar{background:linear-gradient(90deg,#dbe4ee,#9fb3c8)}
        @media (max-width:720px){
            .dataset-head{flex-wrap:wrap}
            .dataset-actions{width:100%;margin-left:0;justify-content:flex-start}
        }
        .etlmon__head{display:flex;align-items:flex-end;gap:12px;justify-content:space-between}
        .etlmon__title{margin:0}
        .etlmon__sub{margin:2px 0 0;color:var(--ink-700);font-size:13px}
        .etlmon__filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
        .etlmon__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0 6px}
        @media (max-width:820px){.etlmon__kpis{grid-template-columns:1fr}}
        .kpi{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px}
        .kpi__label{font-size:12px;color:var(--ink-700);font-weight:700;margin-bottom:4px}
        .kpi__val{font:800 22px/1.1 Inter,system-ui}
        .kpi__hint{font-size:12px;color:var(--ink-700)}
        .etlmon__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:10px}
        @media (max-width:980px){.etlmon__grid{grid-template-columns:1fr}}
        .job{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px}
        .job__row{display:flex;align-items:center;gap:10px}
        .job__title{font-weight:800}
        .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--border);font-weight:800;font-size:12px}
        .chip--ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
        .chip--run{background:#fffbeb;border-color:#fde68a;color:#92400e}
        .chip--err{background:#fff2f2;border-color:#fecaca;color:#991b1b}
        .chip--queue{background:#f3f6fb;border-color:#d7dee9;color:#334155}
        .job__meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--ink-700);font-size:12px}
        .job__progress{height:10px;border-radius:999px;background:#f0f2f6;overflow:hidden;border:1px solid var(--border)}
        .job__bar{height:100%;width:0;transition:width .4s ease}
        .job__progress.is-running .job__bar{background:repeating-linear-gradient(45deg,rgba(78,163,161,.35) 0 10px,rgba(78,163,161,.55) 10px 20px),linear-gradient(90deg,rgba(78,163,161,.2),rgba(78,163,161,.5));animation:stripes 1.1s linear infinite}
        .job__progress.is-ok .job__bar{background:linear-gradient(90deg,#bfe7e1,#4ea3a1)}
        .job__progress.is-err .job__bar{background:linear-gradient(90deg,#f8b4b4,#d64545)}
        .job__progress.is-queued .job__bar{background:linear-gradient(90deg,#dbe4ee,#9fb3c8)}
        @keyframes stripes{from{background-position:0 0,0 0}to{background-position:40px 0,0 0}}
        .job__tail{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
        .kv{font-size:12px;color:var(--ink-700)}
        .kv strong{color:var(--ink-800);margin-right:4px}
        .spacer{flex:1}
        .welcome-hero{text-align:center;margin:10px 0 16px}
        .welcome-title{margin:0;font-weight:800;color:#111827;font-size:34px}
        .welcome-sub{margin:10px auto 14px;color:#6b7280;max-width:780px}
        .expand-insights-container{display:flex;justify-content:center;margin:12px 0 6px}
        .expand-insights-btn{background-color:#4ea3a1;color:#fff;border:none;border-radius:12px;padding:18px 48px;font-size:18px;font-weight:700;cursor:pointer;box-shadow:0 6px 14px rgba(78,163,161,.25);transition:all .25s ease-in-out;display:inline-flex;align-items:center;justify-content:center}
        .expand-insights-btn:hover{background-color:#3a8a88;transform:translateY(-2px) scale(1.03);box-shadow:0 10px 20px rgba(58,138,136,.35)}
        .expand-insights-btn:active{transform:scale(.98);box-shadow:0 4px 8px rgba(78,163,161,.25)}
        .expand-insights-btn:focus{outline:none;box-shadow:0 0 0 4px rgba(78,163,161,.25)}
        .source-list{display:flex;flex-direction:column;gap:16px;margin-top:8px;padding-top:12px;border-top:1px solid #eceff5}
        .source-item{display:flex;align-items:center;gap:12px}
        .logo-badge{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font:800 14px/1 Inter,system-ui;background:var(--bg,#f3f4f6);color:var(--fg,#374151);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
        .source-meta{display:flex;flex-direction:column}
        .source-title{font-weight:700}
        .source-status{display:flex;align-items:center;gap:6px;font-weight:600;font-size:13px}
        .source-status .dot{width:8px;height:8px;border-radius:999px;display:inline-block}
        .status--ok{color:#0f8a5b}
        .status--ok .dot{background:#16a34a}
        .status--err{color:#c21f1f}
        .status--err .dot{background:#ef4444}
        .manage-sources-link{display:block;margin-top:16px;text-align:center;font-weight:700;font-size:14px;color:#4f46e5;text-decoration:none}
        .manage-sources-link:hover{color:#4338ca;text-decoration:underline}
        .hub-content{flex:1;text-align:center;padding:10px 0 0}
        .hub-icon{width:96px;height:96px;background:linear-gradient(135deg,#4ea3a1 0%,#357876 100%);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:40px;box-shadow:0 6px 14px rgba(78,163,161,.3)}
        .hub-info .hub-title{font-weight:800;font-size:1.25rem;margin-bottom:4px;color:#111827}
        .hub-status{font-weight:600;font-size:.9rem;color:#16a34a;margin:2px 0}
        .hub-sync-time{color:#6b7280;font-size:.8rem}
        .hub-metrics{background:#f9fafb;border-radius:10px;padding:14px 16px;margin-top:20px;font-size:.9rem;text-align:left;display:inline-block;width:100%;box-sizing:border-box}
        .hub-metrics p{display:flex;justify-content:space-between;margin:6px 0}
        .manage-hub-link{margin-top:auto;padding-top:14px;text-align:center;display:block;font-weight:700;font-size:14px;color:#4f46e5;text-decoration:none;transition:all .25s ease}
        .manage-hub-link:hover{color:#4338ca;text-decoration:underline}
        .apps-list{display:flex;flex-direction:column;gap:12px;flex:1;margin-top:12px}
        .app-item{display:flex;align-items:center;background:#f9fafb;border-radius:10px;padding:10px 12px;transition:background .2s ease}
        .app-item:hover{background:#f3f4f6}
        .app-badge{width:36px;height:36px;border-radius:8px;background:var(--bg);color:var(--fg);font-weight:800;display:flex;align-items:center;justify-content:center;margin-right:14px;font-size:13px}
        .app-name{font-weight:700;flex:1;color:#111827}
        .app-action{font-weight:600;font-size:14px;color:#4f46e5;text-decoration:none;transition:all .25s ease}
        .app-action:hover{color:#4338ca;text-decoration:underline}
        .discover-link{margin-top:auto;padding-top:14px;text-align:center;font-weight:700;font-size:14px;color:#4f46e5;text-decoration:none;transition:all .25s ease}
        .discover-link:hover{color:#4338ca;text-decoration:underline}
    </style>

    <main class="container page">
        <!-- Data Integration Opportunities Section -->
        <section class="panel" style="margin-bottom:20px">
            <div class="welcome-hero">
                <h1 class="welcome-title">Welcome to Insights Portal</h1>
                <p class="welcome-sub">
                    Let's get started by connecting your data. Once connected, this dashboard will show the
                    real-time status of your data sources, hub, and insight apps.
                </p>

                <div class="expand-insights-container">
                    <a href="{{ route('portal.plan') }}" class="expand-insights-btn">
                        <i class="fas fa-plus" style="margin-right:10px"></i>
                        Expand Your Insights
                    </a>
                </div>
            </div>

            <div class="integration-flow-diagram">
                <!-- Data Sources Column -->
                <div class="integration-column sources-column">
                    <div class="column-header">
                        <i class="fas fa-database"></i>
                        <h3>Insight Sources</h3>
                    </div>

                    <div class="source-list">
                        <div class="source-item">
                            <div class="logo-badge" style="--bg:#FDF4F4; --fg:#C42525;">M</div>
                            <div class="source-meta">
                                <div class="source-title">Magento Store</div>
                                <div class="source-status status--ok">
                                    <span class="dot"></span> Connected
                                </div>
                            </div>
                        </div>

                        <div class="source-item">
                            <div class="logo-badge" style="--bg:#FEFBEB; --fg:#F59E0B;">G</div>
                            <div class="source-meta">
                                <div class="source-title">Google Ads</div>
                                <div class="source-status status--ok">
                                    <span class="dot"></span> Connected
                                </div>
                            </div>
                        </div>

                        <div class="source-item">
                            <div class="logo-badge" style="--bg:#F0FFF4; --fg:#2F855A;">A</div>
                            <div class="source-meta">
                                <div class="source-title">AttributionHero</div>
                                <div class="source-status status--err">
                                    <span class="dot"></span> Error: Re-authenticate
                                </div>
                            </div>
                        </div>
                    </div>

                    <a href="{{ route('datasources.index') }}" class="manage-sources-link">
                        + Add or Manage Sources
                    </a>
                </div>

                <!-- Arrows -->
                <div class="arrows-column">
                    <div class="process-arrow">
                        <div class="arrow-line"></div>
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>

                <!-- Processing Column -->
                <div class="integration-column processing-column">
                    <div class="column-header">
                        <i class="fas fa-cogs"></i>
                        <h3>Insights Hub</h3>
                    </div>

                    <div class="hub-content">
                        <div class="hub-icon">
                            <i class="fas fa-fire"></i>
                        </div>

                        <div class="hub-info">
                            <h5 class="hub-title">My E-Commerce Hub</h5>
                            <p class="hub-status">
                                ✅ <span class="text-green">Up to date</span>
                            </p>
                            <p class="hub-sync-time">Last sync: 2 minutes ago</p>
                        </div>

                        <div class="hub-metrics">
                            <p><span>Orders Tracked:</span> <strong>1.2M</strong></p>
                            <p><span>Customers Analyzed:</span> <strong>250k</strong></p>
                            <p><span>Ad Spend Monitored:</span> <strong>$15,480</strong></p>
                        </div>
                    </div>

                    <a href="{{ route('portal.hub') }}" class="manage-hub-link">Manage Hub</a>
                </div>

                <!-- Arrows -->
                <div class="arrows-column">
                    <div class="process-arrow">
                        <div class="arrow-line"></div>
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>

                <!-- Applications Column -->
                <div class="integration-column applications-column">
                    <div class="column-header">
                        <i class="fas fa-laptop-code"></i>
                        <h3>My Insight Apps</h3>
                    </div>

                    <div class="apps-list">
                        <div class="app-item">
                            <div class="app-badge" style="--bg:#EBF5FF; --fg:#3182CE;">R</div>
                            <span class="app-name">Revenue Summary</span>
                            <a href="#" class="app-action">View Report</a>
                        </div>

                        <div class="app-item">
                            <div class="app-badge" style="--bg:#F0FFF4; --fg:#38A169;">ROI</div>
                            <span class="app-name">Marketing ROI Analysis</span>
                            <a href="#" class="app-action">View Dashboard</a>
                        </div>

                        <div class="app-item">
                            <div class="app-badge" style="--bg:#FEFCBF; --fg:#D69E2E;">AI</div>
                            <span class="app-name">Insights AI Assistant</span>
                            <a href="#" class="app-action">Ask the AI</a>
                        </div>
                    </div>

                    <a href="{{ route('marketplace.index') }}" class="discover-link">
                        Discover More in the Marketplace
                    </a>
                </div>
            </div>
        </section>

        <!-- Datasets & ETL (two-up) -->
        <section class="panel" style="margin-bottom:20px">
            <div style="display:flex;align-items:center;gap:10px">
                <strong>Datasets</strong>
                <div class="header-actions">
                    <a class="btn" href="{{ route('portal.datasets') }}">View all</a>
                </div>
            </div>

            <ul class="dataset-list">
                <!-- RUNNING example -->
                <li class="dataset-item">
                    <div class="dataset-head">
                        <div class="dataset-title">Ecommerce Orders</div>
                        <div class="dataset-actions">
                            <span class="pill-compact"><i class="fa-solid fa-circle-check"></i> Published</span>
                            <button class="btn-compact is-disabled"><i class="fa-solid fa-cloud-arrow-down"></i> Start Data Loading</button>
                        </div>
                    </div>
                    <div class="run-status">
                        <div class="run-status__top">
                            <span class="run-badge run-badge--running"><i class="fa-solid fa-rotate"></i> Running</span>
                            <div class="run-kv">
                                <span>Loading: 65%</span>
                            </div>
                        </div>
                        <div class="progress progress--running">
                            <div class="progress__bar" style="width:55%"></div>
                        </div>
                    </div>
                </li>

                <!-- QUEUED example -->
                <li class="dataset-item">
                    <div class="dataset-head">
                        <div class="dataset-title">Ads Spend Daily</div>
                        <div class="dataset-actions">
                            <span class="pill-compact"><i class="fa-solid fa-circle-check"></i> Published</span>
                            <button class="btn-compact"><i class="fa-solid fa-cloud-arrow-down"></i> Start Data Loading</button>
                        </div>
                    </div>

                    <div class="run-status">
                        <div class="run-status__top">
                            <span class="run-badge run-badge--queued"><i class="fa-solid fa-clock"></i> Queued</span>
                            <div class="run-kv"><span>Loading: 11%</span></div>
                        </div>
                        <div class="progress progress--queued">
                            <div class="progress__bar" style="width:8%"></div>
                        </div>
                    </div>
                </li>

                <!-- COMPLETED example -->
                <li class="dataset-item">
                    <div class="dataset-head">
                        <div class="dataset-title">Web Sessions</div>
                        <div class="dataset-actions">
                            <span class="pill-compact"><i class="fa-solid fa-circle-check"></i> Published</span>
                            <button class="btn-compact"><i class="fa-solid fa-cloud-arrow-down"></i> Start Data Loading</button>
                        </div>
                    </div>

                    <div class="run-status">
                        <div class="run-status__top">
                            <span class="run-badge run-badge--ok"><i class="fa-solid fa-circle-check"></i> Completed</span>
                            <div class="run-kv"><span>Loading: 100%</span></div>
                        </div>
                        <div class="progress progress--ok">
                            <div class="progress__bar" style="width:100%"></div>
                        </div>
                    </div>
                </li>

                <!-- FAILED example -->
                <li class="dataset-item">
                    <div class="dataset-head">
                        <div class="dataset-title">Returns & Refunds</div>
                        <div class="dataset-actions">
                            <span class="pill-compact" style="background:#fff2f2;color:#941b1b"><i class="fa-solid fa-triangle-exclamation"></i> Error</span>
                            <button class="btn-compact"><i class="fa-solid fa-cloud-arrow-down"></i> Start Data Loading</button>
                        </div>
                    </div>

                    <div class="run-status">
                        <div class="run-status__top">
                            <span class="run-badge run-badge--err"><i class="fa-solid fa-triangle-exclamation"></i> Failed</span>
                            <div class="run-kv"><span>Loading: 82%</span></div>
                        </div>
                        <div class="progress progress--err">
                            <div class="progress__bar" style="width:72%"></div>
                        </div>
                    </div>
                </li>

                <!-- Simple example without run-status -->
                <li class="dataset-item">
                    <div class="dataset-head">
                        <div class="dataset-title">Shopware Dataset</div>
                        <div class="dataset-actions">
                            <span class="pill-compact"><i class="fa-solid fa-circle-check"></i> Published</span>
                            <button class="btn-compact"><i class="fa-solid fa-cloud-arrow-down"></i> Start Data Loading</button>
                        </div>
                    </div>
                </li>
            </ul>
        </section>

        {{-- === Replace your current "ETL Monitoring" section with this === --}}
        <section class="panel" style="margin-bottom:20px">
            <div class="etlmon__head">
                <div>
                    <h2 class="etlmon__title">ETL Jobs</h2>
                    <p class="etlmon__sub">Live overview of your latest pipeline runs</p>
                </div>
                <div class="etlmon__filters">
                    <a class="btn" href="{{ route("portal.etl_jobs") }}">View all</a>
                </div>
            </div>

            <!-- KPIs -->
            <div class="etlmon__kpis">
                <div class="kpi"><div class="kpi__label">Runs (24h)</div><div class="kpi__val">128</div><div class="kpi__hint">+6 vs prev</div></div>
                <div class="kpi"><div class="kpi__label">Success rate</div><div class="kpi__val">96%</div><div class="kpi__hint">5 failures</div></div>
                <div class="kpi"><div class="kpi__label">Avg duration</div><div class="kpi__val">01:12</div><div class="kpi__hint">last 20 runs</div></div>
            </div>

            <!-- Cards -->
            <div class="etlmon__grid">
                <!-- Running -->
                <article class="job">
                    <div class="job__row">
                        <div class="job__title">ingest-shopify-orders</div>
                        <span class="chip chip--run">Running</span>
                    </div>
                    <div class="job__meta">
                        <span>Dataset: <strong>Ecommerce Orders</strong></span>
                    </div>

                    <div class="job__progress is-running" aria-label="55% progress">
                        <div class="job__bar" style="width:55%"></div>
                    </div>

                    <div class="job__tail">
                        <span class="kv"><strong>Rows</strong> 12,430</span>
                        <div class="spacer"></div>
                    </div>
                </article>

                <!-- Queued -->
                <article class="job">
                    <div class="job__row">
                        <div class="job__title">ingest-ga4-sessions</div>
                        <span class="chip chip--queue">Queued</span>
                    </div>
                    <div class="job__meta">
                        <span>Dataset: <strong>Web Sessions</strong></span>
                    </div>

                    <div class="job__progress is-queued" aria-label="8% progress">
                        <div class="job__bar" style="width:8%"></div>
                    </div>

                    <div class="job__tail">
                        <span class="kv"><strong>Rows</strong> 12,430</span>
                    </div>
                </article>

                <!-- Completed -->
                <article class="job">
                    <div class="job__row">
                        <div class="job__title">publish-datasets</div>
                        <span class="chip chip--ok">Completed</span>
                    </div>
                    <div class="job__meta">
                        <span>Dataset: <strong>Unified Models</strong></span>
                    </div>

                    <div class="job__progress is-ok" aria-label="100% progress">
                        <div class="job__bar" style="width:100%"></div>
                    </div>

                    <div class="job__tail">
                        <span class="kv"><strong>Rows</strong> 12,430</span>
                        <div class="spacer"></div>
                    </div>
                </article>

                <!-- Failed -->
                <article class="job">
                    <div class="job__row">
                        <div class="job__title">sync-refunds</div>
                        <span class="chip chip--err">Failed</span>
                    </div>
                    <div class="job__meta">
                        <span>Dataset: <strong>Returns & Refunds</strong></span>
                    </div>

                    <div class="job__progress is-err" aria-label="72% progress">
                        <div class="job__bar" style="width:72%"></div>
                    </div>

                    <div class="job__tail">
                        <span class="kv"><strong>Rows</strong> 13,430</span>
                        <div class="spacer"></div>
                    </div>
                </article>
            </div>
        </section>

        <!-- Charts Section (Existing) -->
        <section class="grid-2" style="margin-top:14px">
            <div class="panel"><strong>Sales & ROAS</strong>
                <div class="placeholder" style="margin-top:10px">Chart placeholder</div>
            </div>
            <div class="panel"><strong>Inventory risk</strong>
                <div class="placeholder" style="margin-top:10px">Chart placeholder</div>
            </div>
        </section>
    </main>
@endsection

@push('scripts')
    <script>
        // You can add JavaScript here for any interactive elements
    </script>
@endpush