Skip to content

Commit

Permalink
Merge pull request bagisto#9201 from shivendra-webkul/today-detail
Browse files Browse the repository at this point in the history 
optimise UI of today's details
  • Loading branch information
@jitendra-webkul
jitendra-webkul authored Dec 22, 2023
2 parents 0d05e26 + e649da9 commit 414d498
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 86 deletions.
52 changes: 30 additions & 22 deletions ...es/Webkul/Admin/src/Resources/views/components/shimmer/dashboard/todays-details.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,39 +38,47 @@
</div>

@for ($i = 1; $i <= 5; $i++)
<div class="row grid grid-cols-4 gap-y-6 p-4 bg-white dark:bg-gray-900 border-b dark:border-gray-800 transition-all hover:bg-gray-50 dark:hover:bg-gray-950 max-1580:grid-cols-3 max-sm:grid-cols-1">
<div class="flex gap-2.5">
<div class="flex flex-col gap-1.5">
<div class="shimmer w-[30px] h-[17px]"></div>
<div class="p-4 bg-white dark:bg-gray-900 border-b dark:border-gray-800 transition-all hover:bg-gray-50 dark:hover:bg-gray-950">
<div class="flex gap-4 flex-wrap">
<div class="flex gap-2.5 flex-1 min-w-[180px]">
<div class="flex flex-col gap-1.5">
<div class="shimmer w-[30px] h-[17px]"></div>

<div class="shimmer w-[130px] h-[17px]"></div>
<div class="shimmer w-[130px] h-[17px]"></div>

<div class="shimmer w-[60px] h-[19px] rounded-[35px]"></div>
<div class="shimmer w-[60px] h-[19px] rounded-[35px]"></div>
</div>
</div>
</div>

<div class="flex flex-col gap-1.5">
<div class="shimmer w-[50px] h-[17px]"></div>
<div class="flex gap-2.5 flex-1 min-w-[180px]">
<div class="flex flex-col gap-1.5">
<div class="shimmer w-[50px] h-[17px]"></div>

<div class="shimmer w-[180px] h-[17px]"></div>
<div class="shimmer w-[180px] h-[17px]"></div>

<div class="shimmer w-[60px] h-[17px]"></div>
</div>
<div class="shimmer w-[60px] h-[17px]"></div>
</div>
</div>

<div class="flex flex-col gap-1.5">
<div class="shimmer w-[130px] h-[17px]"></div>
<div class="flex gap-2.5 flex-1 min-w-[180px]">
<div class="flex flex-col gap-1.5">
<div class="shimmer w-[130px] h-[17px]"></div>

<div class="shimmer w-[130px] h-[17px]"></div>
<div class="shimmer w-[130px] h-[17px]"></div>

<div class="shimmer w-[130px] h-[17px]"></div>
</div>
<div class="shimmer w-[130px] h-[17px]"></div>
</div>
</div>

<div class="max-1580:col-span-full">
<div class="flex gap-1.5 items-center justify-between">
<div class="flex gap-1.5 items-center flex-wrap">
<div class="shimmer w-[65px] h-[65px] rounded"></div>
<div class="flex gap-2.5 flex-1 min-w-[180px] justify-between items-center">
<div class="flex flex-col gap-1.5">
<div class="flex gap-1.5 items-center flex-wrap">
<div class="shimmer w-[65px] h-[65px] rounded"></div>

<div class="shimmer w-[65px] h-[65px] rounded"></div>
</div>
</div>

<div class="shimmer w-9 h-9 rounded-md"></div>
</div>
</div>
Expand Down
127 changes: 65 additions & 62 deletions packages/Webkul/Admin/src/Resources/views/dashboard/todays-details.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,78 +122,81 @@ class="text-xs text-emerald-500 font-semibold"
</div>

<!-- Today Orders Details -->
<div
class="row grid grid-cols-4 gap-y-6 p-4 bg-white dark:bg-gray-900 border-b dark:border-gray-800 transition-all hover:bg-gray-50 dark:hover:bg-gray-950 max-1580:grid-cols-3 max-sm:grid-cols-1"
<div
v-for="order in report.statistics.orders"
class="p-4 bg-white dark:bg-gray-900 border-b dark:border-gray-800 transition-all hover:bg-gray-50 dark:hover:bg-gray-950"
>
<!-- Order ID, Status, Created -->
<div class="flex gap-2.5">
<div class="flex flex-col gap-1.5">
<!-- Order Id -->
<p class="text-base text-gray-800 leading-none dark:text-white font-semibold">
@{{ "@lang('admin::app.dashboard.index.order-id', ['id' => ':replace'])".replace(':replace', order.increment_id) }}
</p>

