From 3f4ea25a280cd11baa85107fea0c1ffb26a8d493 Mon Sep 17 00:00:00 2001
From: Devansh Bawari <devansh.bawari419@webkul.in>
Date: Wed, 16 Aug 2023 17:44:05 +0530
Subject: [PATCH] feat: some datagrid changes done

---
 .../binding-component/index.blade.php         |  77 ---
 .../views/components/datagrid/index.blade.php |  30 +-
 .../views/components/datagrid/table.blade.php | 189 ++++---
 .../Resources/views/dashboard/index.blade.php | 520 ++++++++----------
 .../views/sales/orders/index.blade.php        |  98 +++-
 5 files changed, 450 insertions(+), 464 deletions(-)
 delete mode 100644 packages/Webkul/Admin/src/Resources/views/components/binding-component/index.blade.php

diff --git a/packages/Webkul/Admin/src/Resources/views/components/binding-component/index.blade.php b/packages/Webkul/Admin/src/Resources/views/components/binding-component/index.blade.php
deleted file mode 100644
index a3868f908b6..00000000000
--- a/packages/Webkul/Admin/src/Resources/views/components/binding-component/index.blade.php
+++ /dev/null
@@ -1,77 +0,0 @@
-<v-binding-component>
-    {{ $slot }}
-</v-binding-component>
-
-@pushOnce('scripts')
-    <script type="text/x-template" id="v-binding-component-template">
-        <div class="shadow-[0px_8px_10px_0px_rgba(0,_0,_0,_0.20)] border-[1px] border-gray-300 rounded-[4px] mt-[16px] bg-white">
-            <div class="table-responsive grid w-full">
-                <slot name="header">
-                    <div class="row grid px-[16px] py-[10px] border-b-[1px] border-gray-300 grid-cols-4 grid-rows-1 bg-gray-50  text-gray-600" style="grid-template-columns: repeat(6, 1fr)">
-                        <div class="flex gap-[10px]">
-                            <span class="icon-uncheckbox text-[24px]"></span>
-                            
-                            <p>Order ID</p>
-                        </div>
-
-                        <p>Status</p>
-
-                        <p>Price</p>
-
-                        <p>Customer</p>
-
-                        <p>Email</p>
-
-                        <p>Image</p>
-                    </div>
-                </slot>
-
-                <slot name="body" :items="items" :updateCounter="updateCounter">
-                    <div class="row grid px-[16px] py-[16px] border-b-[1px] border-gray-300 text-gray-600" style="grid-template-columns: repeat(6, 1fr)">
-                        <p>#02153</p>
-
-                        <p>Pending</p>
-
-                        <p>$75.00</p>
-
-                        <p>John Doe</p>
-
-                        <p>john@deo.com</p>
-
-                        <p>Broadway, New York</p>
-                    </div>
-                </slot>
-            </div>
-        </div>
-    </script>
-
-    <script type="module">
-        app.component('v-binding-component', {
-            template: '#v-binding-component-template',
-
-            data() {
-                return {
-                    items: [{
-                        id: 1,
-                        name: 'Item 1',
-                        count: 0,
-                    }, {
-                        id: 2,
-                        name: 'Item 2',
-                        count: 0,
-                    }, {
-                        id: 3,
-                        name: 'Item 3',
-                        count: 0,
-                    }]
-                }
-            },
-
-            methods: {
-                updateCounter(item) {
-                    item.count++;
-                }
-            }
-        });
-    </script>
-@endpushOnce
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/views/components/datagrid/index.blade.php b/packages/Webkul/Admin/src/Resources/views/components/datagrid/index.blade.php
index 1784f456970..73c90a995a3 100644
--- a/packages/Webkul/Admin/src/Resources/views/components/datagrid/index.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/components/datagrid/index.blade.php
@@ -1,4 +1,6 @@
-<v-datagrid {{ $attributes }}></v-datagrid>
+<v-datagrid {{ $attributes }}>
+    {{ $slot }}
+</v-datagrid>
 
 @pushOnce('scripts')
     <script type="text/x-template" id="v-datagrid-template">
@@ -8,7 +10,31 @@
             <div class="flex gap-2 mt-[30px]">
                 <x-admin::datagrid.filters></x-admin::datagrid.filters>
 
-                <x-admin::datagrid.table></x-admin::datagrid.table>
+                <x-admin::datagrid.table>
+                    <template #header>
+                        <slot
+                            name="header"
+                            :columns="available.columns"
+                            :actions="available.actions"
+                            :mass-actions="available.massActions"
+                            :records="available.records"
+                            :meta="available.meta"
+                        >
+                        </slot>
+                    </template>
+
+                    <template #body>
+                        <slot
+                            name="body"
+                            :columns="available.columns"
+                            :actions="available.actions"
+                            :mass-actions="available.massActions"
+                            :records="available.records"
+                            :meta="available.meta"
+                        >
+                        </slot>
+                    </template>
+                </x-admin::datagrid.table>
             </div>
         </div>
     </script>
