17th-Ranger-Battalion-ORG/milsim-site-v4
8
1
Fork 0
Code Issues 22 Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

added placeholder manage transfers page

Browse Source
This commit is contained in:
ajdj100
2025-09-30 14:29:30 -04:00
parent 659ce6eed7
commit a692c15149
11 changed files with 241 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/assets/base.css
View File

@@ -6,7 +6,7 @@
:root {
--background: oklch(0.2046 0 0);
--foreground: oklch(0.9219 0 0);
--card: oklch(0.2686 0 0);
--card: oklch(23.075% 0.00003 271.152);
--card-foreground: oklch(0.9219 0 0);
--popover: oklch(0.2686 0 0);
--popover-foreground: oklch(0.9219 0 0);
@@ -55,7 +55,7 @@
.dark {
--background: oklch(0.2046 0 0);
--foreground: oklch(0.9219 0 0);
--card: oklch(0.2686 0 0);
--card: oklch(23.075% 0.00003 271.152);
--card-foreground: oklch(0.9219 0 0);
--popover: oklch(0.2686 0 0);
--popover-foreground: oklch(0.9219 0 0);

21
ui/src/components/ui/card/Card.vue Normal file
View File

@@ -0,0 +1,21 @@
<script setup>
import { cn } from "@/lib/utils";
const props = defineProps({
class: { type: null, required: false },
});
</script>
<template>
<div
data-slot="card"
:class="
cn(
'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
props.class,
)
"
>
<slot />
</div>
</template>

21
ui/src/components/ui/card/CardAction.vue Normal file
View File

@@ -0,0 +1,21 @@
<script setup>
import { cn } from "@/lib/utils";
const props = defineProps({
class: { type: null, required: false },
});
</script>
<template>
<div
data-slot="card-action"
:class="
cn(
'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
props.class,
)
"
>
<slot />
</div>
</template>

13
ui/src/components/ui/card/CardContent.vue Normal file
View File

@@ -0,0 +1,13 @@
<script setup>
import { cn } from "@/lib/utils";
const props = defineProps({
class: { type: null, required: false },
});
</script>
<template>
<div data-slot="card-content" :class="cn('px-6', props.class)">
<slot />
</div>
</template>

16
ui/src/components/ui/card/CardDescription.vue Normal file
View File

@@ -0,0 +1,16 @@
<script setup>
import { cn } from "@/lib/utils";
const props = defineProps({
class: { type: null, required: false },
});
</script>
<template>
<p
data-slot="card-description"
:class="cn('text-muted-foreground text-sm', props.class)"
>
<slot />
</p>
</template>

16
ui/src/components/ui/card/CardFooter.vue Normal file
View File

@@ -0,0 +1,16 @@
<script setup>
import { cn } from "@/lib/utils";
const props = defineProps({
class: { type: null, required: false },
});
</script>
<template>
<div
data-slot="card-footer"
:class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
>
<slot />
</div>
</template>

21
ui/src/components/ui/card/CardHeader.vue Normal file
View File

@@ -0,0 +1,21 @@
<script setup>
import { cn } from "@/lib/utils";
const props = defineProps({
class: { type: null, required: false },
});
</script>
<template>
<div
data-slot="card-header"
:class="
cn(
'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
props.class,
)
"
>
<slot />
</div>
</template>

16
ui/src/components/ui/card/CardTitle.vue Normal file
View File

@@ -0,0 +1,16 @@
<script setup>
import { cn } from "@/lib/utils";
const props = defineProps({
class: { type: null, required: false },
});
</script>
<template>
<h3
data-slot="card-title"
:class="cn('leading-none font-semibold', props.class)"
>
<slot />
</h3>
</template>

7
ui/src/components/ui/card/index.js Normal file
View File

@@ -0,0 +1,7 @@
export { default as Card } from "./Card.vue";
export { default as CardAction } from "./CardAction.vue";
export { default as CardContent } from "./CardContent.vue";
export { default as CardDescription } from "./CardDescription.vue";
export { default as CardFooter } from "./CardFooter.vue";
export { default as CardHeader } from "./CardHeader.vue";
export { default as CardTitle } from "./CardTitle.vue";

106
ui/src/pages/ManageTransfers.vue Normal file
View File

@@ -0,0 +1,106 @@
<script setup lang="ts">
import Badge from '@/components/ui/badge/Badge.vue';
import Button from '@/components/ui/button/Button.vue';
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@/components/ui/card'
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog'
import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from "@/components/ui/combobox"
import { onMounted, ref } from 'vue';
import { getRanks } from '@/api/rank';
const setRankDialog = ref(false);
const rankOnTransfer = ref();
const ranks = ref(null);
onMounted(async () => {
ranks.value = await getRanks();
});
</script>
<template>
<Dialog :open="setRankDialog" @update:open="setRankDialog = false">
<DialogContent>
<DialogHeader>
<DialogTitle>Set Rank on Transfer</DialogTitle>
<DialogDescription>
Assign MEMBER a rank on transfer completion.
</DialogDescription>
</DialogHeader>
<!-- Rank Combobox -->
<Combobox v-model="rankOnTransfer">
<ComboboxAnchor class="w-[300px]">
<ComboboxInput placeholder="Search ranks..." class="w-full pl-9"
:display-value="(v) => v ? v.short_name : ''" />
</ComboboxAnchor>
<ComboboxList class="w-[300px]">
<ComboboxEmpty class="text-muted-foreground">No results</ComboboxEmpty>
<ComboboxGroup>
<template v-for="rank in ranks" :key="rank.id">
<ComboboxItem :value="rank"
class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5">
{{ rank.short_name }}
<ComboboxItemIndicator class="absolute left-2 inline-flex items-center">
<Check class="h-4 w-4" />
</ComboboxItemIndicator>
</ComboboxItem>
</template>
</ComboboxGroup>
</ComboboxList>
</Combobox>
<DialogFooter>
<Button variant="outline" @click="setRankDialog = false">Cancel</Button>
<Button>Confirm</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<div class="max-w-5xl mx-auto">
Active
<div>
<Card>
<CardHeader>
<CardTitle class="flex justify-between">
<div class="flex items-center gap-3">
<Badge class="">Pending</Badge>
<p>Name</p>
</div>
<div class="text-muted-foreground font-normal flex gap-2">
Transfer To: <p class="text-white">Company</p>
</div>
</CardTitle>
<CardDescription class="flex gap-2">Approved by: <p class="text-white">Someone, Someone?</p>
</CardDescription>
<CardDescription class="flex gap-2">Rank on transfer: <p class="text-white">Rank</p>
</CardDescription>
</CardHeader>
<!-- <CardContent>
Card Content
</CardContent> -->
<CardFooter class="flex justify-between">
<p class="text-muted-foreground">Request Date:</p>
<div class="flex gap-4">
<Button variant="success">Approve</Button>
<Button variant="destructive">Deny</Button>
</div>
</CardFooter>
</Card>
</div>
<div>
Inactive
</div>
</div>
</template>

4
ui/src/router/index.js
View File

@@ -25,8 +25,8 @@ const router = createRouter({
component: () => import('@/pages/Application.vue')
},
{
path: 'transfer-requests',
component: () => import('@/pages/RankChange.vue')
path: 'transfer',
component: () => import('@/pages/ManageTransfers.vue')
},
{
path: 'loa',