<p class="text-gray-600 dark:text-gray-300">
@{{ order.created_at}}
</p>

<!-- Order Status -->
<p :class="'label-' + order.status">
@{{ order.status_label }}
</p>
<div class="flex gap-4 flex-wrap">
<!-- Total Sales -->
<div class="flex gap-2.5 flex-1 min-w-[180px]">
<div class="flex flex-col gap-1.5">
<!-- Order Id -->
<p class="text-base text-gray-800 leading-none dark:text-white font-semibold">
@{{ "@lang('admin::app.dashboard.index.order-id', ['id' => ':replace'])".replace(':replace', order.increment_id) }}
</p>

<p class="text-gray-600 dark:text-gray-300">
@{{ order.created_at}}
</p>

<!-- Order Status -->
<p :class="'label-' + order.status">
@{{ order.status_label }}
</p>
</div>
</div>
</div>

<!-- Payment And Channel Detailes -->
<div class="flex flex-col gap-1.5">
<!-- Grand Total -->
<p class="text-base text-gray-800 leading-none dark:text-white font-semibold">
@{{ order.formatted_base_grand_total }}
</p>

<!-- Payment Mode -->
<p class="text-gray-600 dark:text-gray-300">
@{{ order.payment_method }}
</p>

<!-- Channel Name -->
<p class="text-gray-600 dark:text-gray-300">
@{{ order.channel_name }}
</p>
</div>

<div class="flex flex-col gap-1.5">
<!-- Customer Detailes -->
<p class="text-base text-gray-800 dark:text-white">
@{{ order.customer_name }}
</p>

<p class="text-gray-600 dark:text-gray-300 break-words">
@{{ order.customer_email }}
</p>

<!-- Order Address -->
<p class="text-gray-600 dark:text-gray-300">
@{{ order.billing_address }}
</p>
</div>
<div class="flex gap-2.5 flex-1 min-w-[180px]">
<div class="flex flex-col gap-1.5">
<p class="text-base text-gray-800 leading-none dark:text-white font-semibold">
@{{ order.formatted_base_grand_total }}
</p>

<!-- Payment Mode -->
<p class="text-gray-600 dark:text-gray-300">
@{{ order.payment_method }}
</p>

<!-- Channel Name -->
<p class="text-gray-600 dark:text-gray-300">
@{{ order.channel_name }}
</p>
</div>
</div>

<!-- Ordered Product Images -->
<div class="max-1580:col-span-full">
<div class="flex gap-1.5 items-center justify-between">
<div
class="flex gap-1.5 items-center flex-wrap"
v-html="order.image"
>
<div class="flex gap-2.5 flex-1 min-w-[200px]">
<div class="flex flex-col gap-1.5">
<!-- Customer Detailes -->
<p class="text-base text-gray-800 dark:text-white">
@{{ order.customer_name }}
</p>

<p class="text-gray-600 dark:text-gray-300 break-words max-w-[180px]">
@{{ order.customer_email }}
</p>

<!-- Order Address -->
<p class="text-gray-600 dark:text-gray-300">
@{{ order.billing_address }}
</p>
</div>
</div>

<div class="flex gap-2.5 flex-1 min-w-[180px] justify-between items-center">
<div class="flex flex-col gap-1.5">
<!-- Ordered Product Images -->
<div
class="flex gap-1.5 flex-wrap"
v-html="order.image"
>
</div>
</div>

<!-- View More Icon -->
<a :href="'{{ route('admin.sales.orders.view', ':replace') }}'.replace(':replace', order.id)">
<!-- View More Icon -->
<a :href="'{{ route('admin.sales.orders.view', ':replace') }}'.replace(':replace', order.id)">
<span class="icon-sort-right text-2xl ltr:ml-1 rtl:mr-1 p-1.5 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-800 hover:rounded-md"></span>
</a>
</div>

</div>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions public/themes/admin/default/build/assets/app-094a0469.css
View file

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion public/themes/admin/default/build/assets/app-1a4cb8fb.css
View file

This file was deleted.

2 changes: 1 addition & 1 deletion public/themes/admin/default/build/manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"src/Resources/assets/css/app.css": {
"file": "assets/app-1a4cb8fb.css",
"file": "assets/app-094a0469.css",
"isEntry": true,
"src": "src/Resources/assets/css/app.css"
},
Expand Down

0 comments on commit 414d498

Please sign in to comment.