From 23aec3b11d7e038eb10e1cb9e03448ba8c050645 Mon Sep 17 00:00:00 2001
From: mahdahar <89adham@gmail.com>
Date: Fri, 16 Jan 2026 17:13:58 +0700
Subject: [PATCH] feat: Implement US-015 Monthly Entry Interface calendar grid

- Replace modal-based entry with inline calendar grid view
- Add dynamic day rendering (28-31 days based on selected month)
- Implement weekend highlighting (Saturday/Sunday with red background)
- Add horizontal scrolling for multiple tests display
- Support multi-test selection via checkboxes
- Auto-load monthly data when selecting tests
- Improve UX with Ctrl+S save shortcut and draft persistence
---
 app/Views/entry/monthly.php | 378 +++++++++++++++++++++---------------
 1 file changed, 224 insertions(+), 154 deletions(-)

diff --git a/app/Views/entry/monthly.php b/app/Views/entry/monthly.php
index 9ab938d..03f7e0f 100644
--- a/app/Views/entry/monthly.php
+++ b/app/Views/entry/monthly.php
@@ -1,6 +1,6 @@
 <?= $this->extend("layout/main_layout"); ?>
 <?= $this->section("content") ?>
-<main x-data="monthlyEntry()" @keydown.window.ctrl.s.prevent="showEntry ? saveData() : null">
+<main x-data="monthlyEntry()" @keydown.window.ctrl.s.prevent="saveData()">
     <div class="bg-white rounded-xl border border-slate-100 shadow-sm p-6">
         <div class="flex items-center justify-between mb-6">
             <div>
@@ -20,7 +20,7 @@
             </div>
         </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
             <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">
@@ -32,13 +32,13 @@
                 <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">
+                <label class="block text-sm font-medium text-slate-700 mb-1">Month <span class="text-red-500">*</span></label>
+                <input type="month" x-model="date" @change="loadControls(); loadMonthData()" :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>
+            <div class="md:col-span-2">
                 <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">
+                <select x-model="control" @change="loadTests(); loadMonthData()" :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>
@@ -46,95 +46,122 @@
                 </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>
+        </div>
+
+        <div x-show="control && tests.length > 0" x-transition>
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-slate-700 mb-2">Select Tests <span class="text-red-500">*</span></label>
+                <div class="flex flex-wrap gap-2">
                     <template x-for="t in tests" :key="t.test_ref_id">
-                        <option :value="t.test_ref_id" x-text="t.test_name"></option>
+                        <label class="inline-flex items-center px-3 py-1.5 rounded-lg border cursor-pointer transition-all"
+                               :class="selectedTests.includes(t.test_ref_id) ? 'bg-blue-50 border-blue-500 text-blue-700' : 'bg-slate-50 border-slate-200 hover:border-slate-300'">
+                            <input type="checkbox" :value="t.test_ref_id" x-model="selectedTests" @change="loadMonthData()" class="hidden">
+                            <span class="text-sm font-medium" x-text="t.test_name"></span>
+                        </label>
                     </template>
-                </select>
-                <p x-show="errors.test" x-text="errors.test" class="text-red-500 text-xs mt-1"></p>
+                </div>
             </div>
         </div>
 
-        <div class="mt-6" x-show="control && test" x-transition>
-            <button @click="openEntry()" 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 x-show="control && selectedTests.length > 0" x-transition>
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-lg font-semibold text-slate-800">
+                    <span x-text="monthName"></span> <span x-text="year"></span>
+                </h3>
+                <div class="flex items-center gap-4 text-sm">
+                    <div class="flex items-center gap-2">
+                        <span class="w-4 h-4 rounded bg-slate-100 border border-slate-200"></span>
+                        <span class="text-slate-600">Weekday</span>
                     </div>
