tinyqc/app/Views/entry/monthly.php

<?= $this->extend("layout/main_layout"); ?>
<?= $this->section("content") ?>
<main x-data="monthlyEntry()">
    <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">Monthly Entry</h1>
                <p class="text-sm text-slate-500 mt-1">Enter monthly 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="month" x-model="date" @change="loadControls()" :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>
            <button @click="showEntry = true" class="btn btn-primary">
                <i class="fa-solid fa-plus mr-2"></i>
                Enter Data
            </button>
        </div>
    </div>

    <!-- Monthly Entry Modal -->
    <div x-show="showEntry"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-40"
         @click="closeEntry()">
    </div>

    <div x-show="showEntry"
         x-cloak
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
         x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         class="fixed inset-0 z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-5xl" @click.stop>
            <div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
                <h3 class="text-lg font-semibold text-slate-800">Monthly Entry</h3>
                <button @click="closeEntry()" class="text-slate-400 hover:text-slate-600">
                    <i class="fa-solid fa-xmark text-xl"></i>
                </button>
            </div>
            <div class="p-6">
                <template x-if="loading">
                    <div class="flex items-center justify-center py-12">
                        <i class="fa-solid fa-spinner fa-spin text-blue-500 text-3xl"></i>
                    </div>
                </template>
                <template x-if="!loading">
                    <div class="grid grid-cols-7 gap-2">
                        <template x-for="day in 31" :key="day">
                            <div class="text-center">
                                <label class="block text-xs text-slate-500 mb-1" x-text="day"></label>
                                <input type="number" step="0.01" :name="'day_' + day" x-model="formValues[day]" class="w-full px-2 py-2 text-sm text-center 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="-">
                            </div>
                        </template>
                    </div>
                </template>
            </div>
            <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-slate-100 bg-slate-50/50 rounded-b-2xl">
                <button @click="closeEntry()" class="px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-800 transition-colors">Cancel</button>
                <button @click="saveData()" data-save-btn :disabled="loading" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                    <template x-if="!loading">
                        <span class="flex items-center">
                            <i class="fa-solid fa-check mr-2"></i>
                            Save
                        </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>
</main>
<?= $this->endSection(); ?>

<?= $this->section("script") ?>
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data("monthlyEntry", () => ({
        dept: '',
        date: new Date().toISOString().slice(0, 7),
        control: '',
        test: '',
        controls: [],
        tests: [],
        showEntry: false,
        loading: false,
        errors: {},
        error: '',
        formValues: {},

        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';
            return Object.keys(this.errors).length === 0;
        },

        async saveData() {
            if (!this.validate()) {
                App.showToast('Please fill all required fields', 'error');
                return;
            }

            if (!App.confirmSave('Save monthly entry data?')) return;

            this.loading = true;
            this.error = '';
            
            const formData = new FormData();
            formData.append('controlid', this.control);
            formData.append('testid', this.test);
            formData.append('dates', this.date);

            let hasData = false;
            for (let day = 1; day <= 31; day++) {
                const value = this.formValues[day];
                if (value) {
                    formData.append(`resvalue[${day}]`, value);
                    hasData = true;
                }
            }

            if (!hasData) {
                App.showToast('Please enter at least one value', 'warning');
                this.loading = false;
                return;
            }

            try {
                const response = await fetch(`${window.BASEURL}/api/entry/monthly`, {
                    method: 'POST',
                    body: formData
                });
                const data = await response.json();
                if (data.status === 'success') {
                    App.showToast('Data saved successfully!');
                    this.showEntry = false;
                    this.formValues = {};
                    this.saveDraft();
                } else {
                    this.error = data.message || 'Failed to save data';
                }
            } catch (error) {
                console.error(error);
                this.error = 'Network error. Please try again.';
            } finally {
                this.loading = false;
            }
        },

        saveDraft() {
            localStorage.setItem('monthlyEntry', JSON.stringify({
                dept: this.dept,
                date: this.date,
                control: this.control,
                test: this.test
            }));
        },

        loadDraft() {
            const draft = localStorage.getItem('monthlyEntry');
            if (draft) {
                const data = JSON.parse(draft);
                this.dept = data.dept || '';
                this.date = data.date || new Date().toISOString().slice(0, 7);
                this.control = data.control || '';
                this.test = data.test || '';
                if (this.dept && this.date) this.loadControls();
                if (this.control) this.loadTests();
            }
        },

        closeEntry() {
            this.showEntry = false;
        }
    }));
});
</script>
<?= $this->endSection(); ?>