From ea1369f69bc594260041bb925ce4e8c85041bf13 Mon Sep 17 00:00:00 2001
From: faiztyanirh <faiztyan.irham@yahoo.co.id>
Date: Tue, 14 Apr 2026 10:46:47 +0700
Subject: [PATCH] change all page (add indicator spinner rowclick, popover
 autoclose after search)

---
 .../account/config/account-config.js          |   8 +-
 .../account/page/create-page.svelte           |  10 +-
 .../account/page/master-page.svelte           |  22 ++--
 .../dictionary/account/page/view-page.svelte  |   7 +-
 .../contact/page/master-page.svelte           |   4 +-
 .../dictionary/contact/page/view-page.svelte  |   7 +-
 .../container/config/container-config.js      |   8 +-
 .../container/page/create-page.svelte         |  10 +-
 .../container/page/master-page.svelte         |  22 ++--
 .../container/page/view-page.svelte           |   7 +-
 .../department/config/department-config.js    |   8 +-
 .../department/page/create-page.svelte        |  10 +-
 .../department/page/master-page.svelte        |  22 ++--
 .../department/page/view-page.svelte          |   7 +-
 .../discipline/config/discipline-config.js    |   8 +-
 .../discipline/page/create-page.svelte        |  10 +-
 .../discipline/page/master-page.svelte        |  22 ++--
 .../discipline/page/view-page.svelte          |   7 +-
 .../location/page/master-page.svelte          |   4 +-
 .../dictionary/location/page/view-page.svelte |   7 +-
 .../occupation/page/create-page.svelte        |  10 +-
 .../dictionary/site/config/site-config.js     |   8 +-
 .../dictionary/site/page/create-page.svelte   |  10 +-
 .../dictionary/site/page/master-page.svelte   |  22 ++--
 .../dictionary/site/page/view-page.svelte     |   7 +-
 .../dictionary/test/config/test-config.js     |   8 +-
 .../dictionary/test/page/create-page.svelte   |  10 +-
 .../dictionary/test/page/edit-page.svelte     |  11 +-
 .../dictionary/test/page/master-page.svelte   |  22 ++--
 .../dictionary/test/page/view-page.svelte     |   7 +-
 .../testmap/config/testmap-config.js          |   8 +-
 .../testmap/page/create-page.svelte           |  10 +-
 .../testmap/page/master-page.svelte           |  12 +-
 .../testmap/page/view-page copy.svelte        | 123 ------------------
 .../dictionary/testmap/page/view-page.svelte  |   7 +-
 .../workstation/config/workstation-config.js  |   8 +-
 .../workstation/page/create-page.svelte       |  10 +-
 .../workstation/page/master-page.svelte       |  22 ++--
 .../workstation/page/view-page.svelte         |   7 +-
 .../patient/list/page/master-page.svelte      |   4 +-
 .../patient/list/page/view-page.svelte        |   7 +-
 .../components/topbar/topbar-action.svelte    |   1 -
 42 files changed, 314 insertions(+), 230 deletions(-)
 delete mode 100644 src/lib/components/dictionary/testmap/page/view-page copy.svelte

diff --git a/src/lib/components/dictionary/account/config/account-config.js b/src/lib/components/dictionary/account/config/account-config.js
index de85664..c7942e1 100644
--- a/src/lib/components/dictionary/account/config/account-config.js
+++ b/src/lib/components/dictionary/account/config/account-config.js
@@ -2,6 +2,7 @@ import PlusIcon from "@lucide/svelte/icons/plus";
 import Settings2Icon from "@lucide/svelte/icons/settings-2";
 import PencilIcon from "@lucide/svelte/icons/pencil";
 import { API } from "$lib/config/api";