diff --git a/packages/Webkul/Admin/src/Resources/views/components/datagrid/table.blade.php b/packages/Webkul/Admin/src/Resources/views/components/datagrid/table.blade.php
index bdd8574f2c6..ddbcf2a906c 100644
--- a/packages/Webkul/Admin/src/Resources/views/components/datagrid/table.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/components/datagrid/table.blade.php
@@ -1,85 +1,122 @@
-<div class="box-shadow relative w-full overflow-x-auto rounded-[4px] border">
-    <x-admin::table>
-        <x-admin::table.thead>
-            <x-admin::table.thead.tr>
-                <!-- Mass Actions -->
-                <x-admin::table.th>
-                    <label for="mass_action_select_all_records">
-                        <input
-                            type="checkbox"
-                            name="mass_action_select_all_records"
-                            id="mass_action_select_all_records"
-                            class="peer hidden"
-                            :checked="['all', 'partial'].includes(this.applied.massActions.meta.mode)"
-                            @change="selectAllRecords"
-                        >
+<v-table>
+    {{ $slot }}
+</v-table>
+
+@pushOnce('scripts')
+    <script type="text/x-template" id="v-table-template">
+        <div class="w-full shadow-[0px_8px_10px_0px_rgba(0,_0,_0,_0.20)] border-[1px] border-gray-300 rounded-[4px] mt-[16px] bg-white">
+            <div class="table-responsive grid w-full">
+                <slot name="header">
+                    <div
+                        class="row grid px-[16px] py-[10px] border-b-[1px] border-gray-300 text-gray-600 bg-gray-50"
+                        :style="`grid-template-columns: repeat(${gridsCount}, 1fr)`"
+                    >
+                        <!-- Mass Actions -->
+                        <p>
+                            <label for="mass_action_select_all_records">
+                                <input
+                                    type="checkbox"
+                                    name="mass_action_select_all_records"
+                                    id="mass_action_select_all_records"
+                                    class="peer hidden"
+                                    :checked="['all', 'partial'].includes($parent.applied.massActions.meta.mode)"
+                                    @change="$parent.selectAllRecords"
+                                >
 
-                        <span
-                            class="icon-uncheckbox cursor-pointer rounded-[6px] text-[24px]"
-                            :class="[
-                                this.applied.massActions.meta.mode === 'all' ? 'peer-checked:icon-checked peer-checked:text-navyBlue' : (
-                                    this.applied.massActions.meta.mode === 'partial' ? 'peer-checked:icon-checkbox-partial peer-checked:text-navyBlue' : ''
-                                ),
-                            ]"
+                                <span
+                                    class="icon-uncheckbox cursor-pointer rounded-[6px] text-[24px]"
+                                    :class="[
+                                        $parent.applied.massActions.meta.mode === 'all' ? 'peer-checked:icon-checked peer-checked:text-navyBlue' : (
+                                            $parent.applied.massActions.meta.mode === 'partial' ? 'peer-checked:icon-checkbox-partial peer-checked:text-navyBlue' : ''
+                                        ),
+                                    ]"
+                                >
+                                </span>
+                            </label>
+                        </p>
+
+                        <!-- Columns -->
+                        <p
+                            v-for="column in $parent.available.columns"
+                            v-text="column.label"
+                            @click="$parent.sortPage(column)"
                         >
-                        </span>
-                    </label>
-                </x-admin::table.th>
+                        </p>
+
+                        <!-- Actions -->
+                        <p>
+                            @lang('admin::app.components.datagrid.table.actions')
+                        </p>
+                    </div>
+                </slot>
 
-                <!-- Columns -->
-                <x-admin::table.th
-                    v-for="column in available.columns"
-                    v-text="column.label"
-                    @click="sortPage(column)"
-                >
-                </x-admin::table.th>
+                <slot name="body">
+                    <div
+                        class="row grid px-[16px] py-[16px] border-b-[1px] border-gray-300 text-gray-600"
+                        v-for="record in $parent.available.records"
+                        :style="`grid-template-columns: repeat(${gridsCount}, 1fr)`"
+                    >
+                        <!-- Mass Actions -->
+                        <p>
+                            <label :for="`mass_action_select_record_${record[$parent.available.meta.primary_column]}`">
+                                <input
+                                    type="checkbox"
+                                    class="peer hidden"
+                                    :name="`mass_action_select_record_${record[$parent.available.meta.primary_column]}`"
+                                    :value="record[$parent.available.meta.primary_column]"
+                                    :id="`mass_action_select_record_${record[$parent.available.meta.primary_column]}`"
+                                    v-model="$parent.applied.massActions.indices"
+                                    @change="$parent.setCurrentSelectionMode"
+                                >
 
-                <!-- Actions -->
-                <x-admin::table.th v-if="available.actions.length">
-                    @lang('admin::app.components.datagrid.table.actions')
-                </x-admin::table.th>
-            </x-admin::table.thead.tr>
-        </x-admin::table.thead>
+                                <span class="icon-uncheckbox peer-checked:icon-checked cursor-pointer rounded-[6px] text-[24px] peer-checked:text-navyBlue">
+                                </span>
+                            </label>
+                        </p>
 
