initial dict instrument

src/lib/components/app-sidebar.svelte

@@ -109,6 +109,10 @@
 						title: "Workstation",
 						url: "/workstation",
 					},
+					{
+						title: "Instrument",
+						url: "/instrument",
+					},
 				],
 			},
 			{

src/lib/components/dictionary/instrument/api/instrument-api.js

@@ -0,0 +1,18 @@
+import { API } from '$lib/config/api.js';
+import { getById, searchWithParams, create, update } from '$lib/api/api-client';
+
+export async function getInstruments(searchQuery) {
+  return await searchWithParams(API.INSTRUMENT, searchQuery)
+}
+
+export async function getInstrument(searchQuery) {
+  return await getById(API.INSTRUMENT, searchQuery)
+}
+
+export async function createInstrument(newInstrumentForm) {
+  return await create(API.INSTRUMENT, newInstrumentForm)
+}
+
+export async function editInstrument(editInstrumentForm, id) {
+  return await update(API.INSTRUMENT, editInstrumentForm, id)
+}

src/lib/components/dictionary/instrument/config/instrument-config.js

@@ -0,0 +1,61 @@
+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 = [
+    {
+        key: "InstrumentName",
+        label: "Instrument Name",
+        type: "text",
+    },
+];
+
+export const detailSections = [
+    {
+        title: "",
+        class: "grid grid-cols-1 gap-4",
+        groups: [
+            {
+                class: "space-y-3",
+                fields: [
+                    { key: "IEID", label: "Internal Equipment ID" },
+                    { key: "InstrumentID", label: "Instrument ID" },
+                    { key: "InstrumentName", label: "Instrument Name" },
+                    { key: "WorkstationID", label: "Workstation" },
+                    { key: "EquipmentRole", label: "Equipment Role" },
+                    { key: "isEnable", label: "Enable" },
+                ]
+            },
+        ]
+    },
+];
+
+export function instrumentActions(masterDetail, handlers) {
+    return [
+        { 
+            Icon: RefreshIcon, 
+            label: 'Refresh Data',
+            onClick: handlers.refresh,
+        },
+        { 
+            Icon: PlusIcon, 
+            label: 'Add Instrument',
+            onClick: () => masterDetail.enterCreate(),
+        },
+        { 
+            Icon: Settings2Icon, 
+            label: 'Search Parameters',
+        },
+    ];
+}
+
+export function viewActions(handlers){
+    return [
+        { 
+            Icon: PencilIcon, 
+            label: 'Edit Instrument',
+            onClick: handlers.editInstrument,
+        },
+    ]
+}

src/lib/components/dictionary/instrument/config/instrument-form-config.js

@@ -0,0 +1,67 @@
+import { API } from "$lib/config/api";
+import EraserIcon from "@lucide/svelte/icons/eraser";
+import { z } from "zod";
+
+export const instrumentSchema = z.object({
+    
+});
+
+export const instrumentInitialForm = {
+    EID: '',
+    IEID: '',
+    DepartmentID: '',
+    InstrumentID: '',
+    InstrumentName: '',
+    WorkstationID: '',
+    isEnable: '',
+    EquipmentRole: '',
+};
+
+export const instrumentDefaultErrors = {
+};
+
+export const instrumentFormFields = [
+    {
+        title: "Basic Information",
+        rows: [
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "EID", 
+                        label: "Equipment ID", 
+                        required: false, 
+                        type: "text",
+                    },
+                    { 
+                        key: "IEID", 
+                        label: "Internal Equipment ID", 
+                        required: false, 
+                        type: "text", 
+                    },
+                ]
+            },
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "DepartmentID", 
+                        label: "Department ID", 
+                        required: false, 
+                        type: "textarea", 
+                    },
+                ]
+            }
+        ]
+    },
+];
+
+export function getInstrumentFormActions(handlers) {
+    return [
+        { 
+            Icon: EraserIcon, 
+            label: 'Clear Form',
+            onClick: handlers.clearForm,
+        },
+    ];
+}

