src/App.svelte

<!-- src/App.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  import Card from './lib/Card.svelte';
  import Chart from './lib/Chart.svelte';

  let loading = true;
  let error: string | null = null;
  let stats = {
    revenue: 0,
    users: 0,
    orders: 0,
    conversion: 0
  };

  onMount(async () => {
    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      stats = {
        revenue: 124500,
        users: 2341,
        orders: 342,
        conversion: 3.2
      };
      
      loading = false;
    } catch (err) {
      error = 'Failed to load dashboard data';
      loading = false;
    }
  });

  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    }).format(amount);
  };

  const formatNumber = (num: number) => {
    return new Intl.NumberFormat('en-US').format(num);
  };
</script>

<main class="container">
  <header>
    <h1>Dashboard</h1>
    <p class="subtitle">Overview of your business performance</p>
  </header>

  {#if loading}
    <div class="loading">
      <div class="spinner"></div>
      <p>Loading dashboard...</p>
    </div>
  {:else if error}
    <div class="error">
      <p>{error}</p>
    </div>
  {:else}
    <section class="grid">
      <Card
        title="Revenue"
        value={formatCurrency(stats.revenue)}
        change="+12.5%"
        positive={true}
      />
      <Card
        title="Active Users"
        value={formatNumber(stats.users)}
        change="+5.2%"
        positive={true}
      />
      <Card
        title="Orders"
        value={formatNumber(stats.orders)}
        change="-2.4%"
        positive={false}
      />
      <Card
        title="Conversion"
        value={`${stats.conversion}%`}
        change="+0.3%"
        positive={true}
      />
    </section>

    <section class="chart-section">
      <h2>Revenue Trend</h2>
      <Chart />
    </section>
  {/if}
</main>