-        <x-admin::table.tbody>
-            <x-admin::table.tbody.tr v-for="record in available.records">
-                <!-- Mass Actions -->
-                <x-admin::table.td>
-                    <label :for="`mass_action_select_record_${record[available.meta.primary_column]}`">
-                        <input
-                            type="checkbox"
-                            class="peer hidden"
-                            :name="`mass_action_select_record_${record[available.meta.primary_column]}`"
-                            :value="record[available.meta.primary_column]"
-                            :id="`mass_action_select_record_${record[available.meta.primary_column]}`"
-                            v-model="applied.massActions.indices"
-                            @change="setCurrentSelectionMode"
+                        <!-- Columns -->
+                        <p
+                            v-for="column in $parent.available.columns"
+                            v-text="record[column.index]"
                         >
+                        </p>
 
-                        <span class="icon-uncheckbox peer-checked:icon-checked cursor-pointer rounded-[6px] text-[24px] peer-checked:text-navyBlue">
-                        </span>
-                    </label>
-                </x-admin::table.td>
+                        <!-- Actions -->
+                        <p>
+                            <span
+                                class="cursor-pointer rounded-[6px] p-[6px] text-[24px] transition-all hover:bg-gray-100 max-sm:place-self-center"
+                                :class="action.icon"
+                                v-text="!action.icon ? action.title : ''"
+                                v-for="action in record.actions"
+                                @click="$parent.performAction(action)"
+                            >
+                            </span>
+                        </p>
+                    </div>
+                </slot>
+            </div>
+        </div>
+    </script>
 
-                <!-- Columns -->
-                <x-admin::table.td
-                    v-for="column in available.columns"
-                    v-text="record[column.index]"
-                >
-                </x-admin::table.td>
+    <script type="module">
+        app.component('v-table', {
+            template: '#v-table-template',
 
-                <!-- Actions -->
-                <x-admin::table.td class="flex gap-2">
-                    <span
-                        class="cursor-pointer rounded-[6px] text-[24px] transition-all hover:bg-gray-100 max-sm:place-self-center"
-                        :class="action.icon"
-                        v-text="!action.icon ? action.title : ''"
-                        v-for="action in record.actions"
-                        @click="performAction(action)"
-                    >
-                    </span>
-                </x-admin::table.td>
-            </x-admin::table.tbody.tr>
-        </x-admin::table.tbody>
-    </x-admin::table>
-</div>
+            computed: {
+                gridsCount() {
+                    let count = this.$parent.available.columns.length;
+
+                    if (this.$parent.available.actions.length) {
+                        ++count;
+                    }
+
+                    if (this.$parent.available.massActions.length) {
+                        ++count;
+                    }
+
+                    return count;
+                },
+            },
+        });
+    </script>
+@endpushOnce
diff --git a/packages/Webkul/Admin/src/Resources/views/dashboard/index.blade.php b/packages/Webkul/Admin/src/Resources/views/dashboard/index.blade.php
index 91fb0af96bc..915b5452d9d 100755
--- a/packages/Webkul/Admin/src/Resources/views/dashboard/index.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/dashboard/index.blade.php
@@ -1,333 +1,245 @@
-@php $admin = auth()->guard('admin')->user(); @endphp
+@php
+    $admin = auth()->guard('admin')->user();
+@endphp
 
 <x-admin::layouts>
