EagleTrooper
9c903c9ad9
Some checks failed
Continuous Deployment / Update Deployment (push) Failing after 1m19s
110 lines
3.8 KiB
Vue
110 lines
3.8 KiB
Vue
<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">456h</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.4h</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.1h</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.8h</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> |