moein/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Moein Moradi
2025-08-04 16:33:07 +03:30
commit f798e8e35c
9595 changed files with 1208683 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
resources/js/views/apps/ecommerce/ECommerceAddCategoryDrawer.vue Normal file
View File

@@ -0,0 +1,281 @@
<script setup>
import { Image } from '@tiptap/extension-image'
import { Link } from '@tiptap/extension-link'
import { Placeholder } from '@tiptap/extension-placeholder'
import { Underline } from '@tiptap/extension-underline'
import { StarterKit } from '@tiptap/starter-kit'
import {
EditorContent,
useEditor,
} from '@tiptap/vue-3'
import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
import { VForm } from 'vuetify/components/VForm'
const props = defineProps({
isDrawerOpen: {
type: Boolean,
required: true,
},
})
const emit = defineEmits(['update:isDrawerOpen'])
const handleDrawerModelValueUpdate = val => {
emit('update:isDrawerOpen', val)
}
const editor = useEditor({
content: '',
extensions: [
StarterKit,
Image,
Placeholder.configure({ placeholder: 'Enter a category description...' }),
Underline,
Link.configure({ openOnClick: false }),
],
})
const setLink = () => {
const previousUrl = editor.value?.getAttributes('link').href
// eslint-disable-next-line no-alert
const url = window.prompt('URL', previousUrl)
// cancelled
if (url === null)
return
// empty
if (url === '') {
editor.value?.chain().focus().extendMarkRange('link').unsetLink().run()
return
}
// update link
editor.value?.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
}
const addImage = () => {
// eslint-disable-next-line no-alert
const url = window.prompt('URL')
if (url)
editor.value?.chain().focus().setImage({ src: url }).run()
}
const refVForm = ref()
const categoryTitle = ref()
const categorySlug = ref()
const categoryImg = ref()
const parentCategory = ref()
const parentStatus = ref()
const resetForm = () => {
emit('update:isDrawerOpen', false)
refVForm.value?.reset()
}
</script>
<template>
<VNavigationDrawer
:model-value="props.isDrawerOpen"
temporary
location="end"
width="370"
border="none"
class="category-navigation-drawer scrollable-content"
@update:model-value="handleDrawerModelValueUpdate"
>
<!-- 👉 Header -->
<AppDrawerHeaderSection
title="Add Category"
@cancel="$emit('update:isDrawerOpen', false)"
/>
<VDivider />
<PerfectScrollbar :options="{ wheelPropagation: false }">
<VCard flat>
<VCardText>
<VForm
ref="refVForm"
@submit.prevent=""
>
<VRow>
<VCol cols="12">
<AppTextField
v-model="categoryTitle"
label="Title"
:rules="[requiredValidator]"
placeholder="Fashion"
/>
</VCol>
<VCol cols="12">
<AppTextField
v-model="categorySlug"
label="Slug"
:rules="[requiredValidator]"
placeholder="Trends fashion"
/>
</VCol>
<VCol cols="12">
<VLabel>
<span class="text-sm text-high-emphasis mb-1">Attachment</span>
</VLabel>
<VFileInput
v-model="categoryImg"
prepend-icon=""
:rules="[requiredValidator]"
clearable
>
<template #append>
<VBtn variant="tonal">
Choose
</VBtn>
</template>
</VFileInput>
</VCol>
<VCol cols="12">
<AppSelect
v-model="parentCategory"
:rules="[requiredValidator]"
label="Parent Category"
placeholder="Select Parent Category"
:items="['HouseHold', 'Management', 'Electronics', 'Office', 'Accessories']"
/>
</VCol>
<VCol cols="12">
<p class="text-body-2 text-high-emphasis mb-1">
Description
</p>
<div class="border rounded px-3 py-1">
<EditorContent :editor="editor" />
<div
v-if="editor"
class="d-flex justify-end flex-wrap gap-x-2"
>
<VIcon
icon="tabler-bold"
:color="editor.isActive('bold') ? 'primary' : ''"
size="20"
@click="editor.chain().focus().toggleBold().run()"
/>
<VIcon
:color="editor.isActive('underline') ? 'primary' : ''"
icon="tabler-underline"
size="20"
@click="editor.commands.toggleUnderline()"
/>
<VIcon
:color="editor.isActive('italic') ? 'primary' : ''"
icon="tabler-italic"
size="20"
@click="editor.chain().focus().toggleItalic().run()"
/>
<VIcon
:color="editor.isActive('bulletList') ? 'primary' : ''"
icon="tabler-list"
size="20"
@click="editor.chain().focus().toggleBulletList().run()"
/>
<VIcon
:color="editor.isActive('orderedList') ? 'primary' : ''"
icon="tabler-list-numbers"
size="20"
@click="editor.chain().focus().toggleOrderedList().run()"
/>
<VIcon
icon="tabler-link"
size="20"
@click="setLink"
/>
<VIcon
icon="tabler-photo"
size="20"
@click="addImage"
/>
</div>
</div>
</VCol>
<VCol cols="12">
<AppSelect
v-model="parentStatus"
:rules="[requiredValidator]"
placeholder="Select Category Status"
label="Select Category Status"
:items="['Published', 'Inactive', 'Scheduled']"
/>
</VCol>
<VCol cols="12">
<div class="d-flex justify-start">
<VBtn
type="submit"
color="primary"
class="me-4"
>
Add
</VBtn>
<VBtn
color="error"
variant="tonal"
@click="resetForm"
>
Discard
</VBtn>
</div>
</VCol>
</VRow>
</VForm>
</VCardText>
</VCard>
</PerfectScrollbar>
</VNavigationDrawer>
</template>
<style lang="scss">
.category-navigation-drawer {
.ProseMirror {
min-block-size: 9vh !important;
p {
margin-block-end: 0;
}
p.is-editor-empty:first-child::before {
block-size: 0;
color: #adb5bd;
content: attr(data-placeholder);
float: inline-start;
pointer-events: none;
}
&-focused {
outline: none;
}
ul,
ol {
padding-inline: 1.125rem;
}
}
.is-active {
border-color: rgba(var(--v-theme-primary), var(--v-border-opacity)) !important;
background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity));
color: rgb(var(--v-theme-primary));
}
}
</style>

211
resources/js/views/apps/ecommerce/ECommerceAddCustomerDrawer.vue Normal file
View File