-    {{-- <x-admin::datagrid src="{{ route('admin.catalog.attributes.index') }}"></x-admin::datagrid> --}}
-
-    <x-admin::binding-component>
-        {{-- <template #header>
-            <div class="row grid px-[16px] py-[10px] border-b-[1px] border-gray-300 grid-cols-4 grid-rows-1">
-                <div class="">
-                    <div class="flex gap-[10px]">
-                        <span class="icon-uncheckbox text-[24px]"></span>
-                        <p class="text-gray-600">Order ID / Date / Status</p>
-                    </div>
-                </div>
-                <div class="">
-                    <p class="text-gray-600">Price / Pay Via / Channel</p>
-                </div>
-                <div class="">
-                    <p class="text-gray-600">Customer / Email / Location / Image</p>
-                </div>
-            </div>
-        </template>
+    {{-- <div class="mb-[26px] flex items-center justify-between">
+        <div class="">
+            <p class="mb-[10px] gap-[64px] text-[20px] font-bold text-gray-800">
+                Hi! {{ $admin->name }},
+            </p>
+
+            <p class="gap-[10px] pr-[10px] text-[12px] text-gray-600">
+                @lang("Quickly Review what's going on in your store")
+            </p>
+        </div>
 
-        <template #body="{ items, updateCounter }">
-            <div class="row grid grid-cols-4 px-[16px] py-[10px] border-b-[1px] border-gray-300" v-for="item in items">
-                <div class="">
-                    <div class="flex gap-[10px]">
-                        <span class="icon-uncheckbox text-[24px]" @click="updateCounter(item)"></span>
-                        <div class="flex flex-col gap-[6px]">
-                            <p class="text-[16px] text-gray-800 font-semibold">#02153</p>
-                            <p class="text-gray-600">23 Mar 2023, 01:00:00</p>
-                            <p class="label-pending">Pending</p>
-                            <p class="label-pending">@{{item.count}}</p>
+        <div class="flex items-center gap-x-[10px]">
+            <!-- Dropdown -->
+            <x-admin::dropdown position="bottom-right">
+                <x-slot:toggle>
+                    <span class="icon-setting cursor-pointer rounded-[6px] p-[6px] text-[24px] transition-all hover:bg-gray-100"></span>
+                </x-slot:toggle>
+
+                <x-slot:content class="z-10 w-[174px] max-w-full rounded-[4px] border border-gray-300 bg-white !p-[8PX] shadow-[0px_8px_10px_0px_rgba(0,_0,_0,_0.2)]">
+                    <div class="grid gap-[2px]">
+                        <!-- Current Channel -->
+                        <div class="cursor-pointer items-center p-[6px] transition-all hover:rounded-[6px] hover:bg-gray-100">
+                            <p class="font-semibold leading-[24px] text-gray-600">
+                                Channel - {{ core()->getCurrentChannel()->name }}
+                            </p>
                         </div>
-                    </div>
-                </div>
-                <div class="">
-                    <div class="flex flex-col gap-[6px]">
-                        <p class="text-[16px] text-gray-800 font-semibold">$75.00</p>
-                        <p class="text-gray-600">Pay by - Cash on Delivery</p>
-                        <p class="text-gray-600">Online Store</p>
-                    </div>
-                </div>
-                <div class="">
-                    <div class="flex flex-col gap-[6px]">
-                        <p class="text-[16px] text-gray-800">John Doe</p>
-                        <p class="text-gray-600">john@deo.com</p>
-                        <p class="text-gray-600">Broadway, New York</p>
-                    </div>
-                </div>
-                <div class="">
-                    <div class="flex  gap-[6px] items-center">
-                        <div class="flex gap-[6px] items-center flex-wrap">
-                            <div class="relative">
-                                <img class="min-h-[65px] min-w-[65px] max-h-[65px] max-w-[65px] rounded-[4px]" src="../images/order-1.png">
-                                <span class="absolute bottom-[1px] left-[1px] text-[12px] font-bold text-white bg-darkPink rounded-full px-[6px] ">1</span>
-                            </div>
-                            <div class="relative">
-                                <img class="min-h-[65px] min-w-[65px] max-h-[65px] max-w-[65px] rounded-[4px]" src="../images/order-1.png">
-                                <span class="absolute bottom-[1px] left-[1px] text-[12px] font-bold text-white bg-darkPink rounded-full px-[6px] ">2</span>
-                            </div>
-                            <div class="relative">
-                                <img class="min-h-[65px] min-w-[65px] max-h-[65px] max-w-[65px] rounded-[4px]" src="../images/order-1.png">
-                                <span class="absolute bottom-[1px] left-[1px] text-[12px] font-bold text-white bg-darkPink rounded-full px-[6px] ">3</span>
-                            </div>
 
+                        <!-- Current Locale -->
+                        <div class="cursor-pointer items-center p-[6px] transition-all hover:rounded-[6px] hover:bg-gray-100">
+                            <p class="font-semibold leading-[24px] text-gray-600">
+                                Language - {{ core()->getCurrentLocale()->name }}
+                            </p>
                         </div>
-                        <div class="flex gap-[6px] items-center">
-                            <div class="flex items-center w-[65px] h-[65px] bg-gray-50 rounded-[4px]">
-                                <p class="text-[12px] text-gray-600 text-center font-bold px-[6px] py-[6px]">2+ More Products </p>
-                            </div>
-                            <span class="icon-sort-right text-[24px] ml-[4px] cursor-pointer"></span>
+
+                        <div class="cursor-pointer items-center p-[6px] transition-all hover:rounded-[6px] hover:bg-gray-100">
+                            <!-- Export Modal -->
+                            <x-admin::modal ref="exportModal">
+                                <x-slot:toggle>
+                                    <p class="font-semibold leading-[24px] text-gray-600">
+                                        Export
+                                    </p>
+                                </x-slot:toggle>
+
+                                <x-slot:header>
+                                    <p class="text-[18px] font-bold text-gray-800">
+                                        @lang('Download')
+                                    </p>
+                                </x-slot:header>
+
+                                <x-slot:content>
+                                    <div class="p-[16px]">
+                                        <x-admin::form action="">
+                                            <x-admin::form.control-group>
+                                                <x-admin::form.control-group.control
+                                                    type="select"
+                                                    name="format"
+                                                    id="format"
+                                                >
+                                                    <option value="xls">XLS</option>
+                                                    <option value="csv">CLS</option>
+                                                </x-admin::form.control-group.control>
+                                            </x-admin::form.control-group>
+                                        </x-admin::form>
+                                    </div>
+                                </x-slot:content>
+                                <x-slot:footer>
+                                    <!-- Save Button -->
+                                    <button
+                                        type="submit"
+                                        class="cursor-pointer rounded-[6px] border border-blue-700 bg-blue-600 px-[12px] py-[6px] font-semibold text-gray-50"
+                                    >
+                                        @lang('Export')
+                                    </button>
+                                </x-slot:footer>
+                            </x-admin::modal>
                         </div>
                     </div>
+                </x-slot:content>
+            </x-admin::dropdown>
+        </div>
+    </div>
+
+    <div class="flex gap-[10px] max-xl:flex-wrap">
+        <div class="flex flex-1 flex-col gap-[8px] max-xl:flex-auto">
+            <div class="gap-[30px]">
+                <div class="grid gap-[4px]">
+                    <p class="font-semibold text-gray-600">
+                        Overall Details
+                    </p>
                 </div>
-            </div>
-        </template> --}}
-    </x-admin::binding-component>
-
-     <!-- Input Form -->
-        <div class="flex justify-between items-center mb-[26px]">
-            <div class="">
-                <p class="gap-[64px] mb-[10px] text-[20px] text-gray-800 font-bold">
-                    Hi! {{ $admin->name}},
-                </p>
 
-                <p class="gap-[10px] pr-[10px] text-[12px] text-gray-600">
-                    @lang("Quickly Review what's going on in your store")
-                </p>
-            </div>
+                <div class="box-shadow max-1580:grid-cols-3 mt-[8px] grid grid-cols-5 flex-wrap justify-between gap-[48px] rounded-[4px] bg-white p-[16px] max-xl:grid-cols-2 max-sm:grid-cols-1">
+                    <div class="">
+                        {{ core()->formatBasePrice($statistics['total_sales']['current']) }}
 
-            <div class="flex gap-x-[10px] items-center">
-                <!-- Dropdown -->
-                <x-admin::dropdown position="bottom-right">
-                    <x-slot:toggle>
-                        <span class="icon-setting p-[6px] rounded-[6px] text-[24px]  cursor-pointer transition-all hover:bg-gray-100"></span>
-                    </x-slot:toggle>
-    
-                    <x-slot:content class="w-[174px] max-w-full !p-[8PX] border border-gray-300 rounded-[4px] z-10 bg-white shadow-[0px_8px_10px_0px_rgba(0,_0,_0,_0.2)]">
-                        <div class="grid gap-[2px]">
-                            <!-- Current Channel -->
-                            <div class="p-[6px] items-center cursor-pointer transition-all hover:bg-gray-100 hover:rounded-[6px]">
-                                <p class="text-gray-600 font-semibold leading-[24px]">
-                                    Channel - {{ core()->getCurrentChannel()->name }}
-                                </p>
-                            </div>
-    
-                            <!-- Current Locale -->
-                            <div class="p-[6px] items-center cursor-pointer transition-all hover:bg-gray-100 hover:rounded-[6px]">
-                                <p class="text-gray-600 font-semibold leading-[24px]">
-                                    Language - {{ core()->getCurrentLocale()->name }}
-                                </p>
-                            </div>
-    
-                            <div class="p-[6px] items-center cursor-pointer transition-all hover:bg-gray-100 hover:rounded-[6px]">
-                                <!-- Export Modal -->
-                                <x-admin::modal ref="exportModal">
-                                    <x-slot:toggle>
-                                        <p class="text-gray-600 font-semibold leading-[24px]">
-                                            Export                                            
-                                        </p>
-                                    </x-slot:toggle>
-    
-                                    <x-slot:header>
-                                        <p class="text-[18px] text-gray-800 font-bold">
-                                            @lang('Download')
-                                        </p>
-                                    </x-slot:header>
-    
-                                    <x-slot:content>
-                                        <div class="p-[16px]">
-                                            <x-admin::form action="">
-                                                <x-admin::form.control-group>
-                                                    <x-admin::form.control-group.control
-                                                        type="select"
-                                                        name="format"
-                                                        id="format"
-                                                    >
-                                                        <option value="xls">XLS</option>
-                                                        <option value="csv">CLS</option>
-                                                    </x-admin::form.control-group.control>
-                                                </x-admin::form.control-group>
-                                            </x-admin::form>
-                                        </div>
-                                    </x-slot:content>
-                                    <x-slot:footer>
-                                        <!-- Save Button -->
-                                        <button
-                                            type="submit" 
-                                            class="px-[12px] py-[6px] bg-blue-600 border border-blue-700 rounded-[6px] text-gray-50 font-semibold cursor-pointer"
-                                        >
-                                            @lang('Export')
-                                        </button>
-                                    </x-slot:footer>
-                                </x-admin::modal>
-                            </div>
-                        </div>
-                    </x-slot:content>
-                </x-admin::dropdown>
-            </div>
-        </div>
-
-        {{-- <div class="flex gap-[10px] max-xl:flex-wrap">
-            <div class="flex flex-col gap-[8px] flex-1 max-xl:flex-auto">
-                <div class="gap-[30px]">
-					<div class="grid gap-[4px]">
-						<p class="text-gray-600 font-semibold">
-                            Overall Details
+                        <p class="text-[12px] text-gray-800">
+                            {{ __('admin::app.dashboard.total-sale') }}
                         </p>
-					</div>
-
-					<div class="grid grid-cols-5 gap-[48px] flex-wrap justify-between p-[16px] mt-[8px] bg-white rounded-[4px] box-shadow max-1580:grid-cols-3 max-xl:grid-cols-2 max-sm:grid-cols-1">
-                        <div class="">
-                            {{ core()->formatBasePrice($statistics['total_sales']['current']) }}
-
-                            <p class="text-[12px] text-gray-800">
-                                {{ __('admin::app.dashboard.total-sale') }}
-                            </p>
-                            <span class="progress">
-                                @if ($statistics['total_sales']['progress'] < 0)
-                                    <span class="icon-arrow-down"></span>
-                                    {{ __('admin::app.dashboard.decreased', [
-                                            'progress' => -number_format($statistics['total_sales']['progress'], 1)
-                                        ])
-                                    }}
-                                @else
-                                    <span class="icon-arrow-up"></span>
-                                    {{ __('admin::app.dashboard.increased', [
-                                            'progress' => number_format($statistics['total_sales']['progress'], 1)
-                                        ])
-                                    }}
-                                @endif
-                            </span>
-                        </div>
+                        <span class="progress">
+                            @if ($statistics['total_sales']['progress'] < 0)
+                                <span class="icon-arrow-down"></span>
+                                {{ __('admin::app.dashboard.decreased', [
+                                    'progress' => -number_format($statistics['total_sales']['progress'], 1),
+                                ]) }}
+                            @else
+                                <span class="icon-arrow-up"></span>
+                                {{ __('admin::app.dashboard.increased', [
+                                    'progress' => number_format($statistics['total_sales']['progress'], 1),
+                                ]) }}
+                            @endif
+                        </span>
+                    </div>
 
-                        <div class="">
-                            {{ $statistics['total_orders']['current'] }}
+                    <div class="">
+                        {{ $statistics['total_orders']['current'] }}
 
-                            <p class="text-[12px] text-gray-800">
-                                {{ __('admin::app.dashboard.total-orders') }}
-                            </p>
+                        <p class="text-[12px] text-gray-800">
+                            {{ __('admin::app.dashboard.total-orders') }}
+                        </p>
 
-                            <span class="progress">
-                                @if ($statistics['total_orders']['progress'] < 0)
-                                    <span class="icon-arrow-down"></span>
-                                    {{ __('admin::app.dashboard.decreased', [
-                                            'progress' => -number_format($statistics['total_orders']['progress'], 1)
-                                        ])
-                                    }}
-                                @else
-                                    <span class="icon-arrow-up"></span>
-                                    {{ __('admin::app.dashboard.increased', [
-                                            'progress' => number_format($statistics['total_orders']['progress'], 1)
-                                        ])
-                                    }}
-                                @endif
-                            </span>
-                        </div>
+                        <span class="progress">
+                            @if ($statistics['total_orders']['progress'] < 0)
+                                <span class="icon-arrow-down"></span>
+                                {{ __('admin::app.dashboard.decreased', [
+                                    'progress' => -number_format($statistics['total_orders']['progress'], 1),
+                                ]) }}
+                            @else
+                                <span class="icon-arrow-up"></span>
+                                {{ __('admin::app.dashboard.increased', [
+                                    'progress' => number_format($statistics['total_orders']['progress'], 1),
+                                ]) }}
+                            @endif
+                        </span>
+                    </div>
 
-                        <div class="">
-                            {{ $statistics['total_customers']['current'] }}
+                    <div class="">
+                        {{ $statistics['total_customers']['current'] }}
 
-                            <p class="text-[12px] text-gray-800">
-                                {{ __('admin::app.dashboard.total-customers') }}
-                            </p>
+                        <p class="text-[12px] text-gray-800">
+                            {{ __('admin::app.dashboard.total-customers') }}
+                        </p>
 
-                            <span class="progress">
-                                @if ($statistics['total_customers']['progress'] < 0)
-                                    <span class="icon-arrow-down"></span>
-                                    {{ __('admin::app.dashboard.decreased', [
-                                            'progress' => -number_format($statistics['total_customers']['progress'], 1)
-                                        ])
-                                    }}
-                                @else
-                                    <span class="icon-arrow-up"></span>
-                                    {{ __('admin::app.dashboard.increased', [
-                                            'progress' => number_format($statistics['total_customers']['progress'], 1)
-                                        ])
-                                    }}
-                                @endif
-                            </span>
-                        </div>
+                        <span class="progress">
+                            @if ($statistics['total_customers']['progress'] < 0)
+                                <span class="icon-arrow-down"></span>
+                                {{ __('admin::app.dashboard.decreased', [
+                                    'progress' => -number_format($statistics['total_customers']['progress'], 1),
+                                ]) }}
+                            @else
+                                <span class="icon-arrow-up"></span>
+                                {{ __('admin::app.dashboard.increased', [
+                                    'progress' => number_format($statistics['total_customers']['progress'], 1),
+                                ]) }}
+                            @endif
+                        </span>
+                    </div>
 
-                        <div class="">
-                            {{ core()->formatBasePrice($statistics['avg_sales']['current']) }}
+                    <div class="">
+                        {{ core()->formatBasePrice($statistics['avg_sales']['current']) }}
 
-                            <p class="text-[12px] text-gray-800">
-                                {{ __('admin::app.dashboard.average-sale') }}
-                            </p>
+                        <p class="text-[12px] text-gray-800">
+                            {{ __('admin::app.dashboard.average-sale') }}
+                        </p>
 
-                            <span class="progress">
-                                @if ($statistics['avg_sales']['progress'] < 0)
-                                    <span class="icon-arrow-down"></span>
-                                    {{ __('admin::app.dashboard.decreased', [
-                                            'progress' => -number_format($statistics['avg_sales']['progress'], 1)
-                                        ])
-                                    }}
-                                @else
-                                    <span class="icon-arrow-up"></span>
-                                    {{ __('admin::app.dashboard.increased', [
-                                            'progress' => number_format($statistics['avg_sales']['progress'], 1)
-                                        ])
-                                    }}
-                                @endif
-                            </span>
-                        </div>
+                        <span class="progress">
+                            @if ($statistics['avg_sales']['progress'] < 0)
+                                <span class="icon-arrow-down"></span>
+                                {{ __('admin::app.dashboard.decreased', [
+                                    'progress' => -number_format($statistics['avg_sales']['progress'], 1),
+                                ]) }}
+                            @else
+                                <span class="icon-arrow-up"></span>
+                                {{ __('admin::app.dashboard.increased', [
+                                    'progress' => number_format($statistics['avg_sales']['progress'], 1),
+                                ]) }}
+                            @endif
+                        </span>
+                    </div>
 
-                        <div class="">
-                            {{ core()->formatBasePrice($statistics['total_unpaid_invoices']) }}
+                    <div class="">
+                        {{ core()->formatBasePrice($statistics['total_unpaid_invoices']) }}
 
-                            <p class="text-[12px] text-gray-800">
-                                {{ __('admin::app.dashboard.total-unpaid-invoices') }}
-                            </p>
-                        </div>
-					</div>
-				</div>
+                        <p class="text-[12px] text-gray-800">
+                            {{ __('admin::app.dashboard.total-unpaid-invoices') }}
+                        </p>
+                    </div>
+                </div>
             </div>
+        </div>
 
-            <div class="flex flex-col gap-[8px] w-[360px] max-w-full">
-                 <x-admin::form action="">
-                    <div class="gap-[30px]">
-                        <div class="grid gap-[4px]">
-                            <p class="text-gray-600 font-semibold">
-                                Store Stats
-                            </p>
-                        </div>
-
-                        <div class="flex-wrap justify-between p-[16px] mt-[8px] bg-white rounded-[4px] box-shadow">
-                            <div class="flex gap-[16px]">
-                                <x-admin::form.control-group class="mb-[10px]">
-
-                                    <x-admin::form.control-group.control
-                                        type="date"
-                                        name="Default Store"
-                                        :value="old('Default Store')"
-                                        :label="trans('admin::app.marketing.promotions.catalog-rules.create.from')"
-                                        :placeholder="trans('admin::app.marketing.promotions.catalog-rules.create.from')"
-                                    >
-                                    </x-admin::form.control-group.control>
-
-                                    <x-admin::form.control-group.error
-                                        control-name="Default Store"
-                                    >
-                                    </x-admin::form.control-group.error>
-                                </x-admin::form.control-group>
-
-                                <x-admin::form.control-group class="mb-[10px]">
-
-                                    <x-admin::form.control-group.control
-                                        type="date"
-                                        id="This Month"
-                                        name="This Month"
-                                        :value="old('ends_till')"
-                                        id="ends_till"
-                                        :label="trans('admin::app.marketing.promotions.catalog-rules.create.to')"
-                                        :placeholder="trans('admin::app.marketing.promotions.catalog-rules.create.to')"
-                                    >
-                                    </x-admin::form.control-group.control>
-
-                                    <x-admin::form.control-group.error
-                                        control-name="This Month"
-                                    >
-                                    </x-admin::form.control-group.error>
-                                </x-admin::form.control-group>
-                            </div>
+        <div class="flex w-[360px] max-w-full flex-col gap-[8px]">
+            <x-admin::form action="">
+                <div class="gap-[30px]">
+                    <div class="grid gap-[4px]">
+                        <p class="font-semibold text-gray-600">
+                            Store Stats
+                        </p>
+                    </div>
 
+                    <div class="box-shadow mt-[8px] flex-wrap justify-between rounded-[4px] bg-white p-[16px]">
+                        <div class="flex gap-[16px]">
+                            <x-admin::form.control-group class="mb-[10px]">
+
+                                <x-admin::form.control-group.control
+                                    type="date"
+                                    name="Default Store"
+                                    :value="old('Default Store')"
+                                    :label="trans('admin::app.marketing.promotions.catalog-rules.create.from')"
+                                    :placeholder="trans('admin::app.marketing.promotions.catalog-rules.create.from')"
+                                >
+                                </x-admin::form.control-group.control>
+
+                                <x-admin::form.control-group.error control-name="Default Store">
+                                </x-admin::form.control-group.error>
+                            </x-admin::form.control-group>
+
+                            <x-admin::form.control-group class="mb-[10px]">
+
+                                <x-admin::form.control-group.control
+                                    type="date"
+                                    name="This Month"
+                                    id="This Month"
+                                    id="ends_till"
+                                    :value="old('ends_till')"
+                                    :label="trans('admin::app.marketing.promotions.catalog-rules.create.to')"
+                                    :placeholder="trans('admin::app.marketing.promotions.catalog-rules.create.to')"
+                                >
+                                </x-admin::form.control-group.control>
+
+                                <x-admin::form.control-group.error control-name="This Month">
+                                </x-admin::form.control-group.error>
+                            </x-admin::form.control-group>
                         </div>
-                    </div>
-                 </x-admin::form>
-            </div>
-        </div> --}}
 
+                    </div>
+                </div>
+            </x-admin::form>
+        </div>
+    </div> --}}
 </x-admin::layouts>
