faiztyanirh/clqms-shadcn-v1
1
0
Fork 0
mirror of https://github.com/faiztyanirh/clqms-shadcn-v1.git synced 2026-04-22 09:35:34 +07:00
Code Issues Packages Projects Releases Wiki Activity

initial patient admission, adm search param

Browse Source
This commit is contained in:
faiztyanirh 2026-02-02 17:28:53 +07:00
parent d470e18df5
commit cca8afd359
33 changed files with 454 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/lib/api/api-client.js
View File

@ -40,7 +40,6 @@ export async function searchWithParams(endpoint, searchQuery) {
const url = params
? `${API.BASE_URL}${endpoint}?${params}`
: `${API.BASE_URL}${endpoint}`;
const res = await fetch(url);
const data = await res.json();
return data.data || [];

19
src/lib/components/app-sidebar.svelte
View File

@ -23,12 +23,21 @@
title: "Patient",
url: "/patient",
icon: LifeBuoyIcon,
submenus: [
{
title: "Patient List",
url: "/list",
},
{
title: "Patient Admission",
url: "/admission",
},
],
},
{
title: "Order",
url: "/order",
icon: LifeBuoyIcon,
isActive: false,
submenus: [
{
title: "Test Order",
@ -40,20 +49,20 @@
dictionary: [
{
title: "Admission",
url: "#",
url: "/admission",
icon: LifeBuoyIcon,
submenus: [
{
title: "Contact",
url: "#",
url: "/contact",
},
{
title: "Location",
url: "#",
url: "/location",
},
{
title: "Occupation",
url: "#",
url: "/occupation",
},
],
},

2
src/lib/components/composable/use-search.svelte.js
View File

@ -18,7 +18,7 @@ export function useSearch(searchFields, searchApiFunction) {
async function handleSearch() {
isLoading = true;
try {
searchData = await searchApiFunction(searchQuery);
searchData = await searchApiFunction(searchQuery);
} catch (error) {
console.error('Search failed:', error);
} finally {

136
src/lib/components/nav-dictionary.svelte
View File

@ -1,61 +1,115 @@
<script>
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
import * as Sidebar from "$lib/components/ui/sidebar/index.js";
import * as Collapsible from "$lib/components/ui/collapsible/index.js";
import * as Popover from "$lib/components/ui/popover/index.js";
import { useSidebar } from "$lib/components/ui/sidebar/index.js";
import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
import FolderIcon from "@lucide/svelte/icons/folder";
import ShareIcon from "@lucide/svelte/icons/share";
import Trash2Icon from "@lucide/svelte/icons/trash-2";
import { Separator } from "$lib/components/ui/separator/index.js";
import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
import { page } from "$app/stores";
let {
dictionary,
} = $props();
const sidebar = useSidebar();
const sidebar = Sidebar.useSidebar();
let openPopovers = $state({});
</script>
<Sidebar.Group>
<Sidebar.GroupLabel>Dictionary</Sidebar.GroupLabel>
<Sidebar.Menu>
{#each dictionary as item (item.title)}
<Collapsible.Root open={item.isActive}>
<Sidebar.MenuItem>
<Sidebar.MenuButton tooltipContent={item.title}>
{#snippet child({ props })}
<a href={item.url} {...props}>
<item.icon />
<span>{item.title}</span>
</a>
{#each dictionary as item, index}
{#if sidebar.state === "expanded"}
<Collapsible.Root open={item.isActive} class="group/collapsible">
{#snippet child({ props })}
<Sidebar.MenuItem {...props}>
<Sidebar.MenuButton tooltipContent={item.title}>
{#snippet child({ props })}
{#if item.submenus?.length}
<a {...props}>
<item.icon />
<span>{item.title}</span>
</a>
{:else}
<a href={item.url} {...props}>
<item.icon />
<span>{item.title}</span>
</a>
{/if}
{/snippet}
</Sidebar.MenuButton>
{#if item.submenus?.length}
<Collapsible.Trigger>
{#snippet child({ props })}
<Sidebar.MenuAction
{...props}
class="data-[state=open]:rotate-90"
>
<ChevronRightIcon />
<span class="sr-only">Toggle</span>
</Sidebar.MenuAction>
{/snippet}
</Collapsible.Trigger>
<Collapsible.Content>
<Sidebar.MenuSub>
{#each item.submenus as subItem (subItem.title)}
<Sidebar.MenuSubItem>
<Sidebar.MenuSubButton href={`${item.url}${subItem.url}`}>
<span>{subItem.title}</span>
</Sidebar.MenuSubButton>
</Sidebar.MenuSubItem>
{/each}
</Sidebar.MenuSub>
</Collapsible.Content>
{/if}
</Sidebar.MenuItem>
{/snippet}
</Collapsible.Root>
{:else}
<Popover.Root open={openPopovers[index]} onOpenChange={(open) => openPopovers[index] = open}>
<Sidebar.MenuItem>
{#snippet trigger(props)}
<Popover.Trigger {...props}>
<Sidebar.MenuButton tooltip={item.title}>
{#if item.icon && !item.submenu}
<item.icon />
{/if}
<span>{item.title}</span>
</Sidebar.MenuButton>
</Popover.Trigger>
{/snippet}
</Sidebar.MenuButton>
{#if item.items?.length}
<Collapsible.Trigger>
{#snippet child({ props })}
<Sidebar.MenuAction
{...props}
class="data-[state=open]:rotate-90"
>
<ChevronRightIcon />
<span class="sr-only">Toggle</span>
</Sidebar.MenuAction>
{/snippet}
</Collapsible.Trigger>
<Collapsible.Content>
<Sidebar.MenuSub>
{#each item.items as subItem (subItem.title)}
<Sidebar.MenuSubItem>
<Sidebar.MenuSubButton href={subItem.url}>
<span>{subItem.title}</span>
</Sidebar.MenuSubButton>
</Sidebar.MenuSubItem>
{@render trigger()}
</Sidebar.MenuItem>
<Popover.Content side="right" align="start" class="w-max p-1">
<div class="space-y-1">
{#if item.submenus && item.submenus.length > 0}
<div class="px-2 py-1.5 text-sm font-semibold">
{item.title}
</div>
<Separator />
{#each item.submenus || [] as submenu}
<a href={submenu.url}
onclick={() => openPopovers[index] = false}
class="flex items-center rounded-md px-2 py-1.5 text-sm hover:bg-accent"
class:bg-accent={$page.url.pathname === submenu.url}
>
{submenu.title}
</a>
{/each}
</Sidebar.MenuSub>
</Collapsible.Content>
{/if}
</Sidebar.MenuItem>
</Collapsible.Root>
{:else}
<a href={item.url}
onclick={() => openPopovers[index] = false}
class="flex items-center rounded-md px-2 py-1.5 text-sm font-semibold hover:bg-accent"
class:bg-accent={$page.url.pathname === item.url}
>
{item.title}
</a>
{/if}
</div>
</Popover.Content>
</Popover.Root>
{/if}
{/each}
</Sidebar.Menu>
</Sidebar.Group>

2
src/lib/components/nav-main.svelte
View File

@ -89,7 +89,7 @@
</div>
<Separator />
{#each item.submenus || [] as submenu}
<a href={submenu.url}
<a href={`${item.url}${submenu.url}`}
onclick={() => openPopovers[item.url] = false}
class="flex items-center rounded-md px-2 py-1.5 text-sm hover:bg-accent"
class:bg-accent={$page.url.pathname === submenu.url}

26
src/lib/components/patient/admission/api/patient-admission-api.js Normal file
View File

@ -0,0 +1,26 @@
import { API } from '$lib/config/api.js';
import { getById, searchWithParams, create, update } from '$lib/api/api-client';
export async function searchParam(searchQuery) {
return await searchWithParams(API.PATIENTS, searchQuery)
}
export async function getVisit(searchQuery) {
const { data: visit, error } = await getById(API.VISITLIST, searchQuery)
return { visit };
}
export async function getPatient(searchQuery) {
const { data: patient, error } = await getById(API.PATIENTS, searchQuery)
return { patient };
}
export async function createPatient(newContactForm) {
// console.log(JSON.stringify(newContactForm));
return await create(API.PATIENTS, newContactForm)
}
export async function editPatient(editContactForm) {
// console.log(JSON.stringify(editContactForm));
return await update(API.PATIENTS, editContactForm)
}

54
src/lib/components/patient/admission/config/admission-config.js Normal file
View File

@ -0,0 +1,54 @@
import PlusIcon from "@lucide/svelte/icons/plus";
import Settings2Icon from "@lucide/svelte/icons/settings-2";
export const searchFields = [
{
key: "PatientID",
label: "Patient ID",
placeholder: "",
type: "text",
defaultValue: "",
},
{
key: "Name",
label: "Patient Name",
placeholder: "",
type: "text",
defaultValue: "",
},
{
key: "Birthdate",
label: "Birthdate",
type: "date"
},
{
key: "Identifier",
label: "Identifier",
type: "text"
},
{
key: "VisitID",
label: "Visit ID",
type: "text"
},
{
key: "EpisodeID",
label: "Episode ID",
type: "text"
},
];
export function admissionActions(masterDetail) {
return [
{
Icon: PlusIcon,
label: 'Add Visit',
onClick: masterDetail.enterCreate,
},
{
Icon: Settings2Icon,
label: 'Search Parameters',
popoverWidth: "w-256",
},
];
}

0
src/lib/components/patient/admission/config/admission-form-config.js Normal file
View File

74
src/lib/components/patient/admission/modal/search-param-modal.svelte Normal file
View File

@ -0,0 +1,74 @@
<script>
import { Button } from "$lib/components/ui/button/index.js";
import { Label } from "$lib/components/ui/label/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import ReusableCalendar from "$lib/components/reusable/reusable-calendar.svelte";
import { Spinner } from "$lib/components/ui/spinner/index.js";
import * as Select from "$lib/components/ui/select/index.js";
import ReusableDataTable from "$lib/components/reusable/reusable-data-table.svelte";
import { useSearch } from "$lib/components/composable/use-search.svelte";
import { searchFields } from "../config/admission-config";
import { searchParam } from "../api/patient-admission-api";
import { patientColumns } from "../table/patient-colums";
import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
let props = $props();
let activeRowId = $state(null);
</script>
<div class="w-full h-110">
<div class="flex gap-2 h-full">
<div class="w-1/3">
<div class="space-y-2">
{#each props.searchFields as field}
{#if field.type === "text"}
<div class="space-y-2">
<Label for={field.key}>{field.label}</Label>
<Input type="text" id={field.key} placeholder={field.placeholder} bind:value={props.search.searchQuery[field.key]} autocomplete=off/>
</div>
{:else if field.type === "date"}
<div class="space-y-2">
<ReusableCalendar title={field.label} bind:value={props.search.searchQuery[field.key]}/>
</div>
{:else if field.type === "select"}
<div class="space-y-2">
<Label for={field.key}>{field.label}</Label>
<Select.Root bind:value={props.search.searchQuery[field.key]}>
<Select.Trigger id={field.key}>
<Select.Value placeholder={field.placeholder} />
</Select.Trigger>
<Select.Content>
{#each field.options as opt}
<Select.Item value={opt.value}>
{opt.label}
</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
{/if}
{/each}
</div>
<div class="flex justify-end gap-2 mt-4">
<Button variant="outline" size="sm" class="cursor-pointer" onclick={props.search.handleReset}>Reset</Button>
<Button size="sm" class="cursor-pointer" onclick={props.search.handleSearch} disabled={props.search.isLoading}>
{#if props.isLoading}
<Spinner />
{:else}
Search
{/if}
</Button>
</div>
</div>
<div class="flex flex-1 w-full h-full justify-center items-center">
{#if props.search.searchData && props.search.searchData.length > 0}
<ReusableDataTable data={props.search.searchData} columns={patientColumns} {activeRowId} rowIdKey="InternalPID"/>
{:else}
<div class="flex h-full">
<ReusableEmpty desc="Try searching from search parameters"/>
</div>
{/if}
</div>
</div>
</div>

1
src/lib/components/patient/admission/page/create-page.svelte Normal file
View File

@ -0,0 +1 @@
cr

1
src/lib/components/patient/admission/page/edit-page.svelte Normal file
View File

@ -0,0 +1 @@
ed

65
src/lib/components/patient/admission/page/master-page.svelte Normal file
View File

@ -0,0 +1,65 @@
<script>
import { visitColumns } from "$lib/components/patient/admission/table/visit-columns";
import { searchParam } from "$lib/components/patient/admission/api/patient-admission-api";
import { useSearch } from "$lib/components/composable/use-search.svelte";
import { searchFields, admissionActions } from "$lib/components/patient/admission/config/admission-config";
import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
import ReusableSearchParam from "$lib/components/reusable/reusable-search-param.svelte";
import SearchParamModal from "../modal/search-param-modal.svelte";
import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
import ReusableDataTable from "$lib/components/reusable/reusable-data-table.svelte";
let props = $props();
const search = useSearch(searchFields, searchParam);
const actions = admissionActions(props.masterDetail)
actions.find(a => a.label === 'Search Parameters').popoverContent = searchParamSnippet;
let activeRowId = $state(null);
</script>
{#snippet searchParamSnippet()}
<SearchParamModal {search} {searchFields}/>
<!-- <SearchParamModal {searchFields} {searchData} bind:searchQuery={search.searchQuery} onSearch={search.handleSearch} onReset={search.handleReset} isLoading={search.isLoading}/> -->
{/snippet}
<div
role="button"
tabindex="0"
onclick={() => props.masterDetail.isFormMode && props.masterDetail.exitForm()}
onkeydown={(e) => e.key === 'Enter' && props.masterDetail.isFormMode && props.masterDetail.exitForm()}
class={`
${props.masterDetail.isMobile ? "w-full" : props.masterDetail.isFormMode ? "w-[3%] cursor-pointer" : "w-[35%]"}
transition-all duration-300 flex flex-col items-center p-2 h-full overflow-y-auto
`}
>
<div class={`flex w-full ${props.masterDetail.isFormMode ? "flex-col justify-center h-full items-center" : "flex-col justify-start h-full"}`} >
{#if props.masterDetail.isFormMode}
<span class="flex flex-col items-center justify-center gap-4 tracking-widest font-semibold select-none">
{#each "ADMISSION".split("") as c}
<span class="leading-none">{c}</span>
{/each}
</span>
{/if}
{#if !props.masterDetail.isFormMode}
<div role="button" tabindex="0" class="flex flex-1 flex-col" onclick={(e) => e.stopPropagation()} onkeydown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
e.stopPropagation();
}
}}>
<TopbarWrapper {actions}/>
<div class="flex-1 w-full h-full">
<!-- {#if search.searchData.length > 0}
<ReusableDataTable data={search.searchData} columns={visitColumns} handleRowClick={props.masterDetail.select} {activeRowId} rowIdKey="InternalPID"/>
{:else} -->
<div class="flex h-full">
<ReusableEmpty desc="Try searching from search parameters"/>
</div>
<!-- {/if} -->
</div>
</div>
{/if}
</div>
</div>

1
src/lib/components/patient/admission/page/view-page.svelte Normal file
View File

@ -0,0 +1 @@
vw

23
src/lib/components/patient/admission/table/patient-colums.js Normal file
View File

@ -0,0 +1,23 @@
export const patientColumns = [
{
accessorKey: "PatientID",
header: "PatientID",
},
{
accessorKey: "FullName",
header: "Patient Name",
},
{
accessorKey: "SexLabel",
header: "Sex",
},
{
accessorKey: "Birthdate",
header: "Birthdate",
cell: ({ getValue }) => {
const value = getValue();
if (!value) return "";
return value.split(' ')[0];
}
},
];

6
src/lib/components/patient/admission/table/visit-columns.js Normal file
View File

@ -0,0 +1,6 @@
export const visitColumns = [
{
accessorKey: "PVID",
header: "Visit ID",
},
];

0
src/lib/components/patient/api/patient-api.js → src/lib/components/patient/list/api/patient-list-api.js
View File

0
src/lib/components/patient/config/patient-config.js → src/lib/components/patient/list/config/patient-config.js
View File

0
src/lib/components/patient/config/patient-form-config.js → src/lib/components/patient/list/config/patient-form-config.js
View File

18
src/lib/components/patient/modal/custodian-modal.svelte → src/lib/components/patient/list/modal/custodian-modal.svelte
View File

@ -1,18 +1,18 @@
<script>
import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
import ReusableCalendar from "$lib/components/reusable/reusable-calendar.svelte";
import * as Dialog from "$lib/components/ui/dialog/index.js";
import * as Table from "$lib/components/ui/table/index.js";
import { useSearch } from "$lib/components/composable/use-search.svelte";
import { searchParam } from "$lib/components/patient/list/api/patient-list-api";
import { searchFields } from "$lib/components/patient/list/config/patient-config";
import { Button } from "$lib/components/ui/button/index.js";
import { Label } from "$lib/components/ui/label/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import { Checkbox } from "$lib/components/ui/checkbox/index.js";
import { Spinner } from "$lib/components/ui/spinner/index.js";
import BabyIcon from "@lucide/svelte/icons/baby";
import SearchIcon from "@lucide/svelte/icons/search";
import { Input } from "$lib/components/ui/input/index.js";
import * as Table from "$lib/components/ui/table/index.js";
import { Checkbox } from "$lib/components/ui/checkbox/index.js";
import ReusableCalendar from "$lib/components/reusable/reusable-calendar.svelte";
import { searchParam } from "$lib/components/patient/api/patient-api";
import { Spinner } from "$lib/components/ui/spinner/index.js";
import { searchFields } from "../config/patient-config";
import { useSearch } from "$lib/components/composable/use-search.svelte";
import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
let props = $props();

102
src/lib/components/patient/modal/linkto-modal.svelte → src/lib/components/patient/list/modal/linkto-modal.svelte
View File

@ -1,19 +1,19 @@
<script>
import ReusableCalendar from "$lib/components/reusable/reusable-calendar.svelte";
import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
import * as Dialog from "$lib/components/ui/dialog/index.js";
import { Button } from "$lib/components/ui/button/index.js";
import { Label } from "$lib/components/ui/label/index.js";
import LinkIcon from "@lucide/svelte/icons/link";
import SearchIcon from "@lucide/svelte/icons/search";
import { Input } from "$lib/components/ui/input/index.js";
import * as Table from "$lib/components/ui/table/index.js";
import * as RadioGroup from "$lib/components/ui/radio-group/index.js";
import { searchParam } from "$lib/components/patient/api/patient-api";
import ReusableCalendar from "$lib/components/reusable/reusable-calendar.svelte";
import { Spinner } from "$lib/components/ui/spinner/index.js";
import { searchFields } from "../config/patient-config";
import { useSearch } from "$lib/components/composable/use-search.svelte";
import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
import { searchParam } from "$lib/components/patient/list/api/patient-list-api";
import { searchFields } from "$lib/components/patient/list/config/patient-config";
import { Button } from "$lib/components/ui/button/index.js";
import { Label } from "$lib/components/ui/label/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import { Spinner } from "$lib/components/ui/spinner/index.js";
import { Checkbox } from "$lib/components/ui/checkbox/index.js";
import LinkIcon from "@lucide/svelte/icons/link";
import SearchIcon from "@lucide/svelte/icons/search";
let props = $props();
@ -55,16 +55,8 @@
}
function confirmLink() {
// Update form state dengan selected patients
// Store as comma-separated string or array depending on your backend
// props.formState.form.LinkTo = selectedPatients
// .map(p => p.InternalPID)
// .join(',');
// Or as array:
props.formState.form.LinkTo = [...selectedPatients];
// Reset and close
selectedPatients = [];
isOpen = false;
}
@ -190,76 +182,4 @@
</Button>
</Dialog.Footer>
</Dialog.Content>
</Dialog.Root>
<!-- <Dialog.Root bind:open={linkModalMode.open}>
<Dialog.Trigger>
<Button variant="outline" class="size-9 rounded-l-none cursor-pointer" onclick={(e) => { linkModalMode.mode = mode }}>
<LinkIcon />
</Button>
</Dialog.Trigger>
<Dialog.Content class="flex flex-col max-h-9/10 w-[90vw] max-w-sm sm:max-w-md md:max-w-lg lg:max-w-2xl">
<Dialog.Header class="border-b pb-4">
<Dialog.Title class="text-xl font-semibold">Search Patient Link</Dialog.Title>
</Dialog.Header>
<div class="space-y-4">
<div class="pb-4 border-b">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
{#each searchFields as field}
{@render Fieldset(field)}
{/each}
</div>
</div>
<div class="flex justify-end gap-2 border-b pb-4">
<Button variant="outline" size="sm" class="cursor-pointer" onclick={resetAllFields}>Reset</Button>
<Button size="sm" class="cursor-pointer" onclick={handleSearchParam}>
{#if isLoading}
<Spinner />
{:else}
Search
{/if}
</Button>
</div>
</div>
<div class="flex-1 overflow-auto"></div>
{#if linkToPatients.data.length === 0}
<div class="flex flex-col items-center justify-center text-muted-foreground">
<SearchIcon class="w-12 h-12 mb-4 text-primary"/>
<p class="text-sm">No results found. Try searching with different criteria.</p>
</div>
{:else}
<Table.Root>
<Table.Header>
<Table.Row class="hover:bg-transparent">
<Table.Head class="w-8"></Table.Head>
<Table.Head class="w-32">Patient ID</Table.Head>
<Table.Head class="w-full">Patient Name</Table.Head>
<Table.Head class="w-32">Birthdate</Table.Head>
<Table.Head class="w-8">Sex</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{#each linkToPatients.data as patient, i}
<Table.Row
class="cursor-pointer hover:bg-muted/50"
>
<Table.Cell>
<Checkbox
checked={selectedPatients.temporaryPatnum.some((p) => p.InternalPID === patient.InternalPID && p.PatientID === patient.PatientID)}
onCheckedChange={() => toggleId(patient.InternalPID, patient.PatientID)}
/>
</Table.Cell>
<Table.Cell class="font-medium">{patient.PatientID}</Table.Cell>
<Table.Cell class="">{patient.FullName}</Table.Cell>
<Table.Cell class="text-muted-foreground">{patient.Birthdate ? patient.Birthdate.split(" ")[0] : ""}</Table.Cell>
<Table.Cell class="font-medium">{patient.Gender}</Table.Cell>
</Table.Row>
{/each}
</Table.Body>
</Table.Root>
{/if}
<Dialog.Footer class="border-t pt-4">
<Button size="sm" class="cursor-pointer" onclick={confirmLink}>Link Patient</Button>
</Dialog.Footer>
</Dialog.Content>
</Dialog.Root> -->
</Dialog.Root>

2
src/lib/components/patient/page/create-page copy.svelte → src/lib/components/patient/list/page/create-page copy.svelte
View File

@ -8,7 +8,7 @@
import { Spinner } from "$lib/components/ui/spinner/index.js";
import { useForm } from "$lib/components/composable/use-form.svelte";
import { patientSchema, patientInitialForm, patientDefaultErrors, patientFormFields, getPatientFormActions } from "../config/patient-form-config";
import { createPatient } from "../api/patient-api";
import { createPatient } from "../api/patient-list-api";
import * as Select from "$lib/components/ui/select/index.js";
import ReusableCalendar from "$lib/components/reusable/reusable-calendar.svelte";
import ReusableCalendarTimepicker from "$lib/components/reusable/reusable-calendar-timepicker.svelte";

8
src/lib/components/patient/page/create-page.svelte → src/lib/components/patient/list/page/create-page.svelte
View File

@ -1,10 +1,10 @@
<script>
import { useForm } from "$lib/components/composable/use-form.svelte";
import { patientSchema, patientInitialForm, patientDefaultErrors, patientFormFields, getPatientFormActions } from "../config/patient-form-config";
import { createPatient } from "../api/patient-api";
import FormPageContainer from "../reusable/form-page-container.svelte";
import { patientSchema, patientInitialForm, patientDefaultErrors, patientFormFields, getPatientFormActions } from "$lib/components/patient/list/config/patient-form-config";
import { createPatient } from "$lib/components/patient/list/api/patient-list-api";
import { usePatientForm } from "$lib/components/composable/use-patient-form.svelte";
import PatientFormRenderer from "../reusable/patient-form-renderer.svelte";
import FormPageContainer from "$lib/components/patient/reusable/form-page-container.svelte";
import PatientFormRenderer from "$lib/components/patient/reusable/patient-form-renderer.svelte";
let props = $props();

2
src/lib/components/patient/page/edit-page copy.svelte → src/lib/components/patient/list/page/edit-page copy.svelte
View File

@ -10,7 +10,7 @@
import { Spinner } from "$lib/components/ui/spinner/index.js";
import { useForm } from "$lib/components/composable/use-form.svelte";
import { patientSchema, patientInitialForm, patientDefaultErrors, patientFormFields, getPatientFormActions } from "../config/patient-form-config";
import { editPatient } from "../api/patient-api";
import { editPatient } from "../api/patient-list-api";
import * as Select from "$lib/components/ui/select/index.js";
import ReusableCalendar from "$lib/components/reusable/reusable-calendar.svelte";
import ReusableCalendarTimepicker from "$lib/components/reusable/reusable-calendar-timepicker.svelte";

8
src/lib/components/patient/page/edit-page.svelte → src/lib/components/patient/list/page/edit-page.svelte
View File

@ -1,12 +1,12 @@
<script>
import { useForm } from "$lib/components/composable/use-form.svelte";
import { patientSchema, patientInitialForm, patientDefaultErrors, patientFormFields, getPatientFormActions } from "../config/patient-form-config";
import { editPatient } from "../api/patient-api";
import FormPageContainer from "../reusable/form-page-container.svelte";
import { patientSchema, patientInitialForm, patientDefaultErrors, patientFormFields, getPatientFormActions } from "$lib/components/patient/list/config/patient-form-config";
import { editPatient } from "$lib/components/patient/list/api/patient-list-api";
import { usePatientForm } from "$lib/components/composable/use-patient-form.svelte";
import PatientFormRenderer from "../reusable/patient-form-renderer.svelte";
import { API } from "$lib/config/api";
import { untrack } from "svelte";
import FormPageContainer from "$lib/components/patient/reusable/form-page-container.svelte";
import PatientFormRenderer from "$lib/components/patient/reusable/patient-form-renderer.svelte";
let props = $props();

8
src/lib/components/patient/page/master-page.svelte → src/lib/components/patient/list/page/master-page.svelte
View File

@ -1,12 +1,12 @@
<script>
import { columns } from "$lib/components/patient/table/colums";
import { columns } from "$lib/components/patient/list/table/colums";
import { searchParam } from "$lib/components/patient/list/api/patient-list-api";
import { useSearch } from "$lib/components/composable/use-search.svelte";
import { searchFields, patientActions } from "$lib/components/patient/list/config/patient-config";
import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
import ReusableSearchParam from "$lib/components/reusable/reusable-search-param.svelte";
import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
import { searchParam } from "$lib/components/patient/api/patient-api";
import ReusableDataTable from "$lib/components/reusable/reusable-data-table.svelte";
import { useSearch } from "$lib/components/composable/use-search.svelte";
import { searchFields, patientActions } from "../config/patient-config";
let props = $props();

7
src/lib/components/patient/page/view-page.svelte → src/lib/components/patient/list/page/view-page.svelte
View File

@ -1,9 +1,8 @@
<script>
import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
import { formatUTCDate } from "$lib/utils/formatUTCDate";
import { formatUTCDate } from "$lib/utils/formatUTCDate";
import { getUrl } from "$lib/utils/getUrl";
import { detailSections, viewActions } from "../config/patient-config";
import { detailSections, viewActions } from "$lib/components/patient/list/config/patient-config";
import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
let props = $props();

0
src/lib/components/patient/table/colums.js → src/lib/components/patient/list/table/colums.js
View File

27
src/lib/components/patient/reusable/form-page-container.svelte
View File

@ -1,9 +1,9 @@
<script>
import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
import { Button } from "$lib/components/ui/button/index.js";
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
import { Button } from "$lib/components/ui/button/index.js";
import { Spinner } from "$lib/components/ui/spinner/index.js";
import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
let {
title,
@ -57,26 +57,5 @@
</DropdownMenu.Content>
</DropdownMenu.Root>
{/if}
<!-- <DropdownMenu.Root>
<DropdownMenu.Trigger>
<Button
size="icon"
class="size-8 rounded-l-none"
disabled={props.hasErrors || props.primaryAction.formState.isSaving.current}
>
<ChevronUpIcon />
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content collisionPadding={8}>
<DropdownMenu.Group>
<DropdownMenu.Item>
Save and Order
</DropdownMenu.Item>
<DropdownMenu.Item onclick={props.handleSave}>
Save
</DropdownMenu.Item>
</DropdownMenu.Group>
</DropdownMenu.Content>
</DropdownMenu.Root> -->
</div>
</div>

10
src/lib/components/patient/reusable/patient-form-renderer.svelte
View File

@ -1,16 +1,16 @@
<script>
import { Button } from "$lib/components/ui/button/index.js";
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
import * as Select from "$lib/components/ui/select/index.js";
import { Button } from "$lib/components/ui/button/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import { Label } from "$lib/components/ui/label/index.js";
import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
import { Spinner } from "$lib/components/ui/spinner/index.js";
import * as Select from "$lib/components/ui/select/index.js";
import ReusableCalendar from "$lib/components/reusable/reusable-calendar.svelte";
import ReusableCalendarTimepicker from "$lib/components/reusable/reusable-calendar-timepicker.svelte";
import CustodianModal from "../modal/custodian-modal.svelte";
import LinktoModal from "../modal/linkto-modal.svelte";
import CustodianModal from "$lib/components/patient/list/modal/custodian-modal.svelte";
import LinktoModal from "$lib/components/patient/list/modal/linkto-modal.svelte";
import ReusableUpload from "$lib/components/reusable/reusable-upload.svelte";
import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
let {
formState,

2
src/lib/components/topbar/topbar-action.svelte
View File

@ -27,7 +27,7 @@
</Button>
{/snippet}
</Popover.Trigger>
<Popover.Content ${props.collisionPadding ?? 0} class="w-72">
<Popover.Content ${props.collisionPadding ?? 0} class={props.popoverWidth ?? "w-72"}>
{@render props.popoverContent()}
</Popover.Content>
</Popover.Root>

11
src/routes/+layout.server.js
View File

@ -1,11 +1,14 @@
export async function load({ url }) {
const routeConfig = {
'/patient': {
title: 'Patient List',
},
'/': {
title: 'Dashboard',
}
},
'/patient/list': {
title: 'Patient List',
},
'/patient/admission': {
title: 'Patient Admission',
},
};
const config = routeConfig[url.pathname] || {

34
src/routes/patient/admission/+page.svelte Normal file
View File

@ -0,0 +1,34 @@
<script>
import { Separator } from "$lib/components/ui/separator/index.js";
import { useMasterDetail } from "$lib/components/composable/use-master-detail.svelte";
import { getVisit } from "$lib/components/patient/admission/api/patient-admission-api";
import MasterPage from "$lib/components/patient/admission/page/master-page.svelte";
import ViewPage from "$lib/components/patient/admission/page/view-page.svelte";
import CreatePage from "$lib/components/patient/admission/page/create-page.svelte";
import EditPage from "$lib/components/patient/admission/page/edit-page.svelte";
const masterDetail = useMasterDetail({
onSelect: async (row) => {
return await getVisit(row.InternalPID);
},
});
</script>
<div class="flex w-full h-full overflow-hidden">
{#if masterDetail.showMaster}
<MasterPage {masterDetail} />
{/if}
<Separator orientation="vertical"/>
{#if masterDetail.showDetail}
<main class={`${masterDetail.isMobile ? 'w-full' : masterDetail.isFormMode ? 'w-[97%] flex flex-col items-start' : 'w-[65%]'} h-full overflow-y-auto flex flex-col items-center transition-all duration-300`}>
{#if masterDetail.mode === "view"}
<ViewPage {masterDetail}/>
{:else if masterDetail.mode === "create"}
<CreatePage {masterDetail}/>
{:else if masterDetail.mode === "edit"}
<EditPage {masterDetail}/>
{/if}
</main>
{/if}
</div>

10
src/routes/patient/+page.svelte → src/routes/patient/list/+page.svelte
View File

@ -1,11 +1,11 @@
<script>
import { Separator } from "$lib/components/ui/separator/index.js";
import { useMasterDetail } from "$lib/components/composable/use-master-detail.svelte";
import { getPatient } from "$lib/components/patient/api/patient-api";
import MasterPage from "$lib/components/patient/page/master-page.svelte";
import ViewPage from "$lib/components/patient/page/view-page.svelte";
import CreatePage from "$lib/components/patient/page/create-page.svelte";
import EditPage from "$lib/components/patient/page/edit-page.svelte";
import { getPatient } from "$lib/components/patient/list/api/patient-list-api";
import MasterPage from "$lib/components/patient/list/page/master-page.svelte";
import ViewPage from "$lib/components/patient/list/page/view-page.svelte";
import CreatePage from "$lib/components/patient/list/page/create-page.svelte";
import EditPage from "$lib/components/patient/list/page/edit-page.svelte";
const masterDetail = useMasterDetail({
onSelect: async (row) => {