kincses/service-finder
1
0
Fork 0
Code Issues 53 Pull Requests Packages Projects 2 Releases Wiki Activity

2026.06.04 frontend építés közben

Browse Source
This commit is contained in:
Roo
2026-06-04 07:26:22 +00:00
parent 7adf6cc3e3
commit 59a30ac428
3302 changed files with 24091 additions and 1771 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
frontend/src/layouts/AdminLayout.vue Normal file
View File

@@ -0,0 +1,195 @@
<template>
<div class="admin-layout min-h-screen bg-gray-900 text-gray-100">
<!-- Sidebar -->
<aside class="fixed inset-y-0 left-0 w-64 bg-gray-800 border-r border-gray-700 z-50">
<div class="flex flex-col h-full">
<!-- Logo -->
<div class="p-6 border-b border-gray-700">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
<span class="text-xl font-bold">SF</span>
</div>
<div>
<div class="text-xl font-bold">Service Finder</div>
<div class="text-xs text-gray-400">Admin Panel</div>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="flex-1 p-4 space-y-2">
<router-link
to="/admin"
class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gray-700 transition-colors"
:class="{ 'bg-blue-900/50 hover:bg-blue-900/70': $route.path === '/admin' }"
>
<span class="text-xl">📊</span>
<span class="font-medium">Dashboard</span>
</router-link>
<router-link
to="/admin/users"
class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gray-700 transition-colors"
>
<span class="text-xl">👥</span>
<span class="font-medium">User Management</span>
</router-link>
<router-link
to="/admin/vehicles"
class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gray-700 transition-colors"
>
<span class="text-xl">🚗</span>
<span class="font-medium">Vehicle Catalog</span>
</router-link>
<router-link
to="/admin/translations"
class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gray-700 transition-colors"
>
<span class="text-xl">🌐</span>
<span class="font-medium">i18n Manager</span>
</router-link>
<router-link
to="/admin/system"
class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gray-700 transition-colors"
>
<span class="text-xl">⚙️</span>
<span class="font-medium">System Settings</span>
</router-link>
<router-link
to="/admin/audit"
class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gray-700 transition-colors"
>
<span class="text-xl">📋</span>
<span class="font-medium">Audit Logs</span>
</router-link>
<div class="pt-6 border-t border-gray-700">
<div class="px-4 py-2 text-xs text-gray-500 uppercase tracking-wider">Tools</div>
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gray-700 transition-colors">
<span class="text-xl">🔍</span>
<span class="font-medium">Database Explorer</span>
</a>
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-gray-700 transition-colors">
<span class="text-xl">📈</span>
<span class="font-medium">Analytics</span>
</a>
</div>
</nav>
<!-- User Profile -->
<div class="p-4 border-t border-gray-700">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-gray-600 to-gray-800 flex items-center justify-center">
<span class="text-lg">AD</span>
</div>
<div class="flex-1">
<div class="font-medium">Admin User</div>
<div class="text-xs text-gray-400">Super Administrator</div>
</div>
<button class="p-2 hover:bg-gray-700 rounded-lg transition-colors">
<span class="text-xl">⚙️</span>
</button>
</div>
</div>
</div>
</aside>
<!-- Main Content -->
<div class="pl-64">
<!-- Top Bar -->
<header class="sticky top-0 z-40 bg-gray-800/90 backdrop-blur-sm border-b border-gray-700">
<div class="flex justify-between items-center px-8 py-4">
<div class="flex items-center space-x-4">
<h1 class="text-2xl font-bold">{{ pageTitle }}</h1>
<div class="text-sm px-3 py-1 bg-gray-700 rounded-full">
{{ currentTime }}
</div>
</div>
<div class="flex items-center space-x-4">
<slot name="header-controls">
<LanguageSwitcher />
<ModeSwitcher />
</slot>
<button class="px-4 py-2 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-lg hover:opacity-90 transition-opacity">
Quick Actions
</button>
</div>
</div>
</header>
<!-- Content Area -->
<main class="p-8">
<div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
<slot />
</div>
<!-- Footer Stats -->
<div class="mt-8 grid grid-cols-4 gap-4">
<div class="bg-gray-800/50 rounded-lg p-4 border border-gray-700">
<div class="text-sm text-gray-400">System Status</div>
<div class="text-2xl font-bold text-green-400">Operational</div>
</div>
<div class="bg-gray-800/50 rounded-lg p-4 border border-gray-700">
<div class="text-sm text-gray-400">API Response</div>
<div class="text-2xl font-bold">42ms</div>
</div>
<div class="bg-gray-800/50 rounded-lg p-4 border border-gray-700">
<div class="text-sm text-gray-400">Active Sessions</div>
<div class="text-2xl font-bold">127</div>
</div>
<div class="bg-gray-800/50 rounded-lg p-4 border border-gray-700">
<div class="text-sm text-gray-400">Uptime</div>
<div class="text-2xl font-bold">99.8%</div>
</div>
</div>
</main>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import LanguageSwitcher from '../components/LanguageSwitcher.vue'
import ModeSwitcher from '../components/ModeSwitcher.vue'
const route = useRoute()
const currentTime = ref('')
const pageTitle = computed(() => {
const name = route.name?.toString() || 'Dashboard'
return name.charAt(0).toUpperCase() + name.slice(1)
})
function updateTime() {
const now = new Date()
currentTime.value = now.toLocaleTimeString('en-US', {
hour12: false,
hour: '2-digit',
minute: '2-digit'
})
}
let intervalId: number
onMounted(() => {
updateTime()
intervalId = setInterval(updateTime, 1000)
})
onUnmounted(() => {
clearInterval(intervalId)
})
</script>
<style scoped>
.admin-layout {
font-family: 'Inter', sans-serif;
}
</style>