diff --git a/packages/Webkul/Admin/src/Resources/views/sales/orders/index.blade.php b/packages/Webkul/Admin/src/Resources/views/sales/orders/index.blade.php
index 58012cb0d11..4a38d071740 100755
--- a/packages/Webkul/Admin/src/Resources/views/sales/orders/index.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/sales/orders/index.blade.php
@@ -36,7 +36,7 @@
                             <x-admin::modal ref="exportModal">
                                 <x-slot:toggle>
                                     <p class="text-gray-600 font-semibold leading-[24px]">
-                                        Export                                            
+                                        Export
                                     </p>
                                 </x-slot:toggle>
 
@@ -65,7 +65,7 @@
                                 <x-slot:footer>
                                     <!-- Save Button -->
                                     <button
-                                        type="submit" 
+                                        type="submit"
                                         class="px-[12px] py-[6px] bg-blue-600 border border-blue-700 rounded-[6px] text-gray-50 font-semibold cursor-pointer"
                                     >
                                         @lang('Export')
@@ -84,7 +84,95 @@ class="px-[12px] py-[6px] bg-blue-600 border border-blue-700 rounded-[6px] text-
             </a>
         </div>
     </div>
-    
-    <x-admin::datagrid :src="route('admin.sales.orders.index')"></x-admin::datagrid>
 
