mahdahar
0a96b04bdf
- Implement Monthly Entry interface with full data entry grid
- Add batch save with validation and statistics for monthly results
- Support daily comments per day per test
- Add result status indicators and validation summaries
- Consolidate Entry API controller
- Refactor EntryApiController to handle both daily/monthly operations
- Add batch save endpoints with comprehensive validation
- Implement statistics calculation for result entries
- Add Control Test master data management
- Create MasterControlsController for CRUD operations
- Add dialog forms for control test configuration
- Implement control-test associations with QC parameters
- Refactor Report API and views
- Implement new report index with Levey-Jennings charts placeholder
- Add monthly report functionality with result statistics
- Include QC summary with mean, SD, and CV calculations
- UI improvements
- Overhaul dashboard with improved layout
- Update daily entry interface with inline editing
- Enhance master data management with DaisyUI components
- Add proper modal dialogs and form validation
- Database and seeding
- Update migration for control_tests table schema
- Remove redundant migration and seed files
- Update seeders with comprehensive test data
- Documentation
- Update CLAUDE.md with comprehensive project documentation
- Add architecture overview and conventions
BREAKING CHANGES:
- Refactored Entry API endpoints structure
- Removed ReportApiController::view() - consolidated into new report index
365 lines
17 KiB
PHP
365 lines
17 KiB
PHP
<?= $this->extend("layout/main_layout"); ?>
|
|
|
|
<?= $this->section("content"); ?>
|
|
<main class="flex-1 p-4 overflow-auto" x-data="controls()">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<div>
|
|
<h1 class="text-xl font-bold text-base-content tracking-tight">Controls</h1>
|
|
<p class="text-xs mt-0.5 opacity-70">Manage QC control standards</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 text-xs"></i> New Control
|
|
</button>
|
|
</div>
|
|
|
|
<div class="bg-base-100 rounded-xl border border-base-300 shadow-sm p-3 mb-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="relative flex-1 max-w-md">
|
|
<input type="text" placeholder="Search by name..."
|
|
class="input input-bordered input-sm w-full px-3 py-2 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="space-y-4">
|
|
<template x-if="loading && !list">
|
|
<div class="bg-base-100 rounded-xl border border-base-300 shadow-sm p-8 text-center">
|
|
<span class="loading loading-spinner loading-md text-primary"></span>
|
|
<p class="mt-2 text-base-content/60 text-xs font-medium">Fetching controls...</p>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="!loading && error">
|
|
<div class="bg-base-100 rounded-xl border border-error/20 shadow-sm 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-xs" 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="space-y-4">
|
|
<template x-for="(group, name) in groupedList" :key="name">
|
|
<div
|
|
class="bg-base-100 rounded-xl border border-base-300 shadow-sm overflow-hidden transition-all hover:shadow-md">
|
|
<div
|
|
class="p-3 bg-base-200/40 border-b border-base-300 flex flex-wrap justify-between items-center gap-3">
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="w-8 h-8 rounded-lg bg-primary/10 text-primary flex items-center justify-center">
|
|
<i class="fa-solid fa-vial text-base"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-sm text-base-content leading-tight" x-text="name"></h3>
|
|
<div class="flex items-center gap-2 mt-0.5">
|
|
<span class="text-[10px] flex items-center gap-1.5 text-base-content/60">
|
|
<i class="fa-solid fa-industry opacity-50"></i>
|
|
<span x-text="group.producer || 'No producer info'"></span>
|
|
</span>
|
|
<span class="w-1 h-1 rounded-full bg-base-300"></span>
|
|
<span class="text-[10px] font-medium text-primary"
|
|
x-text="group.lots.length + ' Lot(s)'"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-sm btn-primary gap-1.5 px-3" @click="addLotToControl(group)">
|
|
<i class="fa-solid fa-plus text-[10px]"></i> Add Lot
|
|
</button>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="bg-base-100 text-left border-b border-base-300">
|
|
<th
|
|
class="py-2 px-4 font-semibold text-base-content/70 text-[10px] uppercase tracking-wider">
|
|
Lot Number</th>
|
|
<th
|
|
class="py-2 px-3 font-semibold text-base-content/70 text-[10px] uppercase tracking-wider">
|
|
Expiry Date</th>
|
|
<th
|
|
class="py-2 px-3 font-semibold text-base-content/70 text-[10px] uppercase tracking-wider">
|
|
Status</th>
|
|
<th
|
|
class="py-2 px-4 font-semibold text-base-content/70 text-[10px] uppercase tracking-wider text-right">
|
|
Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-base-200">
|
|
<template x-for="lot in group.lots" :key="lot.controlId">
|
|
<tr class="hover:bg-base-200/30 transition-colors group">
|
|
<td class="py-2 px-4">
|
|
<span
|
|
class="font-mono text-[10px] bg-base-200 text-base-content/70 px-1.5 py-0.5 rounded border border-base-300"
|
|
x-text="lot.lot"></span>
|
|
</td>
|
|
<td class="py-2 px-3 text-base-content/80 text-xs font-medium"
|
|
x-text="lot.expDate">
|
|
</td>
|
|
<td class="py-2 px-3">
|
|
<span
|
|
class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider"
|
|
:class="getStatusBadgeClass(lot.expDate)">
|
|
<span class="w-1 h-1 rounded-full"
|
|
:class="getStatusDotClass(lot.expDate)"></span>
|
|
<span x-text="getStatusLabel(lot.expDate)"></span>
|
|
</span>
|
|
</td>
|
|
<td class="py-2 px-4 text-right">
|
|
<div class="flex justify-end items-center gap-1">
|
|
<button
|
|
class="p-1.5 text-amber-600 hover:bg-amber-50 rounded transition-colors tooltip tooltip-left"
|
|
data-tip="Edit Lot" @click="showForm(lot.controlId)">
|
|
<i class="fa-solid fa-pencil text-xs"></i>
|
|
</button>
|
|
<button
|
|
class="p-1.5 text-error hover:bg-error/10 rounded transition-colors tooltip tooltip-left"
|
|
data-tip="Delete Lot" @click="deleteData(lot.controlId)">
|
|
<i class="fa-solid fa-trash text-xs"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template x-if="list.length === 0">
|
|
<div class="bg-base-100 rounded-xl border border-dashed border-base-300 p-8 text-center">
|
|
<div
|
|
class="w-12 h-12 bg-base-200 text-base-content/30 rounded-full flex items-center justify-center mx-auto mb-3">
|
|
<i class="fa-solid fa-box-open text-xl"></i>
|
|
</div>
|
|
<h3 class="font-bold text-base-content/70">No data found</h3>
|
|
<p class="text-base-content/50 mt-0.5 text-xs">Try adjusting your search keyword or add a new
|
|
control.</p>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<?= $this->include('master/control/dialog_control_form'); ?>
|
|
</main>
|
|
<?= $this->endSection(); ?>
|
|
|
|
<?= $this->section("script"); ?>
|
|
<script>
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data("controls", () => ({
|
|
loading: false,
|
|
showModal: false,
|
|
errors: {},
|
|
error: null,
|
|
keyword: "",
|
|
list: null,
|
|
form: {
|
|
controlId: null,
|
|
controlName: "",
|
|
lot: "",
|
|
producer: "",
|
|
expDate: "",
|
|
},
|
|
|
|
get groupedList() {
|
|
if (!this.list) return {};
|
|
const groups = {};
|
|
this.list.forEach(item => {
|
|
if (!groups[item.controlName]) {
|
|
groups[item.controlName] = {
|
|
name: item.controlName,
|
|
producer: item.producer,
|
|
lots: []
|
|
};
|
|
}
|
|
groups[item.controlName].lots.push(item);
|
|
});
|
|
return groups;
|
|
},
|
|
|
|
get uniqueControlNames() {
|
|
if (!this.list) return [];
|
|
return [...new Set(this.list.map(i => i.controlName))];
|
|
},
|
|
|
|
get uniqueProducers() {
|
|
if (!this.list) return [];
|
|
return [...new Set(this.list.map(i => i.producer))];
|
|
},
|
|
|
|
getStatusLabel(date) {
|
|
if (!date) return 'Unknown';
|
|
const exp = new Date(date);
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
|
|
if (exp < today) return 'Expired';
|
|
|
|
const diffTime = exp - today;
|
|
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
|
|
|
if (diffDays <= 30) return 'Expiring Soon';
|
|
return 'Active';
|
|
},
|
|
|
|
getStatusBadgeClass(date) {
|
|
const status = this.getStatusLabel(date);
|
|
if (status === 'Expired') return 'bg-error/10 text-error border border-error/20';
|
|
if (status === 'Expiring Soon') return 'bg-warning/10 text-warning-content border border-warning/20';
|
|
return 'bg-success/10 text-success border border-success/20';
|
|
},
|
|
|
|
getStatusDotClass(date) {
|
|
const status = this.getStatusLabel(date);
|
|
if (status === 'Expired') return 'bg-error';
|
|
if (status === 'Expiring Soon') return 'bg-warning';
|
|
return 'bg-success';
|
|
},
|
|
|
|
init() {
|
|
this.fetchList();
|
|
},
|
|
|
|
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/controls?${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/controls/${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 = { controlId: null, controlName: "", lot: "", producer: "", expDate: "" };
|
|
}
|
|
},
|
|
|
|
async addLotToControl(group) {
|
|
this.showModal = true;
|
|
this.errors = {};
|
|
this.form = {
|
|
controlId: null,
|
|
controlName: group.name,
|
|
lot: "",
|
|
producer: group.producer,
|
|
expDate: ""
|
|
};
|
|
},
|
|
|
|
closeModal() {
|
|
this.showModal = false;
|
|
this.form = { controlId: null, controlName: "", lot: "", producer: "", expDate: "" };
|
|
},
|
|
|
|
validate() {
|
|
this.errors = {};
|
|
if (!this.form.controlName) this.errors.controlName = "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.controlId) {
|
|
method = 'PATCH';
|
|
url = `${BASEURL}api/master/controls/${this.form.controlId}`;
|
|
} else {
|
|
method = 'POST';
|
|
url = `${BASEURL}api/master/controls`;
|
|
}
|
|
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/controls/${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(); ?>
|