add from v002
This commit is contained in:
169
001.FRONTEND/src/components/AkcijePanel.astro
Normal file
169
001.FRONTEND/src/components/AkcijePanel.astro
Normal file
@@ -0,0 +1,169 @@
|
||||
---
|
||||
// src/components/AkcijePanel.astro
|
||||
|
||||
import Button from './Button.astro';
|
||||
|
||||
interface Props {
|
||||
tip: 'dashboard' | 'radni-nalog' | 'stroj' | 'vlasnik';
|
||||
podaci: any;
|
||||
}
|
||||
|
||||
const { tip, podaci } = Astro.props;
|
||||
|
||||
// Pomoćna funkcija za formatiranje datuma
|
||||
const formatDate = (date: string) =>
|
||||
new Date(date).toLocaleDateString('hr-HR', { day: '2-digit', month: '2-digit', year: 'numeric' });
|
||||
---
|
||||
|
||||
<aside class="space-y-6">
|
||||
<!-- SEKCIJA 1: GLAVNE AKCIJE (Uvijek vidljivo) -->
|
||||
|
||||
<div class="grid gap-3">
|
||||
{tip === 'dashboard' && (
|
||||
<>
|
||||
<div class="space-y-6">
|
||||
<h2 class="text-xl font-black text-gray-900 dark:text-white uppercase tracking-tight italic px-4">
|
||||
Upravljanje
|
||||
</h2>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<a href="/operativa/radni-nalozi/novi" class="group bg-blue-600 text-white p-6 rounded-[2rem] flex items-center gap-4 hover:bg-blue-700 transition-all shadow-xl shadow-blue-500/20 active:scale-95">
|
||||
<div class="bg-white text-blue-600 w-12 h-12 rounded-2xl flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform shrink-0">
|
||||
<i class="fa-solid fa-plus text-xl"></i>
|
||||
</div>
|
||||
<div class="flex flex-col text-left">
|
||||
<span class="font-black uppercase text-xs tracking-widest leading-none">Novi nalog</span>
|
||||
<span class="text-[10px] opacity-70 mt-1 italic font-bold uppercase">Inicijaliziraj nalog</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/fleet/vozila" class="group bg-white dark:bg-gray-800 text-gray-900 dark:text-white p-6 rounded-[2rem] flex items-center gap-4 hover:border-blue-600 border border-gray-100 dark:border-gray-700 transition-all shadow-sm active:scale-95">
|
||||
<div class="bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 w-12 h-12 rounded-2xl flex items-center justify-center group-hover:rotate-12 transition-transform shrink-0">
|
||||
<i class="fa-solid fa-truck-pickup text-xl"></i>
|
||||
</div>
|
||||
<div class="flex flex-col text-left">
|
||||
<span class="font-black uppercase text-xs tracking-widest dark:text-white leading-none">Vozni park</span>
|
||||
<span class="text-[10px] text-gray-400 mt-1 italic font-bold uppercase tracking-tighter">Status flote</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/kupci/svi" class="group bg-white dark:bg-gray-800 text-gray-900 dark:text-white p-6 rounded-[2rem] flex items-center gap-4 hover:border-indigo-600 border border-gray-100 dark:border-gray-700 transition-all shadow-sm active:scale-95">
|
||||
<div class="bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 w-12 h-12 rounded-2xl flex items-center justify-center group-hover:rotate-12 transition-transform shrink-0">
|
||||
<i class="fa-solid fa-address-book text-xl"></i>
|
||||
</div>
|
||||
<div class="flex flex-col text-left">
|
||||
<span class="font-black uppercase text-xs tracking-widest dark:text-white leading-none">Klijenti</span>
|
||||
<span class="text-[10px] text-gray-400 mt-1 italic font-bold uppercase tracking-tighter">Baza partnera</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="mt-10 pt-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<Button variant="primary" class="w-full justify-center gap-2 !rounded-2xl py-4 uppercase font-black italic tracking-widest">
|
||||
<i class="fa-solid fa-print"></i> Ispis naloga
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tip === 'radni-nalog' && (
|
||||
<>
|
||||
<button class="w-full py-4 bg-blue-600 text-white rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-blue-700 transition-all shadow-lg shadow-blue-500/20">
|
||||
<i class="fa-solid fa-check-double mr-2"></i> Završi nalog
|
||||
</button>
|
||||
<button class="w-full py-4 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-gray-200 transition-all">
|
||||
<i class="fa-solid fa-print mr-2"></i> Ispis (PDF)
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tip === 'stroj' && (
|
||||
<>
|
||||
<button class="w-full py-4 bg-green-600 text-white rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-green-700 transition-all shadow-lg shadow-green-500/20">
|
||||
<i class="fa-solid fa-plus mr-2"></i> Novi Radni Nalog
|
||||
</button>
|
||||
<button class="w-full py-4 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-2xl font-black uppercase text-[11px] tracking-widest">
|
||||
<i class="fa-solid fa-file-contract mr-2"></i> Atesti i Dokumenti
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tip === 'vlasnik' && (
|
||||
<>
|
||||
<!-- AKCIJE ZA KUPCA -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-[2.5rem] p-6 shadow-xl border border-gray-100 dark:border-gray-700 mb-6">
|
||||
<label class="text-[9px] font-black uppercase text-indigo-600 block mb-4 tracking-[0.2em] italic">Upravljanje klijentom</label>
|
||||
<div class="grid gap-3">
|
||||
<Button class="w-full py-4 bg-indigo-600 text-white rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-500/20">
|
||||
<i class="fa-solid fa-pen-to-square mr-2"></i> Uredi podatke
|
||||
</Button>
|
||||
<a href={`tel:${podaci.telefon}`} class="w-full py-4 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-gray-200 transition-all text-center no-underline">
|
||||
<i class="fa-solid fa-phone mr-2"></i> Nazovi klijenta
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DETALJI TVRTKE (Metadata preseljena s glavnog ekrana) -->
|
||||
<div class="bg-indigo-50/50 dark:bg-indigo-900/10 rounded-[2.5rem] p-6 border border-dashed border-indigo-200 dark:border-indigo-800">
|
||||
<label class="text-[9px] font-black uppercase text-indigo-400 block mb-4 tracking-[0.2em] italic">Podaci o tvrtki</label>
|
||||
<div class="space-y-4">
|
||||
<div class="flex flex-col border-b border-indigo-100/50 dark:border-indigo-900/30 pb-2">
|
||||
<span class="text-[9px] font-bold text-gray-400 uppercase">OIB</span>
|
||||
<span class="text-sm font-black dark:text-gray-200 tracking-tighter">{podaci.oib}</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-b border-indigo-100/50 dark:border-indigo-900/30 pb-2">
|
||||
<span class="text-[9px] font-bold text-gray-400 uppercase">Adresa</span>
|
||||
<span class="text-sm font-black dark:text-gray-200 leading-tight">{podaci.adresa}, {podaci.grad}</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[9px] font-bold text-gray-400 uppercase">Email</span>
|
||||
<span class="text-sm font-black text-indigo-600 truncate">{podaci.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
<!-- SEKCIJA 2: KONTEKSTUALNI DETALJI (Ovdje selimo manje bitne stvari) -->
|
||||
<div class="bg-gray-50 dark:bg-gray-900/40 rounded-[2.5rem] p-6 border border-dashed border-gray-200 dark:border-gray-700">
|
||||
<label class="text-[9px] font-black uppercase text-gray-400 block mb-4 tracking-[0.2em] italic">Informacije sustava</label>
|
||||
|
||||
<div class="space-y-4">
|
||||
{tip === 'radni-nalog' && (
|
||||
<>
|
||||
<div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
|
||||
<span class="text-[10px] font-bold text-gray-400 uppercase">Prioritet</span>
|
||||
<span class="text-xs font-black text-red-500 uppercase italic">Visok</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
|
||||
<span class="text-[10px] font-bold text-gray-400 uppercase">Izradio</span>
|
||||
<span class="text-xs font-black dark:text-gray-200">Admin Sustava</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
|
||||
<span class="text-[10px] font-bold text-gray-400 uppercase">Ažurirano</span>
|
||||
<span class="text-xs font-black dark:text-gray-200">{formatDate(podaci.datum_azuriranja)}</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tip === 'stroj' && (
|
||||
<>
|
||||
<div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
|
||||
<span class="text-[10px] font-bold text-gray-400 uppercase">Zadnji Atest</span>
|
||||
<span class="text-xs font-black text-green-500 italic">{formatDate(podaci.datum_zadnjeg_atesta)}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
|
||||
<span class="text-[10px] font-bold text-gray-400 uppercase">Godina Proizv.</span>
|
||||
<span class="text-xs font-black dark:text-gray-200">{podaci.godina_proizvodnje}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
|
||||
<span class="text-[10px] font-bold text-gray-400 uppercase">Sustav ID</span>
|
||||
<span class="text-xs font-black dark:text-gray-200">#{podaci.id}</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
Reference in New Issue
Block a user