Add containers and tests master data modules
- Add containers management page with CRUD operations - Add tests management page with test configuration - Add organization API client - Update SelectDropdown and Sidebar components - Enhance PatientFormModal and VisitListModal - Add VisitFormModal for visit management
This commit is contained in:
parent
d5864d40ec
commit
278498123d
39
src/lib/api/containers.js
Normal file
39
src/lib/api/containers.js
Normal file
@ -0,0 +1,39 @@
|
||||
import { get, post, patch, del } from './client.js';
|
||||
|
||||
export async function fetchContainers(params = {}) {
|
||||
const query = new URLSearchParams(params).toString();
|
||||
return get(query ? `/api/specimen/container?${query}` : '/api/specimen/container');
|
||||
}
|
||||
|
||||
export async function fetchContainer(id) {
|
||||
return get(`/api/specimen/container/${id}`);
|
||||
}
|
||||
|
||||
export async function createContainer(data) {
|
||||
const payload = {
|
||||
ConCode: data.ConCode,
|
||||
ConName: data.ConName,
|
||||
ConDesc: data.ConDesc,
|
||||
ConClass: data.ConClass,
|
||||
Additive: data.Additive,
|
||||
Color: data.Color,
|
||||
};
|
||||
return post('/api/specimen/container', payload);
|
||||
}
|
||||
|
||||
export async function updateContainer(data) {
|
||||
const payload = {
|
||||
ConDefID: data.ConDefID,
|
||||
ConCode: data.ConCode,
|
||||
ConName: data.ConName,
|
||||
ConDesc: data.ConDesc,
|
||||
ConClass: data.ConClass,
|
||||
Additive: data.Additive,
|
||||
Color: data.Color,
|
||||
};
|
||||
return patch('/api/specimen/container', payload);
|
||||
}
|
||||
|
||||
export async function deleteContainer(id) {
|
||||
return del('/api/specimen/container', { body: JSON.stringify({ ConDefID: id }) });
|
||||
}
|
||||
21
src/lib/api/organization.js
Normal file
21
src/lib/api/organization.js
Normal file
@ -0,0 +1,21 @@
|
||||
import { get, post, patch, del } from './client.js';
|
||||
|
||||
// Disciplines
|
||||
export async function fetchDisciplines(params = {}) {
|
||||
const query = new URLSearchParams(params).toString();
|
||||
return get(query ? `/api/organization/discipline?${query}` : '/api/organization/discipline');
|
||||
}
|
||||
|
||||
export async function fetchDiscipline(id) {
|
||||
return get(`/api/organization/discipline/${id}`);
|
||||
}
|
||||
|
||||
// Departments
|
||||
export async function fetchDepartments(params = {}) {
|
||||
const query = new URLSearchParams(params).toString();
|
||||
return get(query ? `/api/organization/department?${query}` : '/api/organization/department');
|
||||
}
|
||||
|
||||
export async function fetchDepartment(id) {
|
||||
return get(`/api/organization/department/${id}`);
|
||||
}
|
||||
41
src/lib/api/tests.js
Normal file
41
src/lib/api/tests.js
Normal file
@ -0,0 +1,41 @@
|
||||
import { get, post, patch } from './client.js';
|
||||
|
||||
export async function fetchTests(params = {}) {
|
||||
const query = new URLSearchParams(params).toString();
|
||||
return get(query ? `/api/tests?${query}` : '/api/tests');
|
||||
}
|
||||
|
||||
export async function fetchTest(id) {
|
||||
return get(`/api/tests/${id}`);
|
||||
}
|
||||
|
||||
export async function createTest(data) {
|
||||
const payload = {
|
||||
TestSiteCode: data.TestSiteCode,
|
||||
TestSiteName: data.TestSiteName,
|
||||
TestType: data.TestType,
|
||||
DisciplineID: data.DisciplineID,
|
||||
DepartmentID: data.DepartmentID,
|
||||
SeqScr: data.SeqScr,
|
||||
SeqRpt: data.SeqRpt,
|
||||
VisibleScr: data.VisibleScr ? '1' : '0',
|
||||
VisibleRpt: data.VisibleRpt ? '1' : '0',
|
||||
};
|
||||
return post('/api/tests', payload);
|
||||
}
|
||||
|
||||
export async function updateTest(data) {
|
||||
const payload = {
|
||||
TestSiteID: data.TestSiteID,
|
||||
TestSiteCode: data.TestSiteCode,
|
||||
TestSiteName: data.TestSiteName,
|
||||
TestType: data.TestType,
|
||||
DisciplineID: data.DisciplineID,
|
||||
DepartmentID: data.DepartmentID,
|
||||
SeqScr: data.SeqScr,
|
||||
SeqRpt: data.SeqRpt,
|
||||
VisibleScr: data.VisibleScr ? '1' : '0',
|
||||
VisibleRpt: data.VisibleRpt ? '1' : '0',
|
||||
};
|
||||
return patch('/api/tests', payload);
|
||||
}
|
||||
@ -64,9 +64,9 @@
|
||||
}
|
||||
});
|
||||
|
||||
// Check if current value exists in options
|
||||
// Check if current value exists in options (empty string is always valid)
|
||||
let hasValidValue = $derived(
|
||||
!value || dropdownOptions.some(opt => opt.value === value)
|
||||
value === '' || value === null || value === undefined || dropdownOptions.some(opt => opt.value === value)
|
||||
);
|
||||
</script>
|
||||
|
||||
@ -81,25 +81,23 @@
|
||||
</label>
|
||||
|
||||
<div class="relative">
|
||||
<select
|
||||
{name}
|
||||
id={name}
|
||||
bind:value
|
||||
{required}
|
||||
{disabled}
|
||||
class="select select-bordered w-full pr-10 {error ? 'select-error' : ''}"
|
||||
class:opacity-50={loading}
|
||||
>
|
||||
<option value="">{placeholder}</option>
|
||||
{#key `${value}-${dropdownOptions.length}`}
|
||||
<select
|
||||
{name}
|
||||
id={name}
|
||||
bind:value
|
||||
{required}
|
||||
{disabled}
|
||||
class="select select-bordered w-full pr-10 {error ? 'select-error' : ''}"
|
||||
class:opacity-50={loading}
|
||||
>
|
||||
<option value="">{placeholder}</option>
|
||||
|
||||
{#if value && !hasValidValue}
|
||||
<option value={value} selected>{value}</option>
|
||||
{/if}
|
||||
|
||||
{#each dropdownOptions as option (option.value)}
|
||||
<option value={option.value}>{option.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{#each dropdownOptions as option (option.value)}
|
||||
<option value={option.value}>{option.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{/key}
|
||||
|
||||
<div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
|
||||
{#if loading}
|
||||
|
||||
@ -17,7 +17,8 @@
|
||||
Briefcase,
|
||||
Hash,
|
||||
Globe,
|
||||
ChevronDown
|
||||
ChevronDown,
|
||||
TestTube
|
||||
} from 'lucide-svelte';
|
||||
import { auth } from '$lib/stores/auth.js';
|
||||
import { goto } from '$app/navigation';
|
||||
@ -130,6 +131,24 @@
|
||||
</button>
|
||||
{#if isOpen && masterDataExpanded}
|
||||
<ul class="ml-6 mt-1 space-y-1 collapsible-content">
|
||||
<li>
|
||||
<a
|
||||
href="/master-data/containers"
|
||||
class="menu-item py-1 px-2 text-sm text-gray-600 hover:bg-emerald-50 hover:text-emerald-700"
|
||||
>
|
||||
<FlaskConical class="w-4 h-4 flex-shrink-0" />
|
||||
<span>Containers</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="/master-data/tests"
|
||||
class="menu-item py-1 px-2 text-sm text-gray-600 hover:bg-emerald-50 hover:text-emerald-700"
|
||||
>
|
||||
<TestTube class="w-4 h-4 flex-shrink-0" />
|
||||
<span>Test Definitions</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="/master-data/valuesets"
|
||||
|
||||
@ -7,10 +7,26 @@
|
||||
Stethoscope,
|
||||
Hash,
|
||||
Globe,
|
||||
ChevronRight
|
||||
ChevronRight,
|
||||
FlaskConical,
|
||||
TestTube
|
||||
} from 'lucide-svelte';
|
||||
|
||||
const modules = [
|
||||
{
|
||||
title: 'Containers',
|
||||
description: 'Manage specimen containers and tubes',
|
||||
icon: FlaskConical,
|
||||
href: '/master-data/containers',
|
||||
color: 'bg-cyan-500',
|
||||
},
|
||||
{
|
||||
title: 'Test Definitions',
|
||||
description: 'Manage laboratory tests, panels, and calculated values',
|
||||
icon: TestTube,
|
||||
href: '/master-data/tests',
|
||||
color: 'bg-rose-500',
|
||||
},
|
||||
{
|
||||
title: 'ValueSets',
|
||||
description: 'System lookup values and dropdown options (GENDER, MARITAL_STATUS, etc.)',
|
||||
|
||||
261
src/routes/(app)/master-data/containers/+page.svelte
Normal file
261
src/routes/(app)/master-data/containers/+page.svelte
Normal file
@ -0,0 +1,261 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { fetchContainers, createContainer, updateContainer, deleteContainer } from '$lib/api/containers.js';
|
||||
import { success as toastSuccess, error as toastError } from '$lib/utils/toast.js';
|
||||
import { valueSets } from '$lib/stores/valuesets.js';
|
||||
import DataTable from '$lib/components/DataTable.svelte';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
import SelectDropdown from '$lib/components/SelectDropdown.svelte';
|
||||
import { Plus, Edit2, Trash2, ArrowLeft } from 'lucide-svelte';
|
||||
|
||||
let loading = $state(false);
|
||||
let containers = $state([]);
|
||||
let modalOpen = $state(false);
|
||||
let modalMode = $state('create');
|
||||
let saving = $state(false);
|
||||
let formData = $state({ ConDefID: null, ConCode: '', ConName: '', ConDesc: '', ConClass: '', Additive: '', Color: '' });
|
||||
let deleteConfirmOpen = $state(false);
|
||||
let deleteItem = $state(null);
|
||||
|
||||
const columns = [
|
||||
{ key: 'ConCode', label: 'Code', class: 'font-medium' },
|
||||
{ key: 'ConName', label: 'Name' },
|
||||
{ key: 'ConDesc', label: 'Description' },
|
||||
{ key: 'ConClass', label: 'Class' },
|
||||
{ key: 'Additive', label: 'Additive' },
|
||||
{ key: 'Color', label: 'Color' },
|
||||
{ key: 'actions', label: 'Actions', class: 'w-32 text-center' },
|
||||
];
|
||||
|
||||
function getValueSetLabel(key, value) {
|
||||
if (!value) return '-';
|
||||
const items = valueSets.getSync(key);
|
||||
const item = items.find((i) => String(i.value || i.Value || i.code || i.Code || i.ItemCode) === String(value));
|
||||
return item?.label || item?.Label || item?.description || item?.Description || item?.name || item?.Name || value;
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
// Preload valuesets for dropdowns
|
||||
await Promise.all([
|
||||
valueSets.load('container_class'),
|
||||
valueSets.load('additive'),
|
||||
valueSets.load('container_cap_color'),
|
||||
]);
|
||||
await loadContainers();
|
||||
});
|
||||
|
||||
async function loadContainers() {
|
||||
loading = true;
|
||||
try {
|
||||
const response = await fetchContainers();
|
||||
containers = Array.isArray(response.data) ? response.data : [];
|
||||
} catch (err) {
|
||||
toastError(err.message || 'Failed to load containers');
|
||||
containers = [];
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function openCreateModal() {
|
||||
modalMode = 'create';
|
||||
formData = { ConDefID: null, ConCode: '', ConName: '', ConDesc: '', ConClass: '', Additive: '', Color: '' };
|
||||
modalOpen = true;
|
||||
}
|
||||
|
||||
function openEditModal(row) {
|
||||
modalMode = 'edit';
|
||||
formData = {
|
||||
ConDefID: row.ConDefID,
|
||||
ConCode: row.ConCode,
|
||||
ConName: row.ConName,
|
||||
ConDesc: row.ConDesc || '',
|
||||
ConClass: row.ConClass || '',
|
||||
Additive: row.Additive || '',
|
||||
Color: row.Color || '',
|
||||
};
|
||||
modalOpen = true;
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
saving = true;
|
||||
try {
|
||||
if (modalMode === 'create') {
|
||||
await createContainer(formData);
|
||||
toastSuccess('Container created successfully');
|
||||
} else {
|
||||
await updateContainer(formData);
|
||||
toastSuccess('Container updated successfully');
|
||||
}
|
||||
modalOpen = false;
|
||||
await loadContainers();
|
||||
} catch (err) {
|
||||
toastError(err.message || 'Failed to save container');
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
|
||||
function confirmDelete(row) {
|
||||
deleteItem = row;
|
||||
deleteConfirmOpen = true;
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
try {
|
||||
await deleteContainer(deleteItem.ConDefID);
|
||||
toastSuccess('Container deleted successfully');
|
||||
deleteConfirmOpen = false;
|
||||
await loadContainers();
|
||||
} catch (err) {
|
||||
toastError(err.message || 'Failed to delete container');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<a href="/master-data" class="btn btn-ghost btn-circle">
|
||||
<ArrowLeft class="w-5 h-5" />
|
||||
</a>
|
||||
<div class="flex-1">
|
||||
<h1 class="text-3xl font-bold text-gray-800">Containers</h1>
|
||||
<p class="text-gray-600">Manage specimen containers and tubes</p>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick={openCreateModal}>
|
||||
<Plus class="w-4 h-4 mr-2" />
|
||||
Add Container
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bg-base-100 rounded-lg shadow border border-base-200">
|
||||
<DataTable
|
||||
{columns}
|
||||
data={containers}
|
||||
{loading}
|
||||
emptyMessage="No containers found"
|
||||
hover={true}
|
||||
bordered={false}
|
||||
>
|
||||
{#snippet cell({ column, row, value })}
|
||||
{#if column.key === 'actions'}
|
||||
<div class="flex justify-center gap-2">
|
||||
<button class="btn btn-sm btn-ghost" onclick={() => openEditModal(row)}>
|
||||
<Edit2 class="w-4 h-4" />
|
||||
</button>
|
||||
<button class="btn btn-sm btn-ghost text-error" onclick={() => confirmDelete(row)}>
|
||||
<Trash2 class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
{:else if column.key === 'ConClass'}
|
||||
{getValueSetLabel('container_class', value)}
|
||||
{:else if column.key === 'Additive'}
|
||||
{getValueSetLabel('additive', value)}
|
||||
{:else if column.key === 'Color'}
|
||||
{#if value}
|
||||
<span class="inline-flex items-center gap-2">
|
||||
<span class="w-4 h-4 rounded-full border border-gray-300" style="background-color: {value.toLowerCase()};"></span>
|
||||
{getValueSetLabel('container_cap_color', value)}
|
||||
</span>
|
||||
{:else}
|
||||
-
|
||||
{/if}
|
||||
{:else}
|
||||
{value || '-'}
|
||||
{/if}
|
||||
{/snippet}
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal bind:open={modalOpen} title={modalMode === 'create' ? 'Add Container' : 'Edit Container'} size="md">
|
||||
<form class="space-y-5" onsubmit={(e) => { e.preventDefault(); handleSave(); }}>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="code">
|
||||
<span class="label-text font-medium">Code</span>
|
||||
<span class="label-text-alt text-error">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="code"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.ConCode}
|
||||
placeholder="e.g., 1"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="name">
|
||||
<span class="label-text font-medium">Name</span>
|
||||
<span class="label-text-alt text-error">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.ConName}
|
||||
placeholder="e.g., SST"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="desc">
|
||||
<span class="label-text font-medium">Description</span>
|
||||
</label>
|
||||
<input
|
||||
id="desc"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.ConDesc}
|
||||
placeholder="e.g., Evacuated blood collection tube"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<SelectDropdown
|
||||
label="Class"
|
||||
name="class"
|
||||
valueSetKey="container_class"
|
||||
bind:value={formData.ConClass}
|
||||
placeholder="Select Class..."
|
||||
/>
|
||||
<SelectDropdown
|
||||
label="Additive"
|
||||
name="additive"
|
||||
valueSetKey="additive"
|
||||
bind:value={formData.Additive}
|
||||
placeholder="Select Additive..."
|
||||
/>
|
||||
<SelectDropdown
|
||||
label="Cap Color"
|
||||
name="color"
|
||||
valueSetKey="container_cap_color"
|
||||
bind:value={formData.Color}
|
||||
placeholder="Select Color..."
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
{#snippet footer()}
|
||||
<button class="btn btn-ghost" onclick={() => (modalOpen = false)} type="button">Cancel</button>
|
||||
<button class="btn btn-primary" onclick={handleSave} disabled={saving} type="button">
|
||||
{#if saving}
|
||||
<span class="loading loading-spinner loading-sm mr-2"></span>
|
||||
{/if}
|
||||
{saving ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
{/snippet}
|
||||
</Modal>
|
||||
|
||||
<Modal bind:open={deleteConfirmOpen} title="Confirm Delete" size="sm">
|
||||
<div class="py-2">
|
||||
<p class="text-base-content/80">
|
||||
Are you sure you want to delete <strong class="text-base-content">{deleteItem?.ConName}</strong>?
|
||||
</p>
|
||||
<p class="text-sm text-error mt-2">This action cannot be undone.</p>
|
||||
</div>
|
||||
{#snippet footer()}
|
||||
<button class="btn btn-ghost" onclick={() => (deleteConfirmOpen = false)} type="button">Cancel</button>
|
||||
<button class="btn btn-error" onclick={handleDelete} type="button">Delete</button>
|
||||
{/snippet}
|
||||
</Modal>
|
||||
389
src/routes/(app)/master-data/tests/+page.svelte
Normal file
389
src/routes/(app)/master-data/tests/+page.svelte
Normal file
@ -0,0 +1,389 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { fetchTests, createTest, updateTest } from '$lib/api/tests.js';
|
||||
import { fetchDisciplines, fetchDepartments } from '$lib/api/organization.js';
|
||||
import { success as toastSuccess, error as toastError } from '$lib/utils/toast.js';
|
||||
import DataTable from '$lib/components/DataTable.svelte';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
import SelectDropdown from '$lib/components/SelectDropdown.svelte';
|
||||
import { Plus, Edit2, ArrowLeft, Filter } from 'lucide-svelte';
|
||||
|
||||
let loading = $state(false);
|
||||
let tests = $state([]);
|
||||
let disciplines = $state([]);
|
||||
let departments = $state([]);
|
||||
let modalOpen = $state(false);
|
||||
let modalMode = $state('create');
|
||||
let saving = $state(false);
|
||||
|
||||
// Filter states
|
||||
let selectedType = $state('');
|
||||
let searchQuery = $state('');
|
||||
|
||||
let formData = $state({
|
||||
TestSiteID: null,
|
||||
TestSiteCode: '',
|
||||
TestSiteName: '',
|
||||
TestType: 'TEST',
|
||||
DisciplineID: null,
|
||||
DepartmentID: null,
|
||||
SeqScr: '0',
|
||||
SeqRpt: '0',
|
||||
VisibleScr: '1',
|
||||
VisibleRpt: '1'
|
||||
});
|
||||
|
||||
const testTypeLabels = {
|
||||
TEST: 'Test',
|
||||
PARAM: 'Param',
|
||||
CALC: 'Calc',
|
||||
GROUP: 'Panel',
|
||||
TITLE: 'Title'
|
||||
};
|
||||
|
||||
const testTypeBadges = {
|
||||
TEST: 'badge-primary',
|
||||
PARAM: 'badge-secondary',
|
||||
CALC: 'badge-accent',
|
||||
GROUP: 'badge-info',
|
||||
TITLE: 'badge-ghost'
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{ key: 'TestSiteCode', label: 'Code', class: 'font-medium' },
|
||||
{ key: 'TestSiteName', label: 'Name' },
|
||||
{ key: 'TestType', label: 'Type', class: 'w-32' },
|
||||
{ key: 'DisciplineName', label: 'Discipline' },
|
||||
{ key: 'DepartmentName', label: 'Department' },
|
||||
{ key: 'SeqScr', label: 'Seq', class: 'w-16 text-center' },
|
||||
{ key: 'actions', label: 'Actions', class: 'w-24 text-center' },
|
||||
];
|
||||
|
||||
onMount(async () => {
|
||||
await Promise.all([
|
||||
loadTests(),
|
||||
loadDisciplines(),
|
||||
loadDepartments()
|
||||
]);
|
||||
});
|
||||
|
||||
async function loadTests() {
|
||||
loading = true;
|
||||
try {
|
||||
const params = {};
|
||||
if (selectedType) params.TestType = selectedType;
|
||||
if (searchQuery) params.TestSiteName = searchQuery;
|
||||
|
||||
const response = await fetchTests(params);
|
||||
tests = Array.isArray(response.data) ? response.data : [];
|
||||
} catch (err) {
|
||||
toastError(err.message || 'Failed to load tests');
|
||||
tests = [];
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadDisciplines() {
|
||||
try {
|
||||
const response = await fetchDisciplines();
|
||||
disciplines = Array.isArray(response.data) ? response.data : [];
|
||||
} catch (err) {
|
||||
disciplines = [];
|
||||
}
|
||||
}
|
||||
|
||||
async function loadDepartments() {
|
||||
try {
|
||||
const response = await fetchDepartments();
|
||||
departments = Array.isArray(response.data) ? response.data : [];
|
||||
} catch (err) {
|
||||
departments = [];
|
||||
}
|
||||
}
|
||||
|
||||
function openCreateModal() {
|
||||
modalMode = 'create';
|
||||
formData = {
|
||||
TestSiteID: null,
|
||||
TestSiteCode: '',
|
||||
TestSiteName: '',
|
||||
TestType: 'TEST',
|
||||
DisciplineID: null,
|
||||
DepartmentID: null,
|
||||
SeqScr: '0',
|
||||
SeqRpt: '0',
|
||||
VisibleScr: '1',
|
||||
VisibleRpt: '1'
|
||||
};
|
||||
modalOpen = true;
|
||||
}
|
||||
|
||||
function openEditModal(row) {
|
||||
modalMode = 'edit';
|
||||
formData = {
|
||||
TestSiteID: row.TestSiteID,
|
||||
TestSiteCode: row.TestSiteCode,
|
||||
TestSiteName: row.TestSiteName,
|
||||
TestType: row.TestType,
|
||||
DisciplineID: row.DisciplineID,
|
||||
DepartmentID: row.DepartmentID,
|
||||
SeqScr: row.SeqScr || '0',
|
||||
SeqRpt: row.SeqRpt || '0',
|
||||
VisibleScr: row.VisibleScr || '1',
|
||||
VisibleRpt: row.VisibleRpt || '1'
|
||||
};
|
||||
modalOpen = true;
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
saving = true;
|
||||
try {
|
||||
if (modalMode === 'create') {
|
||||
await createTest(formData);
|
||||
toastSuccess('Test created successfully');
|
||||
} else {
|
||||
await updateTest(formData);
|
||||
toastSuccess('Test updated successfully');
|
||||
}
|
||||
modalOpen = false;
|
||||
await loadTests();
|
||||
} catch (err) {
|
||||
toastError(err.message || 'Failed to save test');
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleFilter() {
|
||||
loadTests();
|
||||
}
|
||||
|
||||
function handleSearchKeydown(event) {
|
||||
if (event.key === 'Enter') {
|
||||
loadTests();
|
||||
}
|
||||
}
|
||||
|
||||
const disciplineOptions = $derived(
|
||||
disciplines.map(d => ({ value: d.DisciplineID, label: d.DisciplineName }))
|
||||
);
|
||||
|
||||
const departmentOptions = $derived(
|
||||
departments.map(d => ({ value: d.DepartmentID, label: d.DepartmentName }))
|
||||
);
|
||||
|
||||
const filteredDepartments = $derived(
|
||||
formData.DisciplineID
|
||||
? departments.filter(d => d.DisciplineID === formData.DisciplineID)
|
||||
: departments
|
||||
);
|
||||
|
||||
const filteredDepartmentOptions = $derived(
|
||||
filteredDepartments.map(d => ({ value: d.DepartmentID, label: d.DepartmentName }))
|
||||
);
|
||||
</script>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<a href="/master-data" class="btn btn-ghost btn-circle">
|
||||
<ArrowLeft class="w-5 h-5" />
|
||||
</a>
|
||||
<div class="flex-1">
|
||||
<h1 class="text-3xl font-bold text-gray-800">Test Definitions</h1>
|
||||
<p class="text-gray-600">Manage laboratory tests and panels</p>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick={openCreateModal}>
|
||||
<Plus class="w-4 h-4 mr-2" />
|
||||
Add Test
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="bg-base-100 rounded-lg shadow border border-base-200 p-4 mb-4">
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<div class="flex-1">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by code or name..."
|
||||
class="input input-bordered w-full"
|
||||
bind:value={searchQuery}
|
||||
onkeydown={handleSearchKeydown}
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full sm:w-48">
|
||||
<select
|
||||
class="select select-bordered w-full"
|
||||
bind:value={selectedType}
|
||||
onchange={handleFilter}
|
||||
>
|
||||
<option value="">All Types</option>
|
||||
<option value="TEST">Technical Test</option>
|
||||
<option value="PARAM">Parameter</option>
|
||||
<option value="CALC">Calculated</option>
|
||||
<option value="GROUP">Panel/Profile</option>
|
||||
<option value="TITLE">Section Header</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-outline" onclick={handleFilter}>
|
||||
<Filter class="w-4 h-4 mr-2" />
|
||||
Filter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-base-100 rounded-lg shadow border border-base-200">
|
||||
<DataTable
|
||||
{columns}
|
||||
data={tests.map(t => ({
|
||||
...t,
|
||||
DisciplineName: disciplines.find(d => d.DisciplineID === t.DisciplineID)?.DisciplineName || '-',
|
||||
DepartmentName: departments.find(d => d.DepartmentID === t.DepartmentID)?.DepartmentName || '-'
|
||||
}))}
|
||||
{loading}
|
||||
emptyMessage="No tests found"
|
||||
hover={true}
|
||||
bordered={false}
|
||||
>
|
||||
{#snippet cell({ column, row, value })}
|
||||
{#if column.key === 'TestType'}
|
||||
<span class="badge {testTypeBadges[value] || 'badge-ghost'}">
|
||||
{testTypeLabels[value] || value}
|
||||
</span>
|
||||
{:else if column.key === 'actions'}
|
||||
<div class="flex justify-center gap-2">
|
||||
<button class="btn btn-sm btn-ghost" onclick={() => openEditModal(row)}>
|
||||
<Edit2 class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
{value || '-'}
|
||||
{/if}
|
||||
{/snippet}
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal bind:open={modalOpen} title={modalMode === 'create' ? 'Add Test' : 'Edit Test'} size="lg">
|
||||
<form class="space-y-5" onsubmit={(e) => { e.preventDefault(); handleSave(); }}>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="testCode">
|
||||
<span class="label-text font-medium">Test Code</span>
|
||||
<span class="label-text-alt text-error">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="testCode"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.TestSiteCode}
|
||||
placeholder="e.g., GLU"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="testName">
|
||||
<span class="label-text font-medium">Test Name</span>
|
||||
<span class="label-text-alt text-error">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="testName"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.TestSiteName}
|
||||
placeholder="e.g., Glucose"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="testType">
|
||||
<span class="label-text font-medium">Test Type</span>
|
||||
<span class="label-text-alt text-error">*</span>
|
||||
</label>
|
||||
<select
|
||||
id="testType"
|
||||
class="select select-bordered w-full"
|
||||
bind:value={formData.TestType}
|
||||
required
|
||||
>
|
||||
<option value="TEST">Technical Test</option>
|
||||
<option value="PARAM">Parameter</option>
|
||||
<option value="CALC">Calculated</option>
|
||||
<option value="GROUP">Panel/Profile</option>
|
||||
<option value="TITLE">Section Header</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="seqScr">
|
||||
<span class="label-text font-medium">Screen Sequence</span>
|
||||
</label>
|
||||
<input
|
||||
id="seqScr"
|
||||
type="number"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.SeqScr}
|
||||
placeholder="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<SelectDropdown
|
||||
label="Discipline"
|
||||
name="discipline"
|
||||
bind:value={formData.DisciplineID}
|
||||
options={disciplineOptions}
|
||||
placeholder="Select discipline..."
|
||||
/>
|
||||
<SelectDropdown
|
||||
label="Department"
|
||||
name="department"
|
||||
bind:value={formData.DepartmentID}
|
||||
options={filteredDepartmentOptions}
|
||||
placeholder="Select department..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="seqRpt">
|
||||
<span class="label-text font-medium">Report Sequence</span>
|
||||
</label>
|
||||
<input
|
||||
id="seqRpt"
|
||||
type="number"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.SeqRpt}
|
||||
placeholder="0"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">Visibility</span>
|
||||
</label>
|
||||
<div class="flex gap-4 mt-2">
|
||||
<label class="label cursor-pointer gap-2">
|
||||
<input type="checkbox" class="checkbox" bind:checked={formData.VisibleScr} value="1" />
|
||||
<span class="label-text">Screen</span>
|
||||
</label>
|
||||
<label class="label cursor-pointer gap-2">
|
||||
<input type="checkbox" class="checkbox" bind:checked={formData.VisibleRpt} value="1" />
|
||||
<span class="label-text">Report</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{#snippet footer()}
|
||||
<button class="btn btn-ghost" onclick={() => (modalOpen = false)} type="button">Cancel</button>
|
||||
<button class="btn btn-primary" onclick={handleSave} disabled={saving} type="button">
|
||||
{#if saving}
|
||||
<span class="loading loading-spinner loading-sm mr-2"></span>
|
||||
{/if}
|
||||
{saving ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
{/snippet}
|
||||
</Modal>
|
||||
@ -5,6 +5,7 @@
|
||||
import { success as toastSuccess, error as toastError } from '$lib/utils/toast.js';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
import SelectDropdown from '$lib/components/SelectDropdown.svelte';
|
||||
import { User, MapPin, Contact } from 'lucide-svelte';
|
||||
|
||||
/** @type {{ open: boolean, patient: any | null, onSave: () => void, patientLoading?: boolean }} */
|
||||
let { open = $bindable(false), patient = null, onSave, patientLoading = false } = $props();
|
||||
@ -14,6 +15,7 @@
|
||||
let provinces = $state([]);
|
||||
let cities = $state([]);
|
||||
let formErrors = $state({});
|
||||
let activeTab = $state('personal'); // 'personal' or 'location'
|
||||
|
||||
let formData = $state({
|
||||
InternalPID: null,
|
||||
@ -239,11 +241,12 @@
|
||||
const province = formData.Province;
|
||||
if (province && province !== lastLoadedProvince) {
|
||||
lastLoadedProvince = province;
|
||||
// Clear city when province changes (only after form is initialized)
|
||||
if (initializedPatientId !== null) {
|
||||
formData.City = '';
|
||||
}
|
||||
loadCities(province);
|
||||
// Load cities first, then clear city (prevents empty string display during loading)
|
||||
loadCities(province).then(() => {
|
||||
if (initializedPatientId !== null) {
|
||||
formData.City = '';
|
||||
}
|
||||
});
|
||||
} else if (!province) {
|
||||
cities = [];
|
||||
lastLoadedProvince = '';
|
||||
@ -265,348 +268,384 @@
|
||||
</div>
|
||||
{:else}
|
||||
<form class="space-y-6" onsubmit={(e) => e.preventDefault()}>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="patientId">
|
||||
<span class="label-text font-medium">Patient ID</span>
|
||||
<span class="label-text-alt text-error">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="patientId"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
class:input-error={formErrors.PatientID}
|
||||
bind:value={formData.PatientID}
|
||||
placeholder="Enter patient ID"
|
||||
disabled={isEdit}
|
||||
/>
|
||||
{#if formErrors.PatientID}
|
||||
<span class="text-error text-sm mt-1">{formErrors.PatientID}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<SelectDropdown
|
||||
label="Prefix"
|
||||
name="prefix"
|
||||
bind:value={formData.Prefix}
|
||||
options={prefixOptions}
|
||||
placeholder="Select..."
|
||||
/>
|
||||
<!-- DaisyUI Tabs -->
|
||||
<div class="tabs tabs-bordered">
|
||||
<button
|
||||
type="button"
|
||||
class="tab tab-lg {activeTab === 'personal' ? 'tab-active' : ''}"
|
||||
onclick={() => activeTab = 'personal'}
|
||||
>
|
||||
<User class="w-4 h-4 mr-2" />
|
||||
Personal Info
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="tab tab-lg {activeTab === 'location' ? 'tab-active' : ''}"
|
||||
onclick={() => activeTab = 'location'}
|
||||
>
|
||||
<MapPin class="w-4 h-4 mr-2" />
|
||||
Location & Contact
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="nameFirst">
|
||||
<span class="label-text font-medium">First Name</span>
|
||||
<span class="label-text-alt text-error">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="nameFirst"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
class:input-error={formErrors.NameFirst}
|
||||
bind:value={formData.NameFirst}
|
||||
placeholder="Enter first name"
|
||||
/>
|
||||
{#if formErrors.NameFirst}
|
||||
<span class="text-error text-sm mt-1">{formErrors.NameFirst}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<!-- Personal Info Tab (Basic + Demographics) -->
|
||||
{#if activeTab === 'personal'}
|
||||
<div class="space-y-6">
|
||||
<!-- Basic Info Section -->
|
||||
<div>
|
||||
<h4 class="font-medium text-gray-700 mb-4">Basic Information</h4>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="patientId">
|
||||
<span class="label-text font-medium">Patient ID</span>
|
||||
<span class="label-text-alt text-error">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="patientId"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
class:input-error={formErrors.PatientID}
|
||||
bind:value={formData.PatientID}
|
||||
placeholder="Enter patient ID"
|
||||
disabled={isEdit}
|
||||
/>
|
||||
{#if formErrors.PatientID}
|
||||
<span class="text-error text-sm mt-1">{formErrors.PatientID}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="nameMiddle">
|
||||
<span class="label-text font-medium">Middle Name</span>
|
||||
</label>
|
||||
<input
|
||||
id="nameMiddle"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.NameMiddle}
|
||||
placeholder="Enter middle name"
|
||||
/>
|
||||
</div>
|
||||
<SelectDropdown
|
||||
label="Prefix"
|
||||
name="prefix"
|
||||
bind:value={formData.Prefix}
|
||||
options={prefixOptions}
|
||||
placeholder="Select..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="nameLast">
|
||||
<span class="label-text font-medium">Last Name</span>
|
||||
</label>
|
||||
<input
|
||||
id="nameLast"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.NameLast}
|
||||
placeholder="Enter last name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="nameFirst">
|
||||
<span class="label-text font-medium">First Name</span>
|
||||
<span class="label-text-alt text-error">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="nameFirst"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
class:input-error={formErrors.NameFirst}
|
||||
bind:value={formData.NameFirst}
|
||||
placeholder="Enter first name"
|
||||
/>
|
||||
{#if formErrors.NameFirst}
|
||||
<span class="text-error text-sm mt-1">{formErrors.NameFirst}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="nameMaiden">
|
||||
<span class="label-text font-medium">Maiden Name</span>
|
||||
</label>
|
||||
<input
|
||||
id="nameMaiden"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.NameMaiden}
|
||||
placeholder="Enter maiden name"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="nameMiddle">
|
||||
<span class="label-text font-medium">Middle Name</span>
|
||||
</label>
|
||||
<input
|
||||
id="nameMiddle"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.NameMiddle}
|
||||
placeholder="Enter middle name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="suffix">
|
||||
<span class="label-text font-medium">Suffix</span>
|
||||
</label>
|
||||
<input
|
||||
id="suffix"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.Suffix}
|
||||
placeholder="Enter suffix (e.g., Jr, Sr, III)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="nameLast">
|
||||
<span class="label-text font-medium">Last Name</span>
|
||||
</label>
|
||||
<input
|
||||
id="nameLast"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.NameLast}
|
||||
placeholder="Enter last name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<SelectDropdown
|
||||
label="Sex"
|
||||
name="sex"
|
||||
bind:value={formData.Sex}
|
||||
valueSetKey="sex"
|
||||
placeholder="Select sex..."
|
||||
required={true}
|
||||
error={formErrors.Sex}
|
||||
/>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="nameMaiden">
|
||||
<span class="label-text font-medium">Maiden Name</span>
|
||||
</label>
|
||||
<input
|
||||
id="nameMaiden"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.NameMaiden}
|
||||
placeholder="Enter maiden name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="birthdate">
|
||||
<span class="label-text font-medium">Birthdate</span>
|
||||
<span class="label-text-alt text-error">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="birthdate"
|
||||
type="date"
|
||||
class="input input-bordered w-full"
|
||||
class:input-error={formErrors.Birthdate}
|
||||
bind:value={formData.Birthdate}
|
||||
/>
|
||||
{#if formErrors.Birthdate}
|
||||
<span class="text-error text-sm mt-1">{formErrors.Birthdate}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="suffix">
|
||||
<span class="label-text font-medium">Suffix</span>
|
||||
</label>
|
||||
<input
|
||||
id="suffix"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.Suffix}
|
||||
placeholder="Enter suffix (e.g., Jr, Sr, III)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="placeOfBirth">
|
||||
<span class="label-text font-medium">Place of Birth</span>
|
||||
</label>
|
||||
<input
|
||||
id="placeOfBirth"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.PlaceOfBirth}
|
||||
placeholder="Enter place of birth"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
|
||||
<SelectDropdown
|
||||
label="Sex"
|
||||
name="sex"
|
||||
bind:value={formData.Sex}
|
||||
valueSetKey="sex"
|
||||
placeholder="Select sex..."
|
||||
required={true}
|
||||
error={formErrors.Sex}
|
||||
/>
|
||||
|
||||
<div class="border-t border-base-200 pt-6">
|
||||
<h4 class="font-medium text-gray-700 mb-4">Demographics</h4>
|
||||
<div class="form-control">
|
||||
<label class="label" for="birthdate">
|
||||
<span class="label-text font-medium">Birthdate</span>
|
||||
<span class="label-text-alt text-error">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="birthdate"
|
||||
type="date"
|
||||
class="input input-bordered w-full"
|
||||
class:input-error={formErrors.Birthdate}
|
||||
bind:value={formData.Birthdate}
|
||||
/>
|
||||
{#if formErrors.Birthdate}
|
||||
<span class="text-error text-sm mt-1">{formErrors.Birthdate}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||||
<SelectDropdown
|
||||
label="Race"
|
||||
name="race"
|
||||
bind:value={formData.Race}
|
||||
valueSetKey="race"
|
||||
placeholder="Select race..."
|
||||
/>
|
||||
|
||||
<SelectDropdown
|
||||
label="Marital Status"
|
||||
name="maritalStatus"
|
||||
bind:value={formData.MaritalStatus}
|
||||
valueSetKey="marital_status"
|
||||
placeholder="Select marital status..."
|
||||
/>
|
||||
|
||||
<SelectDropdown
|
||||
label="Religion"
|
||||
name="religion"
|
||||
bind:value={formData.Religion}
|
||||
valueSetKey="religion"
|
||||
placeholder="Select religion..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<SelectDropdown
|
||||
label="Ethnicity"
|
||||
name="ethnic"
|
||||
bind:value={formData.Ethnic}
|
||||
valueSetKey="ethnic"
|
||||
placeholder="Select ethnicity..."
|
||||
/>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="citizenship">
|
||||
<span class="label-text font-medium">Citizenship</span>
|
||||
</label>
|
||||
<input
|
||||
id="citizenship"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.Citizenship}
|
||||
placeholder="Enter citizenship"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-base-200 pt-6">
|
||||
<h4 class="font-medium text-gray-700 mb-4">Address Information</h4>
|
||||
|
||||
<div class="form-control mb-4">
|
||||
<label class="label" for="street1">
|
||||
<span class="label-text font-medium">Street Address</span>
|
||||
</label>
|
||||
<input
|
||||
id="street1"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.Street_1}
|
||||
placeholder="Enter street address"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-4">
|
||||
<label class="label" for="street2">
|
||||
<span class="label-text font-medium">Street Address Line 2</span>
|
||||
</label>
|
||||
<input
|
||||
id="street2"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.Street_2}
|
||||
placeholder="Enter street address line 2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-4">
|
||||
<label class="label" for="street3">
|
||||
<span class="label-text font-medium">Street Address Line 3</span>
|
||||
</label>
|
||||
<input
|
||||
id="street3"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.Street_3}
|
||||
placeholder="Enter street address line 3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<SelectDropdown
|
||||
label="Province"
|
||||
name="province"
|
||||
bind:value={formData.Province}
|
||||
options={provinceOptions}
|
||||
placeholder="Select province..."
|
||||
/>
|
||||
|
||||
<SelectDropdown
|
||||
label="City"
|
||||
name="city"
|
||||
bind:value={formData.City}
|
||||
options={cityOptions}
|
||||
placeholder={formData.Province ? "Select city..." : "Select province first"}
|
||||
disabled={!formData.Province}
|
||||
/>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="zip">
|
||||
<span class="label-text font-medium">ZIP Code</span>
|
||||
</label>
|
||||
<input
|
||||
id="zip"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.ZIP}
|
||||
placeholder="Enter ZIP code"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
|
||||
<SelectDropdown
|
||||
label="Country"
|
||||
name="country"
|
||||
bind:value={formData.Country}
|
||||
valueSetKey="country"
|
||||
placeholder="Select country..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-base-200 pt-6">
|
||||
<h4 class="font-medium text-gray-700 mb-4">Contact Information</h4>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="phone">
|
||||
<span class="label-text font-medium">Phone</span>
|
||||
</label>
|
||||
<input
|
||||
id="phone"
|
||||
type="tel"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.Phone}
|
||||
placeholder="Enter phone number"
|
||||
/>
|
||||
<div class="form-control">
|
||||
<label class="label" for="placeOfBirth">
|
||||
<span class="label-text font-medium">Place of Birth</span>
|
||||
</label>
|
||||
<input
|
||||
id="placeOfBirth"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.PlaceOfBirth}
|
||||
placeholder="Enter place of birth"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="mobilePhone">
|
||||
<span class="label-text font-medium">Mobile Phone</span>
|
||||
</label>
|
||||
<input
|
||||
id="mobilePhone"
|
||||
type="tel"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.MobilePhone}
|
||||
placeholder="Enter mobile number"
|
||||
/>
|
||||
<!-- Demographics Section -->
|
||||
<div class="border-t border-base-200 pt-6">
|
||||
<h4 class="font-medium text-gray-700 mb-4">Demographics</h4>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<SelectDropdown
|
||||
label="Race"
|
||||
name="race"
|
||||
bind:value={formData.Race}
|
||||
valueSetKey="race"
|
||||
placeholder="Select race..."
|
||||
/>
|
||||
|
||||
<SelectDropdown
|
||||
label="Marital Status"
|
||||
name="maritalStatus"
|
||||
bind:value={formData.MaritalStatus}
|
||||
valueSetKey="marital_status"
|
||||
placeholder="Select marital status..."
|
||||
/>
|
||||
|
||||
<SelectDropdown
|
||||
label="Religion"
|
||||
name="religion"
|
||||
bind:value={formData.Religion}
|
||||
valueSetKey="religion"
|
||||
placeholder="Select religion..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
|
||||
<SelectDropdown
|
||||
label="Ethnicity"
|
||||
name="ethnic"
|
||||
bind:value={formData.Ethnic}
|
||||
valueSetKey="ethnic"
|
||||
placeholder="Select ethnicity..."
|
||||
/>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="citizenship">
|
||||
<span class="label-text font-medium">Citizenship</span>
|
||||
</label>
|
||||
<input
|
||||
id="citizenship"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.Citizenship}
|
||||
placeholder="Enter citizenship"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="email1">
|
||||
<span class="label-text font-medium">Email Address</span>
|
||||
</label>
|
||||
<input
|
||||
id="email1"
|
||||
type="email"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.EmailAddress1}
|
||||
placeholder="Enter email address"
|
||||
/>
|
||||
<!-- Location & Contact Tab -->
|
||||
{#if activeTab === 'location'}
|
||||
<div class="space-y-6">
|
||||
<!-- Address Section -->
|
||||
<div>
|
||||
<h4 class="font-medium text-gray-700 mb-4">Address Information</h4>
|
||||
|
||||
<div class="form-control mb-4">
|
||||
<label class="label" for="street1">
|
||||
<span class="label-text font-medium">Street Address</span>
|
||||
</label>
|
||||
<input
|
||||
id="street1"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.Street_1}
|
||||
placeholder="Enter street address"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-4">
|
||||
<label class="label" for="street2">
|
||||
<span class="label-text font-medium">Street Address Line 2</span>
|
||||
</label>
|
||||
<input
|
||||
id="street2"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.Street_2}
|
||||
placeholder="Enter street address line 2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-4">
|
||||
<label class="label" for="street3">
|
||||
<span class="label-text font-medium">Street Address Line 3</span>
|
||||
</label>
|
||||
<input
|
||||
id="street3"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.Street_3}
|
||||
placeholder="Enter street address line 3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<SelectDropdown
|
||||
label="Province"
|
||||
name="province"
|
||||
bind:value={formData.Province}
|
||||
options={provinceOptions}
|
||||
placeholder="Select province..."
|
||||
/>
|
||||
|
||||
<SelectDropdown
|
||||
label="City"
|
||||
name="city"
|
||||
bind:value={formData.City}
|
||||
options={cityOptions}
|
||||
placeholder={formData.Province ? "Select city..." : "Select province first"}
|
||||
disabled={!formData.Province}
|
||||
/>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="zip">
|
||||
<span class="label-text font-medium">ZIP Code</span>
|
||||
</label>
|
||||
<input
|
||||
id="zip"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.ZIP}
|
||||
placeholder="Enter ZIP code"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
|
||||
<SelectDropdown
|
||||
label="Country"
|
||||
name="country"
|
||||
bind:value={formData.Country}
|
||||
valueSetKey="country"
|
||||
placeholder="Select country..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="email2">
|
||||
<span class="label-text font-medium">Secondary Email</span>
|
||||
</label>
|
||||
<input
|
||||
id="email2"
|
||||
type="email"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.EmailAddress2}
|
||||
placeholder="Enter secondary email"
|
||||
/>
|
||||
<!-- Contact Section -->
|
||||
<div class="border-t border-base-200 pt-6">
|
||||
<h4 class="font-medium text-gray-700 mb-4">Contact Information</h4>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="phone">
|
||||
<span class="label-text font-medium">Phone</span>
|
||||
</label>
|
||||
<input
|
||||
id="phone"
|
||||
type="tel"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.Phone}
|
||||
placeholder="Enter phone number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="mobilePhone">
|
||||
<span class="label-text font-medium">Mobile Phone</span>
|
||||
</label>
|
||||
<input
|
||||
id="mobilePhone"
|
||||
type="tel"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.MobilePhone}
|
||||
placeholder="Enter mobile number"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="email1">
|
||||
<span class="label-text font-medium">Email Address</span>
|
||||
</label>
|
||||
<input
|
||||
id="email1"
|
||||
type="email"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.EmailAddress1}
|
||||
placeholder="Enter email address"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="email2">
|
||||
<span class="label-text font-medium">Secondary Email</span>
|
||||
</label>
|
||||
<input
|
||||
id="email2"
|
||||
type="email"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.EmailAddress2}
|
||||
placeholder="Enter secondary email"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
{/if}
|
||||
{#snippet footer()}
|
||||
|
||||
389
src/routes/(app)/patients/VisitFormModal.svelte
Normal file
389
src/routes/(app)/patients/VisitFormModal.svelte
Normal file
@ -0,0 +1,389 @@
|
||||
<script>
|
||||
import { createVisit, updateVisit, fetchVisit } from '$lib/api/visits.js';
|
||||
import { fetchLocations } from '$lib/api/locations.js';
|
||||
import { fetchContacts } from '$lib/api/contacts.js';
|
||||
import { success as toastSuccess, error as toastError } from '$lib/utils/toast.js';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
import SelectDropdown from '$lib/components/SelectDropdown.svelte';
|
||||
import { Calendar, MapPin, User, FileText, Activity } from 'lucide-svelte';
|
||||
|
||||
/** @type {{ open: boolean, patient: any | null, visit: any | null, onSave: () => void }} */
|
||||
let { open = $bindable(false), patient = null, visit = null, onSave } = $props();
|
||||
|
||||
let loading = $state(false);
|
||||
let saving = $state(false);
|
||||
let locations = $state([]);
|
||||
let contacts = $state([]);
|
||||
let formErrors = $state({});
|
||||
let activeTab = $state('info'); // 'info', 'diagnosis'
|
||||
|
||||
let formData = $state({
|
||||
InternalPVID: null,
|
||||
PatientID: '',
|
||||
PVCreateDate: '',
|
||||
ADTCode: '',
|
||||
LocationID: '',
|
||||
LocCode: '',
|
||||
AttDoc: '',
|
||||
AdmDoc: '',
|
||||
RefDoc: '',
|
||||
CnsDoc: '',
|
||||
DiagCode: '',
|
||||
Diagnosis: '',
|
||||
EndDate: '',
|
||||
ArchivedDate: '',
|
||||
});
|
||||
|
||||
const isEdit = $derived(!!visit?.InternalPVID);
|
||||
|
||||
const adtTypeOptions = [
|
||||
{ value: 'OPD', label: 'Outpatient (OPD)' },
|
||||
{ value: 'IPD', label: 'Inpatient (IPD)' },
|
||||
{ value: 'ER', label: 'Emergency (ER)' },
|
||||
{ value: 'ADM', label: 'Admission (ADM)' },
|
||||
{ value: 'DIS', label: 'Discharge (DIS)' },
|
||||
{ value: 'TRF', label: 'Transfer (TRF)' },
|
||||
];
|
||||
|
||||
$effect(() => {
|
||||
if (open) {
|
||||
loadLocations();
|
||||
loadContacts();
|
||||
if (visit) {
|
||||
// Edit mode - populate form
|
||||
formData = {
|
||||
InternalPVID: visit.InternalPVID || null,
|
||||
PatientID: visit.PatientID || patient?.PatientID || '',
|
||||
PVCreateDate: visit.PVCreateDate || visit.PVACreateDate || '',
|
||||
ADTCode: visit.ADTCode || '',
|
||||
LocationID: visit.LocationID || '',
|
||||
LocCode: visit.LocCode || '',
|
||||
AttDoc: visit.AttDoc || '',
|
||||
AdmDoc: visit.AdmDoc || '',
|
||||
RefDoc: visit.RefDoc || '',
|
||||
CnsDoc: visit.CnsDoc || '',
|
||||
DiagCode: visit.DiagCode || '',
|
||||
Diagnosis: visit.Diagnosis || '',
|
||||
EndDate: visit.EndDate || '',
|
||||
ArchivedDate: visit.ArchivedDate || '',
|
||||
};
|
||||
} else {
|
||||
// Create mode - reset form
|
||||
formData = {
|
||||
InternalPVID: null,
|
||||
PatientID: patient?.PatientID || '',
|
||||
PVCreateDate: new Date().toISOString().slice(0, 16),
|
||||
ADTCode: '',
|
||||
LocationID: '',
|
||||
LocCode: '',
|
||||
AttDoc: '',
|
||||
AdmDoc: '',
|
||||
RefDoc: '',
|
||||
CnsDoc: '',
|
||||
DiagCode: '',
|
||||
Diagnosis: '',
|
||||
EndDate: '',
|
||||
ArchivedDate: '',
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
async function loadLocations() {
|
||||
try {
|
||||
const response = await fetchLocations();
|
||||
locations = Array.isArray(response.data) ? response.data : [];
|
||||
} catch (err) {
|
||||
console.error('Failed to load locations:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadContacts() {
|
||||
try {
|
||||
const response = await fetchContacts();
|
||||
contacts = Array.isArray(response.data) ? response.data : [];
|
||||
} catch (err) {
|
||||
console.error('Failed to load contacts:', err);
|
||||
}
|
||||
}
|
||||
|
||||
const locationOptions = $derived(
|
||||
locations.map((l) => ({
|
||||
value: l.LocationID || l.LocCode || '',
|
||||
label: l.LocFull || l.LocCode || 'Unknown',
|
||||
}))
|
||||
);
|
||||
|
||||
const doctorOptions = $derived(
|
||||
contacts.map((c) => ({
|
||||
value: c.ContactID || c.ContactCode || '',
|
||||
label: [c.NamePrefix, c.NameFirst, c.NameMiddle, c.NameLast].filter(Boolean).join(' ') || c.ContactCode || 'Unknown',
|
||||
}))
|
||||
);
|
||||
|
||||
function validateForm() {
|
||||
const errors = {};
|
||||
if (!formData.PatientID?.trim()) {
|
||||
errors.PatientID = 'Patient ID is required';
|
||||
}
|
||||
if (!formData.PVCreateDate) {
|
||||
errors.PVCreateDate = 'Visit date is required';
|
||||
}
|
||||
if (!formData.ADTCode?.trim()) {
|
||||
errors.ADTCode = 'Visit type is required';
|
||||
}
|
||||
formErrors = errors;
|
||||
return Object.keys(errors).length === 0;
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!validateForm()) return;
|
||||
|
||||
saving = true;
|
||||
try {
|
||||
const payload = { ...formData };
|
||||
|
||||
// Remove empty fields
|
||||
Object.keys(payload).forEach((key) => {
|
||||
if (payload[key] === '' || payload[key] === null) {
|
||||
delete payload[key];
|
||||
}
|
||||
});
|
||||
|
||||
if (isEdit) {
|
||||
await updateVisit(payload);
|
||||
toastSuccess('Visit updated successfully');
|
||||
} else {
|
||||
await createVisit(payload);
|
||||
toastSuccess('Visit created successfully');
|
||||
}
|
||||
open = false;
|
||||
onSave?.();
|
||||
} catch (err) {
|
||||
toastError(err.message || 'Failed to save visit');
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal bind:open title={isEdit ? 'Edit Visit' : 'New Visit'} size="lg">
|
||||
{#if loading}
|
||||
<div class="flex items-center justify-center py-12">
|
||||
<span class="loading loading-spinner loading-lg text-primary"></span>
|
||||
</div>
|
||||
{:else}
|
||||
<form class="space-y-6" onsubmit={(e) => e.preventDefault()}>
|
||||
<!-- Patient Info Display -->
|
||||
{#if patient}
|
||||
<div class="p-4 bg-base-200 rounded-lg">
|
||||
<div class="flex items-center gap-2">
|
||||
<User class="w-4 h-4 text-gray-500" />
|
||||
<span class="font-medium">
|
||||
{[patient.Prefix, patient.NameFirst, patient.NameMiddle, patient.NameLast].filter(Boolean).join(' ')}
|
||||
</span>
|
||||
<span class="text-gray-500">({patient.PatientID})</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="tabs tabs-bordered">
|
||||
<button
|
||||
type="button"
|
||||
class="tab tab-lg {activeTab === 'info' ? 'tab-active' : ''}"
|
||||
onclick={() => activeTab = 'info'}
|
||||
>
|
||||
<Calendar class="w-4 h-4 mr-2" />
|
||||
Visit Info
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="tab tab-lg {activeTab === 'diagnosis' ? 'tab-active' : ''}"
|
||||
onclick={() => activeTab = 'diagnosis'}
|
||||
>
|
||||
<Activity class="w-4 h-4 mr-2" />
|
||||
Diagnosis & Status
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Visit Info -->
|
||||
{#if activeTab === 'info'}
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="patientId">
|
||||
<span class="label-text font-medium">Patient ID</span>
|
||||
<span class="label-text-alt text-error">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="patientId"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
class:input-error={formErrors.PatientID}
|
||||
bind:value={formData.PatientID}
|
||||
placeholder="Enter patient ID"
|
||||
disabled={!!patient}
|
||||
/>
|
||||
{#if formErrors.PatientID}
|
||||
<span class="text-error text-sm mt-1">{formErrors.PatientID}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="visitDate">
|
||||
<span class="label-text font-medium">Visit Date</span>
|
||||
<span class="label-text-alt text-error">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="visitDate"
|
||||
type="datetime-local"
|
||||
class="input input-bordered w-full"
|
||||
class:input-error={formErrors.PVCreateDate}
|
||||
bind:value={formData.PVCreateDate}
|
||||
/>
|
||||
{#if formErrors.PVCreateDate}
|
||||
<span class="text-error text-sm mt-1">{formErrors.PVCreateDate}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<SelectDropdown
|
||||
label="Visit Type"
|
||||
name="adtCode"
|
||||
bind:value={formData.ADTCode}
|
||||
options={adtTypeOptions}
|
||||
placeholder="Select visit type..."
|
||||
required={true}
|
||||
error={formErrors.ADTCode}
|
||||
/>
|
||||
|
||||
<SelectDropdown
|
||||
label="Location"
|
||||
name="location"
|
||||
bind:value={formData.LocationID}
|
||||
options={locationOptions}
|
||||
placeholder="Select location..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-base-200 pt-4 mt-4">
|
||||
<h4 class="font-medium text-gray-700 mb-4">Doctors</h4>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<SelectDropdown
|
||||
label="Attending Doctor"
|
||||
name="attDoc"
|
||||
bind:value={formData.AttDoc}
|
||||
options={doctorOptions}
|
||||
placeholder="Select attending doctor..."
|
||||
/>
|
||||
|
||||
<SelectDropdown
|
||||
label="Admitting Doctor"
|
||||
name="admDoc"
|
||||
bind:value={formData.AdmDoc}
|
||||
options={doctorOptions}
|
||||
placeholder="Select admitting doctor..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
||||
<SelectDropdown
|
||||
label="Referring Doctor"
|
||||
name="refDoc"
|
||||
bind:value={formData.RefDoc}
|
||||
options={doctorOptions}
|
||||
placeholder="Select referring doctor..."
|
||||
/>
|
||||
|
||||
<SelectDropdown
|
||||
label="Consulting Doctor"
|
||||
name="cnsDoc"
|
||||
bind:value={formData.CnsDoc}
|
||||
options={doctorOptions}
|
||||
placeholder="Select consulting doctor..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Tab: Diagnosis & Status -->
|
||||
{#if activeTab === 'diagnosis'}
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="diagCode">
|
||||
<span class="label-text font-medium">Diagnosis Code</span>
|
||||
</label>
|
||||
<input
|
||||
id="diagCode"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.DiagCode}
|
||||
placeholder="Enter diagnosis code"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="diagnosis">
|
||||
<span class="label-text font-medium">Diagnosis Description</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="diagnosis"
|
||||
class="textarea textarea-bordered w-full"
|
||||
bind:value={formData.Diagnosis}
|
||||
placeholder="Enter diagnosis description"
|
||||
rows="3"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-base-200 pt-4 mt-4">
|
||||
<h4 class="font-medium text-gray-700 mb-4">Visit Status</h4>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="endDate">
|
||||
<span class="label-text font-medium">End Date</span>
|
||||
</label>
|
||||
<input
|
||||
id="endDate"
|
||||
type="datetime-local"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.EndDate}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="archivedDate">
|
||||
<span class="label-text font-medium">Archived Date</span>
|
||||
</label>
|
||||
<input
|
||||
id="archivedDate"
|
||||
type="datetime-local"
|
||||
class="input input-bordered w-full"
|
||||
bind:value={formData.ArchivedDate}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
{#snippet footer()}
|
||||
<div class="flex justify-end gap-2">
|
||||
<button class="btn btn-ghost" onclick={() => (open = false)} type="button">
|
||||
Cancel
|
||||
</button>
|
||||
<button class="btn btn-primary" onclick={handleSubmit} disabled={saving} type="button">
|
||||
{#if saving}
|
||||
<span class="loading loading-spinner loading-sm mr-2"></span>
|
||||
{/if}
|
||||
{saving ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Modal>
|
||||
@ -3,13 +3,16 @@
|
||||
import { fetchVisitsByPatient } from '$lib/api/visits.js';
|
||||
import { error as toastError } from '$lib/utils/toast.js';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
import { Calendar, Clock, MapPin, FileText, Plus } from 'lucide-svelte';
|
||||
import VisitFormModal from './VisitFormModal.svelte';
|
||||
import { Calendar, Clock, MapPin, FileText, Plus, Edit2 } from 'lucide-svelte';
|
||||
|
||||
/** @type {{ open: boolean, patient: any | null }} */
|
||||
let { open = $bindable(false), patient = null } = $props();
|
||||
|
||||
let visits = $state([]);
|
||||
let loading = $state(false);
|
||||
let visitFormOpen = $state(false);
|
||||
let selectedVisit = $state(null);
|
||||
|
||||
onMount(() => {
|
||||
if (patient && open) {
|
||||
@ -29,7 +32,20 @@
|
||||
loading = true;
|
||||
try {
|
||||
const response = await fetchVisitsByPatient(patient.InternalPID);
|
||||
visits = Array.isArray(response.data) ? response.data : [];
|
||||
console.log('Visit API response:', response);
|
||||
|
||||
// Handle different response structures
|
||||
if (Array.isArray(response)) {
|
||||
visits = response;
|
||||
} else if (response.data && Array.isArray(response.data)) {
|
||||
visits = response.data;
|
||||
} else if (response.visits && Array.isArray(response.visits)) {
|
||||
visits = response.visits;
|
||||
} else {
|
||||
visits = [];
|
||||
}
|
||||
|
||||
console.log('Processed visits:', visits);
|
||||
} catch (err) {
|
||||
toastError(err.message || 'Failed to load visits');
|
||||
visits = [];
|
||||
@ -47,18 +63,36 @@
|
||||
if (!dateStr) return '-';
|
||||
return new Date(dateStr).toLocaleString();
|
||||
}
|
||||
|
||||
function openCreateModal() {
|
||||
selectedVisit = null;
|
||||
visitFormOpen = true;
|
||||
}
|
||||
|
||||
function openEditModal(visit) {
|
||||
selectedVisit = visit;
|
||||
visitFormOpen = true;
|
||||
}
|
||||
|
||||
function handleVisitSaved() {
|
||||
loadVisits();
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal bind:open title="Patient Visits" size="xl">
|
||||
{#if patient}
|
||||
<div class="mb-4 p-4 bg-base-200 rounded-lg">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="font-bold text-lg">
|
||||
{[patient.Prefix, patient.NameFirst, patient.NameMiddle, patient.NameLast].filter(Boolean).join(' ')}
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600">Patient ID: {patient.PatientID}</p>
|
||||
</div>
|
||||
<button class="btn btn-primary btn-sm" onclick={openCreateModal}>
|
||||
<Plus class="w-4 h-4 mr-1" />
|
||||
New Visit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -81,57 +115,70 @@
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<Calendar class="w-4 h-4 text-primary" />
|
||||
<span class="font-semibold">{formatDate(visit.AdmissionDateTime)}</span>
|
||||
{#if visit.VisitStatus}
|
||||
<span class="badge badge-sm {visit.VisitStatus === 'Active' ? 'badge-success' : 'badge-ghost'}">
|
||||
{visit.VisitStatus}
|
||||
</span>
|
||||
<span class="font-semibold">{formatDate(visit.PVACreateDate || visit.PVCreateDate)}</span>
|
||||
{#if !visit.EndDate && !visit.ArchivedDate}
|
||||
<span class="badge badge-sm badge-success">Active</span>
|
||||
{:else}
|
||||
<span class="badge badge-sm badge-ghost">Closed</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||||
{#if visit.AdmissionType}
|
||||
{#if visit.ADTCode}
|
||||
<div>
|
||||
<span class="text-gray-500">Type:</span>
|
||||
<span class="ml-1">{visit.AdmissionType}</span>
|
||||
<span class="ml-1">{visit.ADTCode}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if visit.Location}
|
||||
{#if visit.LocCode || visit.LocationID}
|
||||
<div class="flex items-center gap-1">
|
||||
<MapPin class="w-3 h-3 text-gray-400" />
|
||||
<span class="text-gray-500">Location:</span>
|
||||
<span class="ml-1">{visit.Location}</span>
|
||||
<span class="ml-1">{visit.LocCode || visit.LocationID || '-'}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if visit.DoctorName}
|
||||
{#if visit.AttDoc || visit.AdmDoc || visit.RefDoc || visit.CnsDoc}
|
||||
<div>
|
||||
<span class="text-gray-500">Doctor:</span>
|
||||
<span class="ml-1">{visit.DoctorName}</span>
|
||||
<span class="ml-1">{visit.AttDoc || visit.AdmDoc || visit.RefDoc || visit.CnsDoc || '-'}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if visit.AdmissionDateTime}
|
||||
{#if visit.PVACreateDate || visit.PVCreateDate}
|
||||
<div class="flex items-center gap-1">
|
||||
<Clock class="w-3 h-3 text-gray-400" />
|
||||
<span class="text-gray-500">Time:</span>
|
||||
<span class="ml-1">{formatDateTime(visit.AdmissionDateTime)}</span>
|
||||
<span class="ml-1">{formatDateTime(visit.PVACreateDate || visit.PVCreateDate)}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if visit.Diagnosis}
|
||||
{#if visit.DiagCode || visit.Diagnosis}
|
||||
<div class="mt-3 pt-3 border-t border-base-200">
|
||||
<div class="flex items-start gap-2">
|
||||
<FileText class="w-4 h-4 text-gray-400 mt-0.5" />
|
||||
<div>
|
||||
<span class="text-gray-500 text-sm">Diagnosis:</span>
|
||||
<p class="text-sm mt-1">{visit.Diagnosis}</p>
|
||||
<p class="text-sm mt-1">{visit.DiagCode || visit.Diagnosis || '-'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="mt-2 text-xs text-gray-400">
|
||||
Visit ID: {visit.PVID || visit.InternalPVID || '-'}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-1 ml-4">
|
||||
<button
|
||||
class="btn btn-sm btn-ghost"
|
||||
title="Edit"
|
||||
onclick={() => openEditModal(visit)}
|
||||
>
|
||||
<Edit2 class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -141,13 +188,9 @@
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<VisitFormModal bind:open={visitFormOpen} {patient} visit={selectedVisit} onSave={handleVisitSaved} />
|
||||
|
||||
{#snippet footer()}
|
||||
<div class="flex justify-between items-center w-full">
|
||||
<button class="btn btn-primary btn-sm" onclick={() => {}} disabled>
|
||||
<Plus class="w-4 h-4 mr-1" />
|
||||
New Visit
|
||||
</button>
|
||||
<button class="btn btn-ghost" onclick={() => (open = false)} type="button">Close</button>
|
||||
</div>
|
||||
<button class="btn btn-ghost" onclick={() => (open = false)} type="button">Close</button>
|
||||
{/snippet}
|
||||
</Modal>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user