+import RefreshIcon from "@lucide/svelte/icons/refresh-cw";
 
 export const searchFields = [
     {
@@ -72,8 +73,13 @@ export const detailSections = [
     },
 ];
 
-export function accountActions(masterDetail) {
+export function accountActions(masterDetail, handlers) {
     return [
+        { 
+            Icon: RefreshIcon, 
+            label: 'Refresh Data',
+            onClick: handlers.refresh,
+        },
         { 
             Icon: PlusIcon, 
             label: 'Add Account',
diff --git a/src/lib/components/dictionary/account/page/create-page.svelte b/src/lib/components/dictionary/account/page/create-page.svelte
index 1ec3666..dc61d98 100644
--- a/src/lib/components/dictionary/account/page/create-page.svelte
+++ b/src/lib/components/dictionary/account/page/create-page.svelte
@@ -26,8 +26,14 @@
     async function handleSave() {
         const result = await formState.save(masterDetail.mode);
 
-        toast('Account Created!');
-        masterDetail?.exitForm(true);
+        if (result.status === 'success') {
+            toast('Account Created!');
+            masterDetail?.exitForm(true);
+        } else {
+            console.error('Failed to save account');
+            const errorMessages = result.messages ? Object.values(result.messages).join('\n') : 'Failed to save account';
+            toast.error(errorMessages)
+        }
     }
 
     const primaryAction = $derived({
diff --git a/src/lib/components/dictionary/account/page/master-page.svelte b/src/lib/components/dictionary/account/page/master-page.svelte
index ad12e27..c6972e3 100644
--- a/src/lib/components/dictionary/account/page/master-page.svelte
+++ b/src/lib/components/dictionary/account/page/master-page.svelte
@@ -8,20 +8,23 @@
     import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
 	import ReusableDataTable from "$lib/components/reusable/reusable-data-table.svelte";
     import UserRoundXIcon from "@lucide/svelte/icons/user-round-x";
+    import MoveLeftIcon from "@lucide/svelte/icons/move-left";
 
     let props = $props();
 
     const search = useSearch(searchFields, getAccounts);
-    const initialForm = props.masterDetail.formState.form;
-    const actions = accountActions(props.masterDetail, initialForm)
+    const handlers = {
+        refresh: () => {search.handleSearch()},
+    };
+    const actions = accountActions(props.masterDetail, handlers)
     actions.find(a => a.label === 'Search Parameters').popoverContent = searchParamSnippet;
 
 	let activeRowId = $state(null);
 </script>
 
-{#snippet searchParamSnippet()} 
+{#snippet searchParamSnippet(close)} 
 	<ReusableSearchParam {searchFields} 
-        bind:searchQuery={search.searchQuery} onSearch={search.handleSearch} onReset={search.handleReset} isLoading={search.isLoading}
+        bind:searchQuery={search.searchQuery} onSearch={() => search.handleSearch(close)} onReset={search.handleReset} isLoading={search.isLoading}
         selectOptions={search.selectOptions} loadingOptions={search.loadingOptions} fetchOptions={search.fetchOptions}
     />
 {/snippet}
@@ -38,10 +41,13 @@
 >
     <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 "ACCOUNT".split("") as c}
-                    <span class="leading-none">{c}</span>
-                {/each}
+            <span class="flex flex-col items-center justify-start gap-4 tracking-widest font-semibold select-none h-full">
+                <MoveLeftIcon />
+                <div class="flex flex-col items-center justify-center flex-grow gap-4">
+                    {#each "ACCOUNT".split("") as c}
+                        <span class="leading-none">{c}</span>
+                    {/each}
+                </div>
             </span>
         {/if}
 
diff --git a/src/lib/components/dictionary/account/page/view-page.svelte b/src/lib/components/dictionary/account/page/view-page.svelte
index 42435df..16e6b44 100644
--- a/src/lib/components/dictionary/account/page/view-page.svelte
+++ b/src/lib/components/dictionary/account/page/view-page.svelte
@@ -4,6 +4,7 @@
     import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
     import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
     import UserRoundXIcon from "@lucide/svelte/icons/user-round-x";
+    import { Spinner } from "$lib/components/ui/spinner/index.js";
 
     let props = $props();
 
@@ -46,7 +47,11 @@
     </div>
 {/snippet}
 
-{#if masterDetail.selectedItem}
+{#if masterDetail.isLoadingDetail}
+    <div class="h-full w-full flex items-center justify-center">
+        <Spinner class="size-6" />
+    </div> 
+{:else if masterDetail.selectedItem}
     <div class="flex flex-col px-2 py-1 gap-2 h-full w-full">
         <TopbarWrapper 
             title={masterDetail.selectedItem.data.AccountName} 
diff --git a/src/lib/components/dictionary/contact/page/master-page.svelte b/src/lib/components/dictionary/contact/page/master-page.svelte
index eff5826..6a6591b 100644
--- a/src/lib/components/dictionary/contact/page/master-page.svelte
+++ b/src/lib/components/dictionary/contact/page/master-page.svelte
@@ -22,9 +22,9 @@
 	let activeRowId = $state(null);
 </script>
 
-{#snippet searchParamSnippet()} 
+{#snippet searchParamSnippet(close)} 
 	<ReusableSearchParam {searchFields} 
-        bind:searchQuery={search.searchQuery} onSearch={search.handleSearch} onReset={search.handleReset} isLoading={search.isLoading}
+        bind:searchQuery={search.searchQuery} onSearch={() => search.handleSearch(close)} onReset={search.handleReset} isLoading={search.isLoading}
         selectOptions={search.selectOptions} loadingOptions={search.loadingOptions} fetchOptions={search.fetchOptions}
     />
 {/snippet}
diff --git a/src/lib/components/dictionary/contact/page/view-page.svelte b/src/lib/components/dictionary/contact/page/view-page.svelte
index 188f10d..0ae7b3a 100644
--- a/src/lib/components/dictionary/contact/page/view-page.svelte
+++ b/src/lib/components/dictionary/contact/page/view-page.svelte
@@ -9,6 +9,7 @@
     import * as Card from "$lib/components/ui/card/index.js";
     import { Badge } from "$lib/components/ui/badge/index.js";
     import * as Table from "$lib/components/ui/table/index.js";
+    import { Spinner } from "$lib/components/ui/spinner/index.js";
 
     let props = $props();
 
@@ -97,7 +98,11 @@
     </div>
 {/snippet}
 
-{#if masterDetail.selectedItem}
+{#if masterDetail.isLoadingDetail}
+    <div class="h-full w-full flex items-center justify-center">
+        <Spinner class="size-6" />
+    </div>
+{:else if masterDetail.selectedItem}
     <div class="flex flex-col px-2 py-1 gap-2 h-full w-full">
         <TopbarWrapper 
             title={masterDetail.selectedItem.data.NameFirst} 
diff --git a/src/lib/components/dictionary/container/config/container-config.js b/src/lib/components/dictionary/container/config/container-config.js
index 15d2f2f..38fe4c0 100644
--- a/src/lib/components/dictionary/container/config/container-config.js
+++ b/src/lib/components/dictionary/container/config/container-config.js
@@ -1,6 +1,7 @@
 import PlusIcon from "@lucide/svelte/icons/plus";
 import Settings2Icon from "@lucide/svelte/icons/settings-2";
 import PencilIcon from "@lucide/svelte/icons/pencil";
+import RefreshIcon from "@lucide/svelte/icons/refresh-cw";
 
 export const searchFields = [
     {
@@ -35,8 +36,13 @@ export const detailSections = [
     },
 ];
 
-export function containerActions(masterDetail) {
+export function containerActions(masterDetail, handlers) {
     return [
+        { 
+            Icon: RefreshIcon, 
+            label: 'Refresh Data',
+            onClick: handlers.refresh,
+        },
         { 
             Icon: PlusIcon, 
             label: 'Add Location',
diff --git a/src/lib/components/dictionary/container/page/create-page.svelte b/src/lib/components/dictionary/container/page/create-page.svelte
index b86351d..4e3150d 100644
--- a/src/lib/components/dictionary/container/page/create-page.svelte
+++ b/src/lib/components/dictionary/container/page/create-page.svelte
@@ -26,8 +26,14 @@
     async function handleSave() {
         const result = await formState.save(masterDetail.mode);
 
-        toast('Container Created!');
-        masterDetail?.exitForm(true);
+        if (result.status === 'success') {
+            toast('Container Created!');
+            masterDetail?.exitForm(true);
+        } else {
+            console.error('Failed to save container');
+            const errorMessages = result.messages ? Object.values(result.messages).join('\n') : 'Failed to save container';
+            toast.error(errorMessages)
+        }
     }
 
     const primaryAction = $derived({
diff --git a/src/lib/components/dictionary/container/page/master-page.svelte b/src/lib/components/dictionary/container/page/master-page.svelte
index 013b893..9ef4572 100644
--- a/src/lib/components/dictionary/container/page/master-page.svelte
+++ b/src/lib/components/dictionary/container/page/master-page.svelte
@@ -8,20 +8,23 @@
     import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
 	import ReusableDataTable from "$lib/components/reusable/reusable-data-table.svelte";
     import ArchiveXIcon from "@lucide/svelte/icons/archive-x";
+    import MoveLeftIcon from "@lucide/svelte/icons/move-left";
 
     let props = $props();
 
     const search = useSearch(searchFields, getContainers);
-    const initialForm = props.masterDetail.formState.form;
-    const actions = containerActions(props.masterDetail, initialForm)
+    const handlers = {
+        refresh: () => {search.handleSearch()},
+    };
+    const actions = containerActions(props.masterDetail, handlers)
     actions.find(a => a.label === 'Search Parameters').popoverContent = searchParamSnippet;
 
 	let activeRowId = $state(null);
 </script>
 
-{#snippet searchParamSnippet()} 
+{#snippet searchParamSnippet(close)} 
 	<ReusableSearchParam {searchFields} 
-        bind:searchQuery={search.searchQuery} onSearch={search.handleSearch} onReset={search.handleReset} isLoading={search.isLoading}
+        bind:searchQuery={search.searchQuery} onSearch={() => search.handleSearch(close)} onReset={search.handleReset} isLoading={search.isLoading}
         selectOptions={search.selectOptions} loadingOptions={search.loadingOptions} fetchOptions={search.fetchOptions}
     />
 {/snippet}
@@ -38,10 +41,13 @@
 >
     <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 "CONTAINER".split("") as c}
-                    <span class="leading-none">{c}</span>
-                {/each}
+            <span class="flex flex-col items-center justify-start gap-4 tracking-widest font-semibold select-none h-full">
+                <MoveLeftIcon />
+                <div class="flex flex-col items-center justify-center flex-grow gap-4">
+                    {#each "CONTAINER".split("") as c}
+                        <span class="leading-none">{c}</span>
+                    {/each}
+                </div>
             </span>
         {/if}
 
diff --git a/src/lib/components/dictionary/container/page/view-page.svelte b/src/lib/components/dictionary/container/page/view-page.svelte
index 7b9985b..1bf7fa0 100644
--- a/src/lib/components/dictionary/container/page/view-page.svelte
+++ b/src/lib/components/dictionary/container/page/view-page.svelte
@@ -4,6 +4,7 @@
     import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
     import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
     import ArchiveXIcon from "@lucide/svelte/icons/archive-x";
+    import { Spinner } from "$lib/components/ui/spinner/index.js";
 
     let props = $props();
 
@@ -46,7 +47,11 @@
     </div>
 {/snippet}
 
-{#if masterDetail.selectedItem}
+{#if masterDetail.isLoadingDetail}
+    <div class="h-full w-full flex items-center justify-center">
+        <Spinner class="size-6" />
+    </div> 
+{:else if masterDetail.selectedItem}
     <div class="flex flex-col px-2 py-1 gap-2 h-full w-full">
         <TopbarWrapper 
             title={masterDetail.selectedItem.data.ConName} 
diff --git a/src/lib/components/dictionary/department/config/department-config.js b/src/lib/components/dictionary/department/config/department-config.js
index 1863679..b6763fc 100644
--- a/src/lib/components/dictionary/department/config/department-config.js
+++ b/src/lib/components/dictionary/department/config/department-config.js
@@ -2,6 +2,7 @@ import PlusIcon from "@lucide/svelte/icons/plus";
 import Settings2Icon from "@lucide/svelte/icons/settings-2";
 import PencilIcon from "@lucide/svelte/icons/pencil";
 import { API } from "$lib/config/api";
+import RefreshIcon from "@lucide/svelte/icons/refresh-cw";
 
 export const searchFields = [
     {
@@ -28,8 +29,13 @@ export const detailSections = [
     },
 ];
 
-export function departmentActions(masterDetail) {
+export function departmentActions(masterDetail, handlers) {
     return [
+        { 
+            Icon: RefreshIcon, 
+            label: 'Refresh Data',
+            onClick: handlers.refresh,
+        },
         { 
             Icon: PlusIcon, 
             label: 'Add Department',
diff --git a/src/lib/components/dictionary/department/page/create-page.svelte b/src/lib/components/dictionary/department/page/create-page.svelte
index b05a0f6..4dcc774 100644
--- a/src/lib/components/dictionary/department/page/create-page.svelte
+++ b/src/lib/components/dictionary/department/page/create-page.svelte
@@ -26,8 +26,14 @@
     async function handleSave() {
         const result = await formState.save(masterDetail.mode);
 
-        toast('Department Created!');
-        masterDetail?.exitForm(true);
+        if (result.status === 'success') {
+            toast('Department Created!');
+            masterDetail?.exitForm(true);
+        } else {
+            console.error('Failed to save department');
+            const errorMessages = result.messages ? Object.values(result.messages).join('\n') : 'Failed to save department';
+            toast.error(errorMessages)
+        }
     }
 
     const primaryAction = $derived({
diff --git a/src/lib/components/dictionary/department/page/master-page.svelte b/src/lib/components/dictionary/department/page/master-page.svelte
index 5fee30b..4ef85b6 100644
--- a/src/lib/components/dictionary/department/page/master-page.svelte
+++ b/src/lib/components/dictionary/department/page/master-page.svelte
@@ -8,20 +8,23 @@
     import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
 	import ReusableDataTable from "$lib/components/reusable/reusable-data-table.svelte";
     import FileXIcon from "@lucide/svelte/icons/file-x";
+    import MoveLeftIcon from "@lucide/svelte/icons/move-left";
 
     let props = $props();
 
     const search = useSearch(searchFields, getDepartments);
-    const initialForm = props.masterDetail.formState.form;
-    const actions = departmentActions(props.masterDetail, initialForm)
+    const handlers = {
+        refresh: () => {search.handleSearch()},
+    };
+    const actions = departmentActions(props.masterDetail, handlers)
     actions.find(a => a.label === 'Search Parameters').popoverContent = searchParamSnippet;
 
 	let activeRowId = $state(null);
 </script>
 
-{#snippet searchParamSnippet()} 
+{#snippet searchParamSnippet(close)} 
 	<ReusableSearchParam {searchFields} 
-        bind:searchQuery={search.searchQuery} onSearch={search.handleSearch} onReset={search.handleReset} isLoading={search.isLoading}
+        bind:searchQuery={search.searchQuery} onSearch={() => search.handleSearch(close)} onReset={search.handleReset} isLoading={search.isLoading}
         selectOptions={search.selectOptions} loadingOptions={search.loadingOptions} fetchOptions={search.fetchOptions}
     />
 {/snippet}
@@ -38,10 +41,13 @@
 >
     <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 "DEPARTMENT".split("") as c}
-                    <span class="leading-none">{c}</span>
-                {/each}
+            <span class="flex flex-col items-center justify-start gap-4 tracking-widest font-semibold select-none h-full">
+                <MoveLeftIcon />
+                <div class="flex flex-col items-center justify-center flex-grow gap-4">
+                    {#each "DEPARTMENT".split("") as c}
+                        <span class="leading-none">{c}</span>
+                    {/each}
+                </div>
             </span>
         {/if}
 
diff --git a/src/lib/components/dictionary/department/page/view-page.svelte b/src/lib/components/dictionary/department/page/view-page.svelte
index d849226..090483e 100644
--- a/src/lib/components/dictionary/department/page/view-page.svelte
+++ b/src/lib/components/dictionary/department/page/view-page.svelte
@@ -4,6 +4,7 @@
     import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
     import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
     import FileXIcon from "@lucide/svelte/icons/file-x";
+    import { Spinner } from "$lib/components/ui/spinner/index.js";
 
     let props = $props();
 
@@ -46,7 +47,11 @@
     </div>
 {/snippet}
 
-{#if masterDetail.selectedItem}
+{#if masterDetail.isLoadingDetail}
+    <div class="h-full w-full flex items-center justify-center">
+        <Spinner class="size-6" />
+    </div> 
+{:else if masterDetail.selectedItem}
     <div class="flex flex-col px-2 py-1 gap-2 h-full w-full">
         <TopbarWrapper 
             title={masterDetail.selectedItem.data.DepartmentName} 
diff --git a/src/lib/components/dictionary/discipline/config/discipline-config.js b/src/lib/components/dictionary/discipline/config/discipline-config.js
index 185b557..60088eb 100644
--- a/src/lib/components/dictionary/discipline/config/discipline-config.js
+++ b/src/lib/components/dictionary/discipline/config/discipline-config.js
@@ -2,6 +2,7 @@ import PlusIcon from "@lucide/svelte/icons/plus";
 import Settings2Icon from "@lucide/svelte/icons/settings-2";
 import PencilIcon from "@lucide/svelte/icons/pencil";
 import { API } from "$lib/config/api";
+import RefreshIcon from "@lucide/svelte/icons/refresh-cw";
 
 export const searchFields = [
     {
@@ -30,8 +31,13 @@ export const detailSections = [
     },
 ];
 
-export function disciplineActions(masterDetail) {
+export function disciplineActions(masterDetail, handlers) {
     return [
+        { 
+            Icon: RefreshIcon, 
+            label: 'Refresh Data',
+            onClick: handlers.refresh,
+        },
         { 
             Icon: PlusIcon, 
             label: 'Add Discipline',
diff --git a/src/lib/components/dictionary/discipline/page/create-page.svelte b/src/lib/components/dictionary/discipline/page/create-page.svelte
index eff86c3..1b06535 100644
--- a/src/lib/components/dictionary/discipline/page/create-page.svelte
+++ b/src/lib/components/dictionary/discipline/page/create-page.svelte
@@ -26,8 +26,14 @@
     async function handleSave() {
         const result = await formState.save(masterDetail.mode);
 
-        toast('Discipline Created!');
-        masterDetail?.exitForm(true);
+        if (result.status === 'success') {
+            toast('Discipline Created!');
+            masterDetail?.exitForm(true);
+        } else {
+            console.error('Failed to save discipline');
+            const errorMessages = result.messages ? Object.values(result.messages).join('\n') : 'Failed to save discipline';
+            toast.error(errorMessages)
+        }
     }
 
     const primaryAction = $derived({
diff --git a/src/lib/components/dictionary/discipline/page/master-page.svelte b/src/lib/components/dictionary/discipline/page/master-page.svelte
index 454dc9f..fc850f1 100644
--- a/src/lib/components/dictionary/discipline/page/master-page.svelte
+++ b/src/lib/components/dictionary/discipline/page/master-page.svelte
@@ -8,20 +8,23 @@
     import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
 	import ReusableDataTable from "$lib/components/reusable/reusable-data-table.svelte";
     import BookXIcon from "@lucide/svelte/icons/book-x";
+    import MoveLeftIcon from "@lucide/svelte/icons/move-left";
 
     let props = $props();
 
     const search = useSearch(searchFields, getDisciplines);
-    const initialForm = props.masterDetail.formState.form;
-    const actions = disciplineActions(props.masterDetail, initialForm)
+    const handlers = {
+        refresh: () => {search.handleSearch()},
+    };
+    const actions = disciplineActions(props.masterDetail, handlers)
     actions.find(a => a.label === 'Search Parameters').popoverContent = searchParamSnippet;
 
 	let activeRowId = $state(null);
 </script>
 
-{#snippet searchParamSnippet()} 
+{#snippet searchParamSnippet(close)} 
 	<ReusableSearchParam {searchFields} 
-        bind:searchQuery={search.searchQuery} onSearch={search.handleSearch} onReset={search.handleReset} isLoading={search.isLoading}
+        bind:searchQuery={search.searchQuery} onSearch={() => search.handleSearch(close)} onReset={search.handleReset} isLoading={search.isLoading}
         selectOptions={search.selectOptions} loadingOptions={search.loadingOptions} fetchOptions={search.fetchOptions}
     />
 {/snippet}
@@ -38,10 +41,13 @@
 >
     <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 "DISCIPLINE".split("") as c}
-                    <span class="leading-none">{c}</span>
-                {/each}
+            <span class="flex flex-col items-center justify-start gap-4 tracking-widest font-semibold select-none h-full">
+                <MoveLeftIcon />
+                <div class="flex flex-col items-center justify-center flex-grow gap-4">
+                    {#each "DISCIPLINE".split("") as c}
+                        <span class="leading-none">{c}</span>
+                    {/each}
+                </div>
             </span>
         {/if}
 
diff --git a/src/lib/components/dictionary/discipline/page/view-page.svelte b/src/lib/components/dictionary/discipline/page/view-page.svelte
index fd53235..c1ecaef 100644
--- a/src/lib/components/dictionary/discipline/page/view-page.svelte
+++ b/src/lib/components/dictionary/discipline/page/view-page.svelte
@@ -4,6 +4,7 @@
     import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
     import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
     import BookXIcon from "@lucide/svelte/icons/book-x";
+    import { Spinner } from "$lib/components/ui/spinner/index.js";
 
     let props = $props();
 
@@ -46,7 +47,11 @@
     </div>
 {/snippet}
 
-{#if masterDetail.selectedItem}
+{#if masterDetail.isLoadingDetail}
+    <div class="h-full w-full flex items-center justify-center">
+        <Spinner class="size-6" />
+    </div> 
+{:else if masterDetail.selectedItem}
     <div class="flex flex-col px-2 py-1 gap-2 h-full w-full">
         <TopbarWrapper 
             title={masterDetail.selectedItem.data.DisciplineName} 
diff --git a/src/lib/components/dictionary/location/page/master-page.svelte b/src/lib/components/dictionary/location/page/master-page.svelte
index 8de7230..e5f8dc5 100644
--- a/src/lib/components/dictionary/location/page/master-page.svelte
+++ b/src/lib/components/dictionary/location/page/master-page.svelte
@@ -22,9 +22,9 @@
 	let activeRowId = $state(null);
 </script>
 
-{#snippet searchParamSnippet()} 
+{#snippet searchParamSnippet(close)} 
 	<ReusableSearchParam {searchFields} 
-        bind:searchQuery={search.searchQuery} onSearch={search.handleSearch} onReset={search.handleReset} isLoading={search.isLoading}
+        bind:searchQuery={search.searchQuery} onSearch={() => search.handleSearch(close)} onReset={search.handleReset} isLoading={search.isLoading}
         selectOptions={search.selectOptions} loadingOptions={search.loadingOptions} fetchOptions={search.fetchOptions}
     />
 {/snippet}
diff --git a/src/lib/components/dictionary/location/page/view-page.svelte b/src/lib/components/dictionary/location/page/view-page.svelte
index 2bc89a6..6ee7958 100644
--- a/src/lib/components/dictionary/location/page/view-page.svelte
+++ b/src/lib/components/dictionary/location/page/view-page.svelte
@@ -4,6 +4,7 @@
     import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
     import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
     import MapPinXIcon from "@lucide/svelte/icons/map-pin-x";
+    import { Spinner } from "$lib/components/ui/spinner/index.js";
 
     let props = $props();
 
@@ -46,7 +47,11 @@
     </div>
 {/snippet}
 
-{#if masterDetail.selectedItem}
+{#if masterDetail.isLoadingDetail}
+    <div class="h-full w-full flex items-center justify-center">
+        <Spinner class="size-6" />
+    </div> 
+{:else if masterDetail.selectedItem}
     <div class="flex flex-col px-2 py-1 gap-2 h-full w-full">
         <TopbarWrapper 
             title={masterDetail.selectedItem.data.LocFull} 
diff --git a/src/lib/components/dictionary/occupation/page/create-page.svelte b/src/lib/components/dictionary/occupation/page/create-page.svelte
index b04d016..2c9404c 100644
--- a/src/lib/components/dictionary/occupation/page/create-page.svelte
+++ b/src/lib/components/dictionary/occupation/page/create-page.svelte
@@ -26,8 +26,14 @@
     async function handleSave() {
         const result = await formState.save(masterDetail.mode);
 
-        toast('Occupation Created!');
-        masterDetail?.exitForm(true);
+        if (result.status === 'success') {
+            toast('Occupation Created!');
+            masterDetail?.exitForm(true);
+        } else {
+            console.error('Failed to save occupation');
+            const errorMessages = result.messages ? Object.values(result.messages).join('\n') : 'Failed to save occupation';
+            toast.error(errorMessages)
+        }
     }
 
     const primaryAction = $derived({
diff --git a/src/lib/components/dictionary/site/config/site-config.js b/src/lib/components/dictionary/site/config/site-config.js
index c0029f0..41a1302 100644
--- a/src/lib/components/dictionary/site/config/site-config.js
+++ b/src/lib/components/dictionary/site/config/site-config.js
@@ -2,6 +2,7 @@ import PlusIcon from "@lucide/svelte/icons/plus";
 import Settings2Icon from "@lucide/svelte/icons/settings-2";
 import PencilIcon from "@lucide/svelte/icons/pencil";
 import { API } from "$lib/config/api";
+import RefreshIcon from "@lucide/svelte/icons/refresh-cw";
 
 export const searchFields = [
     {
@@ -35,8 +36,13 @@ export const detailSections = [
     },
 ];
 
-export function siteActions(masterDetail) {
+export function siteActions(masterDetail, handlers) {
     return [
+        { 
+            Icon: RefreshIcon, 
+            label: 'Refresh Data',
+            onClick: handlers.refresh,
+        },
         { 
             Icon: PlusIcon, 
             label: 'Add Site',
diff --git a/src/lib/components/dictionary/site/page/create-page.svelte b/src/lib/components/dictionary/site/page/create-page.svelte
index 40bcf16..ab7dc28 100644
--- a/src/lib/components/dictionary/site/page/create-page.svelte
+++ b/src/lib/components/dictionary/site/page/create-page.svelte
@@ -26,8 +26,14 @@
     async function handleSave() {
         const result = await formState.save(masterDetail.mode);
 
-        toast('Site Created!');
-        masterDetail?.exitForm(true);
+        if (result.status === 'success') {
+            toast('Site Created!');
+            masterDetail?.exitForm(true);
+        } else {
+            console.error('Failed to save site');
+            const errorMessages = result.messages ? Object.values(result.messages).join('\n') : 'Failed to save site';
+            toast.error(errorMessages)
+        }
     }
 
     const primaryAction = $derived({
diff --git a/src/lib/components/dictionary/site/page/master-page.svelte b/src/lib/components/dictionary/site/page/master-page.svelte
index 981915a..13b1264 100644
--- a/src/lib/components/dictionary/site/page/master-page.svelte
+++ b/src/lib/components/dictionary/site/page/master-page.svelte
@@ -8,20 +8,23 @@
     import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
 	import ReusableDataTable from "$lib/components/reusable/reusable-data-table.svelte";
     import ClipboardXIcon from "@lucide/svelte/icons/clipboard-x";
+    import MoveLeftIcon from "@lucide/svelte/icons/move-left";
 
     let props = $props();
 
     const search = useSearch(searchFields, getSites);
-    const initialForm = props.masterDetail.formState.form;
-    const actions = siteActions(props.masterDetail, initialForm)
+    const handlers = {
+        refresh: () => {search.handleSearch()},
+    };
+    const actions = siteActions(props.masterDetail, handlers)
     actions.find(a => a.label === 'Search Parameters').popoverContent = searchParamSnippet;
 
 	let activeRowId = $state(null);
 </script>
 
-{#snippet searchParamSnippet()} 
+{#snippet searchParamSnippet(close)} 
 	<ReusableSearchParam {searchFields} 
-        bind:searchQuery={search.searchQuery} onSearch={search.handleSearch} onReset={search.handleReset} isLoading={search.isLoading}
+        bind:searchQuery={search.searchQuery} onSearch={() => search.handleSearch(close)} onReset={search.handleReset} isLoading={search.isLoading}
         selectOptions={search.selectOptions} loadingOptions={search.loadingOptions} fetchOptions={search.fetchOptions}
     />
 {/snippet}
@@ -38,10 +41,13 @@
 >
     <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 "SITE".split("") as c}
-                    <span class="leading-none">{c}</span>
-                {/each}
+            <span class="flex flex-col items-center justify-start gap-4 tracking-widest font-semibold select-none h-full">
+                <MoveLeftIcon />
+                <div class="flex flex-col items-center justify-center flex-grow gap-4">
+                    {#each "SITE".split("") as c}
+                        <span class="leading-none">{c}</span>
+                    {/each}
+                </div>
             </span>
         {/if}
 
diff --git a/src/lib/components/dictionary/site/page/view-page.svelte b/src/lib/components/dictionary/site/page/view-page.svelte
index d7dbe7e..e100b70 100644
--- a/src/lib/components/dictionary/site/page/view-page.svelte
+++ b/src/lib/components/dictionary/site/page/view-page.svelte
@@ -4,6 +4,7 @@
     import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
     import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
     import ClipboardXIcon from "@lucide/svelte/icons/clipboard-x";
+    import { Spinner } from "$lib/components/ui/spinner/index.js";
 
     let props = $props();
 
@@ -46,7 +47,11 @@
     </div>
 {/snippet}
 
-{#if masterDetail.selectedItem}
+{#if masterDetail.isLoadingDetail}
+    <div class="h-full w-full flex items-center justify-center">
+        <Spinner class="size-6" />
+    </div> 
+{:else if masterDetail.selectedItem}
     <div class="flex flex-col px-2 py-1 gap-2 h-full w-full">
         <TopbarWrapper 
             title={masterDetail.selectedItem.data.SiteName} 
diff --git a/src/lib/components/dictionary/test/config/test-config.js b/src/lib/components/dictionary/test/config/test-config.js
index 7199d71..9ac2095 100644
--- a/src/lib/components/dictionary/test/config/test-config.js
+++ b/src/lib/components/dictionary/test/config/test-config.js
@@ -2,6 +2,7 @@ import PlusIcon from "@lucide/svelte/icons/plus";
 import Settings2Icon from "@lucide/svelte/icons/settings-2";
 import PencilIcon from "@lucide/svelte/icons/pencil";
 import { API } from "$lib/config/api";
+import RefreshIcon from "@lucide/svelte/icons/refresh-cw";
 
 export const searchFields = [
     {
@@ -36,8 +37,13 @@ export const detailSections = [
     },
 ];
 
-export function testActions(masterDetail) {
+export function testActions(masterDetail, handlers) {
     return [
+        { 
+            Icon: RefreshIcon, 
+            label: 'Refresh Data',
+            onClick: handlers.refresh,
+        },
         { 
             Icon: PlusIcon, 
             label: 'Add Test',
diff --git a/src/lib/components/dictionary/test/page/create-page.svelte b/src/lib/components/dictionary/test/page/create-page.svelte
index 5c63a06..144294e 100644
--- a/src/lib/components/dictionary/test/page/create-page.svelte
+++ b/src/lib/components/dictionary/test/page/create-page.svelte
@@ -132,8 +132,14 @@
 
 		const result = await formState.save(masterDetail.mode, payload);
 
-		toast('Test Created!');
-		masterDetail?.exitForm(true);
+		if (result.status === 'success') {
+            toast('Test Created!');
+            masterDetail?.exitForm(true);
+        } else {
+            console.error('Failed to save test');
+            const errorMessages = result.messages ? Object.values(result.messages).join('\n') : 'Failed to save test';
+            toast.error(errorMessages)
+        }
 	}
 
 	const primaryAction = $derived({
diff --git a/src/lib/components/dictionary/test/page/edit-page.svelte b/src/lib/components/dictionary/test/page/edit-page.svelte
index 4d4acd9..5889537 100644
--- a/src/lib/components/dictionary/test/page/edit-page.svelte
+++ b/src/lib/components/dictionary/test/page/edit-page.svelte
@@ -125,8 +125,15 @@
 
 		const result = await formState.save(masterDetail.mode, payload);
 
-		toast('Test Updated!');
-		masterDetail?.exitForm(true);
+		if (result.status === 'success') {
+            console.log('Test updated successfully');
+            toast('Test Updated!');
+            masterDetail.exitForm(true);
+        } else {
+            console.error('Failed to update test:', result.message);
+            const errorMessages = result.messages ? Object.values(result.messages).join('\n') : 'Failed to update test';
+            toast.error(errorMessages)
+        }
     }
 
     const primaryAction = $derived({
diff --git a/src/lib/components/dictionary/test/page/master-page.svelte b/src/lib/components/dictionary/test/page/master-page.svelte
index 5ebc759..ed082c1 100644
--- a/src/lib/components/dictionary/test/page/master-page.svelte
+++ b/src/lib/components/dictionary/test/page/master-page.svelte
@@ -8,20 +8,23 @@
     import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
 	import ReusableDataTable from "$lib/components/reusable/reusable-data-table.svelte";
     import FlaskConicalOffIcon from "@lucide/svelte/icons/flask-conical-off";
+    import MoveLeftIcon from "@lucide/svelte/icons/move-left";
 
     let props = $props();
 
     const search = useSearch(searchFields, getTests);
-    const initialForm = props.masterDetail.formState.form;
-    const actions = testActions(props.masterDetail, initialForm)
+    const handlers = {
+        refresh: () => {search.handleSearch()},
+    };
+    const actions = testActions(props.masterDetail, handlers)
     actions.find(a => a.label === 'Search Parameters').popoverContent = searchParamSnippet;
 
 	let activeRowId = $state(null);
 </script>
 
-{#snippet searchParamSnippet()} 
+{#snippet searchParamSnippet(close)} 
 	<ReusableSearchParam {searchFields} 
-        bind:searchQuery={search.searchQuery} onSearch={search.handleSearch} onReset={search.handleReset} isLoading={search.isLoading}
+        bind:searchQuery={search.searchQuery} onSearch={() => search.handleSearch(close)} onReset={search.handleReset} isLoading={search.isLoading}
         selectOptions={search.selectOptions} loadingOptions={search.loadingOptions} fetchOptions={search.fetchOptions}
     />
 {/snippet}
@@ -38,10 +41,13 @@
 >
     <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 "TEST".split("") as c}
-                    <span class="leading-none">{c}</span>
-                {/each}
+            <span class="flex flex-col items-center justify-start gap-4 tracking-widest font-semibold select-none h-full">
+                <MoveLeftIcon />
+                <div class="flex flex-col items-center justify-center flex-grow gap-4">
+                    {#each "TEST".split("") as c}
+                        <span class="leading-none">{c}</span>
+                    {/each}
+                </div>
             </span>
         {/if}
 
diff --git a/src/lib/components/dictionary/test/page/view-page.svelte b/src/lib/components/dictionary/test/page/view-page.svelte
index 32d1140..28915a1 100644
--- a/src/lib/components/dictionary/test/page/view-page.svelte
+++ b/src/lib/components/dictionary/test/page/view-page.svelte
@@ -4,6 +4,7 @@
     import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
     import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
     import FlaskConicalOffIcon from "@lucide/svelte/icons/flask-conical-off";
+    import { Spinner } from "$lib/components/ui/spinner/index.js";
 
     let props = $props();
 
@@ -46,7 +47,11 @@
     </div>
 {/snippet}
 
-{#if masterDetail.selectedItem}
+{#if masterDetail.isLoadingDetail}
+    <div class="h-full w-full flex items-center justify-center">
+        <Spinner class="size-6" />
+    </div> 
+{:else if masterDetail.selectedItem}
     <div class="flex flex-col px-2 py-1 gap-2 h-full w-full">
         <TopbarWrapper 
             title={masterDetail.selectedItem?.data?.TestSiteName} 
diff --git a/src/lib/components/dictionary/testmap/config/testmap-config.js b/src/lib/components/dictionary/testmap/config/testmap-config.js
index 6031de3..e57e33c 100644
--- a/src/lib/components/dictionary/testmap/config/testmap-config.js
+++ b/src/lib/components/dictionary/testmap/config/testmap-config.js
@@ -2,6 +2,7 @@ import PlusIcon from "@lucide/svelte/icons/plus";
 import Settings2Icon from "@lucide/svelte/icons/settings-2";
 import PencilIcon from "@lucide/svelte/icons/pencil";
 import { API } from "$lib/config/api";
+import RefreshIcon from "@lucide/svelte/icons/refresh-cw";
 
 export const searchFields = [
     {
@@ -35,8 +36,13 @@ export const detailSections = [
     },
 ];
 
-export function testMapActions(masterDetail) {
+export function testMapActions(masterDetail, handlers) {
     return [
+        { 
+            Icon: RefreshIcon, 
+            label: 'Refresh Data',
+            onClick: handlers.refresh,
+        },
         { 
             Icon: PlusIcon, 
             label: 'Add TestMap',
diff --git a/src/lib/components/dictionary/testmap/page/create-page.svelte b/src/lib/components/dictionary/testmap/page/create-page.svelte
index f4825eb..132d9f4 100644
--- a/src/lib/components/dictionary/testmap/page/create-page.svelte
+++ b/src/lib/components/dictionary/testmap/page/create-page.svelte
@@ -115,8 +115,14 @@
         console.log(payload)
         const result = await formState.save(masterDetail.mode, payload);
 
-        toast('Test Map Created!');
-        masterDetail?.exitForm(true);
+        if (result.status === 'success') {
+            toast('Test Map Created!');
+            masterDetail?.exitForm(true);
+        } else {
+            console.error('Failed to save test map');
+            const errorMessages = result.messages ? Object.values(result.messages).join('\n') : 'Failed to save test map';
+            toast.error(errorMessages)
+        }
     }
 
     const primaryAction = $derived({
diff --git a/src/lib/components/dictionary/testmap/page/master-page.svelte b/src/lib/components/dictionary/testmap/page/master-page.svelte
index e73ab44..33125fc 100644
--- a/src/lib/components/dictionary/testmap/page/master-page.svelte
+++ b/src/lib/components/dictionary/testmap/page/master-page.svelte
@@ -13,16 +13,18 @@
     let props = $props();
 
     const search = useSearch(searchFields, getTestMaps);
-    const initialForm = props.masterDetail.formState.form;
-    const actions = testMapActions(props.masterDetail, initialForm)
+    const handlers = {
+        refresh: () => {search.handleSearch()},
+    };
+    const actions = testMapActions(props.masterDetail, handlers)
     actions.find(a => a.label === 'Search Parameters').popoverContent = searchParamSnippet;
 
 	let activeRowId = $state(null);
 </script>
 
-{#snippet searchParamSnippet()} 
+{#snippet searchParamSnippet(close)} 
 	<ReusableSearchParam {searchFields} 
-        bind:searchQuery={search.searchQuery} onSearch={search.handleSearch} onReset={search.handleReset} isLoading={search.isLoading}
+        bind:searchQuery={search.searchQuery} onSearch={() => search.handleSearch(close)} onReset={search.handleReset} isLoading={search.isLoading}
         selectOptions={search.selectOptions} loadingOptions={search.loadingOptions} fetchOptions={search.fetchOptions}
     />
 {/snippet}
@@ -42,7 +44,7 @@
             <span class="flex flex-col items-center justify-start gap-4 tracking-widest font-semibold select-none h-full">
                 <MoveLeftIcon />
                 <div class="flex flex-col items-center justify-center flex-grow gap-4">
-                    {#each "BACK TO TEST MAP".split("") as c}
+                    {#each "TEST MAP".split("") as c}
                         <span class="leading-none">{c}</span>
                     {/each}
                 </div>
diff --git a/src/lib/components/dictionary/testmap/page/view-page copy.svelte b/src/lib/components/dictionary/testmap/page/view-page copy.svelte
deleted file mode 100644
index c074b07..0000000
--- a/src/lib/components/dictionary/testmap/page/view-page copy.svelte	
+++ /dev/null
@@ -1,123 +0,0 @@
-<script>
-    import { formatUTCDate } from "$lib/utils/formatUTCDate";
-    import { detailSections, viewActions } from "$lib/components/dictionary/testmap/config/testmap-config";
-    import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
-    import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
-    import MapIcon from "@lucide/svelte/icons/map";
-
-    let props = $props();
-
-    const { masterDetail, formFields, formActions, schema } = props.context;
-
-    let testMap = $derived(masterDetail?.selectedItem?.data);
-    $inspect(testMap)
-
-    const handlers = {
-        editTest: () => masterDetail.enterEdit("data"),
-    };
-
-    const actions = viewActions(handlers);
-
-    function getFieldValue(field) {
-        if (!testMap) return "-";
-
-        if (field.keys) {
-            return field.keys
-                .map(k => field.parentKey ? testMap[field.parentKey]?.[k] : testMap[k])
-                .filter(val => val && val.trim() !== "")
-                .join(" / ");
-        }
-
-        return field.parentKey ? testMap[field.parentKey]?.[field.key] : testMap[field.key];
-    }
-</script>
-
-{#snippet DetailsTable({ value, label })}
-    <div class="space-y-1.5">
-        <dt class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-            {label}
-        </dt>
-        <dd>
-            {#if value && Array.isArray(value) && value.length > 0}
-                <table class="w-full text-sm border border-border rounded-md overflow-hidden">
-                    <thead class="bg-muted text-muted-foreground">
-                        <tr>
-                            <th class="px-3 py-2 text-left font-medium text-xs uppercase tracking-wider">Host Test Code</th>
-                            <th class="px-3 py-2 text-left font-medium text-xs uppercase tracking-wider">Host Test Name</th>
-                            <th class="px-3 py-2 text-left font-medium text-xs uppercase tracking-wider">Client Test Code</th>
-                            <th class="px-3 py-2 text-left font-medium text-xs uppercase tracking-wider">Client Test Name</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {#each value as row, i}
-                            <tr class={i % 2 === 0 ? 'bg-background' : 'bg-muted/30'}>
-                                <td class="px-3 py-2">{row.HostTestCode ?? '-'}</td>
-                                <td class="px-3 py-2">{row.HostTestName ?? '-'}</td>
-                                <td class="px-3 py-2">{row.ClientTestCode ?? '-'}</td>
-                                <td class="px-3 py-2">{row.ClientTestName ?? '-'}</td>
-                            </tr>
-                        {/each}
-                    </tbody>
-                </table>
-            {:else}
-                <span class="text-sm font-medium">-</span>
-            {/if}
-        </dd>
-    </div>
-{/snippet}
-
-{#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 masterDetail.selectedItem}
-    <div class="flex flex-col px-2 py-1 gap-2 h-full w-full">
-        <TopbarWrapper 
-            title={masterDetail.selectedItem?.data?.HostType}
-            {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}
-                            {#if field.fullWidth}
-                                <div class="col-span-2">
-                                    {#if field.key === "details"}
-                                        {@render DetailsTable({ label: field.label, value: getFieldValue(field) })}
-                                    {:else}
-                                        {@render Fieldset({ label: field.label, value: getFieldValue(field), isUTCDate: field.isUTCDate })}
-                                    {/if}
-                                </div>
-                            {:else if field.key === "details"}
-                                {@render DetailsTable({
-                                    label: field.label,
-                                    value: getFieldValue(field),
-                                })}
-                            {:else}
-                                {@render Fieldset({
-                                    label: field.label,
-                                    value: getFieldValue(field),
-                                    isUTCDate: field.isUTCDate
-                                })}
-                            {/if}
-                        {/each}
-                    </div>
-                </div>
-            {/each}
-        </div>
-    </div>
-{:else}
-    <ReusableEmpty icon={MapIcon} desc="Select a test map to see details"/>
-{/if}
\ No newline at end of file
diff --git a/src/lib/components/dictionary/testmap/page/view-page.svelte b/src/lib/components/dictionary/testmap/page/view-page.svelte
index 68560d9..6e9cd1b 100644
--- a/src/lib/components/dictionary/testmap/page/view-page.svelte
+++ b/src/lib/components/dictionary/testmap/page/view-page.svelte
@@ -5,6 +5,7 @@
     import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
     import MapIcon from "@lucide/svelte/icons/map";
     import * as Table from "$lib/components/ui/table/index.js";
+    import { Spinner } from "$lib/components/ui/spinner/index.js";
 
     let props = $props();
 
@@ -85,7 +86,11 @@
     </div>
 {/snippet}
 
-{#if masterDetail.selectedItem}
+{#if masterDetail.isLoadingDetail}
+    <div class="h-full w-full flex items-center justify-center">
+        <Spinner class="size-6" />
+    </div> 
+{:else if masterDetail.selectedItem}
     <div class="flex flex-col px-2 py-1 gap-2 h-full w-full">
         <TopbarWrapper 
             title={masterDetail.selectedItem?.data?.HostType}
diff --git a/src/lib/components/dictionary/workstation/config/workstation-config.js b/src/lib/components/dictionary/workstation/config/workstation-config.js
index 98d338e..bec1715 100644
--- a/src/lib/components/dictionary/workstation/config/workstation-config.js
+++ b/src/lib/components/dictionary/workstation/config/workstation-config.js
@@ -2,6 +2,7 @@ import PlusIcon from "@lucide/svelte/icons/plus";
 import Settings2Icon from "@lucide/svelte/icons/settings-2";
 import PencilIcon from "@lucide/svelte/icons/pencil";
 import { API } from "$lib/config/api";
+import RefreshIcon from "@lucide/svelte/icons/refresh-cw";
 
 export const searchFields = [
     {
@@ -30,8 +31,13 @@ export const detailSections = [
     },
 ];
 
-export function workstationActions(masterDetail) {
+export function workstationActions(masterDetail, handlers) {
     return [
+        { 
+            Icon: RefreshIcon, 
+            label: 'Refresh Data',
+            onClick: handlers.refresh,
+        },
         { 
             Icon: PlusIcon, 
             label: 'Add Workstation',
diff --git a/src/lib/components/dictionary/workstation/page/create-page.svelte b/src/lib/components/dictionary/workstation/page/create-page.svelte
index a8d509a..97e6e23 100644
--- a/src/lib/components/dictionary/workstation/page/create-page.svelte
+++ b/src/lib/components/dictionary/workstation/page/create-page.svelte
@@ -26,8 +26,14 @@
     async function handleSave() {
         const result = await formState.save(masterDetail.mode);
 
-        toast('Workstation Created!');
-        masterDetail?.exitForm(true);
+        if (result.status === 'success') {
+            toast('Workstation Created!');
+            masterDetail?.exitForm(true);
+        } else {
+            console.error('Failed to save workstation');
+            const errorMessages = result.messages ? Object.values(result.messages).join('\n') : 'Failed to save workstation';
+            toast.error(errorMessages)
+        }
     }
 
     const primaryAction = $derived({
diff --git a/src/lib/components/dictionary/workstation/page/master-page.svelte b/src/lib/components/dictionary/workstation/page/master-page.svelte
index 29e0683..b89847b 100644
--- a/src/lib/components/dictionary/workstation/page/master-page.svelte
+++ b/src/lib/components/dictionary/workstation/page/master-page.svelte
@@ -8,20 +8,23 @@
     import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
 	import ReusableDataTable from "$lib/components/reusable/reusable-data-table.svelte";
     import MonitorXIcon from "@lucide/svelte/icons/monitor-x";
+    import MoveLeftIcon from "@lucide/svelte/icons/move-left";
 
     let props = $props();
 
     const search = useSearch(searchFields, getWorkstations);
-    const initialForm = props.masterDetail.formState.form;
-    const actions = workstationActions(props.masterDetail, initialForm)
+    const handlers = {
+        refresh: () => {search.handleSearch()},
+    };
+    const actions = workstationActions(props.masterDetail, handlers)
     actions.find(a => a.label === 'Search Parameters').popoverContent = searchParamSnippet;
 
 	let activeRowId = $state(null);
 </script>
 
-{#snippet searchParamSnippet()} 
+{#snippet searchParamSnippet(close)} 
 	<ReusableSearchParam {searchFields} 
-        bind:searchQuery={search.searchQuery} onSearch={search.handleSearch} onReset={search.handleReset} isLoading={search.isLoading}
+        bind:searchQuery={search.searchQuery} onSearch={() => search.handleSearch(close)} onReset={search.handleReset} isLoading={search.isLoading}
         selectOptions={search.selectOptions} loadingOptions={search.loadingOptions} fetchOptions={search.fetchOptions}
     />
 {/snippet}
@@ -38,10 +41,13 @@
 >
     <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 "WORKSTATION".split("") as c}
-                    <span class="leading-none">{c}</span>
-                {/each}
+            <span class="flex flex-col items-center justify-start gap-4 tracking-widest font-semibold select-none h-full">
+                <MoveLeftIcon />
+                <div class="flex flex-col items-center justify-center flex-grow gap-4">
+                    {#each "WORKSTATION".split("") as c}
+                        <span class="leading-none">{c}</span>
+                    {/each}
+                </div>
             </span>
         {/if}
 
diff --git a/src/lib/components/dictionary/workstation/page/view-page.svelte b/src/lib/components/dictionary/workstation/page/view-page.svelte
index 9399af3..0eaf8b1 100644
--- a/src/lib/components/dictionary/workstation/page/view-page.svelte
+++ b/src/lib/components/dictionary/workstation/page/view-page.svelte
@@ -4,6 +4,7 @@
     import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
     import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
     import MonitorXIcon from "@lucide/svelte/icons/monitor-x";
+    import { Spinner } from "$lib/components/ui/spinner/index.js";
 
     let props = $props();
 
@@ -46,7 +47,11 @@
     </div>
 {/snippet}
 
-{#if masterDetail.selectedItem}
+{#if masterDetail.isLoadingDetail}
+    <div class="h-full w-full flex items-center justify-center">
+        <Spinner class="size-6" />
+    </div> 
+{:else if masterDetail.selectedItem}
     <div class="flex flex-col px-2 py-1 gap-2 h-full w-full">
         <TopbarWrapper 
             title={masterDetail.selectedItem.data.WorkstationName} 
diff --git a/src/lib/components/patient/list/page/master-page.svelte b/src/lib/components/patient/list/page/master-page.svelte
index 90f3448..0fbc90b 100644
--- a/src/lib/components/patient/list/page/master-page.svelte
+++ b/src/lib/components/patient/list/page/master-page.svelte
@@ -21,8 +21,8 @@
 	let activeRowId = $state(null);
 </script>
 
-{#snippet searchParamSnippet()} 
-	<ReusableSearchParam {searchFields} bind:searchQuery={search.searchQuery} onSearch={search.handleSearch} onReset={search.handleReset} isLoading={search.isLoading}/>
+{#snippet searchParamSnippet(close)} 
+	<ReusableSearchParam {searchFields} bind:searchQuery={search.searchQuery} onSearch={() => search.handleSearch(close)} onReset={search.handleReset} isLoading={search.isLoading}/>
 {/snippet}
 
 <div 
diff --git a/src/lib/components/patient/list/page/view-page.svelte b/src/lib/components/patient/list/page/view-page.svelte
index 0b499bc..a14f8f7 100644
--- a/src/lib/components/patient/list/page/view-page.svelte
+++ b/src/lib/components/patient/list/page/view-page.svelte
@@ -4,6 +4,7 @@
     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";
+    import { Spinner } from "$lib/components/ui/spinner/index.js";
 
     let props = $props();
     
@@ -95,7 +96,11 @@
     </div>
 {/snippet}
 
-{#if masterDetail.selectedItem}
+{#if masterDetail.isLoadingDetail}
+    <div class="h-full w-full flex items-center justify-center">
+        <Spinner class="size-6" />
+    </div> 
+{:else if masterDetail.selectedItem}
     <div class="flex flex-col px-2 py-1 gap-2 h-full w-full">
         <TopbarWrapper title={fullName} subtitle={prefix} {actions} />
         <div class="flex-1 min-h-0 overflow-y-auto space-y-4">
diff --git a/src/lib/components/topbar/topbar-action.svelte b/src/lib/components/topbar/topbar-action.svelte
index a2a4b87..b4c309c 100644
--- a/src/lib/components/topbar/topbar-action.svelte
+++ b/src/lib/components/topbar/topbar-action.svelte
@@ -30,7 +30,6 @@
               {/snippet}
             </Popover.Trigger>
             <Popover.Content collisionPadding={props.collisionPadding ?? 0} class={props.popoverWidth ?? "w-72"}>
-              <!-- {@render props.popoverContent()} -->
               {@render props.popoverContent(() => open = false)}
             </Popover.Content>
           </Popover.Root>