@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/blocks/dashboard/DashboardBlock02.svelte

@@ -0,0 +1,259 @@
+<!--
+  DashboardBlock02.svelte
+  Dashboard with stats, tabbed overview with chart slot, and recent sales.
+  Features workspace selector, date range, and tab navigation.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+  import {
+    Button,
+    Card,
+    CardHeader,
+    CardContent,
+    CardTitle,
+    CardDescription,
+    Avatar,
+    Tabs,
+    TabsList,
+    TabsTrigger,
+    TabsContent,
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger
+  } from '$lib/components/ui';
+  import { DynamicIcon } from '$lib/components/ui/icon';
+
+  let {
+    class: className = '',
+    stats = [],
+    recentSales = [],
+    dateRange = 'Jan 20, 2024 - Feb 09, 2024',
+    activeTab = $bindable('overview'),
+    workspaceName = 'My Workspace',
+    user = { name: 'User' },
+    tabs = [
+      { value: 'overview', label: 'Overview' },
+      { value: 'analytics', label: 'Analytics' },
+      { value: 'reports', label: 'Reports' },
+      { value: 'notifications', label: 'Notifications' }
+    ],
+    onTabChange = undefined,
+    onDateRangeClick = undefined,
+    onDownload = undefined,
+    'workspace-menu': workspaceMenu,
+    chart,
+    analytics,
+    reports,
+    notifications
+  }: {
+    class?: string;
+    /** Stat cards data */
+    stats?: Array<{
+      title: string;
+      value: string;
+      change: string;
+      icon?: string;
+    }>;
+    /** Recent sales data */
+    recentSales?: Array<{
+      name: string;
+      email: string;
+      amount: string;
+      avatar?: string;
+    }>;
+    /** Date range label displayed in header */
+    dateRange?: string;
+    /** Currently active tab */
+    activeTab?: string;
+    /** Workspace/team name */
+    workspaceName?: string;
+    /** User info for avatar */
+    user?: { name: string; avatar?: string };
+    /** Tab options */
+    tabs?: Array<{ value: string; label: string }>;
+    onTabChange?: ((tab: string) => void) | undefined;
+    onDateRangeClick?: (() => void) | undefined;
+    onDownload?: (() => void) | undefined;
+    'workspace-menu'?: Snippet;
+    chart?: Snippet;
+    analytics?: Snippet;
+    reports?: Snippet;
+    notifications?: Snippet;
+  } = $props();
+
+  const iconMap: Record<string, string> = {
+    revenue: 'dollar-sign',
+    subscriptions: 'users',
+    sales: 'credit-card',
+    active: 'activity'
+  };
+
+  function getIconName(title: string): string {
+    const key = title.toLowerCase();
+    for (const [k, v] of Object.entries(iconMap)) {
+      if (key.includes(k)) return v;
+    }
+    return 'circle';
+  }
+
+  function handleTabChange(detail: { value: string }) {
+    activeTab = detail.value;
+    onTabChange?.(activeTab);
+  }
+</script>
+
+<div class={cn('flex min-h-screen flex-col', className)}>
+  <!-- Top Header -->
+  <header class="border-b">
+    <div class="flex h-16 items-center px-4">
+      <!-- Workspace Selector -->
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button variant="outline" class="gap-2">
+            {workspaceName}
+            <span aria-hidden="true">{'\u25BE'}</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          {#if workspaceMenu}
+            {@render workspaceMenu()}
+          {:else}
+            <DropdownMenuItem>{workspaceName}</DropdownMenuItem>
+          {/if}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <div class="ml-auto flex items-center space-x-4">
+        <Avatar src={user.avatar} fallback={user.name} size="md" />
+      </div>
+    </div>
+  </header>
+
+  <!-- Main Content -->
+  <main class="flex-1 space-y-4 p-4 pt-6 md:p-8">
+    <!-- Page Header -->
+    <div class="flex flex-col space-y-2 md:flex-row md:items-center md:justify-between md:space-y-0">
+      <h2 class="text-3xl font-bold tracking-tight">Dashboard</h2>
+      <div class="flex items-center space-x-2">
+        <Button variant="outline" onclick={() => onDateRangeClick?.()}>
+          <!-- Calendar icon -->
+          <span class="mr-2" aria-hidden="true"><DynamicIcon name="calendar" size={16} /></span>
+          {dateRange}
+        </Button>
+        <Button onclick={() => onDownload?.()}>Download</Button>
+      </div>
+    </div>
+
+    <!-- Tabs -->
+    <Tabs value={activeTab} onchange={handleTabChange}>
+      <TabsList>
+        {#each tabs as tab}
+          <TabsTrigger value={tab.value}>{tab.label}</TabsTrigger>
+        {/each}
+      </TabsList>
+
+      <TabsContent value="overview">
+        <!-- Stats Cards -->
+        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4 mt-4">
+          {#each stats as stat}
+            <Card>
+              <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle class="text-sm font-medium text-muted-foreground">
+                  {stat.title}
+                </CardTitle>
+                <span class="text-muted-foreground" aria-hidden="true">
+                  <DynamicIcon name={stat.icon || getIconName(stat.title)} size={16} />
+                </span>
+              </CardHeader>
+              <CardContent>
+                <div class="text-2xl font-bold">{stat.value}</div>
+                <p class="text-xs text-muted-foreground">{stat.change}</p>
+              </CardContent>
+            </Card>
+          {/each}
+        </div>
+
+        <!-- Two Column Layout -->
+        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-7 mt-4">
+          <!-- Chart Area -->
+          <Card class="lg:col-span-4">
+            <CardHeader>
+              <CardTitle>Overview</CardTitle>
+            </CardHeader>
+            <CardContent class="pl-2">
+              <!-- Chart slot: insert your chart component here -->
+              {#if chart}
+                {@render chart()}
+              {:else}
+                <div class="flex h-[350px] items-center justify-center rounded-md border border-dashed text-muted-foreground">
+                  Chart placeholder
+                </div>
+              {/if}
+            </CardContent>
+          </Card>
+
+          <!-- Recent Sales -->
+          <Card class="lg:col-span-3">
+            <CardHeader>
+              <CardTitle>Recent Sales</CardTitle>
+              <CardDescription>
+                You made {recentSales.length} sales this month.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div class="space-y-6">
+                {#each recentSales as sale}
+                  <div class="flex items-center">
+                    <Avatar
+                      src={sale.avatar}
+                      fallback={sale.name}
+                      size="lg"
+                    />
+                    <div class="ml-4 space-y-1">
+                      <p class="text-sm font-medium leading-none">{sale.name}</p>
+                      <p class="text-sm text-muted-foreground">{sale.email}</p>
+                    </div>
+                    <div class="ml-auto font-medium">{sale.amount}</div>
+                  </div>
+                {/each}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </TabsContent>
+
+      <!-- Other tab contents as snippet props -->
+      <TabsContent value="analytics">
+        {#if analytics}
+          {@render analytics()}
+        {:else}
+          <div class="flex h-[400px] items-center justify-center rounded-md border border-dashed text-muted-foreground mt-4">
+            Analytics content
+          </div>
+        {/if}
+      </TabsContent>
+
+      <TabsContent value="reports">
+        {#if reports}
+          {@render reports()}
+        {:else}
+          <div class="flex h-[400px] items-center justify-center rounded-md border border-dashed text-muted-foreground mt-4">
+            Reports content
+          </div>
+        {/if}
+      </TabsContent>
+
+      <TabsContent value="notifications">
+        {#if notifications}
+          {@render notifications()}
+        {:else}
+          <div class="flex h-[400px] items-center justify-center rounded-md border border-dashed text-muted-foreground mt-4">
+            Notifications content
+          </div>
+        {/if}
+      </TabsContent>
+    </Tabs>
+  </main>
+</div>

package/src/registry/blocks/dashboard/DashboardBlock03.svelte

@@ -0,0 +1,315 @@
+<!--
+  DashboardBlock03.svelte
+  Orders dashboard with icon sidebar, stat cards, tabbed orders table,
+  and a right detail panel for viewing individual order info.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+  import {
+    Button,
+    Card,
+    CardHeader,
+    CardContent,
+    CardTitle,
+    CardDescription,
+    CardFooter,
+    Badge,
+    Separator,
+    Tabs,
+    TabsList,
+    TabsTrigger,
+    TabsContent,
+    Table,
+    TableHeader,
+    TableBody,
+    TableRow,
+    TableHead,
+    TableCell
+  } from '$lib/components/ui';
+  import { DynamicIcon } from '$lib/components/ui/icon';
+
+  let {
+    class: className = '',
+    sidebarItems = [
+      { label: 'Dashboard', icon: 'home', active: true },
+      { label: 'Orders', icon: 'clipboard-list' },
+      { label: 'Products', icon: 'box' },
+      { label: 'Customers', icon: 'users' },
+      { label: 'Settings', icon: 'settings' }
+    ],
+    stats = [],
+    orders = [],
+    selectedOrder = null,
+    activeTab = $bindable('week'),
+    onCreateOrder = undefined,
+    onSelectOrder = undefined,
+    onSidebarClick = undefined,
+    onFilter = undefined,
+    onExport = undefined,
+    'order-actions': orderActions
+  }: {
+    class?: string;
+    /** Sidebar navigation icons */
+    sidebarItems?: Array<{
+      label: string;
+      icon: string;
+      active?: boolean;
+      href?: string;
+    }>;
+    /** Summary stat cards */
+    stats?: Array<{
+      title: string;
+      value: string;
+      change?: string;
+    }>;
+    /** Orders table data */
+    orders?: Array<{
+      id: string;
+      customer: string;
+      type: string;
+      status: string;
+      date: string;
+      amount: string;
+    }>;
+    /** Currently selected order detail */
+    selectedOrder?: {
+      id: string;
+      date: string;
+      items: Array<{ name: string; qty: number; price: string }>;
+      subtotal: string;
+      shipping: string;
+      tax: string;
+      total: string;
+      shippingAddress?: string;
+      billingAddress?: string;
+      customerName?: string;
+      customerEmail?: string;
+      paymentMethod?: string;
+    } | null;
+    /** Active time period tab */
+    activeTab?: string;
+    onCreateOrder?: (() => void) | undefined;
+    onSelectOrder?: ((id: string) => void) | undefined;
+    onSidebarClick?: ((label: string) => void) | undefined;
+    onFilter?: (() => void) | undefined;
+    onExport?: (() => void) | undefined;
+    'order-actions'?: Snippet;
+  } = $props();
+
+  function handleTabChange(detail: { value: string }) {
+    activeTab = detail.value;
+  }
+
+  function statusVariant(status: string): 'default' | 'secondary' | 'outline' | 'destructive' {
+    switch (status.toLowerCase()) {
+      case 'fulfilled': return 'default';
+      case 'pending': return 'secondary';
+      case 'cancelled':
+      case 'declined': return 'destructive';
+      default: return 'outline';
+    }
+  }
+</script>
+
+<div class={cn('flex min-h-screen', className)}>
+  <!-- Icon Sidebar -->
+  <aside class="hidden w-14 flex-col border-r bg-muted/40 sm:flex">
+    <nav class="flex flex-col items-center gap-4 py-4">
+      {#each sidebarItems as item}
+        <button
+          class={cn(
+            'flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground',
+            item.active && 'bg-primary text-primary-foreground'
+          )}
+          title={item.label}
+          onclick={() => onSidebarClick?.(item.label)}
+        >
+          <DynamicIcon name={item.icon} size={20} />
+        </button>
+      {/each}
+    </nav>
+  </aside>
+
+  <!-- Main Content -->
+  <div class="flex flex-1 flex-col">
+    <main class="flex flex-1 gap-4 p-4 md:p-8">
+      <!-- Left: Orders -->
+      <div class="flex flex-1 flex-col gap-4">
+        <!-- Header -->
+        <div class="flex items-center justify-between">
+          <h1 class="text-2xl font-bold tracking-tight">Your Orders</h1>
+          <Button onclick={() => onCreateOrder?.()}>Create New Order</Button>
+        </div>
+
+        <!-- Stat Cards -->
+        <div class="grid gap-4 sm:grid-cols-2">
+          {#each stats as stat}
+            <Card>
+              <CardHeader class="pb-2">
+                <CardDescription>{stat.title}</CardDescription>
+                <CardTitle class="text-3xl">{stat.value}</CardTitle>
+              </CardHeader>
+              {#if stat.change}
+                <CardContent>
+                  <p class="text-xs text-muted-foreground">{stat.change}</p>
+                </CardContent>
+              {/if}
+            </Card>
+          {/each}
+        </div>
+
+        <!-- Tabs + Table -->
+        <Tabs value={activeTab} onchange={handleTabChange}>
+          <div class="flex items-center justify-between">
+            <TabsList>
+              <TabsTrigger value="week">Week</TabsTrigger>
+              <TabsTrigger value="month">Month</TabsTrigger>
+              <TabsTrigger value="year">Year</TabsTrigger>
+            </TabsList>
+            <div class="flex items-center gap-2">
+              <Button variant="outline" size="sm" onclick={() => onFilter?.()}>
+                Filter
+              </Button>
+              <Button variant="outline" size="sm" onclick={() => onExport?.()}>
+                Export
+              </Button>
+            </div>
+          </div>
+
+          <TabsContent value={activeTab}>
+            <Card>
+              <CardContent class="p-0">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Customer</TableHead>
+                      <TableHead>Type</TableHead>
+                      <TableHead>Status</TableHead>
+                      <TableHead>Date</TableHead>
+                      <TableHead class="text-right">Amount</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {#each orders as order}
+                      <TableRow
+                        class="cursor-pointer"
+                        onclick={() => onSelectOrder?.(order.id)}
+                      >
+                        <TableCell class="font-medium">{order.customer}</TableCell>
+                        <TableCell>{order.type}</TableCell>
+                        <TableCell>
+                          <Badge variant={statusVariant(order.status)}>
+                            {order.status}
+                          </Badge>
+                        </TableCell>
+                        <TableCell>{order.date}</TableCell>
+                        <TableCell class="text-right">{order.amount}</TableCell>
+                      </TableRow>
+                    {/each}
+                  </TableBody>
+                </Table>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      <!-- Right: Order Detail Panel -->
+      {#if selectedOrder}
+        <Card class="hidden w-[380px] shrink-0 lg:block">
+          <CardHeader>
+            <div class="flex items-center justify-between">
+              <div>
+                <CardTitle class="text-lg">Order {selectedOrder.id}</CardTitle>
+                <CardDescription>{selectedOrder.date}</CardDescription>
+              </div>
+              {#if orderActions}
+                {@render orderActions()}
+              {/if}
+            </div>
+          </CardHeader>
+          <CardContent class="space-y-4">
+            <!-- Line Items -->
+            <div class="space-y-2">
+              {#each selectedOrder.items as item}
+                <div class="flex justify-between text-sm">
+                  <span>
+                    {item.name}
+                    <span class="text-muted-foreground">x {item.qty}</span>
+                  </span>
+                  <span>{item.price}</span>
+                </div>
+              {/each}
+            </div>
+
+            <Separator />
+
+            <!-- Totals -->
+            <div class="space-y-1 text-sm">
+              <div class="flex justify-between">
+                <span class="text-muted-foreground">Subtotal</span>
+                <span>{selectedOrder.subtotal}</span>
+              </div>
+              <div class="flex justify-between">
+                <span class="text-muted-foreground">Shipping</span>
+                <span>{selectedOrder.shipping}</span>
+              </div>
+              <div class="flex justify-between">
+                <span class="text-muted-foreground">Tax</span>
+                <span>{selectedOrder.tax}</span>
+              </div>
+              <div class="flex justify-between font-medium">
+                <span>Total</span>
+                <span>{selectedOrder.total}</span>
+              </div>
+            </div>
+
+            <Separator />
+
+            <!-- Shipping Info -->
+            {#if selectedOrder.shippingAddress}
+              <div>
+                <h4 class="text-sm font-medium mb-1">Shipping Information</h4>
+                <p class="text-sm text-muted-foreground whitespace-pre-line">
+                  {selectedOrder.shippingAddress}
+                </p>
+              </div>
+            {/if}
+
+            <!-- Billing Info -->
+            {#if selectedOrder.billingAddress}
+              <div>
+                <h4 class="text-sm font-medium mb-1">Billing Information</h4>
+                <p class="text-sm text-muted-foreground whitespace-pre-line">
+                  {selectedOrder.billingAddress}
+                </p>
+              </div>
+            {/if}
+
+            <Separator />
+
+            <!-- Customer Info -->
+            {#if selectedOrder.customerName}
+              <div>
+                <h4 class="text-sm font-medium mb-1">Customer Information</h4>
+                <p class="text-sm">{selectedOrder.customerName}</p>
+                {#if selectedOrder.customerEmail}
+                  <p class="text-sm text-muted-foreground">{selectedOrder.customerEmail}</p>
+                {/if}
+              </div>
+            {/if}
+
+            <!-- Payment Info -->
+            {#if selectedOrder.paymentMethod}
+              <div>
+                <h4 class="text-sm font-medium mb-1">Payment Information</h4>
+                <p class="text-sm text-muted-foreground">{selectedOrder.paymentMethod}</p>
+              </div>
+            {/if}
+          </CardContent>
+        </Card>
+      {/if}
+    </main>
+  </div>
+</div>