82 lines
2.7 KiB
Svelte
82 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
|
|
import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
|
|
import { goto } from '$app/navigation';
|
|
import { resolve } from '$app/paths';
|
|
import { Button } from '$lib/components/ui/button/index.js';
|
|
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
|
|
import * as Table from '$lib/components/ui/table/index.js';
|
|
let {
|
|
data,
|
|
openEdit,
|
|
openArchive,
|
|
formatValue,
|
|
recordName
|
|
}: {
|
|
data: any;
|
|
openEdit: any;
|
|
openArchive: any;
|
|
formatValue: any;
|
|
recordName: any;
|
|
} = $props();
|
|
</script>
|
|
|
|
{#if data.records.length > 0}
|
|
<div class="overflow-hidden rounded-lg border border-border">
|
|
<Table.Root>
|
|
<Table.Header>
|
|
<Table.Row>
|
|
<Table.Head>Name</Table.Head>
|
|
<Table.Head>Primary contact</Table.Head>
|
|
<Table.Head>Email</Table.Head>
|
|
<Table.Head>Primary address</Table.Head>
|
|
<Table.Head class="w-12"><span class="sr-only">Actions</span></Table.Head>
|
|
</Table.Row>
|
|
</Table.Header>
|
|
<Table.Body>
|
|
{#each data.records as record (record.id)}
|
|
<Table.Row>
|
|
<Table.Cell class="font-medium"
|
|
><a
|
|
class="inline-flex items-center gap-2 underline-offset-4 hover:text-primary hover:underline"
|
|
href={resolve('/dashboard/clients/[id]', { id: record.id })}
|
|
>{formatValue(record.name)}<ExternalLinkIcon class="size-3.5" /></a
|
|
></Table.Cell
|
|
>
|
|
<Table.Cell>{formatValue(record.primaryContactName)}</Table.Cell>
|
|
<Table.Cell>{formatValue(record.primaryContactEmail)}</Table.Cell>
|
|
<Table.Cell>{formatValue(record.primaryAddressLine1)}</Table.Cell>
|
|
<Table.Cell>
|
|
<DropdownMenu.Root>
|
|
<DropdownMenu.Trigger
|
|
>{#snippet child({ props })}<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
aria-label={`Open actions for ${recordName(record)}`}
|
|
{...props}><EllipsisVerticalIcon /></Button
|
|
>{/snippet}</DropdownMenu.Trigger
|
|
>
|
|
<DropdownMenu.Content align="end" class="w-36">
|
|
<DropdownMenu.Item
|
|
onclick={() => goto(resolve('/dashboard/clients/[id]', { id: record.id }))}
|
|
>View</DropdownMenu.Item
|
|
>
|
|
<DropdownMenu.Item onclick={() => openEdit(record)}>Edit</DropdownMenu.Item>
|
|
<DropdownMenu.Item variant="destructive" onclick={() => openArchive(record)}
|
|
>Archive</DropdownMenu.Item
|
|
>
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Root>
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
{/each}
|
|
</Table.Body>
|
|
</Table.Root>
|
|
</div>
|
|
{:else}
|
|
<div class="rounded-lg border p-8 text-center text-sm text-muted-foreground">
|
|
No clients have been created yet.
|
|
</div>
|
|
{/if}
|