80 lines
2.9 KiB
Svelte
80 lines
2.9 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import { onMount } from 'svelte';
|
||
|
|
import { goto } from '$app/navigation';
|
||
|
|
import { auth } from '$stores/auth';
|
||
|
|
import { LayoutDashboard, Users, FlaskConical, ClipboardList, TestTube, Settings, LogOut } from 'lucide-svelte';
|
||
|
|
|
||
|
|
let user: any = null;
|
||
|
|
|
||
|
|
auth.subscribe(state => {
|
||
|
|
user = state.user;
|
||
|
|
});
|
||
|
|
|
||
|
|
function handleLogout() {
|
||
|
|
auth.logout();
|
||
|
|
goto('/login');
|
||
|
|
}
|
||
|
|
|
||
|
|
const menuItems = [
|
||
|
|
{ name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
|
||
|
|
{ name: 'Patients', href: '/patients', icon: Users },
|
||
|
|
{ name: 'Orders', href: '/orders', icon: ClipboardList },
|
||
|
|
{ name: 'Tests', href: '/tests', icon: FlaskConical },
|
||
|
|
{ name: 'Results', href: '/results', icon: TestTube },
|
||
|
|
{ name: 'Settings', href: '/settings', icon: Settings },
|
||
|
|
];
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<aside class="fixed left-0 top-0 h-full w-64 bg-base-200 border-r border-base-300 flex flex-col z-50">
|
||
|
|
<!-- Logo -->
|
||
|
|
<div class="p-6 border-b border-base-300">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<div class="w-10 h-10 rounded-xl bg-emerald-100 flex items-center justify-center">
|
||
|
|
<svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h1 class="text-xl font-bold text-emerald-600">CLQMS</h1>
|
||
|
|
<p class="text-xs text-base-content/60">Laboratory System</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Navigation -->
|
||
|
|
<nav class="flex-1 p-4">
|
||
|
|
<ul class="menu menu-vertical gap-2">
|
||
|
|
{#each menuItems as item}
|
||
|
|
<li>
|
||
|
|
<a href={item.href} class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-emerald-50 hover:text-emerald-600 transition-colors">
|
||
|
|
<svelte:component this={item.icon} class="w-5 h-5" />
|
||
|
|
<span>{item.name}</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
{/each}
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- User Section -->
|
||
|
|
<div class="p-4 border-t border-base-300">
|
||
|
|
<div class="flex items-center gap-3 p-3 rounded-lg bg-base-100">
|
||
|
|
<div class="w-10 h-10 rounded-full bg-emerald-100 flex items-center justify-center">
|
||
|
|
<span class="text-emerald-600 font-semibold">
|
||
|
|
{user?.username?.charAt(0).toUpperCase() || 'U'}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex-1 min-w-0">
|
||
|
|
<p class="text-sm font-medium truncate">{user?.username || 'User'}</p>
|
||
|
|
<p class="text-xs text-base-content/60 capitalize">{user?.role || 'User'}</p>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
on:click={handleLogout}
|
||
|
|
class="btn btn-ghost btn-sm btn-circle"
|
||
|
|
title="Logout"
|
||
|
|
>
|
||
|
|
<LogOut class="w-4 h-4" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</aside>
|