add: delete actions for device + slightly better ui
This commit is contained in:
user
@@ -1,17 +1,21 @@
|
||||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
import Icon from "$lib/components/atoms/icon.svelte";
|
||||
import * as AlertDialog from "$lib/components/ui/alert-dialog/index.js";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { buttonVariants } from "$lib/components/ui/button";
|
||||
import * as Card from "$lib/components/ui/card";
|
||||
import { Input } from "$lib/components/ui/input";
|
||||
import * as Table from "$lib/components/ui/table";
|
||||
import MaxWidthWrapper from "$lib/components/molecules/max-width-wrapper.svelte";
|
||||
import { mainNavTree } from "$lib/core/constants";
|
||||
import { filesVM } from "$lib/domains/files/files.vm.svelte";
|
||||
import { mobileVM } from "$lib/domains/mobile/mobile.vm.svelte";
|
||||
import { breadcrumbs } from "$lib/global.stores";
|
||||
import Smartphone from "@lucide/svelte/icons/smartphone";
|
||||
import RefreshCw from "@lucide/svelte/icons/refresh-cw";
|
||||
import Search from "@lucide/svelte/icons/search";
|
||||
import Trash2 from "@lucide/svelte/icons/trash-2";
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
|
||||
breadcrumbs.set([mainNavTree[0]]);
|
||||
@@ -37,18 +41,32 @@
|
||||
{mobileVM.devicesTotal} total
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => void mobileVM.refreshDevices()}
|
||||
disabled={mobileVM.devicesLoading}
|
||||
>
|
||||
<Icon
|
||||
icon={RefreshCw}
|
||||
cls={`h-4 w-4 mr-2 ${mobileVM.devicesLoading ? "animate-spin" : ""}`}
|
||||
/>
|
||||
Refresh
|
||||
</Button>
|
||||
<div class="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => void filesVM.cleanupDanglingFiles()}
|
||||
disabled={filesVM.cleanupLoading}
|
||||
>
|
||||
<Icon
|
||||
icon={Trash2}
|
||||
cls={`h-4 w-4 mr-2 ${filesVM.cleanupLoading ? "animate-spin" : ""}`}
|
||||
/>
|
||||
Cleanup Storage
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => void mobileVM.refreshDevices()}
|
||||
disabled={mobileVM.devicesLoading}
|
||||
>
|
||||
<Icon
|
||||
icon={RefreshCw}
|
||||
cls={`h-4 w-4 mr-2 ${mobileVM.devicesLoading ? "animate-spin" : ""}`}
|
||||
/>
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative mt-3 max-w-sm">
|
||||
@@ -82,6 +100,7 @@
|
||||
<Table.Head>Android</Table.Head>
|
||||
<Table.Head>Created</Table.Head>
|
||||
<Table.Head>Last Ping</Table.Head>
|
||||
<Table.Head>Actions</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
@@ -106,6 +125,51 @@
|
||||
<Table.Cell>
|
||||
{mobileVM.formatLastPing(device.lastPingAt)}
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<AlertDialog.Root>
|
||||
<AlertDialog.Trigger
|
||||
class={buttonVariants({
|
||||
variant: "destructive",
|
||||
size: "sm",
|
||||
})}
|
||||
disabled={mobileVM.deletingDeviceId ===
|
||||
device.id}
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Icon
|
||||
icon={Trash2}
|
||||
cls="h-4 w-4"
|
||||
/>
|
||||
Delete
|
||||
</AlertDialog.Trigger>
|
||||
<AlertDialog.Content>
|
||||
<AlertDialog.Header>
|
||||
<AlertDialog.Title>
|
||||
Delete device?
|
||||
</AlertDialog.Title>
|
||||
<AlertDialog.Description>
|
||||
This deletes the device and all related SMS/media data.
|
||||
Files in storage linked to this device are also removed.
|
||||
</AlertDialog.Description>
|
||||
</AlertDialog.Header>
|
||||
<AlertDialog.Footer>
|
||||
<AlertDialog.Cancel>
|
||||
Cancel
|
||||
</AlertDialog.Cancel>
|
||||
<AlertDialog.Action
|
||||
onclick={async (e) => {
|
||||
e.stopPropagation();
|
||||
await mobileVM.deleteDevice(
|
||||
device.id,
|
||||
);
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</AlertDialog.Action>
|
||||
</AlertDialog.Footer>
|
||||
</AlertDialog.Content>
|
||||
</AlertDialog.Root>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
import { page } from "$app/state";
|
||||
import * as AlertDialog from "$lib/components/ui/alert-dialog/index.js";
|
||||
import Icon from "$lib/components/atoms/icon.svelte";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { Button, buttonVariants } from "$lib/components/ui/button";
|
||||
import * as Card from "$lib/components/ui/card";
|
||||
import * as Dialog from "$lib/components/ui/dialog/index.js";
|
||||
import * as Table from "$lib/components/ui/table";
|
||||
import * as Tabs from "$lib/components/ui/tabs/index.js";
|
||||
import type { MobileMediaAsset } from "@pkg/logic/domains/mobile/data";
|
||||
import { mainNavTree } from "$lib/core/constants";
|
||||
import { mobileVM } from "$lib/domains/mobile/mobile.vm.svelte";
|
||||
import { breadcrumbs } from "$lib/global.stores";
|
||||
@@ -15,7 +16,9 @@
|
||||
import ImageIcon from "@lucide/svelte/icons/image";
|
||||
import MessageSquare from "@lucide/svelte/icons/message-square";
|
||||
import Smartphone from "@lucide/svelte/icons/smartphone";
|
||||
import Trash2 from "@lucide/svelte/icons/trash-2";
|
||||
import VideoIcon from "@lucide/svelte/icons/video";
|
||||
import type { MobileMediaAsset } from "@pkg/logic/domains/mobile/data";
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
|
||||
let selectedTab = $state("sms");
|
||||
@@ -35,7 +38,8 @@
|
||||
if (!size || size <= 0) return "-";
|
||||
if (size < 1024) return `${size} B`;
|
||||
if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
|
||||
if (size < 1024 * 1024 * 1024) return `${(size / (1024 * 1024)).toFixed(1)} MB`;
|
||||
if (size < 1024 * 1024 * 1024)
|
||||
return `${(size / (1024 * 1024)).toFixed(1)} MB`;
|
||||
return `${(size / (1024 * 1024 * 1024)).toFixed(1)} GB`;
|
||||
}
|
||||
|
||||
@@ -65,11 +69,53 @@
|
||||
</script>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" href="/dashboard">
|
||||
<Icon icon={ArrowLeft} cls="h-4 w-4 mr-1" />
|
||||
Back
|
||||
</Button>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" href="/dashboard">
|
||||
<Icon icon={ArrowLeft} cls="h-4 w-4 mr-1" />
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
{#if mobileVM.selectedDeviceDetail}
|
||||
<AlertDialog.Root>
|
||||
<AlertDialog.Trigger
|
||||
class={buttonVariants({
|
||||
variant: "destructive",
|
||||
size: "sm",
|
||||
})}
|
||||
disabled={mobileVM.deletingDeviceId ===
|
||||
mobileVM.selectedDeviceDetail.device.id}
|
||||
>
|
||||
<Icon icon={Trash2} cls="h-4 w-4" />
|
||||
Delete Device
|
||||
</AlertDialog.Trigger>
|
||||
<AlertDialog.Content>
|
||||
<AlertDialog.Header>
|
||||
<AlertDialog.Title>Delete device?</AlertDialog.Title>
|
||||
<AlertDialog.Description>
|
||||
This permanently removes the device with all SMS/media entries and
|
||||
related files in storage.
|
||||
</AlertDialog.Description>
|
||||
</AlertDialog.Header>
|
||||
<AlertDialog.Footer>
|
||||
<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
|
||||
<AlertDialog.Action
|
||||
onclick={async () => {
|
||||
if (!mobileVM.selectedDeviceDetail) return;
|
||||
const deleted = await mobileVM.deleteDevice(
|
||||
mobileVM.selectedDeviceDetail.device.id,
|
||||
);
|
||||
if (deleted) {
|
||||
await goto("/dashboard");
|
||||
}
|
||||
}}
|
||||
>
|
||||
Delete Device
|
||||
</AlertDialog.Action>
|
||||
</AlertDialog.Footer>
|
||||
</AlertDialog.Content>
|
||||
</AlertDialog.Root>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<Card.Root>
|
||||
@@ -83,38 +129,75 @@
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
{#if mobileVM.selectedDeviceDetail}
|
||||
<div class="grid grid-cols-1 gap-3 text-sm md:grid-cols-2">
|
||||
<div>
|
||||
<span class="text-muted-foreground">External ID:</span>
|
||||
<div class="font-mono">
|
||||
{mobileVM.selectedDeviceDetail.device.externalDeviceId}
|
||||
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||||
<div class="rounded-xl border bg-muted/30 p-4 lg:col-span-2">
|
||||
<div class="flex flex-wrap items-start justify-between gap-3">
|
||||
<div>
|
||||
<p class="text-lg font-semibold">
|
||||
{mobileVM.selectedDeviceDetail.device.name}
|
||||
</p>
|
||||
<p class="font-mono text-xs text-muted-foreground">
|
||||
{mobileVM.selectedDeviceDetail.device.externalDeviceId}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-right text-xs text-muted-foreground">
|
||||
<p>Created</p>
|
||||
<p class="text-foreground">
|
||||
{new Date(
|
||||
mobileVM.selectedDeviceDetail.device.createdAt,
|
||||
).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 grid grid-cols-1 gap-3 text-sm sm:grid-cols-2">
|
||||
<div>
|
||||
<p class="text-xs text-muted-foreground">Manufacturer</p>
|
||||
<p class="font-medium">
|
||||
{mobileVM.selectedDeviceDetail.device.manufacturer}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-muted-foreground">Model</p>
|
||||
<p class="font-medium">
|
||||
{mobileVM.selectedDeviceDetail.device.model}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-muted-foreground">Android Version</p>
|
||||
<p class="font-medium">
|
||||
{mobileVM.selectedDeviceDetail.device.androidVersion}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-muted-foreground">Last Ping</p>
|
||||
<p class="font-medium">
|
||||
{mobileVM.formatLastPing(
|
||||
mobileVM.selectedDeviceDetail.device.lastPingAt,
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-muted-foreground">Last Ping:</span>
|
||||
<div>
|
||||
{mobileVM.formatLastPing(
|
||||
mobileVM.selectedDeviceDetail.device.lastPingAt,
|
||||
)}
|
||||
|
||||
<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
|
||||
<div class="rounded-xl border bg-background p-4">
|
||||
<div class="flex items-center gap-2 text-muted-foreground">
|
||||
<Icon icon={MessageSquare} cls="h-4 w-4" />
|
||||
<p class="text-xs">Total SMS</p>
|
||||
</div>
|
||||
<p class="mt-2 text-2xl font-semibold">
|
||||
{mobileVM.selectedDeviceDetail.smsCount}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-muted-foreground">Manufacturer:</span>
|
||||
<div>{mobileVM.selectedDeviceDetail.device.manufacturer}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-muted-foreground">Model:</span>
|
||||
<div>{mobileVM.selectedDeviceDetail.device.model}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-muted-foreground">Android:</span>
|
||||
<div>{mobileVM.selectedDeviceDetail.device.androidVersion}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-muted-foreground">Counts:</span>
|
||||
<div>
|
||||
SMS: {mobileVM.selectedDeviceDetail.smsCount}, Media:
|
||||
{mobileVM.selectedDeviceDetail.mediaCount}
|
||||
<div class="rounded-xl border bg-background p-4">
|
||||
<div class="flex items-center gap-2 text-muted-foreground">
|
||||
<Icon icon={ImageIcon} cls="h-4 w-4" />
|
||||
<p class="text-xs">Total Media</p>
|
||||
</div>
|
||||
<p class="mt-2 text-2xl font-semibold">
|
||||
{mobileVM.selectedDeviceDetail.mediaCount}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -141,11 +224,15 @@
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
{#if !mobileVM.smsLoading && mobileVM.sms.length === 0}
|
||||
<div class="py-8 text-center text-sm text-muted-foreground">
|
||||
<div
|
||||
class="py-8 text-center text-sm text-muted-foreground"
|
||||
>
|
||||
No SMS records yet.
|
||||
</div>
|
||||
{:else}
|
||||
<div class="max-h-[65vh] overflow-auto rounded-md border">
|
||||
<div
|
||||
class="max-h-[55vh] overflow-auto rounded-md border"
|
||||
>
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
@@ -158,15 +245,21 @@
|
||||
<Table.Body>
|
||||
{#each mobileVM.sms as message (message.id)}
|
||||
<Table.Row>
|
||||
<Table.Cell>{message.sender}</Table.Cell>
|
||||
<Table.Cell
|
||||
>{message.sender}</Table.Cell
|
||||
>
|
||||
<Table.Cell>
|
||||
{message.recipient || "-"}
|
||||
</Table.Cell>
|
||||
<Table.Cell class="max-w-[520px] truncate">
|
||||
<Table.Cell
|
||||
class="max-w-[520px] truncate"
|
||||
>
|
||||
{message.body}
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
{new Date(message.sentAt).toLocaleString()}
|
||||
{new Date(
|
||||
message.sentAt,
|
||||
).toLocaleString()}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
@@ -185,11 +278,15 @@
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
{#if !mobileVM.mediaLoading && mobileVM.media.length === 0}
|
||||
<div class="py-8 text-center text-sm text-muted-foreground">
|
||||
<div
|
||||
class="py-8 text-center text-sm text-muted-foreground"
|
||||
>
|
||||
No media assets yet.
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
|
||||
<div
|
||||
class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4"
|
||||
>
|
||||
{#each mobileVM.media as asset (asset.id)}
|
||||
<button
|
||||
type="button"
|
||||
@@ -197,26 +294,43 @@
|
||||
onclick={() => openMediaPreview(asset)}
|
||||
disabled={!asset.r2Url}
|
||||
>
|
||||
<div class="bg-muted relative aspect-square">
|
||||
<div
|
||||
class="bg-muted relative aspect-square"
|
||||
>
|
||||
{#if isImageAsset(asset) && asset.r2Url}
|
||||
<img
|
||||
src={asset.r2Url}
|
||||
alt={asset.filename || asset.fileId}
|
||||
alt={asset.filename ||
|
||||
asset.fileId}
|
||||
class="h-full w-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
{:else if isVideoAsset(asset)}
|
||||
<div class="flex h-full w-full items-center justify-center text-muted-foreground">
|
||||
<div
|
||||
class="flex h-full w-full items-center justify-center text-muted-foreground"
|
||||
>
|
||||
<div class="text-center">
|
||||
<Icon icon={VideoIcon} cls="mx-auto h-10 w-10" />
|
||||
<p class="mt-2 text-xs">Video file</p>
|
||||
<Icon
|
||||
icon={VideoIcon}
|
||||
cls="mx-auto h-10 w-10"
|
||||
/>
|
||||
<p class="mt-2 text-xs">
|
||||
Video file
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex h-full w-full items-center justify-center text-muted-foreground">
|
||||
<div
|
||||
class="flex h-full w-full items-center justify-center text-muted-foreground"
|
||||
>
|
||||
<div class="text-center">
|
||||
<Icon icon={FileIcon} cls="mx-auto h-10 w-10" />
|
||||
<p class="mt-2 text-xs">File</p>
|
||||
<Icon
|
||||
icon={FileIcon}
|
||||
cls="mx-auto h-10 w-10"
|
||||
/>
|
||||
<p class="mt-2 text-xs">
|
||||
File
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -225,14 +339,24 @@
|
||||
<p class="truncate text-sm font-medium">
|
||||
{asset.filename || "Untitled"}
|
||||
</p>
|
||||
<p class="text-muted-foreground truncate text-xs">
|
||||
<p
|
||||
class="text-muted-foreground truncate text-xs"
|
||||
>
|
||||
{asset.mimeType}
|
||||
</p>
|
||||
<div class="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>{formatSize(asset.sizeBytes)}</span>
|
||||
<div
|
||||
class="flex items-center justify-between text-xs text-muted-foreground"
|
||||
>
|
||||
<span
|
||||
>{formatSize(
|
||||
asset.sizeBytes,
|
||||
)}</span
|
||||
>
|
||||
<span>
|
||||
{asset.capturedAt
|
||||
? new Date(asset.capturedAt).toLocaleDateString()
|
||||
? new Date(
|
||||
asset.capturedAt,
|
||||
).toLocaleDateString()
|
||||
: "-"}
|
||||
</span>
|
||||
</div>
|
||||
@@ -251,8 +375,11 @@
|
||||
<Dialog.Content class="max-w-6xl p-8">
|
||||
{#if selectedMedia}
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>{selectedMedia.filename || "Media Preview"}</Dialog.Title>
|
||||
<Dialog.Description>{selectedMedia.mimeType}</Dialog.Description>
|
||||
<Dialog.Title
|
||||
>{selectedMedia.filename || "Media Preview"}</Dialog.Title
|
||||
>
|
||||
<Dialog.Description>{selectedMedia.mimeType}</Dialog.Description
|
||||
>
|
||||
</Dialog.Header>
|
||||
|
||||
<div class="mt-2">
|
||||
@@ -263,17 +390,25 @@
|
||||
class="max-h-[80vh] w-full rounded-md object-contain"
|
||||
/>
|
||||
{:else if isVideoAsset(selectedMedia)}
|
||||
<div class="bg-muted flex h-[60vh] items-center justify-center rounded-md text-center text-sm text-muted-foreground">
|
||||
<div
|
||||
class="bg-muted flex h-[60vh] items-center justify-center rounded-md text-center text-sm text-muted-foreground"
|
||||
>
|
||||
<div>
|
||||
<Icon icon={VideoIcon} cls="mx-auto h-10 w-10" />
|
||||
<p class="mt-2">Video preview opens in a new tab.</p>
|
||||
<p class="mt-2">
|
||||
Video preview opens in a new tab.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="bg-muted flex h-[60vh] items-center justify-center rounded-md text-center text-sm text-muted-foreground">
|
||||
<div
|
||||
class="bg-muted flex h-[60vh] items-center justify-center rounded-md text-center text-sm text-muted-foreground"
|
||||
>
|
||||
<div>
|
||||
<Icon icon={FileIcon} cls="mx-auto h-10 w-10" />
|
||||
<p class="mt-2">Preview unavailable for this file type.</p>
|
||||
<p class="mt-2">
|
||||
Preview unavailable for this file type.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -283,7 +418,12 @@
|
||||
{#if selectedMedia.r2Url}
|
||||
<Button
|
||||
variant="outline"
|
||||
onclick={() => window.open(selectedMedia?.r2Url, "_blank", "noopener,noreferrer")}
|
||||
onclick={() =>
|
||||
window.open(
|
||||
selectedMedia?.r2Url,
|
||||
"_blank",
|
||||
"noopener,noreferrer",
|
||||
)}
|
||||
>
|
||||
Open Raw File
|
||||
</Button>
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
import FileArchive from "@lucide/svelte/icons/file-archive";
|
||||
import RefreshCw from "@lucide/svelte/icons/refresh-cw";
|
||||
import Search from "@lucide/svelte/icons/search";
|
||||
import Trash2 from "@lucide/svelte/icons/trash-2";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
const filesNavItem = mainNavTree.find((item) => item.url === "/files");
|
||||
@@ -78,6 +79,7 @@
|
||||
<Table.Head>Status</Table.Head>
|
||||
<Table.Head>Uploaded</Table.Head>
|
||||
<Table.Head>R2 URL</Table.Head>
|
||||
<Table.Head>Actions</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
@@ -105,6 +107,17 @@
|
||||
Open
|
||||
</a>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
disabled={filesVM.deletingFileId === item.id}
|
||||
onclick={() => void filesVM.deleteFile(item.id)}
|
||||
>
|
||||
<Icon icon={Trash2} cls="h-4 w-4" />
|
||||
Delete
|
||||
</Button>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
|
||||
Reference in New Issue
Block a user