From 644feff29f0a8952a7cf52403743ea1ca4b42906 Mon Sep 17 00:00:00 2001
From: faiztyanirh <faiztyan.irham@yahoo.co.id>
Date: Tue, 3 Feb 2026 16:56:39 +0700
Subject: [PATCH] fix label sex tidak tampil, fix custodian modal bisa
 multiselect

---
 .../admission/modal/search-param-modal.svelte | 88 +++++++++++++++++--
 .../patient/admission/page/master-page.svelte |  9 +-
 .../patient/list/modal/custodian-modal.svelte |  4 +-
 .../patient/list/modal/linkto-modal.svelte    |  2 +-
 .../reusable/reusable-data-table.svelte       | 26 +++---
 5 files changed, 107 insertions(+), 22 deletions(-)

diff --git a/src/lib/components/patient/admission/modal/search-param-modal.svelte b/src/lib/components/patient/admission/modal/search-param-modal.svelte
index c012425..e16830b 100644
--- a/src/lib/components/patient/admission/modal/search-param-modal.svelte
+++ b/src/lib/components/patient/admission/modal/search-param-modal.svelte
@@ -1,24 +1,53 @@
 <script>
+    import * as Table from "$lib/components/ui/table/index.js";
     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";
+    import { Checkbox } from "$lib/components/ui/checkbox/index.js";
+    import * as Popover from "$lib/components/ui/popover/index.js";
 
     let props = $props();
 
     let activeRowId = $state(null);
+
+    let selectedPatient = $state({
+        InternalPID: null,
+        PatientID: null,
+    });
+
+    const isPatientEmpty = $derived(!selectedPatient.InternalPID || !selectedPatient.PatientID);
+
+    function togglePatientSelection(patient) {
+        if (selectedPatient.InternalPID === patient.InternalPID) {
+            selectedPatient = {
+                InternalPID: null,
+                PatientID: null,
+            };
+        } else {
+            selectedPatient = {
+                InternalPID: patient.InternalPID,
+                PatientID: patient.PatientID,
+            };
+        }
+    }
+
+    function handleButtonClick() {
+        if (selectedPatient) {
+        props.onConfirm(selectedPatient.InternalPID);
+        }
+    }
 </script>
 
 <div class="w-full h-110">
-    <div class="flex gap-2 h-full">
+    <div class="flex gap-4 h-full">
         <div class="w-1/3">
             <div class="space-y-2">
                 {#each props.searchFields as field}
@@ -53,7 +82,7 @@
             <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}
+                    {#if props.search.isLoading}
                         <Spinner />
                     {:else}
                         Search
@@ -61,9 +90,58 @@
                 </Button>
             </div>
         </div>
-        <div class="flex flex-1 w-full h-full justify-center items-center">
+        <div class="flex w-2/3 h-full justify-center items-start">
             {#if props.search.searchData && props.search.searchData.length > 0}
-                <ReusableDataTable data={props.search.searchData} columns={patientColumns} {activeRowId} rowIdKey="InternalPID"/>
+                <div class="flex flex-col h-full gap-2">
+                    <div class="flex-1">
+                        <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 props.search.searchData as patient, i}
+                                    <Table.Row 
+                                        class="cursor-pointer hover:bg-muted/50"
+                                        onclick={() => togglePatientSelection(patient)}
+                                    >
+                                        <Table.Cell onclick={(e) => e.stopPropagation()}>
+                                            <Checkbox 
+                                                class="cursor-pointer hover:bg-muted/50"
+                                                checked={selectedPatient.InternalPID === patient.InternalPID}
+                                                onCheckedChange={() => togglePatientSelection(patient)}
+                                            />
+                                        </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.SexLabel}</Table.Cell>
+                                    </Table.Row>
+                                {/each}
+                            </Table.Body>
+                        </Table.Root>
+                    </div>
+                    <div class="flex justify-end gap-2 mt-4">
+                        <Popover.Close>
+                            <Button 
+                            size="sm" 
+                            class="cursor-pointer" 
+                            disabled={isPatientEmpty} 
+                            onclick={handleButtonClick}
+                            >
+                            Confirm
+                            </Button>
+                        </Popover.Close>
+                        <!-- <Button size="sm" class="cursor-pointer" disabled={isPatientEmpty} onclick={handleButtonClick}>
+                            Select Patient
+                        </Button> -->
+                    </div>
+                </div>
             {:else}
                 <div class="flex h-full">
                     <ReusableEmpty desc="Try searching from search parameters"/>
