@svadmin/ui 0.64.0 → 0.65.0

package/dist/components/OfflineSyncBanner.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { Button } from './ui/button/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import {
+    Wifi,
+    WifiOff,
+    RefreshCw,
+    CheckCircle2,
+    Clock,
+    AlertCircle,
+  } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  export interface PendingMutation {
+    id: string;
+    action: string; // e.g. "update", "create", "delete"
+    resource: string;
+    timestamp: string;
+    status?: 'pending' | 'syncing' | 'failed' | 'synced';
+    error?: string;
+  }
+
+  interface Props {
+    isOnline?: boolean;
+    pendingMutations?: PendingMutation[];
+    autoSync?: boolean;
+    onsync?: (mutations: PendingMutation[]) => void | Promise<void>;
+    onretry?: (mutationId: string) => void;
+    class?: string;
+  }
+
+  let {
+    isOnline = $bindable(true),
+    pendingMutations = $bindable([]),
+    autoSync = true,
+    onsync,
+    onretry,
+    class: className = '',
+  }: Props = $props();
+
+  let isSyncing = $state(false);
+  let expanded = $state(false);
+
+  async function triggerSync() {
+    if (isSyncing || pendingMutations.length === 0) return;
+    isSyncing = true;
+    try {
+      await onsync?.(pendingMutations);
+    } finally {
+      isSyncing = false;
+    }
+  }
+
+  onMount(() => {
+    if (typeof window !== 'undefined') {
+      const handleOnline = () => {
+        isOnline = true;
+        if (autoSync && pendingMutations.length > 0) {
+          triggerSync();
+        }
+      };
+      const handleOffline = () => {
+        isOnline = false;
+      };
+
+      window.addEventListener('online', handleOnline);
+      window.addEventListener('offline', handleOffline);
+
+      return () => {
+        window.removeEventListener('online', handleOnline);
+        window.removeEventListener('offline', handleOffline);
+      };
+    }
+  });
+</script>
+
+{#if !isOnline || pendingMutations.length > 0}
+  <div
+    class={cn(
+      'rounded-xl border shadow-xs text-xs p-3 transition-all',
+      !isOnline
+        ? 'bg-warning/15 border-warning/30 text-warning-foreground'
+        : 'bg-muted/40 border-border/80 text-foreground',
+      className
+    )}
+  >
+    <div class="flex flex-wrap items-center justify-between gap-2">
+      <!-- Status Indicator -->
+      <div class="flex items-center gap-2">
+        {#if !isOnline}
+          <div class="flex h-6 w-6 items-center justify-center rounded-full bg-warning/20 text-warning">
+            <WifiOff class="h-3.5 w-3.5" />
+          </div>
+          <div>
+            <div class="font-semibold text-foreground">Offline Mode</div>
+            <div class="text-[11px] text-muted-foreground">Changes are saved locally to IndexedDB queue.</div>
+          </div>
+        {:else}
+          <div class="flex h-6 w-6 items-center justify-center rounded-full bg-success/20 text-success">
+            <Wifi class="h-3.5 w-3.5" />
+          </div>
+          <div>
+            <div class="font-semibold text-foreground">Online • Synced Connection</div>
+            <div class="text-[11px] text-muted-foreground">
+              {pendingMutations.length} pending mutation(s) in queue
+            </div>
+          </div>
+        {/if}
+      </div>
+
+      <!-- Actions -->
+      <div class="flex items-center gap-2">
+        {#if pendingMutations.length > 0}
+          <button
+            type="button"
+            class="text-[11px] text-muted-foreground hover:text-foreground underline cursor-pointer bg-transparent border-0"
+            onclick={() => { expanded = !expanded; }}
+          >
+            {expanded ? 'Hide Details' : `View Queue (${pendingMutations.length})`}
+          </button>
+
+          <Button
+            size="sm"
+            class="h-7 text-xs gap-1"
+            disabled={!isOnline || isSyncing}
+            onclick={triggerSync}
+          >
+            <RefreshCw class={cn('h-3 w-3', isSyncing ? 'animate-spin' : '')} />
+            {isSyncing ? 'Syncing...' : 'Sync Now'}
+          </Button>
+        {/if}
+      </div>
+    </div>
+
+    <!-- Queue List Drawer -->
+    {#if expanded && pendingMutations.length > 0}
+      <div class="mt-3 pt-3 border-t border-border/40 space-y-1.5 max-h-48 overflow-y-auto">
+        {#each pendingMutations as mut (mut.id)}
+          <div class="flex items-center justify-between p-2 rounded-md bg-card border border-border/60 text-[11px]">
+            <div class="flex items-center gap-2 truncate">
+              {#if mut.status === 'failed'}
+                <AlertCircle class="h-3.5 w-3.5 text-destructive shrink-0" />
+              {:else if mut.status === 'syncing'}
+                <RefreshCw class="h-3.5 w-3.5 text-primary animate-spin shrink-0" />
+              {:else if mut.status === 'synced'}
+                <CheckCircle2 class="h-3.5 w-3.5 text-success shrink-0" />
+              {:else}
+                <Clock class="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+              {/if}
+
+              <Badge variant="outline" class="font-mono text-[9px] uppercase px-1 py-0">{mut.action}</Badge>
+              <span class="font-medium text-foreground truncate">{mut.resource}</span>
+              <span class="text-muted-foreground font-mono text-[10px]">{mut.timestamp}</span>
+            </div>
+
+            {#if mut.status === 'failed' && onretry}
+              <Button
+                variant="ghost"
+                size="sm"
+                class="h-6 text-[10px] px-2 text-destructive hover:bg-destructive/10"
+                onclick={() => onretry?.(mut.id)}
+              >
+                Retry
+              </Button>
+            {/if}
+          </div>
+        {/each}
+      </div>
+    {/if}
+  </div>
+{/if}

package/dist/components/OfflineSyncBanner.svelte.d.ts

@@ -0,0 +1,19 @@
+export interface PendingMutation {
+    id: string;
+    action: string;
+    resource: string;
+    timestamp: string;
+    status?: 'pending' | 'syncing' | 'failed' | 'synced';
+    error?: string;
+}
+interface Props {
+    isOnline?: boolean;
+    pendingMutations?: PendingMutation[];
+    autoSync?: boolean;
+    onsync?: (mutations: PendingMutation[]) => void | Promise<void>;
+    onretry?: (mutationId: string) => void;
+    class?: string;
+}
+declare const OfflineSyncBanner: import("svelte").Component<Props, {}, "isOnline" | "pendingMutations">;
+type OfflineSyncBanner = ReturnType<typeof OfflineSyncBanner>;
+export default OfflineSyncBanner;

package/dist/components/PdfDocumentViewer.svelte

@@ -0,0 +1,255 @@
+<script lang="ts">
+  import { Button } from './ui/button/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import {
+    ChevronLeft,
+    ChevronRight,
+    ZoomIn,
+    ZoomOut,
+    RotateCw,
+    Download,
+    Printer,
+    FileText,
+    Maximize2,
+  } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  export interface DocumentStamp {
+    id: string;
+    text: string;
+    page: number;
+    x: number; // percentage (0-100)
+    y: number; // percentage (0-100)
+    status?: 'approved' | 'rejected' | 'confidential' | 'reviewed';
+  }
+
+  interface Props {
+    fileUrl?: string;
+    fileName?: string;
+    totalPages?: number;
+    currentPage?: number;
+    stamps?: DocumentStamp[];
+    onpagechange?: (page: number) => void;
+    ondownload?: () => void;
+    onprint?: () => void;
+    class?: string;
+  }
+
+  let {
+    fileUrl = '',
+    fileName = 'Contract_Document.pdf',
+    totalPages = 1,
+    currentPage = $bindable(1),
+    stamps = [],
+    onpagechange,
+    ondownload,
+    onprint,
+    class: className = '',
+  }: Props = $props();
+
+  let zoomLevel = $state(100);
+  let rotation = $state(0);
+  let isFullscreen = $state(false);
+
+  function prevPage() {
+    if (currentPage > 1) {
+      currentPage -= 1;
+      onpagechange?.(currentPage);
+    }
+  }
+
+  function nextPage() {
+    if (currentPage < totalPages) {
+      currentPage += 1;
+      onpagechange?.(currentPage);
+    }
+  }
+
+  function zoomIn() {
+    zoomLevel = Math.min(zoomLevel + 25, 250);
+  }
+
+  function zoomOut() {
+    zoomLevel = Math.max(zoomLevel - 25, 50);
+  }
+
+  function rotate() {
+    rotation = (rotation + 90) % 360;
+  }
+
+  function handleDownload() {
+    if (ondownload) {
+      ondownload();
+      return;
+    }
+    if (fileUrl) {
+      const a = document.createElement('a');
+      a.href = fileUrl;
+      a.download = fileName;
+      a.click();
+    }
+  }
+
+  function handlePrint() {
+    if (onprint) {
+      onprint();
+    } else {
+      window.print();
+    }
+  }
+
+  const pageStamps = $derived(
+    stamps.filter((s) => s.page === currentPage)
+  );
+
+  function getStampVariant(status?: string) {
+    switch (status) {
+      case 'approved':
+        return 'bg-success/15 text-success border-success/30';
+      case 'rejected':
+        return 'bg-destructive/15 text-destructive border-destructive/30';
+      case 'confidential':
+        return 'bg-warning/15 text-warning border-warning/30';
+      default:
+        return 'bg-primary/15 text-primary border-primary/30';
+    }
+  }
+</script>
+
+<div
+  class={cn(
+    'flex flex-col rounded-xl border border-border bg-card shadow-xs text-xs overflow-hidden transition-all',
+    isFullscreen ? 'fixed inset-4 z-50 shadow-2xl' : 'min-h-[500px]',
+    className
+  )}
+>
+  <!-- Toolbar Header -->
+  <div class="flex flex-wrap items-center justify-between gap-2 p-3 bg-muted/30 border-b border-border/60">
+    <!-- File Title -->
+    <div class="flex items-center gap-2 font-medium text-foreground truncate max-w-64">
+      <FileText class="h-4 w-4 text-primary shrink-0" />
+      <span class="truncate">{fileName}</span>
+    </div>
+
+    <!-- Paging Controls -->
+    <div class="flex items-center gap-1.5">
+      <Button
+        variant="ghost"
+        size="sm"
+        class="h-7 w-7 p-0"
+        disabled={currentPage <= 1}
+        onclick={prevPage}
+        title="Previous Page"
+      >
+        <ChevronLeft class="h-4 w-4" />
+      </Button>
+
+      <div class="flex items-center gap-1 font-mono text-[11px] text-muted-foreground px-1">
+        <span class="font-semibold text-foreground">{currentPage}</span>
+        <span>/</span>
+        <span>{totalPages}</span>
+      </div>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        class="h-7 w-7 p-0"
+        disabled={currentPage >= totalPages}
+        onclick={nextPage}
+        title="Next Page"
+      >
+        <ChevronRight class="h-4 w-4" />
+      </Button>
+    </div>
+
+    <!-- Zoom & Rotate Actions -->
+    <div class="flex items-center gap-1">
+      <Button variant="ghost" size="sm" class="h-7 w-7 p-0" onclick={zoomOut} title="Zoom Out">
+        <ZoomOut class="h-3.5 w-3.5" />
+      </Button>
+
+      <span class="font-mono text-[11px] text-muted-foreground w-12 text-center">{zoomLevel}%</span>
+
+      <Button variant="ghost" size="sm" class="h-7 w-7 p-0" onclick={zoomIn} title="Zoom In">
+        <ZoomIn class="h-3.5 w-3.5" />
+      </Button>
+
+      <Button variant="ghost" size="sm" class="h-7 w-7 p-0" onclick={rotate} title="Rotate 90°">
+        <RotateCw class="h-3.5 w-3.5" />
+      </Button>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        class="h-7 w-7 p-0"
+        onclick={() => { isFullscreen = !isFullscreen; }}
+        title={isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
+      >
+        <Maximize2 class="h-3.5 w-3.5" />
+      </Button>
+    </div>
+
+    <!-- Export & Print -->
+    <div class="flex items-center gap-1.5">
+      <Button variant="outline" size="sm" class="h-7 text-xs gap-1" onclick={handlePrint}>
+        <Printer class="h-3.5 w-3.5" />
+        Print
+      </Button>
+
+      <Button size="sm" class="h-7 text-xs gap-1" onclick={handleDownload}>
+        <Download class="h-3.5 w-3.5" />
+        Download
+      </Button>
+    </div>
+  </div>
+
+  <!-- Document Viewport -->
+  <div class="flex-1 overflow-auto bg-muted/40 p-6 flex items-center justify-center min-h-[400px]">
+    <div
+      class="relative bg-card rounded-lg shadow-md border border-border/80 transition-transform duration-200 overflow-hidden"
+      style={`transform: scale(${zoomLevel / 100}) rotate(${rotation}deg); transform-origin: center center; width: 595px; min-height: 842px;`}
+    >
+      {#if fileUrl}
+        <iframe
+          src={fileUrl}
+          title={fileName}
+          class="w-full h-[842px] border-0"
+        ></iframe>
+      {:else}
+        <!-- Simulated Document Paper -->
+        <div class="p-12 space-y-6 text-foreground">
+          <div class="border-b border-border/60 pb-4 flex justify-between items-start">
+            <div>
+              <h2 class="text-base font-bold tracking-tight">{fileName.replace(/\.[^/.]+$/, '')}</h2>
+              <p class="text-[11px] text-muted-foreground">Document Sheet Reference • Page {currentPage}</p>
+            </div>
+            <Badge variant="outline" class="font-mono text-[10px]">P.{currentPage}</Badge>
+          </div>
+
+          <div class="space-y-3 text-muted-foreground leading-relaxed text-xs">
+            <p>This is a rendered document preview surface. In production, provide a valid PDF / image URL via the <code>fileUrl</code> prop to stream direct binary pages.</p>
+            <p>The document supports electronic stamps, digital approval watermarks, interactive zooming, rotation and multi-page flipping.</p>
+          </div>
+
+          <div class="my-8 p-4 rounded-lg bg-muted/30 border border-border/60 space-y-2">
+            <div class="font-semibold text-foreground">Terms & Conditions of Execution</div>
+            <div class="text-[11px] text-muted-foreground">All parties acknowledge the contractual stipulations herein outlined and agreed upon via authenticated electronic signatures.</div>
+          </div>
+        </div>
+      {/if}
+
+      <!-- Electronic Stamp Overlays -->
+      {#each pageStamps as stamp (stamp.id)}
+        <div
+          class={cn(
+            'absolute z-20 px-3 py-1.5 rounded-md border-2 font-bold text-xs uppercase tracking-wider shadow-sm rotate-[-12deg] pointer-events-none select-none',
+            getStampVariant(stamp.status)
+          )}
+          style={`left: ${stamp.x}%; top: ${stamp.y}%;`}
+        >
+          {stamp.text}
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>

package/dist/components/PdfDocumentViewer.svelte.d.ts

@@ -0,0 +1,22 @@
+export interface DocumentStamp {
+    id: string;
+    text: string;
+    page: number;
+    x: number;
+    y: number;
+    status?: 'approved' | 'rejected' | 'confidential' | 'reviewed';
+}
+interface Props {
+    fileUrl?: string;
+    fileName?: string;
+    totalPages?: number;
+    currentPage?: number;
+    stamps?: DocumentStamp[];
+    onpagechange?: (page: number) => void;
+    ondownload?: () => void;
+    onprint?: () => void;
+    class?: string;
+}
+declare const PdfDocumentViewer: import("svelte").Component<Props, {}, "currentPage">;
+type PdfDocumentViewer = ReturnType<typeof PdfDocumentViewer>;
+export default PdfDocumentViewer;

package/dist/components/PivotTable.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+
+  export type AggregationFn = 'sum' | 'count' | 'avg' | 'min' | 'max';
+
+  interface Props {
+    data: Record<string, unknown>[];
+    rowField: string;
+    rowLabel?: string;
+    columnField: string;
+    columnLabel?: string;
+    valueField: string;
+    valueLabel?: string;
+    aggregator?: AggregationFn;
+    formatValue?: (val: number) => string;
+    class?: string;
+  }
+
+  let {
+    data = [],
+    rowField,
+    rowLabel = rowField,
+    columnField,
+    columnLabel = columnField,
+    valueField,
+    valueLabel = valueField,
+    aggregator = 'sum',
+    formatValue = (v: number) => v.toLocaleString(undefined, { maximumFractionDigits: 2 }),
+    class: className = '',
+  }: Props = $props();
+
+  const distinctRowValues = $derived(
+    Array.from(new Set(data.map((d) => String(d[rowField] ?? '—')))).sort()
+  );
+
+  const distinctColValues = $derived(
+    Array.from(new Set(data.map((d) => String(d[columnField] ?? '—')))).sort()
+  );
+
+  function computeAgg(vals: number[]): number {
+    if (vals.length === 0) return 0;
+    if (aggregator === 'count') return vals.length;
+    if (aggregator === 'sum') return vals.reduce((a, b) => a + b, 0);
+    if (aggregator === 'avg') return vals.reduce((a, b) => a + b, 0) / vals.length;
+    if (aggregator === 'min') return Math.min(...vals);
+    if (aggregator === 'max') return Math.max(...vals);
+    return 0;
+  }
+
+  const pivotMatrix = $derived(() => {
+    const map = new Map<string, number[]>();
+    for (const item of data) {
+      const r = String(item[rowField] ?? '—');
+      const c = String(item[columnField] ?? '—');
+      const key = `${r}:::${c}`;
+      const num = Number(item[valueField]) || 0;
+      const existing = map.get(key);
+      if (existing) {
+        existing.push(num);
+      } else {
+        map.set(key, [num]);
+      }
+    }
+    return map;
+  });
+
+  function getCellValue(r: string, c: string): number {
+    const key = `${r}:::${c}`;
+    const vals = pivotMatrix().get(key) ?? [];
+    return computeAgg(vals);
+  }
+
+  function getRowTotal(r: string): number {
+    const vals = data
+      .filter((d) => String(d[rowField] ?? '—') === r)
+      .map((d) => Number(d[valueField]) || 0);
+    return computeAgg(vals);
+  }
+
+  function getColTotal(c: string): number {
+    const vals = data
+      .filter((d) => String(d[columnField] ?? '—') === c)
+      .map((d) => Number(d[valueField]) || 0);
+    return computeAgg(vals);
+  }
+
+  const grandTotal = $derived(
+    computeAgg(data.map((d) => Number(d[valueField]) || 0))
+  );
+</script>
+
+<div class={cn('rounded-xl border border-border bg-card p-4 shadow-xs text-xs space-y-3', className)}>
+  <div class="flex items-center justify-between gap-2 pb-2 border-b border-border/60">
+    <div class="font-semibold text-foreground">
+      Pivot Analysis <span class="text-muted-foreground font-normal">({rowLabel} × {columnLabel})</span>
+    </div>
+    <div class="text-muted-foreground">
+      Aggregator: <strong class="text-primary uppercase">{aggregator}</strong> ({valueLabel})
+    </div>
+  </div>
+
+  <div class="overflow-x-auto rounded-lg border border-border/60">
+    <table class="w-full text-right border-collapse">
+      <thead class="bg-muted/40 font-semibold text-muted-foreground border-b border-border/60">
+        <tr>
+          <th class="px-3 py-2.5 text-left bg-muted/60">{rowLabel} \ {columnLabel}</th>
+          {#each distinctColValues as col (col)}
+            <th class="px-3 py-2.5 font-semibold text-foreground">{col}</th>
+          {/each}
+          <th class="px-3 py-2.5 bg-muted/60 font-semibold text-foreground">Total</th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-border/40 font-mono">
+        {#each distinctRowValues as row (row)}
+          <tr class="hover:bg-muted/20 transition-colors">
+            <td class="px-3 py-2 text-left font-medium text-foreground bg-muted/20 font-sans">{row}</td>
+            {#each distinctColValues as col (col)}
+              {@const val = getCellValue(row, col)}
+              <td class={cn('px-3 py-2', val === 0 ? 'text-muted-foreground/40' : 'text-foreground')}>
+                {formatValue(val)}
+              </td>
+            {/each}
+            <td class="px-3 py-2 font-semibold text-foreground bg-muted/20">
+              {formatValue(getRowTotal(row))}
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+      <tfoot class="bg-muted/60 font-semibold font-mono border-t-2 border-border text-foreground">
+        <tr>
+          <td class="px-3 py-2.5 text-left font-sans">Grand Total</td>
+          {#each distinctColValues as col (col)}
+            <td class="px-3 py-2.5">{formatValue(getColTotal(col))}</td>
+          {/each}
+          <td class="px-3 py-2.5 text-primary">{formatValue(grandTotal)}</td>
+        </tr>
+      </tfoot>
+    </table>
+  </div>
+</div>

package/dist/components/PivotTable.svelte.d.ts

@@ -0,0 +1,16 @@
+export type AggregationFn = 'sum' | 'count' | 'avg' | 'min' | 'max';
+interface Props {
+    data: Record<string, unknown>[];
+    rowField: string;
+    rowLabel?: string;
+    columnField: string;
+    columnLabel?: string;
+    valueField: string;
+    valueLabel?: string;
+    aggregator?: AggregationFn;
+    formatValue?: (val: number) => string;
+    class?: string;
+}
+declare const PivotTable: import("svelte").Component<Props, {}, "">;
+type PivotTable = ReturnType<typeof PivotTable>;
+export default PivotTable;