@futo-org/backups-orchestrator-ui 0.1.71

package/dist/components/test/dashboard/BackupStats.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import type { LocalRepositoryDto } from "../../../fetch-client";
+  import { formatDuration } from "../../../utils/format";
+  import { Card, CardBody, getByteUnitString, Icon, Stack } from "@immich/ui";
+  import { mdiArrowDown, mdiArrowUp } from "@mdi/js";
+  import Gauge from "../../ui/VisualisationGauge.svelte";
+
+  type Props = {
+    repositories: LocalRepositoryDto[];
+    compact?: boolean;
+  };
+
+  const { repositories, compact = true }: Props = $props();
+
+  const durations = $derived(
+    repositories
+      .map((repo) => repo.metrics?.lastBackupDuration)
+      .filter((duration): duration is number => duration != null),
+  );
+
+  const avgBackupTime = $derived(
+    durations.length > 0
+      ? durations.reduce((sum, duration) => sum + duration, 0) /
+          durations.length
+      : undefined,
+  );
+
+  const dailyBackupTime = $derived(
+    durations.length > 0
+      ? durations.reduce((sum, duration) => sum + duration, 0)
+      : undefined,
+  );
+
+  const totalStored = $derived(
+    repositories.reduce((sum, repo) => sum + (repo.metrics?.sizeBytes ?? 0), 0),
+  );
+</script>
+
+{#snippet costSubtitle()}
+  Since March 1
+{/snippet}
+
+{#snippet estimateSubtitle()}
+  <Icon icon={mdiArrowDown} class="inline text-success-500" /> $2.52 less than last
+  month
+{/snippet}
+
+{#snippet totalStoredSubtitle()}
+  <Icon icon={mdiArrowUp} class="inline text-info-500" />
+  {getByteUnitString(320_000_000_000)} in 24h
+{/snippet}
+
+{#if compact}
+  <Card>
+    <CardBody>
+      <div class="grid grid-cols-2 gap-5 sm:grid-cols-3">
+        <Gauge
+          title="Avg. Backup Time"
+          content={avgBackupTime != null ? formatDuration(avgBackupTime) : "—"}
+        />
+        <Gauge
+          title="Daily Backup Time"
+          content={dailyBackupTime != null
+            ? formatDuration(dailyBackupTime)
+            : "—"}
+        />
+        <Gauge title="Total Stored" content={getByteUnitString(totalStored)} />
+      </div>
+    </CardBody>
+  </Card>
+{:else}
+  <Card>
+    <CardBody>
+      <Stack>
+        <div class="grid grid-cols-2 gap-5 sm:grid-cols-3">
+          <Gauge
+            title="Cost This Period"
+            content="$2.43"
+            subtitle={costSubtitle}
+          />
+          <Gauge
+            title="Monthly Estimate"
+            content="$13.52 /mo"
+            subtitle={estimateSubtitle}
+          />
+          <Gauge
+            title="Total Stored"
+            content={getByteUnitString(totalStored)}
+            subtitle={totalStoredSubtitle}
+          />
+        </div>
+
+        <hr
+          style="border: none; border-top: 1px solid var(--immich-ui-default-border);"
+        />
+
+        <div class="grid grid-cols-2 gap-5 opacity-80 sm:grid-cols-3">
+          <Gauge
+            compact
+            title="Avg. Backup Time"
+            content={avgBackupTime != null
+              ? formatDuration(avgBackupTime)
+              : "—"}
+          />
+          <Gauge
+            compact
+            title="Daily Backup Time"
+            content={dailyBackupTime != null
+              ? formatDuration(dailyBackupTime)
+              : "—"}
+          />
+          <Gauge compact title="Space Saved" content="4.7x" />
+        </div>
+      </Stack>
+    </CardBody>
+  </Card>
+{/if}

package/dist/components/test/dashboard/BackupStats.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { LocalRepositoryDto } from "../../../fetch-client";
+type Props = {
+    repositories: LocalRepositoryDto[];
+    compact?: boolean;
+};
+declare const BackupStats: import("svelte").Component<Props, {}, "">;
+type BackupStats = ReturnType<typeof BackupStats>;
+export default BackupStats;

package/dist/components/test/dashboard/Dashboard.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { options } from "../../../options";
+  import { getReadableErrorMessage } from "../../../utils/handle-error";
+  import {
+    Alert,
+    Button,
+    Card,
+    CardBody,
+    Icon,
+    LoadingSpinner,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import { mdiBackupRestore } from "@mdi/js";
+
+  import {
+    useRepositories,
+    useRepositoryEventHandler,
+  } from "../../../services/repository.service";
+  import OnEvents from "../../util/OnEvents.svelte";
+  import ActiveJobs from "./ActiveJobs.svelte";
+  import BackupHealth from "./BackupHealth.svelte";
+  import BackupStats from "./BackupStats.svelte";
+  import RecentBackups from "./RecentBackups.svelte";
+
+  type Props = {
+    onNavigate?: (route: string) => void;
+  };
+
+  const { advanced } = options;
+
+  const { onNavigate }: Props = $props();
+
+  const query = useRepositories();
+  const { onRepositoryCreate, onRepositoryUpdate } =
+    useRepositoryEventHandler();
+</script>
+
+<OnEvents {onRepositoryCreate} {onRepositoryUpdate} />
+
+{#if query.isLoading}
+  <LoadingSpinner />
+{:else if query.isError}
+  <Alert color="danger">{getReadableErrorMessage(query.error)}</Alert>
+{:else if query.isSuccess && query.data.length === 0}
+  <Card>
+    <CardBody>
+      <div class="flex flex-col items-center gap-4 py-8">
+        <Icon icon={mdiBackupRestore} size="48" color="muted" />
+        <Stack class="items-center gap-1">
+          <Text size="large">No backups configured yet</Text>
+          <Text color="secondary" class="text-center max-w-md"
+            >Once you set up a backup, this dashboard will show its health,
+            schedule, and storage usage at a glance.</Text
+          >
+        </Stack>
+        {#if onNavigate}
+          <Button color="primary" onclick={() => onNavigate("backups")}
+            >Set up your first backup</Button
+          >
+        {/if}
+      </div>
+    </CardBody>
+  </Card>
+{:else if query.isSuccess}
+  <BackupHealth repositories={query.data} />
+
+  <BackupStats repositories={query.data} />
+
+  <ActiveJobs />
+
+  <RecentBackups
+    repositories={query.data}
+    onNavigate={onNavigate ? () => onNavigate("backups") : undefined}
+  />
+{/if}

package/dist/components/test/dashboard/Dashboard.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    onNavigate?: (route: string) => void;
+};
+declare const Dashboard: import("svelte").Component<Props, {}, "">;
+type Dashboard = ReturnType<typeof Dashboard>;
+export default Dashboard;

package/dist/components/test/dashboard/RecentBackups.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import RelativeTime from "../../util/RelativeTime.svelte";
+  import type { LocalRepositoryDto } from "../../../fetch-client";
+  import { formatDuration } from "../../../utils/format";
+  import {
+    Button,
+    Card,
+    CardBody,
+    HStack,
+    Icon,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import {
+    mdiAlertCircleOutline,
+    mdiCheckCircleOutline,
+    mdiChevronRight,
+  } from "@mdi/js";
+
+  type Props = {
+    repositories: LocalRepositoryDto[];
+    onNavigate?: () => void;
+  };
+
+  const { repositories, onNavigate }: Props = $props();
+
+  const recentBackups = $derived(
+    repositories
+      .filter((repo) => repo.metrics.lastBackup)
+      .toSorted(
+        (a, b) =>
+          +new Date(b.metrics.lastBackup!) - +new Date(a.metrics.lastBackup!),
+      )
+      .slice(0, 5),
+  );
+</script>
+
+<Card>
+  <CardBody>
+    <Stack>
+      <HStack class="items-center justify-between">
+        <Text size="large">Recent Backups</Text>
+        {#if onNavigate && recentBackups.length > 0}
+          <Button size="small" variant="outline" onclick={onNavigate}>
+            View all
+            <Icon icon={mdiChevronRight} size="16" />
+          </Button>
+        {/if}
+      </HStack>
+
+      {#if recentBackups.length === 0}
+        <Text color="secondary">
+          Completed backups will appear here once your first backup runs.
+        </Text>
+      {:else}
+        <div>
+          {#each recentBackups as repo, index (repo.id)}
+            {#if index > 0}
+              <hr
+                style="border: none; border-top: 1px solid var(--immich-ui-default-border);"
+              />
+            {/if}
+            <HStack class="items-center justify-between py-2">
+              <HStack class="items-center gap-2">
+                {#if repo.metrics.lastBackup === repo.metrics.lastSuccessfulBackup}
+                  <Icon
+                    icon={mdiCheckCircleOutline}
+                    size="16"
+                    class="text-green-500"
+                  />
+                {:else}
+                  <Icon
+                    icon={mdiAlertCircleOutline}
+                    size="16"
+                    class="text-danger-500"
+                  />
+                {/if}
+                <Text class="text-sm">{repo.name}</Text>
+              </HStack>
+              <HStack class="items-center gap-2">
+                {#if repo.metrics.lastBackupDuration != null}
+                  <Text color="secondary" class="text-xs">
+                    {formatDuration(repo.metrics.lastBackupDuration)}
+                  </Text>
+                {/if}
+                <Text color="secondary" class="text-xs">
+                  <RelativeTime time={repo.metrics.lastBackup!} />
+                </Text>
+              </HStack>
+            </HStack>
+          {/each}
+        </div>
+      {/if}
+    </Stack>
+  </CardBody>
+</Card>

package/dist/components/test/dashboard/RecentBackups.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { LocalRepositoryDto } from "../../../fetch-client";
+type Props = {
+    repositories: LocalRepositoryDto[];
+    onNavigate?: () => void;
+};
+declare const RecentBackups: import("svelte").Component<Props, {}, "">;
+type RecentBackups = ReturnType<typeof RecentBackups>;
+export default RecentBackups;

package/dist/components/ui/PageLayout.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import { options } from "../../options";
+  import {
+    Button,
+    ContextMenuButton,
+    HStack,
+    type ActionItem,
+  } from "@immich/ui";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    title?: string;
+    actions?: ActionItem[];
+    children?: Snippet;
+  };
+
+  const { title, actions = [], children }: Props = $props();
+  const { demoPadding } = options;
+</script>
+
+<main class="absolute inset-0">
+  {#if title || actions.length > 0}
+    <div
+      class="absolute top-0 left-0 flex h-16 w-full place-items-center justify-between border-b p-2 text-dark"
+    >
+      <div class="flex gap-2 items-center">
+        {#if title}
+          <div class="outline-none pe-8">{title}</div>
+        {/if}
+      </div>
+
+      {#if actions.length > 0}
+        <div class="hidden md:block">
+          <HStack gap={0}>
+            {#each actions as action, index (index)}
+              {#if !action.$if || action.$if?.()}
+                <Button
+                  variant="ghost"
+                  size="small"
+                  color={action.color ?? "secondary"}
+                  leadingIcon={action.icon}
+                  onclick={() => action.onAction(action)}
+                >
+                  {action.title}
+                </Button>
+              {/if}
+            {/each}
+          </HStack>
+        </div>
+
+        <ContextMenuButton
+          aria-label="Open"
+          items={actions}
+          class="md:hidden"
+        />
+      {/if}
+    </div>
+  {/if}
+
+  <div
+    class="absolute left-0 w-full overflow-y-auto {title || actions.length > 0
+      ? 'top-16 h-[calc(100%-4rem)]'
+      : 'top-0 h-full'} {$demoPadding ? 'p-4' : ''}"
+  >
+    {@render children?.()}
+  </div>
+</main>

package/dist/components/ui/PageLayout.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type ActionItem } from "@immich/ui";
+import type { Snippet } from "svelte";
+type Props = {
+    title?: string;
+    actions?: ActionItem[];
+    children?: Snippet;
+};
+declare const PageLayout: import("svelte").Component<Props, {}, "">;
+type PageLayout = ReturnType<typeof PageLayout>;
+export default PageLayout;

package/dist/components/ui/PathListField.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import StackList from "./StackList.svelte";
+  import type { FilesystemListingResponseDto } from "../../fetch-client";
+  import {
+    Button,
+    HStack,
+    IconButton,
+    modalManager,
+    Text,
+  } from "@immich/ui";
+  import { mdiClose } from "@mdi/js";
+  import type { Snippet } from "svelte";
+  import type { SvelteSet } from "svelte/reactivity";
+  import PathPickerModal from "./PathPickerModal.svelte";
+
+  type Props = {
+    paths: SvelteSet<string>;
+    label?: Snippet;
+    empty?: Snippet;
+    addLabel?: string;
+    manageLabel?: string;
+    pickerTitle?: string;
+    pickerDescription?: string;
+    foldersOnly?: boolean;
+    handleGetListing?: (path?: string) => Promise<FilesystemListingResponseDto>;
+  };
+
+  let {
+    paths,
+    label,
+    empty,
+    addLabel = "Manage paths",
+    manageLabel = "Manage paths",
+    pickerTitle = "Choose paths",
+    pickerDescription,
+    foldersOnly = false,
+    handleGetListing,
+  }: Props = $props();
+
+  const openPicker = () =>
+    modalManager.show(PathPickerModal, {
+      title: pickerTitle,
+      description: pickerDescription,
+      foldersOnly,
+      initial: [...paths],
+      handleGetListing,
+      onSubmit: (next) => {
+        paths.clear();
+        for (const path of next) paths.add(path);
+      },
+    });
+</script>
+
+<StackList>
+  {#snippet title()}
+    {@render label?.()}
+  {/snippet}
+
+  {#if paths.size > 0}
+    {#each [...paths] as path (path)}
+      <HStack gap={2} class="px-4 py-3">
+        <Text class="grow truncate" title={path}>{path}</Text>
+        <IconButton
+          icon={mdiClose}
+          aria-label="Remove"
+          size="tiny"
+          variant="ghost"
+          onclick={() => paths.delete(path)}
+        />
+      </HStack>
+    {/each}
+  {:else if empty}
+    <HStack class="px-4 py-3">
+      <Text color="secondary">{@render empty()}</Text>
+    </HStack>
+  {/if}
+
+  <HStack class="px-4 py-2">
+    <Button size="small" variant="ghost" onclick={openPicker}>
+      {paths.size > 0 ? addLabel : manageLabel}
+    </Button>
+  </HStack>
+</StackList>

package/dist/components/ui/PathListField.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { FilesystemListingResponseDto } from "../../fetch-client";
+import type { Snippet } from "svelte";
+import type { SvelteSet } from "svelte/reactivity";
+type Props = {
+    paths: SvelteSet<string>;
+    label?: Snippet;
+    empty?: Snippet;
+    addLabel?: string;
+    manageLabel?: string;
+    pickerTitle?: string;
+    pickerDescription?: string;
+    foldersOnly?: boolean;
+    handleGetListing?: (path?: string) => Promise<FilesystemListingResponseDto>;
+};
+declare const PathListField: import("svelte").Component<Props, {}, "">;
+type PathListField = ReturnType<typeof PathListField>;
+export default PathListField;

package/dist/components/ui/PathPickerField.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import PathPickerModal from "./PathPickerModal.svelte";
+  import type { FilesystemListingResponseDto } from "../../fetch-client";
+  import {
+    Heading,
+    HStack,
+    IconButton,
+    Input,
+    modalManager,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import { mdiFolder } from "@mdi/js";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    value: string;
+    title?: Snippet;
+    description?: Snippet;
+    placeholder?: string;
+    pickerTitle?: string;
+    pickerDescription?: string;
+    foldersOnly?: boolean;
+    handleGetListing?: (path?: string) => Promise<FilesystemListingResponseDto>;
+  };
+
+  let {
+    value = $bindable(""),
+    title,
+    description,
+    placeholder = "/path/to/folder",
+    pickerTitle = "Choose folder",
+    pickerDescription,
+    foldersOnly = true,
+    handleGetListing,
+  }: Props = $props();
+
+  const browse = () =>
+    modalManager.open(PathPickerModal, {
+      title: pickerTitle,
+      description: pickerDescription,
+      foldersOnly,
+      single: true,
+      handleGetListing,
+      onSubmit: ([path]) => {
+        if (path) {
+          value = path;
+        }
+      },
+    });
+</script>
+
+<Stack gap={2}>
+  {#if title || description}
+    <Stack gap={0}>
+      {#if title}
+        <Heading class="px-1" size="tiny">{@render title()}</Heading>
+      {/if}
+      {#if description}
+        <Text color="secondary" size="small">{@render description()}</Text>
+      {/if}
+    </Stack>
+  {/if}
+  <HStack gap={2}>
+    <Input bind:value {placeholder} />
+    <IconButton
+      icon={mdiFolder}
+      aria-label="Choose folder"
+      variant="outline"
+      color="secondary"
+      onclick={browse}
+    />
+  </HStack>
+</Stack>

package/dist/components/ui/PathPickerField.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { FilesystemListingResponseDto } from "../../fetch-client";
+import type { Snippet } from "svelte";
+type Props = {
+    value: string;
+    title?: Snippet;
+    description?: Snippet;
+    placeholder?: string;
+    pickerTitle?: string;
+    pickerDescription?: string;
+    foldersOnly?: boolean;
+    handleGetListing?: (path?: string) => Promise<FilesystemListingResponseDto>;
+};
+declare const PathPickerField: import("svelte").Component<Props, {}, "value">;
+type PathPickerField = ReturnType<typeof PathPickerField>;
+export default PathPickerField;