diff --git a/src/lib/components/patient/admission/page/master-page.svelte b/src/lib/components/patient/admission/page/master-page.svelte
index 72ca18c..5c218bc 100644
--- a/src/lib/components/patient/admission/page/master-page.svelte
+++ b/src/lib/components/patient/admission/page/master-page.svelte
@@ -10,17 +10,22 @@
 	import ReusableDataTable from "$lib/components/reusable/reusable-data-table.svelte";
 
     let props = $props();
+    let selectedInternalPid = $state(null);
+    let tableData = $state([]);
 
     const search = useSearch(searchFields, searchParam);
     const actions = admissionActions(props.masterDetail)
     actions.find(a => a.label === 'Search Parameters').popoverContent = searchParamSnippet;
 
 	let activeRowId = $state(null);
+
+    function handlePatientConfirm(internalPid) {
+        console.log(internalPid);
+    }
 </script>
 
 {#snippet searchParamSnippet()} 
-	<SearchParamModal {search} {searchFields}/>
-	<!-- <SearchParamModal {searchFields} {searchData} bind:searchQuery={search.searchQuery} onSearch={search.handleSearch} onReset={search.handleReset} isLoading={search.isLoading}/> -->
+	<SearchParamModal {search} {searchFields} onConfirm={handlePatientConfirm}/>
 {/snippet}
 
 <div 
diff --git a/src/lib/components/patient/list/modal/custodian-modal.svelte b/src/lib/components/patient/list/modal/custodian-modal.svelte
index a8f647b..75a17a4 100644
--- a/src/lib/components/patient/list/modal/custodian-modal.svelte
+++ b/src/lib/components/patient/list/modal/custodian-modal.svelte
@@ -131,7 +131,7 @@
                                 class="cursor-pointer hover:bg-muted/50"
                                 onclick={() => togglePatientSelection(patient)}
                             >
-                                <Table.Cell>
+                                <Table.Cell onclick={(e) => e.stopPropagation()}>
                                     <Checkbox 
                                         class="cursor-pointer hover:bg-muted/50"
                                         checked={selectedPatient.InternalPID === patient.InternalPID}
@@ -141,7 +141,7 @@
                                 <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.Cell class="font-medium">{patient.SexLabel}</Table.Cell>
                             </Table.Row>
                         {/each}
                     </Table.Body>
diff --git a/src/lib/components/patient/list/modal/linkto-modal.svelte b/src/lib/components/patient/list/modal/linkto-modal.svelte
index e56fda6..0846b98 100644
--- a/src/lib/components/patient/list/modal/linkto-modal.svelte
+++ b/src/lib/components/patient/list/modal/linkto-modal.svelte
@@ -165,7 +165,7 @@
                                 <Table.Cell class="text-muted-foreground">
                                     {patient.Birthdate ? patient.Birthdate.split(" ")[0] : ""}
                                 </Table.Cell>
-                                <Table.Cell class="font-medium">{patient.Gender}</Table.Cell>
+                                <Table.Cell class="font-medium">{patient.SexLabel}</Table.Cell>
                             </Table.Row>
                         {/each}
                     </Table.Body>
diff --git a/src/lib/components/reusable/reusable-data-table.svelte b/src/lib/components/reusable/reusable-data-table.svelte
index 7aefeb4..1f5a0a7 100644
--- a/src/lib/components/reusable/reusable-data-table.svelte
+++ b/src/lib/components/reusable/reusable-data-table.svelte
@@ -60,18 +60,20 @@
     getFilteredRowModel: getFilteredRowModel(),
   });
 </script>
-<div class="h-full flex flex-col relative">
-  <div class="flex items-center absolute top-[-2rem]">
-    <Input
-        placeholder="Filter all columns..."
-        value={globalFilter}
-        oninput={(e) => {
-            globalFilter = e.currentTarget.value;
-        }}
-        class="h-7 w-64 text-xs px-2"
-    />
-  </div>
-  <div class="rounded-md border h-full flex flex-col">
+<div class="h-full flex flex-col relative w-full">
+  {#if props.searchable ?? true}
+    <div class="flex items-center absolute top-[-2rem]">
+      <Input
+          placeholder="Filter all columns..."
+          value={globalFilter}
+          oninput={(e) => {
+              globalFilter = e.currentTarget.value;
+          }}
+          class="h-7 w-64 text-xs px-2"
+      />
+    </div>
+  {/if}
+  <div class="rounded-md border h-full flex flex-col w-full">
     <Table.Root>
       <Table.Header>
         {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}