danil-bodry/iiko-connector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up frontend

Browse Source
This commit is contained in:
Danil Bodry
2026-04-21 03:57:59 +03:00
parent b9d1afad42
commit 82a932dd2b
14 changed files with 492 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/views/Dashboard.vue
View File

@@ -5,7 +5,7 @@
<div class="card hover:shadow-md transition-shadow">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-600">Total Users</p>
<p class="text-sm font-medium text-gray-600">{{ t('dashboard.totalUsers') }}</p>
<p class="text-3xl font-bold text-gray-900 mt-2">{{ stats.totalUsers }}</p>
</div>
<div class="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center">
@@ -16,14 +16,14 @@
</div>
<div class="mt-4 flex items-center text-sm">
<span class="text-green-600 font-medium">↑ {{ userGrowth }}%</span>
<span class="text-gray-500 ml-2">vs last month</span>
<span class="text-gray-500 ml-2">{{ t('dashboard.vsLastMonth') }}</span>
</div>
</div>
<div class="card hover:shadow-md transition-shadow">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-600">Active Sessions</p>
<p class="text-sm font-medium text-gray-600">{{ t('dashboard.activeSessions') }}</p>
<p class="text-3xl font-bold text-gray-900 mt-2">{{ stats.activeSessions }}</p>
</div>
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
@@ -34,14 +34,14 @@
</div>
<div class="mt-4 flex items-center text-sm">
<span class="text-green-600 font-medium">↑ {{ sessionGrowth }}%</span>
<span class="text-gray-500 ml-2">from last hour</span>
<span class="text-gray-500 ml-2">{{ t('dashboard.fromLastHour') }}</span>
</div>
</div>
<div class="card hover:shadow-md transition-shadow">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-600">System Health</p>
<p class="text-sm font-medium text-gray-600">{{ t('dashboard.systemHealth') }}</p>
<p class="text-3xl font-bold text-gray-900 mt-2">{{ stats.systemHealth }}%</p>
</div>
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
@@ -63,7 +63,7 @@
<div class="card hover:shadow-md transition-shadow">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-600">Uptime</p>
<p class="text-sm font-medium text-gray-600">{{ t('dashboard.uptime') }}</p>
<p class="text-3xl font-bold text-gray-900 mt-2">{{ stats.uptime }}</p>
</div>
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
@@ -75,7 +75,7 @@
<div class="mt-4 flex items-center text-sm">
<div class="flex items-center text-green-600">
<div class="w-2 h-2 bg-green-600 rounded-full mr-2"></div>
Operational
{{ t('dashboard.operational') }}
</div>
</div>
</div>
@@ -86,10 +86,10 @@
<!-- User Activity Chart -->
<div class="card">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold text-gray-900">User Activity (Last 7 days)</h3>
<h3 class="text-lg font-semibold text-gray-900">{{ t('dashboard.userActivity') }}</h3>
<div class="flex items-center space-x-2">
<button @click="activityPeriod = 'week'" class="text-xs px-2 py-1 rounded" :class="activityPeriod === 'week' ? 'bg-primary-100 text-primary-700' : 'text-gray-500'">Week</button>
<button @click="activityPeriod = 'month'" class="text-xs px-2 py-1 rounded" :class="activityPeriod === 'month' ? 'bg-primary-100 text-primary-700' : 'text-gray-500'">Month</button>
<button @click="activityPeriod = 'week'" class="text-xs px-2 py-1 rounded" :class="activityPeriod === 'week' ? 'bg-primary-100 text-primary-700' : 'text-gray-500'">{{ t('dashboard.week') }}</button>
<button @click="activityPeriod = 'month'" class="text-xs px-2 py-1 rounded" :class="activityPeriod === 'month' ? 'bg-primary-100 text-primary-700' : 'text-gray-500'">{{ t('dashboard.month') }}</button>
</div>
</div>
<div class="flex items-end space-x-2 h-48">
@@ -102,7 +102,7 @@
<!-- System Services Status -->
<div class="card">
<h3 class="text-lg font-semibold text-gray-900 mb-4">System Services</h3>
<h3 class="text-lg font-semibold text-gray-900 mb-4">{{ t('dashboard.systemServices') }}</h3>
<div class="space-y-4">
<div v-for="service in systemServices" :key="service.name" class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
<div class="flex items-center space-x-3">
@@ -112,7 +112,7 @@
<div class="flex items-center space-x-4">
<span class="text-sm text-gray-500">{{ service.latency }}ms</span>
<span class="text-xs px-2 py-1 rounded-full" :class="service.status === 'up' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'">
{{ service.status === 'up' ? 'Operational' : 'Down' }}
{{ service.status === 'up' ? t('dashboard.operational') : t('dashboard.down') }}
</span>
</div>
</div>
@@ -124,8 +124,8 @@
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="card">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold text-gray-900">Recent Users</h3>
<router-link to="/users" class="text-sm text-primary-600 hover:text-primary-700">View all →</router-link>
<h3 class="text-lg font-semibold text-gray-900">{{ t('dashboard.recentUsers') }}</h3>
<router-link to="/users" class="text-sm text-primary-600 hover:text-primary-700">{{ t('dashboard.viewAll') }} →</router-link>
</div>
<div class="space-y-3">
<div v-for="user in recentUsers" :key="user.id" class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors">
@@ -138,16 +138,16 @@
<p class="text-sm text-gray-500">{{ formatDate(user.created) }}</p>
</div>
</div>
<span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-700 rounded-full">New</span>
<span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-700 rounded-full">{{ t('dashboard.new') }}</span>
</div>
<div v-if="recentUsers.length === 0" class="text-center text-gray-500 py-8">No users yet</div>
<div v-if="recentUsers.length === 0" class="text-center text-gray-500 py-8">{{ t('dashboard.noUsers') }}</div>
</div>
</div>
<div class="card">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold text-gray-900">Recent Restaurants</h3>
<router-link to="/restaurants" class="text-sm text-primary-600 hover:text-primary-700">View all →</router-link>
<h3 class="text-lg font-semibold text-gray-900">{{ t('dashboard.recentRestaurants') }}</h3>
<router-link to="/restaurants" class="text-sm text-primary-600 hover:text-primary-700">{{ t('dashboard.viewAll') }} →</router-link>
</div>
<div class="space-y-3">
<div v-for="rest in recentRestaurants" :key="rest.id" class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors">
@@ -166,7 +166,7 @@
<span class="text-xs text-gray-500">{{ formatDate(rest.created) }}</span>
</div>
</div>
<div v-if="recentRestaurants.length === 0" class="text-center text-gray-500 py-8">No restaurants yet</div>
<div v-if="recentRestaurants.length === 0" class="text-center text-gray-500 py-8">{{ t('dashboard.noRestaurants') }}</div>
</div>
</div>
</div>
@@ -176,6 +176,8 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import AppLayout from '../components/Layout/AppLayout.vue';
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const stats = ref({ totalUsers: 0, activeSessions: 0, systemHealth: 100, uptime: '99.9%' });
const userGrowth = ref(12);
@@ -229,9 +231,9 @@ function formatDate(dateStr: string) {
const date = new Date(dateStr);
const now = new Date();
const diffDays = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24));
if (diffDays === 0) return 'Today';
if (diffDays === 1) return 'Yesterday';
if (diffDays < 7) return `${diffDays} days ago`;
if (diffDays === 0) return t('dashboard.today');
if (diffDays === 1) return t('dashboard.yesterday');
if (diffDays < 7) return `${diffDays} ${t('dashboard.daysAgo')}`;
return date.toLocaleDateString();
}