first commit
This commit is contained in:
Inshal
373
resources/js/views/apps/user/view/UserBioPanel.vue
Normal file
373
resources/js/views/apps/user/view/UserBioPanel.vue
Normal file
@@ -0,0 +1,373 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
userData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const standardPlan = {
|
||||
plan: 'Standard',
|
||||
price: 99,
|
||||
benefits: [
|
||||
'10 Users',
|
||||
'Up to 10GB storage',
|
||||
'Basic Support',
|
||||
],
|
||||
}
|
||||
|
||||
const isUserInfoEditDialogVisible = ref(false)
|
||||
const isUpgradePlanDialogVisible = ref(false)
|
||||
|
||||
const resolveUserStatusVariant = stat => {
|
||||
if (stat === 'pending')
|
||||
return 'warning'
|
||||
if (stat === 'active')
|
||||
return 'success'
|
||||
if (stat === 'inactive')
|
||||
return 'secondary'
|
||||
|
||||
return 'primary'
|
||||
}
|
||||
|
||||
const resolveUserRoleVariant = role => {
|
||||
if (role === 'subscriber')
|
||||
return {
|
||||
color: 'primary',
|
||||
icon: 'ri-user-line',
|
||||
}
|
||||
if (role === 'author')
|
||||
return {
|
||||
color: 'warning',
|
||||
icon: 'ri-settings-2-line',
|
||||
}
|
||||
if (role === 'maintainer')
|
||||
return {
|
||||
color: 'success',
|
||||
icon: 'ri-database-2-line',
|
||||
}
|
||||
if (role === 'editor')
|
||||
return {
|
||||
color: 'info',
|
||||
icon: 'ri-pencil-line',
|
||||
}
|
||||
if (role === 'admin')
|
||||
return {
|
||||
color: 'error',
|
||||
icon: 'ri-server-line',
|
||||
}
|
||||
|
||||
return {
|
||||
color: 'primary',
|
||||
icon: 'ri-user-line',
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<!-- SECTION User Details -->
|
||||
<VCol cols="12">
|
||||
<VCard v-if="props.userData">
|
||||
<VCardText class="text-center pt-12 pb-6">
|
||||
<!-- 👉 Avatar -->
|
||||
<VAvatar
|
||||
rounded
|
||||
:size="120"
|
||||
:color="!props.userData.avatar ? 'primary' : undefined"
|
||||
:variant="!props.userData.avatar ? 'tonal' : undefined"
|
||||
>
|
||||
<VImg
|
||||
v-if="props.userData.avatar"
|
||||
:src="props.userData.avatar"
|
||||
/>
|
||||
<span
|
||||
v-else
|
||||
class="text-5xl font-weight-medium"
|
||||
>
|
||||
{{ avatarText(props.userData.fullName) }}
|
||||
</span>
|
||||
</VAvatar>
|
||||
|
||||
<!-- 👉 User fullName -->
|
||||
<h5 class="text-h5 mt-4">
|
||||
{{ props.userData.fullName }}
|
||||
</h5>
|
||||
|
||||
<!-- 👉 Role chip -->
|
||||
<VChip
|
||||
:color="resolveUserRoleVariant(props.userData.role).color"
|
||||
size="small"
|
||||
class="text-capitalize mt-4"
|
||||
>
|
||||
{{ props.userData.role }}
|
||||
</VChip>
|
||||
</VCardText>
|
||||
|
||||
<VCardText class="d-flex justify-center flex-wrap gap-6 pb-6">
|
||||
<!-- 👉 Done task -->
|
||||
<div class="d-flex align-center me-8">
|
||||
<VAvatar
|
||||
:size="40"
|
||||
rounded
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
class="me-4"
|
||||
>
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="ri-check-line"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<div>
|
||||
<h6 class="text-h5">
|
||||
{{ kFormatter(props.userData.taskDone) }}
|
||||
</h6>
|
||||
<span>Task Done</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Done Project -->
|
||||
<div class="d-flex align-center me-4">
|
||||
<VAvatar
|
||||
:size="44"
|
||||
rounded
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
class="me-3"
|
||||
>
|
||||
<VIcon
|
||||
size="24"
|
||||
icon="ri-briefcase-4-line"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<div>
|
||||
<h6 class="text-h6">
|
||||
{{ kFormatter(props.userData.projectDone) }}
|
||||
</h6>
|
||||
<span>Project Done</span>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 Details -->
|
||||
<VCardText class="pb-6">
|
||||
<h5 class="text-h5">
|
||||
Details
|
||||
</h5>
|
||||
|
||||
<VDivider class="my-4" />
|
||||
|
||||
<!-- 👉 User Details list -->
|
||||
<VList class="card-list">
|
||||
<VListItem>
|
||||
<VListItemTitle class="text-sm">
|
||||
<span class="font-weight-medium">Username:</span>
|
||||
<span class="text-body-1">
|
||||
@{{ props.userData.username }}
|
||||
</span>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
|
||||
<VListItem>
|
||||
<VListItemTitle class="text-sm">
|
||||
<span class="font-weight-medium">
|
||||
Billing Email:
|
||||
</span>
|
||||
<span class="text-body-1">{{ props.userData.email }}</span>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
|
||||
<VListItem>
|
||||
<VListItemTitle class="text-sm">
|
||||
<span class="font-weight-medium">
|
||||
Status:
|
||||
</span>
|
||||
<VChip
|
||||
size="small"
|
||||
:color="resolveUserStatusVariant(props.userData.status)"
|
||||
class="text-capitalize"
|
||||
>
|
||||
{{ props.userData.status }}
|
||||
</VChip>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
|
||||
<VListItem>
|
||||
<VListItemTitle class="text-sm">
|
||||
<span class="font-weight-medium">Role: </span>
|
||||
<span class="text-capitalize text-body-1">{{ props.userData.role }}</span>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
|
||||
<VListItem>
|
||||
<VListItemTitle class="text-sm">
|
||||
<span class="font-weight-medium">
|
||||
Tax ID:
|
||||
</span>
|
||||
<span class="text-body-1">
|
||||
{{ props.userData.taxId }}
|
||||
</span>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
|
||||
<VListItem>
|
||||
<VListItemTitle class="text-sm">
|
||||
<span class="font-weight-medium">
|
||||
Contact:
|
||||
</span>
|
||||
<span class="text-body-1">{{ props.userData.contact }}</span>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
|
||||
<VListItem>
|
||||
<VListItemTitle class="text-sm">
|
||||
<span class="font-weight-medium">
|
||||
Language:
|
||||
</span>
|
||||
<span class="text-body-1">{{ props.userData.language }}</span>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
|
||||
<VListItem>
|
||||
<VListItemTitle class="text-sm">
|
||||
<span class="font-weight-medium">
|
||||
Country:
|
||||
</span>
|
||||
<span class="text-body-1">{{ props.userData.country }}</span>
|
||||
</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 Edit and Suspend button -->
|
||||
<VCardText class="d-flex justify-center">
|
||||
<VBtn
|
||||
variant="elevated"
|
||||
class="me-4"
|
||||
@click="isUserInfoEditDialogVisible = true"
|
||||
>
|
||||
Edit
|
||||
</VBtn>
|
||||
<VBtn
|
||||
variant="outlined"
|
||||
color="error"
|
||||
>
|
||||
Suspend
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<!-- !SECTION -->
|
||||
|
||||
<!-- SECTION Current Plan -->
|
||||
<VCol cols="12">
|
||||
<VCard
|
||||
flat
|
||||
class="current-plan"
|
||||
>
|
||||
<VCardText class="d-flex">
|
||||
<!-- 👉 Standard Chip -->
|
||||
<VChip
|
||||
color="primary"
|
||||
size="small"
|
||||
>
|
||||
Standard
|
||||
</VChip>
|
||||
|
||||
<VSpacer />
|
||||
|
||||
<!-- 👉 Current Price -->
|
||||
<div class="d-flex align-center">
|
||||
<sup class="text-primary text-lg font-weight-medium">$</sup>
|
||||
<h1 class="text-h1 text-primary">
|
||||
99
|
||||
</h1>
|
||||
<sub class="mt-3"><h6 class="text-h6 font-weight-regular">month</h6></sub>
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<!-- 👉 Price Benefits -->
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="benefit in standardPlan.benefits"
|
||||
:key="benefit"
|
||||
>
|
||||
<div class="d-flex align-center">
|
||||
<VIcon
|
||||
size="10"
|
||||
color="medium-emphasis"
|
||||
class="me-2"
|
||||
icon="ri-circle-fill"
|
||||
/>
|
||||
<div class="text-medium-emphasis">
|
||||
{{ benefit }}
|
||||
</div>
|
||||
</div>
|
||||
</VListItem>
|
||||
</VList>
|
||||
|
||||
<!-- 👉 Days -->
|
||||
<div class="my-6">
|
||||
<div class="d-flex mt-3 mb-2">
|
||||
<h6 class="text-h6 font-weight-medium">
|
||||
Days
|
||||
</h6>
|
||||
<VSpacer />
|
||||
<h6 class="text-h6 font-weight-medium">
|
||||
26 of 30 Days
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Progress -->
|
||||
<VProgressLinear
|
||||
rounded
|
||||
:model-value="86"
|
||||
height="8"
|
||||
color="primary"
|
||||
/>
|
||||
|
||||
<p class="text-sm mt-1">
|
||||
4 days remaining
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Upgrade Plan -->
|
||||
<VBtn
|
||||
block
|
||||
@click="isUpgradePlanDialogVisible = true"
|
||||
>
|
||||
Upgrade Plan
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<!-- !SECTION -->
|
||||
</VRow>
|
||||
|
||||
<!-- 👉 Edit user info dialog -->
|
||||
<UserInfoEditDialog
|
||||
v-model:isDialogVisible="isUserInfoEditDialogVisible"
|
||||
:user-data="props.userData"
|
||||
/>
|
||||
|
||||
<!-- 👉 Upgrade plan dialog -->
|
||||
<UserUpgradePlanDialog v-model:isDialogVisible="isUpgradePlanDialogVisible" />
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: .5rem;
|
||||
}
|
||||
|
||||
.current-plan {
|
||||
border: 2px solid rgb(var(--v-theme-primary));
|
||||
}
|
||||
|
||||
.text-capitalize {
|
||||
text-transform: capitalize !important;
|
||||
}
|
||||
</style>
|
||||
331
resources/js/views/apps/user/view/UserInvoiceTable.vue
Normal file
331
resources/js/views/apps/user/view/UserInvoiceTable.vue
Normal file
@@ -0,0 +1,331 @@
|
||||
<script setup>
|
||||
const searchQuery = ref('')
|
||||
const selectedStatus = ref()
|
||||
|
||||
// Data table options
|
||||
const itemsPerPage = ref(10)
|
||||
const page = ref(1)
|
||||
const sortBy = ref()
|
||||
const orderBy = ref()
|
||||
|
||||
const updateOptions = options => {
|
||||
page.value = options.page
|
||||
sortBy.value = options.sortBy[0]?.key
|
||||
orderBy.value = options.sortBy[0]?.order
|
||||
}
|
||||
|
||||
const isLoading = ref(false)
|
||||
|
||||
// 👉 headers
|
||||
const headers = [
|
||||
{
|
||||
title: '#',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: 'Trending',
|
||||
key: 'trending',
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
title: 'Total',
|
||||
key: 'total',
|
||||
},
|
||||
{
|
||||
title: 'Issued Date',
|
||||
key: 'date',
|
||||
width: '150px',
|
||||
},
|
||||
{
|
||||
title: 'Actions',
|
||||
key: 'actions',
|
||||
sortable: false,
|
||||
width: '150px',
|
||||
},
|
||||
]
|
||||
|
||||
const {
|
||||
data: invoiceData,
|
||||
execute: fetchInvoices,
|
||||
} = await useApi(createUrl('/apps/invoice', {
|
||||
query: {
|
||||
q: searchQuery,
|
||||
status: selectedStatus,
|
||||
itemsPerPage,
|
||||
page,
|
||||
sortBy,
|
||||
orderBy,
|
||||
},
|
||||
}))
|
||||
|
||||
const invoices = computed(() => invoiceData.value?.invoices)
|
||||
const totalInvoices = computed(() => invoiceData.value?.totalInvoices)
|
||||
|
||||
// 👉 Invoice balance variant resolver
|
||||
const resolveInvoiceBalanceVariant = (balance, total) => {
|
||||
if (balance === total)
|
||||
return {
|
||||
status: 'Unpaid',
|
||||
chip: { color: 'error' },
|
||||
}
|
||||
if (balance === 0)
|
||||
return {
|
||||
status: 'Paid',
|
||||
chip: { color: 'success' },
|
||||
}
|
||||
|
||||
return {
|
||||
status: balance,
|
||||
chip: { variant: 'text' },
|
||||
}
|
||||
}
|
||||
|
||||
const resolveInvoiceStatusVariantAndIcon = status => {
|
||||
if (status === 'Partial Payment')
|
||||
return {
|
||||
variant: 'warning',
|
||||
icon: 'ri-line-chart-line',
|
||||
}
|
||||
if (status === 'Paid')
|
||||
return {
|
||||
variant: 'success',
|
||||
icon: 'ri-check-line',
|
||||
}
|
||||
if (status === 'Downloaded')
|
||||
return {
|
||||
variant: 'info',
|
||||
icon: 'ri-arrow-down-line',
|
||||
}
|
||||
if (status === 'Draft')
|
||||
return {
|
||||
variant: 'secondary',
|
||||
icon: 'ri-save-line',
|
||||
}
|
||||
if (status === 'Sent')
|
||||
return {
|
||||
variant: 'primary',
|
||||
icon: 'ri-mail-line',
|
||||
}
|
||||
if (status === 'Past Due')
|
||||
return {
|
||||
variant: 'error',
|
||||
icon: 'ri-error-warning-line',
|
||||
}
|
||||
|
||||
return {
|
||||
variant: 'secondary',
|
||||
icon: 'ri-close-line',
|
||||
}
|
||||
}
|
||||
|
||||
const computedMoreList = computed(() => {
|
||||
return paramId => [
|
||||
{
|
||||
title: 'Download',
|
||||
value: 'download',
|
||||
prependIcon: 'ri-download-line',
|
||||
},
|
||||
{
|
||||
title: 'Edit',
|
||||
value: 'edit',
|
||||
prependIcon: 'ri-pencil-line',
|
||||
to: {
|
||||
name: 'apps-invoice-edit-id',
|
||||
params: { id: paramId },
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Duplicate',
|
||||
value: 'duplicate',
|
||||
prependIcon: 'ri-stack-line',
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const deleteInvoice = async id => {
|
||||
await $api(`/apps/invoice/${ id }`, { method: 'DELETE' })
|
||||
fetchInvoices()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section v-if="invoices">
|
||||
<VCard
|
||||
id="invoice-list"
|
||||
title=" Invoice List"
|
||||
>
|
||||
<template #append>
|
||||
<!-- 👉 Export invoice -->
|
||||
<VBtn>
|
||||
Export
|
||||
<VIcon
|
||||
end
|
||||
class="flip-in-rtl"
|
||||
icon="ri-arrow-right-line"
|
||||
/>
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<!-- SECTION Datatable -->
|
||||
<VDataTableServer
|
||||
v-model:items-per-page="itemsPerPage"
|
||||
v-model:page="page"
|
||||
:loading="isLoading"
|
||||
:items-length="totalInvoices"
|
||||
:headers="headers"
|
||||
:items="invoices"
|
||||
item-value="id"
|
||||
class="text-no-wrap text-sm rounded-0"
|
||||
@update:options="updateOptions"
|
||||
>
|
||||
<!-- Trending Header -->
|
||||
<template #header.trending>
|
||||
<VIcon
|
||||
size="22"
|
||||
icon="ri-arrow-up-line"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- id -->
|
||||
<template #item.id="{ item }">
|
||||
<RouterLink :to="{ name: 'apps-invoice-preview-id', params: { id: item.id } }">
|
||||
#{{ item.id }}
|
||||
</RouterLink>
|
||||
</template>
|
||||
|
||||
<!-- trending -->
|
||||
<template #item.trending="{ item }">
|
||||
<VTooltip>
|
||||
<template #activator="{ props }">
|
||||
<VAvatar
|
||||
:size="28"
|
||||
v-bind="props"
|
||||
:color="resolveInvoiceStatusVariantAndIcon(item.invoiceStatus).variant"
|
||||
variant="tonal"
|
||||
>
|
||||
<VIcon
|
||||
:size="16"
|
||||
:icon="resolveInvoiceStatusVariantAndIcon(item.invoiceStatus).icon"
|
||||
/>
|
||||
</VAvatar>
|
||||
</template>
|
||||
<p class="mb-0">
|
||||
{{ item.invoiceStatus }}
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
Balance: {{ item.balance }}
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
Due date: {{ item.dueDate }}
|
||||
</p>
|
||||
</VTooltip>
|
||||
</template>
|
||||
|
||||
<!-- Total -->
|
||||
<template #item.total="{ item }">
|
||||
${{ item.total }}
|
||||
</template>
|
||||
|
||||
<!-- issued Date -->
|
||||
<template #item.date="{ item }">
|
||||
{{ item.issuedDate }}
|
||||
</template>
|
||||
|
||||
<!-- Balance -->
|
||||
<template #item.balance="{ item }">
|
||||
<VChip
|
||||
v-if="typeof ((resolveInvoiceBalanceVariant(item.balance, item.total)).status) === 'string'"
|
||||
:color="resolveInvoiceBalanceVariant(item.balance, item.total).chip.color"
|
||||
>
|
||||
{{ (resolveInvoiceBalanceVariant(item.balance, item.total)).status }}
|
||||
</VChip>
|
||||
<span
|
||||
v-else
|
||||
class="text-sm text-high-emphasis"
|
||||
>
|
||||
{{ Number((resolveInvoiceBalanceVariant(item.balance, item.total)).status) > 0 ? `$${(resolveInvoiceBalanceVariant(item.balance, item.total)).status}` : `-$${Math.abs(Number((resolveInvoiceBalanceVariant(item.balance, item.total)).status))}` }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<!-- Actions -->
|
||||
<template #item.actions="{ item }">
|
||||
<IconBtn
|
||||
size="small"
|
||||
@click="deleteInvoice(item.id)"
|
||||
>
|
||||
<VIcon icon="ri-delete-bin-7-line" />
|
||||
</IconBtn>
|
||||
|
||||
<IconBtn
|
||||
size="small"
|
||||
:to="{ name: 'apps-invoice-preview-id', params: { id: item.id } }"
|
||||
>
|
||||
<VIcon icon="ri-eye-line" />
|
||||
</IconBtn>
|
||||
|
||||
<MoreBtn
|
||||
size="small"
|
||||
:menu-list="computedMoreList(item.id)"
|
||||
item-props
|
||||
/>
|
||||
</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 }, totalInvoices) }}
|
||||
</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(totalInvoices / itemsPerPage)"
|
||||
@click="page >= Math.ceil(totalInvoices / itemsPerPage) ? page = Math.ceil(totalInvoices / itemsPerPage) : page++ "
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</VDataTableServer>
|
||||
<!-- !SECTION -->
|
||||
</VCard>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
#invoice-list {
|
||||
.invoice-list-actions {
|
||||
inline-size: 8rem;
|
||||
}
|
||||
|
||||
.invoice-list-search {
|
||||
inline-size: 12rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
403
resources/js/views/apps/user/view/UserTabBillingsPlans.vue
Normal file
403
resources/js/views/apps/user/view/UserTabBillingsPlans.vue
Normal file
@@ -0,0 +1,403 @@
|
||||
<script setup>
|
||||
import americanExpress from '@images/icons/payments/american-express.png'
|
||||
import mastercard from '@images/icons/payments/mastercard.png'
|
||||
import visa from '@images/icons/payments/visa.png'
|
||||
|
||||
const isUpgradePlanDialogVisible = ref(false)
|
||||
const currentCardDetails = ref()
|
||||
const isCardEditDialogVisible = ref(false)
|
||||
const isCardAddDialogVisible = ref(false)
|
||||
const isEditAddressDialogVisible = ref(false)
|
||||
|
||||
const openEditCardDialog = cardDetails => {
|
||||
currentCardDetails.value = cardDetails
|
||||
isCardEditDialogVisible.value = true
|
||||
}
|
||||
|
||||
const creditCards = [
|
||||
{
|
||||
name: 'Tom McBride',
|
||||
number: '4851234567899865',
|
||||
expiry: '12/24',
|
||||
isPrimary: true,
|
||||
type: 'mastercard',
|
||||
cvv: '123',
|
||||
image: mastercard,
|
||||
},
|
||||
{
|
||||
name: 'Mildred Wagner',
|
||||
number: '5531234567895678',
|
||||
expiry: '02/24',
|
||||
isPrimary: false,
|
||||
type: 'visa',
|
||||
cvv: '456',
|
||||
image: visa,
|
||||
},
|
||||
{
|
||||
name: 'Lester Jennings',
|
||||
number: '5531234567890002',
|
||||
expiry: '08/20',
|
||||
isPrimary: false,
|
||||
type: 'visa',
|
||||
cvv: '456',
|
||||
image: americanExpress,
|
||||
},
|
||||
]
|
||||
|
||||
const currentBillingAddress = {
|
||||
companyName: 'ThemeSelection',
|
||||
billingEmail: 'gertrude@gmail.com',
|
||||
taxID: 'TAX-875623',
|
||||
vatNumber: 'SDF754K77',
|
||||
address: '100 Water Plant Avenue, Building 1303 Wake Island',
|
||||
contact: '+1(609) 933-44-22',
|
||||
country: 'USA',
|
||||
state: 'Queensland',
|
||||
zipCode: 403114,
|
||||
}
|
||||
|
||||
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,
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<!-- 👉 Current Plan -->
|
||||
<VCol cols="12">
|
||||
<VCard title="Current Plan">
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<h6 class="text-h6 mb-1">
|
||||
Your Current Plan is Basic
|
||||
</h6>
|
||||
<p>A simple start for everyone</p>
|
||||
|
||||
<h6 class="text-h6 mb-1">
|
||||
Active until Dec 09, 2021
|
||||
</h6>
|
||||
<p>We will send you a notification upon Subscription expiration</p>
|
||||
|
||||
<h6 class="text-h6 mb-1">
|
||||
<span class="me-3">$199 Per Month</span>
|
||||
<VChip
|
||||
color="primary"
|
||||
size="small"
|
||||
>
|
||||
Popular
|
||||
</VChip>
|
||||
</h6>
|
||||
<p class="mb-0">
|
||||
Standard plan for small to medium businesses
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Alert -->
|
||||
<VAlert
|
||||
color="warning"
|
||||
variant="tonal"
|
||||
icon="ri-alert-line"
|
||||
closable
|
||||
>
|
||||
<VAlertTitle>We need your attention!</VAlertTitle>
|
||||
<span>Your plan requires update</span>
|
||||
</VAlert>
|
||||
|
||||
<!-- 👉 Progress -->
|
||||
<div class="d-flex justify-space-between font-weight-bold mt-4 mb-1">
|
||||
<h6 class="text-h6">
|
||||
Days
|
||||
</h6>
|
||||
<h6 class="text-h6">
|
||||
26 of 30 Days
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
<VProgressLinear
|
||||
rounded
|
||||
color="primary"
|
||||
:height="10"
|
||||
:model-value="75"
|
||||
/>
|
||||
<p class="text-sm mt-1">
|
||||
Your plan requires update
|
||||
</p>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
<VBtn @click="isUpgradePlanDialogVisible = true">
|
||||
upgrade plan
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="error"
|
||||
variant="outlined"
|
||||
>
|
||||
Cancel Subscription
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Payment Methods -->
|
||||
<VCol cols="12">
|
||||
<VCard title="Payment Methods">
|
||||
<template #append>
|
||||
<VBtn
|
||||
size="small"
|
||||
prepend-icon="ri-add-line"
|
||||
@click="isCardAddDialogVisible = !isCardAddDialogVisible"
|
||||
>
|
||||
Add Card
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VCardText class="d-flex flex-column gap-y-4">
|
||||
<VCard
|
||||
v-for="card in creditCards"
|
||||
:key="card.name"
|
||||
border
|
||||
flat
|
||||
>
|
||||
<VCardText class="d-flex flex-sm-row flex-column">
|
||||
<div class="text-no-wrap">
|
||||
<VImg
|
||||
:src="card.image"
|
||||
max-width="90"
|
||||
width="auto"
|
||||
:height="25"
|
||||
/>
|
||||
<h6 class="text-h6 my-2">
|
||||
{{ card.name }}
|
||||
<VChip
|
||||
v-if="card.isPrimary"
|
||||
color="primary"
|
||||
size="small"
|
||||
>
|
||||
Primary
|
||||
</VChip>
|
||||
</h6>
|
||||
<span class="text-body-1">**** **** **** {{ card.number.substring(card.number.length - 4) }}</span>
|
||||
</div>
|
||||
|
||||
<VSpacer />
|
||||
|
||||
<div class="d-flex flex-column text-sm-end">
|
||||
<div class="order-sm-0 order-1">
|
||||
<VBtn
|
||||
variant="outlined"
|
||||
class="me-4"
|
||||
size="small"
|
||||
@click="openEditCardDialog(card)"
|
||||
>
|
||||
Edit
|
||||
</VBtn>
|
||||
<VBtn
|
||||
color="error"
|
||||
size="small"
|
||||
variant="outlined"
|
||||
>
|
||||
Delete
|
||||
</VBtn>
|
||||
</div>
|
||||
<span class="text-body-2 my-4 order-sm-1 order-0">Card expires at {{ card.expiry }}</span>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Billing Address -->
|
||||
<VCard title="Billing Address">
|
||||
<template #append>
|
||||
<VBtn
|
||||
size="small"
|
||||
prepend-icon="ri-add-line"
|
||||
@click="isEditAddressDialogVisible = !isEditAddressDialogVisible"
|
||||
>
|
||||
Edit Address
|
||||
</VBtn>
|
||||
</template>
|
||||
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
lg="6"
|
||||
>
|
||||
<VTable class="billing-address-table">
|
||||
<tr>
|
||||
<td>
|
||||
<h6 class="text-h6 text-no-wrap mb-2">
|
||||
Company Name:
|
||||
</h6>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-body-1 mb-2">
|
||||
{{ currentBillingAddress.companyName }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<h6 class="text-h6 text-no-wrap mb-2">
|
||||
Billing Email:
|
||||
</h6>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-body-1 mb-2">
|
||||
{{ currentBillingAddress.billingEmail }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<h6 class="text-h6 text-no-wrap mb-2">
|
||||
Tax ID:
|
||||
</h6>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-body-1 mb-2">
|
||||
{{ currentBillingAddress.taxID }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<h6 class="text-h6 text-no-wrap mb-2">
|
||||
VAT Number:
|
||||
</h6>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-body-1 mb-2">
|
||||
{{ currentBillingAddress.vatNumber }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="d-flex align-baseline">
|
||||
<h6 class="text-h6 text-no-wrap">
|
||||
Billing Address:
|
||||
</h6>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-body-1 mb-0">
|
||||
{{ currentBillingAddress.address }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</VTable>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
lg="6"
|
||||
>
|
||||
<VTable class="billing-address-table">
|
||||
<tr>
|
||||
<td>
|
||||
<h6 class="text-h6 text-no-wrap mb-2">
|
||||
Contact:
|
||||
</h6>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-body-1 mb-2">
|
||||
{{ currentBillingAddress.contact }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<h6 class="text-h6 text-no-wrap mb-2">
|
||||
Country:
|
||||
</h6>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-body-1 mb-2">
|
||||
{{ currentBillingAddress.country }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<h6 class="text-h6 text-no-wrap mb-2">
|
||||
State:
|
||||
</h6>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-body-1 mb-2">
|
||||
{{ currentBillingAddress.state }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<h6 class="text-h6 text-no-wrap">
|
||||
Zip Code:
|
||||
</h6>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-body-1 mb-0">
|
||||
{{ currentBillingAddress.zipCode }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</VTable>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<!-- 👉 Edit Card Dialog -->
|
||||
<CardAddEditDialog
|
||||
v-model:isDialogVisible="isCardEditDialogVisible"
|
||||
:card-details="currentCardDetails"
|
||||
/>
|
||||
|
||||
<!-- 👉 Add Card Dialog -->
|
||||
<CardAddEditDialog v-model:isDialogVisible="isCardAddDialogVisible" />
|
||||
|
||||
<!-- 👉 Edit Address dialog -->
|
||||
<AddEditAddressDialog
|
||||
v-model:isDialogVisible="isEditAddressDialogVisible"
|
||||
:billing-address="editBillingData"
|
||||
/>
|
||||
|
||||
<!-- 👉 Upgrade plan dialog -->
|
||||
<UserUpgradePlanDialog v-model:isDialogVisible="isUpgradePlanDialogVisible" />
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.billing-address-table {
|
||||
tr {
|
||||
td:first-child {
|
||||
inline-size: 148px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
189
resources/js/views/apps/user/view/UserTabConnections.vue
Normal file
189
resources/js/views/apps/user/view/UserTabConnections.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<script setup>
|
||||
import asana from '@images/icons/brands/asana.png'
|
||||
import behance from '@images/icons/brands/behance.png'
|
||||
import dribbble from '@images/icons/brands/dribbble.png'
|
||||
import facebook from '@images/icons/brands/facebook.png'
|
||||
import github from '@images/icons/brands/github.png'
|
||||
import google from '@images/icons/brands/google.png'
|
||||
import linkedin from '@images/icons/brands/linkedin.png'
|
||||
import mailchimp from '@images/icons/brands/mailchimp.png'
|
||||
import slack from '@images/icons/brands/slack.png'
|
||||
import twitter from '@images/icons/brands/twitter.png'
|
||||
|
||||
const connectedAccounts = ref([
|
||||
{
|
||||
img: google,
|
||||
title: 'Google',
|
||||
text: 'Calendar and contacts',
|
||||
connected: true,
|
||||
},
|
||||
{
|
||||
img: slack,
|
||||
title: 'Slack',
|
||||
text: 'Communication',
|
||||
connected: false,
|
||||
},
|
||||
{
|
||||
img: github,
|
||||
title: 'GitHub',
|
||||
text: 'Manage your Git repositories',
|
||||
connected: true,
|
||||
},
|
||||
{
|
||||
img: mailchimp,
|
||||
title: 'Mailchimp',
|
||||
text: 'Email marketing service',
|
||||
connected: false,
|
||||
},
|
||||
{
|
||||
img: asana,
|
||||
title: 'Asana',
|
||||
text: 'Communication',
|
||||
connected: false,
|
||||
},
|
||||
])
|
||||
|
||||
const socialAccounts = ref([
|
||||
{
|
||||
img: facebook,
|
||||
title: 'Facebook',
|
||||
connected: false,
|
||||
},
|
||||
{
|
||||
img: twitter,
|
||||
title: 'Twitter',
|
||||
link: 'https://twitter.com/theme_selection',
|
||||
username: '@Theme_Selection',
|
||||
connected: true,
|
||||
},
|
||||
{
|
||||
img: linkedin,
|
||||
title: 'LinkedIn',
|
||||
link: 'https://www.linkedin.com/company/themeselection',
|
||||
username: '@ThemeSelection',
|
||||
connected: true,
|
||||
},
|
||||
{
|
||||
img: dribbble,
|
||||
title: 'Dribbble',
|
||||
connected: false,
|
||||
},
|
||||
{
|
||||
img: behance,
|
||||
title: 'Behance',
|
||||
connected: false,
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<!-- 👉 connected accounts -->
|
||||
<VCol cols="12">
|
||||
<VCard
|
||||
title="Connected Accounts"
|
||||
subtitle="Display content from your connected accounts on your site"
|
||||
>
|
||||
<VCardText>
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="account in connectedAccounts"
|
||||
:key="account.title"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
start
|
||||
:size="36"
|
||||
:image="account.img"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="font-weight-medium">
|
||||
{{ account.title }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="text-body-1">
|
||||
{{ account.text }}
|
||||
</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<VSwitch
|
||||
v-model="account.connected"
|
||||
density="compact"
|
||||
class="me-1"
|
||||
/>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 social accounts -->
|
||||
<VCol cols="12">
|
||||
<VCard
|
||||
title="Social Accounts"
|
||||
subtitle="Display content from social accounts on your site"
|
||||
>
|
||||
<VCardText>
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="(account) in socialAccounts"
|
||||
:key="account.title"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
start
|
||||
size="36"
|
||||
rounded="0"
|
||||
:image="account.img"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListItemTitle class="font-weight-medium">
|
||||
{{ account.title }}
|
||||
</VListItemTitle>
|
||||
|
||||
<VListItemSubtitle v-if="account.connected">
|
||||
<a
|
||||
:href="account.link"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-base text-primary"
|
||||
>
|
||||
{{ account.username }}
|
||||
</a>
|
||||
</VListItemSubtitle>
|
||||
|
||||
<VListItemSubtitle
|
||||
v-else
|
||||
class="text-body-1"
|
||||
>
|
||||
Not connected
|
||||
</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<VBtn
|
||||
icon
|
||||
:color="account.connected ? 'error' : 'secondary'"
|
||||
variant="outlined"
|
||||
class="rounded"
|
||||
>
|
||||
<VIcon
|
||||
size="20"
|
||||
:icon="account.connected ? 'ri-delete-bin-7-line' : 'ri-link'"
|
||||
/>
|
||||
</VBtn>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 16px;
|
||||
}
|
||||
</style>
|
||||
87
resources/js/views/apps/user/view/UserTabNotifications.vue
Normal file
87
resources/js/views/apps/user/view/UserTabNotifications.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<script setup>
|
||||
const notifications = ref([
|
||||
{
|
||||
type: 'New for you',
|
||||
email: true,
|
||||
browser: false,
|
||||
app: false,
|
||||
},
|
||||
{
|
||||
type: 'Account activity',
|
||||
email: false,
|
||||
browser: true,
|
||||
app: true,
|
||||
},
|
||||
{
|
||||
type: 'A new browser used to sign in',
|
||||
email: true,
|
||||
browser: true,
|
||||
app: true,
|
||||
},
|
||||
{
|
||||
type: 'A new device is linked',
|
||||
email: false,
|
||||
browser: true,
|
||||
app: false,
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard title="Notifications">
|
||||
<VDivider />
|
||||
<VCardText>
|
||||
<h6 class="text-h6">
|
||||
You will receive notification for the below selected items.
|
||||
</h6>
|
||||
</VCardText>
|
||||
<VTable class="text-no-wrap rounded-0 text-high-emphasis">
|
||||
<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 in notifications"
|
||||
:key="notification.type"
|
||||
>
|
||||
<td>{{ 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 class="d-flex flex-wrap gap-4">
|
||||
<VBtn>Save changes</VBtn>
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
>
|
||||
Discard
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
286
resources/js/views/apps/user/view/UserTabOverview.vue
Normal file
286
resources/js/views/apps/user/view/UserTabOverview.vue
Normal file
@@ -0,0 +1,286 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import UserInvoiceTable from './UserInvoiceTable.vue'
|
||||
import pdf from '@images/icons/project-icons/pdf.png'
|
||||
import avatar2 from '@images/avatars/avatar-2.png'
|
||||
import avatar3 from '@images/avatars/avatar-3.png'
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
import avatar5 from '@images/avatars/avatar-5.png'
|
||||
import figma from '@images/icons/project-icons/figma.png'
|
||||
import html5 from '@images/icons/project-icons/html5.png'
|
||||
import python from '@images/icons/project-icons/python.png'
|
||||
import react from '@images/icons/project-icons/react.png'
|
||||
import sketch from '@images/icons/project-icons/sketch.png'
|
||||
import vue from '@images/icons/project-icons/vue.png'
|
||||
import xamarin from '@images/icons/project-icons/xamarin.png'
|
||||
|
||||
const projectTableHeaders = [
|
||||
{
|
||||
title: 'PROJECT',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: 'TOTAL TASK',
|
||||
key: 'totalTask',
|
||||
},
|
||||
{
|
||||
title: 'PROGRESS',
|
||||
key: 'progress',
|
||||
},
|
||||
{
|
||||
title: 'HOURS',
|
||||
key: 'hours',
|
||||
},
|
||||
]
|
||||
|
||||
const { name } = useTheme()
|
||||
|
||||
const projects = [
|
||||
{
|
||||
logo: react,
|
||||
name: 'BGC eCommerce App',
|
||||
project: 'React Project',
|
||||
totalTask: '122/240',
|
||||
progress: 78,
|
||||
hours: '18:42',
|
||||
},
|
||||
{
|
||||
logo: figma,
|
||||
name: 'Falcon Logo Design',
|
||||
project: 'Figma Project',
|
||||
totalTask: '09/56',
|
||||
progress: 18,
|
||||
hours: '20:42',
|
||||
},
|
||||
{
|
||||
logo: vue,
|
||||
name: 'Dashboard Design',
|
||||
project: 'Vuejs Project',
|
||||
totalTask: '290/320',
|
||||
progress: 62,
|
||||
hours: '120:87',
|
||||
},
|
||||
{
|
||||
logo: xamarin,
|
||||
name: 'Foodista mobile app',
|
||||
project: 'Xamarin Project',
|
||||
totalTask: '290/320',
|
||||
progress: 8,
|
||||
hours: '120:87',
|
||||
},
|
||||
{
|
||||
logo: python,
|
||||
name: 'Dojo Email App',
|
||||
project: 'Python Project',
|
||||
totalTask: '120/186',
|
||||
progress: 49,
|
||||
hours: '230:10',
|
||||
},
|
||||
{
|
||||
logo: sketch,
|
||||
name: 'Blockchain Website',
|
||||
project: 'Sketch Project',
|
||||
totalTask: '99/109',
|
||||
progress: 92,
|
||||
hours: '342:41',
|
||||
},
|
||||
{
|
||||
logo: html5,
|
||||
name: 'Hoffman Website',
|
||||
project: 'HTML Project',
|
||||
totalTask: '98/110',
|
||||
progress: 88,
|
||||
hours: '12:45',
|
||||
},
|
||||
]
|
||||
|
||||
const resolveUserProgressVariant = progress => {
|
||||
if (progress <= 25)
|
||||
return 'error'
|
||||
if (progress > 25 && progress <= 50)
|
||||
return 'warning'
|
||||
if (progress > 50 && progress <= 75)
|
||||
return 'primary'
|
||||
if (progress > 75 && progress <= 100)
|
||||
return 'success'
|
||||
|
||||
return 'secondary'
|
||||
}
|
||||
|
||||
const search = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VCard title="Project List">
|
||||
<template #append>
|
||||
<VTextField
|
||||
v-model="search"
|
||||
placeholder="Search Project"
|
||||
density="compact"
|
||||
style="inline-size: 10rem;"
|
||||
/>
|
||||
</template>
|
||||
<!-- 👉 User Project List Table -->
|
||||
|
||||
<!-- SECTION Datatable -->
|
||||
<VDataTable
|
||||
:search="search"
|
||||
:headers="projectTableHeaders"
|
||||
:items="projects"
|
||||
item-value="name"
|
||||
class="text-no-wrap rounded-0"
|
||||
>
|
||||
<!-- projects -->
|
||||
<template #item.name="{ item }">
|
||||
<div class="d-flex align-center">
|
||||
<VAvatar
|
||||
:size="34"
|
||||
class="me-3"
|
||||
:image="item.logo"
|
||||
/>
|
||||
<div>
|
||||
<h6 class="text-h6 mb-0">
|
||||
{{ item.name }}
|
||||
</h6>
|
||||
<p class="text-sm text-medium-emphasis mb-0">
|
||||
{{ item.project }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- total task -->
|
||||
<template #item.totalTask="{ item }">
|
||||
<div class="text-high-emphasis">
|
||||
{{ item.totalTask }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Progress -->
|
||||
<template #item.progress="{ item }">
|
||||
<div class="text-high-emphasis">
|
||||
{{ item.progress }}%
|
||||
</div>
|
||||
<VProgressLinear
|
||||
:height="6"
|
||||
:model-value="item.progress"
|
||||
rounded
|
||||
:color="resolveUserProgressVariant(item.progress)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- remove footer -->
|
||||
<!-- TODO refactor this after vuetify community gives answer -->
|
||||
<template #bottom />
|
||||
</VDataTable>
|
||||
<!-- !SECTION -->
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Activity timeline -->
|
||||
<VCard title="User Activity Timeline">
|
||||
<VCardText>
|
||||
<VTimeline
|
||||
density="compact"
|
||||
align="start"
|
||||
truncate-line="both"
|
||||
:line-inset="8"
|
||||
class="v-timeline-density-compact"
|
||||
>
|
||||
<VTimelineItem
|
||||
dot-color="error"
|
||||
size="x-small"
|
||||
>
|
||||
<div class="d-flex justify-space-between align-center flex-wrap gap-2 mb-3">
|
||||
<span class="app-timeline-title">
|
||||
12 Invoices have been paid
|
||||
</span>
|
||||
<span class="app-timeline-meta">12 min ago</span>
|
||||
</div>
|
||||
|
||||
<p class="app-timeline-text mb-2">
|
||||
Invoices have been paid to the company
|
||||
</p>
|
||||
<div class="d-inline-flex align-center timeline-chip">
|
||||
<img
|
||||
:src="pdf"
|
||||
height="20"
|
||||
class="me-2"
|
||||
alt="img"
|
||||
>
|
||||
|
||||
<span class="app-timeline-text font-weight-medium">
|
||||
invoice.pdf
|
||||
</span>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem
|
||||
dot-color="primary"
|
||||
size="x-small"
|
||||
>
|
||||
<div class="d-flex justify-space-between align-center flex-wrap gap-2 mb-3">
|
||||
<span class="app-timeline-title">
|
||||
Client Meeting
|
||||
</span>
|
||||
<span class="app-timeline-meta">45 min ago</span>
|
||||
</div>
|
||||
|
||||
<p class="app-timeline-text mb-2">
|
||||
React Project meeting with john @10:15am
|
||||
</p>
|
||||
|
||||
<div class="d-flex align-center mt-3">
|
||||
<VAvatar
|
||||
size="32"
|
||||
class="me-2"
|
||||
:image="avatar2"
|
||||
/>
|
||||
<div>
|
||||
<p class="text-sm font-weight-medium mb-0">
|
||||
Lester McCarthy (Client)
|
||||
</p>
|
||||
<span class="text-sm">CEO of Kelly Group</span>
|
||||
</div>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
|
||||
<VTimelineItem
|
||||
dot-color="info"
|
||||
size="x-small"
|
||||
>
|
||||
<div class="d-flex justify-space-between align-center flex-wrap gap-2 mb-3">
|
||||
<span class="app-timeline-title">
|
||||
Create a new project for client
|
||||
</span>
|
||||
<span class="app-timeline-meta">2 day ago</span>
|
||||
</div>
|
||||
|
||||
<p class="app-timeline-text mb-2">
|
||||
6 team members in a project
|
||||
</p>
|
||||
|
||||
<div class="v-avatar-group">
|
||||
<VAvatar
|
||||
v-for="avatar in [avatar2, avatar3, avatar4, avatar5]"
|
||||
:key="avatar"
|
||||
:image="avatar"
|
||||
/>
|
||||
<VAvatar :color="name === 'light' ? '#F0EFF0' : '#3F3B59'">
|
||||
<span class="text-high-emphasis">+3</span>
|
||||
</VAvatar>
|
||||
</div>
|
||||
</VTimelineItem>
|
||||
</VTimeline>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<UserInvoiceTable />
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
198
resources/js/views/apps/user/view/UserTabSecurity.vue
Normal file
198
resources/js/views/apps/user/view/UserTabSecurity.vue
Normal file
@@ -0,0 +1,198 @@
|
||||
<script setup>
|
||||
import chrome from '@images/logos/chrome.png'
|
||||
|
||||
const isNewPasswordVisible = ref(false)
|
||||
const isConfirmPasswordVisible = ref(false)
|
||||
const smsVerificationNumber = ref('')
|
||||
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: chrome,
|
||||
device: 'Dell XPS 15',
|
||||
location: 'United States',
|
||||
activity: '10, Jan 2020 20:07',
|
||||
},
|
||||
{
|
||||
browser: 'Chrome on Android',
|
||||
logo: chrome,
|
||||
device: 'Google Pixel 3a',
|
||||
location: 'Ghana',
|
||||
activity: '11, Jan 2020 10:16',
|
||||
},
|
||||
{
|
||||
browser: 'Chrome on macOS',
|
||||
logo: chrome,
|
||||
device: 'Apple iMac',
|
||||
location: 'Mayotte',
|
||||
activity: '11, Jan 2020 12:10',
|
||||
},
|
||||
{
|
||||
browser: 'Chrome on iPhone',
|
||||
logo: chrome,
|
||||
device: 'Apple iPhone XR',
|
||||
location: 'Mauritania',
|
||||
activity: '12, Jan 2020 8:29',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Change password -->
|
||||
<VCard title="Change Password">
|
||||
<VCardText>
|
||||
<VAlert
|
||||
variant="tonal"
|
||||
color="warning"
|
||||
closable
|
||||
class="mb-6"
|
||||
>
|
||||
<VAlertTitle>Ensure that these requirements are met</VAlertTitle>
|
||||
<span>Minimum 8 characters long, uppercase & symbol</span>
|
||||
</VAlert>
|
||||
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="New Password"
|
||||
placeholder="············"
|
||||
:type="isNewPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isNewPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isNewPasswordVisible = !isNewPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Confirm Password"
|
||||
placeholder="············"
|
||||
:type="isConfirmPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isConfirmPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@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-step verification"
|
||||
subtitle="Keep your account secure with authentication step."
|
||||
>
|
||||
<VCardText>
|
||||
<div>
|
||||
<h4 class="font-weight-medium mb-1">
|
||||
SMS
|
||||
</h4>
|
||||
<VTextField
|
||||
:model-value="smsVerificationNumber"
|
||||
readonly
|
||||
placeholder="+1(968) 819-2547"
|
||||
density="compact"
|
||||
>
|
||||
<template #append>
|
||||
<IconBtn
|
||||
rounded
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
class="me-2"
|
||||
>
|
||||
<VIcon
|
||||
icon="ri-edit-box-line"
|
||||
@click="isTwoFactorDialogOpen = true"
|
||||
/>
|
||||
</IconBtn>
|
||||
|
||||
<IconBtn
|
||||
rounded
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
>
|
||||
<VIcon icon="ri-user-add-line" />
|
||||
</IconBtn>
|
||||
</template>
|
||||
</VTextField>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<VDataTable
|
||||
:items="recentDevices"
|
||||
:headers="recentDeviceHeader"
|
||||
hide-default-footer
|
||||
class="text-no-wrap rounded-0"
|
||||
>
|
||||
<template #item.browser="{ item }">
|
||||
<div class="d-flex align-center">
|
||||
<VAvatar
|
||||
:image="item.logo"
|
||||
:size="22"
|
||||
class="me-3"
|
||||
/>
|
||||
<h6 class="text-h6 font-weight-medium">
|
||||
{{ item.browser }}
|
||||
</h6>
|
||||
</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:isDialogVisible="isTwoFactorDialogOpen"
|
||||
:sms-code="smsVerificationNumber"
|
||||
/>
|
||||
</template>
|
||||
Reference in New Issue
Block a user