diff --git a/app/Http/Controllers/Admin/DashboardController.php b/app/Http/Controllers/Admin/DashboardController.php
index 8bbc4a1..cc714a0 100644
--- a/app/Http/Controllers/Admin/DashboardController.php
+++ b/app/Http/Controllers/Admin/DashboardController.php
@@ -34,7 +34,7 @@ class DashboardController extends Controller
             ->orderBy(DB::raw("DATE(created_at)"))
             ->pluck('count', 'date')
             ->toArray();
-        $customReferralCode =  CustomReferralCode::where('is_active',1)->first();
+        $customReferralCode =  CustomReferralCode::where('is_active', 1)->first();
 
         $start_date = now()->subDays(7)->startOfDay();
         $end_date = now()->endOfDay();
@@ -148,28 +148,48 @@ class DashboardController extends Controller
                 'next_payment_date' => $transaction->next_payment_date ? Carbon::parse($transaction->next_payment_date)->format('m/d/Y') : null,
             ];
         })->toArray();
-        $refrralUsers = ReferralUsers::with(['referredUser','refeersUser'])->latest()->get();
 
+        $response = ReferralUsers::with(['referredUser', 'refeersUser'])->latest()->get()->toArray();
 
-        return view('Admin.dashboard', compact(
-            'customReferralCode',
-            'customerCount',
-            'restaurantCount',
-            'dataMonthlyWithType3',
-            'dataMonthlyWithType4',
-            'dataQuarterlyWithType3',
-            'dataQuarterlyWithType4',
-            'dataYearlyWithType3',
-            'dataYearlyWithType4',
-            'formatted_transactions',
-            'dailyData',
-            'formattedDailyData',
-            'defaultData',
-            'formattedDefaultData',
-            'quarterlyData',
-            'yearlyData',
-            'refrralUsers'
-        )
+        $referralData = [];
+
+        foreach ($response as $item) {
+            $principalId = $item['iam_principal_xid'];
+
+            if (!isset($referralData[$principalId])) {
+                $referralData[$principalId] = [
+                    'referred_user' => $item['referred_user'],
+                    'refeers_users' => []
+                ];
+            }
+
+            // Add the refeers_user to the respective principalId
+            if (isset($item['refeers_user'])) {
+                $referralData[$principalId]['refeers_users'][] = $item['refeers_user'];
+            }
+        }
+
+        return view(
+            'Admin.dashboard',
+            compact(
+                'customReferralCode',
+                'customerCount',
+                'restaurantCount',
+                'dataMonthlyWithType3',
+                'dataMonthlyWithType4',
+                'dataQuarterlyWithType3',
+                'dataQuarterlyWithType4',
+                'dataYearlyWithType3',
+                'dataYearlyWithType4',
+                'formatted_transactions',
+                'dailyData',
+                'formattedDailyData',
+                'defaultData',
+                'formattedDefaultData',
+                'quarterlyData',
+                'yearlyData',
+                'referralData'
+            )
         );
     }
 