@@ -0,0 +1,211 @@
<script setup>
import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
import { VForm } from 'vuetify/components/VForm'
const props = defineProps({
isDrawerOpen: {
type: Boolean,
required: true,
},
})
const emit = defineEmits(['update:isDrawerOpen'])
const handleDrawerModelValueUpdate = val => {
emit('update:isDrawerOpen', val)
}
const refVForm = ref()
const name = ref()
const email = ref()
const mobile = ref()
const addressline1 = ref()
const addressline2 = ref()
const town = ref()
const state = ref()
const postCode = ref()
const country = ref()
const isBillingAddress = ref(false)
const resetForm = () => {
refVForm.value?.reset()
emit('update:isDrawerOpen', false)
}
const closeNavigationDrawer = () => {
emit('update:isDrawerOpen', false)
nextTick(() => {
refVForm.value?.reset()
refVForm.value?.resetValidation()
})
}
</script>
<template>
<VNavigationDrawer
data-allow-mismatch
:model-value="props.isDrawerOpen"
temporary
location="end"
width="370"
border="none"
@update:model-value="handleDrawerModelValueUpdate"
>
<!-- 👉 Header -->
<AppDrawerHeaderSection
title="Add a Customer"
@cancel="closeNavigationDrawer"
/>
<VDivider />
<VCard flat>
<PerfectScrollbar
:options="{ wheelPropagation: false }"
class="h-100"
>
<VCardText style="block-size: calc(100vh - 5rem);">
<VForm
ref="refVForm"
@submit.prevent=""
>
<VRow>
<VCol>
<h6 class="text-h6">
Basic Information
</h6>
</VCol>
<VCol cols="12">
<AppTextField
v-model="name"
label="Name*"
:rules="[requiredValidator]"
placeholder="John Doe"
/>
</VCol>
<VCol cols="12">
<AppTextField
v-model="email"
label="Email*"
:rules="[requiredValidator, emailValidator]"
placeholder="johndoe@email.com"
/>
</VCol>
<VCol cols="12">
<AppTextField
v-model="mobile"
label="Mobile*"
:rules="[requiredValidator]"
placeholder="+(123) 456-7890"
/>
</VCol>
<VCol>
<div class="text-body-1 font-weight-medium text-high-emphasis">
Shipping Information
</div>
</VCol>
<VCol cols="12">
<AppTextField
v-model="addressline1"
label="Address Line 1*"
:rules="[requiredValidator]"
placeholder="45, Rocker Terrace"
/>
</VCol>
<VCol cols="12">
<AppTextField
v-model="addressline2"
placeholder="Empire Heights,"
:rules="[requiredValidator]"
label="Address Line 2*"
/>
</VCol>
<VCol cols="12">
<AppTextField
v-model="town"
label="Town*"
:rules="[requiredValidator]"
placeholder="New York"
/>
</VCol>
<VCol cols="12">
<AppTextField
v-model="state"
placeholder="Texas"
:rules="[requiredValidator]"
label="State/Province*"
/>
</VCol>
<VCol cols="12">
<AppTextField
v-model="postCode"
label="Post Code*"
type="number"
:rules="[requiredValidator]"
placeholder="982347"
/>
</VCol>
<VCol cols="12">
<AppSelect
v-model="country"
placeholder="United States"
:rules="[requiredValidator]"
label="Country"
:items="['United States', 'United Kingdom', 'Canada']"
/>
</VCol>
<VCol cols="12">
<div class="d-flex justify-space-between">
<div class="d-flex flex-column gap-y-1">
<h6 class="text-h6">
Use as a billing address?
</h6>
<div class="text-body-2">
Please check budget for more info
</div>
</div>
<VSwitch v-model="isBillingAddress" />
</div>
</VCol>
<VCol cols="12">
<div class="d-flex gap-4 justify-start pb-10">
<VBtn
type="submit"
color="primary"
>
Add
</VBtn>
<VBtn
color="error"
variant="tonal"
@click="resetForm"
>
Discard
</VBtn>
</div>
</VCol>
</VRow>
</VForm>
</VCardText>
</PerfectScrollbar>
</VCard>
</VNavigationDrawer>
</template>
<style lang="scss">
.v-navigation-drawer__content {
overflow-y: hidden !important;
}
</style>

235
resources/js/views/apps/ecommerce/customer/view/CustomerBioPanel.vue Normal file
View File

