109 lines
4.6 KiB
Vue
109 lines
4.6 KiB
Vue
<script setup>
|
|
import DashboardLayout from '../layouts/DashboardLayout.vue'
|
|
|
|
const stats = [
|
|
{ label: "Today's Money", value: '$53,000', change: '+55%', positive: true, icon: 'weekend', gradient: 'primary' },
|
|
{ label: "Today's Users", value: '2,300', change: '+3%', positive: true, icon: 'leaderboard',gradient: 'info' },
|
|
{ label: 'New Clients', value: '+3,462', change: '-2%', positive: false,icon: 'store', gradient: 'success' },
|
|
{ label: 'Sales', value: '$103,430',change: '+5%', positive: true, icon: 'person', gradient: 'danger' },
|
|
]
|
|
|
|
const projects = [
|
|
{ name: 'Material UI XD', budget: '$14,000', progress: 60, status: 'working' },
|
|
{ name: 'Add Progress Track', budget: '$3,000', progress: 10, status: 'cancelled' },
|
|
{ name: 'Fix Platform Errors',budget: 'Not set', progress: 100, status: 'done' },
|
|
{ name: 'Launch Mobile App', budget: '$20,500', progress: 100, status: 'done' },
|
|
{ name: 'Add the New Pricing',budget: '$500', progress: 25, status: 'working' },
|
|
{ name: 'Redesign New Online',budget: '$2,000', progress: 40, status: 'cancelled' },
|
|
]
|
|
|
|
const statusClass = {
|
|
done: 'bg-success/10 text-success',
|
|
working: 'bg-info/10 text-info',
|
|
cancelled: 'bg-danger/10 text-danger',
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<DashboardLayout>
|
|
<!-- Stat cards -->
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-4 mt-6">
|
|
<div
|
|
v-for="stat in stats"
|
|
:key="stat.label"
|
|
class="rounded-2xl bg-white p-4 shadow-soft-md"
|
|
>
|
|
<div class="flex items-start justify-between">
|
|
<div
|
|
class="-mt-10 flex h-16 w-16 shrink-0 items-center justify-center rounded-xl shadow-soft-md"
|
|
:class="`bg-gradient-${stat.gradient} shadow-${stat.gradient}`"
|
|
>
|
|
<span class="material-icons text-3xl text-white">{{ stat.icon }}</span>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-sm font-medium text-secondary">{{ stat.label }}</p>
|
|
<h4 class="text-2xl font-bold text-dark">{{ stat.value }}</h4>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 border-t border-gray-100 pt-3">
|
|
<p class="text-sm text-secondary">
|
|
<span :class="stat.positive ? 'text-success' : 'text-danger'" class="font-medium">
|
|
{{ stat.change }}
|
|
</span>
|
|
than last week
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Projects table -->
|
|
<div class="mt-6 rounded-2xl bg-white shadow-soft-md">
|
|
<div class="flex items-center justify-between border-b border-gray-100 px-6 py-4">
|
|
<h6 class="text-sm font-bold text-dark">Projects</h6>
|
|
<p class="text-xs text-secondary">
|
|
<span class="font-medium text-success">30 done</span> this month
|
|
</p>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left text-sm">
|
|
<thead>
|
|
<tr class="border-b border-gray-100">
|
|
<th class="px-6 py-3 text-xs font-bold uppercase tracking-wide text-secondary">Project</th>
|
|
<th class="px-6 py-3 text-xs font-bold uppercase tracking-wide text-secondary">Budget</th>
|
|
<th class="px-6 py-3 text-xs font-bold uppercase tracking-wide text-secondary">Status</th>
|
|
<th class="px-6 py-3 text-xs font-bold uppercase tracking-wide text-secondary">Completion</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="(p, i) in projects"
|
|
:key="p.name"
|
|
:class="i < projects.length - 1 ? 'border-b border-gray-100' : ''"
|
|
>
|
|
<td class="px-6 py-3 font-medium text-dark">{{ p.name }}</td>
|
|
<td class="px-6 py-3 text-secondary">{{ p.budget }}</td>
|
|
<td class="px-6 py-3">
|
|
<span class="rounded-full px-2.5 py-1 text-xs font-medium capitalize" :class="statusClass[p.status]">
|
|
{{ p.status }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-3">
|
|
<div class="flex items-center gap-3">
|
|
<div class="h-1.5 flex-1 overflow-hidden rounded-full bg-gray-200">
|
|
<div
|
|
class="h-full rounded-full bg-gradient-info"
|
|
:style="{ width: `${p.progress}%` }"
|
|
/>
|
|
</div>
|
|
<span class="w-8 shrink-0 text-right text-xs font-medium text-dark">{{ p.progress }}%</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</DashboardLayout>
|
|
</template>
|