@xbg.solutions/create-frontend 1.1.2 → 1.2.0

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

@@ -0,0 +1,220 @@
+<!--
+  DashboardBlock04.svelte
+  Orders dashboard variant with a different column layout.
+  Features a wider detail panel alongside orders and inline stats.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import {
+    Button,
+    Card,
+    CardHeader,
+    CardContent,
+    CardTitle,
+    CardDescription,
+    Badge,
+    Separator,
+    Table,
+    TableHeader,
+    TableBody,
+    TableRow,
+    TableHead,
+    TableCell
+  } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    orders = [],
+    selectedOrder = null,
+    stats = [],
+    onSelectOrder = undefined,
+    onCreateOrder = undefined
+  }: {
+    class?: string;
+    /** Orders data */
+    orders?: Array<{
+      id: string;
+      customer: string;
+      email: string;
+      type: string;
+      status: string;
+      date: string;
+      amount: string;
+    }>;
+    /** Selected order detail */
+    selectedOrder?: {
+      id: string;
+      date: string;
+      items: Array<{ name: string; qty: number; price: string }>;
+      subtotal: string;
+      shipping: string;
+      tax: string;
+      total: string;
+      customer?: { name: string; email: string; phone?: string };
+      paymentMethod?: string;
+    } | null;
+    /** Summary stats */
+    stats?: Array<{
+      title: string;
+      value: string;
+      change?: string;
+    }>;
+    onSelectOrder?: ((id: string) => void) | undefined;
+    onCreateOrder?: (() => void) | undefined;
+  } = $props();
+
+  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 flex-col', className)}>
+  <main class="flex flex-1 gap-4 p-4 md:p-8">
+    <!-- Left Column: Stats + Table -->
+    <div class="flex flex-1 flex-col gap-4">
+      <!-- Header -->
+      <div class="flex items-center justify-between">
+        <div>
+          <h1 class="text-2xl font-bold tracking-tight">Orders</h1>
+          <p class="text-muted-foreground">Manage and track your orders.</p>
+        </div>
+        <Button onclick={() => onCreateOrder?.()}>Create Order</Button>
+      </div>
+
+      <!-- Stats Row -->
+      {#if stats.length > 0}
+        <div class="grid gap-4 sm:grid-cols-3">
+          {#each stats as stat}
+            <Card>
+              <CardHeader class="pb-2">
+                <CardDescription>{stat.title}</CardDescription>
+                <CardTitle class="text-2xl">{stat.value}</CardTitle>
+              </CardHeader>
+              {#if stat.change}
+                <CardContent>
+                  <p class="text-xs text-muted-foreground">{stat.change}</p>
+                </CardContent>
+              {/if}
+            </Card>
+          {/each}
+        </div>
+      {/if}
+
+      <!-- Orders Table -->
+      <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>
+                    <div class="font-medium">{order.customer}</div>
+                    <div class="text-sm text-muted-foreground">{order.email}</div>
+                  </TableCell>
+                  <TableCell>{order.type}</TableCell>
+                  <TableCell>
+                    <Badge variant={statusVariant(order.status)}>
+                      {order.status}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>{order.date}</TableCell>
+                  <TableCell class="text-right font-medium">{order.amount}</TableCell>
+                </TableRow>
+              {/each}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+
+    <!-- Right Column: Order Detail -->
+    {#if selectedOrder}
+      <Card class="hidden w-[420px] shrink-0 lg:block">
+        <CardHeader>
+          <CardTitle>Order {selectedOrder.id}</CardTitle>
+          <CardDescription>Placed on {selectedOrder.date}</CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-4">
+          <!-- Line Items -->
+          <div>
+            <h4 class="text-sm font-medium mb-2">Items</h4>
+            <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>
+          </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>
+            <Separator />
+            <div class="flex justify-between font-semibold">
+              <span>Total</span>
+              <span>{selectedOrder.total}</span>
+            </div>
+          </div>
+
+          <Separator />
+
+          <!-- Customer Info -->
+          {#if selectedOrder.customer}
+            <div>
+              <h4 class="text-sm font-medium mb-1">Customer</h4>
+              <p class="text-sm">{selectedOrder.customer.name}</p>
+              <p class="text-sm text-muted-foreground">{selectedOrder.customer.email}</p>
+              {#if selectedOrder.customer.phone}
+                <p class="text-sm text-muted-foreground">{selectedOrder.customer.phone}</p>
+              {/if}
+            </div>
+          {/if}
+
+          <!-- Payment -->
+          {#if selectedOrder.paymentMethod}
+            <div>
+              <h4 class="text-sm font-medium mb-1">Payment</h4>
+              <p class="text-sm text-muted-foreground">{selectedOrder.paymentMethod}</p>
+            </div>
+          {/if}
+        </CardContent>
+      </Card>
+    {/if}
+  </main>
+</div>

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

@@ -0,0 +1,158 @@
+<!--
+  DashboardBlock05.svelte
+  Compact stats dashboard with a data table.
+  Features inline stat badges and a clean table layout.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import {
+    Button,
+    Card,
+    CardHeader,
+    CardContent,
+    CardTitle,
+    CardDescription,
+    Badge,
+    Input,
+    Table,
+    TableHeader,
+    TableBody,
+    TableRow,
+    TableHead,
+    TableCell
+  } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    stats = [],
+    rows = [],
+    columns = ['Name', 'Status', 'Amount', 'Date'],
+    title = 'Dashboard',
+    description = '',
+    onSearch = undefined,
+    onRowClick = undefined
+  }: {
+    class?: string;
+    /** Compact stat items */
+    stats?: Array<{
+      title: string;
+      value: string;
+      change?: string;
+      trend?: 'up' | 'down' | 'neutral';
+    }>;
+    /** Table data */
+    rows?: Array<{
+      id: string;
+      name: string;
+      email: string;
+      status: string;
+      amount: string;
+      date: string;
+    }>;
+    /** Table column headers */
+    columns?: string[];
+    title?: string;
+    description?: string;
+    onSearch?: ((query: string) => void) | undefined;
+    onRowClick?: ((id: string) => void) | undefined;
+  } = $props();
+
+  let searchQuery = $state('');
+
+  function trendColor(trend?: string): string {
+    if (trend === 'up') return 'text-green-600';
+    if (trend === 'down') return 'text-red-600';
+    return 'text-muted-foreground';
+  }
+
+  function statusVariant(status: string): 'default' | 'secondary' | 'outline' | 'destructive' {
+    switch (status.toLowerCase()) {
+      case 'active':
+      case 'fulfilled': return 'default';
+      case 'pending':
+      case 'processing': return 'secondary';
+      case 'cancelled':
+      case 'failed': return 'destructive';
+      default: return 'outline';
+    }
+  }
+</script>
+
+<div class={cn('space-y-4 p-4 md:p-8', className)}>
+  <!-- Header -->
+  <div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+    <div>
+      <h1 class="text-2xl font-bold tracking-tight">{title}</h1>
+      {#if description}
+        <p class="text-muted-foreground">{description}</p>
+      {/if}
+    </div>
+    <Input
+      type="search"
+      placeholder="Search..."
+      class="w-full md:w-[250px]"
+      bind:value={searchQuery}
+      oninput={() => onSearch?.(searchQuery)}
+    />
+  </div>
+
+  <!-- Compact Stats -->
+  <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+    {#each stats as stat}
+      <Card>
+        <CardContent class="p-4">
+          <div class="flex items-center justify-between">
+            <p class="text-sm text-muted-foreground">{stat.title}</p>
+            {#if stat.change}
+              <span class={cn('text-xs font-medium', trendColor(stat.trend))}>
+                {stat.change}
+              </span>
+            {/if}
+          </div>
+          <p class="text-2xl font-bold mt-1">{stat.value}</p>
+        </CardContent>
+      </Card>
+    {/each}
+  </div>
+
+  <!-- Data Table -->
+  <Card>
+    <CardHeader>
+      <CardTitle>{title}</CardTitle>
+      {#if description}
+        <CardDescription>{description}</CardDescription>
+      {/if}
+    </CardHeader>
+    <CardContent class="p-0">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {#each columns as col}
+              <TableHead>{col}</TableHead>
+            {/each}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {#each rows as row}
+            <TableRow
+              class="cursor-pointer"
+              onclick={() => onRowClick?.(row.id)}
+            >
+              <TableCell>
+                <div class="font-medium">{row.name}</div>
+                <div class="text-sm text-muted-foreground">{row.email}</div>
+              </TableCell>
+              <TableCell>
+                <Badge variant={statusVariant(row.status)}>
+                  {row.status}
+                </Badge>
+              </TableCell>
+              <TableCell class="font-medium">{row.amount}</TableCell>
+              <TableCell class="text-muted-foreground">{row.date}</TableCell>
+            </TableRow>
+          {/each}
+        </TableBody>
+      </Table>
+    </CardContent>
+  </Card>
+</div>

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

@@ -0,0 +1,173 @@
+<!--
+  DashboardBlock06.svelte
+  Table-focused dashboard with pagination.
+  Minimal stats header, prominent data table with page controls.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import {
+    Button,
+    Card,
+    CardHeader,
+    CardContent,
+    CardTitle,
+    CardDescription,
+    CardFooter,
+    Badge,
+    Input,
+    Table,
+    TableHeader,
+    TableBody,
+    TableRow,
+    TableHead,
+    TableCell
+  } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    rows = [],
+    columns = ['Customer', 'Type', 'Status', 'Date', 'Amount'],
+    currentPage = 1,
+    totalPages = 1,
+    totalItems = 0,
+    pageSize = 10,
+    title = 'Transactions',
+    description = 'A list of all transactions.',
+    onPageChange = undefined,
+    onSearch = undefined,
+    onRowClick = undefined,
+    onExport = undefined
+  }: {
+    class?: string;
+    /** Table rows */
+    rows?: Array<{
+      id: string;
+      name: string;
+      email: string;
+      status: string;
+      type: string;
+      amount: string;
+      date: string;
+    }>;
+    /** Column headers */
+    columns?: string[];
+    /** Pagination state */
+    currentPage?: number;
+    totalPages?: number;
+    totalItems?: number;
+    pageSize?: number;
+    title?: string;
+    description?: string;
+    onPageChange?: ((page: number) => void) | undefined;
+    onSearch?: ((query: string) => void) | undefined;
+    onRowClick?: ((id: string) => void) | undefined;
+    onExport?: (() => void) | undefined;
+  } = $props();
+
+  let searchQuery = $state('');
+
+  let startItem = $derived((currentPage - 1) * pageSize + 1);
+  let endItem = $derived(Math.min(currentPage * pageSize, totalItems));
+
+  function statusVariant(status: string): 'default' | 'secondary' | 'outline' | 'destructive' {
+    switch (status.toLowerCase()) {
+      case 'fulfilled':
+      case 'completed':
+      case 'active': return 'default';
+      case 'pending':
+      case 'processing': return 'secondary';
+      case 'cancelled':
+      case 'failed':
+      case 'declined': return 'destructive';
+      default: return 'outline';
+    }
+  }
+</script>
+
+<div class={cn('space-y-4 p-4 md:p-8', className)}>
+  <!-- Header -->
+  <div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+    <div>
+      <h1 class="text-2xl font-bold tracking-tight">{title}</h1>
+      <p class="text-muted-foreground">{description}</p>
+    </div>
+    <div class="flex items-center gap-2">
+      <Input
+        type="search"
+        placeholder="Search..."
+        class="w-[200px]"
+        bind:value={searchQuery}
+        oninput={() => onSearch?.(searchQuery)}
+      />
+      <Button variant="outline" onclick={() => onExport?.()}>
+        Export
+      </Button>
+    </div>
+  </div>
+
+  <!-- Table Card -->
+  <Card>
+    <CardContent class="p-0">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {#each columns as col}
+              <TableHead class={col === 'Amount' ? 'text-right' : ''}>
+                {col}
+              </TableHead>
+            {/each}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {#each rows as row}
+            <TableRow
+              class="cursor-pointer"
+              onclick={() => onRowClick?.(row.id)}
+            >
+              <TableCell>
+                <div class="font-medium">{row.name}</div>
+                <div class="text-sm text-muted-foreground">{row.email}</div>
+              </TableCell>
+              <TableCell>{row.type}</TableCell>
+              <TableCell>
+                <Badge variant={statusVariant(row.status)}>
+                  {row.status}
+                </Badge>
+              </TableCell>
+              <TableCell class="text-muted-foreground">{row.date}</TableCell>
+              <TableCell class="text-right font-medium">{row.amount}</TableCell>
+            </TableRow>
+          {/each}
+        </TableBody>
+      </Table>
+    </CardContent>
+
+    <!-- Pagination Footer -->
+    <CardFooter class="flex items-center justify-between border-t px-6 py-4">
+      <p class="text-sm text-muted-foreground">
+        Showing {startItem}-{endItem} of {totalItems}
+      </p>
+      <div class="flex items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={currentPage <= 1}
+          onclick={() => onPageChange?.(currentPage - 1)}
+        >
+          Previous
+        </Button>
+        <span class="text-sm text-muted-foreground">
+          Page {currentPage} of {totalPages}
+        </span>
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={currentPage >= totalPages}
+          onclick={() => onPageChange?.(currentPage + 1)}
+        >
+          Next
+        </Button>
+      </div>
+    </CardFooter>
+  </Card>
+</div>

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

@@ -0,0 +1,103 @@
+<!--
+  DashboardBlock07.svelte
+  Minimal dashboard with stats summary and a simple item list.
+  Clean, lightweight layout for overviews.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import {
+    Card,
+    CardHeader,
+    CardContent,
+    CardTitle,
+    CardDescription,
+    Avatar,
+    Separator
+  } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    stats = [],
+    items = [],
+    heading = 'Overview',
+    listTitle = 'Recent Activity',
+    listDescription = '',
+    onItemClick = undefined
+  }: {
+    class?: string;
+    /** Stat items for the top summary row */
+    stats?: Array<{
+      title: string;
+      value: string;
+      change?: string;
+    }>;
+    /** List items (e.g. recent activity, transactions) */
+    items?: Array<{
+      id: string;
+      title: string;
+      subtitle: string;
+      value: string;
+      avatar?: string;
+    }>;
+    heading?: string;
+    listTitle?: string;
+    listDescription?: string;
+    onItemClick?: ((id: string) => void) | undefined;
+  } = $props();
+</script>
+
+<div class={cn('space-y-4 p-4 md:p-8', className)}>
+  <!-- Page Heading -->
+  <h1 class="text-2xl font-bold tracking-tight">{heading}</h1>
+
+  <!-- Stats Row -->
+  <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+    {#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>
+
+  <!-- Activity List -->
+  <Card>
+    <CardHeader>
+      <CardTitle>{listTitle}</CardTitle>
+      {#if listDescription}
+        <CardDescription>{listDescription}</CardDescription>
+      {/if}
+    </CardHeader>
+    <CardContent>
+      <div class="space-y-0">
+        {#each items as item, i}
+          <button
+            class="flex w-full items-center gap-4 py-3 text-left hover:bg-muted/50 rounded-md px-2 transition-colors"
+            onclick={() => onItemClick?.(item.id)}
+          >
+            <Avatar
+              src={item.avatar}
+              fallback={item.title}
+              size="lg"
+            />
+            <div class="flex-1 min-w-0">
+              <p class="text-sm font-medium leading-none truncate">{item.title}</p>
+              <p class="text-sm text-muted-foreground truncate">{item.subtitle}</p>
+            </div>
+            <span class="text-sm font-medium shrink-0">{item.value}</span>
+          </button>
+          {#if i < items.length - 1}
+            <Separator />
+          {/if}
+        {/each}
+      </div>
+    </CardContent>
+  </Card>
+</div>

package/src/registry/blocks/dashboard/index.ts

@@ -0,0 +1,16 @@
+/**
+ * src/lib/components/blocks/dashboard/index.ts
+ * Dashboard Block Components Export
+ *
+ * Exports all dashboard block components for use throughout the application.
+ * Each block is a self-contained dashboard layout variation.
+ */
+
+export { default as DashboardBlock01 } from './DashboardBlock01.svelte';
+export { default as DashboardBlock02 } from './DashboardBlock02.svelte';
+export { default as DashboardBlock03 } from './DashboardBlock03.svelte';
+export { default as DashboardBlock04 } from './DashboardBlock04.svelte';
+export { default as DashboardBlock05 } from './DashboardBlock05.svelte';
+export { default as DashboardBlock06 } from './DashboardBlock06.svelte';
+export { default as DashboardBlock07 } from './DashboardBlock07.svelte';
+export { default as ChartsBlock01 } from './ChartsBlock01.svelte';