-                </template>
-                <template x-if="!loading">
+                    <div class="flex items-center gap-2">
+                        <span class="w-4 h-4 rounded bg-red-50 border border-red-200"></span>
+                        <span class="text-slate-600">Weekend</span>
+                    </div>
+                </div>
+            </div>
+
+            <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="border border-slate-200 rounded-xl overflow-hidden">
+                    <div class="overflow-x-auto">
+                        <table class="w-full text-sm">
+                            <thead>
+                                <tr class="bg-slate-50 border-b border-slate-200">
+                                    <th class="py-3 px-3 text-left font-semibold text-slate-600 w-32 sticky left-0 bg-slate-50">Test</th>
+                                    <template x-for="day in daysInMonth" :key="day">
+                                        <th class="py-3 px-2 text-center font-medium text-slate-600 min-w-[60px]"
+                                            :class="isWeekend(day) ? 'bg-red-50 text-red-600' : ''">
+                                            <span x-text="day"></span>
+                                        </th>
+                                    </template>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <template x-for="testId in selectedTests" :key="testId">
+                                    <tr class="border-b border-slate-100 hover:bg-slate-50/50">
+                                        <td class="py-2 px-3 font-medium text-slate-700 sticky left-0 bg-white border-r border-slate-100">
+                                            <span x-text="getTestName(testId)"></span>
+                                        </td>
+                                        <template x-for="day in daysInMonth" :key="day">
+                                            <td class="py-1 px-1" :class="isWeekend(day) ? 'bg-red-50' : ''">
+                                                <input
+                                                    type="number"
+                                                    step="0.01"
+                                                    class="w-full px-2 py-1.5 text-center text-sm bg-white border border-slate-200 rounded focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
+                                                    :placeholder="'-'"
+                                                    x-model="monthlyData[testId + '_" + day + "']"
+                                                    @change="markDirty(testId, day)"
+                                                >
+                                            </td>
+                                        </template>
+                                    </tr>
+                                </template>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </template>
+
+            <div class="mt-6">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div>
-                        <div class="grid grid-cols-7 gap-2 mb-4">
-                            <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>
-                        <div class="mt-4">
-                            <label class="block text-sm font-medium text-slate-700 mb-1">Monthly Comment</label>
-                            <textarea x-model="comment" rows="2" 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 monthly comment"></textarea>
-                        </div>
+                        <label class="block text-sm font-medium text-slate-700 mb-1">Monthly Comment</label>
+                        <textarea x-model="comment" rows="2" 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 monthly comment"></textarea>
                     </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 class="flex items-end">
+                        <button @click="saveData()" data-save-btn :disabled="loading || selectedTests.length === 0" class="btn btn-primary w-full md:w-auto">
+                            <template x-if="!loading">
+                                <span class="flex items-center justify-center">
+                                    <i class="fa-solid fa-check mr-2"></i>
+                                    Save All Data
+                                </span>
+                            </template>
+                            <template x-if="loading">
+                                <span class="flex items-center justify-center">
+                                    <i class="fa-solid fa-spinner fa-spin mr-2"></i>
+                                    Saving...
+                                </span>
+                            </template>
+                        </button>
+                    </div>
+                </div>
             </div>
         </div>
+
+        <div x-show="control && (!selectedTests || selectedTests.length === 0)" x-transition class="text-center py-12 text-slate-500">
+            <i class="fa-solid fa-clipboard-list text-4xl mb-3 text-slate-300"></i>
+            <p>Select one or more tests above to view and enter monthly data</p>
+        </div>
+
+        <div x-show="!control" x-transition class="text-center py-12 text-slate-500">
+            <i class="fa-solid fa-list-check text-4xl mb-3 text-slate-300"></i>
+            <p>Select a control to view available tests</p>
+        </div>
     </div>
 </main>
 <?= $this->endSection(); ?>
