From d2e84162cd7247bbf80671d0c8e16e8343b579a5 Mon Sep 17 00:00:00 2001
From: mahdahar <89adham@gmail.com>
Date: Wed, 4 Mar 2026 09:21:41 +0700
Subject: [PATCH] refactor master controls and update custom report layout

---
 .../Master/MasterControlsController.php       |   7 +-
 ...2026-01-17-000001_QualityControlSystem.php |   1 +
 app/Models/Master/MasterControlsModel.php     |  13 +-
 .../master/control/dialog_control_form.php    |  15 +-
 app/Views/master/control/index.php            | 262 ++++++++----------
 app/Views/report/custom1.php                  | 246 ++++++++--------
 6 files changed, 283 insertions(+), 261 deletions(-)

diff --git a/app/Controllers/Master/MasterControlsController.php b/app/Controllers/Master/MasterControlsController.php
index 07d03a3..1e5309c 100755
--- a/app/Controllers/Master/MasterControlsController.php
+++ b/app/Controllers/Master/MasterControlsController.php
@@ -19,7 +19,12 @@ class MasterControlsController extends BaseController {
         ];
     }
 
-    public function index() {        $keyword = $this->request->getGet('keyword');        $deptId = $this->request->getGet('dept_id');        try {            $rows = $this->model->search($keyword, $deptId);
+    public function index() {
+        $keyword = $this->request->getGet('keyword');
+        $deptId = $this->request->getGet('dept_id');
+        $isActive = $this->request->getGet('is_active');
+        try {
+            $rows = $this->model->search($keyword, $deptId, $isActive);
             return $this->respond([
                 'status' => 'success',
                 'message' => 'fetch success',
diff --git a/app/Database/Migrations/2026-01-17-000001_QualityControlSystem.php b/app/Database/Migrations/2026-01-17-000001_QualityControlSystem.php
index a63a83e..106b46c 100755
--- a/app/Database/Migrations/2026-01-17-000001_QualityControlSystem.php
+++ b/app/Database/Migrations/2026-01-17-000001_QualityControlSystem.php
@@ -27,6 +27,7 @@ class QualityControlSystem extends Migration
             'lot' => ['type' => 'VARCHAR', 'constraint' => 50, 'null' => true],
             'producer' => ['type' => 'TEXT', 'null' => true],
             'exp_date' => ['type' => 'DATE', 'null' => true],
+            'is_active' => ['type' => 'TINYINT', 'constraint' => 1, 'null' => false],
             'created_at' => ['type' => 'DATETIME', 'null' => true],
             'updated_at' => ['type' => 'DATETIME', 'null' => true],
             'deleted_at' => ['type' => 'DATETIME', 'null' => true],
diff --git a/app/Models/Master/MasterControlsModel.php b/app/Models/Master/MasterControlsModel.php
index bd668ed..fb2dd75 100755
--- a/app/Models/Master/MasterControlsModel.php
+++ b/app/Models/Master/MasterControlsModel.php
@@ -12,6 +12,7 @@ class MasterControlsModel extends BaseModel {
         'lot',
         'producer',
         'exp_date',
+        'is_active',
         'created_at',
         'updated_at',
         'deleted_at'
@@ -19,7 +20,7 @@ class MasterControlsModel extends BaseModel {
     protected $useTimestamps = true;
     protected $useSoftDeletes = true;
 
-    public function search($keyword = null, $deptId = null) {
+    public function search($keyword = null, $deptId = null, $isActive = null) {
         $builder = $this->builder();
         $builder->select('
             master_controls.control_id as controlId,
@@ -27,6 +28,7 @@ class MasterControlsModel extends BaseModel {
             master_controls.lot,
             master_controls.producer,
             master_controls.exp_date as expDate,
+            master_controls.is_active as isActive,
             master_depts.dept_name as deptName
         ');
         $builder->join('master_depts', 'master_depts.dept_id = master_controls.dept_id', 'left');
@@ -36,6 +38,10 @@ class MasterControlsModel extends BaseModel {
             $builder->where('master_controls.dept_id', $deptId);
         }
 
+        if ($isActive !== null && $isActive !== '') {
+            $builder->where('master_controls.is_active', $isActive);
+        }
+
         if ($keyword) {
             $builder->groupStart()
                 ->like('master_controls.control_name', $keyword)
@@ -45,10 +51,9 @@ class MasterControlsModel extends BaseModel {
         }
 
         $builder->orderBy('master_controls.control_name', 'ASC');
-        
+
         $results = $builder->get()->getResultArray();
-        
-        // Add deptName after camelCase conversion from BaseModel
+
         foreach ($results as &$row) {
             $row['deptName'] = $row['deptName'] ?? null;
         }
diff --git a/app/Views/master/control/dialog_control_form.php b/app/Views/master/control/dialog_control_form.php
index 827d9bd..3533fa6 100755
--- a/app/Views/master/control/dialog_control_form.php
+++ b/app/Views/master/control/dialog_control_form.php
@@ -94,7 +94,7 @@
                 </label>
                 <input type="text"
                     class="input input-bordered input-sm w-full focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary bg-base-200 border-base-300 text-base-content placeholder:opacity-50"
-                    x-model="form.producer" 
+                    x-model="form.producer"
                     @input="filteredProducers = uniqueProducers.filter(p => p && p.toLowerCase().includes(form.producer.toLowerCase())).slice(0, 10); showProdAutocomplete = filteredProducers.length > 0 && form.producer.length > 0; prodHighlightIndex = -1"
                     @focus="filteredProducers = uniqueProducers.filter(p => p && p.toLowerCase().includes(form.producer.toLowerCase())).slice(0, 10); showProdAutocomplete = filteredProducers.length > 0 && form.producer.length > 0"
                     @keydown.down.prevent="prodHighlightIndex = Math.min(prodHighlightIndex + 1, filteredProducers.length - 1)"
@@ -102,7 +102,7 @@
                     @keydown.enter.prevent="if (prodHighlightIndex >= 0) { form.producer = filteredProducers[prodHighlightIndex]; showProdAutocomplete = false; }"
                     @keydown.escape="showProdAutocomplete = false"
                     placeholder="Enter producer name" />
-                <div x-show="showProdAutocomplete" 
+                <div x-show="showProdAutocomplete"
                      x-transition:enter="transition ease-out duration-100"
                      x-transition:enter-start="opacity-0 scale-95"
                      x-transition:enter-end="opacity-100 scale-100"
@@ -115,6 +115,17 @@
                     </template>
                 </div>
             </div>
+
+            <div class="form-control">
+                <label class="label cursor-pointer justify-start gap-3 py-1">
+                    <input type="checkbox"
+                        class="checkbox checkbox-sm checkbox-primary"
+                        x-model="form.isActive"
+                        :checked="form.isActive == 1"
+                        :value="1" />
+                    <span class="label-text text-sm font-semibold text-base-content/70">Active</span>
+                </label>
+            </div>
         </div>
 
         <div class="modal-action mt-5">
diff --git a/app/Views/master/control/index.php b/app/Views/master/control/index.php
index 2a7d3b7..6553a4d 100755
--- a/app/Views/master/control/index.php
+++ b/app/Views/master/control/index.php
@@ -15,13 +15,14 @@
     </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>
-            <select x-model="deptId" @change="setDeptId(deptId)" class="select select-bordered select-sm">
+        <div class="flex flex-col gap-3">
+            <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>
+                <select x-model="deptId" @change="setDeptId(deptId)" class="select select-bordered select-sm">
                     <option value="">All Departments</option>
                     <template x-if="departments">
                         <template x-for="dept in departments" :key="dept.deptId">
@@ -32,29 +33,50 @@
                         <option disabled>Loading...</option>
                     </template>
                 </select>
-            <template x-if="deptId">
-                <button class="btn btn-sm gap-1" @click="setDeptId(null)">
-                    <i class="fa-solid fa-xmark text-xs"></i> Clear
+                <template x-if="deptId">
+                    <button class="btn btn-sm gap-1" @click="setDeptId(null)">
+                        <i class="fa-solid fa-xmark text-xs"></i> Clear
+                    </button>
+                </template>
+                <button class="btn btn-sm btn-neutral gap-2" @click="fetchList()">
+                    <i class="fa-solid fa-magnifying-glass text-xs"></i> Search
                 </button>
-            </template>
-            <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>
 
-    <div class="space-y-4">
+            <div class="flex items-center gap-1">
+                <button
+                    class="btn btn-sm gap-1"
+                    :class="statusFilter === '1' ? 'btn-primary' : 'btn-ghost'"
+                    @click="setStatusFilter('1')">
+                    <i class="fa-solid fa-check-circle text-xs"></i> Active
+                </button>
+                <button
+                    class="btn btn-sm gap-1"
+                    :class="statusFilter === '0' ? 'btn-error' : 'btn-ghost'"
+                    @click="setStatusFilter('0')">
+                    <i class="fa-solid fa-circle-xmark text-xs"></i> Inactive
+                </button>
+                <button
+                    class="btn btn-sm gap-1"
+                    :class="statusFilter === '' ? 'btn-neutral' : 'btn-ghost'"
+                    @click="setStatusFilter('')">
+                    <i class="fa-solid fa-list text-xs"></i> All
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <div class="bg-base-100 rounded-xl border border-base-300 shadow-sm overflow-hidden">
         <template x-if="loading && !list">
-            <div class="bg-base-100 rounded-xl border border-base-300 shadow-sm p-8 text-center">
+            <div class="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">
+            <div class="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>
@@ -64,103 +86,70 @@
         </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 class="overflow-x-auto">
+                <table class="w-full text-sm">
+                    <thead>
+                        <tr class="bg-base-200/50 text-left border-b border-base-300">
+                            <th class="py-3 px-4 font-semibold text-base-content/70 text-[10px] uppercase tracking-wider">Control Name</th>
+                            <th class="py-3 px-3 font-semibold text-base-content/70 text-[10px] uppercase tracking-wider">Lot</th>
+                            <th class="py-3 px-3 font-semibold text-base-content/70 text-[10px] uppercase tracking-wider">Producer</th>
+                            <th class="py-3 px-3 font-semibold text-base-content/70 text-[10px] uppercase tracking-wider">Expiry</th>
+                            <th class="py-3 px-3 font-semibold text-base-content/70 text-[10px] uppercase tracking-wider">Status</th>
+                            <th class="py-3 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="item in list" :key="item.controlId">
+                            <tr class="hover:bg-base-200/30 transition-colors">
+                                <td class="py-2.5 px-4">
+                                    <div class="flex items-center gap-2">
+                                        <div class="w-6 h-6 rounded bg-primary/10 text-primary flex items-center justify-center">
+                                            <i class="fa-solid fa-vial text-[10px]"></i>
+                                        </div>
+                                        <span class="font-medium text-sm" x-text="item.controlName"></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>
+                                </td>
+                                <td class="py-2.5 px-3">
+                                    <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="item.lot"></span>
+                                </td>
+                                <td class="py-2.5 px-3 text-xs text-base-content/70" x-text="item.producer || '-'">
+                                </td>
+                                <td class="py-2.5 px-3 text-xs text-base-content/70" x-text="item.expDate">
+                                </td>
+                                <td class="py-2.5 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(item.expDate)">
+                                        <span class="w-1 h-1 rounded-full" :class="getStatusDotClass(item.expDate)"></span>
+                                        <span x-text="getStatusLabel(item.expDate)"></span>
+                                    </span>
+                                </td>
+                                <td class="py-2.5 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" @click="showForm(item.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" @click="deleteData(item.controlId)">
+                                            <i class="fa-solid fa-trash text-xs"></i>
+                                        </button>
+                                    </div>
+                                </td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </table>
 
-                        <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">
+                    <div class="p-8 text-center border-t border-base-200">
+                        <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>
+                        <p class="text-base-content/50 mt-0.5 text-xs">Try adjusting your filters or add a new control.</p>
                     </div>
                 </template>
             </div>
@@ -181,6 +170,7 @@
             error: null,
             keyword: "",
             deptId: null,
+            statusFilter: "1",
             departments: null,
             loadingDepartments: false,
             list: null,
@@ -190,22 +180,7 @@
                 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;
+                isActive: 1,
             },
 
             get uniqueControlNames() {
@@ -279,6 +254,9 @@
                     if (this.deptId) {
                         params.set('dept_id', this.deptId);
                     }
+                    if (this.statusFilter !== '') {
+                        params.set('is_active', this.statusFilter);
+                    }
                     const response = await fetch(`${BASEURL}api/master/controls?${params}`, {
                         method: "GET",
                         headers: { "Content-Type": "application/json" }
@@ -293,14 +271,19 @@
                 }
             },
 
-            
             setDeptId(id) {
                 this.deptId = id;
                 this.list = null;
                 this.fetchList();
             },
 
-async loadData(id) {
+            setStatusFilter(status) {
+                this.statusFilter = status;
+                this.list = null;
+                this.fetchList();
+            },
+
+            async loadData(id) {
                 this.loading = true;
                 try {
                     const response = await fetch(`${BASEURL}api/master/controls/${id}`, {
@@ -324,30 +307,19 @@ async loadData(id) {
                 if (id) {
                     await this.loadData(id);
                 } else {
-                    this.form = { controlId: null, controlName: "", lot: "", producer: "", expDate: "" };
+                    this.form = { controlId: null, controlName: "", lot: "", producer: "", expDate: "", isActive: 1 };
                 }
             },
 
-            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: "" };
+                this.form = { controlId: null, controlName: "", lot: "", producer: "", expDate: "", isActive: 1 };
             },
 
             validate() {
                 this.errors = {};
                 if (!this.form.controlName) this.errors.controlName = "Name is required.";
+                if (!this.form.lot) this.errors.lot = "Lot is required.";
                 return Object.keys(this.errors).length === 0;
             },
 
@@ -410,4 +382,4 @@ async loadData(id) {
         }));
     });
 </script>
-<?= $this->endSection(); ?>
\ No newline at end of file
+<?= $this->endSection(); ?>
diff --git a/app/Views/report/custom1.php b/app/Views/report/custom1.php
index 78df732..d7e4548 100644
--- a/app/Views/report/custom1.php
+++ b/app/Views/report/custom1.php
@@ -89,14 +89,8 @@
                 <tr>
                     <td class="info-label">Test</td>
                     <td class="value" x-text="testName"></td>
-                    <td class="info-label">Control</td>
-                    <td class="value" x-text="controlNames"></td>
-                </tr>
-                <tr>
                     <td class="info-label">Method</td>
                     <td class="value" x-text="testMethod"></td>
-                    <td class="info-label">Lot-No</td>
-                    <td class="value" x-text="controlLotNumber"></td>
                 </tr>
             </table>
             
@@ -104,10 +98,11 @@
             <table class="pc-table">
                 <thead>
                     <tr>
-                        <th class="pc-header" colspan="4" x-text="testCode"></th>
+                        <th class="pc-header" colspan="5" x-text="testCode"></th>
                     </tr>
                     <tr>
                         <th class="pc-subheader">Control</th>
+                        <th class="pc-subheader">Lot No</th>
                         <th class="pc-subheader">- 3S</th>
                         <th class="pc-subheader">TARGET</th>
                         <th class="pc-subheader">+ 3S</th>
@@ -117,6 +112,7 @@
                     <template x-for="(control, index) in controls" :key="control.controlId">
                         <tr>
                             <td class="pc-control-name" x-text="control.controlName"></td>
+                            <td class="pc-lot" x-text="control.lot || '-'"></td>
                             <td class="pc-value" x-text="formatNum(getMinus3SD(control), 1)"></td>
                             <td class="pc-value" x-text="formatNum(control.mean, 1)"></td>
                             <td class="pc-value" x-text="formatNum(getPlus3SD(control), 1)"></td>
@@ -184,15 +180,27 @@
                         <table class="qc-table">
                             <tr>
                                 <td>MEAN</td>
-                                <td x-text="formatNum(control.stats.mean, 2)"></td>
-                            </tr>
-                            <tr>
+                                <td x-text="formatNum(control.stats.mean, 3)"></td>
                                 <td>SD</td>
-                                <td x-text="formatNum(control.stats.sd, 2)"></td>
+                                <td x-text="formatNum(control.stats.sd, 3)"></td>
                             </tr>
                             <tr>
                                 <td>CV %</td>
-                                <td x-text="formatNum(control.stats.cv, 2) + '%'"></td>
+                                <td x-text="formatNum(control.stats.cv, 3)"></td>
+                                <td>CV<sub>A</sub></td>
+                                <td x-text="formatNum(control.stats.cvA, 2)"></td>
+                            </tr>
+                            <tr>
+                                <td>BIAS %</td>
+                                <td x-text="formatNum(control.stats.bias, 3)"></td>
+                                <td>B<sub>A</sub> %</td>
+                                <td x-text="formatNum(control.stats.ba, 2)"></td>
+                            </tr>
+                            <tr>
+                                <td>TE %</td>
+                                <td x-text="formatNum(control.stats.te, 2)"></td>
+                                <td>TE<sub>A</sub></td>
+                                <td x-text="formatNum(control.stats.teA, 2)"></td>
                             </tr>
                         </table>
                     </div>
@@ -200,27 +208,6 @@
             </div>
         </div>
 
-        <!-- Footer Notes -->
-        <div class="report-footer">
-            <div class="catatan-section">
-                <div class="catatan-label">CATATAN :</div>
-                <div class="catatan-content">
-                    <div class="catatan-item">
-                        <span class="catatan-badge"></span>
-                        <span>Kalibrasi</span>
-                    </div>
-                    <div class="catatan-item">
-                        <span class="catatan-badge"></span>
-                        <span>Preparation control</span>
-                    </div>
-                    <div class="catatan-item">
-                        <span class="catatan-badge"></span>
-                        <span>Ganti Reagen</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-
     </div>
 
     <!-- Error State -->
@@ -240,14 +227,14 @@
         max-width: 210mm;
         margin: 0 auto;
         background: white;
-        padding: 10mm;
+        padding: 3mm;
     }
 
     /* Header Section */
     .report-header {
-        margin-bottom: 15px;
+        margin-bottom: 8px;
         border: 2px solid #333;
-        padding: 10px;
+        padding: 5px;
     }
 
     .lab-info {
@@ -316,7 +303,7 @@
 
     /* Info Section */
     .info-section {
-        margin-bottom: 15px;
+        margin-bottom: 8px;
     }
 
     .info-table {
@@ -327,7 +314,7 @@
 
     .info-table td {
         border: 1px solid #333;
-        padding: 3px 6px;
+        padding: 2px 4px;
     }
 
     .info-table .info-label {
@@ -355,7 +342,7 @@
     .pc-table th,
     .pc-table td {
         border: 1px solid #333;
-        padding: 4px 8px;
+        padding: 2px 4px;
     }
 
     .pc-table .pc-header {
@@ -369,14 +356,30 @@
         background: #f5f5f5;
         font-weight: bold;
         text-align: center;
+    }
+
+    .pc-table .pc-subheader:nth-child(1),
+    .pc-table td.pc-control-name {
         width: 25%;
     }
 
+    .pc-table .pc-subheader:nth-child(2),
+    .pc-table td.pc-lot {
+        width: 20%;
+    }
+
+    .pc-table .pc-subheader:nth-child(3),
+    .pc-table .pc-subheader:nth-child(4),
+    .pc-table .pc-subheader:nth-child(5),
+    .pc-table td.pc-value {
+        width: 18.33%;
+    }
+
     .pc-table .pc-control-name {
         font-weight: bold;
         text-align: left;
         background: #f5f5f5;
-        padding-left: 10px;
+        padding-left: 4px;
     }
 
     .pc-table .pc-value {
@@ -384,11 +387,17 @@
         font-family: monospace;
     }
 
+    .pc-table .pc-lot {
+        text-align: center;
+        font-family: monospace;
+        font-size: 9px;
+    }
+
     /* Main Grid */
     .main-grid {
         display: flex;
-        gap: 15px;
-        margin-bottom: 15px;
+        gap: 8px;
+        margin-bottom: 8px;
     }
 
     .data-table-section {
@@ -398,20 +407,20 @@
     .chart-section {
         width: 45%;
         border: 1px solid #333;
-        padding: 10px;
+        padding: 5px;
     }
 
     .chart-container {
-        height: 350px;
+        height: 480px;
         position: relative;
     }
 
     .chart-legend {
         display: flex;
         justify-content: center;
-        gap: 15px;
-        margin-top: 10px;
-        font-size: 10px;
+        gap: 10px;
+        margin-top: 5px;
+        font-size: 9px;
     }
 
     .legend-item {
@@ -436,7 +445,7 @@
     .data-table th,
     .data-table td {
         border: 1px solid #333;
-        padding: 4px 6px;
+        padding: 2px 4px;
     }
 
     .data-table th {
@@ -468,7 +477,7 @@
     /* QC Performance */
     .qc-performance {
         border: 2px solid #333;
-        margin-bottom: 15px;
+        margin-bottom: 8px;
     }
 
     .qc-header {
@@ -476,8 +485,8 @@
         color: black;
         text-align: center;
         font-weight: bold;
-        font-size: 12px;
-        padding: 5px;
+        font-size: 11px;
+        padding: 3px;
         border-bottom: 2px solid #333;
     }
 
@@ -490,50 +499,53 @@
 
     .qc-card {
         background: white;
-        padding: 8px;
+        padding: 4px;
     }
 
     .qc-left {
-        background: #fff8dc;
+        background: white;
     }
 
     .qc-right {
-        background: #ffe4e1;
+        background: white;
     }
 
     .qc-title {
         font-weight: bold;
-        font-size: 11px;
+        font-size: 10px;
         text-align: center;
-        margin-bottom: 5px;
+        margin-bottom: 3px;
         border-bottom: 1px solid #333;
-        padding-bottom: 3px;
+        padding-bottom: 2px;
     }
 
     .qc-table {
         width: 100%;
-        font-size: 10px;
+        font-size: 9px;
         border-collapse: collapse;
     }
 
     .qc-table td {
-        padding: 2px 5px;
+        padding: 1px 3px;
+        border: 1px solid #ccc;
     }
 
-    .qc-table td:first-child {
+    .qc-table td:nth-child(odd) {
         font-weight: bold;
-        width: 30%;
+        width: 20%;
+        background: #f5f5f5;
     }
 
-    .qc-table td:last-child {
+    .qc-table td:nth-child(even) {
         text-align: right;
         font-family: monospace;
+        width: 30%;
     }
 
     /* Footer */
     .report-footer {
         border: 1px solid #333;
-        padding: 10px;
+        padding: 5px;
     }
 
     .catatan-section {
@@ -600,12 +612,12 @@
         .traditional-report {
             background: white !important;
             min-height: 277mm;
-            padding: 5mm;
+            padding: 2mm;
             box-shadow: none;
         }
 
         .chart-container {
-            height: 300px;
+            height: 450px;
         }
     }
 </style>
@@ -672,7 +684,7 @@
                         // Use test data from API response
                         this.testData = json.data.test || this.tests.find(t => t.testId == this.selectedTest);
                         this.processedControls = this.controls.map(c => {
-                            const stats = this.calculateStats(c.results);
+                            const stats = this.calculateStats(c.results, c.mean);
                             return { ...c, stats };
                         });
                         this.$nextTick(() => {
@@ -695,23 +707,39 @@
                 return Object.values(results).some(r => r !== null && r !== undefined && r.resValue !== null);
             },
 
-            calculateStats(results) {
-                if (!results || typeof results !== 'object') return { n: 0, mean: null, sd: null, cv: null };
+            calculateStats(results, controlMean) {
+                if (!results || typeof results !== 'object') return { n: 0, mean: null, sd: null, cv: null, bias: null, te: null, cvA: null, ba: null, teA: null };
 
                 const values = Object.values(results)
                     .filter(r => r !== null && r !== undefined)
                     .map(r => parseFloat(r.resValue))
                     .filter(v => !isNaN(v));
 
-                if (values.length === 0) return { n: 0, mean: null, sd: null, cv: null };
+                if (values.length === 0) return { n: 0, mean: null, sd: null, cv: null, bias: null, te: null, cvA: null, ba: null, teA: null };
 
                 const n = values.length;
                 const mean = values.reduce((a, b) => a + b, 0) / n;
                 const variance = values.reduce((a, b) => a + Math.pow(b - mean, 2), 0) / (n > 1 ? n - 1 : 1);
                 const sd = Math.sqrt(variance);
                 const cv = mean !== 0 ? (sd / mean) * 100 : 0;
+                
+                // BIAS% = ((Observed Mean - Target Mean) / Target Mean) * 100
+                const targetMean = parseFloat(controlMean) || mean;
+                const bias = targetMean !== 0 ? ((mean - targetMean) / targetMean) * 100 : 0;
+                
+                // TE% = |BIAS%| + 1.65 * CV% (Westgard TE at 95% confidence)
+                const te = Math.abs(bias) + (1.65 * cv);
+                
+                // CV_A (Analytical CV) - use test-specific or default based on control
+                const cvA = controlMean ? 1.6 : 0; // Default 1.6% for controls with defined mean
+                
+                // B_A% (Analytical Bias) - default value
+                const ba = 1.3;
+                
+                // TE_A (Analytical Total Error) - typically CV_A + B_A
+                const teA = 3.9;
 
-                return { n, mean, sd, cv };
+                return { n, mean, sd, cv, bias, te, cvA, ba, teA };
             },
 
             renderChart() {
@@ -732,33 +760,32 @@
                     const sd = parseFloat(control.sd) || 0;
                     const color = this.controlColors[index % this.controlColors.length];
                     
-                    const data = days.map(day => {
+                    const data = [];
+                    days.forEach(day => {
                         const res = control.results[day];
                         if (res && res.resValue !== null && sd !== 0) {
-                            return (parseFloat(res.resValue) - mean) / sd;
+                            const sdValue = (parseFloat(res.resValue) - mean) / sd;
+                            data.push({ x: sdValue, y: day });
                         }
-                        return null;
                     });
 
                     return {
                         label: control.controlName,
                         data: data,
                         borderColor: color,
-                        backgroundColor: color,
-                        pointBackgroundColor: data.map(v => v !== null && Math.abs(v) > 2 ? '#ff0000' : color),
-                        pointRadius: 4,
-                        borderWidth: 1,
-                        showLine: false,
-                        tension: 0
+                        backgroundColor: data.map(d => Math.abs(d.x) > 2 ? '#ff0000' : color),
+                        pointBackgroundColor: data.map(d => Math.abs(d.x) > 2 ? '#ff0000' : color),
+                        pointRadius: 3,
+                        borderWidth: 1.5,
+                        showLine: true,
+                        tension: 0,
+                        spanGaps: true
                     };
                 });
 
                 this.chart = new Chart(ctx, {
-                    type: 'line',
-                    data: {
-                        labels: days,
-                        datasets: datasets
-                    },
+                    type: 'scatter',
+                    data: { datasets: datasets },
                     options: {
                         responsive: true,
                         maintainAspectRatio: false,
@@ -768,51 +795,51 @@
                                 annotations: {
                                     meanLine: {
                                         type: 'line',
-                                        yMin: 0,
-                                        yMax: 0,
+                                        xMin: 0,
+                                        xMax: 0,
                                         borderColor: '#666',
                                         borderWidth: 1,
                                         borderDash: [5, 5]
                                     },
                                     plus1sd: {
                                         type: 'line',
-                                        yMin: 1,
-                                        yMax: 1,
+                                        xMin: 1,
+                                        xMax: 1,
                                         borderColor: '#ccc',
                                         borderWidth: 1
                                     },
                                     minus1sd: {
                                         type: 'line',
-                                        yMin: -1,
-                                        yMax: -1,
+                                        xMin: -1,
+                                        xMax: -1,
                                         borderColor: '#ccc',
                                         borderWidth: 1
                                     },
                                     plus2sd: {
                                         type: 'line',
-                                        yMin: 2,
-                                        yMax: 2,
+                                        xMin: 2,
+                                        xMax: 2,
                                         borderColor: '#999',
                                         borderWidth: 1
                                     },
                                     minus2sd: {
                                         type: 'line',
-                                        yMin: -2,
-                                        yMax: -2,
+                                        xMin: -2,
+                                        xMax: -2,
                                         borderColor: '#999',
                                         borderWidth: 1
                                     },
                                     plus3sd: {
                                         type: 'line',
-                                        yMin: 3,
-                                        yMax: 3,
+                                        xMin: 3,
+                                        xMax: 3,
                                         borderColor: '#333',
                                         borderWidth: 2
                                     },
                                     minus3sd: {
                                         type: 'line',
-                                        yMin: -3,
-                                        yMax: -3,
+                                        xMin: -3,
+                                        xMax: -3,
                                         borderColor: '#333',
                                         borderWidth: 2
                                     }
@@ -821,17 +848,6 @@
                         },
                         scales: {
                             x: {
-                                title: {
-                                    display: true,
-                                    text: 'Day',
-                                    font: { size: 10 }
-                                },
-                                ticks: {
-                                    font: { size: 8 },
-                                    maxRotation: 0
-                                }
-                            },
-                            y: {
                                 min: -4,
                                 max: 4,
                                 title: {
@@ -846,6 +862,18 @@
                                         return value === 0 ? '0' : (value > 0 ? '+' + value : value);
                                     }
                                 }
+                            },
+                            y: {
+                                title: {
+                                    display: true,
+                                    text: 'Day',
+                                    font: { size: 10 }
+                                },
+                                ticks: {
+                                    font: { size: 8 },
+                                    stepSize: 1,
+                                    precision: 0
+                                }
                             }
                         }
                     }