TelemedPro/purityselect
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Inshal
2024-10-25 01:05:27 +05:00
commit 94cd8a1dc9
1710 changed files with 273609 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

413
resources/js/views/pages/order/details/[id].vue Normal file
View File

@@ -0,0 +1,413 @@
<script setup>
import avatar1 from '@images/avatars/avatar-1.png'
import product21 from '@images/ecommerce-images/product-21.png'
import product22 from '@images/ecommerce-images/product-22.png'
import product23 from '@images/ecommerce-images/product-23.png'
import product24 from '@images/ecommerce-images/product-24.png'
const route = useRoute('apps-ecommerce-order-details-id')
const isConfirmDialogVisible = ref(false)
const isUserInfoEditDialogVisible = ref(false)
const isEditAddressDialogVisible = ref(false)
const headers = [
{
title: 'Product',
key: 'productName',
},
{
title: 'Price',
key: 'price',
},
{
title: 'Quantity',
key: 'quantity',
},
{
title: 'Total',
key: 'total',
sortable: false,
},
]
const orderData = [
{
productName: 'OnePlus 7 Pro',
productImage: product21,
brand: 'OnePlus',
price: 799,
quantity: 1,
},
{
productName: 'Magic Mouse',
productImage: product22,
brand: 'Apple',
price: 89,
quantity: 1,
},
{
productName: 'Wooden Chair',
productImage: product23,
brand: 'insofer',
price: 289,
quantity: 2,
},
{
productName: 'Air Jorden',
productImage: product24,
brand: 'Nike',
price: 299,
quantity: 2,
},
]
</script>
<template>
<div>
<div class="d-flex justify-space-between align-center flex-wrap gap-y-4 mb-6">
<div>
<div class="d-flex gap-2 align-center mb-2 flex-wrap">
<h5 class="text-h5">
Order #{{ route.params.id }}
</h5>
<div class="d-flex gap-x-2">
<VChip
variant="tonal"
color="success"
size="small"
>
Paid
</VChip>
<VChip
variant="tonal"
color="info"
size="small"
>
Ready to Pickup
</VChip>
</div>
</div>
<div>
<span class="text-body-1">
Aug 17, 2020, 5:48 (ET)
</span>
</div>
</div>
<VBtn
variant="outlined"
color="error"
@click="isConfirmDialogVisible = !isConfirmDialogVisible"
>
Delete Order
</VBtn>
</div>
<VRow>
<VCol
cols="12"
md="8"
>
<!-- 👉 Order Details -->
<VCard class="mb-6">
<VCardItem>
<template #title>
<h5 class="text-h5">
Order Details
</h5>
</template>
<template #append>
<span class="text-primary cursor-pointer">Edit</span>
</template>
</VCardItem>
<VDataTable
:headers="headers"
:items="orderData"
item-value="productName"
show-select
class="text-no-wrap"
>
<template #item.productName="{ item }">
<div class="d-flex gap-x-3">
<VAvatar
size="34"
variant="tonal"
:image="item.productImage"
rounded
/>
<div class="d-flex flex-column align-center">
<h6 class="text-h6">
{{ item.productName }}
</h6>
<span class="text-sm text-start align-self-start">
{{ item.brand }}
</span>
</div>
</div>
</template>
<template #item.price="{ item }">
<span>${{ item.price }}</span>
</template>
<template #item.total="{ item }">
<span>
${{ item.price * item.quantity }}
</span>
</template>
<template #bottom />
</VDataTable>
<VDivider />
<VCardText>
<div class="d-flex align-end flex-column">
<table class="text-high-emphasis">
<tbody>
<tr>
<td width="200px">
Subtotal:
</td>
<td class="font-weight-medium">
$2,093
</td>
</tr>
<tr>
<td>Shipping fee: </td>
<td class="font-weight-medium">
$2
</td>
</tr>
<tr>
<td>Tax: </td>
<td class="font-weight-medium">
$28
</td>
</tr>
<tr>
<td class="font-weight-medium">
Total:
</td>
<td class="font-weight-medium">
$2,113
</td>
</tr>
</tbody>
</table>
</div>
</VCardText>
</VCard>
<!-- 👉 Shipping Activity -->
<VCard title="Shipping Activity">
<VCardText>
<VTimeline
truncate-line="both"
align="start"
side="end"
line-inset="10"
line-color="primary"
density="compact"
class="v-timeline-density-compact"
>
<VTimelineItem
dot-color="primary"
size="x-small"
>
<div class="d-flex justify-space-between align-center mb-3">
<span class="app-timeline-title">Order was placed (Order ID: #32543)</span>
<span class="app-timeline-meta">Tuesday 11:29 AM</span>
</div>
<p class="app-timeline-text mb-0">
Your order has been placed successfully
</p>
</VTimelineItem>
<VTimelineItem
dot-color="primary"
size="x-small"
>
<div class="d-flex justify-space-between align-center mb-3">
<span class="app-timeline-title">Pick-up</span>
<span class="app-timeline-meta">Wednesday 11:29 AM</span>
</div>
<p class="app-timeline-text mb-0">
Pick-up scheduled with courier
</p>
</VTimelineItem>
<VTimelineItem
dot-color="primary"
size="x-small"
>
<div class="d-flex justify-space-between align-center mb-3">
<span class="app-timeline-title">Dispatched</span>
<span class="app-timeline-meta">Thursday 8:15 AM</span>
</div>
<p class="app-timeline-text mb-0">
Item has been picked up by courier.
</p>
</VTimelineItem>
<VTimelineItem
dot-color="primary"
size="x-small"
>
<div class="d-flex justify-space-between align-center mb-3">
<span class="app-timeline-title">Package arrived</span>
<span class="app-timeline-meta">Saturday 15:20 AM</span>
</div>
<p class="app-timeline-text mb-0">
Package arrived at an Amazon facility, NY
</p>
</VTimelineItem>
<VTimelineItem
dot-color="primary"
size="x-small"
>
<div class="d-flex justify-space-between align-center mb-3">
<span class="app-timeline-title">Dispatched for delivery</span>
<span class="app-timeline-meta">Today 14:12 PM</span>
</div>
<p class="app-timeline-text mb-0">
Package has left an Amazon facility , NY
</p>
</VTimelineItem>
<VTimelineItem
dot-color="primary"
size="x-small"
>
<div class="d-flex justify-space-between align-center mb-3">
<span class="app-timeline-title">Delivery</span>
</div>
<p class="app-timeline-text mb-0">
Package will be delivered by tomorrow
</p>
</VTimelineItem>
</VTimeline>
</VCardText>
</VCard>
</VCol>
<VCol
cols="12"
md="4"
>
<!-- 👉 Customer Details -->
<VCard class="mb-6">
<VCardText class="d-flex flex-column gap-y-6">
<h5 class="text-h5">
Customer Details
</h5>
<div class="d-flex align-center">
<VAvatar
:image="avatar1"
class="me-3"
/>
<div>
<div class="text-body-1 text-high-emphasis font-weight-medium">
Shamus Tuttle
</div>
<span>Customer ID: #47389</span>
</div>
</div>
<div class="d-flex align-center">
<VAvatar
variant="tonal"
color="success"
class="me-3"
>
<VIcon icon="ri-shopping-cart-line" />
</VAvatar>
<h6 class="text-h6">
12 Orders
</h6>
</div>
<div class="d-flex flex-column gap-y-1">
<div class="d-flex justify-space-between gap-1 text-body-2">
<h6 class="text-h6">
Contact Info
</h6>
<span
class="text-base text-primary font-weight-medium cursor-pointer"
@click="isUserInfoEditDialogVisible = !isUserInfoEditDialogVisible"
>
Edit
</span>
</div>
<span>Email: Sheldon88@yahoo.com</span>
<span>Mobile: +1 (609) 972-22-22</span>
</div>
</VCardText>
</VCard>
<!-- 👉 Shipping Address -->
<VCard class="mb-6">
<VCardText>
<div class="d-flex align-center justify-space-between gap-1 mb-6">
<div class="text-body-1 text-high-emphasis font-weight-medium">
Shipping Address
</div>
<span
class="text-base text-primary font-weight-medium cursor-pointer"
@click="isEditAddressDialogVisible = !isEditAddressDialogVisible"
>Edit</span>
</div>
<div>
45 Rocker Terrace <br> Latheronwheel <br> KW5 8NW, London <br> UK
</div>
</VCardText>
</VCard>
<!-- 👉 Billing Address -->
<VCard>
<VCardText>
<div class="d-flex align-center justify-space-between gap-1 mb-3">
<div class="text-body-1 text-high-emphasis font-weight-medium">
Billing Address
</div>
<span
class="text-base text-primary font-weight-medium cursor-pointer"
@click="isEditAddressDialogVisible = !isEditAddressDialogVisible"
>Edit</span>
</div>
<div>
45 Rocker Terrace <br> Latheronwheel <br> KW5 8NW, London <br> UK
</div>
<div class="mt-6">
<h6 class="text-h6 mb-1">
Mastercard
</h6>
<div class="text-base">
Card Number: ******4291
</div>
</div>
</VCardText>
</VCard>
</VCol>
</VRow>
<ConfirmDialog
v-model:isDialogVisible="isConfirmDialogVisible"
confirmation-question="Are you sure to cancel your Order?"
cancel-msg="Order cancelled!!"
cancel-title="Cancelled"
confirm-msg="Your order cancelled successfully."
confirm-title="Cancelled!"
/>
<UserInfoEditDialog v-model:isDialogVisible="isUserInfoEditDialogVisible" />
<AddEditAddressDialog v-model:isDialogVisible="isEditAddressDialogVisible" />
</div>
</template>

395
resources/js/views/pages/order/list/index.vue Normal file
View File

@@ -0,0 +1,395 @@
<script setup>
import mastercard from '@images/logos/mastercard.png'
import paypal from '@images/logos/paypal.png'
const widgetData = ref([
{
title: 'Pending Payment',
value: 56,
icon: 'ri-calendar-2-line',
},
{
title: 'Completed',
value: 12689,
icon: 'ri-check-double-line',
},
{
title: 'Refunded',
value: 124,
icon: 'ri-wallet-3-line',
},
{
title: 'Failed',
value: 32,
icon: 'ri-error-warning-line',
},
])
const searchQuery = ref('')
// Data table options
const itemsPerPage = ref(10)
const page = ref(1)
const sortBy = ref()
const orderBy = ref()
// Data table Headers
const headers = [
{
title: 'Order',
key: 'order',
},
{
title: 'Date',
key: 'date',
},
{
title: 'Customers',
key: 'customers',
},
{
title: 'Payment',
key: 'payment',
sortable: false,
},
{
title: 'Status',
key: 'status',
},
{
title: 'Method',
key: 'method',
sortable: false,
},
{
title: 'Actions',
key: 'actions',
sortable: false,
},
]
const updateOptions = options => {
page.value = options.page
sortBy.value = options.sortBy[0]?.key
orderBy.value = options.sortBy[0]?.order
}
const resolvePaymentStatus = status => {
if (status === 1)
return {
text: 'Paid',
color: 'success',
}
if (status === 2)
return {
text: 'Pending',
color: 'warning',
}
if (status === 3)
return {
text: 'Cancelled',
color: 'secondary',
}
if (status === 4)
return {
text: 'Failed',
color: 'error',
}
}
const resolveStatus = status => {
if (status === 'Delivered')
return {
text: 'Delivered',
color: 'success',
}
if (status === 'Out for Delivery')
return {
text: 'Out for Delivery',
color: 'primary',
}
if (status === 'Ready to Pickup')
return {
text: 'Ready to Pickup',
color: 'info',
}
if (status === 'Dispatched')
return {
text: 'Dispatched',
color: 'warning',
}
}
const {
data: ordersData,
execute: fetchOrders,
} = await useApi(createUrl('/apps/ecommerce/orders', {
query: {
q: searchQuery,
page,
itemsPerPage,
sortBy,
orderBy,
},
}))
const orders = computed(() => ordersData.value.orders)
const totalOrder = computed(() => ordersData.value.total)
const deleteOrder = async id => {
await $api(`/apps/ecommerce/orders/${ id }`, { method: 'DELETE' })
fetchOrders()
}
</script>
<template>
<div>
<VCard class="mb-6">
<VCardText class="px-2">
<VRow>
<template
v-for="(data, index) in widgetData"
:key="index"
>
<VCol
cols="12"
sm="6"
md="3"
class="px-6"
>
<div
class="d-flex justify-space-between"
:class="$vuetify.display.xs ? 'product-widget' : $vuetify.display.sm ? index < 2 ? 'product-widget' : '' : ''"
>
<div class="d-flex flex-column gap-y-1">
<h4 class="text-h4">
{{ data.value }}
</h4>
<span class="text-base text-capitalize">
{{ data.title }}
</span>
</div>
<VAvatar
variant="tonal"
rounded
size="42"
>
<VIcon
:icon="data.icon"
size="26"
/>
</VAvatar>
</div>
</VCol>
<VDivider
v-if="$vuetify.display.mdAndUp ? index !== widgetData.length - 1 : $vuetify.display.smAndUp ? index % 2 === 0 : false"
vertical
inset
length="100"
/>
</template>
</VRow>
</VCardText>
</VCard>
<VCard>
<VCardText>
<div class="d-flex justify-sm-space-between align-center justify-start flex-wrap gap-4">
<VTextField
v-model="searchQuery"
placeholder="Search Order"
density="compact"
style=" max-inline-size: 200px; min-inline-size: 200px;"
/>
<VBtn
prepend-icon="ri-upload-2-line"
variant="outlined"
color="secondary"
>
Export
</VBtn>
</div>
</VCardText>
<VDataTableServer
v-model:items-per-page="itemsPerPage"
v-model:page="page"
:headers="headers"
:items="orders"
item-value="order"
:items-length="totalOrder"
show-select
class="text-no-wrap"
@update:options="updateOptions"
>
<!-- Order ID -->
<template #item.order="{ item }">
<RouterLink :to="{ name: 'apps-ecommerce-order-details-id', params: { id: item.order } }">
#{{ item.order }}
</RouterLink>
</template>
<!-- Date -->
<template #item.date="{ item }">
{{ new Date(item.date).toDateString() }}
</template>
<!-- Customers -->
<template #item.customers="{ item }">
<div class="d-flex align-center">
<VAvatar
size="34"
:variant="!item.avatar.length ? 'tonal' : undefined"
:rounded="1"
class="me-4"
>
<VImg
v-if="item.avatar"
:src="item.avatar"
/>
<span
v-else
class="font-weight-medium"
>{{ avatarText(item.customer) }}</span>
</VAvatar>
<div class="d-flex flex-column">
<RouterLink :to="{ name: 'pages-user-profile-tab', params: { tab: 'profile' } }">
<div class="text-high-emphasis font-weight-medium">
{{ item.customer }}
</div>
</RouterLink>
<span class="text-sm">{{ item.email }}</span>
</div>
</div>
</template>
<!-- Payments -->
<template #item.payment="{ item }">
<div
:class="`text-${resolvePaymentStatus(item.payment)?.color}`"
class="d-flex align-center font-weight-medium"
>
<VIcon
size="10"
icon="ri-circle-fill"
class="me-2"
/>
<span>{{ resolvePaymentStatus(item.payment)?.text }}</span>
</div>
</template>
<!-- Status -->
<template #item.status="{ item }">
<VChip
v-bind="resolveStatus(item.status)"
size="small"
/>
</template>
<!-- Method -->
<template #item.method="{ item }">
<div class="d-flex align-start gap-x-2">
<img :src="item.method === 'mastercard' ? mastercard : paypal">
<div>
<VIcon
icon="ri-more-line"
class="me-2"
/>
<span v-if="item.method === 'mastercard'">
{{ item.methodNumber }}
</span>
<span v-else>
@gmail.com
</span>
</div>
</div>
</template>
<!-- Actions -->
<template #item.actions="{ item }">
<IconBtn size="small">
<VIcon icon="ri-more-2-line" />
<VMenu activator="parent">
<VList>
<VListItem value="view">
<RouterLink
:to="{ name: 'apps-ecommerce-order-details-id', params: { id: item.order } }"
class="text-high-emphasis"
>
View
</RouterLink>
</VListItem>
<VListItem
value="delete"
@click="deleteOrder(item.id)"
>
Delete
</VListItem>
</VList>
</VMenu>
</IconBtn>
</template>
<!-- Pagination -->
<template #bottom>
<VDivider />
<div class="d-flex justify-end flex-wrap gap-x-6 px-2 py-1">
<div class="d-flex align-center gap-x-2 text-medium-emphasis text-base">
Rows Per Page:
<VSelect
v-model="itemsPerPage"
class="per-page-select"
variant="plain"
:items="[10, 20, 25, 50, 100]"
/>
</div>
<p class="d-flex align-center text-base text-high-emphasis me-2 mb-0">
{{ paginationMeta({ page, itemsPerPage }, totalOrder) }}
</p>
<div class="d-flex gap-x-2 align-center me-2">
<VBtn
class="flip-in-rtl"
icon="ri-arrow-left-s-line"
variant="text"
density="comfortable"
color="high-emphasis"
:disabled="page <= 1"
@click="page <= 1 ? page = 1 : page--"
/>
<VBtn
class="flip-in-rtl"
icon="ri-arrow-right-s-line"
density="comfortable"
variant="text"
color="high-emphasis"
:disabled="page >= Math.ceil(totalOrder / itemsPerPage)"
@click="page >= Math.ceil(totalOrder / itemsPerPage) ? page = Math.ceil(totalOrder / itemsPerPage) : page++ "
/>
</div>
</div>
</template>
</VDataTableServer>
</VCard>
</div>
</template>
<style lang="scss" scoped>
#customer-link{
&:hover{
color: '#000' !important
}
}
.product-widget{
border-block-end: 1px solid rgba(var(--v-theme-on-surface), var(--v-border-opacity));
padding-block-end: 1rem;
}
</style>