@@ -146,26 +173,62 @@ document.addEventListener('alpine:init', () => {
         dept: '',
         date: new Date().toISOString().slice(0, 7),
         control: '',
-        test: '',
-        controls: [],
         tests: [],
-        showEntry: false,
+        selectedTests: [],
+        controls: [],
         loading: false,
         errors: {},
         error: '',
-        formValues: {},
+        monthlyData: {},
         comment: '',
+        dirtyCells: new Set(),
 
         init() {
             this.loadDraft();
         },
 
+        get year() {
+            return this.date ? this.date.split('-')[0] : '';
+        },
+
+        get monthName() {
+            if (!this.date) return '';
+            const month = parseInt(this.date.split('-')[1]);
+            const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+            return months[month - 1] || '';
+        },
+
+        get daysInMonth() {
+            if (!this.date) return 31;
+            const [year, month] = this.date.split('-').map(Number);
+            return new Date(year, month, 0).getDate();
+        },
+
+        isWeekend(day) {
+            if (!this.date) return false;
+            const [year, month] = this.date.split('-').map(Number);
+            const date = new Date(year, month - 1, day);
+            const dayOfWeek = date.getDay();
+            return dayOfWeek === 0 || dayOfWeek === 6;
+        },
+
+        getTestName(testId) {
+            const test = this.tests.find(t => t.test_ref_id === testId);
+            return test ? test.test_name : '';
+        },
+
+        markDirty(testId, day) {
+            this.dirtyCells.add(testId + '_' + day);
+        },
+
         async loadControls() {
             this.errors = {};
             this.controls = [];
             this.control = '';
             this.tests = [];
-            this.test = '';
+            this.selectedTests = [];
+            this.monthlyData = {};
+            this.comment = '';
             
             if (!this.dept || !this.date) {
                 return;
@@ -194,7 +257,9 @@ document.addEventListener('alpine:init', () => {
         async loadTests() {
             this.errors = {};
             this.tests = [];
-            this.test = '';
+            this.selectedTests = [];
+            this.monthlyData = {};
+            this.comment = '';
             
             if (!this.control) {
                 return;
@@ -208,6 +273,8 @@ document.addEventListener('alpine:init', () => {
                     this.tests = data.data || [];
                     if (this.tests.length === 0) {
                         App.showToast('No tests found for this control', 'info');
+                    } else {
+                        this.selectedTests = this.tests.map(t => t.test_ref_id);
                     }
                 } else {
                     this.error = data.message || 'Failed to load tests';
@@ -220,41 +287,51 @@ document.addEventListener('alpine:init', () => {
             }
         },
 
-        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 loadMonthData() {
+            if (!this.control || this.selectedTests.length === 0 || !this.date) {
+                return;
+            }
 
-        async openEntry() {
-            this.formValues = {};
-            this.comment = '';
             this.loading = true;
-            this.showEntry = true;
+            this.monthlyData = {};
+            this.comment = '';
 
             try {
-                const response = await fetch(`${window.BASEURL}/api/entry/monthly?controlid=${this.control}&testid=${this.test}&yearmonth=${this.date}`);
-                const data = await response.json();
-                if (data.status === 'success') {
-                    this.formValues = data.data.formValues || {};
-                    this.comment = data.data.comment || '';
-                } else {
-                    this.error = data.message || 'Failed to load existing data';
+                for (const testId of this.selectedTests) {
+                    const response = await fetch(`${window.BASEURL}/api/entry/monthly?controlid=${this.control}&testid=${testId}&yearmonth=${this.date}`);
+                    const data = await response.json();
+                    if (data.status === 'success') {
+                        const formValues = data.data.formValues || {};
+                        for (const [day, value] of Object.entries(formValues)) {
+                            this.monthlyData[testId + '_' + day] = value;
+                        }
+                        if (!this.comment && data.data.comment) {
+                            this.comment = data.data.comment;
+                        }
+                    }
                 }
             } catch (error) {
                 console.error(error);
-                this.error = 'Failed to load existing data';
+                this.error = 'Failed to load monthly data';
             } 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.selectedTests.length === 0) {
+                App.showToast('Please select at least one test', 'error');
+                return false;
+            }
+            return true;
+        },
+
         async saveData() {
             if (!this.validate()) {
-                App.showToast('Please fill all required fields', 'error');
                 return;
             }
 
@@ -263,47 +340,45 @@ document.addEventListener('alpine:init', () => {
             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 && !this.comment) {
-                App.showToast('Please enter at least one value or comment', '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') {
-                    if (this.comment) {
-                        await this.saveComment();
+                for (const testId of this.selectedTests) {
+                    const formData = new FormData();
+                    formData.append('controlid', this.control);
+                    formData.append('testid', testId);
+                    formData.append('dates', this.date);
+
+                    let hasData = false;
+                    for (let day = 1; day <= this.daysInMonth; day++) {
+                        const key = testId + '_' + day;
+                        const value = this.monthlyData[key];
+                        if (value !== undefined && value !== null && value !== '') {
+                            formData.append(`resvalue[${day}]`, value);
+                            hasData = true;
+                        }
+                    }
+
+                    if (hasData) {
+                        const response = await fetch(`${window.BASEURL}/api/entry/monthly`, {
+                            method: 'POST',
+                            body: formData
+                        });
+                        const data = await response.json();
+                        if (data.status !== 'success') {
+                            throw new Error(data.message || 'Failed to save data for test ' + this.getTestName(testId));
+                        }
                     }
-                    App.showToast('Data saved successfully!');
-                    this.showEntry = false;
-                    this.formValues = {};
-                    this.comment = '';
-                    this.saveDraft();
-                } else {
-                    this.error = data.message || 'Failed to save data';
                 }
+
+                if (this.comment) {
+                    await this.saveComment();
+                }
+
+                App.showToast('Data saved successfully!');
+                this.dirtyCells.clear();
+                this.saveDraft();
             } catch (error) {
                 console.error(error);
-                this.error = 'Network error. Please try again.';
+                this.error = error.message || 'Network error. Please try again.';
             } finally {
                 this.loading = false;
             }
@@ -312,7 +387,7 @@ document.addEventListener('alpine:init', () => {
         async saveComment() {
             const formData = new FormData();
             formData.append('controlid', this.control);
-            formData.append('testid', this.test);
+            formData.append('testid', this.selectedTests[0]);
             formData.append('commonth', this.date);
             formData.append('comtext', this.comment);
 
@@ -346,13 +421,8 @@ document.addEventListener('alpine:init', () => {
                 if (this.dept && this.date) this.loadControls();
                 if (this.control) this.loadTests();
             }
-        },
-
-        closeEntry() {
-            this.showEntry = false;
         }
     }));
 });
 </script>
 <?= $this->endSection(); ?>
-