@@ -188,19 +208,17 @@ class DashboardController extends Controller
         try {
 
             DB::beginTransaction();
-            if($request->id){
+            if ($request->id) {
                 CustomReferralCode::updateOrCreate(['id', $request->id], [
                     'referral_code' => $request->referral_code,
                 ]);
-            }else{
-            CustomReferralCode::updateOrCreate([
-                'referral_code' => $request->referral_code,
-            ]);
-        }
+            } else {
+                CustomReferralCode::updateOrCreate([
+                    'referral_code' => $request->referral_code,
+                ]);
+            }
             DB::commit();
             return response()->json(['status_code' => 200]);
-
-
         } catch (\Exception $e) {
             DB::rollBack();
             \Log::error('Storing Referral Code function failed: ' . $e->getMessage());
diff --git a/resources/views/Admin/dashboard.blade.php b/resources/views/Admin/dashboard.blade.php
index 110b26f..05b5889 100644
--- a/resources/views/Admin/dashboard.blade.php
+++ b/resources/views/Admin/dashboard.blade.php
@@ -18,40 +18,44 @@
                     <div class="col-6">
                         <div class="card">
                             <div class="card-body">
-                                @if(!$customReferralCode )
-                                <form id="create_custom_referral_code" enctype="multipart/form-data">
-                                    {{ csrf_field() }}
-                                    <h5>Create Custom Referral Code:-
-                                       
-                                    </h5>
+                                @if (!$customReferralCode)
+                                    <form id="create_custom_referral_code" enctype="multipart/form-data">
+                                        {{ csrf_field() }}
+                                        <h5>Create Custom Referral Code:-
 
-                                    <input type="text" class="form-control" name="referral_code"
-                                        id="referral_code" value="" placeholder="Enter Referral Code"
-                                        oninput="this.value = this.value.toUpperCase()" maxlength="15">
-                                    <div class="">
-                                        <button id="create_custom_code" type="submit" class="download-btn-custom mt-3 custom-width-10">Submit</button>
-                                    </div>
+                                        </h5>
 
-                                </form>
+                                        <input type="text" class="form-control" name="referral_code" id="referral_code"
+                                            value="" placeholder="Enter Referral Code"
+                                            oninput="this.value = this.value.toUpperCase()" maxlength="15">
+                                        <div class="">
+                                            <button id="create_custom_code" type="submit"
+                                                class="download-btn-custom mt-3 custom-width-10">Submit</button>
+                                        </div>
+
+                                    </form>
                                 @endif
-                                @if($customReferralCode && $customReferralCode->referral_code)
-                                <form id="create_custom_referral_code" enctype="multipart/form-data">
-                                    {{ csrf_field() }}
-                                    <h5>My Custom Referral Code:-
-                                       
-                                    </h5>
+                                @if ($customReferralCode && $customReferralCode->referral_code)
+                                    <form id="create_custom_referral_code" enctype="multipart/form-data">
+                                        {{ csrf_field() }}
+                                        <h5>My Custom Referral Code:-
 
-                                    <input type="text" class="form-control" name="referral_code"
-                                        id="referral_code" value="{{$customReferralCode->referral_code}}" placeholder="Enter Referral Code"
-                                        oninput="this.value = this.value.toUpperCase()" maxlength="15">
-                                        <input type="hidden" name="id" value="{{$customReferralCode->id}}"/>
-                                    <div class="d-flex" style="justify-content: space-between;">
-                                        <button id="create_custom_code" type="submit" class="download-btn-custom mt-3 custom-width-10">Update</button>
-                                        <button id="create_custom_code" type="submit" class="download-btn-cancel mt-3 custom-width-10">Deactivate Code</button>
-                              
-                                    </div>
+                                        </h5>
 
-                                </form>
+                                        <input type="text" class="form-control" name="referral_code" id="referral_code"
+                                            value="{{ $customReferralCode->referral_code }}"
+                                            placeholder="Enter Referral Code"
+                                            oninput="this.value = this.value.toUpperCase()" maxlength="15">
+                                        <input type="hidden" name="id" value="{{ $customReferralCode->id }}" />
+                                        <div class="d-flex" style="justify-content: space-between;">
+                                            <button id="create_custom_code" type="submit"
+                                                class="download-btn-custom mt-3 custom-width-10">Update</button>
+                                            <button id="create_custom_code" type="submit"
+                                                class="download-btn-cancel mt-3 custom-width-10">Deactivate Code</button>
+
+                                        </div>
+
+                                    </form>
                                 @endif
                             </div>
                         </div>
@@ -161,8 +165,8 @@
                                                 <th class="w-10px pe-2">
                                                     <div
                                                         class="form-check form-check-sm form-check-custom form-check-solid me-3">
-                                                        <input class="form-check-input" type="checkbox" name="customer_ids"
-                                                            id="select-all-ids" />
+                                                        <input class="form-check-input" type="checkbox"
+                                                            name="customer_ids" id="select-all-ids" />
                                                     </div>
                                                 </th>
                                                 <th class="text-start">Sr no</th>
@@ -191,7 +195,8 @@
                                                     </td>
                                                     <td class="text-start">
                                                         {{ $transaction['subscription']['id'] ?? 'Deleted User' }}</td>
-                                                    <td class="text-start">$ {{ $transaction['amount'] ?? 'Deleted User' }}
+                                                    <td class="text-start">$
+                                                        {{ $transaction['amount'] ?? 'Deleted User' }}
                                                     </td>
                                                     <td class="text-start"> {{ $transaction['status'] ?? 'Deleted User' }}
                                                     </td>
@@ -269,9 +274,117 @@
 
             </div>
         </div>
-    @endsection
 
-    @section('section_script')
+        <div class="col-12 d-flex align-items-center p-0 mb-4">
+            <div class="col-md-12">
+                <div class="card">
+                    <div class="card-body">
+                        <h5>Referral Users</h5>
+                        <form action="" method="POST" id="referral-users-form">
+                            @csrf
+                            <input type="hidden" name="selected_id" id="referral-ids" disabled>
+                            <input type="hidden" name="all_id" id="all_referral_id" value="all" disabled>
+                            <div class="d-flex justify-content-between align-items-center mb-3">
+                                <table id="zero-config2" class="table dt-table-hover location_table" style="width:100%">
+                                    <thead class="text-center">
+                                        <tr>
+                                            <th class="w-10px pe-2">
+                                                <div
+                                                    class="form-check form-check-sm form-check-custom form-check-solid me-3">
+                                                    <input class="form-check-input" type="checkbox"
+                                                        name="referral_user_ids" id="select-all-referral-ids" />
+                                                </div>
+                                            </th>
+                                            <th class="text-start">Sr no</th>
+                                            <th class="text-start">Name</th>
+                                            <th class="text-start">Email</th>
+                                            <th class="text-start">Count</th>
+                                            <th class="text-start">Referred Users</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="text-center">
+                                        @foreach ($referralData as $principalId => $data)
+                                            <tr data-user="{{ json_encode($data['referred_user']) }}"
+                                                data-referred-users="{{ json_encode($data['refeers_users']) }}">
+                                                <td>
+                                                    <div
+                                                        class="form-check form-check-sm form-check-custom form-check-solid">
+                                                        <input class="form-check-input" type="checkbox"
+                                                            id="referral_user_checkbox_ids" name="referral_user_ids"
+                                                            value="{{ $principalId }}" />
+                                                    </div>
+                                                </td>
+                                                <td class="text-start">{{ $loop->iteration }}</td>
+                                                <td class="text-start">{{ $data['referred_user']['first_name'] }}
+                                                    {{ $data['referred_user']['last_name'] }}</td>
+                                                <td class="text-start">{{ $data['referred_user']['email_address'] }}</td>
+                                                <td class="text-start">
+                                                    {{ count($data['refeers_users']) }}
+                                                </td>
+                                                <td class="text-start">
+                                                    <a class="view-btn m-0 pointer btn-view-details"
+                                                        data-toggle="modal" data-target="#referral-user-details-modal">
+                                                        View
+                                                    </a>
+                                                </td>
+                                            </tr>
+                                        @endforeach
+                                    </tbody>
+
+
+
+                                </table>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Modal -->
+        <div class="modal fade" id="referral-user-details-modal" tabindex="-1" role="dialog"
+            aria-labelledby="referralUserDetailsModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 550px;">
+                <div class="modal-content">
+                    <div class="modal-body">
+                        <div class="modal-header d-flex justify-content-between modal-title">
+                            <h5>View Reffered User Details</h5>
+                            <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
+                                x
+                            </button>
+                        </div>
+                        <div class="row" style="padding: 0px 10px;">
+                            <div class="form-group subadmin-option col-md-12">
+                                <div class="referral-user-main-div">
+                                    <div class="referral-user-inn-div">
+                                        <p><strong>Name:</strong></p><span></span>
+                                    </div>
+                                    <div class="referral-user-inn-div">
+                                        <p><strong>Email:</strong></p><span></span>
+                                    </div>
+                                    <div class="referral-user-inn-div">
+                                        <p><strong>Referral Code:</strong></p><span></span>
+                                    </div>
+                                    <div class="referral-user-inn-div">
+                                        <p><strong>Reffered Users:</strong></p><span></span>
+                                    </div>
+                                    <div class="referral-user-inn-div referred-users">
+                                        <p><strong>Referred Users:</strong></p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+    </div>
+    </div>
+@endsection
+
+@section('section_script')
     <script>
         $(document).ready(function() {
 
@@ -341,333 +454,373 @@
 
         });
     </script>
-        <script>
-            $('#zero-config').DataTable({
-                "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
-                    "<'table-responsive'tr>" +
-                    "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
-                "oLanguage": {
-                    "oPaginate": {
-                        "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
-                        "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
-                    },
-                    "sInfo": "Showing page PAGE of _PAGES_",
-                    "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
-                    "sSearchPlaceholder": "Search...",
-                    "sLengthMenu": "Results :  _MENU_",
+    <script>
+        $('#zero-config').DataTable({
+            "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
+                "<'table-responsive'tr>" +
+                "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
+            "oLanguage": {
+                "oPaginate": {
+                    "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
+                    "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
                 },
-                "stripeClasses": [],
-                "lengthMenu": [7, 10, 20, 50],
-                "pageLength": 10
-            });
+                "sInfo": "Showing page PAGE of _PAGES_",
+                "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
+                "sSearchPlaceholder": "Search...",
+                "sLengthMenu": "Results :  _MENU_",
+            },
+            "stripeClasses": [],
+            "lengthMenu": [7, 10, 20, 50],
+            "pageLength": 10
+        });
 
-            $('#zero-config2').DataTable({
-                "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
-                    "<'table-responsive'tr>" +
-                    "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
-                "oLanguage": {
-                    "oPaginate": {
-                        "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
-                        "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
-                    },
-                    "sInfo": "Showing page PAGE of _PAGES_",
-                    "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
-                    "sSearchPlaceholder": "Search...",
-                    "sLengthMenu": "Results :  _MENU_",
+        $('#zero-config2').DataTable({
+            "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
+                "<'table-responsive'tr>" +
+                "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
+            "oLanguage": {
+                "oPaginate": {
+                    "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
+                    "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
                 },
-                "stripeClasses": [],
-                "lengthMenu": [7, 10, 20, 50],
-                "pageLength": 10
+                "sInfo": "Showing page PAGE of _PAGES_",
+                "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
+                "sSearchPlaceholder": "Search...",
+                "sLengthMenu": "Results :  _MENU_",
+            },
+            "stripeClasses": [],
+            "lengthMenu": [7, 10, 20, 50],
+            "pageLength": 10
+        });
+
+
+        $(function(e) {
+            $("#select-all-ids").click(function() {
+                $(".form-check-input").prop('checked', $(this).prop('checked'));
             });
 
-
-            $(function(e) {
-                $("#select-all-ids").click(function() {
-                    $(".form-check-input").prop('checked', $(this).prop('checked'));
-                });
-
-                $(".form-check-input").click(function() {
-                    if (!$(this).prop('checked')) {
-                        $("#select-all-ids").prop('checked', false);
-                    } else {
-                        if ($(".form-check-input:checked").length === $(".form-check-input").length) {
-                            $("#select-all-ids").prop('checked', true);
-                        }
+            $(".form-check-input").click(function() {
+                if (!$(this).prop('checked')) {
+                    $("#select-all-ids").prop('checked', false);
+                } else {
+                    if ($(".form-check-input:checked").length === $(".form-check-input").length) {
+                        $("#select-all-ids").prop('checked', true);
                     }
-                });
-
-                $(document).on("click", "#download-selected", function(e) {
-                    e.preventDefault();
-
-                    var allIds = [];
-
-                    // Iterate over each page of the DataTable
-                    var table = $('#zero-config').DataTable();
-                    for (var i = 0; i < table.page.info().pages; i++) {
-                        table.page(i).draw(false); // Switch to page i
-                        $('#zero-config tbody input:checked').each(function() {
-                            allIds.push($(this).val());
-                        });
-                    }
-
-                    if (allIds.length > 0) {
-                        // If there are selected customers
-                        $('#ids').prop('disabled', false);
-                        $('#all_id').prop('disabled', true);
-                        $('#ids').val(allIds);
-                        // Now submit the form or perform download action
-                        $('#customer-form').submit(); // Or perform your download action here
-                    } else {
-                        // No customers selected
-                        toastr.error("Please select at least one customer to download.");
-                    }
-                });
-
-
-
-
-                $(document).on("click", "#download_all", function(e) {
-                    $('#all_id').prop('disabled', false);
-                    $('#ids').prop('disabled', true);
-                })
+                }
             });
 
-            $(document).on("click", ".more", function(e) {
+            $(document).on("click", "#download-selected", function(e) {
                 e.preventDefault();
-                e.stopPropagation();
+
+                var allIds = [];
+
+                // Iterate over each page of the DataTable
+                var table = $('#zero-config').DataTable();
+                for (var i = 0; i < table.page.info().pages; i++) {
+                    table.page(i).draw(false); // Switch to page i
+                    $('#zero-config tbody input:checked').each(function() {
+                        allIds.push($(this).val());
+                    });
+                }
+
+                if (allIds.length > 0) {
+                    // If there are selected customers
+                    $('#ids').prop('disabled', false);
+                    $('#all_id').prop('disabled', true);
+                    $('#ids').val(allIds);
+                    // Now submit the form or perform download action
+                    $('#customer-form').submit(); // Or perform your download action here
+                } else {
+                    // No customers selected
+                    toastr.error("Please select at least one customer to download.");
+                }
             });
-        </script>
-        <script>
-            $(document).ready(function() {
-                // $('<button><ul class="navbar-item flex-row ms-lg-auto ms-0"><li class="nav-item dropdown action-dropdown  order-lg-0 order-1"><a href="javascript:void(0);"class="nav-link dropdown-toggle user extra-btn" id="actionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><div class="avatar-container"><div class="avatar avatar-sm avatar-mid avatar-indicators avatar-online"><h3>Export</h3></div></div></a><div class="dropdown-menu position-absolute" aria-labelledby="actionDropdown"><div class="dropdown-item"><a href="javascript:void(0)" id="download_all"><span>Download Overview</span></a></div><div class="dropdown-item"><a href="javascript:void(0)" id="download-selected"><span id="export">Download Selected</span></a></div></div></li></ul></button>')
-                //     .insertBefore("#zero-config_filter label");
-                $('<button>' +
-                    '<ul class="navbar-item flex-row ms-lg-auto ms-0">' +
-                    '<li class="nav-item dropdown action-dropdown order-lg-0 order-1">' +
-                    '<a href="javascript:void(0);" class="nav-link dropdown-toggle user extra-btn" id="actionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
-                    '<div class="avatar-container">' +
-                    '<div class="avatar avatar-sm avatar-mid avatar-indicators avatar-online">' +
-                    '<h3>Export</h3>' +
-                    '</div>' +
-                    '</div>' +
-                    '</a>' +
-                    '<div class="dropdown-menu position-absolute" aria-labelledby="actionDropdown">' +
-                    '<div class="dropdown-item">' +
-                    '<a href="javascript:void(0)" id="download_all"><span>Download Overview</span></a>' +
-                    '</div>' +
-                    '<div class="dropdown-item">' +
-                    '<a href="javascript:void(0)" id="download-selected"><span id="export">Download Selected</span></a>' +
-                    '</div>' +
-                    '</div>' +
-                    '</li>' +
-                    '</ul>' +
-                    '</button>').insertBefore("#zero-config_filter label");
 
 
-                $("#zero-config").on("click", ".sub_admin_permission", function() {
-                    var Name = $(this).data('name');
-                    var Price = $(this).data('price');
-                    var SubID = $(this).data('subscription-id');
-                    var CustID = $(this).data('customer-id');
-                    var SubStatus = $(this).data('subscription-status');
-                    var startDate = $(this).data('start-date');
-                    var endDate = $(this).data('end-date');
-                    var nextDate = $(this).data('next-date');
-                    var formattedPrice = '$' + Price;
 
-                    $('.subadmin-option span').eq(0).text(Name);
-                    $('.subadmin-option span').eq(1).text(formattedPrice);
-                    $('.subadmin-option span').eq(2).text(SubID);
-                    $('.subadmin-option span').eq(3).text(CustID);
-                    $('.subadmin-option span').eq(4).text(SubStatus);
-                    $('.subadmin-option span').eq(5).text(startDate);
-                    $('.subadmin-option span').eq(6).text(endDate);
-                    $('.subadmin-option span').eq(7).text(nextDate); // Corrected index for next-date
+
+            $(document).on("click", "#download_all", function(e) {
+                $('#all_id').prop('disabled', false);
+                $('#ids').prop('disabled', true);
+            })
+        });
+
+        $(document).on("click", ".more", function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        });
+    </script>
+    <script>
+        $(document).ready(function() {
+            // $('<button><ul class="navbar-item flex-row ms-lg-auto ms-0"><li class="nav-item dropdown action-dropdown  order-lg-0 order-1"><a href="javascript:void(0);"class="nav-link dropdown-toggle user extra-btn" id="actionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><div class="avatar-container"><div class="avatar avatar-sm avatar-mid avatar-indicators avatar-online"><h3>Export</h3></div></div></a><div class="dropdown-menu position-absolute" aria-labelledby="actionDropdown"><div class="dropdown-item"><a href="javascript:void(0)" id="download_all"><span>Download Overview</span></a></div><div class="dropdown-item"><a href="javascript:void(0)" id="download-selected"><span id="export">Download Selected</span></a></div></div></li></ul></button>')
+            //     .insertBefore("#zero-config_filter label");
+            $('<button>' +
+                '<ul class="navbar-item flex-row ms-lg-auto ms-0">' +
+                '<li class="nav-item dropdown action-dropdown order-lg-0 order-1">' +
+                '<a href="javascript:void(0);" class="nav-link dropdown-toggle user extra-btn" id="actionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
+                '<div class="avatar-container">' +
+                '<div class="avatar avatar-sm avatar-mid avatar-indicators avatar-online">' +
+                '<h3>Export</h3>' +
+                '</div>' +
+                '</div>' +
+                '</a>' +
+                '<div class="dropdown-menu position-absolute" aria-labelledby="actionDropdown">' +
+                '<div class="dropdown-item">' +
+                '<a href="javascript:void(0)" id="download_all"><span>Download Overview</span></a>' +
+                '</div>' +
+                '<div class="dropdown-item">' +
+                '<a href="javascript:void(0)" id="download-selected"><span id="export">Download Selected</span></a>' +
+                '</div>' +
+                '</div>' +
+                '</li>' +
+                '</ul>' +
+                '</button>').insertBefore("#zero-config_filter label");
+
+
+            $("#zero-config").on("click", ".sub_admin_permission", function() {
+                var Name = $(this).data('name');
+                var Price = $(this).data('price');
+                var SubID = $(this).data('subscription-id');
+                var CustID = $(this).data('customer-id');
+                var SubStatus = $(this).data('subscription-status');
+                var startDate = $(this).data('start-date');
+                var endDate = $(this).data('end-date');
+                var nextDate = $(this).data('next-date');
+                var formattedPrice = '$' + Price;
+
+                $('.subadmin-option span').eq(0).text(Name);
+                $('.subadmin-option span').eq(1).text(formattedPrice);
+                $('.subadmin-option span').eq(2).text(SubID);
+                $('.subadmin-option span').eq(3).text(CustID);
+                $('.subadmin-option span').eq(4).text(SubStatus);
+                $('.subadmin-option span').eq(5).text(startDate);
+                $('.subadmin-option span').eq(6).text(endDate);
+                $('.subadmin-option span').eq(7).text(nextDate); // Corrected index for next-date
+            });
+        });
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const viewButtons = document.querySelectorAll('.btn-view-details');
+
+            viewButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const row = this.closest('tr');
+                    const user = JSON.parse(row.dataset.user);
+                    const referredUsers = JSON.parse(row.dataset.referredUsers);
+
+                    // Populate the modal fields
+                    document.querySelector(
+                            '#referral-user-details-modal .referral-user-inn-div:nth-child(1) span')
+                        .innerText = `${user.first_name} ${user.last_name}`;
+                    document.querySelector(
+                            '#referral-user-details-modal .referral-user-inn-div:nth-child(2) span')
+                        .innerText = user.email_address;
+                    document.querySelector(
+                            '#referral-user-details-modal .referral-user-inn-div:nth-child(3) span')
+                        .innerText = user.referral_code;
+
+                    // Clear previous referred users
+                    const referredUsersDiv = document.querySelector(
+                        '#referral-user-details-modal .referral-user-inn-div.referred-users');
+                    referredUsersDiv.innerHTML = '';
+
+                    referredUsers.forEach(referredUser => {
+                        const p = document.createElement('p');
+                        p.innerText =
+                            `${referredUser.first_name} ${referredUser.last_name} (${referredUser.email_address})`;
+                        referredUsersDiv.appendChild(p);
+                    });
                 });
             });
-        </script>
+        });
+    </script>
 
-        <script>
-            document.addEventListener("DOMContentLoaded", function() {
-                // Initial data and categories
-                var userChartData = getUserChartData('monthly');
-                var userCategories = getUserChartCategories('monthly');
 
-                // Chart options
-                var userOptions = {
-                    chart: {
-                        type: 'line',
-                        zoom: {
-                            enabled: false
-                        },
-                        toolbar: {
-                            show: false
-                        }
+
+
+
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            // Initial data and categories
+            var userChartData = getUserChartData('monthly');
+            var userCategories = getUserChartCategories('monthly');
+
+            // Chart options
+            var userOptions = {
+                chart: {
+                    type: 'line',
+                    zoom: {
+                        enabled: false
                     },
-                    series: userChartData,
+                    toolbar: {
+                        show: false
+                    }
+                },
+                series: userChartData,
+                xaxis: {
+                    categories: userCategories
+                },
+                stroke: {
+                    curve: 'smooth',
+                    width: [4, 4]
+                }
+            };
+
+            // Create the chart
+            var userChart = new ApexCharts(document.querySelector("#user-chart"), userOptions);
+            userChart.render();
+
+            // Event listener for filter select element
+            document.getElementById('graph-filter').addEventListener('change', function(event) {
+                var selectedFilter = event.target.value;
+                userChartData = getUserChartData(selectedFilter);
+                userCategories = getUserChartCategories(selectedFilter);
+
+                userChart.updateSeries(userChartData);
+                userChart.updateOptions({
                     xaxis: {
                         categories: userCategories
-                    },
-                    stroke: {
-                        curve: 'smooth',
-                        width: [4, 4]
                     }
-                };
-
-                // Create the chart
-                var userChart = new ApexCharts(document.querySelector("#user-chart"), userOptions);
-                userChart.render();
-
-                // Event listener for filter select element
-                document.getElementById('graph-filter').addEventListener('change', function(event) {
-                    var selectedFilter = event.target.value;
-                    userChartData = getUserChartData(selectedFilter);
-                    userCategories = getUserChartCategories(selectedFilter);
-
-                    userChart.updateSeries(userChartData);
-                    userChart.updateOptions({
-                        xaxis: {
-                            categories: userCategories
-                        }
-                    });
-                });
-
-                // ------------ Sales chart starts ------------
-
-                // Data for the sales chart
-                var salesChartData = <?php echo json_encode(array_values($formattedDefaultData)); ?>;
-                console.log("Initial Sales Chart Data:", salesChartData);
-
-                // Chart options for the sales chart
-                var salesOptions = {
-                    chart: {
-                        type: 'bar',
-                        zoom: {
-                            enabled: false // Disable Zoom and Pan
-                        },
-                        toolbar: {
-                            show: false // Hide the download button
-                        }
-                    },
-                    series: [{
-                        name: 'Sales',
-                        data: salesChartData
-                    }],
-                    xaxis: {
-                        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov',
-                            'Dec'
-                        ]
-                    },
-                    plotOptions: {
-                        bar: {
-                            columnWidth: '30%' // Adjust the bar width as needed
-                        }
-                    },
-                    dataLabels: {
-                        enabled: false // Hide the values on the bars
-                    }
-                };
-
-                // Create the chart with default data
-                var salesChart = new ApexCharts(document.querySelector("#sales-chart"), salesOptions);
-                salesChart.render();
-
-                // Set default selected option to 'monthly' and trigger change event
-                $('#sales-chart-options').val('monthly').trigger('change');
-
-                // Event listener for select change
-                $('#sales-chart-options').on('change', function() {
-                    console.log("Selected Option:", $(this).val()); // Log the selected option
-
-                    var selectedOption = $(this).val();
-                    var newData = [];
-                    var newXAxisCategories = [];
-
-                    // Fetch new data and adjust x-axis categories based on selected option
-                    switch (selectedOption) {
-                        case 'monthly':
-                            newData = <?php echo json_encode(array_values($formattedDefaultData)); ?>;
-                            newXAxisCategories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
-                                'Oct', 'Nov', 'Dec'
-                            ];
-                            break;
-                        case 'quarterly':
-                            newData = <?php echo json_encode(array_values($quarterlyData)); ?>;
-                            newXAxisCategories = ['Q1', 'Q2', 'Q3', 'Q4'];
-                            break;
-                        case 'yearly':
-                            newData = <?php echo json_encode(array_values($yearlyData)); ?>;
-                            newXAxisCategories = Object.keys(<?php echo json_encode($yearlyData); ?>);
-                            break;
-                        case 'daily':
-                            newData = <?php echo json_encode(array_values($formattedDailyData)); ?>;
-                            newXAxisCategories = Object.keys(<?php echo json_encode($formattedDailyData); ?>);
-                            break;
-                        default:
-                            newData = <?php echo json_encode(array_values($formattedDefaultData)); ?>;
-                            newXAxisCategories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
-                                'Oct', 'Nov', 'Dec'
-                            ];
-                            break;
-                    }
-
-                    console.log("New Data:", newData); // Log the new data
-                    console.log("New X-Axis Categories:", newXAxisCategories); // Log the new x-axis categories
-
-                    // Update chart data and x-axis categories with the new data
-                    salesChart.updateOptions({
-                        series: [{
-                            data: newData
-                        }],
-                        xaxis: {
-                            categories: newXAxisCategories
-                        }
-                    });
                 });
             });
 
-            function getUserChartData(filter) {
-                switch (filter) {
-                    case 'monthly':
-                        return [{
-                            name: 'Total Accounts',
-                            data: <?php echo json_encode(array_values($dataMonthlyWithType3)); ?>
-                        }, {
-                            name: 'Total Subscribed',
-                            data: <?php echo json_encode(array_values($dataMonthlyWithType4)); ?>
-                        }];
-                    case 'quarterly':
-                        return [{
-                            name: 'Total Accounts',
-                            data: <?php echo json_encode(array_values($dataQuarterlyWithType3)); ?>
-                        }, {
-                            name: 'Total Subscribed',
-                            data: <?php echo json_encode(array_values($dataQuarterlyWithType4)); ?>
-                        }];
-                    case 'yearly':
-                        return [{
-                            name: 'Total Accounts',
-                            data: <?php echo json_encode(array_values($dataYearlyWithType3)); ?>
-                        }, {
-                            name: 'Total Subscribed',
-                            data: <?php echo json_encode(array_values($dataYearlyWithType4)); ?>
-                        }];
-                    default:
-                        return [];
-                }
-            }
+            // ------------ Sales chart starts ------------
 
-            function getUserChartCategories(filter) {
-                switch (filter) {
-                    case 'monthly':
-                        return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-                    case 'quarterly':
-                        return ['Q1', 'Q2', 'Q3', 'Q4'];
-                    case 'yearly':
-                        return <?php echo json_encode(array_keys($dataYearlyWithType3)); ?>;
-                    default:
-                        return [];
+            // Data for the sales chart
+            var salesChartData = <?php echo json_encode(array_values($formattedDefaultData)); ?>;
+            console.log("Initial Sales Chart Data:", salesChartData);
+
+            // Chart options for the sales chart
+            var salesOptions = {
+                chart: {
+                    type: 'bar',
+                    zoom: {
+                        enabled: false // Disable Zoom and Pan
+                    },
+                    toolbar: {
+                        show: false // Hide the download button
+                    }
+                },
+                series: [{
+                    name: 'Sales',
+                    data: salesChartData
+                }],
+                xaxis: {
+                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov',
+                        'Dec'
+                    ]
+                },
+                plotOptions: {
+                    bar: {
+                        columnWidth: '30%' // Adjust the bar width as needed
+                    }
+                },
+                dataLabels: {
+                    enabled: false // Hide the values on the bars
                 }
+            };
+
+            // Create the chart with default data
+            var salesChart = new ApexCharts(document.querySelector("#sales-chart"), salesOptions);
+            salesChart.render();
+
+            // Set default selected option to 'monthly' and trigger change event
+            $('#sales-chart-options').val('monthly').trigger('change');
+
+            // Event listener for select change
+            $('#sales-chart-options').on('change', function() {
+                console.log("Selected Option:", $(this).val()); // Log the selected option
+
+                var selectedOption = $(this).val();
+                var newData = [];
+                var newXAxisCategories = [];
+
+                // Fetch new data and adjust x-axis categories based on selected option
+                switch (selectedOption) {
+                    case 'monthly':
+                        newData = <?php echo json_encode(array_values($formattedDefaultData)); ?>;
+                        newXAxisCategories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
+                            'Oct', 'Nov', 'Dec'
+                        ];
+                        break;
+                    case 'quarterly':
+                        newData = <?php echo json_encode(array_values($quarterlyData)); ?>;
+                        newXAxisCategories = ['Q1', 'Q2', 'Q3', 'Q4'];
+                        break;
+                    case 'yearly':
+                        newData = <?php echo json_encode(array_values($yearlyData)); ?>;
+                        newXAxisCategories = Object.keys(<?php echo json_encode($yearlyData); ?>);
+                        break;
+                    case 'daily':
+                        newData = <?php echo json_encode(array_values($formattedDailyData)); ?>;
+                        newXAxisCategories = Object.keys(<?php echo json_encode($formattedDailyData); ?>);
+                        break;
+                    default:
+                        newData = <?php echo json_encode(array_values($formattedDefaultData)); ?>;
+                        newXAxisCategories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
+                            'Oct', 'Nov', 'Dec'
+                        ];
+                        break;
+                }
+
+                console.log("New Data:", newData); // Log the new data
+                console.log("New X-Axis Categories:", newXAxisCategories); // Log the new x-axis categories
+
+                // Update chart data and x-axis categories with the new data
+                salesChart.updateOptions({
+                    series: [{
+                        data: newData
+                    }],
+                    xaxis: {
+                        categories: newXAxisCategories
+                    }
+                });
+            });
+        });
+
+        function getUserChartData(filter) {
+            switch (filter) {
+                case 'monthly':
+                    return [{
+                        name: 'Total Accounts',
+                        data: <?php echo json_encode(array_values($dataMonthlyWithType3)); ?>
+                    }, {
+                        name: 'Total Subscribed',
+                        data: <?php echo json_encode(array_values($dataMonthlyWithType4)); ?>
+                    }];
+                case 'quarterly':
+                    return [{
+                        name: 'Total Accounts',
+                        data: <?php echo json_encode(array_values($dataQuarterlyWithType3)); ?>
+                    }, {
+                        name: 'Total Subscribed',
+                        data: <?php echo json_encode(array_values($dataQuarterlyWithType4)); ?>
+                    }];
+                case 'yearly':
+                    return [{
+                        name: 'Total Accounts',
+                        data: <?php echo json_encode(array_values($dataYearlyWithType3)); ?>
+                    }, {
+                        name: 'Total Subscribed',
+                        data: <?php echo json_encode(array_values($dataYearlyWithType4)); ?>
+                    }];
+                default:
+                    return [];
             }
-        </script>
-    @endsection
+        }
+
+        function getUserChartCategories(filter) {
+            switch (filter) {
+                case 'monthly':
+                    return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+                case 'quarterly':
+                    return ['Q1', 'Q2', 'Q3', 'Q4'];
+                case 'yearly':
+                    return <?php echo json_encode(array_keys($dataYearlyWithType3)); ?>;
+                default:
+                    return [];
+            }
+        }
+    </script>
+@endsection