@@ -1,110 +0,0 @@
< script setup lang = "ts" >
< / script >
< template >
< div class = "px-10 py-6 max-w-7xl mx-auto w-full" >
<!-- Header -- >
< div class = "flex justify-between items-center mb-6" >
< h1 class = "text-3xl font-semibold tracking-tight" > Member Deployments < / h1 >
< div class = "text-muted-foreground" > Unit / Dossier / Deployments < / div >
< / div >
<!-- Summary Cards -- >
< div class = "grid grid-cols-1 md:grid-cols-3 gap-6 mb-8" >
< div class = "p-5 rounded-xl border bg-card shadow-sm" >
< p class = "text-muted-foreground text-sm" > Total Deployments < / p >
< p class = "text-3xl font-bold mt-2" > 123 < / p >
< / div >
< div class = "p-5 rounded-xl border bg-card shadow-sm" >
< p class = "text-muted-foreground text-sm" > Total Hours < / p >
< p class = "text-3xl font-bold mt-2" > 456 h < / p >
< / div >
< div class = "p-5 rounded-xl border bg-card shadow-sm" >
< p class = "text-muted-foreground text-sm" > Avg . Attendance < / p >
< p class = "text-3xl font-bold mt-2" > 87 % < / p >
< / div >
< / div >
<!-- Filters & Search -- >
< div class = "flex justify-between items-end mb-4 flex-wrap gap-4" >
< div class = "flex gap-4 flex-wrap" >
< div >
< label class = "block text-sm text-muted-foreground mb-1" > Operation Type < / label >
< select class = "border rounded-md px-3 py-2 w-48 bg-background" >
< option > All < / option >
< option > Deployment < / option >
< option > Training < / option >
< / select >
< / div >
< div >
< label class = "block text-sm text-muted-foreground mb-1" > Sort By < / label >
< select class = "border rounded-md px-3 py-2 w-48 bg-background" >
< option > Date ( Newest ) < / option >
< option > Date ( Oldest ) < / option >
< option > Longest Duration < / option >
< / select >
< / div >
< / div >
< div >
< label class = "block text-sm text-muted-foreground mb-1" > Search < / label >
< input type = "text" placeholder = "Search deployments..." class = "border rounded-md px-3 py-2 w-56 bg-background" / >
< / div >
< / div >
<!-- Deployment List -- >
< div class = "rounded-xl border divide-y bg-card shadow-sm" >
<!-- Row -- >
< div class = "p-5 hover:bg-accent cursor-pointer flex justify-between items-center" >
< div >
< p class = "font-semibold text-lg" > Operation Dawn Strike < / p >
< div class = "text-sm text-muted-foreground flex gap-6 mt-1" >
< span > Date : 2024 - 08 - 14 < / span >
< span > Duration : 3.4 h < / span >
< span > Role : Rifleman < / span >
< / div >
< / div >
< div class = "text-right" >
< p class = "font-medium" > Status : < span class = "text-green-500 font-semibold" > Completed < / span > < / p >
< / div >
< / div >
< div class = "p-5 hover:bg-accent cursor-pointer flex justify-between items-center" >
< div >
< p class = "font-semibold text-lg" > Operation Iron Resolve < / p >
< div class = "text-sm text-muted-foreground flex gap-6 mt-1" >
< span > Date : 2024 - 08 - 02 < / span >
< span > Duration : 2.1 h < / span >
< span > Role : Machine Gunner < / span >
< / div >
< / div >
< div class = "text-right" >
< p class = "font-medium" > Status : < span class = "text-yellow-500 font-semibold" > Partial < / span > < / p >
< / div >
< / div >
< div class = "p-5 hover:bg-accent cursor-pointer flex justify-between items-center" >
< div >
< p class = "font-semibold text-lg" > Operation Midnight Gale < / p >
< div class = "text-sm text-muted-foreground flex gap-6 mt-1" >
< span > Date : 2024 - 07 - 22 < / span >
< span > Duration : 4.8 h < / span >
< span > Role : Squad Leader < / span >
< / div >
< / div >
< div class = "text-right" >
< p class = "font-medium" > Status : < span class = "text-red-500 font-semibold" > No ‑ Show < / span > < / p >
< / div >
< / div >
< / div >
< / div >
< / template >