mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-15 17:24:10 +00:00
88adfe0e50
Define 13 semantic color tokens (surface, text, border, hover) with light/dark values in themes.css. Register with Tailwind via @theme inline. Migrate all 335 Vue files from hardcoded gray/white classes to semantic tokens. Add theme toggle (sun/moon/system) in user avatar dropdown. Replace @tailwindcss/forms with custom form reset using theme vars. Add status badge and alert tokens for dark mode. Theme-aware chart grid/labels, skeleton placeholders, and editor. Inline script in <head> prevents flash of wrong theme on load. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
105 lines
3.1 KiB
Vue
105 lines
3.1 KiB
Vue
<template>
|
|
<BasePage>
|
|
<BasePageHeader :title="$t('navigation.dashboard')">
|
|
<BaseBreadcrumb>
|
|
<BaseBreadcrumbItem
|
|
:title="$t('navigation.administration')"
|
|
to="/admin/administration/dashboard"
|
|
active
|
|
/>
|
|
</BaseBreadcrumb>
|
|
</BasePageHeader>
|
|
|
|
<div v-if="isLoading" class="flex justify-center py-16">
|
|
<BaseGlobalLoader />
|
|
</div>
|
|
|
|
<div v-else class="grid grid-cols-1 gap-6 mt-6 md:grid-cols-2 lg:grid-cols-3">
|
|
<!-- App Version -->
|
|
<BaseCard>
|
|
<template #header>
|
|
<div class="flex items-center">
|
|
<BaseIcon name="ServerIcon" class="w-5 h-5 mr-2 text-subtle" />
|
|
<span class="font-medium text-body">{{ $t('general.app_version') }}</span>
|
|
</div>
|
|
</template>
|
|
<p class="text-2xl font-semibold text-heading">
|
|
{{ data.app_version }}
|
|
</p>
|
|
</BaseCard>
|
|
|
|
<!-- PHP Version -->
|
|
<BaseCard>
|
|
<template #header>
|
|
<div class="flex items-center">
|
|
<BaseIcon name="CodeBracketIcon" class="w-5 h-5 mr-2 text-subtle" />
|
|
<span class="font-medium text-body">PHP</span>
|
|
</div>
|
|
</template>
|
|
<p class="text-2xl font-semibold text-heading">
|
|
{{ data.php_version }}
|
|
</p>
|
|
</BaseCard>
|
|
|
|
<!-- Database -->
|
|
<BaseCard>
|
|
<template #header>
|
|
<div class="flex items-center">
|
|
<BaseIcon name="CircleStackIcon" class="w-5 h-5 mr-2 text-subtle" />
|
|
<span class="font-medium text-body">{{ $t('general.database') }}</span>
|
|
</div>
|
|
</template>
|
|
<p class="text-2xl font-semibold text-heading">
|
|
{{ data.database?.driver?.toUpperCase() }}
|
|
</p>
|
|
<p class="text-sm text-muted mt-1">
|
|
{{ data.database?.version }}
|
|
</p>
|
|
</BaseCard>
|
|
|
|
<!-- Companies -->
|
|
<BaseCard>
|
|
<template #header>
|
|
<div class="flex items-center">
|
|
<BaseIcon name="BuildingOfficeIcon" class="w-5 h-5 mr-2 text-subtle" />
|
|
<span class="font-medium text-body">{{ $t('navigation.companies') }}</span>
|
|
</div>
|
|
</template>
|
|
<p class="text-2xl font-semibold text-heading">
|
|
{{ data.counts?.companies }}
|
|
</p>
|
|
</BaseCard>
|
|
|
|
<!-- Users -->
|
|
<BaseCard>
|
|
<template #header>
|
|
<div class="flex items-center">
|
|
<BaseIcon name="UsersIcon" class="w-5 h-5 mr-2 text-subtle" />
|
|
<span class="font-medium text-body">{{ $t('navigation.all_users') }}</span>
|
|
</div>
|
|
</template>
|
|
<p class="text-2xl font-semibold text-heading">
|
|
{{ data.counts?.users }}
|
|
</p>
|
|
</BaseCard>
|
|
</div>
|
|
</BasePage>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import http from '@/scripts/http'
|
|
|
|
const isLoading = ref(true)
|
|
const data = ref({})
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const response = await http.get('/api/v1/super-admin/dashboard')
|
|
data.value = response.data
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
})
|
|
</script>
|