@@ -0,0 +1,235 @@
<script setup>
import rocketImg from '@images/eCommerce/rocket.png'
const props = defineProps({
customerData: {
type: null,
required: true,
},
})
const isUserInfoEditDialogVisible = ref(false)
const isUpgradePlanDialogVisible = ref(false)
const customerData = {
id: props.customerData.id,
fullName: props.customerData.customer,
firstName: props.customerData.customer.split(' ')[0],
lastName: props.customerData.customer.split(' ')[1],
company: '',
role: '',
username: props.customerData.customer,
country: props.customerData.country,
contact: props.customerData.contact,
email: props.customerData.email,
currentPlan: '',
status: props.customerData.status,
avatar: '',
taskDone: null,
projectDone: null,
taxId: 'Tax-8894',
language: 'English',
}
</script>
<template>
<VRow>
<!-- SECTION Customer Details -->
<VCol cols="12">
<VCard v-if="props.customerData">
<VCardText class="text-center pt-12">
<!-- 👉 Avatar -->
<VAvatar
rounded
:size="120"
:color="!props.customerData.customer ? 'primary' : undefined"
:variant="!props.customerData.avatar ? 'tonal' : undefined"
>
<VImg
v-if="props.customerData.avatar"
:src="props.customerData.avatar"
/>
<span
v-else
class="text-5xl font-weight-medium"
>
{{ avatarText(props.customerData.customer) }}
</span>
</VAvatar>
<!-- 👉 Customer fullName -->
<h5 class="text-h5 mt-4">
{{ props.customerData.customer }}
</h5>
<div class="text-body-1">
Customer ID #{{ props.customerData.customerId }}
</div>
<div class="d-flex justify-space-evenly gap-x-5 mt-6">
<div class="d-flex align-center">
<VAvatar
variant="tonal"
color="primary"
rounded
class="me-4"
>
<VIcon icon="tabler-shopping-cart" />
</VAvatar>
<div class="d-flex flex-column align-start">
<h5 class="text-h5">
{{ props.customerData.order }}
</h5>
<div class="text-body-1">
Order
</div>
</div>
</div>
<div class="d-flex align-center">
<VAvatar
variant="tonal"
color="primary"
rounded
class="me-3"
>
<VIcon icon="tabler-currency-dollar" />
</VAvatar>
<div class="d-flex flex-column align-start">
<h5 class="text-h5">
${{ props.customerData.totalSpent }}
</h5>
<div class="text-body-1">
Spent
</div>
</div>
</div>
</div>
</VCardText>
<!-- 👉 Customer Details -->
<VCardText>
<h5 class="text-h5">
Details
</h5>
<VDivider class="my-4" />
<VList class="card-list mt-2">
<VListItem>
<h6 class="text-h6">
Username:
<span class="text-body-1 d-inline-block">
{{ props.customerData.customer }}
</span>
</h6>
</VListItem>
<VListItem>
<h6 class="text-h6">
Billing Email:
<span class="text-body-1 d-inline-block">
{{ props.customerData.email }}
</span>
</h6>
</VListItem>
<VListItem>
<div class="d-flex gap-x-2 align-center">
<h6 class="text-h6">
Status:
</h6>
<VChip
label
color="success"
size="small"
>
{{ props.customerData.status }}
</VChip>
</div>
</VListItem>
<VListItem>
<h6 class="text-h6">
Contact:
<span class="text-body-1 d-inline-block">
{{ props.customerData.contact }}
</span>
</h6>
</VListItem>
<VListItem>
<h6 class="text-h6">
Country:
<span class="text-body-1 d-inline-block">
{{ props.customerData.country }}
</span>
</h6>
</VListItem>
</VList>
</VCardText>
<VCardText class="text-center">
<VBtn
block
@click="isUserInfoEditDialogVisible = !isUserInfoEditDialogVisible"
>
Edit Details
</VBtn>
</VCardText>
</VCard>
</VCol>
<!-- !SECTION -->
<!-- SECTION Upgrade to Premium -->
<VCol cols="12">
<VCard
flat
class="current-plan"
>
<VCardText>
<div class="d-flex align-center">
<div>
<h5 class="text-h5 text-white mb-4">
Upgrade to premium
</h5>
<p class="mb-6 text-wrap">
Upgrade customer to premium membership to access pro features.
</p>
</div>
<div>
<VImg
:src="rocketImg"
height="108"
width="108"
/>
</div>
</div>
<VBtn
color="#fff"
class="text-primary"
block
@click="isUpgradePlanDialogVisible = !isUpgradePlanDialogVisible"
>
Upgrade to Premium
</VBtn>
</VCardText>
</VCard>
</VCol>
<!-- !SECTION -->
</VRow>
<UserInfoEditDialog
v-model:is-dialog-visible="isUserInfoEditDialogVisible"
:user-data="customerData"
/>
<UserUpgradePlanDialog v-model:is-dialog-visible="isUpgradePlanDialogVisible" />
</template>
<style lang="scss" scoped>
.card-list {
--v-card-list-gap: 0.5rem;
}
.current-plan {
background: linear-gradient(45deg, rgb(var(--v-theme-primary)) 0%, #9e95f5 100%);
color: #fff;
}
</style>

161
resources/js/views/apps/ecommerce/customer/view/CustomerOrderTable.vue Normal file
View File

@@ -0,0 +1,161 @@
<script setup>
const searchQuery = ref('')
// Data table options
const itemsPerPage = ref(10)
const page = ref(1)
const sortBy = ref()
const orderBy = ref()
const updateOptions = options => {
sortBy.value = options.sortBy[0]?.key
orderBy.value = options.sortBy[0]?.order
}
const headers = [
{
title: 'Order',
key: 'order',
},
{
title: 'Date',
key: 'date',
},
{
title: 'Status',
key: 'status',
},
{
title: 'Spent',
key: 'spent',
},
{
title: 'Actions',
key: 'actions',
sortable: false,
},
]
const resolveStatus = status => {
if (status === 'Delivered')
return { color: 'success' }
if (status === 'Out for Delivery')
return { color: 'primary' }
if (status === 'Ready to Pickup')
return { color: 'info' }
if (status === 'Dispatched')
return { 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 || 0)
const deleteOrder = async id => {
await $api(`/apps/ecommerce/orders/${ id }`, { method: 'DELETE' })
fetchOrders()
}
</script>
<template>
<VCard>
<VCardText>
<div class="d-flex justify-space-between flex-wrap align-center gap-4">
<h5 class="text-h5">
Orders placed
</h5>
<div>
<AppTextField
v-model="searchQuery"
placeholder="Search Order"
style=" max-inline-size: 200px; min-inline-size: 200px;"
/>
</div>
</div>
</VCardText>
<VDivider />
<VDataTableServer
v-model:items-per-page="itemsPerPage"
v-model:page="page"
:headers="headers"
:items="orders"
item-value="id"
:items-length="totalOrder"
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>
<!-- Status -->
<template #item.status="{ item }">
<VChip
label
:color="resolveStatus(item.status)?.color"
size="small"
>
{{ item.status }}
</VChip>
</template>
<!-- Spent -->
<template #item.spent="{ item }">
${{ item.spent }}
</template>
<!-- Actions -->
<template #item.actions="{ item }">
<IconBtn>
<VIcon icon="tabler-dots-vertical" />
<VMenu activator="parent">
<VList>
<VListItem
value="view"
:to="{ name: 'apps-ecommerce-order-details-id', params: { id: item.order } }"
>
View
</VListItem>
<VListItem
value="delete"
@click="deleteOrder(item.id)"
>
Delete
</VListItem>
</VList>
</VMenu>
</IconBtn>
</template>
<!-- pagination -->
<template #bottom>
<TablePagination
v-model:page="page"
:items-per-page="itemsPerPage"
:total-items="totalOrder"
/>
</template>
</VDataTableServer>
</VCard>
</template>

396
resources/js/views/apps/ecommerce/customer/view/CustomerTabAddressAndBilling.vue Normal file
View File

@@ -0,0 +1,396 @@
<script setup>
import usFlag from '@images/icons/countries/us.png'
import americanExpress from '@images/icons/payments/img/american-express.png'
import mastercard from '@images/icons/payments/img/mastercard.png'
import visa from '@images/icons/payments/img/visa-light.png'
const currentCardDetails = {
number: '1234567890123456',
name: 'John Doe',
expiry: '12/2028',
cvv: '123',
isPrimary: false,
type: '',
}
const editBillingData = {
firstName: 'Gertrude',
lastName: 'Jennings',
selectedCountry: 'USA',
addressLine1: '100 Water Plant Avenue',
addressLine2: 'Building 1303 Wake Island',
landmark: 'Near Wake Island',
contact: '+1(609) 933-44-22',
country: 'USA',
state: 'Queensland',
zipCode: 403114,
city: 'Brisbane',
}
const show = ref([
false,
true,
false,
])
const paymentShow = ref([
false,
true,
false,
])
const isEditAddressDialogVisible = ref(false)
const isCardAddDialogVisible = ref(false)
const isNewEditAddressDialogVisible = ref(false)
const isNewCardAddDialogVisible = ref(false)
const addressData = [
{
title: 'Home',
subtitle: '23 Shatinon Mekalan',
owner: 'Violet Mendoza',
defaultAddress: true,
address: ` 23 Shatinon Mekalan,
<br>
Melbourne, VIC 3000,
<br>
LondonUK`,
},
{
title: 'Office',
subtitle: '45 Rocker Terrace',
owner: 'Violet Mendoza',
defaultAddress: false,
address: ` 45 Rocker Terrace,
<br>
Latheronwheel,
<br>
KW5 8NW, London,
<br>
UK`,
},
{
title: 'Family',
subtitle: '512 Water Plant',
owner: 'Violet Mendoza',
defaultAddress: false,
address: ` 512 Water Plant,
<br>
Melbourne, VIC 3000,
<br>
LondonUK`,
},
]
const paymentData = [
{
title: 'Mastercard',
subtitle: 'Expires Apr 2028',
isDefaultMethod: false,
image: mastercard,
},
{
title: 'American Express',
subtitle: 'Expires Apr 2028',
isDefaultMethod: false,
image: americanExpress,
},
{
title: 'Visa',
subtitle: '45 Roker Terrace',
isDefaultMethod: true,
image: visa,
},
]
</script>
<template>
<!-- eslint-disable vue/no-v-html -->
<!-- 👉 Address Book -->
<VCard class="mb-6">
<VCardText>
<div class="d-flex justify-space-between mb-6 flex-wrap align-center gap-y-4 gap-x-6">
<h5 class="text-h5">
Address Book
</h5>
<VBtn
variant="tonal"
size="small"
@click="isNewEditAddressDialogVisible = !isNewEditAddressDialogVisible"
>
Add new Address
</VBtn>
</div>
<template
v-for="(address, index) in addressData"
:key="index"
>
<div>
<div class="d-flex justify-space-between py-3 gap-y-2 flex-wrap align-center">
<div class="d-flex align-center gap-x-4">
<VIcon
:icon="show[index] ? 'tabler-chevron-down' : 'tabler-chevron-right'"
class="flip-in-rtl text-high-emphasis"
size="24"
@click="show[index] = !show[index]"
/>
<div>
<div class="d-flex align-center gap-x-2 mb-1">
<h6 class="text-h6">
{{ address.title }}
</h6>
<VChip
v-if="address.defaultAddress"
color="success"
label
size="small"
>
Default Address
</VChip>
</div>
<div class="text-body-1">
{{ address.subtitle }}
</div>
</div>
</div>
<div class="ms-5">
<IconBtn @click="isEditAddressDialogVisible = !isEditAddressDialogVisible">
<VIcon
icon="tabler-edit"
class="flip-in-rtl"
/>
</IconBtn>
<IconBtn>
<VIcon
icon="tabler-trash"
class="flip-in-rtl"
/>
</IconBtn>
<IconBtn>
<VIcon
icon="tabler-dots-vertical"
class="flip-in-rtl"
/>
</IconBtn>
</div>
</div>
<VExpandTransition>
<div v-show="show[index]">
<div class="px-10 pb-3">
<h6 class="mb-1 text-h6">
{{ address.owner }}
</h6>
<div
class="text-body-1"
v-html="address.address"
/>
</div>
</div>
</VExpandTransition>
<VDivider v-if="index !== addressData.length - 1" />
</div>
</template>
</VCardText>
</VCard>
<!-- 👉 Payment Methods -->
<VCard>
<VCardText>
<div class="d-flex justify-space-between mb-6 flex-wrap align-center gap-y-4 gap-x-6">
<h5 class="text-h5">
Payment Methods
</h5>
<VBtn
variant="tonal"
size="small"
@click="isNewCardAddDialogVisible = !isNewCardAddDialogVisible"
>
Add Payment Methods
</VBtn>
</div>
<template
v-for="(payment, index) in paymentData"
:key="index"
>
<div>
<div class="d-flex justify-space-between py-3 gap-y-2 flex-wrap align-center">
<div class="d-flex align-center gap-x-4">
<VIcon
:icon="paymentShow[index] ? 'tabler-chevron-down' : 'tabler-chevron-right'"
size="24"
class="flip-in-rtl text-high-emphasis"
@click="paymentShow[index] = !paymentShow[index]"
/>
<VImg
:src="payment.image"
height="30"
width="50"
/>
<div>
<div class="d-flex gap-x-2 mb-1">
<h6 class="text-h6">
{{ payment.title }}
</h6>
<VChip
v-if="payment.isDefaultMethod"
color="success"
label
size="small"
>
Default Method
</VChip>
</div>
<div class="text-body-1">
{{ payment.subtitle }}
</div>
</div>
</div>
<div class="ms-5">
<IconBtn @click="isCardAddDialogVisible = !isCardAddDialogVisible">
<VIcon
icon="tabler-edit"
class="flip-in-rtl"
/>
</IconBtn>
<IconBtn>
<VIcon
icon="tabler-trash"
class="flip-in-rtl"
/>
</IconBtn>
<IconBtn>
<VIcon
icon="tabler-dots-vertical"
class="flip-in-rtl"
/>
</IconBtn>
</div>
</div>
<VExpandTransition>
<div v-show="paymentShow[index]">
<div class="px-10 pb-3">
<VRow>
<VCol
cols="12"
md="6"
>
<VTable>
<tr>
<td>Name </td>
<td class="font-weight-medium text-high-emphasis">
Violet Mendoza
</td>
</tr>
<tr>
<td>Number </td>
<td class="font-weight-medium text-high-emphasis">
**** 4487
</td>
</tr>
<tr>
<td>Expires </td>
<td class="font-weight-medium text-high-emphasis">
08/2028
</td>
</tr>
<tr>
<td>Type </td>
<td class="font-weight-medium text-high-emphasis">
Master Card
</td>
</tr>
<tr>
<td>Issuer </td>
<td class="font-weight-medium text-high-emphasis">
VICBANK
</td>
</tr>
<tr>
<td>ID </td>
<td class="font-weight-medium text-high-emphasis">
DH73DJ8
</td>
</tr>
</VTable>
</VCol>
<VCol
cols="12"
md="6"
>
<VTable>
<tr>
<td>Billing </td>
<td class="font-weight-medium text-high-emphasis">
United Kingdom
</td>
</tr>
<tr>
<td>Number</td>
<td class="font-weight-medium text-high-emphasis">
+7634 983 637
</td>
</tr>
<tr>
<td>Email</td>
<td class="font-weight-medium text-high-emphasis">
vafgot@vultukir.org
</td>
</tr>
<tr>
<td>Origin</td>
<td class="d-flex">
<div class="me-2 font-weight-medium text-high-emphasis">
United States
</div>
<img
:src="usFlag"
height="20"
width="20"
>
</td>
</tr>
<tr>
<td>CVC Check</td>
<td class="d-flex">
<div class="me-2 font-weight-medium text-high-emphasis">
Passed
</div>
<VAvatar
variant="tonal"
color="success"
size="20"
inline
>
<VIcon
icon="tabler-check"
color="success"
size="12"
/>
</VAvatar>
</td>
</tr>
</VTable>
</VCol>
</VRow>
</div>
</div>
</VExpandTransition>
<VDivider v-if="index !== paymentData.length - 1" />
</div>
</template>
</VCardText>
</VCard>
<AddEditAddressDialog
v-model:is-dialog-visible="isEditAddressDialogVisible"
:billing-address="editBillingData"
/>
<AddEditAddressDialog v-model:is-dialog-visible="isNewEditAddressDialogVisible" />
<CardAddEditDialog
v-model:is-dialog-visible="isCardAddDialogVisible"
:card-details="currentCardDetails"
/>
<CardAddEditDialog v-model:is-dialog-visible="isNewCardAddDialogVisible" />
</template>

93
resources/js/views/apps/ecommerce/customer/view/CustomerTabNotification.vue Normal file
View File

@@ -0,0 +1,93 @@
<script setup>
const notifications = ref([
{
type: 'New for you',
email: true,
browser: true,
app: true,
},
{
type: 'Account activity',
email: true,
browser: true,
app: true,
},
{
type: 'A new browser used to sign in',
email: true,
browser: true,
app: false,
},
{
type: 'A new device is linked',
email: true,
browser: false,
app: false,
},
])
</script>
<template>
<VCard class="user-tab-notification">
<VCardItem>
<VCardTitle class="mb-1">
Notifications
</VCardTitle>
<VCardSubtitle class="text-body-1 text-wrap">
You will receive notification for the below selected items.
</VCardSubtitle>
</VCardItem>
<VCardText class="px-0">
<VDivider />
<VTable class="text-no-wrap">
<thead>
<tr>
<th scope="col">
TYPE
</th>
<th scope="col">
EMAIL
</th>
<th scope="col">
BROWSER
</th>
<th scope="col">
APP
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(notification, index) in notifications"
:key="notification.type"
:class="index % 2 === 0 ? 'table-colored-raw' : ''"
>
<td class="text-high-emphasis">
{{ notification.type }}
</td>
<td>
<VCheckbox v-model="notification.email" />
</td>
<td>
<VCheckbox v-model="notification.browser" />
</td>
<td>
<VCheckbox v-model="notification.app" />
</td>
</tr>
</tbody>
</VTable>
<VDivider />
</VCardText>
<VCardText class="d-flex flex-wrap gap-4">
<VBtn>Save changes</VBtn>
<VBtn
color="secondary"
variant="tonal"
>
Discard
</VBtn>
</VCardText>
</VCard>
</template>

127
resources/js/views/apps/ecommerce/customer/view/CustomerTabOverview.vue Normal file
View File

@@ -0,0 +1,127 @@
<script setup>
import CustomerOrderTable from './CustomerOrderTable.vue'
</script>
<template>
<VRow>
<VCol
cols="12"
md="6"
>
<VCard>
<VCardText class="d-flex gap-y-2 flex-column">
<VAvatar
variant="tonal"
color="primary"
icon="tabler-currency-dollar"
rounded
/>
<h5 class="text-h5">
Account Balance
</h5>
<div>
<h5 class="text-h5 text-primary mb-1">
$7480
<span class="text-body-1 d-inline-block">Credit Left</span>
</h5>
<p class="mb-0">
Account balance for next purchase
</p>
</div>
</VCardText>
</VCard>
</VCol>
<VCol
cols="12"
md="6"
>
<VCard>
<VCardText class="d-flex gap-y-2 flex-column">
<VAvatar
variant="tonal"
color="success"
icon="tabler-gift"
rounded
/>
<h5 class="text-h5">
Loyalty Program
</h5>
<div>
<VChip
color="success"
class="mb-2"
label
size="small"
>
Platinum member
</VChip>
<p class="mb-0">
3000 points to next tier
</p>
</div>
</VCardText>
</VCard>
</VCol>
<VCol
cols="12"
md="6"
>
<VCard>
<VCardText class="d-flex gap-y-2 flex-column">
<VAvatar
variant="tonal"
color="warning"
icon="tabler-star"
rounded
/>
<h5 class="text-h5">
Wishlist
</h5>
<div>
<h5 class="text-h5 text-warning mb-1">
15
<span class="text-body-1 d-inline-block">Items in wishlist</span>
</h5>
<p class="mb-0">
Receive notification when items go on sale
</p>
</div>
</VCardText>
</VCard>
</VCol>
<VCol
cols="12"
md="6"
>
<VCard>
<VCardText class="d-flex gap-y-2 flex-column">
<VAvatar
variant="tonal"
color="info"
icon="tabler-discount"
rounded
/>
<h5 class="text-h5">
Coupons
</h5>
<div>
<h5 class="text-h5 text-info mb-1">
21
<span class="text-body-1 d-inline-block">Coupons you win</span>
</h5>
<p class="mb-0">
Use coupon on next purchase
</p>
</div>
</VCardText>
</VCard>
</VCol>
<VCol>
<CustomerOrderTable />
</VCol>
</VRow>
</template>

203
resources/js/views/apps/ecommerce/customer/view/CustomerTabSecurity.vue Normal file
View File

@@ -0,0 +1,203 @@
<script setup>
const isNewPasswordVisible = ref(false)
const isConfirmPasswordVisible = ref(false)
const smsVerificationNumber = ref('+1(968) 819-2547')
const isTwoFactorDialogOpen = ref(false)
const recentDeviceHeader = [
{
title: 'BROWSER',
key: 'browser',
},
{
title: 'DEVICE',
key: 'device',
},
{
title: 'LOCATION',
key: 'location',
},
{
title: 'RECENT ACTIVITY',
key: 'activity',
},
]
const recentDevices = [
{
browser: 'Chrome on Windows',
logo: 'tabler-brand-windows',
color: 'info',
device: 'HP Specter 360',
location: 'Switzerland',
activity: '10, July 2021 20:07',
},
{
browser: 'Chrome on iPhone',
logo: 'tabler-device-mobile',
color: 'error',
device: 'iPhone 12x',
location: 'Australia',
activity: '13, July 2021 10:10',
},
{
browser: 'Chrome on Android',
logo: 'tabler-brand-android',
color: 'success',
device: 'OnePlus 9 Pro',
location: 'Dubai',
activity: '4, July 2021 15:15',
},
{
browser: 'Chrome on macOS',
logo: 'tabler-brand-apple',
color: 'secondary',
device: 'Apple iMac',
location: 'India',
activity: '20, July 2021 21:01',
},
{
browser: 'Chrome on Windows',
logo: 'tabler-brand-windows',
color: 'info',
device: 'HP Specter 360',
location: 'Switzerland',
activity: '10, July 2021 20:07',
},
{
browser: 'Chrome on Android',
logo: 'tabler-brand-android',
color: 'success',
device: 'OnePlus 9 Pro',
location: 'Dubai',
activity: '4, July 2021 15:15',
},
]
</script>
<template>
<VRow>
<VCol cols="12">
<!-- 👉 Change password -->
<VCard title="Change Password">
<VCardText>
<VAlert
variant="tonal"
color="warning"
title="Ensure that these requirements are met"
text="Minimum 8 characters long, uppercase & symbol"
class="mb-4"
closable
/>
<VForm @submit.prevent="() => {}">
<VRow>
<VCol
cols="12"
md="6"
>
<AppTextField
label="New Password"
placeholder="············"
:type="isNewPasswordVisible ? 'text' : 'password'"
:append-inner-icon="isNewPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'"
@click:append-inner="isNewPasswordVisible = !isNewPasswordVisible"
/>
</VCol>
<VCol
cols="12"
md="6"
>
<AppTextField
label="Confirm Password"
autocomplete="confirm-password"
placeholder="············"
:type="isConfirmPasswordVisible ? 'text' : 'password'"
:append-inner-icon="isConfirmPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'"
@click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
/>
</VCol>
<VCol cols="12">
<VBtn type="submit">
Change Password
</VBtn>
</VCol>
</VRow>
</VForm>
</VCardText>
</VCard>
</VCol>
<VCol cols="12">
<!-- 👉 Two step verification -->
<VCard
title="Two-steps verification"
subtitle="Keep your account secure with authentication step."
>
<VCardText>
<div class="text-h6 mb-1">
SMS
</div>
<AppTextField placeholder="+1(968) 819-2547">
<template #append>
<IconBtn>
<VIcon
icon="tabler-edit"
size="22"
/>
</IconBtn>
<IconBtn>
<VIcon
icon="tabler-user-plus"
size="22"
/>
</IconBtn>
</template>
</AppTextField>
<p class="mb-0 mt-4">
Two-factor authentication adds an additional layer of security to your account by requiring more than just a password to log in. <a
href="javascript:void(0)"
class="text-decoration-none"
>Learn more</a>.
</p>
</VCardText>
</VCard>
</VCol>
<VCol cols="12">
<!-- 👉 Recent devices -->
<VCard title="Recent devices">
<VDivider />
<VDataTable
:items="recentDevices"
:headers="recentDeviceHeader"
hide-default-footer
class="text-no-wrap"
>
<template #item.browser="{ item }">
<div class="d-flex align-center gap-x-4">
<VIcon
:icon="item.logo"
:color="item.color"
size="22"
/>
<div class="text-body-1 text-high-emphasis">
{{ item.browser }}
</div>
</div>
</template>
<!-- TODO Refactor this after vuetify provides proper solution for removing default footer -->
<template #bottom />
</VDataTable>
</VCard>
</VCol>
</VRow>
<!-- 👉 Enable One Time Password Dialog -->
<TwoFactorAuthDialog
v-model:is-dialog-visible="isTwoFactorDialogOpen"
:sms-code="smsVerificationNumber"
/>
</template>

141
resources/js/views/apps/ecommerce/settings/SettingsCheckout.vue Normal file
View File

@@ -0,0 +1,141 @@
<script setup>
const contactMethod = ref('Phone number')
const fullName = ref('Only require last name')
const companyName = ref('Don\'t include')
const addressLine = ref('Optional')
const shippingAddress = ref('Optional')
</script>
<template>
<VCard
title="Customer contact method"
subtitle="Select what contact method customers use to check out."
class="mb-6"
>
<VCardText>
<VRadioGroup
v-model="contactMethod"
class="mb-4"
>
<VRadio
label="Phone number"
value="Phone number"
/>
<VRadio
label="Email"
value="Email"
/>
</VRadioGroup>
<VAlert
type="info"
variant="tonal"
>
<VAlertTitle class="mb-0">
To send SMS updates, you need to install an SMS App.
</VAlertTitle>
</VAlert>
</VCardText>
</VCard>
<VCard
title="Customer information"
class="mb-6"
>
<VCardText class="customer-info-card">
<VRadioGroup
v-model="fullName"
label="Full name"
class="mb-4"
>
<VRadio
value="Only require last name"
label="Only require last name"
/>
<VRadio
value="Require first and last name"
label="Require first and last name"
/>
</VRadioGroup>
<VRadioGroup
v-model="companyName"
label="Company name"
class="mb-4"
>
<VRadio
value="Don't include"
label="Don't include"
/>
<VRadio
value="Optional"
label="Optional"
/>
<VRadio
value="Required"
label="Required"
/>
</VRadioGroup>
<VRadioGroup
v-model="addressLine"
label="Address line 2 (apartment, unit, etc.)"
class="mb-4"
>
<VRadio
value="Don't include"
label="Don't include"
/>
<VRadio
value="Optional"
label="Optional"
/>
<VRadio
value="Required"
label="Required"
/>
</VRadioGroup>
<VRadioGroup
v-model="shippingAddress"
label="Shipping address phone number"
class="mb-4"
>
<VRadio
value="Don't include"
label="Don't include"
/>
<VRadio
value="Optional"
label="Optional"
/>
<VRadio
value="Required"
label="Required"
/>
</VRadioGroup>
</VCardText>
</VCard>
<div class="d-flex justify-end gap-x-4">
<VBtn
variant="tonal"
color="secondary"
>
Discard
</VBtn>
<VBtn>Save Changes</VBtn>
</div>
</template>
<style lang="scss" scoped>
.customer-info-card {
.v-radio-group {
.v-input__control {
.v-label {
margin-inline-start: 0;
}
}
}
}
</style>

119
resources/js/views/apps/ecommerce/settings/SettingsLocations.vue Normal file
View File

@@ -0,0 +1,119 @@
<script setup>
const isFullfilOnline = ref(true)
</script>
<template>
<div>
<VCard
title="Location Name"
class="mb-6"
>
<VCardText>
<AppTextField
label="Location Name"
placeholder="Empire Hub"
/>
<div class="my-4">
<VCheckbox
v-model="isFullfilOnline"
label="Fulfil online orders from this location"
/>
</div>
<VAlert
type="info"
variant="tonal"
>
<VAlertTitle class="mb-0">
This is your default location. To change whether you fulfill online orders from this location, select another default location first.
</VAlertTitle>
</VAlert>
</VCardText>
</VCard>
<VCard title="Address">
<VCardText>
<VRow>
<VCol cols="12">
<AppSelect
label="Country/religion"
placeholder="Select Country"
:items="['United States', 'UK', 'Canada']"
model-value="United States"
/>
</VCol>
<VCol
cols="12"
md="4"
>
<AppTextField
label="Address"
placeholder="123 , New Street"
/>
</VCol>
<VCol
cols="12"
md="4"
>
<AppTextField
label="Apartment, suite, etc."
placeholder="Empire Heights"
/>
</VCol>
<VCol
cols="12"
md="4"
>
<AppTextField
label="Phone"
placeholder="+1 (234) 456-7890"
/>
</VCol>
<VCol
cols="12"
md="4"
>
<AppTextField
label="City"
placeholder="New York"
/>
</VCol>
<VCol
cols="12"
md="4"
>
<AppTextField
label="State"
placeholder="NY"
/>
</VCol>
<VCol
cols="12"
md="4"
>
<AppTextField
label="PIN code"
type="number"
placeholder="123897"
/>
</VCol>
</VRow>
</VCardText>
</VCard>
<div class="d-flex justify-end gap-x-4 mt-6">
<VBtn
variant="tonal"
color="secondary"
>
Discard
</VBtn>
<VBtn>Save Changes</VBtn>
</div>
</div>
</template>

201
resources/js/views/apps/ecommerce/settings/SettingsNotifications.vue Normal file
View File

@@ -0,0 +1,201 @@
<script setup>
const customerNotifications = ref([
{
type: 'New customer sign up',
email: true,
app: true,
},
{
type: 'Customer account password reset',
email: true,
app: true,
},
{
type: 'Customer account invite',
email: false,
app: false,
},
])
const shippingNotifications = ref([
{
type: 'Picked up',
email: true,
app: true,
},
{
type: 'Shipping update ',
email: true,
app: false,
},
{
type: 'Delivered',
email: false,
app: true,
},
])
const ordersNotification = ref([
{
type: 'Order purchase',
email: true,
app: true,
},
{
type: 'Order cancelled',
email: true,
app: false,
},
{
type: 'Order refund request',
email: false,
app: true,
},
{
type: 'Order confirmation',
email: true,
app: false,
},
{
type: 'Payment error',
email: true,
app: false,
},
])
</script>
<template>
<VCard class="mb-4">
<VCardText>
<h5 class="text-h5 mb-2">
Customer
</h5>
<VTable class="text-no-wrap mb-6 border rounded">
<thead>
<tr>
<th scope="col">
TYPE
</th>
<th scope="col">
EMAIL
</th>
<th scope="col">
APP
</th>
</tr>
</thead>
<tbody>
<tr
v-for="notification in customerNotifications"
:key="notification.type"
>
<td
width="400px"
class="text-high-emphasis"
>
{{ notification.type }}
</td>
<td>
<VCheckbox v-model="notification.email" />
</td>
<td>
<VCheckbox v-model="notification.app" />
</td>
</tr>
</tbody>
</VTable>
<h5 class="text-h5 mb-2">
Orders
</h5>
<VTable class="text-no-wrap mb-6 border rounded">
<thead>
<tr>
<th scope="col">
TYPE
</th>
<th scope="col">
EMAIL
</th>
<th scope="col">
APP
</th>
</tr>
</thead>
<tbody>
<tr
v-for="notification in ordersNotification"
:key="notification.type"
>
<td
width="400px"
class="text-high-emphasis"
>
{{ notification.type }}
</td>
<td>
<VCheckbox v-model="notification.email" />
</td>
<td>
<VCheckbox v-model="notification.app" />
</td>
</tr>
</tbody>
</VTable>
<h5 class="text-h5 mb-2">
Shipping
</h5>
<VTable class="text-no-wrap mb-6 border rounded">
<thead>
<tr>
<th scope="col">
TYPE
</th>
<th scope="col">
EMAIL
</th>
<th scope="col">
APP
</th>
</tr>
</thead>
<tbody>
<tr
v-for="notification in shippingNotifications"
:key="notification.type"
>
<td
width="400px"
class="text-high-emphasis"
>
{{ notification.type }}
</td>
<td>
<VCheckbox v-model="notification.email" />
</td>
<td>
<VCheckbox v-model="notification.app" />
</td>
</tr>
</tbody>
</VTable>
</VCardText>
</VCard>
<div class="d-flex justify-end gap-x-4">
<VBtn
variant="tonal"
color="secondary"
>
Discard
</VBtn>
<VBtn>Save Changes</VBtn>
</div>
</template>

158
resources/js/views/apps/ecommerce/settings/SettingsPayment.vue Normal file
View File

@@ -0,0 +1,158 @@
<script setup>
import { ref } from 'vue'
import paypal from '@images/cards/paypal-primary.png'
const isAddPaymentMethodsDialogVisible = ref(false)
const isPaymentProvidersDialogVisible = ref(false)
</script>
<template>
<div>
<!-- 👉 Payment Providers -->
<VCard
class="mb-6"
title="Payment providers"
>
<VCardText>
<div class="text-body-1 mb-5">
Providers that enable you to accept payment methods at a rate set by the third-party. An additional fee will apply to new orders once you select a plan.
</div>
<VBtn
variant="tonal"
@click="isPaymentProvidersDialogVisible = !isPaymentProvidersDialogVisible"
>
Choose a provider
</VBtn>
</VCardText>
</VCard>
<!-- 👉 Supported Payment Methods -->
<VCard
title="Supported payment methods"
subtitle="Payment methods that are available with one of Vuexy's approved payment providers."
class="mb-6"
>
<VCardText>
<h6 class="text-h6 mb-5">
Default
</h6>
<div class="my-class mb-5">
<div class="d-flex justify-space-between align-center mb-6">
<div class="rounded paypal-logo">
<img
:src="paypal"
alt="Pixinvent"
style="padding-block: 6px;padding-inline: 18px;"
>
</div>
<VBtn variant="text">
Activate PayPal
</VBtn>
</div>
<VDivider />
<div class="d-flex justify-space-between flex-wrap mt-6 gap-4">
<div>
<div
class="text-body-2 mb-2"
style="min-inline-size: 220px;"
>
Provider
</div>
<h6 class="text-h6">
PayPal
</h6>
</div>
<div>
<div
class="text-body-2 mb-2"
style="min-inline-size: 220px;"
>
Status
</div>
<VChip
color="warning"
size="small"
label
>
Inactive
</VChip>
</div>
<div>
<div
class="text-body-2 mb-2"
style="min-inline-size: 220px;"
>
Transaction Fee
</div>
<h6 class="text-h6">
2.99%
</h6>
</div>
</div>
</div>
<VBtn
variant="tonal"
@click="isAddPaymentMethodsDialogVisible = !isAddPaymentMethodsDialogVisible"
>
Add Payment Methods
</VBtn>
</VCardText>
</VCard>
<!-- 👉 Manual Payment Methods -->
<VCard
title="Manual payment methods"
class="mb-6"
>
<VCardText>
<p>Payments that are made outside your online store. When a customer selects a manual payment method such as cash on delivery, you'll need to approve their order before it can be fulfilled.</p>
<VBtn
variant="tonal"
:append-icon="$vuetify.display.smAndUp ? 'tabler-chevron-down' : ''"
>
Add Manual Payment Methods
<VMenu activator="parent">
<VList>
<VListItem
v-for="(item, index) in ['Create custom payment method', 'Bank Deposit', 'Money Order', 'Cash on Delivery(COD)']"
:key="index"
:value="index"
>
<VListItemTitle>{{ item }}</VListItemTitle>
</VListItem>
</VList>
</VMenu>
</VBtn>
</VCardText>
</VCard>
<div class="d-flex justify-end gap-x-4">
<VBtn
color="secondary"
variant="tonal"
>
Discard
</VBtn>
<VBtn color="primary">
save changes
</VBtn>
</div>
</div>
<AddPaymentMethodDialog v-model:is-dialog-visible="isAddPaymentMethodsDialogVisible" />
<PaymentProvidersDialog v-model:is-dialog-visible="isPaymentProvidersDialogVisible" />
</template>
<style lang="scss" scoped>
.paypal-logo {
background-color: #fff;
block-size: 37px;
box-shadow: 0 2px 4px 0 rgba(165, 163, 174, 30%);
inline-size: 58px;
}
</style>

186
resources/js/views/apps/ecommerce/settings/SettingsShippingAndDelivery.vue Normal file
View File

@@ -0,0 +1,186 @@
<script setup>
import avatar1 from '@images/avatars/avatar-1.png'
import usflag from '@images/icons/countries/us.png'
const domesticTableData = [
{
rate: 'Weight',
condition: '5Kg-10Kg',
price: '$9',
},
{
rate: 'VAT',
condition: '12%',
price: '$25',
},
{
rate: 'Duty',
condition: '-',
price: '-',
},
]
const InternationalTableData = [
{
rate: 'Weight',
condition: '5Kg-10Kg',
price: '$9',
},
{
rate: 'VAT',
condition: '12%',
price: '$25',
},
{
rate: 'Duty',
condition: 'Japan',
price: '$49',
},
]
</script>
<template>
<VCard class="mb-6">
<VCardItem
title="Shipping Zone"
subtitle="Choose where you ship and how much you charge for shipping at checkout."
>
<template #append>
<VBtn variant="text">
Create Zone
</VBtn>
</template>
</VCardItem>
<VCardText>
<div class="mb-6">
<div class="d-flex flex-wrap align-center mb-4">
<VAvatar
:image="avatar1"
size="34"
class="me-2"
/>
<div>
<h6 class="text-h6">
Domestic
</h6>
<div class="text-body-2">
United state of America
</div>
</div>
<VSpacer />
<div>
<IconBtn color="secondary">
<VIcon icon="tabler-pencil" />
</IconBtn>
<IconBtn color="secondary">
<VIcon icon="tabler-trash" />
</IconBtn>
</div>
</div>
<VTable class="mb-4 border rounded">
<thead>
<tr>
<th>RATE NAME</th>
<th>CONDITION</th>
<th>PRICE</th>
<th>ACTIONS</th>
</tr>
</thead>
<tbody>
<tr
v-for="(data, index) in domesticTableData"
:key="index"
>
<td>{{ data.rate }}</td>
<td>{{ data.condition }}</td>
<td>{{ data.price }}</td>
<td>
<IconBtn>
<VIcon icon="tabler-dots-vertical" />
</IconBtn>
</td>
</tr>
</tbody>
</VTable>
<VBtn variant="tonal">
Add rate
</VBtn>
</div>
<div>
<div class="d-flex flex-wrap align-center mb-4">
<VAvatar
:image="usflag"
size="30"
class="me-2"
/>
<div>
<h6 class="text-h6">
International
</h6>
<div class="text-body-2">
United state of America
</div>
</div>
<VSpacer />
<div>
<IconBtn color="secondary">
<VIcon icon="tabler-pencil" />
</IconBtn>
<IconBtn color="secondary">
<VIcon icon="tabler-trash" />
</IconBtn>
</div>
</div>
<VTable class="mb-4 border rounded">
<thead>
<tr>
<th>RATE NAME</th>
<th>CONDITION</th>
<th>PRICE</th>
<th>ACTIONS</th>
</tr>
</thead>
<tbody>
<tr
v-for="(data, index) in InternationalTableData"
:key="index"
>
<td>{{ data.rate }}</td>
<td>{{ data.condition }}</td>
<td>{{ data.price }}</td>
<td>
<IconBtn>
<VIcon icon="tabler-dots-vertical" />
</IconBtn>
</td>
</tr>
</tbody>
</VTable>
<VBtn variant="tonal">
Add rate
</VBtn>
</div>
</VCardText>
</VCard>
<div class="d-flex justify-end gap-x-4">
<VBtn
variant="tonal"
color="secondary"
>
Discard
</VBtn>
<VBtn>Save Changes</VBtn>
</div>
</template>

244
resources/js/views/apps/ecommerce/settings/SettingsStoreDetails.vue Normal file
View File

@@ -0,0 +1,244 @@
<template>
<VCard
title="Profile"
class="mb-6"
>
<VCardText>
<VRow>
<VCol
cols="12"
md="6"
>
<AppTextField
label="Store name"
placeholder="Pixinvent"
/>
</VCol>
<VCol
cols="12"
md="6"
>
<AppTextField
label="Phone"
placeholder="+(123) 456-7890"
/>
</VCol>
<VCol
cols="12"
md="6"
>
<AppTextField
label="Store contact email"
placeholder="johndoe@email.com"
/>
</VCol>
<VCol
cols="12"
md="6"
>
<AppTextField
label="Sender email"
placeholder="johndoe@email.com"
/>
</VCol>
<VCol>
<VAlert
color="warning"
variant="tonal"
icon="tabler-bell"
>
<VAlertTitle class="mb-0">
Confirm that you have access to johndoe@gmail.com in sender email
settings.
</VAlertTitle>
</VAlert>
</VCol>
</VRow>
</VCardText>
</VCard>
<VCard
title="Billing Information"
class="mb-6"
>
<VCardText>
<VRow>
<VCol
cols="12"
md="6"
>
<AppTextField
label="Legal business name"
placeholder="Pixinvent"
/>
</VCol>
<VCol
cols="12"
md="6"
>
<AppSelect
label="Country/Region"
:items="['United States', 'Canada', 'UK']"
placeholder="Canada"
/>
</VCol>
<VCol
cols="12"
md="6"
>
<AppTextField
placeholder="126, New Street"
label="Address"
/>
</VCol>
<VCol
cols="12"
md="6"
>
<AppTextField
label="Apartment,suit, etc."
placeholder="Empire Heights"
/>
</VCol>
<VCol
cols="12"
md="4"
>
<AppTextField
label="City"
placeholder="New York"
/>
</VCol>
<VCol
cols="12"
md="4"
>
<AppTextField
label="State"
placeholder="NY"
/>
</VCol>
<VCol
cols="12"
md="4"
>
<AppTextField
label="PIN Code"
placeholder="111011"
/>
</VCol>
</VRow>
</VCardText>
</VCard>
<VCard class="mb-6">
<template #title>
<div class="v-card-title text-wrap">
Time zone and units of measurement
</div>
</template>
<template #subtitle>
<div class="text-wrap">
Used to calculate product prices, shipping weights, and order times.
</div>
</template>
<VCardText>
<VRow>
<VCol cols="12">
<AppSelect
label="Time zone"
:items="['(UTC-12:00) International Date Line West', '(UTC-11:00) Coordinated Universal Time-11', '(UTC-09:00) Alaska', '(UTC-08:00) Baja California']"
placeholder="(UTC-12:00) International Date Line West"
/>
</VCol>
<VCol
cols="12"
md="6"
>
<AppSelect
label="Unit system"
:items="['Metric System', 'Imperial', 'International System']"
placeholder="Metric System"
/>
</VCol>
<VCol
cols="12"
md="6"
>
<AppSelect
label="Default weight unit"
placeholder="Kilogram"
:items="['Kilogram', 'Pounds', 'Gram']"
/>
</VCol>
</VRow>
</VCardText>
</VCard>
<VCard
title="Store currency"
subtitle="The currency your products are sold in."
class="mb-6"
>
<VCardText>
<AppSelect
label="Store currency"
:items="['USD', 'INR', 'Euro', 'Pound']"
placeholder="USD"
/>
</VCardText>
</VCard>
<VCard
title="Order id format"
subtitle="Shown on the Orders page, customer pages, and customer order notifications to identify orders."
class="mb-6"
>
<VCardText>
<VRow>
<VCol
cols="12"
md="6"
>
<AppTextField
label="Prefix"
prefix="#"
/>
</VCol>
<VCol
cols="12"
md="6"
>
<AppTextField
label="Suffix"
suffix="$"
/>
</VCol>
</VRow>
<div class="mt-2">
Your order ID will appear as #1001, #1002, #1003 ...
</div>
</VCardText>
</VCard>
<div class="d-flex justify-end gap-x-4">
<VBtn
variant="tonal"
color="secondary"
>
Discard
</VBtn>
<VBtn>Save Changes</VBtn>
</div>
</template>

1
resources/js/views/apps/ecommerce/types.js Normal file
View File

@@ -0,0 +1 @@
export {}