257 lines
11 KiB
PHP
257 lines
11 KiB
PHP
|
<?= $this->extend("layout/main_layout"); ?>
|
||
|
|
<?= $this->section("content") ?>
|
||
|
|
<main x-data="dailyEntry()">
|
||
|
|
<div class="bg-white rounded-xl border border-slate-100 shadow-sm p-6">
|
||
|
|
<div class="flex items-center justify-between mb-6">
|
||
|
|
<div>
|
||
|
|
<h1 class="text-2xl font-bold text-slate-800">Daily Entry</h1>
|
||
|
|
<p class="text-sm text-slate-500 mt-1">Enter daily QC results</p>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2 text-sm text-slate-500">
|
||
|
|
<i class="fa-solid fa-clock"></i>
|
||
|
|
<span>Press Ctrl+S to save</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div x-show="error" x-transition class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<i class="fa-solid fa-circle-exclamation"></i>
|
||
|
|
<span x-text="error"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||
|
|
<div>
|
||
|
|
<label class="block text-sm font-medium text-slate-700 mb-1">Department <span class="text-red-500">*</span></label>
|
||
|
|
<select x-model="dept" @change="loadControls()" :class="errors.dept ? 'border-red-300 bg-red-50' : ''" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500">
|
||
|
|
<option value="">Select Department</option>
|
||
|
|
<?php foreach ($depts as $d): ?>
|
||
|
|
<option value="<?= $d['dept_id'] ?>"><?= $d['name'] ?></option>
|
||
|
|
<?php endforeach; ?>
|
||
|
|
</select>
|
||
|
|
<p x-show="errors.dept" x-text="errors.dept" class="text-red-500 text-xs mt-1"></p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label class="block text-sm font-medium text-slate-700 mb-1">Date <span class="text-red-500">*</span></label>
|
||
|
|
<input type="date" x-model="date" :class="errors.date ? 'border-red-300 bg-red-50' : ''" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500">
|
||
|
|
<p x-show="errors.date" x-text="errors.date" class="text-red-500 text-xs mt-1"></p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label class="block text-sm font-medium text-slate-700 mb-1">Control <span class="text-red-500">*</span></label>
|
||
|
|
<select x-model="control" @change="loadTests()" :class="errors.control ? 'border-red-300 bg-red-50' : ''" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500">
|
||
|
|
<option value="">Select Control</option>
|
||
|
|
<template x-for="c in controls" :key="c.control_id">
|
||
|
|
<option :value="c.control_id" x-text="c.name + ' (' + (c.lot || 'N/A') + ')'"></option>
|
||
|
|
</template>
|
||
|
|
</select>
|
||
|
|
<p x-show="errors.control" x-text="errors.control" class="text-red-500 text-xs mt-1"></p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label class="block text-sm font-medium text-slate-700 mb-1">Test <span class="text-red-500">*</span></label>
|
||
|
|
<select x-model="test" :class="errors.test ? 'border-red-300 bg-red-50' : ''" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500">
|
||
|
|
<option value="">Select Test</option>
|
||
|
|
<template x-for="t in tests" :key="t.test_ref_id">
|
||
|
|
<option :value="t.test_ref_id" x-text="t.test_name"></option>
|
||
|
|
</template>
|
||
|
|
</select>
|
||
|
|
<p x-show="errors.test" x-text="errors.test" class="text-red-500 text-xs mt-1"></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mt-6" x-show="control && test" x-transition>
|
||
|
|
<div class="bg-white rounded-xl border border-slate-100 shadow-sm p-6">
|
||
|
|
<h3 class="text-lg font-semibold text-slate-800 mb-4">Result</h3>
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
|
|
<div>
|
||
|
|
<label class="block text-sm font-medium text-slate-700 mb-1">Value <span class="text-red-500">*</span></label>
|
||
|
|
<input type="number" step="0.01" x-model="resvalue" :class="errors.resvalue ? 'border-red-300 bg-red-50' : ''" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" placeholder="Enter value">
|
||
|
|
<p x-show="errors.resvalue" x-text="errors.resvalue" class="text-red-500 text-xs mt-1"></p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label class="block text-sm font-medium text-slate-700 mb-1">Comment</label>
|
||
|
|
<input type="text" x-model="rescomment" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" placeholder="Optional comment">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-4">
|
||
|
|
<button @click="saveResult()" data-save-btn :disabled="loading" class="btn btn-primary">
|
||
|
|
<template x-if="!loading">
|
||
|
|
<span class="flex items-center">
|
||
|
|
<i class="fa-solid fa-check mr-2"></i>
|
||
|
|
Save Result
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
<template x-if="loading">
|
||
|
|
<span class="flex items-center">
|
||
|
|
<i class="fa-solid fa-spinner fa-spin mr-2"></i>
|
||
|
|
Saving...
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
<?= $this->endSection(); ?>
|
||
|
|
|
||
|
|
<?= $this->section("script") ?>
|
||
|
|
<script>
|
||
|
|
document.addEventListener('alpine:init', () => {
|
||
|
|
Alpine.data("dailyEntry", () => ({
|
||
|
|
dept: '',
|
||
|
|
date: new Date().toISOString().split('T')[0],
|
||
|
|
control: '',
|
||
|
|
test: '',
|
||
|
|
resvalue: '',
|
||
|
|
rescomment: '',
|
||
|
|
controls: [],
|
||
|
|
tests: [],
|
||
|
|
loading: false,
|
||
|
|
errors: {},
|
||
|
|
error: '',
|
||
|
|
|
||
|
|
init() {
|
||
|
|
this.loadDraft();
|
||
|
|
},
|
||
|
|
|
||
|
|
async loadControls() {
|
||
|
|
this.errors = {};
|
||
|
|
this.controls = [];
|
||
|
|
this.control = '';
|
||
|
|
this.tests = [];
|
||
|
|
this.test = '';
|
||
|
|
|
||
|
|
if (!this.dept || !this.date) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.loading = true;
|
||
|
|
try {
|
||
|
|
const response = await fetch(`${window.BASEURL}/api/entry/controls?date=${this.date}&deptid=${this.dept}`);
|
||
|
|
const data = await response.json();
|
||
|
|
if (data.status === 'success') {
|
||
|
|
this.controls = data.data || [];
|
||
|
|
if (this.controls.length === 0) {
|
||
|
|
App.showToast('No controls found for selected criteria', 'info');
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
this.error = data.message || 'Failed to load controls';
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error(error);
|
||
|
|
this.error = 'Failed to load controls';
|
||
|
|
} finally {
|
||
|
|
this.loading = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
async loadTests() {
|
||
|
|
this.errors = {};
|
||
|
|
this.tests = [];
|
||
|
|
this.test = '';
|
||
|
|
|
||
|
|
if (!this.control) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.loading = true;
|
||
|
|
try {
|
||
|
|
const response = await fetch(`${window.BASEURL}/api/entry/tests?controlid=${this.control}`);
|
||
|
|
const data = await response.json();
|
||
|
|
if (data.status === 'success') {
|
||
|
|
this.tests = data.data || [];
|
||
|
|
if (this.tests.length === 0) {
|
||
|
|
App.showToast('No tests found for this control', 'info');
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
this.error = data.message || 'Failed to load tests';
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error(error);
|
||
|
|
this.error = 'Failed to load tests';
|
||
|
|
} finally {
|
||
|
|
this.loading = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
validate() {
|
||
|
|
this.errors = {};
|
||
|
|
if (!this.dept) this.errors.dept = 'Department is required';
|
||
|
|
if (!this.date) this.errors.date = 'Date is required';
|
||
|
|
if (!this.control) this.errors.control = 'Control is required';
|
||
|
|
if (!this.test) this.errors.test = 'Test is required';
|
||
|
|
if (!this.resvalue) this.errors.resvalue = 'Value is required';
|
||
|
|
return Object.keys(this.errors).length === 0;
|
||
|
|
},
|
||
|
|
|
||
|
|
async saveResult() {
|
||
|
|
if (!this.validate()) {
|
||
|
|
App.showToast('Please fill all required fields', 'error');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!App.confirmSave('Save result?')) return;
|
||
|
|
|
||
|
|
this.loading = true;
|
||
|
|
this.error = '';
|
||
|
|
|
||
|
|
const formData = new FormData();
|
||
|
|
formData.append('controlid', this.control);
|
||
|
|
formData.append('testid', this.test);
|
||
|
|
formData.append('resdate', this.date);
|
||
|
|
formData.append('resvalue', this.resvalue);
|
||
|
|
formData.append('rescomment', this.rescomment);
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch(`${window.BASEURL}/api/entry/daily`, {
|
||
|
|
method: 'POST',
|
||
|
|
body: formData
|
||
|
|
});
|
||
|
|
const data = await response.json();
|
||
|
|
if (data.status === 'success') {
|
||
|
|
App.showToast('Result saved successfully!');
|
||
|
|
this.clearForm();
|
||
|
|
this.saveDraft();
|
||
|
|
} else {
|
||
|
|
this.error = data.message || 'Failed to save result';
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error(error);
|
||
|
|
this.error = 'Network error. Please try again.';
|
||
|
|
} finally {
|
||
|
|
this.loading = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
clearForm() {
|
||
|
|
this.resvalue = '';
|
||
|
|
this.rescomment = '';
|
||
|
|
},
|
||
|
|
|
||
|
|
saveDraft() {
|
||
|
|
localStorage.setItem('dailyEntry', JSON.stringify({
|
||
|
|
dept: this.dept,
|
||
|
|
date: this.date,
|
||
|
|
control: this.control,
|
||
|
|
test: this.test
|
||
|
|
}));
|
||
|
|
},
|
||
|
|
|
||
|
|
loadDraft() {
|
||
|
|
const draft = localStorage.getItem('dailyEntry');
|
||
|
|
if (draft) {
|
||
|
|
const data = JSON.parse(draft);
|
||
|
|
this.dept = data.dept || '';
|
||
|
|
this.date = data.date || new Date().toISOString().split('T')[0];
|
||
|
|
this.control = data.control || '';
|
||
|
|
this.test = data.test || '';
|
||
|
|
if (this.dept && this.date) this.loadControls();
|
||
|
|
if (this.control) this.loadTests();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<?= $this->endSection(); ?>
|
||
|
|
|