src/lib/components/dictionary/instrument/page/create-page.svelte

@@ -0,0 +1 @@
+cr

src/lib/components/dictionary/instrument/page/edit-page.svelte

@@ -0,0 +1 @@
+ed

src/lib/components/dictionary/instrument/page/master-page.svelte

@@ -0,0 +1,74 @@
+<script>
+	import { instrumentColumns } from "$lib/components/dictionary/instrument/table/instrument-columns";
+	import { getInstruments, getInstrument } from "$lib/components/dictionary/instrument/api/instrument-api";
+    import { useSearch } from "$lib/components/composable/use-search.svelte";
+    import { searchFields, instrumentActions } from "$lib/components/dictionary/instrument/config/instrument-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 ReusableDataTable from "$lib/components/reusable/reusable-data-table.svelte";
+    import BoxIcon from "@lucide/svelte/icons/box";
+    import MoveLeftIcon from "@lucide/svelte/icons/move-left";
+
+    let props = $props();
+
+    const search = useSearch(searchFields, getInstruments);
+    const handlers = {
+        refresh: () => {search.handleSearch()},
+    };
+    const actions = instrumentActions(props.masterDetail, handlers)
+    actions.find(a => a.label === 'Search Parameters').popoverContent = searchParamSnippet;
+
+	let activeRowId = $state(null);
+</script>
+
+{#snippet searchParamSnippet(close)} 
+	<ReusableSearchParam {searchFields} 
+        bind:searchQuery={search.searchQuery} onSearch={() => search.handleSearch(close)} onReset={search.handleReset} isLoading={search.isLoading}
+        selectOptions={search.selectOptions} loadingOptions={search.loadingOptions} fetchOptions={search.fetchOptions}
+    />
+{/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-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 "INSTRUMENT".split("") as c}
+                        <span class="leading-none">{c}</span>
+                    {/each}
+                </div>
+            </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={instrumentColumns} handleRowClick={props.masterDetail.select} {activeRowId} rowIdKey="EID"/>
+                    {:else}
+                        <div class="flex h-full">
+                            <ReusableEmpty icon={BoxIcon} desc="Try searching from search parameters"/>
+                        </div>
+                    {/if}
+                </div>
+            </div>
+        {/if}
+    </div>
+</div>

src/lib/components/dictionary/instrument/page/view-page.svelte

@@ -0,0 +1,97 @@
+<script>
+    import { formatUTCDate } from "$lib/utils/formatUTCDate";
+    import { detailSections, viewActions } from "$lib/components/dictionary/instrument/config/instrument-config";
+    import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
+    import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
+    import BoxIcon from "@lucide/svelte/icons/box";
+    import { Spinner } from "$lib/components/ui/spinner/index.js";
+
+    let props = $props();
+
+    const { masterDetail, formFields, formActions, schema } = props.context;
+
+    let instrument = $derived(masterDetail?.selectedItem?.data);
+
+    const handlers = {
+        editInstrument: () => masterDetail.enterEdit("data"),
+    };
+
+    const actions = viewActions(handlers);
+
+    function getFieldValue(field) {
+        if (!instrument) return "-";
+
+        if (field.keys) {
+            return field.keys
+                .map(k => field.parentKey ? instrument[field.parentKey]?.[k] : instrument[k])
+                .filter(val => val && val.trim() !== "")
+                .join(" / ");
+        }
+
+        return field.parentKey ? instrument[field.parentKey]?.[field.key] : instrument[field.key];
+    }
+    $inspect(masterDetail.selectedItem);
+</script>
+
+{#snippet Fieldset({ value, label, isUTCDate = false })}
+    <div class="space-y-1.5">
+        <dt class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+            {label}
+        </dt>
+        <dd class="text-sm font-medium">
+            {#if isUTCDate}
+                {formatUTCDate(value)}
+            {:else}
+                {value ?? "-"}
+            {/if}
+        </dd>
+    </div>
+{/snippet}
+
+{#if 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.InstrumentName} 
+            {actions} 
+        />
+        <div class="flex-1 min-h-0 overflow-y-auto space-y-4">
+            {#each detailSections as section}
+                <div class="p-4">
+                    {#if section.groups}
+                        <div class={section.class}>
+                            {#each section.groups as group}
+                                <div>
+                                    <div class={group.class}>
+                                        {#each group.fields as field}
+                                            {@render Fieldset({
+                                                label: field.label,
+                                                value: getFieldValue(field),
+                                                isUTCDate: field.isUTCDate
+                                            })}
+                                        {/each}
+                                    </div>
+                                </div>
+                            {/each}
+                        </div>
+                    {:else}
+                        <div class={section.class}>
+                            {#each section.fields as field}
+                                {@render Fieldset({
+                                    label: field.label,
+                                    value: getFieldValue(field),
+                                    isUTCDate: field.isUTCDate
+                                })}
+                            {/each}
+                        </div>
+                    {/if}
+                </div>
+            {/each}
+        </div>
+    </div>
+{:else}
+    <ReusableEmpty icon={BoxIcon} desc="Select an instrument to see details"/>
+{/if}

src/lib/components/dictionary/instrument/table/instrument-columns.js

@@ -0,0 +1,10 @@
+export const instrumentColumns = [
+    {
+        accessorKey: "InstrumentName",
+        header: "Instrument Name",
+    },
+    {
+        accessorKey: "DepartmentName",
+        header: "Department",
+    },
+];

src/lib/config/api.js

@@ -29,4 +29,5 @@ export const API = {
   TESTMAP:          '/api/test/testmap',
   EQUIPMENT:        '/api/equipmentlist',
   ORDERTEST:        '/api/ordertest',
+  INSTRUMENT:       '/api/equipmentlist',
 };

src/routes/+layout.server.js

@@ -42,6 +42,9 @@ export async function load({ url }) {
         '/dictionary/testmap': {
             title: 'Test Map'
         },
+        '/dictionary/instrument': {
+            title: 'Instrument'
+        },
         '/order/ordertest': {
             title: 'Order Test'
         },

src/routes/dictionary/instrument/+page.svelte

@@ -0,0 +1,52 @@
+<script>
+    import { Separator } from "$lib/components/ui/separator/index.js";
+	import { useMasterDetail } from "$lib/components/composable/use-master-detail.svelte";
+	import { getInstrument, createInstrument, editInstrument } from "$lib/components/dictionary/instrument/api/instrument-api";
+	import MasterPage from "$lib/components/dictionary/instrument/page/master-page.svelte";
+	import ViewPage from "$lib/components/dictionary/instrument/page/view-page.svelte";
+	import CreatePage from "$lib/components/dictionary/instrument/page/create-page.svelte";
+	import EditPage from "$lib/components/dictionary/instrument/page/edit-page.svelte";
+	import { instrumentSchema, instrumentInitialForm, instrumentDefaultErrors, instrumentFormFields, getInstrumentFormActions } from "$lib/components/dictionary/instrument/config/instrument-form-config";
+
+	const masterDetail = useMasterDetail({
+        onSelect: async (row) => {
+			return await getInstrument(row.EID);
+		},
+		formConfig: {
+			schema: instrumentSchema,
+			initialForm: instrumentInitialForm,
+			defaultErrors: instrumentDefaultErrors,
+			mode: 'create',
+			modeOpt: 'default',
+			saveEndpoint: createInstrument,
+			editEndpoint: editInstrument,
+			idKey: 'EID',
+		}
+	});
+
+	const pageContext = {
+		masterDetail,
+		formFields: instrumentFormFields,
+		formActions: getInstrumentFormActions,
+		schema: instrumentSchema,
+		initialForm: instrumentInitialForm,
+	}
+</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 context={pageContext}/>
+			{:else if masterDetail.mode === "create"}
+				<CreatePage context={pageContext}/>
+			{:else if masterDetail.mode === "edit"}
+				<EditPage context={pageContext}/>
+			{/if}
+		</main>
+	{/if}
+</div>