tinyqc/app/Views/master/control/index.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(); ?>