change bold line on 3sd to 2sd

- Add delete/restore button in action column for each test row

- Implement soft delete functionality using deletedResults tracking array

- Update save endpoint to process deletedIds for soft deletion

- Allow saving when only deletions exist (no new data needed)

app/Config/Routes.php

@@ -24,6 +24,7 @@ $routes->get('/entry/daily', 'PageController::entryDaily', ['filter' => AuthFilt
 $routes->get('/entry/monthly', 'PageController::entryMonthly', ['filter' => AuthFilter::class]);
 $routes->get('/report', 'PageController::report', ['filter' => AuthFilter::class]);
 $routes->get('/report/merged', 'PageController::reportMerged', ['filter' => AuthFilter::class]);
+$routes->get('/report/custom1', 'PageController::reportCustom1', ['filter' => AuthFilter::class]);
 
 $routes->group('api', ['filter' => AuthFilter::class], function ($routes) {
     $routes->get('dashboard/recent', 'Api\DashboardApiController::getRecent');

app/Controllers/Api/EntryApiController.php

@@ -195,11 +195,18 @@ class EntryApiController extends BaseController
 
             $date = $input['date'];
             $results = $input['results'];
+            $deletedIds = $input['deletedIds'] ?? [];
             $savedIds = [];
 
             // Start transaction
             $this->resultModel->db->transBegin();
 
+            // Handle deletions first
+            foreach ($deletedIds as $resultId) {
+                $this->resultModel->delete((int) $resultId);
+            }
+
+            // Save/update results
             foreach ($results as $r) {
                 if (!isset($r['controlId']) || !isset($r['testId']) || !isset($r['value'])) {
                     continue;
@@ -228,7 +235,7 @@ class EntryApiController extends BaseController
 
             return $this->respond([
                 'status' => 'success',
-                'message' => 'Saved ' . count($savedIds) . ' results',
+                'message' => 'Saved ' . count($savedIds) . ' results' . (count($deletedIds) > 0 ? ', deleted ' . count($deletedIds) : ''),
                 'data' => ['savedIds' => $savedIds]
             ], 200);
         } catch (\Exception $e) {
@@ -252,8 +259,8 @@ class EntryApiController extends BaseController
                 return $this->failValidationErrors(['test_id' => 'Required', 'month' => 'Required']);
             }
 
-            // Get test details
-            $test = $this->testModel->find($testId);
+            // Get test details with department name
+            $test = $this->testModel->findWithDept($testId);
             if (!$test) {
                 return $this->failNotFound('Test not found');
             }
@@ -311,6 +318,7 @@ class EntryApiController extends BaseController
                     'controlName' => $c['controlName'],
                     'lot' => $c['lot'],
                     'producer' => $c['producer'],
+                    'expDate' => $c['expDate'],
                     'mean' => $c['mean'],
                     'sd' => $c['sd'],
                     'results' => $resultsArray
@@ -320,8 +328,11 @@ class EntryApiController extends BaseController
             $data = [
                 'test' => [
                     'testId' => $test['testId'],
+                    'testCode' => $test['testCode'] ?? null,
                     'testName' => $test['testName'],
-                    'testUnit' => $test['testUnit']
+                    'testUnit' => $test['testUnit'],
+                    'testMethod' => $test['testMethod'] ?? null,
+                    'deptName' => $test['deptName'] ?? null
                 ],
                 'month' => $month,
                 'controls' => $controlsWithData

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',

app/Controllers/PageController.php

@@ -47,7 +47,11 @@ class PageController extends BaseController {
         return view('report/view');
     }
 
-    public function reportMerged() {
+public function reportMerged() {
         return view('report/merged');
     }
+
+    public function reportCustom1() {
+        return view('report/custom1');
+    }
 }

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],

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)
@@ -48,7 +54,6 @@ class MasterControlsModel extends BaseModel {
 
         $results = $builder->get()->getResultArray();
 
-        // Add deptName after camelCase conversion from BaseModel
         foreach ($results as &$row) {
             $row['deptName'] = $row['deptName'] ?? null;
         }

app/Models/Master/MasterTestsModel.php

@@ -53,4 +53,26 @@ class MasterTestsModel extends BaseModel {
 
         return $builder->get()->getResultArray();
     }
+
+
+    public function findWithDept($testId) {
+        $builder = $this->builder();
+        $builder->select('
+            master_tests.test_id as testId,
+            master_tests.test_code as testCode,
+            master_tests.test_name as testName,
+            master_tests.test_unit as testUnit,
+            master_tests.test_method as testMethod,
+            master_tests.cva,
+            master_tests.ba,
+            master_tests.tea,
+            master_depts.dept_name as deptName
+        ');
+        $builder->join('master_depts', 'master_depts.dept_id = master_tests.dept_id', 'left');
+        $builder->where('master_tests.test_id', $testId);
+        $builder->where('master_tests.deleted_at', null);
+        $builder->groupBy('master_tests.test_id, master_depts.dept_name');
+
+        return $builder->get()->getRowArray();
+    }
 }

app/Views/entry/daily.php

@@ -100,8 +100,9 @@
                     <tr>
                         <th>Test</th>
                         <th class="text-center">Mean ± 2SD</th>
-                        <th class="w-32">Result</th>
+                        <th class="w-40">Result</th>
                         <th class="w-56">Comment</th>
+                        <th class="w-16">Action</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -123,18 +124,30 @@
                                        step="0.01"
                                        :placeholder="'...'"
                                        class="input input-bordered input-sm w-full font-mono"
-                                       :class="getInputClass(test, $el.value)"
+                                       :class="getInputClass(test, $el.value) + ' ' + (deletedResults.includes(test.testId) ? 'input-disabled' : '')"
+                                       :disabled="deletedResults.includes(test.testId)"
                                        @input.debounce.300ms="updateResult(test.testId, $el.value)"
-                                       :value="test.existingResult ? test.existingResult.resValue : ''">
+                                       :value="getResultValue(test.testId)">
                             </td>
                             <td>
                                 <textarea
                                       :placeholder="'Optional comment...'"
                                       rows="1"
                                       class="textarea textarea-bordered textarea-xs w-full"
+                                      :class="deletedResults.includes(test.testId) ? 'textarea-disabled' : ''"
+                                      :disabled="deletedResults.includes(test.testId)"
                                       @input.debounce.300ms="updateComment(test.testId, $el.value)"
                                       :value="getComment(test.testId)"></textarea>
                             </td>
+                            <td class="text-center">
+                                <button type="button"
+                                        @click="toggleDelete(test.testId)"
+                                        class="btn btn-ghost btn-sm"
+                                        :class="deletedResults.includes(test.testId) ? 'text-warning' : 'text-error'"
+                                        :title="deletedResults.includes(test.testId) ? 'Restore' : 'Delete'">
+                                    <i class="fa-solid" :class="deletedResults.includes(test.testId) ? 'fa-rotate-left' : 'fa-trash'"></i>
+                                </button>
+                            </td>
                         </tr>
                     </template>
                 </tbody>
@@ -163,6 +176,7 @@ document.addEventListener('alpine:init', () => {
         saving: false,
         resultsData: {},
         commentsData: {},
+        deletedResults: [],
         deptId: null,
         departments: null,
 
@@ -236,9 +250,10 @@ document.addEventListener('alpine:init', () => {
                 const json = await response.json();
                 this.tests = json.data || [];
 
-                // Initialize resultsData and commentsData with existing values
+                // Initialize resultsData, commentsData, and deletedResults
                 this.resultsData = {};
                 this.commentsData = {};
+                this.deletedResults = [];
                 for (const test of this.tests) {
                     if (test.existingResult && test.existingResult.resValue !== null) {
                         this.resultsData[test.testId] = test.existingResult.resValue;
@@ -263,7 +278,17 @@ document.addEventListener('alpine:init', () => {
             this.saving = true;
             try {
                 const results = [];
+                const deletedIds = [];
+
                 for (const test of this.tests) {
+                    // Check if this test is marked for deletion
+                    if (this.deletedResults.includes(test.testId)) {
+                        if (test.existingResult && test.existingResult.resultId) {
+                            deletedIds.push(test.existingResult.resultId);
+                        }
+                        continue;
+                    }
+
                     const value = this.resultsData[test.testId];
                     if (value !== undefined && value !== '') {
                         results.push({
@@ -279,15 +304,20 @@ document.addEventListener('alpine:init', () => {
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({
                         date: this.date,
-                        results: results
+                        results: results,
+                        deletedIds: deletedIds
                     })
                 });
 
                 const json = await response.json();
                 if (json.status === 'success') {
-                    // Save comments using the returned result IDs
+                    // Save comments for non-deleted tests
                     const savedIds = json.data.savedIds || [];
                     for (const item of savedIds) {
+                        // Skip if this test is marked for deletion
+                        if (this.deletedResults.includes(item.testId)) {
+                            continue;
+                        }
                         const comment = this.commentsData[item.testId];
                         if (comment) {
                             await this.saveComment(item.testId, this.date, comment);
@@ -299,6 +329,7 @@ document.addEventListener('alpine:init', () => {
                     // Refresh data
                     this.resultsData = {};
                     this.commentsData = {};
+                    this.deletedResults = [];
                     await this.fetchTests();
                 } else {
                     this.$dispatch('notify', { type: 'error', message: json.message || 'Failed to save' });
@@ -329,12 +360,51 @@ document.addEventListener('alpine:init', () => {
             }
         },
 
+        getResultValue(testId) {
+            // If marked for deletion, show empty
+            if (this.deletedResults.includes(testId)) {
+                return '';
+            }
+            // Return from resultsData if changed
+            if (testId in this.resultsData) {
+                return this.resultsData[testId];
+            }
+            // Return existing result from database
+            const test = this.tests.find(t => t.testId === testId);
+            if (test && test.existingResult && test.existingResult.resValue !== null) {
+                return test.existingResult.resValue;
+            }
+            return '';
+        },
+
         updateResult(testId, value) {
             if (value === '') {
                 delete this.resultsData[testId];
             } else {
                 this.resultsData[testId] = value;
             }
+            // Remove from deletedResults if user enters a value
+            if (value !== '' && this.deletedResults.includes(testId)) {
+                this.deletedResults = this.deletedResults.filter(id => id !== testId);
+            }
+        },
+
+        toggleDelete(testId) {
+            const test = this.tests.find(t => t.testId === testId);
+            const hasExistingResult = test && test.existingResult && test.existingResult.resValue !== null;
+            const hasChanges = testId in this.resultsData || testId in this.commentsData;
+
+            if (this.deletedResults.includes(testId)) {
+                // Restore - remove from deleted list
+                this.deletedResults = this.deletedResults.filter(id => id !== testId);
+            } else {
+                // Mark for deletion
+                if (hasExistingResult || hasChanges) {
+                    this.deletedResults.push(testId);
+                    // Clear any pending changes for this test
+                    delete this.resultsData[testId];
+                }
+            }
         },
 
         updateComment(testId, value) {
@@ -384,7 +454,11 @@ document.addEventListener('alpine:init', () => {
         },
 
         get canSave() {
-            return this.selectedControl && (Object.keys(this.resultsData).length > 0 || Object.keys(this.commentsData).length > 0) && !this.saving;
+            return this.selectedControl && (
+                Object.keys(this.resultsData).length > 0 ||
+                Object.keys(this.commentsData).length > 0 ||
+                this.deletedResults.length > 0
+            ) && !this.saving;
         },
 
         setToday() {

app/Views/layout/main_layout.php

@@ -159,13 +159,20 @@
                             Standard Report
                         </a>
                     </li>
-                    <li class="mb-1 min-h-0">
+<li class="mb-1 min-h-0">
                         <a class="flex items-center gap-3 px-4 py-3 rounded-lg <?= uri_string() === 'report/merged' ? 'bg-primary/10 text-primary font-medium' : 'opacity-70 hover:bg-base-200 hover:opacity-100' ?> transition-colors h-full"
                             href="<?= base_url('/report/merged') ?>">
                             <i class="fa-solid fa-chart-simple w-5"></i>
                             Merged Report
                         </a>
                     </li>
+                    <li class="mb-1 min-h-0">
+                        <a class="flex items-center gap-3 px-4 py-3 rounded-lg <?= uri_string() === 'report/custom1' ? 'bg-primary/10 text-primary font-medium' : 'opacity-70 hover:bg-base-200 hover:opacity-100' ?> transition-colors h-full"
+                            href="<?= base_url('/report/custom1') ?>">
+                            <i class="fa-solid fa-file-lines w-5"></i>
+                            Custom 1
+                        </a>
+                    </li>
                 </ul>
 
             </aside>

app/Views/master/control/dialog_control_form.php

@@ -34,19 +34,33 @@
                     </template>
                 </div>
             </template>
-            <div class="form-control">
+            <div class="form-control relative" x-data="{ showAutocomplete: false, filteredNames: [], highlightIndex: -1 }" @click.outside="showAutocomplete = false">
                 <label class="label py-1">
                     <span class="label-text-alt font-semibold text-base-content/70">Control Name</span>
                 </label>
                 <input type="text"
                     class="input input-bordered input-sm w-full focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-base-200 border-base-300 text-base-content placeholder:opacity-50"
-                    :class="{'border-error': errors.controlName}" x-model="form.controlName" list="control-names-list"
+                    :class="{'border-error': errors.controlName}" 
+                    x-model="form.controlName" 
+                    @input="filteredNames = uniqueControlNames.filter(n => n.toLowerCase().includes(form.controlName.toLowerCase())).slice(0, 10); showAutocomplete = filteredNames.length > 0 && form.controlName.length > 0; highlightIndex = -1"
+                    @focus="filteredNames = uniqueControlNames.filter(n => n.toLowerCase().includes(form.controlName.toLowerCase())).slice(0, 10); showAutocomplete = filteredNames.length > 0 && form.controlName.length > 0"
+                    @keydown.down.prevent="highlightIndex = Math.min(highlightIndex + 1, filteredNames.length - 1)"
+                    @keydown.up.prevent="highlightIndex = Math.max(highlightIndex - 1, -1)"
+                    @keydown.enter.prevent="if (highlightIndex >= 0) { form.controlName = filteredNames[highlightIndex]; showAutocomplete = false; }"
+                    @keydown.escape="showAutocomplete = false"
                     placeholder="Enter control name" />
-                <datalist id="control-names-list">
-                    <template x-for="name in uniqueControlNames" :key="name">
-                        <option :value="name" x-text="name"></option>
+                <div x-show="showAutocomplete" 
+                     x-transition:enter="transition ease-out duration-100"
+                     x-transition:enter-start="opacity-0 scale-95"
+                     x-transition:enter-end="opacity-100 scale-100"
+                     class="absolute top-full left-0 right-0 mt-1 bg-base-100 border border-base-300 rounded-lg shadow-lg z-50 max-h-48 overflow-y-auto">
+                    <template x-for="(name, index) in filteredNames" :key="name">
+                        <div @click="form.controlName = name; showAutocomplete = false"
+                             :class="{'bg-primary text-primary-content': index === highlightIndex, 'hover:bg-base-200': index !== highlightIndex}"
+                             class="px-3 py-2 cursor-pointer text-sm"
+                             x-text="name"></div>
                     </template>
-                </datalist>
+                </div>
                 <template x-if="errors.controlName">
                     <label class="label">
                         <span class="label-text-alt text-error" x-text="errors.controlName"></span>
@@ -74,18 +88,43 @@
                 </div>
             </div>
 
-            <div class="form-control">
+            <div class="form-control relative" x-data="{ showProdAutocomplete: false, filteredProducers: [], prodHighlightIndex: -1 }" @click.outside="showProdAutocomplete = false">
                 <label class="label py-1">
                     <span class="label-text-alt font-semibold text-base-content/70">Producer</span>
                 </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" list="producers-list" placeholder="Enter producer name" />
-                <datalist id="producers-list">
-                    <template x-for="producer in uniqueProducers" :key="producer">
-                        <option :value="producer" x-text="producer"></option>
+                    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)"
+                    @keydown.up.prevent="prodHighlightIndex = Math.max(prodHighlightIndex - 1, -1)"
+                    @keydown.enter.prevent="if (prodHighlightIndex >= 0) { form.producer = filteredProducers[prodHighlightIndex]; showProdAutocomplete = false; }"
+                    @keydown.escape="showProdAutocomplete = false"
+                    placeholder="Enter producer name" />
+                <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"
+                     class="absolute top-full left-0 right-0 mt-1 bg-base-100 border border-base-300 rounded-lg shadow-lg z-50 max-h-48 overflow-y-auto">
+                    <template x-for="(producer, index) in filteredProducers" :key="producer">
+                        <div @click="form.producer = producer; showProdAutocomplete = false"
+                             :class="{'bg-primary text-primary-content': index === prodHighlightIndex, 'hover:bg-base-200': index !== prodHighlightIndex}"
+                             class="px-3 py-2 cursor-pointer text-sm"
+                             x-text="producer"></div>
                     </template>
-                </datalist>
+                </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>
 

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;
             },