-</x-admin::layouts>
\ No newline at end of file
+    <x-admin::datagrid :src="route('admin.sales.orders.index')">
+        <template #header="{ columns, records }">
+            <div class="row grid px-[16px] py-[10px] border-b-[1px] border-gray-300 grid-cols-4 grid-rows-1">
+                <div class="">
+                    <div class="flex gap-[10px]">
+                        <span class="icon-uncheckbox text-[24px]"></span>
+                        <p class="text-gray-600">Order ID / Date / Status</p>
+                    </div>
+                </div>
+
+                <div class="">
+                    <p class="text-gray-600">Price / Pay Via / Channel</p>
+                </div>
+
+                <div class="">
+                    <p class="text-gray-600">Customer / Email / Location / Image</p>
+                </div>
+            </div>
+        </template>
+
+        <template #body="{ columns, records }">
+            <div class="row grid grid-cols-4 px-[16px] py-[10px] border-b-[1px] border-gray-300" v-for="record in records">
+                <div class="">
+                    <div class="flex gap-[10px]">
+                        <span class="icon-uncheckbox text-[24px]"></span>
+
+                        <div class="flex flex-col gap-[6px]">
+                            <p class="text-[16px] text-gray-800 font-semibold">#02153</p>
+
+                            <p class="text-gray-600">23 Mar 2023, 01:00:00</p>
+
+                            <p class="label-pending">Pending</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="">
+                    <div class="flex flex-col gap-[6px]">
+                        <p class="text-[16px] text-gray-800 font-semibold">$75.00</p>
+
+                        <p class="text-gray-600">Pay by - Cash on Delivery</p>
+
+                        <p class="text-gray-600">Online Store</p>
+                    </div>
+                </div>
+
+                <div class="">
+                    <div class="flex flex-col gap-[6px]">
+                        <p class="text-[16px] text-gray-800">John Doe</p>
+
+                        <p class="text-gray-600">john@deo.com</p>
+
+                        <p class="text-gray-600">Broadway, New York</p>
+                    </div>
+                </div>
+
+                <div class="">
+                    <div class="flex  gap-[6px] items-center">
+                        <div class="flex gap-[6px] items-center flex-wrap">
+                            <div class="relative">
+                                <img class="min-h-[65px] min-w-[65px] max-h-[65px] max-w-[65px] rounded-[4px]" src="../images/order-1.png">
+
+                                <span class="absolute bottom-[1px] left-[1px] text-[12px] font-bold text-white bg-darkPink rounded-full px-[6px] ">1</span>
+                            </div>
+
+                            <div class="relative">
+                                <img class="min-h-[65px] min-w-[65px] max-h-[65px] max-w-[65px] rounded-[4px]" src="../images/order-1.png">
+
+                                <span class="absolute bottom-[1px] left-[1px] text-[12px] font-bold text-white bg-darkPink rounded-full px-[6px] ">2</span>
+                            </div>
+
+                            <div class="relative">
+                                <img class="min-h-[65px] min-w-[65px] max-h-[65px] max-w-[65px] rounded-[4px]" src="../images/order-1.png">
+
+                                <span class="absolute bottom-[1px] left-[1px] text-[12px] font-bold text-white bg-darkPink rounded-full px-[6px] ">3</span>
+                            </div>
+                        </div>
+
+                        <div class="flex gap-[6px] items-center">
+                            <div class="flex items-center w-[65px] h-[65px] bg-gray-50 rounded-[4px]">
+                                <p class="text-[12px] text-gray-600 text-center font-bold px-[6px] py-[6px]">2+ More Products </p>
+                            </div>
+
+                            <span class="icon-sort-right text-[24px] ml-[4px] cursor-pointer"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </x-admin::datagrid>
+</x-admin::layouts>