mahdahar
ef6be6522e
- Replace dropdown components with select elements in department filters - Add cache-control headers to test and control API endpoints - Add merged report page for consolidated reporting - Update navigation sidebar with separate report links - Refactor AGENTS.md to concise format with Serena tools emphasis - Clean up gitignore and remove CLAUDE.md
233 lines
10 KiB
PHP
233 lines
10 KiB
PHP
<?= $this->extend("layout/main_layout"); ?>
|
|
|
|
<?= $this->section("content"); ?>
|
|
<main class="flex-1 p-6 overflow-auto" x-data="departments()">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-base-content tracking-tight">Departments</h1>
|
|
<p class="text-sm mt-1 opacity-70">Manage laboratory departments</p>
|
|
</div>
|
|
<button
|
|
class="btn btn-sm gap-2 shadow-sm border-0 bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-700 hover:to-blue-600 text-white transition-all duration-200"
|
|
@click="showForm()">
|
|
<i class="fa-solid fa-plus"></i> New Department
|
|
</button>
|
|
</div>
|
|
|
|
<div class="bg-base-100 rounded-xl border border-base-300 shadow-sm p-4 mb-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="relative flex-1 max-w-md">
|
|
<i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 opacity-50 text-sm"></i>
|
|
<input type="text" placeholder="Search by name..."
|
|
class="input input-bordered input-sm w-full pl-10 pr-4 py-2.5 text-sm bg-base-200 border border-base-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all"
|
|
x-model="keyword" @keyup.enter="fetchList()" />
|
|
</div>
|
|
<button class="btn btn-sm btn-neutral gap-2" @click="fetchList()">
|
|
<i class="fa-solid fa-magnifying-glass text-xs"></i> Search
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-base-100 rounded-xl border border-base-300 shadow-sm overflow-hidden">
|
|
<template x-if="loading">
|
|
<div class="p-8 text-center">
|
|
<span class="loading loading-spinner loading-lg text-primary"></span>
|
|
<p class="mt-2 text-base-content/60">Loading...</p>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="!loading && error">
|
|
<div class="p-8 text-center">
|
|
<div class="w-12 h-12 bg-error/10 text-error rounded-full flex items-center justify-center mx-auto mb-3">
|
|
<i class="fa-solid fa-triangle-exclamation text-xl"></i>
|
|
</div>
|
|
<h3 class="font-bold text-base-content">Something went wrong</h3>
|
|
<p class="text-error/80 mt-0.5 text-sm" x-text="error"></p>
|
|
<button @click="fetchList()" class="btn btn-sm btn-ghost mt-3 border border-base-300">Try Again</button>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="!loading && !error && list">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm text-left">
|
|
<thead class="uppercase tracking-wider font-semibold bg-base-200 text-base-content/70 text-xs">
|
|
<tr>
|
|
<th class="py-3 px-5 font-semibold">Name</th>
|
|
<th class="py-3 px-5 font-semibold text-right">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-base-content/80 divide-y divide-base-300">
|
|
<template x-for="item in list" :key="item.deptId">
|
|
<tr class="hover:bg-base-200 transition-colors">
|
|
<td class="py-3 px-5 font-medium text-base-content" x-text="item.deptName"></td>
|
|
<td class="py-3 px-5 text-right">
|
|
<button
|
|
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-amber-700 bg-amber-50 hover:bg-amber-100 rounded-lg transition-colors"
|
|
@click="showForm(item.deptId)">
|
|
<i class="fa-solid fa-pencil"></i> Edit
|
|
</button>
|
|
<button
|
|
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-error bg-error/10 hover:bg-error/20 rounded-lg transition-colors ml-1"
|
|
@click="deleteData(item.deptId)">
|
|
<i class="fa-solid fa-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
<template x-if="list.length === 0">
|
|
<tr>
|
|
<td colspan="2" class="py-8 text-center">
|
|
<div class="flex flex-col items-center justify-center">
|
|
<div class="w-12 h-12 bg-base-200 text-base-content/30 rounded-full flex items-center justify-center mb-2">
|
|
<i class="fa-solid fa-building text-xl"></i>
|
|
</div>
|
|
<p class="text-base-content/60 text-sm">No data available</p>
|
|
<p class="text-base-content/40 text-xs mt-1">Try adjusting your search or add a new department</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<?= $this->include('master/dept/dialog_dept_form'); ?>
|
|
</main>
|
|
<?= $this->endSection(); ?>
|
|
|
|
<?= $this->section("script"); ?>
|
|
<script>
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data("departments", () => ({
|
|
loading: false,
|
|
showModal: false,
|
|
errors: {},
|
|
error: null,
|
|
keyword: "",
|
|
list: null,
|
|
form: {
|
|
deptId: null,
|
|
deptName: "",
|
|
},
|
|
|
|
async fetchList() {
|
|
this.loading = true;
|
|
this.error = null;
|
|
this.list = null;
|
|
try {
|
|
const params = new URLSearchParams({ keyword: this.keyword });
|
|
const response = await fetch(`${BASEURL}api/master/depts?${params}`, {
|
|
method: "GET",
|
|
headers: { "Content-Type": "application/json" }
|
|
});
|
|
if (!response.ok) throw new Error("Failed to load data");
|
|
const data = await response.json();
|
|
this.list = data.data;
|
|
} catch (err) {
|
|
this.error = err.message;
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
async loadData(id) {
|
|
this.loading = true;
|
|
try {
|
|
const response = await fetch(`${BASEURL}api/master/depts/${id}`, {
|
|
method: "GET",
|
|
headers: { "Content-Type": "application/json" }
|
|
});
|
|
if (!response.ok) throw new Error("Failed to load item");
|
|
const data = await response.json();
|
|
this.form = data.data[0];
|
|
} catch (err) {
|
|
this.error = err.message;
|
|
this.form = {};
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
async showForm(id = null) {
|
|
this.showModal = true;
|
|
this.errors = {};
|
|
if (id) {
|
|
await this.loadData(id);
|
|
} else {
|
|
this.form = { deptId: null, deptName: "" };
|
|
}
|
|
},
|
|
|
|
closeModal() {
|
|
this.showModal = false;
|
|
this.form = { deptId: null, deptName: "" };
|
|
},
|
|
|
|
validate() {
|
|
this.errors = {};
|
|
if (!this.form.deptName) this.errors.deptName = "Name is required.";
|
|
return Object.keys(this.errors).length === 0;
|
|
},
|
|
|
|
async save() {
|
|
if (!this.validate()) return;
|
|
this.loading = true;
|
|
let method = '';
|
|
let url = '';
|
|
if (this.form.deptId) {
|
|
method = 'PATCH';
|
|
url = `${BASEURL}api/master/depts/${this.form.deptId}`;
|
|
} else {
|
|
method = 'POST';
|
|
url = `${BASEURL}api/master/depts`;
|
|
}
|
|
try {
|
|
const res = await fetch(url, {
|
|
method: method,
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(this.form),
|
|
});
|
|
const data = await res.json();
|
|
if (data.status === 'success') {
|
|
alert("Data saved successfully!");
|
|
this.closeModal();
|
|
this.fetchList();
|
|
} else {
|
|
alert(data.message || "Something went wrong.");
|
|
}
|
|
} catch (err) {
|
|
console.error(err);
|
|
alert("Failed to save data.");
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
async deleteData(id) {
|
|
if (!confirm("Are you sure you want to delete this item?")) return;
|
|
this.loading = true;
|
|
try {
|
|
const res = await fetch(`${BASEURL}api/master/depts/${id}`, {
|
|
method: "DELETE",
|
|
headers: { "Content-Type": "application/json" }
|
|
});
|
|
const data = await res.json();
|
|
if (data.status === 'success') {
|
|
alert("Data deleted successfully!");
|
|
this.fetchList();
|
|
} else {
|
|
alert(data.message || "Failed to delete.");
|
|
}
|
|
} catch (err) {
|
|
console.error(err);
|
|
alert("Failed to delete data.");
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
}
|
|
}));
|
|
});
|
|
</script>
|
|
<?= $this->endSection(); ?>
|