clqms-shadcn-v1/src/lib/components/patient/admission/page/view-page.svelte

<script>
    import { formatUTCDate } from "$lib/utils/formatUTCDate";
    import { detailSections, viewActions } from "$lib/components/patient/admission/config/admission-config";
    import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
    import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";

    let props = $props();

    let visit = $derived(props.masterDetail?.selectedItem?.data);

    const handlers = {
        editPatient: () => props.masterDetail.enterEdit(),
    };

    const actions = viewActions(handlers);

    function getFieldValue(field) {
        if (!visit) return "-";

        if (field.keys) {
            return field.keys
                .map(k => field.parentKey ? visit[field.parentKey]?.[k] : visit[k])
                .filter(val => val && val.trim() !== "")
                .join(" / ");
        }

        return field.parentKey ? visit[field.parentKey]?.[field.key] : visit[field.key];
    }

</script>

{#snippet Fieldset({ value, label, isUTCDate = false })}
    <div class="space-y-1.5">
        <dt class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
            {label}
        </dt>
        <dd class="text-sm font-medium">
            {#if isUTCDate}
                {formatUTCDate(value)}
            {:else}
                {value ?? "-"}
            {/if}
        </dd>
    </div>
{/snippet}

{#if props.masterDetail.selectedItem}
    <div class="flex flex-col px-2 py-1 gap-2 h-full w-full">
        <TopbarWrapper 
            title={props.masterDetail.selectedItem.data.PVID} 
            {actions} 
        />
        <div class="flex-1 min-h-0 overflow-y-auto space-y-4">
            {#each detailSections as section}
                <div class="p-4">
                    {#if section.groups}
                        <div class={section.class}>
                            {#each section.groups as group}
                                <div>
                                    <div class={group.class}>
                                        {#each group.fields as field}
                                            {@render Fieldset({
                                                label: field.label,
                                                value: getFieldValue(field),
                                                isUTCDate: field.isUTCDate
                                            })}
                                        {/each}
                                    </div>
                                </div>
                            {/each}
                        </div>
                    {:else}
                        <div class={section.class}>
                            {#each section.fields as field}
                                {@render Fieldset({
                                    label: field.label,
                                    value: getFieldValue(field),
                                    isUTCDate: field.isUTCDate
                                })}
                            {/each}
                        </div>
                    {/if}
                </div>
            {/each}
        </div>
    </div>
{:else}
    <ReusableEmpty desc="Select a visit to see details"/>
{/if}

<!-- {#if props.masterDetail.selectedItem}
    <div class="flex flex-col px-2 py-1 gap-2 h-full w-full">
        <TopbarWrapper title={props.masterDetail.selectedItem.data.PVID} {actions} />
        <div class="flex-1 min-h-0 overflow-y-auto space-y-4">
            {#each detailSections as section}
                <div class="p-4">
                    <div class={section.class}>
                        {#each section.fields as field}
                            {@render Fieldset({
                                label: field.label,
                                value: getFieldValue(field),
                                isUTCDate: field.isUTCDate,
                            })}
                        {/each}
                    </div>
                </div>
            {/each}
        </div>
    </div>
{:else}
    <ReusableEmpty desc="Select a visit to see details"/>
{/if} -->