ragil/Matdash_nuxt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Firs Commit

Browse Source
This commit is contained in:
STIM RSSA
2025-03-21 09:37:29 +07:00
commit b5f22f157e
98 changed files with 16210 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
components/dashboard/BlogCards.vue Normal file
View File

@@ -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>

35
components/dashboard/DailyActivities.vue Normal file
View File

@@ -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>

21
components/dashboard/NewCustomer.vue Normal file
View File

@@ -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>

115
components/dashboard/RevenueCard.vue Normal file
View File

@@ -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 2024');
const items = ref(['Sept 2024', 'Oct 2024', 'Nov 2024']);
/* 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: '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">
<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>

65
components/dashboard/RevenueProducts.vue Normal file
View File

@@ -0,0 +1,65 @@
<script setup lang="ts">
import { ref } from 'vue';
import { Icon } from '@iconify/vue';
import { RevenueProjectsData } from '@/data/dashboard/dashboardData';
import { selectUser } from '~/data/user/userData';
import { storeToRefs } from 'pinia';
const {Users} = storeToRefs(selectUser());
const {loadUserSelect} = selectUser();
onMounted(()=> {
loadUserSelect();
console.log(Users);
})
</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">No</th>
<th class="text-body-1">Nama</th>
<th class="text-body-1">Umur</th>
<th class="text-body-1">Alamat</th>
<th class="text-body-1">Jenis Kelamin</th>
<th class="text-body-1">Agama</th>
<th class="text-body-1">Aksi</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,i) in Users" :key="item.ID" class="month-item">
<td>
<p> {{ i + 1 }}</p>
</td>
<td>
<p> {{ item.Name }}</p>
</td>
<td>
<p> {{ item.Age }}</p>
</td>
<td>
<p> {{ item.Address }}</p>
</td>
<td>
<p> {{ item.Gender }}</p>
</td>
<td>
<p> {{ item.Religion }}</p>
</td>
<td></td>
</tr>
</tbody>
</template>
</v-table>
</div>
</v-card-item>
</v-card>
</template>

68
components/dashboard/TotalIncome.vue Normal file
View File

@@ -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>