Admin panel updated with shadcn-vue components
This commit is contained in:
Simon Pocrnjič
@@ -1,18 +1,26 @@
|
||||
<script setup>
|
||||
import AdminLayout from "@/Layouts/AdminLayout.vue";
|
||||
import { Link } from "@inertiajs/vue3";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
import {
|
||||
faUserGroup,
|
||||
faKey,
|
||||
faGears,
|
||||
faFileWord,
|
||||
faEnvelopeOpenText,
|
||||
faInbox,
|
||||
faAt,
|
||||
faAddressBook,
|
||||
faFileLines,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
UsersIcon,
|
||||
KeyRoundIcon,
|
||||
Settings2Icon,
|
||||
FileTextIcon,
|
||||
MailOpenIcon,
|
||||
InboxIcon,
|
||||
AtSignIcon,
|
||||
BookUserIcon,
|
||||
MessageSquareIcon,
|
||||
ArrowRightIcon,
|
||||
} from "lucide-vue-next";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/Components/ui/card";
|
||||
import { Separator } from "@/Components/ui/separator";
|
||||
|
||||
const cards = [
|
||||
{
|
||||
@@ -22,13 +30,13 @@ const cards = [
|
||||
title: "Uporabniki",
|
||||
description: "Upravljanje uporabnikov in njihovih vlog",
|
||||
route: "admin.users.index",
|
||||
icon: faUserGroup,
|
||||
icon: UsersIcon,
|
||||
},
|
||||
{
|
||||
title: "Novo dovoljenje",
|
||||
description: "Dodaj in konfiguriraj novo dovoljenje",
|
||||
route: "admin.permissions.create",
|
||||
icon: faKey,
|
||||
icon: KeyRoundIcon,
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -39,13 +47,13 @@ const cards = [
|
||||
title: "Nastavitve dokumentov",
|
||||
description: "Privzete sistemske nastavitve za dokumente",
|
||||
route: "admin.document-settings.index",
|
||||
icon: faGears,
|
||||
icon: Settings2Icon,
|
||||
},
|
||||
{
|
||||
title: "Predloge dokumentov",
|
||||
description: "Upravljanje in verzioniranje DOCX predlog",
|
||||
route: "admin.document-templates.index",
|
||||
icon: faFileWord,
|
||||
icon: FileTextIcon,
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -56,19 +64,19 @@ const cards = [
|
||||
title: "Email predloge",
|
||||
description: "Upravljanje HTML / tekst email predlog",
|
||||
route: "admin.email-templates.index",
|
||||
icon: faEnvelopeOpenText,
|
||||
icon: MailOpenIcon,
|
||||
},
|
||||
{
|
||||
title: "Email dnevniki",
|
||||
description: "Pregled poslanih emailov in statusov",
|
||||
route: "admin.email-logs.index",
|
||||
icon: faInbox,
|
||||
icon: InboxIcon,
|
||||
},
|
||||
{
|
||||
title: "Mail profili",
|
||||
description: "SMTP profili, nastavitve in testiranje povezave",
|
||||
route: "admin.mail-profiles.index",
|
||||
icon: faAt,
|
||||
icon: AtSignIcon,
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -79,31 +87,31 @@ const cards = [
|
||||
title: "SMS profili",
|
||||
description: "Nastavitve SMS profilov, testno pošiljanje in stanje kreditov",
|
||||
route: "admin.sms-profiles.index",
|
||||
icon: faGears,
|
||||
icon: Settings2Icon,
|
||||
},
|
||||
{
|
||||
title: "SMS pošiljatelji",
|
||||
description: "Upravljanje nazivov pošiljateljev (Sender ID) za SMS profile",
|
||||
route: "admin.sms-senders.index",
|
||||
icon: faAddressBook,
|
||||
icon: BookUserIcon,
|
||||
},
|
||||
{
|
||||
title: "SMS predloge",
|
||||
description: "Tekstovne predloge za SMS obvestila in opomnike",
|
||||
route: "admin.sms-templates.index",
|
||||
icon: faFileLines,
|
||||
icon: FileTextIcon,
|
||||
},
|
||||
{
|
||||
title: "SMS dnevniki",
|
||||
description: "Pregled poslanih SMSov in statusov",
|
||||
route: "admin.sms-logs.index",
|
||||
icon: faInbox,
|
||||
icon: InboxIcon,
|
||||
},
|
||||
{
|
||||
title: "SMS paketi",
|
||||
description: "Kreiranje in pošiljanje serijskih SMS paketov",
|
||||
route: "admin.packages.index",
|
||||
icon: faInbox,
|
||||
icon: MessageSquareIcon,
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -112,44 +120,50 @@ const cards = [
|
||||
|
||||
<template>
|
||||
<AdminLayout title="Administrator">
|
||||
<div class="space-y-14">
|
||||
<section
|
||||
v-for="(group, i) in cards"
|
||||
:key="group.category"
|
||||
:class="[i > 0 ? 'pt-6 border-t border-gray-200/70' : '']"
|
||||
>
|
||||
<h2 class="text-xs font-semibold tracking-wider uppercase text-gray-500 mb-4">
|
||||
{{ group.category }}
|
||||
</h2>
|
||||
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div class="space-y-8">
|
||||
<div v-for="(group, i) in cards" :key="group.category">
|
||||
<Separator v-if="i > 0" class="my-8" />
|
||||
<div class="mb-6">
|
||||
<h2
|
||||
class="text-xs font-semibold tracking-wider uppercase text-muted-foreground"
|
||||
>
|
||||
{{ group.category }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<Link
|
||||
v-for="item in group.items"
|
||||
:key="item.title"
|
||||
:href="route(item.route)"
|
||||
class="group relative overflow-hidden p-5 rounded-lg border bg-white hover:border-indigo-300 hover:shadow transition focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
class="group"
|
||||
>
|
||||
<div class="flex items-start gap-4">
|
||||
<span
|
||||
class="inline-flex items-center justify-center w-10 h-10 rounded-md bg-indigo-50 text-indigo-600 group-hover:bg-indigo-100"
|
||||
>
|
||||
<FontAwesomeIcon :icon="item.icon" class="w-5 h-5" />
|
||||
</span>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-sm mb-1 flex items-center gap-2">
|
||||
{{ item.title }}
|
||||
<span
|
||||
class="opacity-0 group-hover:opacity-100 transition text-indigo-500 text-[10px] font-medium"
|
||||
>→</span
|
||||
<Card class="h-full transition-all hover:border-primary hover:shadow-md">
|
||||
<CardHeader class="pb-3">
|
||||
<div class="flex items-start gap-4">
|
||||
<div
|
||||
class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 text-primary group-hover:bg-primary/20 transition-colors shrink-0"
|
||||
>
|
||||
</h3>
|
||||
<p class="text-xs text-gray-500 leading-relaxed line-clamp-3">
|
||||
<component :is="item.icon" class="w-5 h-5" />
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<CardTitle class="text-base flex items-center gap-2 group">
|
||||
{{ item.title }}
|
||||
<ArrowRightIcon
|
||||
class="w-3.5 h-3.5 opacity-0 group-hover:opacity-100 transition-opacity text-primary"
|
||||
/>
|
||||
</CardTitle>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription class="text-sm leading-relaxed line-clamp-2">
|
||||
{{ item.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardDescription>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user