authorized fix keycloak sidebarItem
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user