diff --git a/Resources/views/index.blade.php b/Resources/views/index.blade.php
index c8e8174..7bab29d 100644
--- a/Resources/views/index.blade.php
+++ b/Resources/views/index.blade.php
@@ -1,9 +1,298 @@
-@extends('dailysalepaymentreportmodule::layouts.master')
-
+@extends('backend.layout.main')
 @section('content')
-    <h1>Hello World</h1>
 
-    <p>
-        This view is loaded from module: {!! config('dailysalepaymentreportmodule.name') !!}
-    </p>
+    @if ($errors->has('title'))
+        <div class="alert alert-danger alert-dismissible text-center">
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
+                    aria-hidden="true">&times;</span></button>{{ $errors->first('title') }}
+        </div>
+    @endif
+    @if (session()->has('message'))
+        <div class="alert alert-success alert-dismissible text-center">
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>{{ session()->get('message') }}
+        </div>
+    @endif
+    @if (session()->has('not_permitted'))
+        <div class="alert alert-danger alert-dismissible text-center">
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>{{ session()->get('not_permitted') }}
+        </div>
+    @endif
+
+    <section>
+        <div class="container-fluid">
+            <div style="border-radius: 30px;" class="card pb-4 ">
+                <link rel="stylesheet" href="{{ asset('public/css/cloudma.css') }}">
+                <div style="background: linear-gradient(to right, #00c1e3, #00489f); border-radius: 30px 30px 0px 0px; font-weight: bold; color: white;"
+                    class="card-header mt-2">
+                    <h3 class="text-center">Daily Sale Payment Report</h3>
+                </div>
+
+                <form action="{{ url('dailysalepaymentreportmodule') }}" method="GET">
+                    <div class="row mr-1 mt-4 pl-4 align-items-center">
+                        <div class="col-md-4">
+                            <label><strong>Select Date</strong> &nbsp;</label>
+                            <div class="input-group">
+                                <input type="date" name="report_date" id="report_date"
+                                    value="{{ request()->input('report_date', date('Y-m-d')) }}" class="form-control"
+                                    required />
+                            </div>
+                        </div>
+                        <div class="col-md-3 pt-md-4">
+                            <button type="submit" class="btn btn-primary" id="generate-report-btn">Generate Report</button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <div class="container-fluid mt-3">
+            <h4 class="mb-3" style="color: #00489f; font-weight: bold;">Sales Table (Daily Sale)</h4>
+            <div class="table-responsive">
+                <table style="border-radius: 15px; background-color: #e0e5ea;" id="sales-table" class="table table-hover">
+                    <thead
+                        style="border-radius: 50px; background: linear-gradient(to right, #078bce, #1a1d1e); color: white;">
+                        <tr>
+                            <th>Date</th>
+                            <th>Reference Number</th>
+                            <th>Cashier</th>
+                            <th>Customer</th>
+                            <th>Grand Total</th>
+                            <th>Cash</th>
+                            <th>Card 1</th>
+                            <th>Card 2</th>
+                            <th>Card 3</th>
+                            <th>Online Transfer</th>
+                            <th>Link Pay</th>
+                            <th>Due Amount</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {{-- @foreach ($sales_data as $sale) --}}
+                        <!-- Data rows will come here -->
+                        {{-- @endforeach --}}
+                    </tbody>
+                    <tfoot style="background-color: #cdd4da; font-weight: bold;">
+                        <tr>
+                            <td colspan="4" class="text-right">Total</td>
+                            <td>0.00</td> <!-- Grand Total Sum -->
+                            <td>0.00</td> <!-- Cash Sum -->
+                            <td>0.00</td> <!-- Card 1 Sum -->
+                            <td>0.00</td> <!-- Card 2 Sum -->
+                            <td>0.00</td> <!-- Card 3 Sum -->
+                            <td>0.00</td> <!-- Online Sum -->
+                            <td>0.00</td> <!-- Link Pay Sum -->
+                            <td>0.00</td> <!-- Due Sum -->
+                        </tr>
+                    </tfoot>
+                </table>
+            </div>
+        </div>
+
+        <div class="container-fluid mt-5">
+            <h4 class="mb-3" style="color: #00489f; font-weight: bold;">Credit Sale Collections</h4>
+            <div class="table-responsive">
+                <table style="border-radius: 15px; background-color: #e0e5ea;" id="credit-collection-table"
+                    class="table table-hover">
+                    <thead
+                        style="border-radius: 50px; background: linear-gradient(to right, #078bce, #1a1d1e); color: white;">
+                        <tr>
+                            <th>Original Bill Date</th>
+                            <th>Reference Number</th>
+                            <th>Cashier</th>
+                            <th>Customer</th>
+                            <th>Grand Total</th>
+                            <th>Cash</th>
+                            <th>Card 1</th>
+                            <th>Card 2</th>
+                            <th>Card 3</th>
+                            <th>Online Transfer</th>
+                            <th>Link Pay</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {{-- @foreach ($credit_data as $credit) --}}
+                        <!-- Data rows will come here -->
+                        {{-- @endforeach --}}
+                    </tbody>
+                    <tfoot style="background-color: #cdd4da; font-weight: bold;">
+                        <tr>
+                            <td colspan="4" class="text-right">Total</td>
+                            <td>0.00</td> <!-- Grand Total Sum -->
+                            <td>0.00</td> <!-- Cash Sum -->
+                            <td>0.00</td> <!-- Card 1 Sum -->
+                            <td>0.00</td> <!-- Card 2 Sum -->
+                            <td>0.00</td> <!-- Card 3 Sum -->
+                            <td>0.00</td> <!-- Online Sum -->
+                            <td>0.00</td> <!-- Link Pay Sum -->
+                        </tr>
+                    </tfoot>
+                </table>
+            </div>
+        </div>
+
+        <div class="container-fluid mt-5 mb-5">
+            <h4 class="mb-3" style="color: #00489f; font-weight: bold;">Payment Method Summary</h4>
+            <div class="table-responsive">
+                <table style="border-radius: 15px; background-color: #e0e5ea; width: 60%;" id="summary-table"
+                    class="table table-hover">
+                    <thead
+                        style="border-radius: 50px; background: linear-gradient(to right, #078bce, #1a1d1e); color: white;">
+                        <tr>
+                            <th>Payment Option</th>
+                            <th>Sale Amount</th>
+                            <th>Received Amount</th>
+                            <th>Total Amount</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>Cash</td>
+                            <td>0.00</td>
+                            <td>0.00</td>
+                            <td>0.00</td>
+                        </tr>
+                        <tr>
+                            <td>Card 1</td>
+                            <td>0.00</td>
+                            <td>0.00</td>
+                            <td>0.00</td>
+                        </tr>
+                        <tr>
+                            <td>Card 2</td>
+                            <td>0.00</td>
+                            <td>0.00</td>
+                            <td>0.00</td>
+                        </tr>
+                        <tr>
+                            <td>Card 3</td>
+                            <td>0.00</td>
+                            <td>0.00</td>
+                            <td>0.00</td>
+                        </tr>
+                        <tr>
+                            <td>Online Transfer</td>
+                            <td>0.00</td>
+                            <td>0.00</td>
+                            <td>0.00</td>
+                        </tr>
+                        <tr>
+                            <td>Link Pay</td>
+                            <td>0.00</td>
+                            <td>0.00</td>
+                            <td>0.00</td>
+                        </tr>
+                    </tbody>
+                    <tfoot style="background-color: #cdd4da; font-weight: bold;">
+                        <tr>
+                            <td class="text-right">Grand Total</td>
+                            <td>0.00</td>
+                            <td>0.00</td>
+                            <td>0.00</td>
+                        </tr>
+                    </tfoot>
+                </table>
+            </div>
+        </div>
+    </section>
+
+    <style>
+        .bootstrap-select.form-control,
+        .form-control,
+        .input-group-text {
+            background-color: #fdfdff;
+            border-color: #002250;
+            border-radius: 15px;
+        }
+
+        .btn-primary {
+            background-color: #002250;
+            border-color: #002250;
+            border-radius: 15px;
+            padding: 10px 25px;
+        }
+
+        .btn-primary:hover {
+            background-color: #0068e3;
+        }
+
+        .dt-button-collection.dropdown-menu {
+            background: #0068e3;
+            padding: 10px 15px;
+        }
+
+        /* Table Border Radius Fix for Datatables */
+        table.dataTable {
+            border-collapse: collapse !important;
+        }
+
+        .dataTables_wrapper .dt-buttons {
+            margin-bottom: 15px;
+        }
+    </style>
+
 @endsection
