first commit, i i have no idea what i have done

management-ui/src/customcompometns/UserSettings.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+</script>
+<template>
+    <div class="w-full h-full flex items-center justify-center px-4">
+        <Card class="flex w-[600px]">
+            <CardHeader>
+                <CardTitle>
+                    Settings
+                </CardTitle>
+            </CardHeader>
+            <CardContent>
+                <div class="grid gap-4 py-4">
+                    <div class="grid grid-cols-4 items-center gap-4">
+                        <Label for="username" class="text-right">Username</Label>
+                        <Input id="username" class="col-span-3" />
+                    </div>
+                    <div class="grid grid-cols-4 items-center gap-4">
+                        <Label for="current_password" class="text-right">Current password</Label>
+                        <Input id="current_password" class="col-span-3" type="password" />
+                    </div>
+                    <div class="grid grid-cols-4 items-center gap-4">
+                        <Label for="new_password" class="text-right">New password</Label>
+                        <Input id="new_password" class="col-span-3" type="password" />
+                    </div>
+                </div>
+            </CardContent>
+            <CardFooter>
+                <Button type="submit">Save changes</Button>
+            </CardFooter>
+        </Card>
+    </div>
+
+</template>