authorized fix keycloak sidebarItem
This commit is contained in:
@@ -0,0 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="d-flex justify-center align-center text-center h-100vh">
|
||||
<div>
|
||||
<img src="@/assets/images/backgrounds/unauthorization.svg" width="500" alt="404" />
|
||||
<h1 class="text-h1 pt-3">Opps!!!</h1>
|
||||
<h4 class="text-h4 my-8"></h4>
|
||||
<v-btn flat color="primary" class="mb-4" @click="$router.back()">Go Back</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,45 @@
|
||||
<script setup lang="ts">
|
||||
import { BlogCardData } from '@/data/dashboard/dashboardData';
|
||||
</script>
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" lg="4" v-for="card in BlogCardData" :key="card.title">
|
||||
<v-card elevation="10" rounded="md" class="card-hover">
|
||||
<div>
|
||||
<v-img :src="card.coveravatar" height="250px" cover class="rounded-t-md align-end text-right">
|
||||
<v-card-item
|
||||
><v-chip class="bg-surface text-body-2 font-weight-medium" size="small" rounded="sm" v-text="card.read"></v-chip
|
||||
></v-card-item>
|
||||
</v-img>
|
||||
<v-avatar size="40" class="mt-n7 mx-6">
|
||||
<img :src="card.avatar" alt="icon" height="40" />
|
||||
</v-avatar>
|
||||
<v-card-item class="pt-4">
|
||||
<v-chip class="text-body-2 font-weight-medium bg-grey100" size="small" rounded="sm" v-text="card.category"></v-chip>
|
||||
<h5 class="text-h5 text-13 my-6 custom-text-primary">
|
||||
<NuxtLink class="text-decoration-none color-inherits custom-title" :to="card.link">{{ card.title }}</NuxtLink>
|
||||
</h5>
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<v-avatar class="" size="18">
|
||||
<EyeIcon size="18" class="text-textPrimary" />
|
||||
</v-avatar>
|
||||
<span class="text-subtitle-1 ml-2 text-textSecondary" v-text="card.view"></span>
|
||||
<v-avatar class="ml-4" size="18">
|
||||
<Message2Icon size="18" class="text-textPrimary" />
|
||||
</v-avatar>
|
||||
<span class="text-subtitle-1 ml-2 text-textSecondary" v-text="card.comments"></span>
|
||||
</div>
|
||||
<div>
|
||||
<v-avatar size="10">
|
||||
<CircleIcon size="10" class="text-textPrimary" />
|
||||
</v-avatar>
|
||||
<span class="text-subtitle-2 ml-2 text-textSecondary" v-text="card.time"></span>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { DailyActivitiesData } from '@/data/dashboard/dashboardData';
|
||||
import { Icon } from '@iconify/vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Daily activities</v-card-title>
|
||||
<div class="daily-activities mt-8 px-3">
|
||||
<div v-for="list in DailyActivitiesData" :key="list.title">
|
||||
<v-row class="d-flex mb-1">
|
||||
<v-col cols="4" lg="3" md="auto" sm="auto" class="px-0 pt-0 pb-0 d-flex align-start">
|
||||
<p class="text-body-1 text-textSecondary text-no-wrap">{{ list.title }}</p>
|
||||
</v-col>
|
||||
<v-col cols="1" sm="1" class="px-0 text-center pt-0 pb-0 mt-1">
|
||||
<Icon icon="tabler:circle-filled" size="13" :class="'text-' + list.textcolor" />
|
||||
<div v-if="list.line" class="line mx-auto bg-grey100"></div>
|
||||
</v-col>
|
||||
<v-col cols="7" sm="8" class="pt-0 pb-0">
|
||||
<h6 v-if="list.boldtext" class="text-body-1 text-textPrimary">{{ list.subtitle }}</h6>
|
||||
<p v-else class="text-body-1 text-textPrimary">{{ list.subtitle }}</p>
|
||||
<div class="mt-n1">
|
||||
<NuxtLink :to="list.url" class="text-body-1 text-primary text-decoration-none" v-if="list.link">{{
|
||||
list.link
|
||||
}}</NuxtLink>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue';
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<div class="d-flex ga-3 align-center">
|
||||
<v-avatar size="48" class="rounded-md bg-lightsecondary">
|
||||
<Icon icon="solar:football-outline" class="text-secondary" height="25" />
|
||||
</v-avatar>
|
||||
<h6 class="text-h6 heading">New Customers</h6>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center justify-space-between mb-3 mt-12">
|
||||
<h5 class="text-textPrimary text-subtitle-1 font-weight-medium">New Goals</h5>
|
||||
<div class="text-textPrimary text-subtitle-1 font-weight-medium">83%</div>
|
||||
</div>
|
||||
<v-progress-linear model-value="83" height="7" color="secondary" bg-color="lightsecondary" rounded></v-progress-linear>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,115 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
const select = ref('Sept 2025');
|
||||
const items = ref(['Sept 2025', 'Oct 2025', 'Nov 2025']);
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
type: 'bar',
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb',
|
||||
height: 285,
|
||||
stacked: true,
|
||||
offsetX: -15
|
||||
},
|
||||
colors: ['rgba(var(--v-theme-primary))', 'rgba(var(--v-theme-error))'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
barHeight: '60%',
|
||||
columnWidth: '15%',
|
||||
borderRadius: [6],
|
||||
borderRadiusApplication: 'end',
|
||||
borderRadiusWhenStacked: 'all'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
right: 0
|
||||
},
|
||||
borderColor: 'rgba(0,0,0,0.05)',
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: -5,
|
||||
max: 5,
|
||||
tickAmount: 4
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep'],
|
||||
labels: {
|
||||
style: { fontSize: '13px', colors: '#adb0bb', fontWeight: '400' }
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
theme: 'dark'
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
name: '2025',
|
||||
data: [1.2, 2.7, 1, 3.6, 2.1, 2.7, 2.2, 1.3, 2.5]
|
||||
},
|
||||
{
|
||||
name: '2023',
|
||||
data: [-2.8, -1.1, -2.5, -1.5, -2.3, -1.9, -1, -2.1, -1.3]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<div class="d-md-flex justify-space-between mb-mb-0 mb-3">
|
||||
<v-card-title class="text-h5">Revenue Forecast</v-card-title>
|
||||
<div>
|
||||
<v-select
|
||||
v-model="select"
|
||||
:items="items"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
class="text-body-1"
|
||||
hide-details
|
||||
></v-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-n1 mt-4 pt-2">
|
||||
<apexchart type="bar" height="285" class="rounded-bars" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { RevenueProjectsData } from '@/data/dashboard/dashboardData';
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" class="revenue-products">
|
||||
<v-card-item class="pb-4">
|
||||
<div class="d-flex ga-3 align-center justify-space-between">
|
||||
<v-card-title class="text-h5">Revenue by Product</v-card-title>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<v-table class="revenue-table">
|
||||
<template v-slot:default>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-body-1">Assigned</th>
|
||||
<th class="text-body-1">Progress</th>
|
||||
<th class="text-body-1">Priority</th>
|
||||
<th class="text-body-1">Budget</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in RevenueProjectsData" :key="item.leadname" class="month-item">
|
||||
<td>
|
||||
<div class="d-flex align-center">
|
||||
<v-avatar size="48" rounded="md"> <img :src="item.img" :alt="item.img" width="48" /></v-avatar>
|
||||
<div class="mx-3">
|
||||
<h6 class="text-subtitle-1 text-no-wrap font-weight-medium">{{ item.leadname }}</h6>
|
||||
<span class="text-body-1 text-no-wrap text-textSecondary">{{ item.designation }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-no-wrap text-body-1 text-textSecondary">
|
||||
{{ item.projectname }}
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<v-chip rounded="sm" class="font-weight-semibold" :color="item.statuscolor" size="small" label>{{
|
||||
item.statustext
|
||||
}}</v-chip>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-body-1">{{ item.money }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</template>
|
||||
</v-table>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,68 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'line',
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb',
|
||||
height: 60,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
group: 'sparklines'
|
||||
},
|
||||
colors:['rgba(var(--v-theme-error))'],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
fixed: {
|
||||
enabled: true,
|
||||
position: 'right'
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
name: 'Income',
|
||||
data: [30, 25, 35, 20, 30, 40]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<div class="d-flex ga-3 align-center">
|
||||
<v-avatar size="48" class="rounded-md bg-lighterror">
|
||||
<Icon icon="solar:box-linear" class="text-error" height="25" />
|
||||
</v-avatar>
|
||||
<h6 class="text-h6 heading">Total Income</h6>
|
||||
</div>
|
||||
<v-row class="mt-6">
|
||||
<v-col cols="6">
|
||||
<h3 class="text-h3 heading">$680</h3>
|
||||
<div class="text-success text-subtitle-2 font-weight-medium mt-2">+18%</div>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<apexchart type="line" height="60" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,70 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { getSecondary } from '@/utils/UpdateColors';
|
||||
|
||||
/* Chart */
|
||||
const areachartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 70,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
group: 'sparklines',
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb'
|
||||
},
|
||||
colors: [getSecondary.value],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
color: [getSecondary.value],
|
||||
gradient: {
|
||||
shadeIntensity: 0,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.4,
|
||||
opacityTo: 0.9,
|
||||
stops: [100]
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
fixed: {
|
||||
enabled: true,
|
||||
position: 'right'
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const areaChart = {
|
||||
series: [
|
||||
{
|
||||
name: "customers",
|
||||
data: [36, 45, 31, 47, 38, 43]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="0" class="bg-lightsecondary overflow-hidden">
|
||||
<v-card-item class="pa-6">
|
||||
<p class="mb-1 textPrimary">Customers</p>
|
||||
<div class="d-flex align-center gap-3">
|
||||
<h3 class="text-24 heading">36,358</h3>
|
||||
<span class="font-weight-medium textPrimary">-12%</span>
|
||||
</div>
|
||||
</v-card-item>
|
||||
<apexchart type="area" height="70" :options="areachartOptions" :series="areaChart.series"> </apexchart>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,84 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { getPrimary, getLightPrimary } from '@/utils/UpdateColors';
|
||||
|
||||
/* Chart */
|
||||
const barchartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
height: 100,
|
||||
type: 'line',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
colors: [getPrimary.value, getLightPrimary.value],
|
||||
grid: {
|
||||
show: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
colors: [getPrimary.value, getLightPrimary.value],
|
||||
width: 2
|
||||
},
|
||||
markers: {
|
||||
colors: [getPrimary.value, getLightPrimary.value],
|
||||
strokeColors: 'transparent'
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
followCursor: true
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const barChart = {
|
||||
series: [
|
||||
{
|
||||
name: 'April 07 ',
|
||||
data: [0, 20, 15, 19, 14, 25, 30]
|
||||
},
|
||||
{
|
||||
name: 'Last Week',
|
||||
data: [0, 8, 19, 13, 26, 16, 25]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<div class="d-md-flex justify-space-between mb-mb-0 mb-3">
|
||||
<div>
|
||||
<v-card-title class="text-h5">Customers</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1">Last 7 days</v-card-subtitle>
|
||||
</div>
|
||||
<span class="text-success text-caption font-weight-semibold">+26.5%</span>
|
||||
</div>
|
||||
<apexchart class="mt-7" type="line" height="100" :options="barchartOptions" :series="barChart.series"> </apexchart>
|
||||
<div class="mt-9">
|
||||
<div class="d-flex justify-space-between mb-2">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-avatar size="10" class="bg-primary rounded-circle"></v-avatar>
|
||||
<span class="text-muted">April 07 - April 14</span>
|
||||
</div>
|
||||
<p class="text-muted">6,380</p>
|
||||
</div>
|
||||
<div class="d-flex justify-space-between">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-avatar size="10" class="bg-grey100 rounded-circle"></v-avatar>
|
||||
<span class="text-muted">Last Week</span>
|
||||
</div>
|
||||
<p class="text-muted">4,298</p>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,99 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { getSecondary, getLightSecondary } from '@/utils/UpdateColors';
|
||||
import { PerformanceData } from '@/_mockApis/components/dashboard/dashboard1';
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
labels: ['245', '45', '14', '78', '95'],
|
||||
chart: {
|
||||
height: 230,
|
||||
fontFamily: 'inherit',
|
||||
type: 'donut'
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
startAngle: -90,
|
||||
endAngle: 90,
|
||||
offsetY: 10,
|
||||
donut: {
|
||||
size: '90%'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
bottom: -80
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
name: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
colors: 'rgba(var(--v-theme-surface))'
|
||||
},
|
||||
tooltip: {
|
||||
fillSeriesColor: false
|
||||
},
|
||||
colors: ['#ff6692', '#ffd648', '#FFF7DA', getLightSecondary.value, getSecondary.value],
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1370,
|
||||
options: {
|
||||
chart: {
|
||||
height: 180,
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
chart: {
|
||||
height: 200
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
});
|
||||
|
||||
const Chart = [20, 20, 20, 20, 20];
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Your Performance</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1">Last check on 25 february</v-card-subtitle>
|
||||
<v-row class="mt-4">
|
||||
<v-col cols="12" md="6" class="d-flex flex-column gap-4">
|
||||
<div class="d-flex gap-3 align-center" v-for="item in PerformanceData" :key="item.title">
|
||||
<v-avatar size="45" :color="'light' + item.color" rounded="md">
|
||||
<Icon :icon="'solar:' + item.icon" height="25" :class="'text-' + item.color" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<h6 class="heading text-subtitle-1">{{ item.title }}</h6>
|
||||
<p class="textSecondary">{{ item.subtitle }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<div class="text-center mt-sm-n7">
|
||||
<apexchart type="donut" height="230" :options="chartOptions" :series="Chart"> </apexchart>
|
||||
<div class="mt-n4">
|
||||
<h2 class="text-h2 heading">275</h2>
|
||||
<p class="mb-0 mt-3 textSecondary">Learn insigs how to manage all aspects of your startup.</p>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,59 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { getSecondary } from '@/utils/UpdateColors';
|
||||
|
||||
/* Chart */
|
||||
const barchartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
height: 55,
|
||||
type: 'bar',
|
||||
offsetX: -3,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
colors: ['#fff'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '55%',
|
||||
endingShape: 'flat',
|
||||
borderRadius: 4
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
followCursor: true
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const barChart = {
|
||||
series: [
|
||||
{
|
||||
name: "Project",
|
||||
data: [3, 5, 5, 7, 6, 5, 3, 5, 3],
|
||||
labels: ["2012", "2013", "2014", "2015", "2016", "2017"],
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="0" class="bg-lighterror overflow-hidden">
|
||||
<v-card-item class="pa-6">
|
||||
<p class="mb-1 textPrimary">Projects</p>
|
||||
<div class="d-flex align-center gap-3">
|
||||
<h3 class="text-24 heading">78,298</h3>
|
||||
<span class="font-weight-medium textPrimary">+31.8%</span>
|
||||
</div>
|
||||
<div class="mx-n2 mt-4">
|
||||
<apexchart type="bar" height="55" :options="barchartOptions" :series="barChart.series"> </apexchart>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,131 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { getSecondary, getPrimary } from '@/utils/UpdateColors';
|
||||
|
||||
/* Chart */
|
||||
const areachartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
type: 'area',
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb',
|
||||
height: 290,
|
||||
width: '100%',
|
||||
stacked: false,
|
||||
|
||||
},
|
||||
colors: ['#ff6692', getSecondary.value, getPrimary.value],
|
||||
plotOptions: {},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'monotoneCubic'
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0
|
||||
},
|
||||
borderColor: 'rgba(0,0,0,0.05)',
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 0,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.2,
|
||||
opacityTo: 0.9,
|
||||
stops: [100]
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug']
|
||||
},
|
||||
markers: {
|
||||
strokeColor: ['#ff6692', getSecondary.value, getPrimary.value],
|
||||
strokeWidth: 2
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark'
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const areaChart = {
|
||||
series: [
|
||||
{
|
||||
name: '2023',
|
||||
data: [50, 60, 30, 55, 75, 60, 100, 120]
|
||||
},
|
||||
|
||||
{
|
||||
name: '2022',
|
||||
data: [35, 45, 40, 50, 35, 55, 40, 45]
|
||||
},
|
||||
{
|
||||
name: '2024',
|
||||
data: [100, 75, 80, 40, 20, 40, 0, 25]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item class="pb-2">
|
||||
<div class="d-md-flex justify-space-between mb-mb-0 mb-3">
|
||||
<div class="d-flex gap-3 align-center">
|
||||
<v-avatar size="48" class="rounded-md bg-lightprimary">
|
||||
<Icon icon="solar:layers-linear" class="text-primary" height="25" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<v-card-title class="text-h5">Revenue Forecast</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1">Overview of Profit</v-card-subtitle>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-center gap-4">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-avatar size="8" class="bg-primary rounded-circle"></v-avatar>
|
||||
<span class="textSecondary">2024</span>
|
||||
</div>
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-avatar size="8" class="bg-error rounded-circle"></v-avatar>
|
||||
<span class="textSecondary">2023</span>
|
||||
</div>
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-avatar size="8" class="bg-secondary rounded-circle"></v-avatar>
|
||||
<span class="textSecondary">2022</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-n4 mt-5 pt-2">
|
||||
<apexchart type="area" height="290" :options="areachartOptions" :series="areaChart.series"> </apexchart>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,238 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { RevenueProjectsData } from '@/_mockApis/components/dashboard/dashboard1';
|
||||
const select = ref('Sept 2024');
|
||||
const items = ref(['Sept 2024', 'Oct 2024', 'Nov 2024']);
|
||||
/*tab*/
|
||||
const tab = ref(null);
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" class="revenue-products">
|
||||
<v-card-item class="pb-4">
|
||||
<div class="d-flex gap-3 align-center justify-space-between">
|
||||
<v-card-title class="text-h5">Revenue by Product</v-card-title>
|
||||
<div>
|
||||
<v-select
|
||||
v-model="select"
|
||||
:items="items"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
class="text-body-1"
|
||||
hide-details
|
||||
></v-select>
|
||||
</div>
|
||||
</div>
|
||||
<v-tabs v-model="tab" bg-color="transparent" height="45" class="mt-3">
|
||||
<v-tab value="App" class="rounded-md font-weight-semibold"
|
||||
><Icon icon="solar:widget-linear" height="16" class="me-2" /> App</v-tab
|
||||
>
|
||||
<v-tab value="Mobile" class="rounded-md font-weight-semibold"
|
||||
><Icon icon="solar:smartphone-line-duotone" height="16" class="me-2" />Mobile</v-tab
|
||||
>
|
||||
<v-tab value="Sass" class="rounded-md font-weight-semibold"
|
||||
><Icon icon="solar:calculator-linear" height="16" class="me-2" />Sass</v-tab
|
||||
>
|
||||
<v-tab value="Others" class="rounded-md font-weight-semibold"
|
||||
><Icon icon="solar:folder-open-outline" height="16" class="me-2" />Others</v-tab
|
||||
>
|
||||
</v-tabs>
|
||||
<div class="mt-4">
|
||||
<v-window v-model="tab">
|
||||
<!-- App Tab -->
|
||||
<v-window-item value="App">
|
||||
<v-table class="revenue-table light-border">
|
||||
<template v-slot:default>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-body-1 textPrimary">Assigned</th>
|
||||
<th class="text-body-1 textPrimary">Progress</th>
|
||||
<th class="text-body-1 textPrimary">Priority</th>
|
||||
<th class="text-body-1 textPrimary">Budget</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in RevenueProjectsData" :key="item.leadname" class="month-item">
|
||||
<td>
|
||||
<div class="d-flex align-center">
|
||||
<v-avatar size="48" rounded="md">
|
||||
<img :src="item.img" :alt="item.img" width="48"
|
||||
/></v-avatar>
|
||||
<div class="mx-3">
|
||||
<h6 class="text-subtitle-1 text-no-wrap mb-1">{{ item.leadname }}</h6>
|
||||
<span class="text-body-1 text-no-wrap textSecondary">{{ item.designation }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-no-wrap text-body-1 textSecondary">
|
||||
{{ item.projectname }}
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<v-chip
|
||||
rounded="sm"
|
||||
class="font-weight-semibold"
|
||||
:color="item.statuscolor"
|
||||
size="small"
|
||||
label
|
||||
>{{ item.statustext }}</v-chip
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-body-1">{{ item.money }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</template>
|
||||
</v-table>
|
||||
</v-window-item>
|
||||
<!-- Mobile Tab -->
|
||||
<v-window-item value="Mobile">
|
||||
<v-table class="revenue-table light-border">
|
||||
<template v-slot:default>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-body-1">Assigned</th>
|
||||
<th class="text-body-1">Progress</th>
|
||||
<th class="text-body-1">Priority</th>
|
||||
<th class="text-body-1">Budget</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in RevenueProjectsData" :key="item.leadname" class="month-item">
|
||||
<td>
|
||||
<div class="d-flex align-center">
|
||||
<v-avatar size="48" rounded="md">
|
||||
<img :src="item.img" :alt="item.img" width="48"
|
||||
/></v-avatar>
|
||||
<div class="mx-3">
|
||||
<h6 class="text-subtitle-1 text-no-wrap font-weight-semibold mb-1">{{ item.leadname }}</h6>
|
||||
<span class="text-body-1 text-no-wrap textSecondary">{{ item.designation }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-no-wrap text-body-1 textSecondary">
|
||||
{{ item.projectname }}
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<v-chip
|
||||
rounded="sm"
|
||||
class="ma-2 font-weight-semibold"
|
||||
:color="item.statuscolor"
|
||||
size="small"
|
||||
label
|
||||
>{{ item.statustext }}</v-chip
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-body-1">{{ item.money }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</template>
|
||||
</v-table>
|
||||
</v-window-item>
|
||||
<!-- Sass Tab -->
|
||||
<v-window-item value="Sass">
|
||||
<v-table class="revenue-table light-border">
|
||||
<template v-slot:default>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-body-1">Assigned</th>
|
||||
<th class="text-body-1">Progress</th>
|
||||
<th class="text-body-1">Priority</th>
|
||||
<th class="text-body-1">Budget</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in RevenueProjectsData" :key="item.leadname" class="month-item">
|
||||
<td>
|
||||
<div class="d-flex align-center">
|
||||
<v-avatar size="48" rounded="md">
|
||||
<img :src="item.img" :alt="item.img" width="48"
|
||||
/></v-avatar>
|
||||
<div class="mx-3">
|
||||
<h6 class="text-subtitle-1 text-no-wrap font-weight-semibold mb-1">{{ item.leadname }}</h6>
|
||||
<span class="text-body-1 text-no-wrap textSecondary">{{ item.designation }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-no-wrap text-body-1 textSecondary">
|
||||
{{ item.projectname }}
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<v-chip
|
||||
rounded="sm"
|
||||
class="ma-2 font-weight-semibold"
|
||||
:color="item.statuscolor"
|
||||
size="small"
|
||||
label
|
||||
>{{ item.statustext }}</v-chip
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-body-1">{{ item.money }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</template>
|
||||
</v-table>
|
||||
</v-window-item>
|
||||
<!-- Others Tab -->
|
||||
<v-window-item value="Others">
|
||||
<v-table class="revenue-table light-border">
|
||||
<template v-slot:default>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-body-1">Assigned</th>
|
||||
<th class="text-body-1">Progress</th>
|
||||
<th class="text-body-1">Priority</th>
|
||||
<th class="text-body-1">Budget</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in RevenueProjectsData" :key="item.leadname" class="month-item">
|
||||
<td>
|
||||
<div class="d-flex align-center">
|
||||
<v-avatar size="48" rounded="md">
|
||||
<img :src="item.img" :alt="item.img" width="48"
|
||||
/></v-avatar>
|
||||
<div class="mx-3">
|
||||
<h6 class="text-subtitle-1 text-no-wrap font-weight-semibold mb-1">{{ item.leadname }}</h6>
|
||||
<span class="text-body-1 text-no-wrap textSecondary">{{ item.designation }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-no-wrap text-body-1 textSecondary">
|
||||
{{ item.projectname }}
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<v-chip
|
||||
rounded="sm"
|
||||
class="ma-2 font-weight-semibold"
|
||||
:color="item.statuscolor"
|
||||
size="small"
|
||||
label
|
||||
>{{ item.statustext }}</v-chip
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-body-1">{{ item.money }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</template>
|
||||
</v-table>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,58 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { getPrimary, getSecondary } from '@/utils/UpdateColors';
|
||||
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
labels: ['36%', '10%', '36%'],
|
||||
chart: {
|
||||
type: 'radialBar',
|
||||
height: 220,
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#c6d1e9'
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
inverseOrder: false,
|
||||
startAngle: 0,
|
||||
endAngle: 270,
|
||||
hollow: {
|
||||
margin: 1,
|
||||
size: '40%'
|
||||
},
|
||||
dataLabels: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
stroke: { width: 1, lineCap: 'round' },
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
fillSeriesColor: false
|
||||
},
|
||||
colors: [getPrimary.value, getSecondary.value, 'rgba(var(--v-theme-error))']
|
||||
};
|
||||
});
|
||||
const Chart = [50, 80, 30];
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<div class="mb-3">
|
||||
<v-card-title class="text-h5">Sales Overview</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1">Last 7 days</v-card-subtitle>
|
||||
</div>
|
||||
<div class="position-relative labels-chart">
|
||||
<span class="text-body-2 textSecondary label-1">0%</span>
|
||||
<span class="text-body-2 textSecondary label-2">25%</span>
|
||||
<span class="text-body-2 textSecondary label-3">50%</span>
|
||||
<span class="text-body-2 textSecondary label-4">75%</span>
|
||||
<apexchart type="radialBar" height="220" :options="chartOptions" :series="Chart"> </apexchart>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,89 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { getPrimary, getLightPrimary } from '@/utils/UpdateColors';
|
||||
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
type: 'line',
|
||||
height: 315,
|
||||
toolbar: { show: !1 }
|
||||
},
|
||||
legend: { show: !1 },
|
||||
dataLabels: { enabled: !1 },
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
show: !0,
|
||||
width: 2,
|
||||
colors: [getPrimary.value]
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['1W', '', '3W', '', '5W', '6W', '7W', '8W', '9W', '', '11W', '', '13W', '', '15W'],
|
||||
axisBorder: { show: !1 },
|
||||
axisTicks: { show: !1 },
|
||||
tickAmount: 6,
|
||||
labels: {
|
||||
rotate: 0,
|
||||
rotateAlways: !0,
|
||||
style: { fontSize: '10px', colors: '#adb0bb', fontWeight: '600' }
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
tickAmount: 3
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark'
|
||||
},
|
||||
colors: [getPrimary.value],
|
||||
grid: {
|
||||
borderColor: 'rgba(var(--v-theme-primary),0.2)',
|
||||
strokeDashArray: 4,
|
||||
yaxis: { show: false }
|
||||
},
|
||||
markers: {
|
||||
strokeColor: [getPrimary.value],
|
||||
strokeWidth: 3
|
||||
}
|
||||
};
|
||||
});
|
||||
const barChart = {
|
||||
series: [
|
||||
{
|
||||
name: 'settlements',
|
||||
data: [40, 40, 80, 80, 30, 30, 10, 10, 30, 30, 100, 100, 20, 20, 140, 140]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" class="bg-lightprimary overflow-hidden">
|
||||
<v-card-item>
|
||||
<div class="d-flex gap-3 align-center">
|
||||
<v-avatar size="48" class="rounded-md bg-surface">
|
||||
<Icon icon="solar:box-linear" class="text-primary" height="25" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<span class="textPrimary">Total settlements</span>
|
||||
<h3 class="text-h3 heading font-weight-bold">$122,580</h3>
|
||||
</div>
|
||||
</div>
|
||||
<apexchart class="mt-5" type="line" height="315" :options="chartOptions" :series="barChart.series"> </apexchart>
|
||||
<div>
|
||||
<div class="d-flex justify-space-evenly gap-4">
|
||||
<div class="pe-8">
|
||||
<p class="textPrimary mb-1">Total balance</p>
|
||||
<h3 class="text-h3 heading">$122,580</h3>
|
||||
</div>
|
||||
<div class="ps-8">
|
||||
<p class="textPrimary mb-1">Withdrawals</p>
|
||||
<h3 class="text-h3 heading">$31,640</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue';
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" class="bg-primary overflow-hidden">
|
||||
<v-card-item class="pb-0">
|
||||
<v-row>
|
||||
<v-col cols="12" md="7">
|
||||
<div class="d-flex gap-3 align-center">
|
||||
<v-avatar size="48" class="rounded-md bg-surface">
|
||||
<Icon icon="solar:course-up-outline" class="text-textPrimary opacity-80" height="25" />
|
||||
</v-avatar>
|
||||
<div class="text-h4">Welcome Back David</div>
|
||||
</div>
|
||||
<div class="mt-xl-16 mt-lg-8 mt-6">
|
||||
<div class="d-flex justify-space-between pr-7">
|
||||
<div class="py-0">
|
||||
<p class="opacity-80 mb-1">Budget</p>
|
||||
<h3 class="text-xl-h3 text-lg-h5">$98,450</h3>
|
||||
</div>
|
||||
<v-divider vertical class="opacity-20 h-55"></v-divider>
|
||||
<div class="py-0">
|
||||
<p class="opacity-80 mb-1">Expense</p>
|
||||
<h3 class="text-xl-h3 text-lg-h5">$2,440</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" md="5" class="pb-0 text-md-end text-center">
|
||||
<img src="@/assets/images/backgrounds/welcome-bg.png" alt="matdash-img" class="welcome-img " />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
// definePageMeta({
|
||||
// middleware:['auth'],
|
||||
// // auth:'super_admin',
|
||||
// roles:['super_admin','admin'],
|
||||
// })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p>dasdasd</p>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { getPrimary } from '@/utils/UpdateColors';
|
||||
import { AnnualProfitData } from '@/_mockApis/components/dashboard/dashboard2';
|
||||
/* Chart */
|
||||
const areachartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 80,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
group: 'sparklines',
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb'
|
||||
},
|
||||
colors: [getPrimary.value],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
color: [getPrimary.value],
|
||||
gradient: {
|
||||
shadeIntensity: 0,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.3,
|
||||
opacityTo: 0.4,
|
||||
stops: [100]
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
fixed: {
|
||||
enabled: true,
|
||||
position: 'right'
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const areaChart = {
|
||||
series: [
|
||||
{
|
||||
name: 'Users',
|
||||
data: [25, 66, 20, 40, 12, 58, 20]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Annual Profit</v-card-title>
|
||||
<div class="bg-lightprimary-100 rounded-md mt-5">
|
||||
<div class="d-flex justify-space-between align-center pa-6">
|
||||
<span class="textPrimary font-weight-medium">Conversion Rate</span>
|
||||
<h3 class="text-h3 heading">18.4%</h3>
|
||||
</div>
|
||||
<apexchart type="area" class="mt-5" height="80" :options="areachartOptions" :series="areaChart.series"> </apexchart>
|
||||
</div>
|
||||
<div class="d-flex flex-column gap-3 mt-6 annual-list">
|
||||
<div v-for="item in AnnualProfitData" :key="item.title" class="list border-b pb-4">
|
||||
<div class="d-flex justify-space-between">
|
||||
<div>
|
||||
<p class="font-weight-medium text-muted mb-1">{{ item.title }}</p>
|
||||
<span class="font-weight-medium text-right textSecondary">{{ item.subtitle }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-subtitle-1 font-weight-bold heading mb-1">{{ item.price }}</h6>
|
||||
<p :class="'font-weight-semibold text-right text-' + item.color">{{ item.percent }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { DailyActivitiesData } from '@/_mockApis/components/dashboard/dashboard2';
|
||||
import { Icon } from '@iconify/vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Daily activities</v-card-title>
|
||||
<div class="daily-activities mt-10 px-3">
|
||||
<div v-for="list in DailyActivitiesData" :key="list.title">
|
||||
<v-row class="d-flex mb-1">
|
||||
<v-col cols="4" lg="3" md="auto" sm="auto" class="px-0 pt-0 pb-0 d-flex align-start">
|
||||
<p class="text-body-1 text-muted text-no-wrap">{{ list.title }}</p>
|
||||
</v-col>
|
||||
<v-col cols="1" sm="1" class="px-0 text-center pt-0 pb-0 mt-1">
|
||||
<Icon icon="tabler:circle-filled" size="13" :class="'text-' + list.textcolor" />
|
||||
<div v-if="list.line" class="line mx-auto bg-borderColor"></div>
|
||||
</v-col>
|
||||
<v-col cols="7" sm="8" class="pt-0 pb-0">
|
||||
<h6 v-if="list.boldtext" class="text-body-1 text-textPrimary">{{ list.subtitle }}</h6>
|
||||
<p v-else class="text-body-1 text-muted">{{ list.subtitle }}</p>
|
||||
<div class="mt-n1">
|
||||
<RouterLink :to="list.url" class="text-body-1 text-primary text-decoration-none" v-if="list.link">{{
|
||||
list.link
|
||||
}}</RouterLink>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue';
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<div class="d-flex gap-3 align-center">
|
||||
<v-avatar size="48" class="rounded-md bg-lightsecondary">
|
||||
<Icon icon="solar:football-outline" class="text-secondary" height="25" />
|
||||
</v-avatar>
|
||||
<h6 class="text-h6 heading">New Customers</h6>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center justify-space-between mb-3 mt-9">
|
||||
<h5 class="text-textPrimary text-subtitle-1 font-weight-medium">New Goals</h5>
|
||||
<div class="text-textPrimary text-subtitle-1 font-weight-medium">83%</div>
|
||||
</div>
|
||||
<v-progress-linear model-value="83" height="7" color="secondary" bg-color="lightsecondary" rounded></v-progress-linear>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue';
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" class="bg-primary-gt position-relative profit-card overflow-hidden">
|
||||
<v-card-item >
|
||||
<div class="d-flex rounded-sm gap-2 align-center badge-custom-dark text-white">
|
||||
<Icon icon="solar:check-circle-outline" height="18"/>
|
||||
This month <strong>+15% Profit</strong>
|
||||
</div>
|
||||
<div class="pt-6 mt-12">
|
||||
<h3 class="text-h3 text-white mb-2">Hey, David McMichael</h3>
|
||||
<p class="opacity-80 mb-1 text-white text-subtitle-1">Aenean vel libero id metus sollicitudin</p>
|
||||
</div>
|
||||
</v-card-item>
|
||||
<img src="@/assets/images/backgrounds/welcome-bg2.png" alt="matdash-img" class="position-absolute" />
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { userCardData } from '@/_mockApis/components/dashboard/dashboard2';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card elevation="10" class="overflow-hidden">
|
||||
<img src="@/assets/images/backgrounds/blog.jpg" alt="matdash-image" class="w-100" />
|
||||
<v-card-item class="pt-6">
|
||||
<v-card-title class="text-h5">Figma tips and tricks with Stephan</v-card-title>
|
||||
<p class="text-15 text-muted my-3">
|
||||
Nullam lobortis sodales dolor vitae viverra. Cras lacinia bibendum metus vel rhoncus.
|
||||
</p>
|
||||
<div class="d-flex justify-content-start mt-4">
|
||||
<div class="ml-2 d-flex">
|
||||
<v-avatar v-for="card in userCardData" :key="card.img" size="40" class="ml-n2 avtar-border">
|
||||
<img :src="card.img" alt="usericon" height="40" />
|
||||
</v-avatar>
|
||||
<v-avatar size="40" class="ml-n2 avtar-border text-primary font-weight-medium" color="lightprimary">
|
||||
+12
|
||||
</v-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,130 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { RevenueForecastData } from '@/_mockApis/components/dashboard/dashboard2';
|
||||
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
type: 'bar',
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb',
|
||||
height: 295,
|
||||
stacked: true,
|
||||
offsetX: -15
|
||||
},
|
||||
colors: ['rgba(var(--v-theme-primary))', 'rgba(var(--v-theme-error))'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
barHeight: '60%',
|
||||
columnWidth: '15%',
|
||||
borderRadius: [6],
|
||||
borderRadiusApplication: 'end',
|
||||
borderRadiusWhenStacked: 'all'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
padding: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
right: 0
|
||||
},
|
||||
borderColor: 'rgba(0,0,0,0.05)',
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: -5,
|
||||
max: 5,
|
||||
tickAmount: 4
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep'],
|
||||
labels: {
|
||||
style: { fontSize: '13px', colors: '#adb0bb', fontWeight: '400' }
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
theme: 'dark'
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
name: '2024',
|
||||
data: [1.2, 2.7, 1, 3.6, 2.1, 2.7, 2.2, 1.3, 2.5]
|
||||
},
|
||||
{
|
||||
name: '2023',
|
||||
data: [-2.8, -1.1, -2.5, -1.5, -2.3, -1.9, -1, -2.1, -1.3]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<div class="d-md-flex justify-space-between mb-mb-0 mb-3">
|
||||
<div>
|
||||
<v-card-title class="text-h5">Revenue Forecast</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1">Overview of Profit</v-card-subtitle>
|
||||
</div>
|
||||
<div class="d-flex align-center gap-4">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-avatar size="10" class="bg-primary rounded-circle"></v-avatar>
|
||||
<span class="textSecondary">2024</span>
|
||||
</div>
|
||||
<div class="d-flex align-center gap-2">
|
||||
<v-avatar size="10" class="bg-error rounded-circle"></v-avatar>
|
||||
<span class="textSecondary">2023</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-n1 mt-4 pt-2">
|
||||
<apexchart type="bar" height="295" class="rounded-bars" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</div>
|
||||
<v-row class="mt-1">
|
||||
<v-col v-for="item in RevenueForecastData" :key="item.subtext" cols="12" md="4">
|
||||
<div class="d-flex gap-3 align-center">
|
||||
<v-avatar size="48" color="item.bgcolor" class="rounded-md" :class="item.bgcolor">
|
||||
<Icon :icon="'solar:' + item.icon" height="25" :class="item.color" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<p class="textSecondary">{{ item.subtext }}</p>
|
||||
<h5 class="text-h5 font-weight-medium">{{ item.profit }}</h5>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,103 @@
|
||||
<script setup>
|
||||
import { SalesFromLocationData } from '@/_mockApis/components/dashboard/dashboard2';
|
||||
import svgMap from 'svgmap';
|
||||
import 'svgmap/dist/svgMap.min.css';
|
||||
import { onMounted, ref } from 'vue';
|
||||
const map = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
new svgMap({
|
||||
targetElementID: 'svgMap',
|
||||
mouseWheelZoomEnabled: false,
|
||||
hideFlag: true,
|
||||
initialZoom: 1.23,
|
||||
|
||||
data: {
|
||||
data: {
|
||||
countresidents: {
|
||||
format: '{0}',
|
||||
thousandSeparator: ',',
|
||||
thresholdMax: 50000,
|
||||
thresholdMin: 1000
|
||||
}
|
||||
},
|
||||
applyData: 'countresidents',
|
||||
values: {
|
||||
AF: { countresidents: 587, color: 'rgba(var(--v-theme-error))' },
|
||||
IN: { countresidents: 232, color: 'rgba(var(--v-theme-primary))' },
|
||||
US: { countresidents: 42393, color: 'rgba(var(--v-theme-secondary))' }
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Sales from Locations</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1">World Map</v-card-subtitle>
|
||||
<div id="svgMap" ref="map" class="mt-7 mb-4"></div>
|
||||
<v-row v-for="item in SalesFromLocationData" :key="item.name" class="align-center justify-space-between mt-1">
|
||||
<v-col cols="2" xl="auto" lg="3" sm="2">
|
||||
<h6 class="text-textPrimary text-body-1">{{ item.name }}</h6>
|
||||
</v-col>
|
||||
<v-col cols="7" xl="8" lg="6" class="px-0"
|
||||
><v-progress-linear
|
||||
:model-value="item.percentage"
|
||||
height="7"
|
||||
:bg-color="'light' + item.color"
|
||||
:color="item.color"
|
||||
rounded
|
||||
></v-progress-linear
|
||||
></v-col>
|
||||
<v-col cols="3" xl="auto" lg="3" sm="3" class="text-end">
|
||||
<h6 class="text-grey200 text-body-1">{{ item.percentage }}</h6>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.svgMap-map-wrapper {
|
||||
background: transparent;
|
||||
padding-top: 70%;
|
||||
top: -20px;
|
||||
}
|
||||
|
||||
.svgMap-map-wrapper {
|
||||
.svgMap-country {
|
||||
stroke: #fff;
|
||||
fill: #c9d6de !important;
|
||||
|
||||
&#svgMap-map-country-IN {
|
||||
fill: rgb(var(--v-theme-primary)) !important;
|
||||
}
|
||||
|
||||
&#svgMap-map-country-AF {
|
||||
fill: rgb(var(--v-theme-error)) !important;
|
||||
}
|
||||
|
||||
&#svgMap-map-country-US {
|
||||
fill: rgb(var(--v-theme-secondary)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.svgMap-map-controls-zoom {
|
||||
background: #c9d6de !important;
|
||||
.svgMap-control-button.svgMap-zoom-button:before {
|
||||
width: 9px !important;
|
||||
height: 2px !important;
|
||||
}
|
||||
.svgMap-control-button.svgMap-zoom-in-button:after {
|
||||
width: 2px !important;
|
||||
height: 10px !important;
|
||||
}
|
||||
}
|
||||
.svgMap-control-button{
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
/* Chart */
|
||||
const barchartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb',
|
||||
type: 'bar',
|
||||
height: 98,
|
||||
stacked: true,
|
||||
offsetX: -5,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
colors: ['#ffffff', 'rgba(255,255,255,0.5)'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '26%',
|
||||
borderRadius: [3],
|
||||
borderRadiusApplication: 'end',
|
||||
borderRadiusWhenStacked: 'all'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const barChart = {
|
||||
series: [
|
||||
{
|
||||
name: 'Site A',
|
||||
data: [29, 52, 38, 47, 56, 41, 46]
|
||||
},
|
||||
{
|
||||
name: 'Site B',
|
||||
data: [71, 71, 71, 71, 71, 71, 71]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="0" class="bg-lighterror overflow-hidden">
|
||||
<v-card-item class="space-20">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<p class="mb-1 font-weight-semibold textPrimary">Subscriptions</p>
|
||||
<div class="d-flex align-center gap-3">
|
||||
<h3 class="text-24 heading">78,298</h3>
|
||||
<span class="font-weight-medium textPrimary">-12%</span>
|
||||
</div>
|
||||
</div>
|
||||
<v-avatar size="48" class="rounded-md bg-surface">
|
||||
<Icon icon="solar:layers-linear" class="text-error" height="22" />
|
||||
</v-avatar>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<apexchart type="bar" height="98" :options="barchartOptions" :series="barChart.series" class="rounded-bars"> </apexchart>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,68 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'line',
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb',
|
||||
height: 60,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
group: 'sparklines'
|
||||
},
|
||||
colors:['rgba(var(--v-theme-error))'],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
fixed: {
|
||||
enabled: true,
|
||||
position: 'right'
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
name: 'Income',
|
||||
data: [30, 25, 35, 20, 30, 40]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<div class="d-flex gap-3 align-center">
|
||||
<v-avatar size="48" class="rounded-md bg-lighterror">
|
||||
<Icon icon="solar:box-linear" class="text-error" height="25" />
|
||||
</v-avatar>
|
||||
<h6 class="text-h6 heading">Total Income</h6>
|
||||
</div>
|
||||
<v-row class="mt-4">
|
||||
<v-col cols="6">
|
||||
<h3 class="text-h3 heading">$680</h3>
|
||||
<div class="text-success text-subtitle-2 font-weight-medium mt-2">+18%</div>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<apexchart type="line" height="60" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,77 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { getSecondary } from '@/utils/UpdateColors';
|
||||
import { Icon } from '@iconify/vue';
|
||||
/* Chart */
|
||||
const areachartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 90,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
group: 'sparklines',
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb'
|
||||
},
|
||||
colors: [getSecondary.value],
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
color: [getSecondary.value],
|
||||
gradient: {
|
||||
shadeIntensity: 0,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.4,
|
||||
opacityTo: 0.9,
|
||||
stops: [100]
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
fixed: {
|
||||
enabled: true,
|
||||
position: 'right'
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const areaChart = {
|
||||
series: [
|
||||
{
|
||||
name: "customers",
|
||||
data: [36, 45, 31, 47, 38, 43]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="0" class="bg-lightsecondary overflow-hidden">
|
||||
<v-card-item class="space-20">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<p class="mb-1 font-weight-semibold textPrimary">Users</p>
|
||||
<div class="d-flex align-center gap-3">
|
||||
<h3 class="text-24 heading">14,872</h3>
|
||||
<span class="font-weight-medium textPrimary">+6.4%</span>
|
||||
</div>
|
||||
</div>
|
||||
<v-avatar size="48" class="rounded-md bg-surface">
|
||||
<Icon icon="solar:pie-chart-3-line-duotone" class="text-secondary" height="22" />
|
||||
</v-avatar>
|
||||
</div>
|
||||
</v-card-item>
|
||||
<apexchart type="area" height="90" class="mt-4" :options="areachartOptions" :series="areaChart.series"> </apexchart>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,102 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import moment from 'moment';
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
id: 'sparkline3',
|
||||
type: 'rangeBar',
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb',
|
||||
height: 300,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
distributed: true,
|
||||
dataLabels: {
|
||||
hideOverflowingLabels: false
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
background: {
|
||||
borderRadius: 20
|
||||
},
|
||||
formatter: function (val: moment.MomentInput[], opts: { w: { globals: { labels: { [x: string]: any; }; }; }; dataPointIndex: string | number; }) {
|
||||
var label = opts.w.globals.labels[opts.dataPointIndex];
|
||||
var a = moment(val[0]);
|
||||
var b = moment(val[1]);
|
||||
return label + ': ' + 'Meeting with Sunil';
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
style: { fontSize: '13px', colors: '#adb0bb', fontWeight: '400' }
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
style: { fontSize: '13px', colors: '#adb0bb', fontWeight: '400' }
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderColor: 'rgba(0,0,0,0.05)'
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark'
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
{
|
||||
x: 'Sun',
|
||||
y: [new Date('2024-02-27').getTime(), new Date('2024-03-04').getTime()],
|
||||
fillColor: 'rgba(var(--v-theme-primary))'
|
||||
},
|
||||
{
|
||||
x: 'Mon',
|
||||
y: [new Date('2024-03-04').getTime(), new Date('2024-03-10').getTime()],
|
||||
fillColor: 'rgba(var(--v-theme-grey200),0.8)'
|
||||
},
|
||||
{
|
||||
x: 'Tue',
|
||||
y: [new Date('2024-03-01').getTime(), new Date('2024-03-06').getTime()],
|
||||
fillColor: 'rgba(var(--v-theme-error))'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Weekly Scheduels</v-card-title>
|
||||
<apexchart type="rangeBar" class="rounded-pill-bars" height="300" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,114 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
/* Chart */
|
||||
const chartOptions = computed(() => {
|
||||
return {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
|
||||
height: 220,
|
||||
type: 'bar',
|
||||
offsetX: -8,
|
||||
fontFamily: 'inherit',
|
||||
foreColor: '#adb0bb'
|
||||
},
|
||||
colors: [
|
||||
'rgba(var(--v-theme-grey100))',
|
||||
'rgba(var(--v-theme-grey100))',
|
||||
'rgba(var(--v-theme-grey100))',
|
||||
'rgba(var(--v-theme-primary))',
|
||||
'rgba(var(--v-theme-grey100))',
|
||||
'rgba(var(--v-theme-grey100))',
|
||||
'rgba(var(--v-theme-grey100))'
|
||||
],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 5,
|
||||
columnWidth: '55%',
|
||||
distributed: true,
|
||||
endingShape: 'rounded'
|
||||
}
|
||||
},
|
||||
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: [['Apr'], ['May'], ['June'], ['July'], ['Aug'], ['Sept'], ['Oct']],
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark'
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const Chart = {
|
||||
series: [
|
||||
{
|
||||
name: 'Weekly Stats',
|
||||
data: [20, 15, 18, 25, 10, 15, 20]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Weekly Stats</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1">Overview of Profit</v-card-subtitle>
|
||||
<div class="mx-n6">
|
||||
<apexchart type="bar" height="220" :options="chartOptions" :series="Chart.series"> </apexchart>
|
||||
</div>
|
||||
<v-divider class="mb-7 mt-5"></v-divider>
|
||||
<div class="d-flex justify-space-between align-center gap-2">
|
||||
<div class="d-flex gap-3 align-center">
|
||||
<v-avatar size="48" color="" class="bg-lighterror rounded-md">
|
||||
<Icon icon="solar:course-down-linear" class="text-error" height="25" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<p class="textSecondary">Sales</p>
|
||||
<h5 class="text-subtitle-1 font-weight-bold">$36,850</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-3 align-center">
|
||||
<v-avatar size="48" color="" class="bg-lightprimary rounded-md">
|
||||
<Icon icon="solar:chart-linear" class="text-primary" height="25" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<p class="textSecondary">Expenses</p>
|
||||
<h5 class="text-subtitle-1 font-weight-bold">$4,720</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,399 @@
|
||||
<script lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { defineComponent } from "vue";
|
||||
import FullCalendar from "@fullcalendar/vue3";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
import { format } from "date-fns"; // Import date-fns for formatting dates
|
||||
import type { CalendarOptions } from "@fullcalendar/core";
|
||||
|
||||
let eventGuid = 0;
|
||||
const today = new Date();
|
||||
const y = today.getFullYear();
|
||||
const m = today.getMonth();
|
||||
const d = today.getDate();
|
||||
|
||||
export const INITIAL_EVENTS = [
|
||||
{
|
||||
id: createEventId(),
|
||||
title: "Twice event For two Days",
|
||||
allDay: true,
|
||||
start: new Date(y, m, 3),
|
||||
end: new Date(y, m, 5),
|
||||
color: "#635BFF",
|
||||
},
|
||||
{
|
||||
id: createEventId(),
|
||||
title: "Learn ReactJs",
|
||||
start: new Date(y, m, d + 3, 10, 30),
|
||||
end: new Date(y, m, d + 3, 11, 30),
|
||||
allDay: true,
|
||||
color: "#13DEB9",
|
||||
},
|
||||
{
|
||||
id: createEventId(),
|
||||
title: "Launching MaterialArt Angular",
|
||||
start: new Date(y, m, d + 7, 12, 0),
|
||||
end: new Date(y, m, d + 7, 14, 0),
|
||||
allDay: true,
|
||||
color: "#ff6692",
|
||||
},
|
||||
{
|
||||
id: createEventId(),
|
||||
title: "Lunch with Mr.Raw",
|
||||
start: new Date(y, m, d - 2),
|
||||
end: new Date(y, m, d - 2),
|
||||
allDay: true,
|
||||
color: "#16CDC7",
|
||||
},
|
||||
{
|
||||
id: createEventId(),
|
||||
title: "Going For Party of Sahs",
|
||||
start: new Date(y, m, d + 1, 19, 0),
|
||||
end: new Date(y, m, d + 1, 22, 30),
|
||||
allDay: true,
|
||||
color: "#1a97f5",
|
||||
},
|
||||
{
|
||||
id: createEventId(),
|
||||
title: "Learn Ionic",
|
||||
start: new Date(y, m, 23),
|
||||
end: new Date(y, m, 25),
|
||||
color: "#ffd648",
|
||||
},
|
||||
];
|
||||
|
||||
export function createEventId() {
|
||||
return String(eventGuid++);
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
FullCalendar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menu1: false, // For Start Date
|
||||
menu2: false, // For End Date
|
||||
updateModalShow: false,
|
||||
addModalShow: false,
|
||||
selectedEvent: {
|
||||
id: "",
|
||||
title: "",
|
||||
color: "",
|
||||
start: "",
|
||||
end: "",
|
||||
allDay: true,
|
||||
},
|
||||
newEvent: { title: "", color: "", start: "", end: "", allDay: true },
|
||||
updatedTitle: "",
|
||||
updatedColor: "",
|
||||
|
||||
calendarOptions: {
|
||||
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
|
||||
headerToolbar: {
|
||||
left: "prev,next today",
|
||||
center: "title",
|
||||
right: "dayGridMonth,timeGridWeek,timeGridDay",
|
||||
},
|
||||
initialView: "dayGridMonth",
|
||||
initialEvents: INITIAL_EVENTS,
|
||||
editable: true,
|
||||
selectable: true,
|
||||
selectMirror: true,
|
||||
dayMaxEvents: true,
|
||||
weekends: true,
|
||||
select: this.handleDateSelect,
|
||||
eventClick: this.handleEventClick,
|
||||
eventsSet: this.handleEvents,
|
||||
} as CalendarOptions,
|
||||
|
||||
activeColor: {
|
||||
newEvent: "", // Store the active color for the new event
|
||||
updateEvent: "", // Store the active color for the update event
|
||||
},
|
||||
currentEvents: [],
|
||||
colorOptions: [
|
||||
{ id: 1, label: "Primary", value: "#615dff" },
|
||||
{ id: 2, label: "Success", value: "#39b69a" },
|
||||
{ id: 3, label: "Error", value: "#fc4b6c" },
|
||||
{ id: 4, label: "Secondary", value: "#1a97f5" },
|
||||
{ id: 5, label: "Warning", value: "#fdd43f" },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleDateSelect(selectInfo: any) {
|
||||
this.addModalShow = true;
|
||||
this.newEvent.start = selectInfo.startStr;
|
||||
this.newEvent.end = selectInfo.endStr;
|
||||
this.newEvent.allDay = selectInfo.allDay;
|
||||
},
|
||||
handleEventClick(clickInfo: any) {
|
||||
this.updateModalShow = true;
|
||||
|
||||
const eventStart = clickInfo.event.start ? clickInfo.event.start : null;
|
||||
const eventEnd = clickInfo.event.end ? clickInfo.event.end : null;
|
||||
|
||||
// Safely format the start and end dates if they exist
|
||||
this.selectedEvent = {
|
||||
id: clickInfo.event.id,
|
||||
title: clickInfo.event.title,
|
||||
color: clickInfo.event.backgroundColor,
|
||||
start: eventStart ? format(eventStart, "yyyy-MM-dd") : "", // If the date exists, format it, otherwise use an empty string
|
||||
end: eventEnd ? format(eventEnd, "yyyy-MM-dd") : "", // Handle no end date case
|
||||
allDay: clickInfo.event.allDay,
|
||||
};
|
||||
|
||||
// Set updated values for the modal fields
|
||||
this.updatedTitle = this.selectedEvent.title;
|
||||
this.updatedColor = this.selectedEvent.color;
|
||||
this.activeColor.updateEvent = this.selectedEvent.color;
|
||||
},
|
||||
addEvent() {
|
||||
const calendarApi = (this.$refs.fullCalendar as InstanceType<typeof FullCalendar>).getApi();
|
||||
calendarApi.addEvent({
|
||||
id: createEventId(),
|
||||
title: this.newEvent.title,
|
||||
start: this.newEvent.start,
|
||||
end: this.newEvent.end,
|
||||
allDay: this.newEvent.allDay,
|
||||
backgroundColor: this.newEvent.color,
|
||||
});
|
||||
|
||||
this.addModalShow = false;
|
||||
this.newEvent = {
|
||||
title: "",
|
||||
color: "",
|
||||
start: "",
|
||||
end: "",
|
||||
allDay: true,
|
||||
};
|
||||
},
|
||||
updateEvent() {
|
||||
const calendarApi = (this.$refs.fullCalendar as InstanceType<typeof FullCalendar>).getApi();
|
||||
const event = calendarApi.getEventById(this.selectedEvent.id);
|
||||
|
||||
if (event) {
|
||||
// Ensure updatedStart and updatedEnd are not null before calling getTime()
|
||||
const updatedStart = this.selectedEvent.start ? new Date(this.selectedEvent.start) : null;
|
||||
const updatedEnd = this.selectedEvent.end ? new Date(this.selectedEvent.end) : null;
|
||||
|
||||
if (!updatedStart || isNaN(updatedStart.getTime()) || (updatedEnd && isNaN(updatedEnd.getTime()))) {
|
||||
console.error("Invalid start or end date.");
|
||||
return;
|
||||
}
|
||||
|
||||
event.setProp("title", this.updatedTitle);
|
||||
event.setProp("backgroundColor", this.updatedColor);
|
||||
event.setStart(updatedStart);
|
||||
event.setEnd(updatedEnd);
|
||||
|
||||
this.updateModalShow = false;
|
||||
this.updatedTitle = "";
|
||||
this.updatedColor = "";
|
||||
this.selectedEvent = {
|
||||
id: "",
|
||||
title: "",
|
||||
color: "",
|
||||
start: "",
|
||||
end: "",
|
||||
allDay: true,
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
deleteEvent() {
|
||||
const calendarApi = (this.$refs.fullCalendar as InstanceType<typeof FullCalendar>).getApi();
|
||||
const event = calendarApi.getEventById(this.selectedEvent.id);
|
||||
if (event) {
|
||||
event.remove();
|
||||
this.updateModalShow = false;
|
||||
}
|
||||
},
|
||||
selectColor(color: string, isAddModal: boolean) {
|
||||
if (isAddModal) {
|
||||
this.newEvent.color = color;
|
||||
this.activeColor.newEvent = color; // Set the active color for add modal
|
||||
} else {
|
||||
this.updatedColor = color;
|
||||
this.activeColor.updateEvent = color; // Set the active color for update modal
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card elevation="10">
|
||||
<v-card-item>
|
||||
<div class="demo-app">
|
||||
<div class="demo-app-main">
|
||||
<FullCalendar
|
||||
ref="fullCalendar"
|
||||
class="demo-app-calendar rounded-md"
|
||||
:options="calendarOptions"
|
||||
/>
|
||||
|
||||
<!-- Add Event Modal -->
|
||||
<v-dialog v-model="addModalShow" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
<div class="mb-6 d-flex justify-space-between">
|
||||
<div>
|
||||
<h4 class="text-h4 mb-2">Add Event</h4>
|
||||
<p class="text-muted">
|
||||
Fill in the title, choose the event color, and select the
|
||||
start and end dates to add an event.
|
||||
</p>
|
||||
</div>
|
||||
<v-btn
|
||||
icon="mdi-close"
|
||||
variant="text"
|
||||
class="mt-n2 me-n3"
|
||||
@click="addModalShow = false"
|
||||
></v-btn>
|
||||
</div>
|
||||
|
||||
<!-- Event Title -->
|
||||
<v-label class="mb-2 font-weight-medium">Event Title</v-label>
|
||||
<v-text-field v-model="newEvent.title" outlined required />
|
||||
|
||||
<!-- Start Date -->
|
||||
<v-label class="mb-2 font-weight-medium">Start Date</v-label>
|
||||
<v-text-field
|
||||
v-model="newEvent.start"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
type="date"
|
||||
class="mb-5"
|
||||
required
|
||||
/>
|
||||
|
||||
<!-- End Date -->
|
||||
<v-label class="mb-2 font-weight-medium">End Date</v-label>
|
||||
<v-text-field
|
||||
v-model="newEvent.end"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
type="date"
|
||||
class="mb-5"
|
||||
required
|
||||
/>
|
||||
|
||||
<!-- Event Color -->
|
||||
<v-label class="mb-2 font-weight-medium">Event Color</v-label>
|
||||
<v-list class="d-flex ga-3 pa-0">
|
||||
<v-list-item
|
||||
class="px-0 py-0"
|
||||
:ripple="false"
|
||||
v-for="option in colorOptions"
|
||||
:key="option.id"
|
||||
@click="selectColor(option.value, true)"
|
||||
>
|
||||
<div
|
||||
class="round-30 rounded-circle d-flex justify-center align-center"
|
||||
:style="{
|
||||
backgroundColor: option.value,
|
||||
}"
|
||||
>
|
||||
<CheckIcon
|
||||
size="18"
|
||||
color="#fff"
|
||||
v-if="activeColor.newEvent === option.value"
|
||||
/>
|
||||
</div>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<!-- Add Event Button -->
|
||||
<v-btn @click="addEvent" color="primary" class="mt-6"
|
||||
>Add Event</v-btn
|
||||
>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- Update Event Modal -->
|
||||
<!-- Update Event Modal -->
|
||||
<v-dialog v-model="updateModalShow" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
<div class="mb-6 d-flex justify-space-between">
|
||||
<div>
|
||||
<h4 class="text-h4 mb-2">Update Event</h4>
|
||||
<p class="text-muted">
|
||||
To add Event kindly fill up the title and choose the event
|
||||
color and press the add button
|
||||
</p>
|
||||
</div>
|
||||
<v-btn
|
||||
icon="mdi-close"
|
||||
variant="text"
|
||||
class="mt-n2 me-n3"
|
||||
@click="updateModalShow = false"
|
||||
></v-btn>
|
||||
</div>
|
||||
<v-label class="mb-2 font-weight-medium">Event Title </v-label>
|
||||
<v-text-field v-model="updatedTitle" outlined required />
|
||||
|
||||
<!-- Start Date -->
|
||||
<v-label class="mb-2 font-weight-medium">Start Date</v-label>
|
||||
<v-text-field
|
||||
v-model="selectedEvent.start"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
type="date"
|
||||
required
|
||||
class="mb-5"
|
||||
/>
|
||||
|
||||
<!-- End Date -->
|
||||
<v-label class="mb-2 font-weight-medium">End Date</v-label>
|
||||
<v-text-field
|
||||
v-model="selectedEvent.end"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
type="date"
|
||||
class="mb-5"
|
||||
required
|
||||
/>
|
||||
|
||||
<v-label class="mb-2 font-weight-medium">Event Color </v-label>
|
||||
<v-list class="d-flex ga-3 pa-0">
|
||||
<v-list-item
|
||||
class="px-0 py-0"
|
||||
:ripple="false"
|
||||
v-for="option in colorOptions"
|
||||
:key="option.id"
|
||||
@click="selectColor(option.value, false)"
|
||||
>
|
||||
<div
|
||||
class="round-30 rounded-circle d-flex justify-center align-center"
|
||||
:style="{ backgroundColor: option.value }"
|
||||
>
|
||||
<CheckIcon
|
||||
size="18"
|
||||
color="#fff"
|
||||
v-if="activeColor.updateEvent === option.value"
|
||||
/>
|
||||
</div>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-btn @click="updateEvent" color="primary" class="mt-6">
|
||||
Update Event
|
||||
</v-btn>
|
||||
|
||||
<v-btn @click="deleteEvent" color="error" class="mt-6 ms-4">
|
||||
Delete Event
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import { IconcardData } from '@/_mockApis/components/dashboard/dashboard3';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import type { computed } from 'vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card elevation="10" class="overflow-hidden">
|
||||
<v-card-item>
|
||||
<div class="d-flex gap-4 flex-wrap">
|
||||
<div v-for="card in IconcardData" :key="card.bg" class="flex-1-0">
|
||||
<v-sheet :class="card.bg" class="py-8 px-3 rounded-md text-center">
|
||||
<v-avatar size="48" :color="card.color" class="rounded-md mb-3">
|
||||
<Icon :icon="card.icon" height="25" />
|
||||
</v-avatar>
|
||||
<p class="mb-1">{{ card.title }}</p>
|
||||
<h3 class="text-h3 heading mb-5">{{ card.price }}</h3>
|
||||
<RouterLink
|
||||
:to="card.link"
|
||||
class="bg-surface mt-3 rounded-sm text-decoration-none text-body-2 font-weight-semibold btn-white elevation-9"
|
||||
>View Details</RouterLink
|
||||
>
|
||||
</v-sheet>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -0,0 +1,36 @@
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
import { InfoCircleIcon, XIcon } from 'vue-tabler-icons';
|
||||
export default {
|
||||
setup() {
|
||||
const showSnackbar = ref(false);
|
||||
const close = () => {
|
||||
showSnackbar.value = false;
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
showSnackbar.value = true;
|
||||
}, 1500); // Adjust the delay in milliseconds (here 3 seconds)
|
||||
|
||||
return {
|
||||
showSnackbar,
|
||||
close
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-snackbar rounded="md" color="primary" class="mt-n3" v-model="showSnackbar" location="top right" elevation="0">
|
||||
<div class="d-flex gap-2">
|
||||
<InfoCircleIcon size="22" />
|
||||
<div class="">
|
||||
<h5 class="text-body-1">Welcome to MatDash</h5>
|
||||
<p class="text-12">Easy to costomize the Template!!!</p>
|
||||
</div>
|
||||
</div>
|
||||
<template v-slot:actions>
|
||||
<v-btn variant="text" @click="showSnackbar = false"> <XIcon /> </v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</template>
|
||||
Reference in New Issue
Block a user