+
+@push('scripts')
+    <script type="text/javascript">
+        $.ajaxSetup({
+            headers: {
+                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+            }
+        });
+
+        // Common export buttons configuration
+        var exportButtons = [
+            {
+                extend: 'pdf',
+                text: '<i title="export to pdf" class="fa fa-file-pdf-o"></i>',
+                exportOptions: { columns: ':visible' }
+            },
+            {
+                extend: 'excel',
+                text: '<i title="export to excel" class="dripicons-document-new"></i>',
+                exportOptions: { columns: ':visible' }
+            },
+            {
+                extend: 'csv',
+                text: '<i title="export to csv" class="fa fa-file-text-o"></i>',
+                exportOptions: { columns: ':visible' }
+            },
+            {
+                extend: 'print',
+                text: '<i title="print" class="fa fa-print"></i>',
+                exportOptions: { columns: ':visible' }
+            }
+        ];
+
+        // Initialize Sales Table
+        $('#sales-table').DataTable({
+            "order": [],
+            dom: '<"row"lfB>rtip',
+            buttons: exportButtons,
+            'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, "All"]]
+        });
+
+        // Initialize Credit Collection Table
+        $('#credit-collection-table').DataTable({
+            "order": [],
+            dom: '<"row"lfB>rtip',
+            buttons: exportButtons,
+            'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, "All"]]
+        });
+
+        // Initialize Summary Table (Without pagination/search for cleaner look)
+        $('#summary-table').DataTable({
+            "order": [],
+            dom: '<"row"B>rt',
+            buttons: exportButtons,
+            "paging": false,
+            "searching": false,
+            "info": false
+        });
+
+    </script>
+@endpush
\ No newline at end of file