diff --git a/app/Livewire/SelectPlant.php b/app/Livewire/SelectPlant.php
new file mode 100644
index 000000000..e1a807522
--- /dev/null
+++ b/app/Livewire/SelectPlant.php
@@ -0,0 +1,82 @@
+<?php
+
+namespace App\Livewire;
+
+use App\Models\Line;
+use App\Models\Plant;
+use App\Models\ProductionQuantity;
+use Carbon\Carbon;
+use Livewire\Component;
+
+class SelectPlant extends Component
+{
+
+    protected $listeners = [
+        'plant-line-updated' => 'updatePlantLine',
+        'productionUpdated' => '$refresh'
+    ];
+
+    public $plantId;
+    public $lineId;
+
+    public $hourlyData = [];
+
+    public function updatePlantLine($plantId, $lineId)
+    {
+        session(['plantId' => $plantId, 'lineId' => $lineId]);
+        $this->plantId = $plantId;
+        $this->lineId = $lineId;
+        $this->loadData();
+    }
+
+    // Method to load hourly production data
+    public function loadData()
+    {
+        // Define the time range from today 8:00 AM to the next day 8:00 AM
+        $today = now()->startOfDay()->addHours(8);  // Today 8:00 AM
+        $nextDay = $today->copy()->addDay();  // Next day 8:00 AM
+
+        // Initialize the array to hold the hourly data
+        $productionCounts = [];
+
+        // Loop through each hour from today 8:00 AM to the next day 8:00 AM
+    for ($i = 0; $i < 24; $i++) {
+        // Define the start and end time for the current hour
+        $startOfHour = $today->copy()->addHours($i);  // Start of the hour
+        $endOfHour = $startOfHour->copy()->addHour()->subSeconds(1);  // End of the hour
+
+        // Query the production counts for the current hour (between start and end time)
+        $count = ProductionQuantity::query()
+            ->where('plant_id', $this->plantId)
+            ->where('line_id', $this->lineId)
+            ->whereBetween('created_at', [$startOfHour, $endOfHour])
+            ->count();  // Count the number of records in the current hour
+
+        // Store the count for the current hour in the production counts array
+        $productionCounts[$i] = $count;
+
+    }
+
+        // Set the hourly data to be used in the component's view
+        $this->hourlyData = $productionCounts;
+
+    }
+
+    // public function render()
+    // {
+    //     return view('livewire.select-plant', [
+    //         'hourlyData' => $this->hourlyData,
+    //     ]);
+    // }
+
+    public function mount()
+    {
+        $this->plantId = session('plantId');
+        $this->lineId = session('lineId');
+
+        if ($this->plantId && $this->lineId) {
+            $this->loadData();
+        }
+    }
+
+}
diff --git a/resources/views/livewire/select-plant.blade.php b/resources/views/livewire/select-plant.blade.php
new file mode 100644
index 000000000..8d5ab9520
--- /dev/null
+++ b/resources/views/livewire/select-plant.blade.php
@@ -0,0 +1,170 @@
+
+
+<div class="flex-none md:flex space-x-4 w-full">
+
+    <!-- First Table (08:00 AM to 19:00 PM) -->
+    <div class="w-full px-2 py-2">
+        <table class="w-full divide-y divide-gray-200 border-1 rounded-lg overflow-hidden">
+            <thead class="bg-gray-100">
+                <tr>
+                    <th class="px-2 py-2 text-center border text-xs font-bold text-gray-700 uppercase tracking-wider">No</th>
+                    <th class="px-2 py-2 text-center border text-xs font-bold text-gray-700 uppercase tracking-wider">Time Range</th>
+                    <th class="px-2 py-2 text-center border text-xs font-bold text-gray-700 uppercase tracking-wider">Production Quantity</th>
+                </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+                @php
+                    // Static time range for the first 12 hours (08:00 AM to 07:00 PM)
+                    $timeRanges = [
+                        '08:00 AM - 09:00 AM',
+                        '09:00 AM - 10:00 AM',
+                        '10:00 AM - 11:00 AM',
+                        '11:00 AM - 12:00 PM',
+                        '12:00 PM - 13:00 PM',
+                        '13:00 PM - 14:00 PM',
+                        '14:00 PM - 15:00 PM',
+                        '15:00 PM - 16:00 PM',
+                        '16:00 PM - 17:00 PM',
+                        '17:00 PM - 18:00 PM',
+                        '18:00 PM - 19:00 PM',
+                        '19:00 PM - 20:00 PM',
+                    ];
+                @endphp
+
+                @foreach ($timeRanges as $index => $timeRange)
+                <tr>
+                    <td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $index + 1 }}</td>
+                    <td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $timeRange }}</td>
+                    <td class="px-3 py-2 border text-xs text-center whitespace-nowrap">
+                        {{ $hourlyData[$index] ?? 0 }}
+                    </td>
+                </tr>
+                @endforeach
+            </tbody>
+        </table>
+    </div>
+
+    <div class="w-full px-2 py-2">
+        <table class="w-full divide-y divide-gray-200 border-1 rounded-lg overflow-hidden">
+            <thead class="bg-gray-100">
+                <tr>
+                    <th class="px-2 py-2 text-center border text-xs font-bold text-gray-700 uppercase tracking-wider">No</th>
+                    <th class="px-2 py-2 text-center border text-xs font-bold text-gray-700 uppercase tracking-wider">Time Range</th>
+                    <th class="px-2 py-2 text-center border text-xs font-bold text-gray-700 uppercase tracking-wider">Production Quantity</th>
+                </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+                @php
+                    // Static time range for the first 12 hours (08:00 AM to 07:00 PM)
+                    $timeRanges = [
+                        '20:00 PM - 21:00 PM',
+                        '21:00 PM - 22:00 PM',
+                        '22:00 PM - 23:00 PM',
+                        '23:00 PM - 12:00 AM',
+                        '12:00 AM - 01:00 AM',
+                        '01:00 AM - 02:00 AM',
+                        '02:00 AM - 03:00 AM',
+                        '03:00 AM - 04:00 AM',
+                        '04:00 AM - 05:00 AM',
+                        '05:00 AM - 06:00 AM',
+                        '06:00 AM - 07:00 AM',
+                        '07:00 AM - 08:00 AM',
+                    ];
+                @endphp
+
+                @foreach ($timeRanges as $index => $timeRange)
+                <tr>
+                    <td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $index + 13 }}</td>
+                    <td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $timeRange }}</td>
+                    <td class="px-3 py-2 border text-xs text-center whitespace-nowrap">
+                        {{ $hourlyData[$index + 12] ?? 0 }}
+                    </td>
+                </tr>
+                @endforeach
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Second Table (20:00 PM to 08:00 AM next day) -->
+    {{-- <div class="w-full px-2">
+        <table class="w-full divide-y divide-gray-200 border-1 rounded-lg overflow-hidden">
+            <thead class="bg-gray-100">
+                <tr>
+                    <th class="px-3 py-2 border text-center text-xs font-bold text-gray-800 uppercase tracking-wider">No</th>
+                    <th class="px-3 py-2 border text-center text-xs font-bold text-gray-800 uppercase tracking-wider">Time Range</th>
+                    <th class="px-3 py-2 border text-center text-xs font-bold text-gray-800 uppercase tracking-wider">Production Quantity</th>
+                </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+                <tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">13</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">08:00 PM - 09:00 PM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[12] }}</td></tr>
+                <tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">14</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">09:00 PM - 10:00 PM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[13] }}</td></tr>
+                <tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">15</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">10:00 PM - 11:00 PM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[14] }}</td></tr>
+                <tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">16</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">11:00 PM - 12:00 AM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[15] }}</td></tr>
+                <tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">17</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">12:00 AM - 01:00 AM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[16] }}</td></tr>
+                <tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">18</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">01:00 AM - 02:00 AM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[17] }}</td></tr>
+                <tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">19</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">02:00 AM - 03:00 AM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[18] }}</td></tr>
+                <tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">20</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">03:00 AM - 04:00 AM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[19] }}</td></tr>
+                <tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">21</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">04:00 AM - 05:00 AM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[20] }}</td></tr>
+                <tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">22</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">05:00 AM - 06:00 AM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[21] }}</td></tr>
+                <tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">23</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">06:00 AM - 07:00 AM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[22] }}</td></tr>
+                <tr><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">24</td><td class="px-3 py-2 border text-center text-xs whitespace-nowrap">07:00 AM - 08:00 AM</td><td class="px-3 py-2 border text-xs text-center whitespace-nowrap">{{ $productionQuantities[23] }}</td></tr>
+            </tbody>
+        </table>
+    </div> --}}
+</div>
+
+
+{{-- //..perfect logic  --}}
+
+{{-- <div class="flex space-x-4 w-full">
+    <!-- First Table: 08:00 AM to 07:00 PM -->
+    <div class="w-full px-2">
+        <table class="w-full divide-y divide-gray-200 border-1 rounded-lg  border-black overflow-hidden">
+            <thead class="bg-gray-100">
+                <tr>
+                    <th class="px-3 py-3 border text-center text-xs font-bold text-gray-700 uppercase tracking-wider">No</th>
+                    <th class="px-3 py-3 border text-center text-xs font-bold text-gray-700 uppercase tracking-wider">Time Range</th>
+                    <th class="px-3 py-3 border text-center text-xs font-bold text-gray-700 uppercase tracking-wider">Production Quantity</th>
+                </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+                @foreach ($hourlyData as $index => $data)
+                    @if ($index < 12) <!-- First 12 time ranges (AM) -->
+                        <tr>
+                            <td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $index + 1 }}</td>
+                            <td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $data['time'] }}</td>
+                            <td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $data['quantity'] ?: '0' }}</td> <!-- Show 0 if no data -->
+                        </tr>
+                    @endif
+                @endforeach
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Second Table: 08:00 PM to 08:00 AM -->
+    <div class="w-full px-2">
+        <table class="w-full divide-y divide-gray-200 border-1 rounded-lg overflow-hidden">
+            <thead class="bg-gray-100">
+                <tr>
+                    <th class="px-3 py-3 border text-center text-xs font-bold text-gray-700 uppercase tracking-wider">No</th>
+                    <th class="px-3 py-3 border text-center text-xs font-bold text-gray-700 uppercase tracking-wider">Time Range</th>
+                    <th class="px-3 py-3 border text-center text-xs font-bold text-gray-700 uppercase tracking-wider">Production Quantity</th>
+                </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+                @foreach ($hourlyData as $index => $data)
+                    @if ($index >= 12) <!-- Last 12 time ranges (PM to AM) -->
+                        <tr>
+                            <td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $index + 1 }}</td>
+                            <td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $data['time'] }}</td>
+                            <td class="px-3 py-2 border text-center text-xs whitespace-nowrap">{{ $data['quantity'] ?: '0' }}</td> <!-- Show 0 if no data -->
+                        </tr>
+                    @endif
+                @endforeach
+            </tbody>
+        </table>
+    </div>
+</div> --}}
+
+
+