From 5adbf5942553bf5952f6708e69abb3a0314c956c Mon Sep 17 00:00:00 2001
From: oneao <hi_itao@163.com>
Date: Mon, 10 Aug 2026 22:34:33 +0800
Subject: [PATCH] 20260810223432

---
 .../fms-tree-component_16ac753e(未完成).md    | 265 ++++++
 .../plans/fms-tree-component_8d7b2eee.md      | 218 +++++
 code/fms/fms-vue/package.json                 |   7 +-
 code/fms/fms-vue/pnpm-lock.yaml               |   8 +
 code/fms/fms-vue/pnpm-workspace.yaml          |   2 +-
 code/fms/fms-vue/src/App.vue                  |   2 +-
 .../src/components/FmsAutoComplete.vue        | 119 ++-
 code/fms/fms-vue/src/components/FmsSelect.vue | 119 ++-
 code/fms/fms-vue/src/components/FmsTree.vue   | 123 +++
 .../fms-vue/src/components/FmsTreeNode.vue    | 311 +++++++
 .../src/components/fms-table/FmsTable.vue     | 822 ++++++++++++++++++
 .../fms-table/utils/createCellRenderer.js     | 227 +++++
 .../utils/createEditableCellRenderer.js       | 232 +++++
 .../utils/createSelectionCellRenderers.js     | 137 +++
 .../src/components/ui/accordion/Accordion.vue |  13 +-
 .../ui/accordion/AccordionContent.vue         |  14 +-
 .../components/ui/accordion/AccordionItem.vue |  16 +-
 .../ui/accordion/AccordionTrigger.vue         |  19 +-
 .../src/components/ui/accordion/index.ts      |   8 +-
 .../ui/alert-dialog/AlertDialog.vue           |  10 +-
 .../ui/alert-dialog/AlertDialogAction.vue     |  16 +-
 .../ui/alert-dialog/AlertDialogCancel.vue     |  22 +-
 .../ui/alert-dialog/AlertDialogContent.vue    |  20 +-
 .../alert-dialog/AlertDialogDescription.vue   |  16 +-
 .../ui/alert-dialog/AlertDialogFooter.vue     |  15 +-
 .../ui/alert-dialog/AlertDialogHeader.vue     |   8 +-
 .../ui/alert-dialog/AlertDialogTitle.vue      |  14 +-
 .../ui/alert-dialog/AlertDialogTrigger.vue    |   6 +-
 .../src/components/ui/alert-dialog/index.ts   |  18 +-
 .../fms-vue/src/components/ui/alert/Alert.vue |  20 +-
 .../components/ui/alert/AlertDescription.vue  |   8 +-
 .../src/components/ui/alert/AlertTitle.vue    |   8 +-
 .../fms-vue/src/components/ui/alert/index.ts  |  14 +-
 .../ui/aspect-ratio/AspectRatio.vue           |  12 +-
 .../src/components/ui/aspect-ratio/index.ts   |   2 +-
 .../src/components/ui/avatar/Avatar.vue       |  10 +-
 .../components/ui/avatar/AvatarFallback.vue   |  14 +-
 .../src/components/ui/avatar/AvatarImage.vue  |  12 +-
 .../fms-vue/src/components/ui/avatar/index.ts |   6 +-
 .../fms-vue/src/components/ui/badge/Badge.vue |  26 +-
 .../fms-vue/src/components/ui/badge/index.ts  |  18 +-
 .../components/ui/breadcrumb/Breadcrumb.vue   |  12 +-
 .../ui/breadcrumb/BreadcrumbEllipsis.vue      |  10 +-
 .../ui/breadcrumb/BreadcrumbItem.vue          |  13 +-
 .../ui/breadcrumb/BreadcrumbLink.vue          |  10 +-
 .../ui/breadcrumb/BreadcrumbList.vue          |  15 +-
 .../ui/breadcrumb/BreadcrumbPage.vue          |   8 +-
 .../ui/breadcrumb/BreadcrumbSeparator.vue     |  10 +-
 .../src/components/ui/breadcrumb/index.ts     |  14 +-
 .../src/components/ui/button/Button.vue       |  20 +-
 .../fms-vue/src/components/ui/button/index.ts |  29 +-
 .../src/components/ui/calendar/Calendar.vue   | 168 ++--
 .../components/ui/calendar/CalendarCell.vue   |  23 +-
 .../ui/calendar/CalendarCellTrigger.vue       |  55 +-
 .../components/ui/calendar/CalendarGrid.vue   |  16 +-
 .../ui/calendar/CalendarGridBody.vue          |  11 +-
 .../ui/calendar/CalendarGridHead.vue          |  13 +-
 .../ui/calendar/CalendarGridRow.vue           |  19 +-
 .../ui/calendar/CalendarHeadCell.vue          |  16 +-
 .../components/ui/calendar/CalendarHeader.vue |  16 +-
 .../ui/calendar/CalendarHeading.vue           |  20 +-
 .../ui/calendar/CalendarNextButton.vue        |  32 +-
 .../ui/calendar/CalendarPrevButton.vue        |  32 +-
 .../src/components/ui/calendar/index.ts       |  26 +-
 .../fms-vue/src/components/ui/card/Card.vue   |   8 +-
 .../src/components/ui/card/CardAction.vue     |   8 +-
 .../src/components/ui/card/CardContent.vue    |  13 +-
 .../components/ui/card/CardDescription.vue    |  13 +-
 .../src/components/ui/card/CardFooter.vue     |  13 +-
 .../src/components/ui/card/CardHeader.vue     |  15 +-
 .../src/components/ui/card/CardTitle.vue      |  13 +-
 .../fms-vue/src/components/ui/card/index.ts   |  14 +-
 .../src/components/ui/carousel/Carousel.vue   |  46 +-
 .../ui/carousel/CarouselContent.vue           |  25 +-
 .../components/ui/carousel/CarouselItem.vue   |  22 +-
 .../components/ui/carousel/CarouselNext.vue   |  50 +-
 .../ui/carousel/CarouselPrevious.vue          |  50 +-
 .../src/components/ui/carousel/index.ts       |  16 +-
 .../src/components/ui/carousel/interface.ts   |  28 +-
 .../src/components/ui/carousel/useCarousel.ts |  75 +-
 .../src/components/ui/checkbox/Checkbox.vue   |  27 +-
 .../src/components/ui/checkbox/index.ts       |   2 +-
 .../components/ui/collapsible/Collapsible.vue |  16 +-
 .../ui/collapsible/CollapsibleContent.vue     |  11 +-
 .../ui/collapsible/CollapsibleTrigger.vue     |  11 +-
 .../src/components/ui/collapsible/index.ts    |   6 +-
 .../src/components/ui/combobox/Combobox.vue   |  16 +-
 .../components/ui/combobox/ComboboxAnchor.vue |  16 +-
 .../components/ui/combobox/ComboboxEmpty.vue  |  14 +-
 .../components/ui/combobox/ComboboxGroup.vue  |  22 +-
 .../components/ui/combobox/ComboboxInput.vue  |  44 +-
 .../components/ui/combobox/ComboboxItem.vue   |  25 +-
 .../ui/combobox/ComboboxItemIndicator.vue     |  16 +-
 .../components/ui/combobox/ComboboxList.vue   |  38 +-
 .../ui/combobox/ComboboxSeparator.vue         |  14 +-
 .../ui/combobox/ComboboxTrigger.vue           |  16 +-
 .../ui/combobox/ComboboxViewport.vue          |  16 +-
 .../src/components/ui/combobox/index.ts       |  24 +-
 .../src/components/ui/command/Command.vue     |  69 +-
 .../components/ui/command/CommandDialog.vue   |  39 +-
 .../components/ui/command/CommandEmpty.vue    |  26 +-
 .../components/ui/command/CommandGroup.vue    |  49 +-
 .../components/ui/command/CommandInput.vue    |  42 +-
 .../src/components/ui/command/CommandItem.vue |  80 +-
 .../src/components/ui/command/CommandList.vue |  16 +-
 .../ui/command/CommandSeparator.vue           |  14 +-
 .../components/ui/command/CommandShortcut.vue |   8 +-
 .../src/components/ui/command/index.ts        |  38 +-
 .../ui/context-menu/ContextMenu.vue           |  15 +-
 .../context-menu/ContextMenuCheckboxItem.vue  |  34 +-
 .../ui/context-menu/ContextMenuContent.vue    |  34 +-
 .../ui/context-menu/ContextMenuGroup.vue      |  11 +-
 .../ui/context-menu/ContextMenuItem.vue       |  48 +-
 .../ui/context-menu/ContextMenuLabel.vue      |  16 +-
 .../ui/context-menu/ContextMenuPortal.vue     |  11 +-
 .../ui/context-menu/ContextMenuRadioGroup.vue |  18 +-
 .../ui/context-menu/ContextMenuRadioItem.vue  |  34 +-
 .../ui/context-menu/ContextMenuSeparator.vue  |  16 +-
 .../ui/context-menu/ContextMenuShortcut.vue   |   8 +-
 .../ui/context-menu/ContextMenuSub.vue        |  18 +-
 .../ui/context-menu/ContextMenuSubContent.vue |  21 +-
 .../ui/context-menu/ContextMenuSubTrigger.vue |  33 +-
 .../ui/context-menu/ContextMenuTrigger.vue    |  13 +-
 .../src/components/ui/context-menu/index.ts   |  28 +-
 .../src/components/ui/dialog/Dialog.vue       |  16 +-
 .../src/components/ui/dialog/DialogClose.vue  |  11 +-
 .../components/ui/dialog/DialogContent.vue    |  41 +-
 .../ui/dialog/DialogDescription.vue           |  16 +-
 .../src/components/ui/dialog/DialogFooter.vue |  27 +-
 .../src/components/ui/dialog/DialogHeader.vue |   8 +-
 .../components/ui/dialog/DialogOverlay.vue    |  21 +-
 .../ui/dialog/DialogScrollContent.vue         |  41 +-
 .../src/components/ui/dialog/DialogTitle.vue  |  16 +-
 .../components/ui/dialog/DialogTrigger.vue    |  11 +-
 .../fms-vue/src/components/ui/dialog/index.ts |  20 +-
 .../src/components/ui/drawer/Drawer.vue       |  15 +-
 .../src/components/ui/drawer/DrawerClose.vue  |  11 +-
 .../components/ui/drawer/DrawerContent.vue    |  55 +-
 .../ui/drawer/DrawerDescription.vue           |  14 +-
 .../src/components/ui/drawer/DrawerFooter.vue |  13 +-
 .../src/components/ui/drawer/DrawerHeader.vue |  13 +-
 .../components/ui/drawer/DrawerOverlay.vue    |  21 +-
 .../src/components/ui/drawer/DrawerTitle.vue  |  14 +-
 .../components/ui/drawer/DrawerTrigger.vue    |  11 +-
 .../fms-vue/src/components/ui/drawer/index.ts |  18 +-
 .../ui/dropdown-menu/DropdownMenu.vue         |  16 +-
 .../DropdownMenuCheckboxItem.vue              |  34 +-
 .../ui/dropdown-menu/DropdownMenuContent.vue  |  31 +-
 .../ui/dropdown-menu/DropdownMenuGroup.vue    |  11 +-
 .../ui/dropdown-menu/DropdownMenuItem.vue     |  40 +-
 .../ui/dropdown-menu/DropdownMenuLabel.vue    |  18 +-
 .../dropdown-menu/DropdownMenuRadioGroup.vue  |  18 +-
 .../dropdown-menu/DropdownMenuRadioItem.vue   |  34 +-
 .../dropdown-menu/DropdownMenuSeparator.vue   |  22 +-
 .../ui/dropdown-menu/DropdownMenuShortcut.vue |   8 +-
 .../ui/dropdown-menu/DropdownMenuSub.vue      |  13 +-
 .../dropdown-menu/DropdownMenuSubContent.vue  |  28 +-
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |  33 +-
 .../ui/dropdown-menu/DropdownMenuTrigger.vue  |  13 +-
 .../src/components/ui/dropdown-menu/index.ts  |  30 +-
 .../fms-vue/src/components/ui/field/Field.vue |  19 +-
 .../src/components/ui/field/FieldContent.vue  |  13 +-
 .../components/ui/field/FieldDescription.vue  |  22 +-
 .../src/components/ui/field/FieldError.vue    |  33 +-
 .../src/components/ui/field/FieldGroup.vue    |  18 +-
 .../src/components/ui/field/FieldLabel.vue    |  24 +-
 .../src/components/ui/field/FieldLegend.vue   |  24 +-
 .../components/ui/field/FieldSeparator.vue    |  17 +-
 .../src/components/ui/field/FieldSet.vue      |  20 +-
 .../src/components/ui/field/FieldTitle.vue    |  18 +-
 .../fms-vue/src/components/ui/field/index.ts  |  28 +-
 .../fms-vue/src/components/ui/form/Form.vue   |  34 +-
 .../src/components/ui/form/FormControl.vue    |   6 +-
 .../components/ui/form/FormDescription.vue    |  12 +-
 .../src/components/ui/form/FormField.vue      |   2 +-
 .../src/components/ui/form/FormItem.vue       |  23 +-
 .../src/components/ui/form/FormLabel.vue      |  19 +-
 .../src/components/ui/form/FormMessage.vue    |  16 +-
 .../fms-vue/src/components/ui/form/index.ts   |  16 +-
 .../src/components/ui/form/injectionKeys.ts   |   5 +-
 .../src/components/ui/form/useFormField.ts    |  21 +-
 .../components/ui/hover-card/HoverCard.vue    |  16 +-
 .../ui/hover-card/HoverCardContent.vue        |  22 +-
 .../ui/hover-card/HoverCardTrigger.vue        |  11 +-
 .../src/components/ui/hover-card/index.ts     |   6 +-
 .../src/components/ui/input-otp/InputOTP.vue  |  20 +-
 .../components/ui/input-otp/InputOTPGroup.vue |  20 +-
 .../ui/input-otp/InputOTPSeparator.vue        |  16 +-
 .../components/ui/input-otp/InputOTPSlot.vue  |  34 +-
 .../src/components/ui/input-otp/index.ts      |   8 +-
 .../fms-vue/src/components/ui/input/Input.vue |  36 +-
 .../fms-vue/src/components/ui/input/index.ts  |   2 +-
 .../fms-vue/src/components/ui/label/Label.vue |  14 +-
 .../fms-vue/src/components/ui/label/index.ts  |   2 +-
 .../src/components/ui/menubar/Menubar.vue     |  26 +-
 .../ui/menubar/MenubarCheckboxItem.vue        |  34 +-
 .../components/ui/menubar/MenubarContent.vue  |  22 +-
 .../components/ui/menubar/MenubarGroup.vue    |  11 +-
 .../src/components/ui/menubar/MenubarItem.vue |  41 +-
 .../components/ui/menubar/MenubarLabel.vue    |  16 +-
 .../src/components/ui/menubar/MenubarMenu.vue |  11 +-
 .../ui/menubar/MenubarRadioGroup.vue          |  18 +-
 .../ui/menubar/MenubarRadioItem.vue           |  34 +-
 .../ui/menubar/MenubarSeparator.vue           |  18 +-
 .../components/ui/menubar/MenubarShortcut.vue |   8 +-
 .../src/components/ui/menubar/MenubarSub.vue  |  20 +-
 .../ui/menubar/MenubarSubContent.vue          |  24 +-
 .../ui/menubar/MenubarSubTrigger.vue          |  30 +-
 .../components/ui/menubar/MenubarTrigger.vue  |  16 +-
 .../src/components/ui/menubar/index.ts        |  30 +-
 .../ui/native-select/NativeSelect.vue         |  39 +-
 .../ui/native-select/NativeSelectOptGroup.vue |  11 +-
 .../ui/native-select/NativeSelectOption.vue   |  11 +-
 .../src/components/ui/native-select/index.ts  |   6 +-
 .../ui/navigation-menu/NavigationMenu.vue     |  45 +-
 .../navigation-menu/NavigationMenuContent.vue |  33 +-
 .../NavigationMenuIndicator.vue               |  23 +-
 .../ui/navigation-menu/NavigationMenuItem.vue |  14 +-
 .../ui/navigation-menu/NavigationMenuLink.vue |  28 +-
 .../ui/navigation-menu/NavigationMenuList.vue |  23 +-
 .../navigation-menu/NavigationMenuTrigger.vue |  23 +-
 .../NavigationMenuViewport.vue                |  19 +-
 .../components/ui/navigation-menu/index.ts    |  20 +-
 .../components/ui/pagination/Pagination.vue   |  24 +-
 .../ui/pagination/PaginationContent.vue       |  14 +-
 .../ui/pagination/PaginationEllipsis.vue      |  16 +-
 .../ui/pagination/PaginationFirst.vue         |  37 +-
 .../ui/pagination/PaginationItem.vue          |  50 +-
 .../ui/pagination/PaginationLast.vue          |  37 +-
 .../ui/pagination/PaginationNext.vue          |  37 +-
 .../ui/pagination/PaginationPrevious.vue      |  37 +-
 .../src/components/ui/pagination/index.ts     |  16 +-
 .../src/components/ui/popover/Popover.vue     |  16 +-
 .../components/ui/popover/PopoverAnchor.vue   |  11 +-
 .../components/ui/popover/PopoverContent.vue  |  24 +-
 .../components/ui/popover/PopoverTrigger.vue  |  11 +-
 .../src/components/ui/popover/index.ts        |   8 +-
 .../src/components/ui/progress/Progress.vue   |  31 +-
 .../src/components/ui/progress/index.ts       |   2 +-
 .../components/ui/radio-group/RadioGroup.vue  |  18 +-
 .../ui/radio-group/RadioGroupItem.vue         |  26 +-
 .../src/components/ui/radio-group/index.ts    |   4 +-
 .../ui/resizable/ResizableHandle.vue          |  29 +-
 .../ui/resizable/ResizablePanel.vue           |  12 +-
 .../ui/resizable/ResizablePanelGroup.vue      |  18 +-
 .../src/components/ui/resizable/index.ts      |   6 +-
 .../components/ui/scroll-area/ScrollArea.vue  |  20 +-
 .../components/ui/scroll-area/ScrollBar.vue   |  39 +-
 .../src/components/ui/scroll-area/index.ts    |   4 +-
 .../src/components/ui/select/Select.vue       |  16 +-
 .../components/ui/select/SelectContent.vue    |  50 +-
 .../src/components/ui/select/SelectGroup.vue  |  11 +-
 .../src/components/ui/select/SelectItem.vue   |  23 +-
 .../components/ui/select/SelectItemText.vue   |  11 +-
 .../src/components/ui/select/SelectLabel.vue  |  10 +-
 .../ui/select/SelectScrollDownButton.vue      |  18 +-
 .../ui/select/SelectScrollUpButton.vue        |  18 +-
 .../components/ui/select/SelectSeparator.vue  |  14 +-
 .../components/ui/select/SelectTrigger.vue    |  30 +-
 .../src/components/ui/select/SelectValue.vue  |  11 +-
 .../fms-vue/src/components/ui/select/index.ts |  22 +-
 .../src/components/ui/separator/Separator.vue |  18 +-
 .../src/components/ui/separator/index.ts      |   2 +-
 .../fms-vue/src/components/ui/sheet/Sheet.vue |  16 +-
 .../src/components/ui/sheet/SheetClose.vue    |  11 +-
 .../src/components/ui/sheet/SheetContent.vue  |  58 +-
 .../components/ui/sheet/SheetDescription.vue  |  14 +-
 .../src/components/ui/sheet/SheetFooter.vue   |  12 +-
 .../src/components/ui/sheet/SheetHeader.vue   |  11 +-
 .../src/components/ui/sheet/SheetOverlay.vue  |  21 +-
 .../src/components/ui/sheet/SheetTitle.vue    |  14 +-
 .../src/components/ui/sheet/SheetTrigger.vue  |  11 +-
 .../fms-vue/src/components/ui/sheet/index.ts  |  16 +-
 .../src/components/ui/sidebar/Sidebar.vue     |  62 +-
 .../components/ui/sidebar/SidebarContent.vue  |  15 +-
 .../components/ui/sidebar/SidebarFooter.vue   |   8 +-
 .../components/ui/sidebar/SidebarGroup.vue    |   8 +-
 .../ui/sidebar/SidebarGroupAction.vue         |  30 +-
 .../ui/sidebar/SidebarGroupContent.vue        |   8 +-
 .../ui/sidebar/SidebarGroupLabel.vue          |  27 +-
 .../components/ui/sidebar/SidebarHeader.vue   |   8 +-
 .../components/ui/sidebar/SidebarInput.vue    |  15 +-
 .../components/ui/sidebar/SidebarInset.vue    |  20 +-
 .../src/components/ui/sidebar/SidebarMenu.vue |   8 +-
 .../ui/sidebar/SidebarMenuAction.vue          |  49 +-
 .../ui/sidebar/SidebarMenuBadge.vue           |  28 +-
 .../ui/sidebar/SidebarMenuButton.vue          |  43 +-
 .../ui/sidebar/SidebarMenuButtonChild.vue     |  22 +-
 .../components/ui/sidebar/SidebarMenuItem.vue |   8 +-
 .../ui/sidebar/SidebarMenuSkeleton.vue        |  24 +-
 .../components/ui/sidebar/SidebarMenuSub.vue  |  20 +-
 .../ui/sidebar/SidebarMenuSubButton.vue       |  47 +-
 .../ui/sidebar/SidebarMenuSubItem.vue         |   8 +-
 .../components/ui/sidebar/SidebarProvider.vue |  69 +-
 .../ui/sidebar/SidebarSeparator.vue           |  10 +-
 .../components/ui/sidebar/SidebarTrigger.vue  |  16 +-
 .../src/components/ui/sidebar/index.ts        |  66 +-
 .../src/components/ui/sidebar/utils.ts        |  32 +-
 .../src/components/ui/skeleton/Skeleton.vue   |  13 +-
 .../src/components/ui/skeleton/index.ts       |   2 +-
 .../src/components/ui/slider/Slider.vue       |  28 +-
 .../fms-vue/src/components/ui/slider/index.ts |   2 +-
 .../src/components/ui/sonner/Sonner.vue       |  17 +-
 .../fms-vue/src/components/ui/sonner/index.ts |   2 +-
 .../src/components/ui/switch/Switch.vue       |  38 +-
 .../fms-vue/src/components/ui/switch/index.ts |   2 +-
 .../fms-vue/src/components/ui/table/Table.vue |   8 +-
 .../src/components/ui/table/TableBody.vue     |  13 +-
 .../src/components/ui/table/TableCaption.vue  |  13 +-
 .../src/components/ui/table/TableCell.vue     |   8 +-
 .../src/components/ui/table/TableEmpty.vue    |  34 +-
 .../src/components/ui/table/TableFooter.vue   |   8 +-
 .../src/components/ui/table/TableHead.vue     |  15 +-
 .../src/components/ui/table/TableHeader.vue   |  13 +-
 .../src/components/ui/table/TableRow.vue      |  12 +-
 .../fms-vue/src/components/ui/table/index.ts  |  18 +-
 .../fms-vue/src/components/ui/tabs/Tabs.vue   |  18 +-
 .../src/components/ui/tabs/TabsContent.vue    |  14 +-
 .../src/components/ui/tabs/TabsList.vue       |  24 +-
 .../src/components/ui/tabs/TabsTrigger.vue    |  26 +-
 .../fms-vue/src/components/ui/tabs/index.ts   |   8 +-
 .../src/components/ui/textarea/Textarea.vue   |  27 +-
 .../src/components/ui/textarea/index.ts       |   2 +-
 .../ui/toggle-group/ToggleGroup.vue           |  54 +-
 .../ui/toggle-group/ToggleGroupItem.vue       |  57 +-
 .../src/components/ui/toggle-group/index.ts   |   4 +-
 .../src/components/ui/toggle/Toggle.vue       |  43 +-
 .../fms-vue/src/components/ui/toggle/index.ts |  10 +-
 .../src/components/ui/tooltip/Tooltip.vue     |  16 +-
 .../components/ui/tooltip/TooltipContent.vue  |  38 +-
 .../components/ui/tooltip/TooltipProvider.vue |   6 +-
 .../components/ui/tooltip/TooltipTrigger.vue  |  11 +-
 .../src/components/ui/tooltip/index.ts        |   8 +-
 .../fms/fms-vue/src/layouts/DefaultLayout.vue |  99 +--
 .../src/layouts/components/AppSidebar.vue     | 137 +--
 .../src/layouts/components/AppTabs.vue        | 132 +--
 .../src/layouts/components/AppTopbar.vue      | 154 ++--
 .../src/layouts/components/NavMain.vue        |  20 +-
 .../src/layouts/components/NavMenuItem.vue    |  98 ++-
 code/fms/fms-vue/src/lib/utils.ts             |   8 +-
 code/fms/fms-vue/src/main.ts                  |  30 +-
 code/fms/fms-vue/src/router/index.ts          | 124 +--
 code/fms/fms-vue/src/services/api.ts          |  70 +-
 code/fms/fms-vue/src/services/fileService.ts  | 190 ++--
 code/fms/fms-vue/src/services/http.ts         | 121 +--
 code/fms/fms-vue/src/stores/app.ts            | 328 ++++---
 code/fms/fms-vue/src/stores/auth.ts           |  50 +-
 code/fms/fms-vue/src/stores/permissions.ts    | 226 ++---
 code/fms/fms-vue/src/styles/index.css         |   3 +-
 code/fms/fms-vue/src/utils/lucideIcons.ts     |  25 +-
 code/fms/fms-vue/src/utils/tree.ts            |  40 +-
 .../src/views/base/PlaceholderPage.vue        |   8 +-
 .../{ContactPage.vue => contact/index.vue}    |   0
 .../index.vue}                                |   0
 .../index.vue}                                |   0
 .../fms/fms-vue/src/views/dashboard/index.vue | 486 +++++++++--
 code/fms/fms-vue/src/views/login/index.vue    | 124 ++-
 .../src/views/system/ModuleManagementPage.vue |   5 -
 .../{I18nTypePage.vue => i18n-type/index.vue} |   0
 .../{LoginLogPage.vue => login-log/index.vue} |   0
 .../views/system/module-management/index.vue  | 128 +++
 .../system/{UserPage.vue => user/index.vue}   |   0
 code/fms/fms-vue/tsconfig.json                |   5 +-
 code/fms/fms-vue/vite.config.ts               |  18 +-
 364 files changed, 7559 insertions(+), 4358 deletions(-)
 create mode 100644 code/fms/.codebuddy/plans/fms-tree-component_16ac753e(未完成).md
 create mode 100644 code/fms/.codebuddy/plans/fms-tree-component_8d7b2eee.md
 create mode 100644 code/fms/fms-vue/src/components/FmsTree.vue
 create mode 100644 code/fms/fms-vue/src/components/FmsTreeNode.vue
 create mode 100644 code/fms/fms-vue/src/components/fms-table/FmsTable.vue
 create mode 100644 code/fms/fms-vue/src/components/fms-table/utils/createCellRenderer.js
 create mode 100644 code/fms/fms-vue/src/components/fms-table/utils/createEditableCellRenderer.js
 create mode 100644 code/fms/fms-vue/src/components/fms-table/utils/createSelectionCellRenderers.js
 rename code/fms/fms-vue/src/views/base/{ContactPage.vue => contact/index.vue} (100%)
 rename code/fms/fms-vue/src/views/base/{OtherCompanyPage.vue => othercompany/index.vue} (100%)
 rename code/fms/fms-vue/src/views/base/{OtherDataPage.vue => otherdata/index.vue} (100%)
 delete mode 100644 code/fms/fms-vue/src/views/system/ModuleManagementPage.vue
 rename code/fms/fms-vue/src/views/system/{I18nTypePage.vue => i18n-type/index.vue} (100%)
 rename code/fms/fms-vue/src/views/system/{LoginLogPage.vue => login-log/index.vue} (100%)
 create mode 100644 code/fms/fms-vue/src/views/system/module-management/index.vue
 rename code/fms/fms-vue/src/views/system/{UserPage.vue => user/index.vue} (100%)

diff --git a/code/fms/.codebuddy/plans/fms-tree-component_16ac753e(未完成).md b/code/fms/.codebuddy/plans/fms-tree-component_16ac753e(未完成).md
new file mode 100644
index 00000000..a36c3eac
--- /dev/null
+++ b/code/fms/.codebuddy/plans/fms-tree-component_16ac753e(未完成).md
@@ -0,0 +1,265 @@
+---
+name: fms-tree-component
+overview: 基于 shadcn-vue 模式（reka-ui + Tailwind v4 + Vue 3 Composition API）从零封装 FmsTree 组件，参考旧系统 FmsTree 的核心能力（虚拟根节点、右键菜单、i18n、展开/选择），并确保与模块管理页面等场景兼容。
+design:
+  architecture:
+    framework: vue
+    component: shadcn
+  styleKeywords:
+    - shadcn-vue
+    - new-york
+    - Minimalism
+    - Clean
+    - Semantic Design
+  fontSystem:
+    fontFamily: Inter
+    heading:
+      size: 14px
+      weight: 500
+    subheading:
+      size: 12px
+      weight: 400
+    body:
+      size: 13px
+      weight: 400
+  colorSystem:
+    primary:
+      - var(--primary)
+      - var(--accent)
+    background:
+      - var(--background)
+      - var(--accent)
+      - transparent
+    text:
+      - var(--foreground)
+      - var(--muted-foreground)
+      - var(--accent-foreground)
+    functional:
+      - var(--border)
+      - var(--ring)
+todos:
+  - id: add-t-function
+    content: 在 stores/app.ts 中添加 t() 翻译函数，支持从 DB 的 b_i18n 表获取翻译文本
+    status: pending
+  - id: create-use-tree-i18n
+    content: 创建 composables/useTreeI18n.ts，提供递归树节点翻译能力
+    status: pending
+    dependencies:
+      - add-t-function
+  - id: create-fms-tree-node
+    content: 创建 components/FmsTreeNode.vue 递归节点组件，基于 Collapsible + ContextMenu 实现展开折叠、选中高亮、右键菜单、键盘导航
+    status: pending
+  - id: create-fms-tree
+    content: 创建 components/FmsTree.vue 根组件，实现虚拟根节点包裹、props 定义、v-model 双向绑定、事件转发和 slot 透传
+    status: pending
+    dependencies:
+      - create-fms-tree-node
+      - create-use-tree-i18n
+  - id: verify-and-format
+    content: 验证组件在模块管理页面中可正常渲染，运行 pnpm fmt:check 检查格式
+    status: pending
+    dependencies:
+      - create-fms-tree
+---
+
+## 用户需求
+
+在新系统 fms-vue 中封装一个可复用的 FmsTree 树组件，替代旧系统 fms-vue2 中的 FmsTree.vue。新项目使用 shadcn-vue (reka-ui + Tailwind v4) 技术栈，不能使用 antdv-next。
+
+## 产品概述
+
+FmsTree 是一个通用的树形展示组件，为模块管理、数据分类、文件目录等场景提供统一的树交互体验。
+
+## 核心功能
+
+- **树形结构展示**：递归渲染树节点，支持无限层级嵌套
+- **展开/折叠**：点击箭头图标展开或折叠子节点，支持 v-model:expandedKeys 受控模式
+- **节点选中**：点击节点高亮选中，支持 v-model:selectedKeys 受控模式，支持单选/多选
+- **虚拟根节点**：自动在 treeData 外层包裹虚拟根节点（如 全部分类），确保首次加载时树处于展开可交互状态
+- **右键菜单**：通过 contextMenu prop 传入菜单生成函数，右键节点弹出自定义菜单项
+- **标题插槽**：支持 #title slot 自定义节点标题渲染
+- ~~i18n 翻译（本次不做，后续按需添加）~~
+- **键盘导航**：支持上下箭头切换节点、左右箭头展开/折叠、Enter 选中
+- **样式定制**：遵循 shadcn-vue 语义颜色体系，支持 Tailwind class 透传
+
+## 技术栈
+
+- **Vue 3 Composition API** + TypeScript (`<script setup lang="ts">`)
+- **reka-ui**：CollapsibleRoot / CollapsibleTrigger / CollapsibleContent（展开/折叠原语）
+- **reka-ui**：ContextMenuRoot / ContextMenuTrigger / ContextMenuContent / ContextMenuItem（右键菜单原语）
+- **Tailwind v4**：语义颜色（bg-accent、text-muted-foreground 等）
+- **@lucide/vue**：ChevronRight 图标（展开箭头）
+- **clsx + tailwind-merge**：cn() 工具函数
+- **@vueuse/core**：useDebounceFn（可选，用于搜索防抖场景）
+
+## 实现方案
+
+### 核心策略
+
+由于 reka-ui 没有 Tree/TreeView 原语，采用 **Collapsible 递归嵌套** 的方式自建树结构。每个树节点如果包含 children，则用它自己的 `CollapsibleRoot` 包裹；叶子节点则为普通 div。这样天然获得展开/折叠动画和 ARIA 属性。
+
+右键菜单通过 reka-ui 的 `ContextMenuRoot` + `ContextMenuTrigger` 包裹每个节点行实现，无需全局 Menu 管理器。
+
+虚拟根节点在组件内部用 `computed` 生成，确保外部调用者只需传入原始 treeData。
+
+### 架构设计
+
+```
+FmsTree.vue               (根容器)
+├── 虚拟根节点 computed     (包裹 treeData，defaultOpen)
+│   └── FmsTreeNode.vue    (递归节点，v-for children)
+│       ├── CollapsibleRoot (当 node.children 存在时)
+│       │   ├── ContextMenuRoot (当 contextMenu prop 存在时)
+│       │   │   ├── ContextMenuTrigger
+│       │   │   │   └── 节点行 (缩进 + 箭头 + title slot)
+│       │   │   └── ContextMenuContent → ContextMenuItem v-for
+│       │   └── CollapsibleContent
+│       │       └── FmsTreeNode (递归)
+│       └── 无 children 时：纯节点行 (带 ContextMenu)
+└── 透传 slots (#title, #icon 等)
+```
+
+### 组件文件拆分
+
+```
+src/
+├── components/
+│   ├── FmsTree.vue            # [NEW] 根组件：props 定义、虚拟根节点、右键菜单 orchestration、事件转发
+│   └── FmsTreeNode.vue        # [NEW] 递归节点：Collapsible 逻辑、缩进计算、选中高亮、键盘导航
+├── composables/
+│   └── useTreeI18n.ts         # [NEW] 树节点 i18n 翻译 composable
+└── stores/
+    └── app.ts                 # [MODIFY] 添加 t() 翻译函数
+```
+
+### 数据流
+
+```
+外部调用者
+  │ treeData (TreeNode[]) + expandedKeys + selectedKeys
+  ▼
+FmsTree.vue
+  │ computed: effectiveTreeData (包裹虚拟根节点)
+  │ computed: localizedData (i18n 翻译)
+  ▼
+FmsTreeNode.vue (递归)
+  │ CollapsibleRoot.open = expandedKeys.includes(node.key)
+  │ 节点行 class = selectedKeys.includes(node.key) ? 'bg-accent' : ''
+  │ @click → emit('select', keys, node)
+  │ @rightclick → ContextMenu 弹出
+  ▼
+事件向上冒泡 → FmsTree emit select / menuClick / update:expandedKeys / update:selectedKeys
+```
+
+## 实现细节
+
+### Props 设计
+
+```ts
+// FmsTree.vue props
+interface FmsTreeProps {
+  treeData: TreeNode[]                 // 原始树数据
+  expandedKeys?: string[]              // 受控展开 keys
+  selectedKeys?: string[]             // 受控选中 keys
+  multiple?: boolean                   // 是否多选，默认 false
+  contextMenu?: (node: TreeNode) => { items: ContextMenuItem[], onClick?: (payload: { key: string, node: TreeNode }) => void }
+  rootKey?: string                     // 虚拟根节点 key，默认 '__fms_root__'
+  rootTitle?: string                   // 虚拟根节点标题，默认 '全部分类'
+  showRoot?: boolean                   // 是否显示虚拟根节点，默认 true
+  indent?: number                      // 每层缩进像素，默认 24
+}
+```
+
+### 事件设计
+
+```ts
+// FmsTree.vue emits
+emit('update:expandedKeys', keys: string[])
+emit('update:selectedKeys', keys: string[])
+emit('select', keys: string[], info: { node: TreeNode, selected: boolean })
+emit('menuClick', payload: { key: string, node: TreeNode })
+```
+
+### TreeNode 数据类型
+
+```ts
+interface TreeNode {
+  key: string                          // 唯一标识（bigint id 序列化为 string）
+  title: string                        // 显示标题
+  children?: TreeNode[]                // 子节点
+  b_id?: string                        // 业务 ID
+  b_name?: string                      // 业务名称
+  b_code?: string                      // 业务编码
+  b_i18n?: string                      // 国际化 key
+  b_module_type?: string               // 模块类型: directory | page | data
+  [key: string]: unknown               // 其他业务字段透传
+}
+```
+
+### 性能考虑
+
+- 递归节点组件使用 `v-for` 渲染子节点，Vue 3 的 diff 算法已做优化
+- `expandedKeys` 和 `selectedKeys` 通过 props 受控，避免组件内部状态与外部不同步
+- i18n 翻译仅在节点 title 通过 `b_i18n` key 查找时触发，不影响渲染性能
+- 不实现虚拟滚动（项目当前无海量树数据场景，如有需要后续可基于 ScrollArea 和 `@tanstack/virtual` 添加）
+- 避免不必要的 re-render：FmsTreeNode 使用 `props.key` 作为显式 key，确保 Vue 复用节点 DOM
+
+### 与旧系统的差异
+
+| 旧系统 FmsTree | 新系统 FmsTree |
+| --- | --- |
+| 基于 antdv `<a-tree>` | 基于 reka-ui Collapsible + ContextMenu |
+| 透传 a-tree attrs | 仅暴露明确设计的 props（不盲目透传） |
+| select 行为修正用 selectSuppress 标志 | 用 CollapsibleRoot 的 v-model:open 受控，消除副作用 |
+| 虚拟滚动 + 拖拽互斥逻辑 | 暂不实现，按需后续添加 |
+| localizeNodes 递归翻译 | 在 composable useTreeI18n 中处理 |
+
+
+### 日志和错误处理
+
+- 组件为纯 UI 组件，不产生日志
+- TreeNode.key 缺失时给出 console.warn 提示
+- 右键菜单 contextMenu prop 未传入时，节点不响应右键（不报错）
+
+### 向后兼容
+
+- `FmsTree.vue` 是新文件，不影响现有代码
+- `app.ts` 的 t() 函数为增量添加，现有功能不变
+
+## 设计风格
+
+遵循 shadcn-vue new-york 风格：简洁、中性、语义化。树组件作为列表型控件，采用极简设计，无多余装饰。
+
+## 页面布局（树组件内）
+
+每个树节点行从左侧到右侧依次为：展开箭头（16px lucide 图标）→ 缩进空白（每层 24px）→ 标题内容。悬停时显示浅背景色，选中时显示 accent 背景色。
+
+### 节点行样式
+
+- 高度 32px，flex items-center，rounded-sm
+- 默认：transparent 背景，text-foreground
+- 悬停：bg-accent/50 背景（非选中态时）
+- 选中：bg-accent text-accent-foreground 背景 + 文字色
+- 缩进：每层级 padding-left: 24px（通过 style binding 计算）
+- 展开箭头：ChevronRight 图标，展开时 rotate-90 transition-transform
+- 间距：节点行之间无 gap，紧密排列
+
+### 右键菜单样式
+
+- 复用项目已有的 ContextMenu 组件样式（bg-popover、border、shadow-md、rounded-md）
+- 菜单项：h-8、px-2、text-sm、gap-2，hover 时 bg-accent
+
+### 交互
+
+- 点击箭头：仅展开/折叠，不选中
+- 点击行：选中节点
+- 右键行：弹出 ContextMenu
+- 键盘：ArrowUp/Down 切换焦点，ArrowRight/Left 展开/折叠，Enter 选中
+
+## Agent Extensions
+
+### Skill
+
+- **shadcn-vue**
+- 目的：验证 ContextMenu 和 Collapsible 组件的 API，确保封装正确使用 reka-ui 原语
+- 预期结果：确认 ContextMenu 的 Root/Trigger/Content/Item 用法、Collapsible 的 Root/Trigger/Content 用法
\ No newline at end of file
diff --git a/code/fms/.codebuddy/plans/fms-tree-component_8d7b2eee.md b/code/fms/.codebuddy/plans/fms-tree-component_8d7b2eee.md
new file mode 100644
index 00000000..5fb65f11
--- /dev/null
+++ b/code/fms/.codebuddy/plans/fms-tree-component_8d7b2eee.md
@@ -0,0 +1,218 @@
+---
+name: fms-tree-component
+overview: 基于 shadcn-vue 模式（reka-ui Collapsible + ContextMenu + Tailwind v4 + Vue 3 Composition API）从零封装 FmsTree/FmsTreeNode 组件，含虚拟根节点、右键菜单、展开折叠、节点选中、键盘导航。本次不做多语言。
+design:
+  architecture:
+    framework: vue
+    component: shadcn
+  styleKeywords:
+    - shadcn-vue
+    - new-york
+    - Minimalism
+    - Clean
+  fontSystem:
+    fontFamily: Inter
+    heading:
+      size: 14px
+      weight: 500
+    subheading:
+      size: 12px
+      weight: 400
+    body:
+      size: 13px
+      weight: 400
+  colorSystem:
+    primary:
+      - var(--primary)
+      - var(--accent)
+    background:
+      - var(--background)
+      - var(--accent)
+      - transparent
+    text:
+      - var(--foreground)
+      - var(--muted-foreground)
+      - var(--accent-foreground)
+    functional:
+      - var(--border)
+      - var(--ring)
+todos:
+  - id: create-fms-tree-node
+    content: 创建 components/FmsTreeNode.vue 递归节点组件，基于 Collapsible + ContextMenu 实现展开折叠、选中高亮、右键菜单、键盘导航
+    status: completed
+  - id: create-fms-tree
+    content: 创建 components/FmsTree.vue 根组件，实现虚拟根节点包裹、props 定义、v-model 双向绑定、事件转发和 slot 透传
+    status: completed
+    dependencies:
+      - create-fms-tree-node
+  - id: verify-and-format
+    content: 验证组件可正常渲染，运行 pnpm fmt:check 检查格式
+    status: completed
+    dependencies:
+      - create-fms-tree
+---
+
+## 产品概述
+
+在新系统 fms-vue 中封装一个可复用的 FmsTree 树组件，基于 shadcn-vue（reka-ui + Tailwind v4）技术栈，为模块管理等场景提供统一的树交互体验。本次不做多语言、拖拽、虚拟滚动。
+
+## 核心功能
+
+- 树形结构展示：递归渲染节点，支持无限层级嵌套
+- 展开/折叠：点击箭头图标展开或折叠子节点，支持 v-model:expandedKeys 受控模式
+- 节点选中：点击节点高亮选中，支持 v-model:selectedKeys，单选模式
+- 虚拟根节点：treeData 外层自动包裹虚拟根节点（如 全部分类），确保首次加载时树处于展开可交互状态
+- 右键菜单：通过 contextMenu prop 传入菜单项生成函数，右键节点弹出 ContextMenu
+- 标题插槽：支持 #title slot 自定义节点标题渲染
+- 键盘导航：ArrowUp/Down 切换焦点，ArrowRight/Left 展开折叠，Enter 选中
+
+## 技术栈
+
+- Vue 3 Composition API + TypeScript（`<script setup lang="ts">`）
+- reka-ui：CollapsibleRoot / CollapsibleTrigger / CollapsibleContent（展开/折叠）
+- reka-ui：ContextMenuRoot / ContextMenuTrigger / ContextMenuContent / ContextMenuItem（右键菜单）
+- Tailwind v4：语义颜色（bg-accent、text-muted-foreground、bg-popover 等）
+- @lucide/vue：ChevronRight 图标（展开箭头）
+- clsx + tailwind-merge：cn() 工具函数
+
+## 实现方案
+
+### 核心策略
+
+由于 reka-ui 没有 Tree 原语，采用 **Collapsible 递归嵌套** 自建树结构。每个有 children 的节点用 `Collapsible` 包裹，叶子节点为普通 div。右键菜单通过 `ContextMenu` 包裹每个节点行实现。虚拟根节点在 `FmsTree.vue` 中用 `computed` 生成。
+
+### 架构设计
+
+```
+FmsTree.vue（根容器）
+├── computed：effectiveTreeData（包裹虚拟根节点）
+│   └── FmsTreeNode.vue（递归节点，v-for children）
+│       ├── Collapsible（当 node.children 存在）
+│       │   ├── ContextMenu（包裹节点行）
+│       │   │   ├── ContextMenuTrigger
+│       │   │   │   └── 节点行（缩进 + ChevronRight箭头 + title slot）
+│       │   │   └── ContextMenuContent → ContextMenuItem
+│       │   └── CollapsibleContent
+│       │       └── FmsTreeNode（递归子节点）
+│       └── 无 children 时：纯节点行（ContextMenu 包裹）
+```
+
+### 组件文件拆分
+
+```
+src/
+└── components/
+    ├── FmsTree.vue            # [NEW] 根组件：props/v-model定义、虚拟根节点、事件转发
+    └── FmsTreeNode.vue        # [NEW] 递归节点：Collapsible逻辑、缩进、选中高亮、键盘导航
+```
+
+### 数据流
+
+外部调用者传入 treeData + expandedKeys + selectedKeys → FmsTree 包裹虚拟根节点 → FmsTreeNode 递归渲染，CollapsibleRoot.open 受 expandedKeys 控制，节点行 class 受 selectedKeys 控制，事件向上冒泡（select / menuClick / update:expandedKeys / update:selectedKeys）。
+
+## 实现细节
+
+### Props 设计（FmsTree.vue）
+
+```ts
+interface TreeNode {
+  key: string
+  title: string
+  children?: TreeNode[]
+  [key: string]: unknown
+}
+
+// Props
+treeData: TreeNode[]
+expandedKeys?: string[]
+selectedKeys?: string[]
+contextMenu?: (node: TreeNode) => { key: string; label: string }[]
+rootKey?: string        // 默认 '__fms_root__'
+rootTitle?: string      // 默认 '全部分类'
+showRoot?: boolean      // 默认 true
+indent?: number         // 默认 24
+```
+
+### Events
+
+```ts
+emit('update:expandedKeys', keys: string[])
+emit('update:selectedKeys', keys: string[])
+emit('select', keys: string[], info: { node: TreeNode })
+emit('menuClick', payload: { key: string; node: TreeNode })
+```
+
+### 组件关键实现要点
+
+**FmsTreeNode.vue（递归节点）**：
+
+- 接收 props：node、expandedKeys、selectedKeys、indent（从 depth 计算）、contextMenu
+- CollapsibleRoot 的 v-model:open 根据 expandedKeys.includes(node.key) 受控
+- 节点行的 padding-left 由 `depth * indent` 计算
+- ChevronRight 图标通过 CSS `rotate-90` transition 表示展开状态
+- 选中态 class：`selectedKeys.includes(node.key) ? 'bg-accent text-accent-foreground' : ''`
+- 悬停态 class：`hover:bg-accent/50`（非选中时）
+- 键盘导航：外层容器 @keydown 处理 ArrowUp/Down（focus 相邻节点）、ArrowRight（展开）/ArrowLeft（折叠）、Enter（选中）
+- 递归渲染：CollapsibleContent 内 `<FmsTreeNode>` 自引用 v-for children
+
+**FmsTree.vue（根组件）**：
+
+- effectiveTreeData computed：包裹虚拟根节点 `[{ key: rootKey, title: rootTitle, children: treeData }]`
+- expandedKeys 首次为空时自动添加 rootKey
+- 传递给 FmsTreeNode 时 depth 从 0 开始（虚拟根 level 由 showRoot 控制是否显示）
+- 透传 #title slot 到 FmsTreeNode
+
+### 与旧系统差异
+
+| 旧系统 FmsTree | 新系统 FmsTree |
+| --- | --- |
+| 基于 antdv `<a-tree>` | 基于 reka-ui Collapsible + ContextMenu |
+| 透传 a-tree attrs | 仅暴露明确设计的 props |
+| select 行为修正用 selectSuppress 标志 | CollapsibleRoot v-model:open 受控，无副作用 |
+| 虚拟滚动 + 拖拽互斥 | 暂不实现 |
+| localizeNodes 递归翻译 | 本次不做 |
+
+
+### 性能考虑
+
+- Vue 3 v-for diff 已做优化，递归组件用显式 key 确保 DOM 复用
+- expandedKeys / selectedKeys 通过 props 受控，避免内外状态不同步
+- 不实现虚拟滚动（当前无海量数据场景）
+
+### 日志与错误处理
+
+- TreeNode.key 缺失时 console.warn 提示
+- contextMenu prop 未传入时节点不响应右键（不报错）
+
+## 设计风格
+
+遵循 shadcn-vue new-york 风格：简洁、中性、语义化。树组件作为列表型控件，采用极简设计。
+
+## 节点行样式
+
+- 高度 32px，flex items-center，rounded-sm
+- 默认：transparent 背景，text-foreground
+- 悬停：bg-accent/50 背景
+- 选中：bg-accent text-accent-foreground
+- 缩进：每层级 padding-left: 24px
+- 展开箭头：ChevronRight 图标，展开时 rotate-90，transition-transform duration-200
+- 节点间无 gap，紧密排列
+
+## 右键菜单
+
+复用项目已有 ContextMenu 组件样式：bg-popover、border、shadow-md、rounded-md，菜单项 h-8 px-2 text-sm
+
+## 交互
+
+- 点击箭头：仅展开/折叠，不选中
+- 点击行：选中节点
+- 右键行：弹出 ContextMenu
+- 键盘：ArrowUp/Down 切换焦点，ArrowRight/Left 展开/折叠，Enter 选中
+
+## Agent Extensions
+
+### Skill
+
+- **shadcn-vue**
+- 目的：验证 Collapsible 和 ContextMenu 组件的 reka-ui API（v-model:open、Trigger/Content/Root 用法），确保封装正确
+- 预期结果：确认 CollapsibleRoot 的 open/defaultOpen props、ContextMenuRoot 的 modal 等关键 API 用法
\ No newline at end of file
diff --git a/code/fms/fms-vue/package.json b/code/fms/fms-vue/package.json
index 8fc56f81..2b6260ce 100644
--- a/code/fms/fms-vue/package.json
+++ b/code/fms/fms-vue/package.json
@@ -1,9 +1,8 @@
 {
   "name": "fms-vue",
-  "private": true,
   "version": "0.0.0",
+  "private": true,
   "type": "module",
-  "packageManager": "pnpm@11.5.0",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
@@ -23,6 +22,7 @@
     "nprogress": "^0.2.0",
     "pinia": "^4.0.2",
     "reka-ui": "^2.10.1",
+    "stk-table-vue": "^1.1.0",
     "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0",
@@ -43,5 +43,6 @@
     "typescript": "~6.0.2",
     "vite": "^8.2.0",
     "vue-tsc": "^3.3.8"
-  }
+  },
+  "packageManager": "pnpm@11.5.0"
 }
diff --git a/code/fms/fms-vue/pnpm-lock.yaml b/code/fms/fms-vue/pnpm-lock.yaml
index 012cf6b5..1d60e931 100644
--- a/code/fms/fms-vue/pnpm-lock.yaml
+++ b/code/fms/fms-vue/pnpm-lock.yaml
@@ -41,6 +41,9 @@ importers:
       reka-ui:
         specifier: ^2.10.1
         version: 2.10.1(vue@3.5.41(typescript@6.0.3))
+      stk-table-vue:
+        specifier: ^1.1.0
+        version: 1.1.0
       tailwind-merge:
         specifier: ^3.6.0
         version: 3.6.0
@@ -1256,6 +1259,9 @@ packages:
     resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
     engines: {node: '>=0.10.0'}
 
+  stk-table-vue@1.1.0:
+    resolution: {integrity: sha512-lPVBGZNuVGxSWq0k+XBGY00xStjplm4ckRIm/Zl83SAnxfMYUKQB0v/dEovAl/oARf9gq3/QvgZnTj93Bze66g==}
+
   superjson@2.2.6:
     resolution: {integrity: sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==}
     engines: {node: '>=16'}
@@ -2452,6 +2458,8 @@ snapshots:
 
   speakingurl@14.0.1: {}
 
+  stk-table-vue@1.1.0: {}
+
   superjson@2.2.6:
     dependencies:
       copy-anything: 4.0.5
diff --git a/code/fms/fms-vue/pnpm-workspace.yaml b/code/fms/fms-vue/pnpm-workspace.yaml
index 54914969..21efc274 100644
--- a/code/fms/fms-vue/pnpm-workspace.yaml
+++ b/code/fms/fms-vue/pnpm-workspace.yaml
@@ -1,3 +1,3 @@
 allowBuilds:
-  '@parcel/watcher': true
+  "@parcel/watcher": true
   vue-demi: true
diff --git a/code/fms/fms-vue/src/App.vue b/code/fms/fms-vue/src/App.vue
index be8ca044..c4a6ccda 100644
--- a/code/fms/fms-vue/src/App.vue
+++ b/code/fms/fms-vue/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Toaster } from "@/components/ui/sonner"
+import { Toaster } from "@/components/ui/sonner";
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/FmsAutoComplete.vue b/code/fms/fms-vue/src/components/FmsAutoComplete.vue
index 6909dc35..63aa6de6 100644
--- a/code/fms/fms-vue/src/components/FmsAutoComplete.vue
+++ b/code/fms/fms-vue/src/components/FmsAutoComplete.vue
@@ -4,6 +4,7 @@ import { useTimeoutFn } from "@vueuse/core";
 import { Check, ChevronDown, LoaderCircle, X } from "@lucide/vue";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
+import { Popover, PopoverAnchor, PopoverContent } from "@/components/ui/popover";
 import { useLookupOptions } from "@/composables/useLookupOptions";
 import { cn } from "@/lib/utils";
 
@@ -35,7 +36,7 @@ const props = withDefaults(
 const modelValue = defineModel<string>({ default: "" });
 const emit = defineEmits<{ change: [record: Record<string, any> | null] }>();
 
-const { rows, loading, search, immediate, loadMore, reset } = useLookupOptions({
+const { rows, loading, search, immediate, loadMore } = useLookupOptions({
   viewName: props.viewName,
   labelKey: props.labelKey,
   valueKey: props.valueKey,
@@ -47,6 +48,7 @@ const { rows, loading, search, immediate, loadMore, reset } = useLookupOptions({
 });
 
 const open = ref(false);
+const hasPopupContent = ref(false);
 const keyword = ref("");
 const highlighted = ref(-1);
 const hasClearValue = computed(() => Boolean(modelValue.value || keyword.value));
@@ -54,7 +56,6 @@ const hasClearValue = computed(() => Boolean(modelValue.value || keyword.value))
 const { start: startBlurTimer, stop: stopBlurTimer } = useTimeoutFn(
   () => {
     open.value = false;
-    reset();
   },
   150,
   { immediate: false },
@@ -70,6 +71,7 @@ const options = computed(() =>
 function onFocus() {
   stopBlurTimer();
   open.value = true;
+  hasPopupContent.value = options.value.length > 0;
   // 输入框保留当前值，但拉全量列表
   keyword.value = modelValue.value;
   highlighted.value = -1;
@@ -93,12 +95,16 @@ function onBlur() {
   startBlurTimer();
 }
 
+function onPopoverOpenChange(nextOpen: boolean) {
+  open.value = nextOpen;
+  if (!nextOpen) stopBlurTimer();
+}
+
 function select(opt: { value: string; label: string; record: Record<string, any> }) {
   stopBlurTimer();
   modelValue.value = opt.label;
   keyword.value = "";
   open.value = false;
-  reset();
   emit("change", opt.record);
 }
 
@@ -107,7 +113,6 @@ function clear() {
   modelValue.value = "";
   keyword.value = "";
   open.value = false;
-  reset();
   emit("change", null);
 }
 
@@ -129,7 +134,6 @@ function onKeydown(e: KeyboardEvent) {
     select(options.value[highlighted.value]!);
   } else if (e.key === "Escape") {
     open.value = false;
-    reset();
   }
 }
 
@@ -154,48 +158,70 @@ watch(options, (list) => {
     highlighted.value = 0;
   }
 });
+
+watch(loading, (isLoading) => {
+  if (open.value && !isLoading) hasPopupContent.value = true;
+});
 </script>
 
 <template>
-  <div class="group relative w-full">
-    <Input
-      :model-value="open ? keyword : modelValue"
-      class="w-full pr-8"
-      :placeholder="placeholder"
-      @focus="onFocus"
-      @click="onInputClick"
-      @update:model-value="onInput"
-      @keydown="onKeydown"
-      @blur="onBlur"
-    />
-    <Button
-      v-if="allowClear && hasClearValue && !loading"
-      variant="ghost"
-      size="icon-sm"
-      class="pointer-events-none absolute right-1 top-1/2 size-6 -translate-y-1/2 cursor-pointer opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100"
-      @pointerdown.prevent="clear"
-    >
-      <X class="size-3.5" />
-    </Button>
-    <LoaderCircle
-      v-if="loading"
-      class="absolute right-2 top-1/2 -translate-y-1/2 size-4 animate-spin text-muted-foreground pointer-events-none"
-    />
-    <ChevronDown
-      v-else
-      class="pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
-      :class="allowClear && hasClearValue ? 'transition-opacity group-hover:opacity-0' : ''"
-    />
-
-    <div
-      v-if="open"
-      class="absolute left-0 top-full z-50 mt-1 w-full rounded-md border bg-popover text-popover-foreground shadow-md"
-    >
-      <div role="listbox" class="max-h-[200px] overflow-y-auto" @scroll.passive="handleScroll">
-        <div
-          v-if="!loading && !options.length"
-          class="py-6 text-center text-sm text-muted-foreground"
+  <Popover :open="open" @update:open="onPopoverOpenChange">
+    <PopoverAnchor as-child>
+      <div class="group relative w-full">
+        <Input
+          :model-value="open ? keyword : modelValue"
+          class="w-full pr-8"
+          :placeholder="placeholder"
+          @focus="onFocus"
+          @click="onInputClick"
+          @update:model-value="onInput"
+          @keydown="onKeydown"
+          @blur="onBlur"
+        />
+        <Button
+          v-if="allowClear && hasClearValue && !loading"
+          variant="ghost"
+          size="icon-sm"
+          class="pointer-events-none absolute right-1 top-1/2 size-6 -translate-y-1/2 cursor-pointer opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100"
+          @pointerdown.prevent="clear"
         >
+          <X class="size-3.5" />
+        </Button>
+        <LoaderCircle
+          v-if="loading"
+          class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 size-4 animate-spin text-muted-foreground"
+        />
+        <ChevronDown
+          v-else
+          class="pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+          :class="allowClear && hasClearValue ? 'transition-opacity group-hover:opacity-0' : ''"
+        />
+      </div>
+    </PopoverAnchor>
+
+    <PopoverContent
+      v-if="hasPopupContent"
+      align="start"
+      side="bottom"
+      :side-offset="4"
+      :collision-padding="8"
+      class="!animate-none w-[var(--reka-popover-trigger-width)] p-0"
+      @open-auto-focus.prevent
+      @close-auto-focus.prevent
+    >
+      <div
+        role="listbox"
+        :class="cn('max-h-[200px] overflow-y-auto', loading && !options.length && 'h-[200px]')"
+        @scroll.passive="handleScroll"
+      >
+        <div
+          v-if="loading && !options.length"
+          class="flex h-full items-center justify-center text-muted-foreground"
+        >
+          <LoaderCircle class="size-4 animate-spin" />
+        </div>
+
+        <div v-else-if="!options.length" class="py-6 text-center text-sm text-muted-foreground">
           暂无数据
         </div>
 
@@ -211,7 +237,8 @@ watch(options, (list) => {
             )
           "
           @mouseenter="highlighted = i"
-          @mousedown.prevent="select(opt)"
+          @pointerdown.prevent
+          @click="select(opt)"
         >
           <span class="min-w-0 flex-1 truncate">{{ opt.label }}</span>
           <span class="inline-flex size-4 shrink-0 items-center justify-center">
@@ -219,6 +246,6 @@ watch(options, (list) => {
           </span>
         </div>
       </div>
-    </div>
-  </div>
+    </PopoverContent>
+  </Popover>
 </template>
diff --git a/code/fms/fms-vue/src/components/FmsSelect.vue b/code/fms/fms-vue/src/components/FmsSelect.vue
index d28214c5..6d9d2c52 100644
--- a/code/fms/fms-vue/src/components/FmsSelect.vue
+++ b/code/fms/fms-vue/src/components/FmsSelect.vue
@@ -4,6 +4,7 @@ import { useTimeoutFn } from "@vueuse/core";
 import { Check, ChevronDown, LoaderCircle, X } from "@lucide/vue";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
+import { Popover, PopoverAnchor, PopoverContent } from "@/components/ui/popover";
 import { useLookupOptions } from "@/composables/useLookupOptions";
 import { cn } from "@/lib/utils";
 
@@ -39,7 +40,7 @@ const modelLabel = defineModel<string>("label", { default: "" });
 
 const emit = defineEmits<{ change: [record: Record<string, any> | null] }>();
 
-const { rows, loading, search, immediate, loadMore, reset } = useLookupOptions({
+const { rows, loading, search, immediate, loadMore } = useLookupOptions({
   viewName: props.viewName,
   labelKey: props.labelKey,
   valueKey: props.valueKey,
@@ -51,6 +52,7 @@ const { rows, loading, search, immediate, loadMore, reset } = useLookupOptions({
 });
 
 const open = ref(false);
+const hasPopupContent = ref(false);
 const keyword = ref("");
 const highlighted = ref(-1);
 const hasClearValue = computed(() => Boolean(modelValue.value || keyword.value));
@@ -58,7 +60,6 @@ const hasClearValue = computed(() => Boolean(modelValue.value || keyword.value))
 const { start: startBlurTimer, stop: stopBlurTimer } = useTimeoutFn(
   () => {
     open.value = false;
-    reset();
   },
   150,
   { immediate: false },
@@ -91,6 +92,7 @@ const displays = computed(() => {
 function onFocus() {
   stopBlurTimer();
   open.value = true;
+  hasPopupContent.value = displays.value.length > 0;
   // Keep the selected label visible and use an empty query for the full list.
   keyword.value = displayLabel.value;
   highlighted.value = -1;
@@ -121,13 +123,17 @@ function onBlur() {
   startBlurTimer();
 }
 
+function onPopoverOpenChange(nextOpen: boolean) {
+  open.value = nextOpen;
+  if (!nextOpen) stopBlurTimer();
+}
+
 function select(opt: { value: string; label: string; record: Record<string, any> }) {
   stopBlurTimer();
   modelValue.value = opt.value;
   modelLabel.value = opt.label;
   keyword.value = "";
   open.value = false;
-  reset();
   emit("change", opt.record);
 }
 
@@ -137,7 +143,6 @@ function clear() {
   modelLabel.value = "";
   keyword.value = "";
   open.value = false;
-  reset();
   emit("change", null);
 }
 
@@ -160,7 +165,6 @@ function onKeydown(e: KeyboardEvent) {
     select(list[highlighted.value]!);
   } else if (e.key === "Escape") {
     open.value = false;
-    reset();
   }
 }
 
@@ -181,48 +185,70 @@ watch(displays, (list) => {
     highlighted.value = 0;
   }
 });
+
+watch(loading, (isLoading) => {
+  if (open.value && !isLoading) hasPopupContent.value = true;
+});
 </script>
 
 <template>
-  <div class="group relative w-full">
-    <Input
-      :model-value="open ? keyword : displayLabel"
-      class="w-full pr-8"
-      :placeholder="placeholder"
-      @focus="onFocus"
-      @click="onInputClick"
-      @update:model-value="onInput"
-      @keydown="onKeydown"
-      @blur="onBlur"
-    />
-    <Button
-      v-if="allowClear && hasClearValue && !loading"
-      variant="ghost"
-      size="icon-sm"
-      class="pointer-events-none absolute right-1 top-1/2 size-6 -translate-y-1/2 cursor-pointer opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100"
-      @pointerdown.prevent="clear"
-    >
-      <X class="size-3.5" />
-    </Button>
-    <LoaderCircle
-      v-if="loading"
-      class="absolute right-2 top-1/2 -translate-y-1/2 size-4 animate-spin text-muted-foreground pointer-events-none"
-    />
-    <ChevronDown
-      v-else
-      class="pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
-      :class="allowClear && hasClearValue ? 'transition-opacity group-hover:opacity-0' : ''"
-    />
-
-    <div
-      v-if="open"
-      class="absolute left-0 top-full z-50 mt-1 w-full rounded-md border bg-popover text-popover-foreground shadow-md"
-    >
-      <div role="listbox" class="max-h-[200px] overflow-y-auto" @scroll.passive="handleScroll">
-        <div
-          v-if="!loading && !displays.length"
-          class="py-6 text-center text-sm text-muted-foreground"
+  <Popover :open="open" @update:open="onPopoverOpenChange">
+    <PopoverAnchor as-child>
+      <div class="group relative w-full">
+        <Input
+          :model-value="open ? keyword : displayLabel"
+          class="w-full pr-8"
+          :placeholder="placeholder"
+          @focus="onFocus"
+          @click="onInputClick"
+          @update:model-value="onInput"
+          @keydown="onKeydown"
+          @blur="onBlur"
+        />
+        <Button
+          v-if="allowClear && hasClearValue && !loading"
+          variant="ghost"
+          size="icon-sm"
+          class="pointer-events-none absolute right-1 top-1/2 size-6 -translate-y-1/2 cursor-pointer opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100"
+          @pointerdown.prevent="clear"
         >
+          <X class="size-3.5" />
+        </Button>
+        <LoaderCircle
+          v-if="loading"
+          class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 size-4 animate-spin text-muted-foreground"
+        />
+        <ChevronDown
+          v-else
+          class="pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+          :class="allowClear && hasClearValue ? 'transition-opacity group-hover:opacity-0' : ''"
+        />
+      </div>
+    </PopoverAnchor>
+
+    <PopoverContent
+      v-if="hasPopupContent"
+      align="start"
+      side="bottom"
+      :side-offset="4"
+      :collision-padding="8"
+      class="!animate-none w-[var(--reka-popover-trigger-width)] p-0"
+      @open-auto-focus.prevent
+      @close-auto-focus.prevent
+    >
+      <div
+        role="listbox"
+        :class="cn('max-h-[200px] overflow-y-auto', loading && !displays.length && 'h-[200px]')"
+        @scroll.passive="handleScroll"
+      >
+        <div
+          v-if="loading && !displays.length"
+          class="flex h-full items-center justify-center text-muted-foreground"
+        >
+          <LoaderCircle class="size-4 animate-spin" />
+        </div>
+
+        <div v-else-if="!displays.length" class="py-6 text-center text-sm text-muted-foreground">
           暂无数据
         </div>
 
@@ -238,7 +264,8 @@ watch(displays, (list) => {
             )
           "
           @mouseenter="highlighted = i"
-          @mousedown.prevent="select(opt)"
+          @pointerdown.prevent
+          @click="select(opt)"
         >
           <span class="min-w-0 flex-1 truncate">{{ opt.label }}</span>
           <span class="inline-flex size-4 shrink-0 items-center justify-center">
@@ -246,6 +273,6 @@ watch(displays, (list) => {
           </span>
         </div>
       </div>
-    </div>
-  </div>
+    </PopoverContent>
+  </Popover>
 </template>
diff --git a/code/fms/fms-vue/src/components/FmsTree.vue b/code/fms/fms-vue/src/components/FmsTree.vue
new file mode 100644
index 00000000..3b713f54
--- /dev/null
+++ b/code/fms/fms-vue/src/components/FmsTree.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { computed, watch } from "vue";
+import FmsTreeNode from "./FmsTreeNode.vue";
+import type { TreeNode, ContextMenuItemDef } from "./FmsTreeNode.vue";
+
+const expandedKeys = defineModel<string[]>("expandedKeys", {
+  default: () => [],
+});
+const selectedKeys = defineModel<string[]>("selectedKeys", {
+  default: () => [],
+});
+
+const props = withDefaults(
+  defineProps<{
+    treeData: TreeNode[];
+    contextMenu?: ((node: TreeNode) => ContextMenuItemDef[]) | null;
+    rootKey?: string;
+    rootTitle?: string;
+    showRoot?: boolean;
+    indent?: number;
+  }>(),
+  {
+    contextMenu: null,
+    rootKey: "__fms_root__",
+    rootTitle: "全部分类",
+    showRoot: true,
+    indent: 24,
+  },
+);
+
+const emit = defineEmits<{
+  select: [keys: string[], info: { node: TreeNode }];
+  "menu-click": [payload: { key: string; node: TreeNode }];
+}>();
+
+defineOptions({
+  name: "FmsTree",
+});
+
+/** Auto-expand the virtual root on first load */
+let rootInitialized = false;
+watch(
+  () => expandedKeys.value,
+  (keys) => {
+    if (rootInitialized || !Array.isArray(keys)) return;
+    rootInitialized = true;
+    const hasRoot = keys.some((k: string) => String(k) === String(props.rootKey));
+    if (!hasRoot && props.showRoot) {
+      expandedKeys.value = [props.rootKey, ...keys];
+    }
+  },
+  { immediate: true },
+);
+
+const virtualRoot = computed<TreeNode>(() => ({
+  key: props.rootKey,
+  title: props.rootTitle,
+  children: props.treeData,
+}));
+
+function onToggleExpand(key: string, expanded: boolean) {
+  const keys = [...expandedKeys.value];
+  if (expanded) {
+    if (!keys.includes(key)) {
+      expandedKeys.value = [...keys, key];
+    }
+  } else {
+    expandedKeys.value = keys.filter((k) => k !== key);
+  }
+}
+
+function onSelect(keys: string[], info: { node: TreeNode }) {
+  selectedKeys.value = keys;
+  emit("select", keys, info);
+}
+
+function onMenuClick(payload: { key: string; node: TreeNode }) {
+  emit("menu-click", payload);
+}
+</script>
+
+<template>
+  <div data-tree-root class="fms-tree select-none" role="tree">
+    <!-- showRoot: wrap treeData in virtual root node -->
+    <FmsTreeNode
+      v-if="showRoot"
+      :node="virtualRoot"
+      :expanded-keys="expandedKeys"
+      :selected-keys="selectedKeys"
+      :indent="indent"
+      :level="0"
+      :context-menu="contextMenu"
+      @toggle-expand="onToggleExpand"
+      @select="onSelect"
+      @menu-click="onMenuClick"
+    >
+      <template v-if="$slots.title" #title="scope">
+        <slot name="title" :node="scope.node" />
+      </template>
+    </FmsTreeNode>
+
+    <!-- showRoot=false: render treeData directly -->
+    <template v-else>
+      <FmsTreeNode
+        v-for="node in treeData"
+        :key="node.key"
+        :node="node"
+        :expanded-keys="expandedKeys"
+        :selected-keys="selectedKeys"
+        :indent="indent"
+        :level="0"
+        :context-menu="contextMenu"
+        @toggle-expand="onToggleExpand"
+        @select="onSelect"
+        @menu-click="onMenuClick"
+      >
+        <template v-if="$slots.title" #title="scope">
+          <slot name="title" :node="scope.node" />
+        </template>
+      </FmsTreeNode>
+    </template>
+  </div>
+</template>
diff --git a/code/fms/fms-vue/src/components/FmsTreeNode.vue b/code/fms/fms-vue/src/components/FmsTreeNode.vue
new file mode 100644
index 00000000..c13d392c
--- /dev/null
+++ b/code/fms/fms-vue/src/components/FmsTreeNode.vue
@@ -0,0 +1,311 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { ChevronRight } from "@lucide/vue";
+import { cn } from "@/lib/utils";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+
+export interface TreeNode {
+  key: string;
+  title: string;
+  children?: TreeNode[];
+  [key: string]: unknown;
+}
+
+export interface ContextMenuItemDef {
+  key: string;
+  label: string;
+}
+
+const props = withDefaults(
+  defineProps<{
+    node: TreeNode;
+    expandedKeys: string[];
+    selectedKeys: string[];
+    indent?: number;
+    level?: number;
+    contextMenu?: ((node: TreeNode) => ContextMenuItemDef[]) | null;
+  }>(),
+  {
+    indent: 24,
+    level: 0,
+    contextMenu: null,
+  },
+);
+
+const emit = defineEmits<{
+  "toggle-expand": [key: string, expanded: boolean];
+  select: [keys: string[], info: { node: TreeNode }];
+  "menu-click": [payload: { key: string; node: TreeNode }];
+}>();
+
+defineOptions({
+  name: "FmsTreeNode",
+});
+
+const hasChildren = computed(() => !!(props.node.children && props.node.children.length > 0));
+
+const isExpanded = computed({
+  get: () => props.expandedKeys.includes(props.node.key),
+  set: (val: boolean) => emit("toggle-expand", props.node.key, val),
+});
+
+const isSelected = computed(() => props.selectedKeys.includes(props.node.key));
+
+const menuItems = computed<ContextMenuItemDef[]>(() => {
+  if (!props.contextMenu) return [];
+  return props.contextMenu(props.node) || [];
+});
+
+const rowPaddingLeft = computed(() => `${props.level * props.indent}px`);
+
+const leafPaddingLeft = computed(() => `${props.level * props.indent + 24}px`);
+
+function onNodeClick(e: MouseEvent) {
+  const target = e.target as HTMLElement;
+  if (target.closest("[data-tree-trigger]")) return;
+  emit("select", [props.node.key], { node: props.node });
+}
+
+function onMenuItemSelect(itemKey: string) {
+  emit("menu-click", { key: itemKey, node: props.node });
+}
+
+function onKeyDown(e: KeyboardEvent) {
+  const current = e.currentTarget as HTMLElement;
+
+  switch (e.key) {
+    case "ArrowDown": {
+      e.preventDefault();
+      focusNextNode(current);
+      break;
+    }
+    case "ArrowUp": {
+      e.preventDefault();
+      focusPrevNode(current);
+      break;
+    }
+    case "ArrowRight": {
+      e.preventDefault();
+      if (hasChildren.value && !isExpanded.value) {
+        emit("toggle-expand", props.node.key, true);
+      }
+      break;
+    }
+    case "ArrowLeft": {
+      e.preventDefault();
+      if (hasChildren.value && isExpanded.value) {
+        emit("toggle-expand", props.node.key, false);
+      }
+      break;
+    }
+    case "Enter":
+    case " ": {
+      e.preventDefault();
+      emit("select", [props.node.key], { node: props.node });
+      break;
+    }
+  }
+}
+
+function getAllVisibleNodes(): HTMLElement[] {
+  const treeRoot = document.querySelector<HTMLElement>("[data-tree-root]");
+  if (!treeRoot) return [];
+  return Array.from(treeRoot.querySelectorAll<HTMLElement>('[role="treeitem"]')).filter(
+    (el) => el.offsetParent !== null,
+  );
+}
+
+function focusNextNode(current: HTMLElement) {
+  const nodes = getAllVisibleNodes();
+  const idx = nodes.indexOf(current);
+  if (idx >= 0 && idx < nodes.length - 1) {
+    nodes[idx + 1]?.focus();
+  }
+}
+
+function focusPrevNode(current: HTMLElement) {
+  const nodes = getAllVisibleNodes();
+  const idx = nodes.indexOf(current);
+  if (idx > 0) {
+    nodes[idx - 1]?.focus();
+  }
+}
+</script>
+
+<template>
+  <!-- Node with children: wrap in Collapsible -->
+  <Collapsible v-if="hasChildren" v-model:open="isExpanded">
+    <ContextMenu v-if="contextMenu">
+      <ContextMenuTrigger>
+        <div
+          role="treeitem"
+          :aria-expanded="isExpanded"
+          :aria-selected="isSelected"
+          tabindex="0"
+          :style="{ paddingLeft: rowPaddingLeft }"
+          :class="
+            cn(
+              'flex h-8 cursor-pointer items-center gap-1 rounded-sm text-sm transition-colors',
+              isSelected
+                ? 'bg-accent text-accent-foreground'
+                : 'text-foreground hover:bg-accent/50',
+            )
+          "
+          @click="onNodeClick"
+          @keydown="onKeyDown"
+        >
+          <CollapsibleTrigger as-child>
+            <button
+              data-tree-trigger
+              class="inline-flex size-5 shrink-0 items-center justify-center rounded-sm hover:bg-accent"
+              tabindex="-1"
+            >
+              <ChevronRight
+                class="size-4 transition-transform duration-200"
+                :class="isExpanded ? 'rotate-90' : ''"
+              />
+            </button>
+          </CollapsibleTrigger>
+          <span class="min-w-0 flex-1 truncate">
+            <slot name="title" :node="node">
+              {{ node.title }}
+            </slot>
+          </span>
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem
+          v-for="item in menuItems"
+          :key="item.key"
+          @select="onMenuItemSelect(item.key)"
+        >
+          {{ item.label }}
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+
+    <!-- Node with children, no context menu -->
+    <div
+      v-else
+      role="treeitem"
+      :aria-expanded="isExpanded"
+      :aria-selected="isSelected"
+      tabindex="0"
+      :style="{ paddingLeft: rowPaddingLeft }"
+      :class="
+        cn(
+          'flex h-8 cursor-pointer items-center gap-1 rounded-sm text-sm transition-colors',
+          isSelected ? 'bg-accent text-accent-foreground' : 'text-foreground hover:bg-accent/50',
+        )
+      "
+      @click="onNodeClick"
+      @keydown="onKeyDown"
+    >
+      <CollapsibleTrigger as-child>
+        <button
+          data-tree-trigger
+          class="inline-flex size-5 shrink-0 items-center justify-center rounded-sm hover:bg-accent"
+          tabindex="-1"
+        >
+          <ChevronRight
+            class="size-4 transition-transform duration-200"
+            :class="isExpanded ? 'rotate-90' : ''"
+          />
+        </button>
+      </CollapsibleTrigger>
+      <span class="min-w-0 flex-1 truncate">
+        <slot name="title" :node="node">
+          {{ node.title }}
+        </slot>
+      </span>
+    </div>
+
+    <CollapsibleContent>
+      <FmsTreeNode
+        v-for="child in node.children"
+        :key="child.key"
+        :node="child"
+        :expanded-keys="expandedKeys"
+        :selected-keys="selectedKeys"
+        :indent="indent"
+        :level="level + 1"
+        :context-menu="contextMenu"
+        @toggle-expand="(key: string, expanded: boolean) => emit('toggle-expand', key, expanded)"
+        @select="(keys: string[], info: { node: TreeNode }) => emit('select', keys, info)"
+        @menu-click="(payload: { key: string; node: TreeNode }) => emit('menu-click', payload)"
+      >
+        <template v-if="$slots.title" #title="scope">
+          <slot name="title" :node="scope.node" />
+        </template>
+      </FmsTreeNode>
+    </CollapsibleContent>
+  </Collapsible>
+
+  <!-- Leaf node (no children) -->
+  <template v-else>
+    <ContextMenu v-if="contextMenu">
+      <ContextMenuTrigger>
+        <div
+          role="treeitem"
+          :aria-selected="isSelected"
+          tabindex="0"
+          :style="{ paddingLeft: leafPaddingLeft }"
+          :class="
+            cn(
+              'flex h-8 cursor-pointer items-center rounded-sm text-sm transition-colors',
+              isSelected
+                ? 'bg-accent text-accent-foreground'
+                : 'text-foreground hover:bg-accent/50',
+            )
+          "
+          @click="onNodeClick"
+          @keydown="onKeyDown"
+        >
+          <span class="min-w-0 flex-1 truncate">
+            <slot name="title" :node="node">
+              {{ node.title }}
+            </slot>
+          </span>
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem
+          v-for="item in menuItems"
+          :key="item.key"
+          @select="onMenuItemSelect(item.key)"
+        >
+          {{ item.label }}
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+
+    <!-- Leaf node, no context menu -->
+    <div
+      v-else
+      role="treeitem"
+      :aria-selected="isSelected"
+      tabindex="0"
+      :style="{ paddingLeft: leafPaddingLeft }"
+      :class="
+        cn(
+          'flex h-8 cursor-pointer items-center rounded-sm text-sm transition-colors',
+          isSelected ? 'bg-accent text-accent-foreground' : 'text-foreground hover:bg-accent/50',
+        )
+      "
+      @click="onNodeClick"
+      @keydown="onKeyDown"
+    >
+      <span class="min-w-0 flex-1 truncate">
+        <slot name="title" :node="node">
+          {{ node.title }}
+        </slot>
+      </span>
+    </div>
+  </template>
+</template>
diff --git a/code/fms/fms-vue/src/components/fms-table/FmsTable.vue b/code/fms/fms-vue/src/components/fms-table/FmsTable.vue
new file mode 100644
index 00000000..a846aefb
--- /dev/null
+++ b/code/fms/fms-vue/src/components/fms-table/FmsTable.vue
@@ -0,0 +1,822 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, ref, shallowRef, useSlots, watch } from "vue";
+import { useRafFn, useResizeObserver } from "@vueuse/core";
+import { StkTable } from "stk-table-vue";
+import { useAppStore } from "@/stores/app";
+import { createSelectionColumn, isSelectionColumn } from "./utils/createSelectionCellRenderers";
+import { resolveCustomCell } from "./utils/createCellRenderer";
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps({
+  virtual: { type: Boolean, default: true },
+  virtualX: { type: Boolean, default: true },
+  colResizable: { type: Boolean, default: true },
+  bordered: { type: [Boolean, String], default: true },
+  noDataFull: { type: Boolean, default: true },
+  showOverflow: { type: Boolean, default: true },
+  columns: { type: Array, default: () => [] },
+  // 序号列默认显示；false=关闭；{ title, width }=自定义
+  seq: { type: [Boolean, Object], default: true },
+  // 列头拖拽默认开启；false=关闭；{ mode, disabled }=自定义
+  columnDraggable: { type: [Boolean, Object], default: true },
+  // 行多选：{ selectedRowKeys, onChange }，提供时在最前列插入复选框列
+  rowSelection: { type: Object, default: null },
+  dataSource: { type: Array, default: () => [] },
+  rowKey: { type: [String, Function], default: "id" },
+  activeRowKey: { type: [String, Number], default: null },
+  // 行拖拽排序：开启后显示拖拽手柄，并通过 row-order-change 回传排序后的完整数据。
+  rowDraggable: { type: Boolean, default: false },
+  // 存在 editor 配置的列默认可编辑；设为 false 可整体禁用编辑。
+  editable: { type: Boolean, default: true },
+  // 默认跟随应用深浅色模式，也允许单个表格显式覆盖。
+  theme: {
+    type: String,
+    default: undefined,
+    validator: (value) => value === "light" || value === "dark",
+  },
+});
+
+const emit = defineEmits(["update:columns", "change", "row-order-change"]);
+
+const rootRef = ref(null);
+const tableRef = ref(null);
+const slots = useSlots();
+const appStore = useAppStore();
+const tableTheme = computed(() => props.theme ?? (appStore.isDark ? "dark" : "light"));
+const containerHeight = ref(0);
+
+// Tab 面板从隐藏恢复时，等到容器拥有有效尺寸再刷新虚拟滚动布局。
+// RAF 将同一帧内的多次 ResizeObserver 通知合并，避免重复重排。
+const { resume: refreshLayout } = useRafFn(
+  async () => {
+    await nextTick();
+    tableRef.value?.initVirtualScroll?.();
+    await nextTick();
+  },
+  { immediate: false, once: true },
+);
+
+useResizeObserver(rootRef, ([entry]) => {
+  const { width, height } = entry.contentRect;
+  containerHeight.value = Math.floor(height);
+  if (width > 0 && height > 0) refreshLayout();
+});
+
+const NAVIGATION_KEYS = new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Tab"]);
+const rowEditingStates = new WeakMap();
+let activeEditingRow = null;
+let pendingEditingTarget = null;
+const pressedNavigationKeys = new Set();
+
+function getRowKey(row) {
+  return typeof props.rowKey === "function" ? props.rowKey(row) : row?.[props.rowKey];
+}
+
+function getRowEditingState(row) {
+  if (!row || typeof row !== "object") return null;
+  let state = rowEditingStates.get(row);
+  if (!state) {
+    state = shallowRef({ editing: false, focusCol: null, initialValues: null });
+    rowEditingStates.set(row, state);
+  }
+  return state;
+}
+
+function captureEditableValues(row) {
+  return new Map(
+    props.columns.filter((col) => col.editor).map((col) => [col.dataIndex, row[col.dataIndex]]),
+  );
+}
+
+function clearActiveEditing() {
+  if (!activeEditingRow) return;
+  const state = rowEditingStates.get(activeEditingRow);
+  activeEditingRow = null;
+  if (state) state.value = { editing: false, focusCol: null, initialValues: null };
+}
+
+// 父级可能在 change 后回灌同 rowKey 的新对象，编辑状态需要随行对象迁移。
+function rebindActiveEditingRow(rows) {
+  if (!activeEditingRow || rows.includes(activeEditingRow)) return;
+
+  const previousRow = activeEditingRow;
+  const previousState = rowEditingStates.get(previousRow)?.value;
+  const previousKey = getRowKey(previousRow);
+  const replacement =
+    previousKey == null ? null : rows.find((row) => String(getRowKey(row)) === String(previousKey));
+
+  clearActiveEditing();
+  if (!replacement || !previousState?.editing) return;
+
+  const state = getRowEditingState(replacement);
+  activeEditingRow = replacement;
+  state.value = {
+    editing: true,
+    focusCol: previousState.focusCol,
+    initialValues: captureEditableValues(replacement),
+  };
+}
+
+function activateEditing(row, focusCol) {
+  if (!props.editable || !row) return;
+  const state = getRowEditingState(row);
+  if (!state) return;
+
+  if (activeEditingRow !== row) {
+    clearActiveEditing();
+    activeEditingRow = row;
+    state.value = {
+      editing: true,
+      focusCol,
+      initialValues: captureEditableValues(row),
+    };
+    return;
+  }
+
+  const current = state.value;
+  if (current.editing && current.focusCol === focusCol) return;
+  state.value = { ...current, editing: true, focusCol };
+}
+
+function editorValuesEqual(col, previous, current) {
+  if (col.editor?.type === "select" || col.editor?.type === "checkbox") {
+    return Object.is(previous, current);
+  }
+  return String(previous ?? "") === String(current ?? "");
+}
+
+const selectOnFocus = ref(true);
+const editingCtx = {
+  isEditing: (row) => props.editable && getRowEditingState(row)?.value.editing,
+  shouldFocus: (row, col) => getRowEditingState(row)?.value.focusCol === col.dataIndex,
+  shouldSelectOnFocus: selectOnFocus,
+  shouldNotify: (row, col, newValue) => {
+    const values = getRowEditingState(row)?.value.initialValues;
+    if (!values?.has(col.dataIndex)) return true;
+    if (editorValuesEqual(col, values.get(col.dataIndex), newValue)) return false;
+    values.set(col.dataIndex, newValue);
+    return true;
+  },
+  onChange: (row, col, newValue) => {
+    emit("change", row, col, newValue);
+  },
+};
+
+// 由 seq 派生：enabled / title / width
+const seqConfig = computed(() => {
+  const enabled = !!props.seq;
+  if (!enabled) return { enabled: false, title: "序号", width: 50 };
+  const cfg = props.seq === true ? {} : props.seq;
+  return {
+    enabled: true,
+    title: cfg.title ?? "序号",
+    width: Number(cfg.width ?? 50),
+  };
+});
+const columnDragConfig = computed(() => {
+  if (!props.columnDraggable) return false;
+  const configured = props.columnDraggable === true ? {} : props.columnDraggable;
+  return {
+    ...configured,
+    disabled: (column) => {
+      if (
+        isSelectionColumn(column) ||
+        column.type === "seq" ||
+        column.type === "dragRow" ||
+        column.type === "expand" ||
+        column.dataIndex === "" ||
+        column.dataIndex === "__actions__"
+      ) {
+        return true;
+      }
+      if (typeof configured.disabled === "function") return configured.disabled(column);
+      return Boolean(configured.disabled);
+    },
+  };
+});
+const hasRowSelection = computed(() => Boolean(props.rowSelection));
+
+const columnResizeConfig = computed(() => {
+  if (!props.colResizable) return false;
+  return true;
+});
+
+const dragRowColumn = {
+  type: "dragRow",
+  dataIndex: "__drag_row__",
+  title: "",
+  width: 40,
+  resizable: false,
+};
+
+function getHeaderAlign(column) {
+  if (column.headerAlign) return column.headerAlign;
+  if (isSelectionColumn(column)) return "center";
+  if (column.dataIndex === "actions") return "center";
+  if (column.actions && column.actions.length) return "center";
+  if (column.checkbox === true) return "center";
+  if (column.editor && column.editor.type === "checkbox") return "center";
+  return "left";
+}
+
+const displayColumns = computed(() => {
+  const cols = props.columns.map((col) => resolveCustomCell(col, editingCtx));
+  const seq = seqConfig.value;
+  if (seq.enabled) {
+    cols.unshift({
+      type: "seq",
+      width: seq.width,
+      dataIndex: "",
+      title: seq.title,
+      resizable: false,
+    });
+  }
+  if (props.rowDraggable) cols.unshift(dragRowColumn);
+  if (hasRowSelection.value) cols.unshift(selectionColumn);
+
+  return cols.map((column) => ({
+    ...column,
+    headerAlign: getHeaderAlign(column),
+  }));
+});
+
+// 剥离内部列（选择列、序号列、拖拽列）后回传，避免污染父组件 columns
+function onColumnsUpdate(columns) {
+  const originalByKey = new Map(
+    props.columns.map((col) => [String(col.key ?? col.dataIndex ?? ""), col]),
+  );
+  const real = (columns || [])
+    .filter(
+      (c) =>
+        !isSelectionColumn(c) && c.type !== "seq" && c.type !== "dragRow" && c.dataIndex !== "",
+    )
+    .map((col) => {
+      const original = originalByKey.get(String(col.key ?? col.dataIndex ?? ""));
+      return original ? { ...original, width: col.width ?? original.width } : col;
+    });
+  emit("update:columns", real);
+}
+
+function handleRowOrderChange(sourceIndex, targetIndex) {
+  const rows = tableRef.value?.getTableData?.() ?? props.dataSource;
+  tableRef.value?.clearSelectedArea?.();
+  emit("row-order-change", [...rows], sourceIndex, targetIndex);
+}
+
+// 行高同时作为 CSS 变量与 StkTable 的 row-height / header-row-height
+const rowHeight = 34;
+const headerRowHeight = 40;
+const hasBottomGap = computed(() => {
+  if (!props.dataSource.length || containerHeight.value <= 0) return false;
+  const bodyHeight = Math.max(containerHeight.value - headerRowHeight, 0);
+  return props.dataSource.length * rowHeight < bodyHeight - 1;
+});
+const customVars = computed(() => {
+  // 线条只覆盖真实数据行；数据铺满视口时不绘制最后一行，避免与外框底线叠加。
+  const lineRowCount = Math.max(props.dataSource.length - (hasBottomGap.value ? 0 : 1), 0);
+  return {
+    "--header-row-height": `${headerRowHeight}px`,
+    "--row-height": `${rowHeight}px`,
+    "--footer-row-height": "36px",
+    "--th-bgc": "var(--background)",
+    "--tf-bgc": "var(--background)",
+    "--fms-data-line-height": `${lineRowCount * rowHeight}px`,
+  };
+});
+
+// 选择列：已选状态管理 + 渲染逻辑全部内聚在 createSelectionColumn 中
+const selectionColumn = createSelectionColumn({
+  getDataSource: () => props.dataSource,
+  getRowKey,
+  getSelectedRowKeys: () => props.rowSelection?.selectedRowKeys ?? [],
+  isRowDisabled: (row) => Boolean(props.rowSelection?.getCheckboxProps?.(row)?.disabled),
+  onChange: (keys, rows) => props.rowSelection?.onChange?.(keys, rows),
+});
+
+// 滚动到指定行（新增后聚焦）
+async function scrollToRow(rowKey) {
+  await nextTick();
+  const table = tableRef.value;
+  if (!table) return;
+  const idx = props.dataSource.findIndex((row) => String(getRowKey(row)) === String(rowKey));
+  if (idx < 0) return;
+  table.scrollTo(idx * rowHeight, null);
+}
+
+// 程序化激活行编辑。新增行等场景默认先滚动到目标行；行内操作可传
+// { scroll: false } 保持当前滚动位置。
+async function editRow(rowKey, focusCol = null, options = {}) {
+  if (options.scroll === false) await nextTick();
+  else await scrollToRow(rowKey);
+  await nextTick();
+  const row = props.dataSource.find((item) => String(getRowKey(item)) === String(rowKey));
+  if (!row) return;
+  const table = tableRef.value;
+  table?.setCurrentRow?.(row, { silent: true });
+  activateEditing(row, focusCol);
+
+  const focusColumn = displayColumns.value.find((column) => column.dataIndex === focusCol);
+  if (focusColumn) {
+    table?.setAreaSelection?.(
+      { begin: { row, col: focusColumn } },
+      { silent: true, scrollToView: false },
+    );
+  }
+}
+
+function getSelectedArea() {
+  return tableRef.value?.getSelectedArea?.();
+}
+
+function clearSelectedArea() {
+  tableRef.value?.clearSelectedArea?.();
+}
+
+function setAreaSelection(...args) {
+  return tableRef.value?.setAreaSelection?.(...args);
+}
+
+function setRowExpand(...args) {
+  return tableRef.value?.setRowExpand?.(...args);
+}
+
+function initVirtualScroll() {
+  return tableRef.value?.initVirtualScroll?.();
+}
+
+let editActivateTimer = null;
+let lastEditActivateAt = 0;
+let isRepeatNavigation = false;
+
+function clearEditActivateTimer() {
+  if (editActivateTimer) {
+    clearTimeout(editActivateTimer);
+    editActivateTimer = null;
+  }
+}
+
+// 键盘导航停止（松开按键或停顿）后再激活编辑器，合并连续/按住按键，
+// 避免滚动过程中每帧创建/销毁编辑器组件导致掉帧。
+function scheduleEditActivation() {
+  clearEditActivateTimer();
+  editActivateTimer = setTimeout(() => {
+    editActivateTimer = null;
+    commitPendingEditing();
+  }, 100);
+}
+
+function commitPendingEditing() {
+  const target = pendingEditingTarget;
+  pendingEditingTarget = null;
+  if (!target) return;
+  const row = props.dataSource.find(
+    (item) => item === target.row || String(getRowKey(item)) === String(getRowKey(target.row)),
+  );
+  if (row) {
+    activateEditing(row, target.focusCol);
+    tableRef.value?.setCurrentRow?.(row, { silent: true });
+    lastEditActivateAt = performance.now();
+  }
+}
+
+function removeNavigationListeners() {
+  window.removeEventListener("keyup", handleKeyupCapture, true);
+  window.removeEventListener("blur", handleWindowBlur);
+}
+
+function handleKeydownCapture(event) {
+  if (!NAVIGATION_KEYS.has(event.key)) return;
+  if (!pressedNavigationKeys.size) {
+    window.addEventListener("keyup", handleKeyupCapture, true);
+    window.addEventListener("blur", handleWindowBlur);
+  }
+  pressedNavigationKeys.add(event.key);
+  // event.repeat=true 表示系统自动重复（按住方向键不松），用于区分“按住滚动”与“离散点按”
+  if (event.repeat) isRepeatNavigation = true;
+}
+
+function handleKeyupCapture(event) {
+  if (!NAVIGATION_KEYS.has(event.key)) return;
+  if (!pressedNavigationKeys.delete(event.key) || pressedNavigationKeys.size) return;
+
+  removeNavigationListeners();
+
+  if (isRepeatNavigation) {
+    // 长按已经结束，立即恢复最终目标行，不再额外等待防抖时间。
+    isRepeatNavigation = false;
+    clearEditActivateTimer();
+    commitPendingEditing();
+    return;
+  }
+
+  // 快速离散连按仍使用短防抖，避免连续挂载/卸载整行编辑器。
+  if (pendingEditingTarget) scheduleEditActivation();
+}
+
+function handleWindowBlur() {
+  removeNavigationListeners();
+  pressedNavigationKeys.clear();
+  isRepeatNavigation = false;
+  clearEditActivateTimer();
+  commitPendingEditing();
+}
+
+// 选区变化后，目标行进入编辑，活动单元格获得焦点。
+function handleAreaSelectionChange(ranges) {
+  if (!props.editable) return;
+
+  const target = ranges?.at(-1)?.index.end;
+  const row = target ? tableRef.value?.getTableData?.()[target.row] : null;
+  const col = target ? displayColumns.value[target.col] : null;
+  if (!row) {
+    pendingEditingTarget = null;
+    clearActiveEditing();
+    clearEditActivateTimer();
+    return;
+  }
+
+  const focusCol = col?.editor ? col.dataIndex : null;
+  // 键盘导航期间（按下方向键等）：
+  // - 按住方向键滚动（event.repeat=true）：全程保持 0 编辑器，避免长按下反复创建组件导致卡顿/闪烁；
+  //   松手后再激活到最终行。
+  // - 慢速离散点按（非 repeat）：立即激活，编辑器逐行跟随、跟手；
+  // - 快速连按（间隔 <150ms）：防抖合并，避免连按时每键挂载掉帧。
+  if (pressedNavigationKeys.size > 0) {
+    if (isRepeatNavigation) {
+      pendingEditingTarget = { row, focusCol };
+      clearActiveEditing();
+    } else {
+      const now = performance.now();
+      if (now - lastEditActivateAt >= 150) {
+        pendingEditingTarget = null;
+        clearEditActivateTimer();
+        activateEditing(row, focusCol);
+        tableRef.value?.setCurrentRow?.(row, { silent: true });
+        lastEditActivateAt = now;
+      } else {
+        pendingEditingTarget = { row, focusCol };
+        scheduleEditActivation();
+      }
+    }
+    return;
+  }
+
+  // 非键盘导航（鼠标点击等）：立即激活。
+  // 同一行已编辑时仍更新 focusCol（保证焦点切换到新列），
+  // 但暂时禁用 select 全选（避免鼠标点击触发全选文本）。
+  pendingEditingTarget = null;
+  clearEditActivateTimer();
+  if (activeEditingRow === row) {
+    selectOnFocus.value = false;
+    activateEditing(row, focusCol);
+    nextTick(() => {
+      selectOnFocus.value = true;
+    });
+  } else {
+    activateEditing(row, focusCol);
+  }
+  lastEditActivateAt = performance.now();
+}
+
+watch(
+  [() => props.activeRowKey, () => props.dataSource],
+  async ([rowKey]) => {
+    rebindActiveEditingRow(props.dataSource);
+    await nextTick();
+    if (rowKey == null) {
+      tableRef.value?.setCurrentRow?.(undefined, { silent: true });
+      return;
+    }
+    const row = props.dataSource.find((item) => String(getRowKey(item)) === String(rowKey));
+    tableRef.value?.setCurrentRow?.(row, { silent: true });
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.editable,
+  (editable) => {
+    if (editable) return;
+    pendingEditingTarget = null;
+    removeNavigationListeners();
+    pressedNavigationKeys.clear();
+    isRepeatNavigation = false;
+    clearEditActivateTimer();
+    clearActiveEditing();
+    tableRef.value?.clearSelectedArea?.();
+  },
+);
+
+onBeforeUnmount(() => {
+  removeNavigationListeners();
+  clearEditActivateTimer();
+  pressedNavigationKeys.clear();
+});
+
+defineExpose({
+  scrollToRow,
+  editRow,
+  getSelectedArea,
+  setAreaSelection,
+  clearSelectedArea,
+  setRowExpand,
+  initVirtualScroll,
+  refreshLayout: initVirtualScroll,
+});
+</script>
+
+<template>
+  <div ref="rootRef" class="fms-table" @keydown.capture="handleKeydownCapture">
+    <StkTable
+      ref="tableRef"
+      class="fms-table__inner"
+      :class="{ 'fms-table--bottom-gap': hasBottomGap }"
+      v-bind="$attrs"
+      :style="customVars"
+      :theme="tableTheme"
+      :row-height="rowHeight"
+      :header-row-height="headerRowHeight"
+      :virtual="virtual"
+      :virtual-x="virtualX"
+      :auto-resize="false"
+      :col-resizable="columnResizeConfig"
+      :header-drag="columnDragConfig"
+      :columns="displayColumns"
+      @update:columns="onColumnsUpdate"
+      :data-source="dataSource"
+      :drag-row-config="{ mode: rowDraggable ? 'insert' : 'none' }"
+      :row-key="rowKey"
+      :no-data-full="noDataFull"
+      :show-overflow="showOverflow"
+      :area-selection="editable"
+      :bordered="false"
+      @area-selection-change="handleAreaSelectionChange"
+      @row-order-change="handleRowOrderChange"
+    >
+      <template v-if="slots.expand" #expand="slotProps">
+        <slot name="expand" v-bind="slotProps" />
+      </template>
+      <template v-if="slots.empty" #empty>
+        <slot name="empty" />
+      </template>
+      <template v-else #empty>
+        <div class="fms-table__empty" role="status">
+          <strong>暂无数据</strong>
+          <span>当前没有可显示的内容</span>
+        </div>
+      </template>
+    </StkTable>
+  </div>
+</template>
+
+<style scoped>
+.fms-table {
+  width: 100%;
+  height: 100%;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.fms-table__inner {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<!-- 非 scoped 全局样式：原生 checkbox 保持低组件开销，外观使用 shadcn 语义变量。 -->
+<style lang="scss">
+/* 双类选择器 .fms-table__inner.stk-table 权重 (0,2,1) > 库默认 .stk-table (0,1,1) */
+.fms-table__inner.stk-table {
+  th,
+  td {
+    font-size: 13px;
+  }
+
+  th.fms-selection-header {
+    vertical-align: middle;
+
+    .table-header-cell-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+/*
+ * 外层绘制表格边框，表体只保留横向分割线。
+ * STK 主表继续使用 fit-content 保持配置列宽，独立装饰层只负责补齐右侧空白区域的横线。
+ */
+.fms-table__inner.stk-table {
+  th,
+  td {
+    border-bottom: 1px solid var(--border);
+  }
+
+  thead th {
+    border-bottom-color: var(--border);
+  }
+
+  // 数据铺满视口时隐藏最后一行底线，避免与外框底线叠加；数据较少时保留底线标记数据区域结束。
+  &:not(.fms-table--bottom-gap) {
+    .stk-tbody-main tr:last-child {
+      td {
+        border-bottom: none;
+      }
+    }
+  }
+
+  // 不改变表格列宽，单独用装饰层把行分割线延伸到容器右侧空白区域。
+  .stk-table-scroll-container {
+    position: relative;
+    min-width: 100%;
+
+    &::before {
+      position: absolute;
+      top: calc(var(--header-row-height) - 1px);
+      left: 0;
+      width: 100%;
+      height: calc(var(--fms-data-line-height) + 1px);
+      pointer-events: none;
+      content: "";
+      background-image: repeating-linear-gradient(
+        to bottom,
+        var(--border) 0,
+        var(--border) 1px,
+        transparent 1px,
+        transparent var(--row-height)
+      );
+    }
+  }
+}
+
+.fms-checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  cursor: pointer;
+  line-height: 1;
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    margin: 0;
+    opacity: 0;
+  }
+
+  .fms-checkbox-box {
+    position: relative;
+    display: block;
+    flex: none;
+    width: 16px;
+    height: 16px;
+    box-sizing: border-box;
+    background: var(--background);
+    border: 1px solid var(--input);
+    border-radius: 4px;
+    box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
+    transition:
+      border-color 150ms,
+      background-color 150ms,
+      box-shadow 150ms;
+  }
+
+  &.checked .fms-checkbox-box {
+    color: var(--primary-foreground);
+    background: var(--primary);
+    border-color: var(--primary);
+
+    &::after {
+      position: absolute;
+      top: 2px;
+      left: 5px;
+      width: 4px;
+      height: 8px;
+      content: "";
+      border: solid var(--primary-foreground);
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+  }
+
+  &.indeterminate .fms-checkbox-box {
+    color: var(--primary-foreground);
+    background: var(--primary);
+    border-color: var(--primary);
+
+    &::after {
+      position: absolute;
+      top: 7px;
+      left: 3px;
+      width: 8px;
+      height: 2px;
+      content: "";
+      background: var(--primary-foreground);
+      border: none;
+      border-radius: 2px;
+    }
+  }
+
+  &:focus-within .fms-checkbox-box {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
+  }
+}
+
+.fms-cell-editor {
+  min-width: 0;
+  font-size: 13px;
+}
+
+.fms-text-editor {
+  width: 100%;
+  height: 28px;
+  max-width: 100%;
+  padding: 0 8px;
+  color: var(--foreground);
+  background-color: var(--background);
+  border: 1px solid var(--input);
+  border-radius: var(--radius-md);
+  outline: none;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
+}
+
+.fms-text-editor:focus {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 28%, transparent);
+}
+
+.fms-select-editor {
+  width: 100%;
+  height: 28px !important;
+  max-width: 100%;
+  background-color: var(--background) !important;
+  border-color: var(--input);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
+}
+
+.fms-select-editor:focus-visible {
+  border-color: var(--ring);
+}
+
+.fms-cell-display {
+  display: block;
+  min-width: 0;
+  user-select: text;
+}
+
+.fms-table__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-height: 96px;
+  color: var(--muted-foreground);
+  font-size: 13px;
+}
+
+.fms-table__empty strong {
+  color: var(--foreground);
+  font-weight: 500;
+}
+
+.fms-table__inner.text-overflow .fms-cell-display {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fms-table__inner td:has(> .fms-cell-editor-root) {
+  padding-inline: 3px;
+}
+
+// actions 列按钮容器
+.fms-actions-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.fms-action-btn {
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.fms-action-btn:disabled {
+  cursor: not-allowed;
+}
+</style>
diff --git a/code/fms/fms-vue/src/components/fms-table/utils/createCellRenderer.js b/code/fms/fms-vue/src/components/fms-table/utils/createCellRenderer.js
new file mode 100644
index 00000000..39e1f5b0
--- /dev/null
+++ b/code/fms/fms-vue/src/components/fms-table/utils/createCellRenderer.js
@@ -0,0 +1,227 @@
+import { h, ref } from "vue";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { createEditableCell } from "./createEditableCellRenderer";
+
+const stop = (event) => event.stopPropagation();
+
+function resolveActionState(state, row) {
+  return typeof state === "function" ? Boolean(state(row)) : Boolean(state);
+}
+
+function isActionVisible(action, row) {
+  return action.visible === undefined || resolveActionState(action.visible, row);
+}
+
+function actionButton(action, row, triggerAction, className = "fms-action-btn") {
+  const disabled = resolveActionState(action.disabled, row);
+  const danger = action.danger || action.type === "danger" || action.type === "delete";
+  const content = [];
+  if (action.icon) content.push(h(action.icon, { "data-icon": "inline-start" }));
+  if (action.label || action.type) content.push(action.label || action.type);
+  return h(
+    "button",
+    {
+      type: "button",
+      class: cn(
+        buttonVariants({ variant: "ghost", size: "xs" }),
+        danger && "text-destructive hover:bg-destructive/10 hover:text-destructive",
+        className,
+      ),
+      title: action.title || action.label,
+      disabled,
+      onMousedown: stop,
+      onClick: (event) => {
+        event.stopPropagation();
+        triggerAction(action, row);
+      },
+    },
+    content,
+  );
+}
+
+function createConfirmDialog(state, close, confirm) {
+  const config = typeof confirm === "string" ? { title: confirm } : confirm || {};
+  const title = config.title || "确认操作";
+  const description = config.description ?? config.content ?? "确定要执行此操作吗？";
+
+  return h(
+    AlertDialog,
+    {
+      open: Boolean(state.value),
+      "onUpdate:open": (open) => {
+        if (!open) close();
+      },
+    },
+    {
+      default: () =>
+        h(AlertDialogContent, {}, () => [
+          h(AlertDialogHeader, {}, () => [
+            h(AlertDialogTitle, {}, () => title),
+            h(AlertDialogDescription, {}, () => description),
+          ]),
+          h(AlertDialogFooter, {}, () => [
+            h(AlertDialogCancel, { onClick: close }, () => config.cancelText || "取消"),
+            h(
+              AlertDialogAction,
+              {
+                class: config.okType === "danger" ? buttonVariants({ variant: "destructive" }) : undefined,
+                onClick: () => {
+                  const pending = state.value;
+                  close();
+                  pending?.action?.onClick?.(pending.row);
+                },
+              },
+              () => config.okText || "确定",
+            ),
+          ]),
+        ]),
+    },
+  );
+}
+
+function createActionsCell(actions) {
+  if (!actions?.length) return undefined;
+
+  const inlineActions = actions.filter((action) => action.type !== "more");
+  const moreAction = actions.find((action) => action.type === "more");
+  const openRow = ref(null);
+  const confirmState = ref(null);
+
+  function closeMenu() {
+    openRow.value = null;
+  }
+
+  function closeConfirm() {
+    confirmState.value = null;
+  }
+
+  function triggerAction(action, row) {
+    if (resolveActionState(action.disabled, row)) return;
+    if (!action.confirm) {
+      action.onClick?.(row);
+      return;
+    }
+    confirmState.value = { action, row };
+  }
+
+  return ({ row }) => {
+    const children = inlineActions
+      .filter((action) => isActionVisible(action, row))
+      .map((action) => actionButton(action, row, triggerAction));
+    const visibleMoreItems = (moreAction?.items || []).filter((item) => isActionVisible(item, row));
+
+    if (visibleMoreItems.length) {
+      const moreButton = h(
+        "button",
+        {
+          type: "button",
+          class: cn(
+            buttonVariants({ variant: "ghost", size: "xs" }),
+            "fms-action-btn fms-action-more",
+            openRow.value === row && "bg-accent text-accent-foreground",
+          ),
+          title: moreAction.title || "更多操作",
+          "aria-label": moreAction.title || "更多操作",
+          onMousedown: stop,
+          onClick: (event) => {
+            event.stopPropagation();
+            openRow.value = row;
+          },
+        },
+        moreAction.label || "⋯",
+      );
+
+      if (openRow.value !== row) {
+        children.push(moreButton);
+      } else {
+        children.push(
+          h(
+            DropdownMenu,
+            {
+              open: true,
+              "onUpdate:open": (open) => {
+                if (!open) closeMenu();
+              },
+            },
+            {
+              default: () => [
+                h(DropdownMenuTrigger, { asChild: true }, () => moreButton),
+                h(DropdownMenuContent, { align: "end", onMousedown: stop }, () =>
+                  h(DropdownMenuGroup, {}, () =>
+                    visibleMoreItems.map((item, index) =>
+                      h(
+                        DropdownMenuItem,
+                        {
+                          key: String(item.key ?? item.type ?? index),
+                          disabled: resolveActionState(item.disabled, row),
+                          variant:
+                            item.danger || item.type === "danger" || item.type === "delete"
+                              ? "destructive"
+                              : "default",
+                          onSelect: (event) => {
+                            event.stopPropagation();
+                            closeMenu();
+                            triggerAction(item, row);
+                          },
+                        },
+                        () => [item.icon ? h(item.icon) : null, item.label],
+                      ),
+                    ),
+                  ),
+                ),
+              ],
+            },
+          ),
+        );
+      }
+    }
+
+    if (!children.length) return h("span", { class: "fms-actions-cell" });
+    const dialog = confirmState.value
+      ? createConfirmDialog(confirmState, closeConfirm, confirmState.value.action.confirm)
+      : null;
+    if (dialog) children.push(dialog);
+    return h("span", { class: "fms-actions-cell" }, children);
+  };
+}
+
+export function resolveCustomCell(col, editingContext) {
+  if (col.customCell) return col;
+  if (col.editor) return { ...col, customCell: createEditableCell(col, editingContext) };
+
+  if (col.actions?.length) {
+    const customCell = createActionsCell(col.actions);
+    if (customCell) return { ...col, customCell };
+  }
+
+  // 纯展示列：保持文本可选中，同时通过表格选区激活行编辑。
+  if (col.dataIndex) {
+    return {
+      ...col,
+      customCell: ({ row }) => {
+        const value = row[col.dataIndex];
+        const content = value ?? "";
+        return h("span", { class: "fms-cell-display", title: String(content) }, content);
+      },
+    };
+  }
+  return col;
+}
diff --git a/code/fms/fms-vue/src/components/fms-table/utils/createEditableCellRenderer.js b/code/fms/fms-vue/src/components/fms-table/utils/createEditableCellRenderer.js
new file mode 100644
index 00000000..64cdda27
--- /dev/null
+++ b/code/fms/fms-vue/src/components/fms-table/utils/createEditableCellRenderer.js
@@ -0,0 +1,232 @@
+import { h, toRaw } from "vue";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+const stop = (event) => event.stopPropagation();
+const inputDrafts = new WeakMap();
+
+function getInputDraft(row, dataIndex) {
+  const drafts = inputDrafts.get(row);
+  return drafts?.has(dataIndex) ? drafts.get(dataIndex) : row[dataIndex];
+}
+
+function setInputDraft(row, dataIndex, value) {
+  let drafts = inputDrafts.get(row);
+  if (!drafts) {
+    drafts = new Map();
+    inputDrafts.set(row, drafts);
+  }
+  drafts.set(dataIndex, value);
+}
+
+function clearInputDraft(row, dataIndex) {
+  const drafts = inputDrafts.get(row);
+  if (!drafts) return;
+  drafts.delete(dataIndex);
+  if (!drafts.size) inputDrafts.delete(row);
+}
+
+function commitInputDraft(row, dataIndex, value) {
+  clearInputDraft(row, dataIndex);
+  row[dataIndex] = value;
+}
+
+function preserveInputDraft(row, dataIndex) {
+  const drafts = inputDrafts.get(row);
+  if (!drafts?.has(dataIndex)) return;
+  // 卸载兜底不触发整表更新；正常路径会在 blur 中响应式提交并通知父级。
+  toRaw(row)[dataIndex] = drafts.get(dataIndex);
+  clearInputDraft(row, dataIndex);
+}
+
+function resolveOptions(editor) {
+  return typeof editor.options === "function" ? editor.options() : (editor.options ?? []);
+}
+
+function displayValue(row, col, editor) {
+  const value = row[col.dataIndex];
+  const text =
+    editor.type === "select"
+      ? (resolveOptions(editor).find((item) => String(item.value) === String(value))?.label ??
+        value)
+      : value;
+  const content = text ?? "";
+  return h("span", { class: "fms-cell-display", title: String(content) }, content);
+}
+
+function notifyChange(ctx, editor, row, col, value) {
+  if (!ctx.shouldNotify(row, col, value)) return;
+  editor.onChange?.(value, row, col);
+  ctx.onChange(row, col, value);
+}
+
+function isEditorDisabled(editor, row) {
+  return typeof editor.disabled === "function"
+    ? Boolean(editor.disabled(row))
+    : Boolean(editor.disabled);
+}
+
+function createFocusHandler(ctx, row, col, selectText = false) {
+  return ({ component, el }) => {
+    if (!ctx.shouldFocus(row, col)) return;
+    const input = el?.matches?.("input") ? el : el?.querySelector?.("input");
+    const focusTarget =
+      input ||
+      (el?.matches?.("button, [tabindex]") ? el : el?.querySelector?.("button, [tabindex]"));
+    if (document.activeElement === focusTarget) return;
+
+    const instance = component?.exposed || component?.proxy;
+    const shouldSelect = selectText && (ctx.shouldSelectOnFocus?.value ?? true);
+    const opts = shouldSelect ? { cursor: "all", preventScroll: true } : { preventScroll: true };
+    if (instance?.focus) {
+      instance.focus(opts);
+      return;
+    }
+
+    focusTarget?.focus(opts);
+    if (shouldSelect) input?.select();
+  };
+}
+
+function createInput(row, col, editor, ctx) {
+  const focus = createFocusHandler(ctx, row, col, true);
+  return h(Input, {
+    type: editor.inputType || "text",
+    modelValue: getInputDraft(row, col.dataIndex) ?? "",
+    class: "fms-cell-editor fms-text-editor fms-cell-editor-root",
+    "aria-label": col.title || col.dataIndex,
+    "onUpdate:modelValue": (value) => {
+      setInputDraft(row, col.dataIndex, value);
+    },
+    onBlur: (event) => {
+      const value = event.target.value;
+      commitInputDraft(row, col.dataIndex, value);
+      notifyChange(ctx, editor, row, col, value);
+    },
+    onKeydown: (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        event.stopPropagation();
+        event.currentTarget.select();
+      } else if (event.key === "Escape") {
+        event.currentTarget.blur();
+      }
+    },
+    onClick: stop,
+    onVnodeMounted: focus,
+    onVnodeUpdated: focus,
+    onVnodeBeforeUnmount: () => preserveInputDraft(row, col.dataIndex),
+  });
+}
+
+function createSelect(row, col, editor, ctx) {
+  const options = resolveOptions(editor);
+  const focus = createFocusHandler(ctx, row, col);
+  const emptyValue = "__fms_empty__";
+  const currentValue = row[col.dataIndex];
+  const modelValue = currentValue == null ? undefined : String(currentValue);
+  const items = options.map((option) =>
+    h(SelectItem, { value: String(option.value) }, () => option.label),
+  );
+  if (editor.allowClear ?? true) {
+    items.unshift(h(SelectItem, { value: emptyValue }, () => "清除"));
+  }
+
+  return h(
+    Select,
+    {
+      modelValue,
+      "onUpdate:modelValue": (value) => {
+        const selected = options.find((option) => String(option.value) === String(value));
+        const resolved =
+          value === emptyValue ? (editor.emptyValue ?? null) : (selected?.value ?? value);
+        row[col.dataIndex] = resolved;
+        notifyChange(ctx, editor, row, col, resolved);
+      },
+    },
+    {
+      default: () => [
+        h(
+          SelectTrigger,
+          {
+            size: "sm",
+            class: "fms-cell-editor fms-select-editor fms-cell-editor-root",
+            "aria-label": col.title || col.dataIndex,
+            onClick: stop,
+            onVnodeMounted: focus,
+            onVnodeUpdated: focus,
+          },
+          () => h(SelectValue, { placeholder: "请选择" }),
+        ),
+        h(SelectContent, {}, () => h(SelectGroup, {}, () => items)),
+      ],
+    },
+  );
+}
+
+function createCheckbox(row, col, editor, ctx) {
+  const checked = row[col.dataIndex] === 1;
+  const focus = ctx.isEditing(row) ? createFocusHandler(ctx, row, col) : undefined;
+  const update = (value) => {
+    row[col.dataIndex] = value;
+    notifyChange(ctx, editor, row, col, value);
+  };
+  return h(
+    "label",
+    {
+      class: checked
+        ? "fms-checkbox fms-cell-editor-root checked"
+        : "fms-checkbox fms-cell-editor-root",
+      onClick: stop,
+      onMousedown: stop,
+    },
+    [
+      h("input", {
+        type: "checkbox",
+        checked,
+        "aria-label": col.title || col.dataIndex,
+        onChange: (event) => {
+          update(event.target.checked ? 1 : 0);
+        },
+        onKeydown: (event) => {
+          if (event.key !== "Enter") return;
+          event.preventDefault();
+          event.stopPropagation();
+          const value = row[col.dataIndex] === 1 ? 0 : 1;
+          event.currentTarget.checked = value === 1;
+          update(value);
+        },
+        onClick: stop,
+        onMousedown: stop,
+        onVnodeMounted: focus,
+        onVnodeUpdated: focus,
+      }),
+      h("span", { class: "fms-checkbox-box" }),
+    ],
+  );
+}
+
+export function createEditableCell(col, ctx) {
+  const editor = col.editor;
+  return ({ row }) => {
+    if (isEditorDisabled(editor, row)) {
+      return displayValue(row, col, editor);
+    }
+    // checkbox 始终可交互，点击即切换，无需先让整行进入编辑态
+    if (editor?.type === "checkbox") {
+      return createCheckbox(row, col, editor, ctx);
+    }
+    if (!ctx.isEditing(row)) {
+      return displayValue(row, col, editor);
+    }
+    if (editor.type === "select") return createSelect(row, col, editor, ctx);
+    return createInput(row, col, editor, ctx);
+  };
+}
diff --git a/code/fms/fms-vue/src/components/fms-table/utils/createSelectionCellRenderers.js b/code/fms/fms-vue/src/components/fms-table/utils/createSelectionCellRenderers.js
new file mode 100644
index 00000000..69b3f7d2
--- /dev/null
+++ b/code/fms/fms-vue/src/components/fms-table/utils/createSelectionCellRenderers.js
@@ -0,0 +1,137 @@
+import { computed, h } from "vue";
+
+// 单例事件处理器：避免每行渲染创建新闭包
+const stop = (e) => e.stopPropagation();
+
+// ── 导出 ──
+
+/**
+ * 创建选择列定义，返回可直接插入 columns 的列对象。
+ *
+ * @param {Object} options
+ * @param {Function} options.getDataSource - 获取当前数据源（响应式）
+ * @param {Function} options.getRowKey     - 从行数据提取 key
+ * @param {Function} options.getSelectedRowKeys - 获取已选 key 数组（响应式）
+ * @param {Function} options.onChange      - 选中变化回调 (keys, rows)
+ * @returns {Object} selectionColumn
+ */
+export function createSelectionColumn({
+  getDataSource,
+  getRowKey,
+  getSelectedRowKeys,
+  isRowDisabled = () => false,
+  onChange,
+}) {
+  // 已选 key 集合，内部响应式计算，仅对外暴露 column 对象
+  const selectedRowKeySet = computed(() => new Set(getSelectedRowKeys()));
+  const rowByKey = computed(() => {
+    const rows = new Map();
+    for (const row of getDataSource()) rows.set(getRowKey(row), row);
+    return rows;
+  });
+
+  function updateSelection(nextKeys) {
+    const rows = nextKeys.map((key) => rowByKey.value.get(key)).filter(Boolean);
+    onChange(nextKeys, rows);
+  }
+
+  function changeRow(row, checked) {
+    if (isRowDisabled(row)) return;
+    const nextKeys = new Set(selectedRowKeySet.value);
+    const key = getRowKey(row);
+    if (checked) nextKeys.add(key);
+    else nextKeys.delete(key);
+    updateSelection(Array.from(nextKeys));
+  }
+
+  function changeAll(checked) {
+    const nextKeys = new Set(selectedRowKeySet.value);
+    getDataSource().forEach((row) => {
+      if (isRowDisabled(row)) return;
+      const key = getRowKey(row);
+      if (checked) nextKeys.add(key);
+      else nextKeys.delete(key);
+    });
+    updateSelection(Array.from(nextKeys));
+  }
+
+  const SelectionCell = ({ row }) => {
+    const key = getRowKey(row);
+    const disabled = isRowDisabled(row);
+    const checked = selectedRowKeySet.value.has(key);
+    return h(
+      "label",
+      {
+        class: ["fms-checkbox", { checked, disabled }],
+        onClick: stop,
+        onMousedown: stop,
+      },
+      [
+        h("input", {
+          type: "checkbox",
+          checked,
+          disabled,
+          "aria-label": `选择行 ${String(key)}`,
+          onChange: (event) => {
+            event.stopPropagation();
+            changeRow(row, event.target.checked);
+          },
+          onClick: stop,
+          onMousedown: stop,
+        }),
+        h("span", { class: "fms-checkbox-box" }),
+      ],
+    );
+  };
+
+  // 表头只统计当前数据中的选中项，避免筛选后被隐藏的 key 干扰状态。
+  const SelectionHeaderCell = () => {
+    const rows = getDataSource().filter((row) => !isRowDisabled(row));
+    let selectedCount = 0;
+    for (const key of selectedRowKeySet.value) {
+      if (rowByKey.value.has(key)) selectedCount++;
+    }
+    const allChecked = rows.length > 0 && selectedCount === rows.length;
+    const indeterminate = selectedCount > 0 && selectedCount < rows.length;
+
+    const labelClass = allChecked
+      ? "fms-checkbox checked"
+      : indeterminate
+        ? "fms-checkbox indeterminate"
+        : "fms-checkbox";
+
+    return h("label", { class: labelClass, onClick: stop, onMousedown: stop }, [
+      h("input", {
+        type: "checkbox",
+        checked: allChecked,
+        "aria-label": "选择当前全部行",
+        onChange: (event) => {
+          event.stopPropagation();
+          changeAll(event.target.checked);
+        },
+        onClick: stop,
+        onMousedown: stop,
+      }),
+      h("span", { class: "fms-checkbox-box" }),
+    ]);
+  };
+
+  return {
+    dataIndex: "__fmsSelection",
+    key: "__fmsSelection",
+    title: "",
+    width: 44,
+    fixed: "left",
+    align: "center",
+    headerAlign: "center",
+    headerClassName: "fms-selection-header",
+    customCell: SelectionCell,
+    customHeaderCell: SelectionHeaderCell,
+    __fmsSelection: true,
+  };
+}
+
+/** 判断某列是否为选择列（用于 onColumnsUpdate 剥离内部列） */
+export function isSelectionColumn(col) {
+  return col?.__fmsSelection === true;
+}
diff --git a/code/fms/fms-vue/src/components/ui/accordion/Accordion.vue b/code/fms/fms-vue/src/components/ui/accordion/Accordion.vue
index 58ad491e..3ce57980 100644
--- a/code/fms/fms-vue/src/components/ui/accordion/Accordion.vue
+++ b/code/fms/fms-vue/src/components/ui/accordion/Accordion.vue
@@ -1,14 +1,11 @@
 <script setup lang="ts">
-import type { AccordionRootEmits, AccordionRootProps } from "reka-ui"
-import {
-  AccordionRoot,
-  useForwardPropsEmits,
-} from "reka-ui"
+import type { AccordionRootEmits, AccordionRootProps } from "reka-ui";
+import { AccordionRoot, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<AccordionRootProps>()
-const emits = defineEmits<AccordionRootEmits>()
+const props = defineProps<AccordionRootProps>();
+const emits = defineEmits<AccordionRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/accordion/AccordionContent.vue b/code/fms/fms-vue/src/components/ui/accordion/AccordionContent.vue
index 91c8dccd..8460e646 100644
--- a/code/fms/fms-vue/src/components/ui/accordion/AccordionContent.vue
+++ b/code/fms/fms-vue/src/components/ui/accordion/AccordionContent.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { AccordionContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AccordionContent } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { AccordionContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { AccordionContent } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<AccordionContentProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/accordion/AccordionItem.vue b/code/fms/fms-vue/src/components/ui/accordion/AccordionItem.vue
index 5eccc4ca..dcf02c4c 100644
--- a/code/fms/fms-vue/src/components/ui/accordion/AccordionItem.vue
+++ b/code/fms/fms-vue/src/components/ui/accordion/AccordionItem.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { AccordionItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AccordionItem, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { AccordionItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { AccordionItem, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<AccordionItemProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/accordion/AccordionTrigger.vue b/code/fms/fms-vue/src/components/ui/accordion/AccordionTrigger.vue
index 81033d00..665e9dbb 100644
--- a/code/fms/fms-vue/src/components/ui/accordion/AccordionTrigger.vue
+++ b/code/fms/fms-vue/src/components/ui/accordion/AccordionTrigger.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import type { AccordionTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { ChevronDown } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  AccordionHeader,
-  AccordionTrigger,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { AccordionTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { ChevronDown } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { AccordionHeader, AccordionTrigger } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/accordion/index.ts b/code/fms/fms-vue/src/components/ui/accordion/index.ts
index b18018b5..92efaba3 100644
--- a/code/fms/fms-vue/src/components/ui/accordion/index.ts
+++ b/code/fms/fms-vue/src/components/ui/accordion/index.ts
@@ -1,4 +1,4 @@
-export { default as Accordion } from "./Accordion.vue"
-export { default as AccordionContent } from "./AccordionContent.vue"
-export { default as AccordionItem } from "./AccordionItem.vue"
-export { default as AccordionTrigger } from "./AccordionTrigger.vue"
+export { default as Accordion } from "./Accordion.vue";
+export { default as AccordionContent } from "./AccordionContent.vue";
+export { default as AccordionItem } from "./AccordionItem.vue";
+export { default as AccordionTrigger } from "./AccordionTrigger.vue";
diff --git a/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialog.vue b/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialog.vue
index b6e6b4bf..011c3821 100644
--- a/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialog.vue
+++ b/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialog.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { AlertDialogEmits, AlertDialogProps } from "reka-ui"
-import { AlertDialogRoot, useForwardPropsEmits } from "reka-ui"
+import type { AlertDialogEmits, AlertDialogProps } from "reka-ui";
+import { AlertDialogRoot, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<AlertDialogProps>()
-const emits = defineEmits<AlertDialogEmits>()
+const props = defineProps<AlertDialogProps>();
+const emits = defineEmits<AlertDialogEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogAction.vue b/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogAction.vue
index 09cf6fcb..45a0a0f1 100644
--- a/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogAction.vue
+++ b/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogAction.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { AlertDialogActionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AlertDialogAction } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
+import type { AlertDialogActionProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { AlertDialogAction } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogCancel.vue b/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogCancel.vue
index e261894e..f031b503 100644
--- a/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogCancel.vue
+++ b/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -1,24 +1,20 @@
 <script setup lang="ts">
-import type { AlertDialogCancelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AlertDialogCancel } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
+import type { AlertDialogCancelProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { AlertDialogCancel } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
   <AlertDialogCancel
     v-bind="delegatedProps"
-    :class="cn(
-      buttonVariants({ variant: 'outline' }),
-      'mt-2 sm:mt-0',
-      props.class,
-    )"
+    :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)"
   >
     <slot />
   </AlertDialogCancel>
diff --git a/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogContent.vue b/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogContent.vue
index 4597f0dc..30f3e81b 100644
--- a/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogContent.vue
+++ b/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogContent.vue
@@ -1,25 +1,25 @@
 <script setup lang="ts">
-import type { AlertDialogContentEmits, AlertDialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
+import type { AlertDialogContentEmits, AlertDialogContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
 import {
   AlertDialogContent,
   AlertDialogOverlay,
   AlertDialogPortal,
   useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+} from "reka-ui";
+import { cn } from "@/lib/utils";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<AlertDialogContentEmits>()
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<AlertDialogContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogDescription.vue b/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogDescription.vue
index 69642c9a..9cfc6dea 100644
--- a/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogDescription.vue
+++ b/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogDescription.vue
@@ -1,15 +1,13 @@
 <script setup lang="ts">
-import type { AlertDialogDescriptionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  AlertDialogDescription,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { AlertDialogDescriptionProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { AlertDialogDescription } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogFooter.vue b/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogFooter.vue
index 50d4098e..d1637c43 100644
--- a/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogFooter.vue
+++ b/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogFooter.vue
@@ -1,21 +1,16 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
   <div
     data-slot="alert-dialog-footer"
-    :class="
-      cn(
-        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
-        props.class,
-      )
-    "
+    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
   >
     <slot />
   </div>
diff --git a/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogHeader.vue b/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogHeader.vue
index dbe72a76..3938659e 100644
--- a/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogHeader.vue
+++ b/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogHeader.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogTitle.vue b/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogTitle.vue
index bb97e4d4..7620abe0 100644
--- a/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogTitle.vue
+++ b/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { AlertDialogTitleProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AlertDialogTitle } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { AlertDialogTitleProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { AlertDialogTitle } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogTrigger.vue b/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogTrigger.vue
index 98d40ee0..fd9363b5 100644
--- a/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogTrigger.vue
+++ b/code/fms/fms-vue/src/components/ui/alert-dialog/AlertDialogTrigger.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { AlertDialogTriggerProps } from "reka-ui"
-import { AlertDialogTrigger } from "reka-ui"
+import type { AlertDialogTriggerProps } from "reka-ui";
+import { AlertDialogTrigger } from "reka-ui";
 
-const props = defineProps<AlertDialogTriggerProps>()
+const props = defineProps<AlertDialogTriggerProps>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/alert-dialog/index.ts b/code/fms/fms-vue/src/components/ui/alert-dialog/index.ts
index cf1b45df..c48e47ba 100644
--- a/code/fms/fms-vue/src/components/ui/alert-dialog/index.ts
+++ b/code/fms/fms-vue/src/components/ui/alert-dialog/index.ts
@@ -1,9 +1,9 @@
-export { default as AlertDialog } from "./AlertDialog.vue"
-export { default as AlertDialogAction } from "./AlertDialogAction.vue"
-export { default as AlertDialogCancel } from "./AlertDialogCancel.vue"
-export { default as AlertDialogContent } from "./AlertDialogContent.vue"
-export { default as AlertDialogDescription } from "./AlertDialogDescription.vue"
-export { default as AlertDialogFooter } from "./AlertDialogFooter.vue"
-export { default as AlertDialogHeader } from "./AlertDialogHeader.vue"
-export { default as AlertDialogTitle } from "./AlertDialogTitle.vue"
-export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue"
+export { default as AlertDialog } from "./AlertDialog.vue";
+export { default as AlertDialogAction } from "./AlertDialogAction.vue";
+export { default as AlertDialogCancel } from "./AlertDialogCancel.vue";
+export { default as AlertDialogContent } from "./AlertDialogContent.vue";
+export { default as AlertDialogDescription } from "./AlertDialogDescription.vue";
+export { default as AlertDialogFooter } from "./AlertDialogFooter.vue";
+export { default as AlertDialogHeader } from "./AlertDialogHeader.vue";
+export { default as AlertDialogTitle } from "./AlertDialogTitle.vue";
+export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue";
diff --git a/code/fms/fms-vue/src/components/ui/alert/Alert.vue b/code/fms/fms-vue/src/components/ui/alert/Alert.vue
index a9d336ff..d51160af 100644
--- a/code/fms/fms-vue/src/components/ui/alert/Alert.vue
+++ b/code/fms/fms-vue/src/components/ui/alert/Alert.vue
@@ -1,21 +1,17 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import type { AlertVariants } from "."
-import { cn } from "@/lib/utils"
-import { alertVariants } from "."
+import type { HTMLAttributes } from "vue";
+import type { AlertVariants } from ".";
+import { cn } from "@/lib/utils";
+import { alertVariants } from ".";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-  variant?: AlertVariants["variant"]
-}>()
+  class?: HTMLAttributes["class"];
+  variant?: AlertVariants["variant"];
+}>();
 </script>
 
 <template>
-  <div
-    data-slot="alert"
-    :class="cn(alertVariants({ variant }), props.class)"
-    role="alert"
-  >
+  <div data-slot="alert" :class="cn(alertVariants({ variant }), props.class)" role="alert">
     <slot />
   </div>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/alert/AlertDescription.vue b/code/fms/fms-vue/src/components/ui/alert/AlertDescription.vue
index 652f332a..e10fe271 100644
--- a/code/fms/fms-vue/src/components/ui/alert/AlertDescription.vue
+++ b/code/fms/fms-vue/src/components/ui/alert/AlertDescription.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/alert/AlertTitle.vue b/code/fms/fms-vue/src/components/ui/alert/AlertTitle.vue
index b2183843..0d1759cd 100644
--- a/code/fms/fms-vue/src/components/ui/alert/AlertTitle.vue
+++ b/code/fms/fms-vue/src/components/ui/alert/AlertTitle.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/alert/index.ts b/code/fms/fms-vue/src/components/ui/alert/index.ts
index 42d07b64..e9504aa2 100644
--- a/code/fms/fms-vue/src/components/ui/alert/index.ts
+++ b/code/fms/fms-vue/src/components/ui/alert/index.ts
@@ -1,9 +1,9 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 
-export { default as Alert } from "./Alert.vue"
-export { default as AlertDescription } from "./AlertDescription.vue"
-export { default as AlertTitle } from "./AlertTitle.vue"
+export { default as Alert } from "./Alert.vue";
+export { default as AlertDescription } from "./AlertDescription.vue";
+export { default as AlertTitle } from "./AlertTitle.vue";
 
 export const alertVariants = cva(
   "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
@@ -19,6 +19,6 @@ export const alertVariants = cva(
       variant: "default",
     },
   },
-)
+);
 
-export type AlertVariants = VariantProps<typeof alertVariants>
+export type AlertVariants = VariantProps<typeof alertVariants>;
diff --git a/code/fms/fms-vue/src/components/ui/aspect-ratio/AspectRatio.vue b/code/fms/fms-vue/src/components/ui/aspect-ratio/AspectRatio.vue
index 857c208d..dbc00e90 100644
--- a/code/fms/fms-vue/src/components/ui/aspect-ratio/AspectRatio.vue
+++ b/code/fms/fms-vue/src/components/ui/aspect-ratio/AspectRatio.vue
@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import type { AspectRatioProps } from "reka-ui"
-import { AspectRatio } from "reka-ui"
+import type { AspectRatioProps } from "reka-ui";
+import { AspectRatio } from "reka-ui";
 
-const props = defineProps<AspectRatioProps>()
+const props = defineProps<AspectRatioProps>();
 </script>
 
 <template>
-  <AspectRatio
-    v-slot="slotProps"
-    data-slot="aspect-ratio"
-    v-bind="props"
-  >
+  <AspectRatio v-slot="slotProps" data-slot="aspect-ratio" v-bind="props">
     <slot v-bind="slotProps" />
   </AspectRatio>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/aspect-ratio/index.ts b/code/fms/fms-vue/src/components/ui/aspect-ratio/index.ts
index e658f55a..a4976a3d 100644
--- a/code/fms/fms-vue/src/components/ui/aspect-ratio/index.ts
+++ b/code/fms/fms-vue/src/components/ui/aspect-ratio/index.ts
@@ -1 +1 @@
-export { default as AspectRatio } from "./AspectRatio.vue"
+export { default as AspectRatio } from "./AspectRatio.vue";
diff --git a/code/fms/fms-vue/src/components/ui/avatar/Avatar.vue b/code/fms/fms-vue/src/components/ui/avatar/Avatar.vue
index bb7e669f..3185b757 100644
--- a/code/fms/fms-vue/src/components/ui/avatar/Avatar.vue
+++ b/code/fms/fms-vue/src/components/ui/avatar/Avatar.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { AvatarRoot } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { AvatarRoot } from "reka-ui";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/avatar/AvatarFallback.vue b/code/fms/fms-vue/src/components/ui/avatar/AvatarFallback.vue
index 16b588ae..1642b89f 100644
--- a/code/fms/fms-vue/src/components/ui/avatar/AvatarFallback.vue
+++ b/code/fms/fms-vue/src/components/ui/avatar/AvatarFallback.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { AvatarFallbackProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AvatarFallback } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { AvatarFallbackProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { AvatarFallback } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/avatar/AvatarImage.vue b/code/fms/fms-vue/src/components/ui/avatar/AvatarImage.vue
index 24a81664..5df7505a 100644
--- a/code/fms/fms-vue/src/components/ui/avatar/AvatarImage.vue
+++ b/code/fms/fms-vue/src/components/ui/avatar/AvatarImage.vue
@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import type { AvatarImageProps } from "reka-ui"
-import { AvatarImage } from "reka-ui"
+import type { AvatarImageProps } from "reka-ui";
+import { AvatarImage } from "reka-ui";
 
-const props = defineProps<AvatarImageProps>()
+const props = defineProps<AvatarImageProps>();
 </script>
 
 <template>
-  <AvatarImage
-    data-slot="avatar-image"
-    v-bind="props"
-    class="aspect-square size-full"
-  >
+  <AvatarImage data-slot="avatar-image" v-bind="props" class="aspect-square size-full">
     <slot />
   </AvatarImage>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/avatar/index.ts b/code/fms/fms-vue/src/components/ui/avatar/index.ts
index cf0e0031..036eee93 100644
--- a/code/fms/fms-vue/src/components/ui/avatar/index.ts
+++ b/code/fms/fms-vue/src/components/ui/avatar/index.ts
@@ -1,3 +1,3 @@
-export { default as Avatar } from "./Avatar.vue"
-export { default as AvatarFallback } from "./AvatarFallback.vue"
-export { default as AvatarImage } from "./AvatarImage.vue"
+export { default as Avatar } from "./Avatar.vue";
+export { default as AvatarFallback } from "./AvatarFallback.vue";
+export { default as AvatarImage } from "./AvatarImage.vue";
diff --git a/code/fms/fms-vue/src/components/ui/badge/Badge.vue b/code/fms/fms-vue/src/components/ui/badge/Badge.vue
index d894dfe0..119a584a 100644
--- a/code/fms/fms-vue/src/components/ui/badge/Badge.vue
+++ b/code/fms/fms-vue/src/components/ui/badge/Badge.vue
@@ -1,18 +1,20 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { BadgeVariants } from "."
-import { reactiveOmit } from "@vueuse/core"
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { badgeVariants } from "."
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { BadgeVariants } from ".";
+import { reactiveOmit } from "@vueuse/core";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { badgeVariants } from ".";
 
-const props = defineProps<PrimitiveProps & {
-  variant?: BadgeVariants["variant"]
-  class?: HTMLAttributes["class"]
-}>()
+const props = defineProps<
+  PrimitiveProps & {
+    variant?: BadgeVariants["variant"];
+    class?: HTMLAttributes["class"];
+  }
+>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/badge/index.ts b/code/fms/fms-vue/src/components/ui/badge/index.ts
index 635c961b..4d5808f2 100644
--- a/code/fms/fms-vue/src/components/ui/badge/index.ts
+++ b/code/fms/fms-vue/src/components/ui/badge/index.ts
@@ -1,26 +1,24 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 
-export { default as Badge } from "./Badge.vue"
+export { default as Badge } from "./Badge.vue";
 
 export const badgeVariants = cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
       variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
         destructive:
-         "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
       },
     },
     defaultVariants: {
       variant: "default",
     },
   },
-)
-export type BadgeVariants = VariantProps<typeof badgeVariants>
+);
+export type BadgeVariants = VariantProps<typeof badgeVariants>;
diff --git a/code/fms/fms-vue/src/components/ui/breadcrumb/Breadcrumb.vue b/code/fms/fms-vue/src/components/ui/breadcrumb/Breadcrumb.vue
index c5be5f09..bbcb100a 100644
--- a/code/fms/fms-vue/src/components/ui/breadcrumb/Breadcrumb.vue
+++ b/code/fms/fms-vue/src/components/ui/breadcrumb/Breadcrumb.vue
@@ -1,17 +1,13 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from "vue";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
-  <nav
-    aria-label="breadcrumb"
-    data-slot="breadcrumb"
-    :class="props.class"
-  >
+  <nav aria-label="breadcrumb" data-slot="breadcrumb" :class="props.class">
     <slot />
   </nav>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue b/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
index 9cc3a4f2..ad3b8e93 100644
--- a/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
+++ b/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { MoreHorizontal } from "@lucide/vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { MoreHorizontal } from "@lucide/vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbItem.vue b/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbItem.vue
index e3dce685..63b3d42e 100644
--- a/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbItem.vue
+++ b/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbItem.vue
@@ -1,17 +1,14 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
-  <li
-    data-slot="breadcrumb-item"
-    :class="cn('inline-flex items-center gap-1.5', props.class)"
-  >
+  <li data-slot="breadcrumb-item" :class="cn('inline-flex items-center gap-1.5', props.class)">
     <slot />
   </li>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbLink.vue b/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbLink.vue
index 5d963810..e825394e 100644
--- a/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbLink.vue
+++ b/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbLink.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
 
 const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {
   as: "a",
-})
+});
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbList.vue b/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbList.vue
index fc628116..476c62ca 100644
--- a/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbList.vue
+++ b/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbList.vue
@@ -1,16 +1,21 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
   <ol
     data-slot="breadcrumb-list"
-    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
+    :class="
+      cn(
+        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+        props.class,
+      )
+    "
   >
     <slot />
   </ol>
diff --git a/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbPage.vue b/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbPage.vue
index b429b20c..833a5143 100644
--- a/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbPage.vue
+++ b/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbPage.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbSeparator.vue b/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
index ef16ef01..eefccce4 100644
--- a/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
+++ b/code/fms/fms-vue/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { ChevronRight } from "@lucide/vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { ChevronRight } from "@lucide/vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/breadcrumb/index.ts b/code/fms/fms-vue/src/components/ui/breadcrumb/index.ts
index f4eafdc0..e51a7ed4 100644
--- a/code/fms/fms-vue/src/components/ui/breadcrumb/index.ts
+++ b/code/fms/fms-vue/src/components/ui/breadcrumb/index.ts
@@ -1,7 +1,7 @@
-export { default as Breadcrumb } from "./Breadcrumb.vue"
-export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue"
-export { default as BreadcrumbItem } from "./BreadcrumbItem.vue"
-export { default as BreadcrumbLink } from "./BreadcrumbLink.vue"
-export { default as BreadcrumbList } from "./BreadcrumbList.vue"
-export { default as BreadcrumbPage } from "./BreadcrumbPage.vue"
-export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue"
+export { default as Breadcrumb } from "./Breadcrumb.vue";
+export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue";
+export { default as BreadcrumbItem } from "./BreadcrumbItem.vue";
+export { default as BreadcrumbLink } from "./BreadcrumbLink.vue";
+export { default as BreadcrumbList } from "./BreadcrumbList.vue";
+export { default as BreadcrumbPage } from "./BreadcrumbPage.vue";
+export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue";
diff --git a/code/fms/fms-vue/src/components/ui/button/Button.vue b/code/fms/fms-vue/src/components/ui/button/Button.vue
index 3763470a..4a9a8af6 100644
--- a/code/fms/fms-vue/src/components/ui/button/Button.vue
+++ b/code/fms/fms-vue/src/components/ui/button/Button.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from "."
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "."
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { ButtonVariants } from ".";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from ".";
 
 interface Props extends PrimitiveProps {
-  variant?: ButtonVariants["variant"]
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
+  variant?: ButtonVariants["variant"];
+  size?: ButtonVariants["size"];
+  class?: HTMLAttributes["class"];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   as: "button",
-})
+});
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/button/index.ts b/code/fms/fms-vue/src/components/ui/button/index.ts
index 0a621788..0d868f17 100644
--- a/code/fms/fms-vue/src/components/ui/button/index.ts
+++ b/code/fms/fms-vue/src/components/ui/button/index.ts
@@ -1,31 +1,28 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 
-export { default as Button } from "./Button.vue"
+export { default as Button } from "./Button.vue";
 
 export const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default:
-          "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
           "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
-        "xs": "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
-        "icon": "size-9",
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
         "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
         "icon-sm": "size-8",
         "icon-lg": "size-10",
@@ -36,5 +33,5 @@ export const buttonVariants = cva(
       size: "default",
     },
   },
-)
-export type ButtonVariants = VariantProps<typeof buttonVariants>
+);
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
diff --git a/code/fms/fms-vue/src/components/ui/calendar/Calendar.vue b/code/fms/fms-vue/src/components/ui/calendar/Calendar.vue
index ff12462c..9e47d39b 100644
--- a/code/fms/fms-vue/src/components/ui/calendar/Calendar.vue
+++ b/code/fms/fms-vue/src/components/ui/calendar/Calendar.vue
@@ -1,45 +1,77 @@
 <script lang="ts" setup>
-import type { CalendarRootEmits, CalendarRootProps, DateValue } from "reka-ui"
-import type { HTMLAttributes, Ref } from "vue"
-import type { LayoutTypes } from "."
-import { getLocalTimeZone, today } from "@internationalized/date"
-import { createReusableTemplate, reactiveOmit, useVModel } from "@vueuse/core"
-import { CalendarRoot, useDateFormatter, useForwardPropsEmits } from "reka-ui"
-import { createYear, createYearRange, toDate } from "reka-ui/date"
-import { computed, toRaw } from "vue"
-import { cn } from "@/lib/utils"
-import { NativeSelect, NativeSelectOption } from '@/components/ui/native-select'
-import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from "."
+import type { CalendarRootEmits, CalendarRootProps, DateValue } from "reka-ui";
+import type { HTMLAttributes, Ref } from "vue";
+import type { LayoutTypes } from ".";
+import { getLocalTimeZone, today } from "@internationalized/date";
+import { createReusableTemplate, reactiveOmit, useVModel } from "@vueuse/core";
+import { CalendarRoot, useDateFormatter, useForwardPropsEmits } from "reka-ui";
+import { createYear, createYearRange, toDate } from "reka-ui/date";
+import { computed, toRaw } from "vue";
+import { cn } from "@/lib/utils";
+import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";
+import {
+  CalendarCell,
+  CalendarCellTrigger,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHead,
+  CalendarGridRow,
+  CalendarHeadCell,
+  CalendarHeader,
+  CalendarHeading,
+  CalendarNextButton,
+  CalendarPrevButton,
+} from ".";
 
-const props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes["class"], layout?: LayoutTypes, yearRange?: DateValue[] }>(), {
-  modelValue: undefined,
-  layout: undefined,
-})
-const emits = defineEmits<CalendarRootEmits>()
+const props = withDefaults(
+  defineProps<
+    CalendarRootProps & {
+      class?: HTMLAttributes["class"];
+      layout?: LayoutTypes;
+      yearRange?: DateValue[];
+    }
+  >(),
+  {
+    modelValue: undefined,
+    layout: undefined,
+  },
+);
+const emits = defineEmits<CalendarRootEmits>();
 
-const delegatedProps = reactiveOmit(props, "class", "layout", "placeholder")
+const delegatedProps = reactiveOmit(props, "class", "layout", "placeholder");
 
 const placeholder = useVModel(props, "placeholder", emits, {
   passive: true,
   defaultValue: props.defaultPlaceholder ?? today(getLocalTimeZone()),
-}) as Ref<DateValue>
+}) as Ref<DateValue>;
 
-const formatter = useDateFormatter(props.locale ?? "en")
+const formatter = useDateFormatter(props.locale ?? "en");
 
 const yearRange = computed(() => {
-  return props.yearRange ?? createYearRange({
-    start: props?.minValue ?? (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone()))
-      .cycle("year", -100),
+  return (
+    props.yearRange ??
+    createYearRange({
+      start:
+        props?.minValue ??
+        (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone())).cycle(
+          "year",
+          -100,
+        ),
 
-    end: props?.maxValue ?? (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone()))
-      .cycle("year", 10),
-  })
-})
+      end:
+        props?.maxValue ??
+        (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone())).cycle(
+          "year",
+          10,
+        ),
+    })
+  );
+});
 
-const [DefineMonthTemplate, ReuseMonthTemplate] = createReusableTemplate<{ date: DateValue }>()
-const [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate<{ date: DateValue }>()
+const [DefineMonthTemplate, ReuseMonthTemplate] = createReusableTemplate<{ date: DateValue }>();
+const [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate<{ date: DateValue }>();
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -47,19 +79,26 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <div class="**:data-[slot=native-select-icon]:right-1">
       <div class="relative">
         <div class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none">
-          {{ formatter.custom(toDate(date), { month: 'short' }) }}
+          {{ formatter.custom(toDate(date), { month: "short" }) }}
         </div>
         <NativeSelect
           class="text-xs h-8 pr-6 pl-2 text-transparent relative"
           :model-value="date.month"
-          @change="(e: Event) => {
-            placeholder = placeholder.set({
-              month: Number((e?.target as any)?.value),
-            })
-          }"
+          @change="
+            (e: Event) => {
+              placeholder = placeholder.set({
+                month: Number((e?.target as any)?.value),
+              });
+            }
+          "
         >
-          <NativeSelectOption v-for="(month) in createYear({ dateObj: date })" :key="month.toString()" :value="month.month" :selected="date.month === month.month">
-            {{ formatter.custom(toDate(month), { month: 'short' }) }}
+          <NativeSelectOption
+            v-for="month in createYear({ dateObj: date })"
+            :key="month.toString()"
+            :value="month.month"
+            :selected="date.month === month.month"
+          >
+            {{ formatter.custom(toDate(month), { month: "short" }) }}
           </NativeSelectOption>
         </NativeSelect>
       </div>
@@ -70,19 +109,26 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <div class="**:data-[slot=native-select-icon]:right-1">
       <div class="relative">
         <div class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none">
-          {{ formatter.custom(toDate(date), { year: 'numeric' }) }}
+          {{ formatter.custom(toDate(date), { year: "numeric" }) }}
         </div>
         <NativeSelect
           class="text-xs h-8 pr-6 pl-2 text-transparent relative"
           :model-value="date.year"
-          @change="(e: Event) => {
-            placeholder = placeholder.set({
-              year: Number((e?.target as any)?.value),
-            })
-          }"
+          @change="
+            (e: Event) => {
+              placeholder = placeholder.set({
+                year: Number((e?.target as any)?.value),
+              });
+            }
+          "
         >
-          <NativeSelectOption v-for="(year) in yearRange" :key="year.toString()" :value="year.year" :selected="date.year === year.year">
-            {{ formatter.custom(toDate(year), { year: 'numeric' }) }}
+          <NativeSelectOption
+            v-for="year in yearRange"
+            :key="year.toString()"
+            :value="year.year"
+            :selected="date.year === year.year"
+          >
+            {{ formatter.custom(toDate(year), { year: "numeric" }) }}
           </NativeSelectOption>
         </NativeSelect>
       </div>
@@ -106,7 +152,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         </CalendarNextButton>
       </nav>
 
-      <slot name="calendar-heading" :date="date" :month="ReuseMonthTemplate" :year="ReuseYearTemplate">
+      <slot
+        name="calendar-heading"
+        :date="date"
+        :month="ReuseMonthTemplate"
+        :year="ReuseYearTemplate"
+      >
         <template v-if="layout === 'month-and-year'">
           <div class="flex items-center justify-center gap-1">
             <ReuseMonthTemplate :date="date" />
@@ -116,12 +167,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         <template v-else-if="layout === 'month-only'">
           <div class="flex items-center justify-center gap-1">
             <ReuseMonthTemplate :date="date" />
-            {{ formatter.custom(toDate(date), { year: 'numeric' }) }}
+            {{ formatter.custom(toDate(date), { year: "numeric" }) }}
           </div>
         </template>
         <template v-else-if="layout === 'year-only'">
           <div class="flex items-center justify-center gap-1">
-            {{ formatter.custom(toDate(date), { month: 'short' }) }}
+            {{ formatter.custom(toDate(date), { month: "short" }) }}
             <ReuseYearTemplate :date="date" />
           </div>
         </template>
@@ -135,24 +186,19 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <CalendarGrid v-for="month in grid" :key="month.value.toString()">
         <CalendarGridHead>
           <CalendarGridRow>
-            <CalendarHeadCell
-              v-for="day in weekDays" :key="day"
-            >
+            <CalendarHeadCell v-for="day in weekDays" :key="day">
               {{ day }}
             </CalendarHeadCell>
           </CalendarGridRow>
         </CalendarGridHead>
         <CalendarGridBody>
-          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
-            <CalendarCell
-              v-for="weekDate in weekDates"
-              :key="weekDate.toString()"
-              :date="weekDate"
-            >
-              <CalendarCellTrigger
-                :day="weekDate"
-                :month="month.value"
-              />
+          <CalendarGridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`weekDate-${index}`"
+            class="mt-2 w-full"
+          >
+            <CalendarCell v-for="weekDate in weekDates" :key="weekDate.toString()" :date="weekDate">
+              <CalendarCellTrigger :day="weekDate" :month="month.value" />
             </CalendarCell>
           </CalendarGridRow>
         </CalendarGridBody>
diff --git a/code/fms/fms-vue/src/components/ui/calendar/CalendarCell.vue b/code/fms/fms-vue/src/components/ui/calendar/CalendarCell.vue
index c24c48b7..2dd4604e 100644
--- a/code/fms/fms-vue/src/components/ui/calendar/CalendarCell.vue
+++ b/code/fms/fms-vue/src/components/ui/calendar/CalendarCell.vue
@@ -1,21 +1,26 @@
 <script lang="ts" setup>
-import type { CalendarCellProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarCell, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { CalendarCellProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarCell, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<CalendarCellProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
   <CalendarCell
     data-slot="calendar-cell"
-    :class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 flex-1 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent', props.class)"
+    :class="
+      cn(
+        'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 flex-1 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent',
+        props.class,
+      )
+    "
     v-bind="forwardedProps"
   >
     <slot />
diff --git a/code/fms/fms-vue/src/components/ui/calendar/CalendarCellTrigger.vue b/code/fms/fms-vue/src/components/ui/calendar/CalendarCellTrigger.vue
index c99219ea..b73f12bb 100644
--- a/code/fms/fms-vue/src/components/ui/calendar/CalendarCellTrigger.vue
+++ b/code/fms/fms-vue/src/components/ui/calendar/CalendarCellTrigger.vue
@@ -1,37 +1,42 @@
 <script lang="ts" setup>
-import type { CalendarCellTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarCellTrigger, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
+import type { CalendarCellTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarCellTrigger, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const props = withDefaults(defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes["class"] }>(), {
-  as: "button",
-})
+const props = withDefaults(
+  defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    as: "button",
+  },
+);
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
   <CalendarCellTrigger
     data-slot="calendar-cell-trigger"
-    :class="cn(
-      buttonVariants({ variant: 'ghost' }),
-      'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',
-      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
-      // Selected
-      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 [&[data-selected]:hover]:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
-      // Disabled
-      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
-      // Unavailable
-      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
-      // Outside months
-      'data-[outside-view]:text-muted-foreground',
-      props.class,
-    )"
+    :class="
+      cn(
+        buttonVariants({ variant: 'ghost' }),
+        'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',
+        '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+        // Selected
+        'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 [&[data-selected]:hover]:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+        // Disabled
+        'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+        // Unavailable
+        'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+        // Outside months
+        'data-[outside-view]:text-muted-foreground',
+        props.class,
+      )
+    "
     v-bind="forwardedProps"
   >
     <slot />
diff --git a/code/fms/fms-vue/src/components/ui/calendar/CalendarGrid.vue b/code/fms/fms-vue/src/components/ui/calendar/CalendarGrid.vue
index e6dd7d6b..9924e132 100644
--- a/code/fms/fms-vue/src/components/ui/calendar/CalendarGrid.vue
+++ b/code/fms/fms-vue/src/components/ui/calendar/CalendarGrid.vue
@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import type { CalendarGridProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarGrid, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { CalendarGridProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarGrid, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<CalendarGridProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<CalendarGridProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/calendar/CalendarGridBody.vue b/code/fms/fms-vue/src/components/ui/calendar/CalendarGridBody.vue
index 3b9e716a..3460fbcf 100644
--- a/code/fms/fms-vue/src/components/ui/calendar/CalendarGridBody.vue
+++ b/code/fms/fms-vue/src/components/ui/calendar/CalendarGridBody.vue
@@ -1,15 +1,12 @@
 <script lang="ts" setup>
-import type { CalendarGridBodyProps } from "reka-ui"
-import { CalendarGridBody } from "reka-ui"
+import type { CalendarGridBodyProps } from "reka-ui";
+import { CalendarGridBody } from "reka-ui";
 
-const props = defineProps<CalendarGridBodyProps>()
+const props = defineProps<CalendarGridBodyProps>();
 </script>
 
 <template>
-  <CalendarGridBody
-    data-slot="calendar-grid-body"
-    v-bind="props"
-  >
+  <CalendarGridBody data-slot="calendar-grid-body" v-bind="props">
     <slot />
   </CalendarGridBody>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/calendar/CalendarGridHead.vue b/code/fms/fms-vue/src/components/ui/calendar/CalendarGridHead.vue
index de1589b6..4b3c90ba 100644
--- a/code/fms/fms-vue/src/components/ui/calendar/CalendarGridHead.vue
+++ b/code/fms/fms-vue/src/components/ui/calendar/CalendarGridHead.vue
@@ -1,16 +1,13 @@
 <script lang="ts" setup>
-import type { CalendarGridHeadProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { CalendarGridHead } from "reka-ui"
+import type { CalendarGridHeadProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { CalendarGridHead } from "reka-ui";
 
-const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes["class"] }>();
 </script>
 
 <template>
-  <CalendarGridHead
-    data-slot="calendar-grid-head"
-    v-bind="props"
-  >
+  <CalendarGridHead data-slot="calendar-grid-head" v-bind="props">
     <slot />
   </CalendarGridHead>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/calendar/CalendarGridRow.vue b/code/fms/fms-vue/src/components/ui/calendar/CalendarGridRow.vue
index 767557d8..ffe3da59 100644
--- a/code/fms/fms-vue/src/components/ui/calendar/CalendarGridRow.vue
+++ b/code/fms/fms-vue/src/components/ui/calendar/CalendarGridRow.vue
@@ -1,21 +1,22 @@
 <script lang="ts" setup>
-import type { CalendarGridRowProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarGridRow, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { CalendarGridRowProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarGridRow, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
   <CalendarGridRow
     data-slot="calendar-grid-row"
-    :class="cn('flex', props.class)" v-bind="forwardedProps"
+    :class="cn('flex', props.class)"
+    v-bind="forwardedProps"
   >
     <slot />
   </CalendarGridRow>
diff --git a/code/fms/fms-vue/src/components/ui/calendar/CalendarHeadCell.vue b/code/fms/fms-vue/src/components/ui/calendar/CalendarHeadCell.vue
index 47fefbc7..13483976 100644
--- a/code/fms/fms-vue/src/components/ui/calendar/CalendarHeadCell.vue
+++ b/code/fms/fms-vue/src/components/ui/calendar/CalendarHeadCell.vue
@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import type { CalendarHeadCellProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarHeadCell, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { CalendarHeadCellProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarHeadCell, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/calendar/CalendarHeader.vue b/code/fms/fms-vue/src/components/ui/calendar/CalendarHeader.vue
index 175118db..23ec2b9a 100644
--- a/code/fms/fms-vue/src/components/ui/calendar/CalendarHeader.vue
+++ b/code/fms/fms-vue/src/components/ui/calendar/CalendarHeader.vue
@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import type { CalendarHeaderProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarHeader, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { CalendarHeaderProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarHeader, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/calendar/CalendarHeading.vue b/code/fms/fms-vue/src/components/ui/calendar/CalendarHeading.vue
index 5a11c12f..1fe766f7 100644
--- a/code/fms/fms-vue/src/components/ui/calendar/CalendarHeading.vue
+++ b/code/fms/fms-vue/src/components/ui/calendar/CalendarHeading.vue
@@ -1,19 +1,19 @@
 <script lang="ts" setup>
-import type { CalendarHeadingProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarHeading, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { CalendarHeadingProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarHeading, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes["class"] }>();
 
 defineSlots<{
-  default: (props: { headingValue: string }) => any
-}>()
+  default: (props: { headingValue: string }) => any;
+}>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/calendar/CalendarNextButton.vue b/code/fms/fms-vue/src/components/ui/calendar/CalendarNextButton.vue
index 6375cc7b..640d8b3e 100644
--- a/code/fms/fms-vue/src/components/ui/calendar/CalendarNextButton.vue
+++ b/code/fms/fms-vue/src/components/ui/calendar/CalendarNextButton.vue
@@ -1,27 +1,29 @@
 <script lang="ts" setup>
-import type { CalendarNextProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { ChevronRight } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarNext, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
+import type { CalendarNextProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { ChevronRight } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarNext, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const props = defineProps<CalendarNextProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<CalendarNextProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
   <CalendarNext
     data-slot="calendar-next-button"
-    :class="cn(
-      buttonVariants({ variant: 'outline' }),
-      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-      props.class,
-    )"
+    :class="
+      cn(
+        buttonVariants({ variant: 'outline' }),
+        'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        props.class,
+      )
+    "
     v-bind="forwardedProps"
   >
     <slot>
diff --git a/code/fms/fms-vue/src/components/ui/calendar/CalendarPrevButton.vue b/code/fms/fms-vue/src/components/ui/calendar/CalendarPrevButton.vue
index 81dc364e..796e68c5 100644
--- a/code/fms/fms-vue/src/components/ui/calendar/CalendarPrevButton.vue
+++ b/code/fms/fms-vue/src/components/ui/calendar/CalendarPrevButton.vue
@@ -1,27 +1,29 @@
 <script lang="ts" setup>
-import type { CalendarPrevProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { ChevronLeft } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarPrev, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
+import type { CalendarPrevProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { ChevronLeft } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarPrev, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
   <CalendarPrev
     data-slot="calendar-prev-button"
-    :class="cn(
-      buttonVariants({ variant: 'outline' }),
-      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-      props.class,
-    )"
+    :class="
+      cn(
+        buttonVariants({ variant: 'outline' }),
+        'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        props.class,
+      )
+    "
     v-bind="forwardedProps"
   >
     <slot>
diff --git a/code/fms/fms-vue/src/components/ui/calendar/index.ts b/code/fms/fms-vue/src/components/ui/calendar/index.ts
index 552c634b..e39f4987 100644
--- a/code/fms/fms-vue/src/components/ui/calendar/index.ts
+++ b/code/fms/fms-vue/src/components/ui/calendar/index.ts
@@ -1,14 +1,14 @@
-export { default as Calendar } from "./Calendar.vue"
-export { default as CalendarCell } from "./CalendarCell.vue"
-export { default as CalendarCellTrigger } from "./CalendarCellTrigger.vue"
-export { default as CalendarGrid } from "./CalendarGrid.vue"
-export { default as CalendarGridBody } from "./CalendarGridBody.vue"
-export { default as CalendarGridHead } from "./CalendarGridHead.vue"
-export { default as CalendarGridRow } from "./CalendarGridRow.vue"
-export { default as CalendarHeadCell } from "./CalendarHeadCell.vue"
-export { default as CalendarHeader } from "./CalendarHeader.vue"
-export { default as CalendarHeading } from "./CalendarHeading.vue"
-export { default as CalendarNextButton } from "./CalendarNextButton.vue"
-export { default as CalendarPrevButton } from "./CalendarPrevButton.vue"
+export { default as Calendar } from "./Calendar.vue";
+export { default as CalendarCell } from "./CalendarCell.vue";
+export { default as CalendarCellTrigger } from "./CalendarCellTrigger.vue";
+export { default as CalendarGrid } from "./CalendarGrid.vue";
+export { default as CalendarGridBody } from "./CalendarGridBody.vue";
+export { default as CalendarGridHead } from "./CalendarGridHead.vue";
+export { default as CalendarGridRow } from "./CalendarGridRow.vue";
+export { default as CalendarHeadCell } from "./CalendarHeadCell.vue";
+export { default as CalendarHeader } from "./CalendarHeader.vue";
+export { default as CalendarHeading } from "./CalendarHeading.vue";
+export { default as CalendarNextButton } from "./CalendarNextButton.vue";
+export { default as CalendarPrevButton } from "./CalendarPrevButton.vue";
 
-export type LayoutTypes = "month-and-year" | "month-only" | "year-only" | undefined
+export type LayoutTypes = "month-and-year" | "month-only" | "year-only" | undefined;
diff --git a/code/fms/fms-vue/src/components/ui/card/Card.vue b/code/fms/fms-vue/src/components/ui/card/Card.vue
index f5a07070..2ed1753b 100644
--- a/code/fms/fms-vue/src/components/ui/card/Card.vue
+++ b/code/fms/fms-vue/src/components/ui/card/Card.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/card/CardAction.vue b/code/fms/fms-vue/src/components/ui/card/CardAction.vue
index c91638b6..d7ae294d 100644
--- a/code/fms/fms-vue/src/components/ui/card/CardAction.vue
+++ b/code/fms/fms-vue/src/components/ui/card/CardAction.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/card/CardContent.vue b/code/fms/fms-vue/src/components/ui/card/CardContent.vue
index dfbc5524..09af2c35 100644
--- a/code/fms/fms-vue/src/components/ui/card/CardContent.vue
+++ b/code/fms/fms-vue/src/components/ui/card/CardContent.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
-  <div
-    data-slot="card-content"
-    :class="cn('px-6', props.class)"
-  >
+  <div data-slot="card-content" :class="cn('px-6', props.class)">
     <slot />
   </div>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/card/CardDescription.vue b/code/fms/fms-vue/src/components/ui/card/CardDescription.vue
index 71c1b8da..9c129a81 100644
--- a/code/fms/fms-vue/src/components/ui/card/CardDescription.vue
+++ b/code/fms/fms-vue/src/components/ui/card/CardDescription.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
-  <p
-    data-slot="card-description"
-    :class="cn('text-muted-foreground text-sm', props.class)"
-  >
+  <p data-slot="card-description" :class="cn('text-muted-foreground text-sm', props.class)">
     <slot />
   </p>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/card/CardFooter.vue b/code/fms/fms-vue/src/components/ui/card/CardFooter.vue
index 9e3739ed..7d01f186 100644
--- a/code/fms/fms-vue/src/components/ui/card/CardFooter.vue
+++ b/code/fms/fms-vue/src/components/ui/card/CardFooter.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
-  <div
-    data-slot="card-footer"
-    :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
-  >
+  <div data-slot="card-footer" :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)">
     <slot />
   </div>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/card/CardHeader.vue b/code/fms/fms-vue/src/components/ui/card/CardHeader.vue
index 4fe4da46..ebd8bfa0 100644
--- a/code/fms/fms-vue/src/components/ui/card/CardHeader.vue
+++ b/code/fms/fms-vue/src/components/ui/card/CardHeader.vue
@@ -1,16 +1,21 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </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)"
+    :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>
diff --git a/code/fms/fms-vue/src/components/ui/card/CardTitle.vue b/code/fms/fms-vue/src/components/ui/card/CardTitle.vue
index 5f479e73..a4e55b26 100644
--- a/code/fms/fms-vue/src/components/ui/card/CardTitle.vue
+++ b/code/fms/fms-vue/src/components/ui/card/CardTitle.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
-  <h3
-    data-slot="card-title"
-    :class="cn('leading-none font-semibold', props.class)"
-  >
+  <h3 data-slot="card-title" :class="cn('leading-none font-semibold', props.class)">
     <slot />
   </h3>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/card/index.ts b/code/fms/fms-vue/src/components/ui/card/index.ts
index 16277580..409685bb 100644
--- a/code/fms/fms-vue/src/components/ui/card/index.ts
+++ b/code/fms/fms-vue/src/components/ui/card/index.ts
@@ -1,7 +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"
+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";
diff --git a/code/fms/fms-vue/src/components/ui/carousel/Carousel.vue b/code/fms/fms-vue/src/components/ui/carousel/Carousel.vue
index 4575682a..8941002c 100644
--- a/code/fms/fms-vue/src/components/ui/carousel/Carousel.vue
+++ b/code/fms/fms-vue/src/components/ui/carousel/Carousel.vue
@@ -1,15 +1,23 @@
 <script setup lang="ts">
-import type { CarouselEmits, CarouselProps, WithClassAsProps } from "./interface"
-import { cn } from "@/lib/utils"
-import { useProvideCarousel } from "./useCarousel"
+import type { CarouselEmits, CarouselProps, WithClassAsProps } from "./interface";
+import { cn } from "@/lib/utils";
+import { useProvideCarousel } from "./useCarousel";
 
 const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
   orientation: "horizontal",
-})
+});
 
-const emits = defineEmits<CarouselEmits>()
+const emits = defineEmits<CarouselEmits>();
 
-const { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)
+const {
+  canScrollNext,
+  canScrollPrev,
+  carouselApi,
+  carouselRef,
+  orientation,
+  scrollNext,
+  scrollPrev,
+} = useProvideCarousel(props, emits);
 
 defineExpose({
   canScrollNext,
@@ -19,22 +27,22 @@ defineExpose({
   orientation,
   scrollNext,
   scrollPrev,
-})
+});
 
 function onKeyDown(event: KeyboardEvent) {
-  const prevKey = props.orientation === "vertical" ? "ArrowUp" : "ArrowLeft"
-  const nextKey = props.orientation === "vertical" ? "ArrowDown" : "ArrowRight"
+  const prevKey = props.orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+  const nextKey = props.orientation === "vertical" ? "ArrowDown" : "ArrowRight";
 
   if (event.key === prevKey) {
-    event.preventDefault()
-    scrollPrev()
+    event.preventDefault();
+    scrollPrev();
 
-    return
+    return;
   }
 
   if (event.key === nextKey) {
-    event.preventDefault()
-    scrollNext()
+    event.preventDefault();
+    scrollNext();
   }
 }
 </script>
@@ -48,6 +56,14 @@ function onKeyDown(event: KeyboardEvent) {
     tabindex="0"
     @keydown="onKeyDown"
   >
-    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />
+    <slot
+      :can-scroll-next
+      :can-scroll-prev
+      :carousel-api
+      :carousel-ref
+      :orientation
+      :scroll-next
+      :scroll-prev
+    />
   </div>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/carousel/CarouselContent.vue b/code/fms/fms-vue/src/components/ui/carousel/CarouselContent.vue
index bd3db7e7..ef175bd5 100644
--- a/code/fms/fms-vue/src/components/ui/carousel/CarouselContent.vue
+++ b/code/fms/fms-vue/src/components/ui/carousel/CarouselContent.vue
@@ -1,30 +1,21 @@
 <script setup lang="ts">
-import type { WithClassAsProps } from "./interface"
-import { cn } from "@/lib/utils"
-import { useCarousel } from "./useCarousel"
+import type { WithClassAsProps } from "./interface";
+import { cn } from "@/lib/utils";
+import { useCarousel } from "./useCarousel";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = defineProps<WithClassAsProps>()
+const props = defineProps<WithClassAsProps>();
 
-const { carouselRef, orientation } = useCarousel()
+const { carouselRef, orientation } = useCarousel();
 </script>
 
 <template>
-  <div
-    ref="carouselRef"
-    data-slot="carousel-content"
-    class="overflow-hidden"
-  >
+  <div ref="carouselRef" data-slot="carousel-content" class="overflow-hidden">
     <div
-      :class="
-        cn(
-          'flex',
-          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
-          props.class,
-        )"
+      :class="cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', props.class)"
       v-bind="$attrs"
     >
       <slot />
diff --git a/code/fms/fms-vue/src/components/ui/carousel/CarouselItem.vue b/code/fms/fms-vue/src/components/ui/carousel/CarouselItem.vue
index 39df4c63..88875c0b 100644
--- a/code/fms/fms-vue/src/components/ui/carousel/CarouselItem.vue
+++ b/code/fms/fms-vue/src/components/ui/carousel/CarouselItem.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { WithClassAsProps } from "./interface"
-import { cn } from "@/lib/utils"
-import { useCarousel } from "./useCarousel"
+import type { WithClassAsProps } from "./interface";
+import { cn } from "@/lib/utils";
+import { useCarousel } from "./useCarousel";
 
-const props = defineProps<WithClassAsProps>()
+const props = defineProps<WithClassAsProps>();
 
-const { orientation } = useCarousel()
+const { orientation } = useCarousel();
 </script>
 
 <template>
@@ -13,11 +13,13 @@ const { orientation } = useCarousel()
     data-slot="carousel-item"
     role="group"
     aria-roledescription="slide"
-    :class="cn(
-      'min-w-0 shrink-0 grow-0 basis-full',
-      orientation === 'horizontal' ? 'pl-4' : 'pt-4',
-      props.class,
-    )"
+    :class="
+      cn(
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        props.class,
+      )
+    "
   >
     <slot />
   </div>
diff --git a/code/fms/fms-vue/src/components/ui/carousel/CarouselNext.vue b/code/fms/fms-vue/src/components/ui/carousel/CarouselNext.vue
index af5f0a70..559f7b15 100644
--- a/code/fms/fms-vue/src/components/ui/carousel/CarouselNext.vue
+++ b/code/fms/fms-vue/src/components/ui/carousel/CarouselNext.vue
@@ -1,34 +1,40 @@
 <script setup lang="ts">
-import type { WithClassAsProps } from "./interface"
-import type { ButtonVariants } from '@/components/ui/button'
-import { ArrowRight } from "@lucide/vue"
-import { cn } from "@/lib/utils"
-import { Button } from '@/components/ui/button'
-import { useCarousel } from "./useCarousel"
+import type { WithClassAsProps } from "./interface";
+import type { ButtonVariants } from "@/components/ui/button";
+import { ArrowRight } from "@lucide/vue";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { useCarousel } from "./useCarousel";
 
-const props = withDefaults(defineProps<{
-  variant?: ButtonVariants["variant"]
-  size?: ButtonVariants["size"]
-}
-& WithClassAsProps>(), {
-  variant: "outline",
-  size: "icon",
-})
+const props = withDefaults(
+  defineProps<
+    {
+      variant?: ButtonVariants["variant"];
+      size?: ButtonVariants["size"];
+    } & WithClassAsProps
+  >(),
+  {
+    variant: "outline",
+    size: "icon",
+  },
+);
 
-const { orientation, canScrollNext, scrollNext } = useCarousel()
+const { orientation, canScrollNext, scrollNext } = useCarousel();
 </script>
 
 <template>
   <Button
     data-slot="carousel-next"
     :disabled="!canScrollNext"
-    :class="cn(
-      'absolute size-8 rounded-full',
-      orientation === 'horizontal'
-        ? 'top-1/2 -right-12 -translate-y-1/2'
-        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-      props.class,
-    )"
+    :class="
+      cn(
+        'absolute size-8 rounded-full',
+        orientation === 'horizontal'
+          ? 'top-1/2 -right-12 -translate-y-1/2'
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        props.class,
+      )
+    "
     :variant="variant"
     :size="size"
     @click="scrollNext"
diff --git a/code/fms/fms-vue/src/components/ui/carousel/CarouselPrevious.vue b/code/fms/fms-vue/src/components/ui/carousel/CarouselPrevious.vue
index cd06ae34..c4463e33 100644
--- a/code/fms/fms-vue/src/components/ui/carousel/CarouselPrevious.vue
+++ b/code/fms/fms-vue/src/components/ui/carousel/CarouselPrevious.vue
@@ -1,34 +1,40 @@
 <script setup lang="ts">
-import type { WithClassAsProps } from "./interface"
-import type { ButtonVariants } from '@/components/ui/button'
-import { ArrowLeft } from "@lucide/vue"
-import { cn } from "@/lib/utils"
-import { Button } from '@/components/ui/button'
-import { useCarousel } from "./useCarousel"
+import type { WithClassAsProps } from "./interface";
+import type { ButtonVariants } from "@/components/ui/button";
+import { ArrowLeft } from "@lucide/vue";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { useCarousel } from "./useCarousel";
 
-const props = withDefaults(defineProps<{
-  variant?: ButtonVariants["variant"]
-  size?: ButtonVariants["size"]
-}
-& WithClassAsProps>(), {
-  variant: "outline",
-  size: "icon",
-})
+const props = withDefaults(
+  defineProps<
+    {
+      variant?: ButtonVariants["variant"];
+      size?: ButtonVariants["size"];
+    } & WithClassAsProps
+  >(),
+  {
+    variant: "outline",
+    size: "icon",
+  },
+);
 
-const { orientation, canScrollPrev, scrollPrev } = useCarousel()
+const { orientation, canScrollPrev, scrollPrev } = useCarousel();
 </script>
 
 <template>
   <Button
     data-slot="carousel-previous"
     :disabled="!canScrollPrev"
-    :class="cn(
-      'absolute size-8 rounded-full',
-      orientation === 'horizontal'
-        ? 'top-1/2 -left-12 -translate-y-1/2'
-        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-      props.class,
-    )"
+    :class="
+      cn(
+        'absolute size-8 rounded-full',
+        orientation === 'horizontal'
+          ? 'top-1/2 -left-12 -translate-y-1/2'
+          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        props.class,
+      )
+    "
     :variant="variant"
     :size="size"
     @click="scrollPrev"
diff --git a/code/fms/fms-vue/src/components/ui/carousel/index.ts b/code/fms/fms-vue/src/components/ui/carousel/index.ts
index 154bfcbe..3c306c25 100644
--- a/code/fms/fms-vue/src/components/ui/carousel/index.ts
+++ b/code/fms/fms-vue/src/components/ui/carousel/index.ts
@@ -1,10 +1,8 @@
-export { default as Carousel } from "./Carousel.vue"
-export { default as CarouselContent } from "./CarouselContent.vue"
-export { default as CarouselItem } from "./CarouselItem.vue"
-export { default as CarouselNext } from "./CarouselNext.vue"
-export { default as CarouselPrevious } from "./CarouselPrevious.vue"
-export type {
-  UnwrapRefCarouselApi as CarouselApi,
-} from "./interface"
+export { default as Carousel } from "./Carousel.vue";
+export { default as CarouselContent } from "./CarouselContent.vue";
+export { default as CarouselItem } from "./CarouselItem.vue";
+export { default as CarouselNext } from "./CarouselNext.vue";
+export { default as CarouselPrevious } from "./CarouselPrevious.vue";
+export type { UnwrapRefCarouselApi as CarouselApi } from "./interface";
 
-export { useCarousel } from "./useCarousel"
+export { useCarousel } from "./useCarousel";
diff --git a/code/fms/fms-vue/src/components/ui/carousel/interface.ts b/code/fms/fms-vue/src/components/ui/carousel/interface.ts
index 74eaf36d..74a45c0d 100644
--- a/code/fms/fms-vue/src/components/ui/carousel/interface.ts
+++ b/code/fms/fms-vue/src/components/ui/carousel/interface.ts
@@ -1,26 +1,24 @@
-import type useEmblaCarousel from "embla-carousel-vue"
-import type {
-  EmblaCarouselVueType,
-} from "embla-carousel-vue"
-import type { HTMLAttributes, UnwrapRef } from "vue"
+import type useEmblaCarousel from "embla-carousel-vue";
+import type { EmblaCarouselVueType } from "embla-carousel-vue";
+import type { HTMLAttributes, UnwrapRef } from "vue";
 
-type CarouselApi = EmblaCarouselVueType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
+type CarouselApi = EmblaCarouselVueType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
 
-export type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>
+export type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>;
 
 export interface CarouselProps {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
 }
 
 export interface CarouselEmits {
-  (e: "init-api", payload: UnwrapRefCarouselApi): void
+  (e: "init-api", payload: UnwrapRefCarouselApi): void;
 }
 
 export interface WithClassAsProps {
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes["class"];
 }
diff --git a/code/fms/fms-vue/src/components/ui/carousel/useCarousel.ts b/code/fms/fms-vue/src/components/ui/carousel/useCarousel.ts
index 32e35ca0..5c024bf6 100644
--- a/code/fms/fms-vue/src/components/ui/carousel/useCarousel.ts
+++ b/code/fms/fms-vue/src/components/ui/carousel/useCarousel.ts
@@ -1,56 +1,65 @@
-import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from "./interface"
-import { createInjectionState } from "@vueuse/core"
-import emblaCarouselVue from "embla-carousel-vue"
-import { onMounted, ref } from "vue"
+import type {
+  UnwrapRefCarouselApi as CarouselApi,
+  CarouselEmits,
+  CarouselProps,
+} from "./interface";
+import { createInjectionState } from "@vueuse/core";
+import emblaCarouselVue from "embla-carousel-vue";
+import { onMounted, ref } from "vue";
 
 const [useProvideCarousel, useInjectCarousel] = createInjectionState(
-  ({
-    opts,
-    orientation,
-    plugins,
-  }: CarouselProps, emits: CarouselEmits) => {
-    const [emblaNode, emblaApi] = emblaCarouselVue({
-      ...opts,
-      axis: orientation === "horizontal" ? "x" : "y",
-    }, plugins)
+  ({ opts, orientation, plugins }: CarouselProps, emits: CarouselEmits) => {
+    const [emblaNode, emblaApi] = emblaCarouselVue(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins,
+    );
 
     function scrollPrev() {
-      emblaApi.value?.scrollPrev()
+      emblaApi.value?.scrollPrev();
     }
     function scrollNext() {
-      emblaApi.value?.scrollNext()
+      emblaApi.value?.scrollNext();
     }
 
-    const canScrollNext = ref(false)
-    const canScrollPrev = ref(false)
+    const canScrollNext = ref(false);
+    const canScrollPrev = ref(false);
 
     function onSelect(api: CarouselApi) {
-      canScrollNext.value = api?.canScrollNext() || false
-      canScrollPrev.value = api?.canScrollPrev() || false
+      canScrollNext.value = api?.canScrollNext() || false;
+      canScrollPrev.value = api?.canScrollPrev() || false;
     }
 
     onMounted(() => {
-      if (!emblaApi.value)
-        return
+      if (!emblaApi.value) return;
 
-      emblaApi.value?.on("init", onSelect)
-      emblaApi.value?.on("reInit", onSelect)
-      emblaApi.value?.on("select", onSelect)
+      emblaApi.value?.on("init", onSelect);
+      emblaApi.value?.on("reInit", onSelect);
+      emblaApi.value?.on("select", onSelect);
 
-      emits("init-api", emblaApi.value)
-    })
+      emits("init-api", emblaApi.value);
+    });
 
-    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }
+    return {
+      carouselRef: emblaNode,
+      carouselApi: emblaApi,
+      canScrollPrev,
+      canScrollNext,
+      scrollPrev,
+      scrollNext,
+      orientation,
+    };
   },
-)
+);
 
 function useCarousel() {
-  const carouselState = useInjectCarousel()
+  const carouselState = useInjectCarousel();
 
-  if (!carouselState)
-    throw new Error("useCarousel must be used within a <Carousel />")
+  if (!carouselState) throw new Error("useCarousel must be used within a <Carousel />");
 
-  return carouselState
+  return carouselState;
 }
 
-export { useCarousel, useProvideCarousel }
+export { useCarousel, useProvideCarousel };
diff --git a/code/fms/fms-vue/src/components/ui/checkbox/Checkbox.vue b/code/fms/fms-vue/src/components/ui/checkbox/Checkbox.vue
index b8e04851..f50abdf1 100644
--- a/code/fms/fms-vue/src/components/ui/checkbox/Checkbox.vue
+++ b/code/fms/fms-vue/src/components/ui/checkbox/Checkbox.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Check } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { CheckboxRootEmits, CheckboxRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Check } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<CheckboxRootEmits>()
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<CheckboxRootEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -20,8 +20,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="checkbox"
     v-bind="forwarded"
     :class="
-      cn('peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50',
-         props.class)"
+      cn(
+        'peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
   >
     <CheckboxIndicator
       data-slot="checkbox-indicator"
diff --git a/code/fms/fms-vue/src/components/ui/checkbox/index.ts b/code/fms/fms-vue/src/components/ui/checkbox/index.ts
index 3391a857..75be342b 100644
--- a/code/fms/fms-vue/src/components/ui/checkbox/index.ts
+++ b/code/fms/fms-vue/src/components/ui/checkbox/index.ts
@@ -1 +1 @@
-export { default as Checkbox } from "./Checkbox.vue"
+export { default as Checkbox } from "./Checkbox.vue";
diff --git a/code/fms/fms-vue/src/components/ui/collapsible/Collapsible.vue b/code/fms/fms-vue/src/components/ui/collapsible/Collapsible.vue
index 70a94978..cf82a6c3 100644
--- a/code/fms/fms-vue/src/components/ui/collapsible/Collapsible.vue
+++ b/code/fms/fms-vue/src/components/ui/collapsible/Collapsible.vue
@@ -1,19 +1,15 @@
 <script setup lang="ts">
-import type { CollapsibleRootEmits, CollapsibleRootProps } from "reka-ui"
-import { CollapsibleRoot, useForwardPropsEmits } from "reka-ui"
+import type { CollapsibleRootEmits, CollapsibleRootProps } from "reka-ui";
+import { CollapsibleRoot, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<CollapsibleRootProps>()
-const emits = defineEmits<CollapsibleRootEmits>()
+const props = defineProps<CollapsibleRootProps>();
+const emits = defineEmits<CollapsibleRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <CollapsibleRoot
-    v-slot="slotProps"
-    data-slot="collapsible"
-    v-bind="forwarded"
-  >
+  <CollapsibleRoot v-slot="slotProps" data-slot="collapsible" v-bind="forwarded">
     <slot v-bind="slotProps" />
   </CollapsibleRoot>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/collapsible/CollapsibleContent.vue b/code/fms/fms-vue/src/components/ui/collapsible/CollapsibleContent.vue
index 8be0a113..49a402f2 100644
--- a/code/fms/fms-vue/src/components/ui/collapsible/CollapsibleContent.vue
+++ b/code/fms/fms-vue/src/components/ui/collapsible/CollapsibleContent.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { CollapsibleContentProps } from "reka-ui"
-import { CollapsibleContent } from "reka-ui"
+import type { CollapsibleContentProps } from "reka-ui";
+import { CollapsibleContent } from "reka-ui";
 
-const props = defineProps<CollapsibleContentProps>()
+const props = defineProps<CollapsibleContentProps>();
 </script>
 
 <template>
-  <CollapsibleContent
-    data-slot="collapsible-content"
-    v-bind="props"
-  >
+  <CollapsibleContent data-slot="collapsible-content" v-bind="props">
     <slot />
   </CollapsibleContent>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/collapsible/CollapsibleTrigger.vue b/code/fms/fms-vue/src/components/ui/collapsible/CollapsibleTrigger.vue
index 33bec783..b071d07d 100644
--- a/code/fms/fms-vue/src/components/ui/collapsible/CollapsibleTrigger.vue
+++ b/code/fms/fms-vue/src/components/ui/collapsible/CollapsibleTrigger.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { CollapsibleTriggerProps } from "reka-ui"
-import { CollapsibleTrigger } from "reka-ui"
+import type { CollapsibleTriggerProps } from "reka-ui";
+import { CollapsibleTrigger } from "reka-ui";
 
-const props = defineProps<CollapsibleTriggerProps>()
+const props = defineProps<CollapsibleTriggerProps>();
 </script>
 
 <template>
-  <CollapsibleTrigger
-    data-slot="collapsible-trigger"
-    v-bind="props"
-  >
+  <CollapsibleTrigger data-slot="collapsible-trigger" v-bind="props">
     <slot />
   </CollapsibleTrigger>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/collapsible/index.ts b/code/fms/fms-vue/src/components/ui/collapsible/index.ts
index 86a031d5..289bdbbf 100644
--- a/code/fms/fms-vue/src/components/ui/collapsible/index.ts
+++ b/code/fms/fms-vue/src/components/ui/collapsible/index.ts
@@ -1,3 +1,3 @@
-export { default as Collapsible } from "./Collapsible.vue"
-export { default as CollapsibleContent } from "./CollapsibleContent.vue"
-export { default as CollapsibleTrigger } from "./CollapsibleTrigger.vue"
+export { default as Collapsible } from "./Collapsible.vue";
+export { default as CollapsibleContent } from "./CollapsibleContent.vue";
+export { default as CollapsibleTrigger } from "./CollapsibleTrigger.vue";
diff --git a/code/fms/fms-vue/src/components/ui/combobox/Combobox.vue b/code/fms/fms-vue/src/components/ui/combobox/Combobox.vue
index 0e6907c4..99025aef 100644
--- a/code/fms/fms-vue/src/components/ui/combobox/Combobox.vue
+++ b/code/fms/fms-vue/src/components/ui/combobox/Combobox.vue
@@ -1,19 +1,15 @@
 <script setup lang="ts">
-import type { ComboboxRootEmits, ComboboxRootProps } from "reka-ui"
-import { ComboboxRoot, useForwardPropsEmits } from "reka-ui"
+import type { ComboboxRootEmits, ComboboxRootProps } from "reka-ui";
+import { ComboboxRoot, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<ComboboxRootProps>()
-const emits = defineEmits<ComboboxRootEmits>()
+const props = defineProps<ComboboxRootProps>();
+const emits = defineEmits<ComboboxRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <ComboboxRoot
-    v-slot="slotProps"
-    data-slot="combobox"
-    v-bind="forwarded"
-  >
+  <ComboboxRoot v-slot="slotProps" data-slot="combobox" v-bind="forwarded">
     <slot v-bind="slotProps" />
   </ComboboxRoot>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/combobox/ComboboxAnchor.vue b/code/fms/fms-vue/src/components/ui/combobox/ComboboxAnchor.vue
index 5b9041d4..20053912 100644
--- a/code/fms/fms-vue/src/components/ui/combobox/ComboboxAnchor.vue
+++ b/code/fms/fms-vue/src/components/ui/combobox/ComboboxAnchor.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { ComboboxAnchorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ComboboxAnchor, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ComboboxAnchorProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ComboboxAnchor, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ComboboxAnchorProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<ComboboxAnchorProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardProps(delegatedProps)
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/combobox/ComboboxEmpty.vue b/code/fms/fms-vue/src/components/ui/combobox/ComboboxEmpty.vue
index 20beb63b..53f7e09e 100644
--- a/code/fms/fms-vue/src/components/ui/combobox/ComboboxEmpty.vue
+++ b/code/fms/fms-vue/src/components/ui/combobox/ComboboxEmpty.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { ComboboxEmptyProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ComboboxEmpty } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ComboboxEmptyProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ComboboxEmpty } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/combobox/ComboboxGroup.vue b/code/fms/fms-vue/src/components/ui/combobox/ComboboxGroup.vue
index 0dc9fc5b..2ebb0e4e 100644
--- a/code/fms/fms-vue/src/components/ui/combobox/ComboboxGroup.vue
+++ b/code/fms/fms-vue/src/components/ui/combobox/ComboboxGroup.vue
@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import type { ComboboxGroupProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ComboboxGroup, ComboboxLabel } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ComboboxGroupProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ComboboxGroup, ComboboxLabel } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ComboboxGroupProps & {
-  class?: HTMLAttributes["class"]
-  heading?: string
-}>()
+const props = defineProps<
+  ComboboxGroupProps & {
+    class?: HTMLAttributes["class"];
+    heading?: string;
+  }
+>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/combobox/ComboboxInput.vue b/code/fms/fms-vue/src/components/ui/combobox/ComboboxInput.vue
index b3bbde6b..773ff397 100644
--- a/code/fms/fms-vue/src/components/ui/combobox/ComboboxInput.vue
+++ b/code/fms/fms-vue/src/components/ui/combobox/ComboboxInput.vue
@@ -1,39 +1,39 @@
 <script setup lang="ts">
-import type { ComboboxInputEmits, ComboboxInputProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { SearchIcon } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ComboboxInput, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ComboboxInputEmits, ComboboxInputProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { SearchIcon } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ComboboxInput, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = defineProps<ComboboxInputProps & {
-  class?: HTMLAttributes["class"]
-}>()
+const props = defineProps<
+  ComboboxInputProps & {
+    class?: HTMLAttributes["class"];
+  }
+>();
 
-const emits = defineEmits<ComboboxInputEmits>()
+const emits = defineEmits<ComboboxInputEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <div
-    data-slot="command-input-wrapper"
-    class="flex h-9 items-center gap-2 border-b px-3"
-  >
+  <div data-slot="command-input-wrapper" class="flex h-9 items-center gap-2 border-b px-3">
     <SearchIcon class="size-4 shrink-0 opacity-50" />
     <ComboboxInput
       data-slot="command-input"
-      :class="cn(
-        'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
-        props.class,
-      )"
-
+      :class="
+        cn(
+          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          props.class,
+        )
+      "
       v-bind="{ ...$attrs, ...forwarded }"
     >
       <slot />
diff --git a/code/fms/fms-vue/src/components/ui/combobox/ComboboxItem.vue b/code/fms/fms-vue/src/components/ui/combobox/ComboboxItem.vue
index a58a53d6..17356f73 100644
--- a/code/fms/fms-vue/src/components/ui/combobox/ComboboxItem.vue
+++ b/code/fms/fms-vue/src/components/ui/combobox/ComboboxItem.vue
@@ -1,23 +1,28 @@
 <script setup lang="ts">
-import type { ComboboxItemEmits, ComboboxItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ComboboxItem, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ComboboxItemEmits, ComboboxItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ComboboxItem, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<ComboboxItemEmits>()
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<ComboboxItemEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <ComboboxItem
     data-slot="combobox-item"
     v-bind="forwarded"
-    :class="cn(`data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)"
+    :class="
+      cn(
+        `data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        props.class,
+      )
+    "
   >
     <slot />
   </ComboboxItem>
diff --git a/code/fms/fms-vue/src/components/ui/combobox/ComboboxItemIndicator.vue b/code/fms/fms-vue/src/components/ui/combobox/ComboboxItemIndicator.vue
index 2e1b07ca..6fd49319 100644
--- a/code/fms/fms-vue/src/components/ui/combobox/ComboboxItemIndicator.vue
+++ b/code/fms/fms-vue/src/components/ui/combobox/ComboboxItemIndicator.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { ComboboxItemIndicatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ComboboxItemIndicator, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ComboboxItemIndicatorProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ComboboxItemIndicator, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ComboboxItemIndicatorProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<ComboboxItemIndicatorProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardProps(delegatedProps)
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/combobox/ComboboxList.vue b/code/fms/fms-vue/src/components/ui/combobox/ComboboxList.vue
index 64c9a845..6843263b 100644
--- a/code/fms/fms-vue/src/components/ui/combobox/ComboboxList.vue
+++ b/code/fms/fms-vue/src/components/ui/combobox/ComboboxList.vue
@@ -1,23 +1,26 @@
 <script setup lang="ts">
-import type { ComboboxContentEmits, ComboboxContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ComboboxContent, ComboboxPortal, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ComboboxContentEmits, ComboboxContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ComboboxContent, ComboboxPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes["class"] }>(), {
-  position: "popper",
-  align: "center",
-  sideOffset: 4,
-})
-const emits = defineEmits<ComboboxContentEmits>()
+const props = withDefaults(
+  defineProps<ComboboxContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    position: "popper",
+    align: "center",
+    sideOffset: 4,
+  },
+);
+const emits = defineEmits<ComboboxContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const delegatedProps = reactiveOmit(props, "class");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -25,7 +28,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <ComboboxContent
       data-slot="combobox-list"
       v-bind="{ ...$attrs, ...forwarded }"
-      :class="cn('z-50 w-[200px] rounded-md border bg-popover text-popover-foreground origin-(--reka-combobox-content-transform-origin) overflow-hidden shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+      :class="
+        cn(
+          'z-50 w-[200px] rounded-md border bg-popover text-popover-foreground origin-(--reka-combobox-content-transform-origin) overflow-hidden shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
     >
       <slot />
     </ComboboxContent>
diff --git a/code/fms/fms-vue/src/components/ui/combobox/ComboboxSeparator.vue b/code/fms/fms-vue/src/components/ui/combobox/ComboboxSeparator.vue
index 05d648b4..1925a91e 100644
--- a/code/fms/fms-vue/src/components/ui/combobox/ComboboxSeparator.vue
+++ b/code/fms/fms-vue/src/components/ui/combobox/ComboboxSeparator.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { ComboboxSeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ComboboxSeparator } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ComboboxSeparatorProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ComboboxSeparator } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/combobox/ComboboxTrigger.vue b/code/fms/fms-vue/src/components/ui/combobox/ComboboxTrigger.vue
index 28b099aa..5aa5e906 100644
--- a/code/fms/fms-vue/src/components/ui/combobox/ComboboxTrigger.vue
+++ b/code/fms/fms-vue/src/components/ui/combobox/ComboboxTrigger.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { ComboboxTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ComboboxTrigger, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ComboboxTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ComboboxTrigger, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ComboboxTriggerProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<ComboboxTriggerProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardProps(delegatedProps)
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/combobox/ComboboxViewport.vue b/code/fms/fms-vue/src/components/ui/combobox/ComboboxViewport.vue
index 684085cc..a3d11f4e 100644
--- a/code/fms/fms-vue/src/components/ui/combobox/ComboboxViewport.vue
+++ b/code/fms/fms-vue/src/components/ui/combobox/ComboboxViewport.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { ComboboxViewportProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ComboboxViewport, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ComboboxViewportProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ComboboxViewport, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ComboboxViewportProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<ComboboxViewportProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardProps(delegatedProps)
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/combobox/index.ts b/code/fms/fms-vue/src/components/ui/combobox/index.ts
index 5e599b96..be650a63 100644
--- a/code/fms/fms-vue/src/components/ui/combobox/index.ts
+++ b/code/fms/fms-vue/src/components/ui/combobox/index.ts
@@ -1,13 +1,13 @@
-export { default as Combobox } from "./Combobox.vue"
-export { default as ComboboxAnchor } from "./ComboboxAnchor.vue"
-export { default as ComboboxEmpty } from "./ComboboxEmpty.vue"
-export { default as ComboboxGroup } from "./ComboboxGroup.vue"
-export { default as ComboboxInput } from "./ComboboxInput.vue"
-export { default as ComboboxItem } from "./ComboboxItem.vue"
-export { default as ComboboxItemIndicator } from "./ComboboxItemIndicator.vue"
-export { default as ComboboxList } from "./ComboboxList.vue"
-export { default as ComboboxSeparator } from "./ComboboxSeparator.vue"
-export { default as ComboboxTrigger } from "./ComboboxTrigger.vue"
-export { default as ComboboxViewport } from "./ComboboxViewport.vue"
+export { default as Combobox } from "./Combobox.vue";
+export { default as ComboboxAnchor } from "./ComboboxAnchor.vue";
+export { default as ComboboxEmpty } from "./ComboboxEmpty.vue";
+export { default as ComboboxGroup } from "./ComboboxGroup.vue";
+export { default as ComboboxInput } from "./ComboboxInput.vue";
+export { default as ComboboxItem } from "./ComboboxItem.vue";
+export { default as ComboboxItemIndicator } from "./ComboboxItemIndicator.vue";
+export { default as ComboboxList } from "./ComboboxList.vue";
+export { default as ComboboxSeparator } from "./ComboboxSeparator.vue";
+export { default as ComboboxTrigger } from "./ComboboxTrigger.vue";
+export { default as ComboboxViewport } from "./ComboboxViewport.vue";
 
-export { ComboboxCancel } from "reka-ui"
+export { ComboboxCancel } from "reka-ui";
diff --git a/code/fms/fms-vue/src/components/ui/command/Command.vue b/code/fms/fms-vue/src/components/ui/command/Command.vue
index ff8c381d..8e8c3829 100644
--- a/code/fms/fms-vue/src/components/ui/command/Command.vue
+++ b/code/fms/fms-vue/src/components/ui/command/Command.vue
@@ -1,27 +1,27 @@
 <script setup lang="ts">
-import type { ListboxRootEmits, ListboxRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ListboxRoot, useFilter, useForwardPropsEmits } from "reka-ui"
-import { reactive, ref, watch } from "vue"
-import { cn } from "@/lib/utils"
-import { provideCommandContext } from "."
+import type { ListboxRootEmits, ListboxRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ListboxRoot, useFilter, useForwardPropsEmits } from "reka-ui";
+import { reactive, ref, watch } from "vue";
+import { cn } from "@/lib/utils";
+import { provideCommandContext } from ".";
 
 const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes["class"] }>(), {
   modelValue: "",
   highlightOnHover: true,
-})
+});
 
-const emits = defineEmits<ListboxRootEmits>()
+const emits = defineEmits<ListboxRootEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
-const allItems = ref<Map<string, string>>(new Map())
-const allGroups = ref<Map<string, Set<string>>>(new Map())
+const allItems = ref<Map<string, string>>(new Map());
+const allGroups = ref<Map<string, Set<string>>>(new Map());
 
-const { contains } = useFilter({ sensitivity: "base" })
+const { contains } = useFilter({ sensitivity: "base" });
 const filterState = reactive({
   search: "",
   filtered: {
@@ -32,56 +32,63 @@ const filterState = reactive({
     /** Set of groups with at least one visible item. */
     groups: new Set() as Set<string>,
   },
-})
+});
 
 function filterItems() {
   if (!filterState.search) {
-    filterState.filtered.count = allItems.value.size
+    filterState.filtered.count = allItems.value.size;
     // Do nothing, each item will know to show itself because search is empty
-    return
+    return;
   }
 
   // Reset the groups
-  filterState.filtered.groups = new Set()
-  let itemCount = 0
+  filterState.filtered.groups = new Set();
+  let itemCount = 0;
 
   // Check which items should be included
   for (const [id, value] of allItems.value) {
-    const score = contains(value, filterState.search)
-    filterState.filtered.items.set(id, score ? 1 : 0)
-    if (score)
-      itemCount++
+    const score = contains(value, filterState.search);
+    filterState.filtered.items.set(id, score ? 1 : 0);
+    if (score) itemCount++;
   }
 
   // Check which groups have at least 1 item shown
   for (const [groupId, group] of allGroups.value) {
     for (const itemId of group) {
       if (filterState.filtered.items.get(itemId)! > 0) {
-        filterState.filtered.groups.add(groupId)
-        break
+        filterState.filtered.groups.add(groupId);
+        break;
       }
     }
   }
 
-  filterState.filtered.count = itemCount
+  filterState.filtered.count = itemCount;
 }
 
-watch(() => filterState.search, () => {
-  filterItems()
-})
+watch(
+  () => filterState.search,
+  () => {
+    filterItems();
+  },
+);
 
 provideCommandContext({
   allItems,
   allGroups,
   filterState,
-})
+});
 </script>
 
 <template>
   <ListboxRoot
     data-slot="command"
     v-bind="forwarded"
-    :class="cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)"
+    :class="
+      cn(
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        props.class,
+      )
+    "
   >
     <slot />
   </ListboxRoot>
diff --git a/code/fms/fms-vue/src/components/ui/command/CommandDialog.vue b/code/fms/fms-vue/src/components/ui/command/CommandDialog.vue
index 74397360..0870b58c 100644
--- a/code/fms/fms-vue/src/components/ui/command/CommandDialog.vue
+++ b/code/fms/fms-vue/src/components/ui/command/CommandDialog.vue
@@ -1,24 +1,35 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from "reka-ui"
-import { useForwardPropsEmits } from "reka-ui"
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
-import Command from "./Command.vue"
+import type { DialogRootEmits, DialogRootProps } from "reka-ui";
+import { useForwardPropsEmits } from "reka-ui";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import Command from "./Command.vue";
 
-const props = withDefaults(defineProps<DialogRootProps & {
-  title?: string
-  description?: string
-}>(), {
-  title: "Command Palette",
-  description: "Search for a command to run...",
-})
-const emits = defineEmits<DialogRootEmits>()
+const props = withDefaults(
+  defineProps<
+    DialogRootProps & {
+      title?: string;
+      description?: string;
+    }
+  >(),
+  {
+    title: "Command Palette",
+    description: "Search for a command to run...",
+  },
+);
+const emits = defineEmits<DialogRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
   <Dialog v-slot="slotProps" v-bind="forwarded">
-    <DialogContent class="overflow-hidden p-0 ">
+    <DialogContent class="overflow-hidden p-0">
       <DialogHeader class="sr-only">
         <DialogTitle>{{ title }}</DialogTitle>
         <DialogDescription>{{ description }}</DialogDescription>
diff --git a/code/fms/fms-vue/src/components/ui/command/CommandEmpty.vue b/code/fms/fms-vue/src/components/ui/command/CommandEmpty.vue
index 489c4064..b8e3ba79 100644
--- a/code/fms/fms-vue/src/components/ui/command/CommandEmpty.vue
+++ b/code/fms/fms-vue/src/components/ui/command/CommandEmpty.vue
@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Primitive } from "reka-ui"
-import { computed } from "vue"
-import { cn } from "@/lib/utils"
-import { useCommand } from "."
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { Primitive } from "reka-ui";
+import { computed } from "vue";
+import { cn } from "@/lib/utils";
+import { useCommand } from ".";
 
-const props = defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const { filterState } = useCommand()
-const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
-)
+const { filterState } = useCommand();
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0);
 </script>
 
 <template>
   <Primitive
     v-if="isRender"
     data-slot="command-empty"
-    v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)"
+    v-bind="delegatedProps"
+    :class="cn('py-6 text-center text-sm', props.class)"
   >
     <slot />
   </Primitive>
diff --git a/code/fms/fms-vue/src/components/ui/command/CommandGroup.vue b/code/fms/fms-vue/src/components/ui/command/CommandGroup.vue
index a5dd55e3..01a63382 100644
--- a/code/fms/fms-vue/src/components/ui/command/CommandGroup.vue
+++ b/code/fms/fms-vue/src/components/ui/command/CommandGroup.vue
@@ -1,32 +1,33 @@
 <script setup lang="ts">
-import type { ListboxGroupProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ListboxGroup, ListboxGroupLabel, useId } from "reka-ui"
-import { computed, onMounted, onUnmounted } from "vue"
-import { cn } from "@/lib/utils"
-import { provideCommandGroupContext, useCommand } from "."
+import type { ListboxGroupProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ListboxGroup, ListboxGroupLabel, useId } from "reka-ui";
+import { computed, onMounted, onUnmounted } from "vue";
+import { cn } from "@/lib/utils";
+import { provideCommandGroupContext, useCommand } from ".";
 
-const props = defineProps<ListboxGroupProps & {
-  class?: HTMLAttributes["class"]
-  heading?: string
-}>()
+const props = defineProps<
+  ListboxGroupProps & {
+    class?: HTMLAttributes["class"];
+    heading?: string;
+  }
+>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const { allGroups, filterState } = useCommand()
-const id = useId()
+const { allGroups, filterState } = useCommand();
+const id = useId();
 
-const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+const isRender = computed(() => (!filterState.search ? true : filterState.filtered.groups.has(id)));
 
-provideCommandGroupContext({ id })
+provideCommandGroupContext({ id });
 onMounted(() => {
-  if (!allGroups.value.has(id))
-    allGroups.value.set(id, new Set())
-})
+  if (!allGroups.value.has(id)) allGroups.value.set(id, new Set());
+});
 onUnmounted(() => {
-  allGroups.value.delete(id)
-})
+  allGroups.value.delete(id);
+});
 </script>
 
 <template>
@@ -37,7 +38,11 @@ onUnmounted(() => {
     :class="cn('text-foreground overflow-hidden p-1', props.class)"
     :hidden="isRender ? undefined : true"
   >
-    <ListboxGroupLabel v-if="heading" data-slot="command-group-heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+    <ListboxGroupLabel
+      v-if="heading"
+      data-slot="command-group-heading"
+      class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
+    >
       {{ heading }}
     </ListboxGroupLabel>
     <slot />
diff --git a/code/fms/fms-vue/src/components/ui/command/CommandInput.vue b/code/fms/fms-vue/src/components/ui/command/CommandInput.vue
index d471420d..4166b2bc 100644
--- a/code/fms/fms-vue/src/components/ui/command/CommandInput.vue
+++ b/code/fms/fms-vue/src/components/ui/command/CommandInput.vue
@@ -1,39 +1,43 @@
 <script setup lang="ts">
-import type { ListboxFilterProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Search } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ListboxFilter, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { useCommand } from "."
+import type { ListboxFilterProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Search } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ListboxFilter, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { useCommand } from ".";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = defineProps<ListboxFilterProps & {
-  class?: HTMLAttributes["class"]
-}>()
+const props = defineProps<
+  ListboxFilterProps & {
+    class?: HTMLAttributes["class"];
+  }
+>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 
-const { filterState } = useCommand()
+const { filterState } = useCommand();
 </script>
 
 <template>
-  <div
-    data-slot="command-input-wrapper"
-    class="flex h-9 items-center gap-2 border-b px-3"
-  >
+  <div data-slot="command-input-wrapper" class="flex h-9 items-center gap-2 border-b px-3">
     <Search class="size-4 shrink-0 opacity-50" />
     <ListboxFilter
       v-bind="{ ...forwardedProps, ...$attrs }"
       v-model="filterState.search"
       data-slot="command-input"
       auto-focus
-      :class="cn('placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+      :class="
+        cn(
+          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          props.class,
+        )
+      "
     />
   </div>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/command/CommandItem.vue b/code/fms/fms-vue/src/components/ui/command/CommandItem.vue
index 4e709c45..129a41c4 100644
--- a/code/fms/fms-vue/src/components/ui/command/CommandItem.vue
+++ b/code/fms/fms-vue/src/components/ui/command/CommandItem.vue
@@ -1,62 +1,59 @@
 <script setup lang="ts">
-import type { ListboxItemEmits, ListboxItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit, useCurrentElement } from "@vueuse/core"
-import { ListboxItem, useForwardPropsEmits, useId } from "reka-ui"
-import { computed, onMounted, onUnmounted, ref } from "vue"
-import { cn } from "@/lib/utils"
-import { useCommand, useCommandGroup } from "."
+import type { ListboxItemEmits, ListboxItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit, useCurrentElement } from "@vueuse/core";
+import { ListboxItem, useForwardPropsEmits, useId } from "reka-ui";
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { cn } from "@/lib/utils";
+import { useCommand, useCommandGroup } from ".";
 
-const props = defineProps<ListboxItemProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<ListboxItemEmits>()
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<ListboxItemEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
-const id = useId()
-const { filterState, allItems, allGroups } = useCommand()
-const groupContext = useCommandGroup()
+const id = useId();
+const { filterState, allItems, allGroups } = useCommand();
+const groupContext = useCommandGroup();
 
 const isRender = computed(() => {
   if (!filterState.search) {
-    return true
-  }
-  else {
-    const filteredCurrentItem = filterState.filtered.items.get(id)
+    return true;
+  } else {
+    const filteredCurrentItem = filterState.filtered.items.get(id);
     // If the filtered items is undefined means not in the all times map yet
     // Do the first render to add into the map
     if (filteredCurrentItem === undefined) {
-      return true
+      return true;
     }
 
     // Check with filter
-    return filteredCurrentItem > 0
+    return filteredCurrentItem > 0;
   }
-})
+});
 
-const itemRef = ref()
-const currentElement = useCurrentElement(itemRef)
+const itemRef = ref();
+const currentElement = useCurrentElement(itemRef);
 onMounted(() => {
-  if (!(currentElement.value instanceof HTMLElement))
-    return
+  if (!(currentElement.value instanceof HTMLElement)) return;
 
   // textValue to perform filter
-  allItems.value.set(id, currentElement.value.textContent ?? (props.value?.toString() ?? ""))
+  allItems.value.set(id, currentElement.value.textContent ?? props.value?.toString() ?? "");
 
-  const groupId = groupContext?.id
+  const groupId = groupContext?.id;
   if (groupId) {
     if (!allGroups.value.has(groupId)) {
-      allGroups.value.set(groupId, new Set([id]))
-    }
-    else {
-      allGroups.value.get(groupId)?.add(id)
+      allGroups.value.set(groupId, new Set([id]));
+    } else {
+      allGroups.value.get(groupId)?.add(id);
     }
   }
-})
+});
 onUnmounted(() => {
-  allItems.value.delete(id)
-})
+  allItems.value.delete(id);
+});
 </script>
 
 <template>
@@ -66,10 +63,17 @@ onUnmounted(() => {
     :id="id"
     ref="itemRef"
     data-slot="command-item"
-    :class="cn(`data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)"
-    @select="() => {
-      filterState.search = ''
-    }"
+    :class="
+      cn(
+        `data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        props.class,
+      )
+    "
+    @select="
+      () => {
+        filterState.search = '';
+      }
+    "
   >
     <slot />
   </ListboxItem>
diff --git a/code/fms/fms-vue/src/components/ui/command/CommandList.vue b/code/fms/fms-vue/src/components/ui/command/CommandList.vue
index 928d2f0f..af25ae58 100644
--- a/code/fms/fms-vue/src/components/ui/command/CommandList.vue
+++ b/code/fms/fms-vue/src/components/ui/command/CommandList.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { ListboxContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ListboxContent, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ListboxContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ListboxContent, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ListboxContentProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<ListboxContentProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardProps(delegatedProps)
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/command/CommandSeparator.vue b/code/fms/fms-vue/src/components/ui/command/CommandSeparator.vue
index 6def19ec..1c3a5df1 100644
--- a/code/fms/fms-vue/src/components/ui/command/CommandSeparator.vue
+++ b/code/fms/fms-vue/src/components/ui/command/CommandSeparator.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { SeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Separator } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { SeparatorProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { Separator } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/command/CommandShortcut.vue b/code/fms/fms-vue/src/components/ui/command/CommandShortcut.vue
index e1d0e07a..94c77560 100644
--- a/code/fms/fms-vue/src/components/ui/command/CommandShortcut.vue
+++ b/code/fms/fms-vue/src/components/ui/command/CommandShortcut.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/command/index.ts b/code/fms/fms-vue/src/components/ui/command/index.ts
index af18933b..88aeb17b 100644
--- a/code/fms/fms-vue/src/components/ui/command/index.ts
+++ b/code/fms/fms-vue/src/components/ui/command/index.ts
@@ -1,25 +1,25 @@
-import type { Ref } from "vue"
-import { createContext } from "reka-ui"
+import type { Ref } from "vue";
+import { createContext } from "reka-ui";
 
-export { default as Command } from "./Command.vue"
-export { default as CommandDialog } from "./CommandDialog.vue"
-export { default as CommandEmpty } from "./CommandEmpty.vue"
-export { default as CommandGroup } from "./CommandGroup.vue"
-export { default as CommandInput } from "./CommandInput.vue"
-export { default as CommandItem } from "./CommandItem.vue"
-export { default as CommandList } from "./CommandList.vue"
-export { default as CommandSeparator } from "./CommandSeparator.vue"
-export { default as CommandShortcut } from "./CommandShortcut.vue"
+export { default as Command } from "./Command.vue";
+export { default as CommandDialog } from "./CommandDialog.vue";
+export { default as CommandEmpty } from "./CommandEmpty.vue";
+export { default as CommandGroup } from "./CommandGroup.vue";
+export { default as CommandInput } from "./CommandInput.vue";
+export { default as CommandItem } from "./CommandItem.vue";
+export { default as CommandList } from "./CommandList.vue";
+export { default as CommandSeparator } from "./CommandSeparator.vue";
+export { default as CommandShortcut } from "./CommandShortcut.vue";
 
 export const [useCommand, provideCommandContext] = createContext<{
-  allItems: Ref<Map<string, string>>
-  allGroups: Ref<Map<string, Set<string>>>
+  allItems: Ref<Map<string, string>>;
+  allGroups: Ref<Map<string, Set<string>>>;
   filterState: {
-    search: string
-    filtered: { count: number, items: Map<string, number>, groups: Set<string> }
-  }
-}>("Command")
+    search: string;
+    filtered: { count: number; items: Map<string, number>; groups: Set<string> };
+  };
+}>("Command");
 
 export const [useCommandGroup, provideCommandGroupContext] = createContext<{
-  id?: string
-}>("CommandGroup")
+  id?: string;
+}>("CommandGroup");
diff --git a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenu.vue b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenu.vue
index b4c6c093..31ce27cf 100644
--- a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenu.vue
+++ b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenu.vue
@@ -1,18 +1,15 @@
 <script setup lang="ts">
-import type { ContextMenuRootEmits, ContextMenuRootProps } from "reka-ui"
-import { ContextMenuRoot, useForwardPropsEmits } from "reka-ui"
+import type { ContextMenuRootEmits, ContextMenuRootProps } from "reka-ui";
+import { ContextMenuRoot, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<ContextMenuRootProps>()
-const emits = defineEmits<ContextMenuRootEmits>()
+const props = defineProps<ContextMenuRootProps>();
+const emits = defineEmits<ContextMenuRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <ContextMenuRoot
-    data-slot="context-menu"
-    v-bind="forwarded"
-  >
+  <ContextMenuRoot data-slot="context-menu" v-bind="forwarded">
     <slot />
   </ContextMenuRoot>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuCheckboxItem.vue b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuCheckboxItem.vue
index a1efa124..026eb2c2 100644
--- a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -1,31 +1,29 @@
 <script setup lang="ts">
-import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Check } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  ContextMenuCheckboxItem,
-  ContextMenuItemIndicator,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Check } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ContextMenuCheckboxItem, ContextMenuItemIndicator, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<ContextMenuCheckboxItemEmits>()
+const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<ContextMenuCheckboxItemEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <ContextMenuCheckboxItem
     data-slot="context-menu-checkbox-item"
     v-bind="forwarded"
-    :class="cn(
-      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
+    :class="
+      cn(
+        `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        props.class,
+      )
+    "
   >
     <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <ContextMenuItemIndicator>
diff --git a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuContent.vue b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuContent.vue
index 2fbc5568..0eb81db5 100644
--- a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuContent.vue
+++ b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuContent.vue
@@ -1,24 +1,20 @@
 <script setup lang="ts">
-import type { ContextMenuContentEmits, ContextMenuContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  ContextMenuContent,
-  ContextMenuPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ContextMenuContentEmits, ContextMenuContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ContextMenuContent, ContextMenuPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<ContextMenuContentEmits>()
+const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<ContextMenuContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -26,10 +22,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <ContextMenuContent
       data-slot="context-menu-content"
       v-bind="{ ...$attrs, ...forwarded }"
-      :class="cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
-        props.class,
-      )"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          props.class,
+        )
+      "
     >
       <slot />
     </ContextMenuContent>
diff --git a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuGroup.vue b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuGroup.vue
index 9af9b266..863b4460 100644
--- a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuGroup.vue
+++ b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuGroup.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { ContextMenuGroupProps } from "reka-ui"
-import { ContextMenuGroup } from "reka-ui"
+import type { ContextMenuGroupProps } from "reka-ui";
+import { ContextMenuGroup } from "reka-ui";
 
-const props = defineProps<ContextMenuGroupProps>()
+const props = defineProps<ContextMenuGroupProps>();
 </script>
 
 <template>
-  <ContextMenuGroup
-    data-slot="context-menu-group"
-    v-bind="props"
-  >
+  <ContextMenuGroup data-slot="context-menu-group" v-bind="props">
     <slot />
   </ContextMenuGroup>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuItem.vue b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuItem.vue
index 673c4cbf..626aa0ec 100644
--- a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuItem.vue
+++ b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuItem.vue
@@ -1,25 +1,27 @@
 <script setup lang="ts">
-import type { ContextMenuItemEmits, ContextMenuItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  ContextMenuItem,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ContextMenuItemEmits, ContextMenuItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ContextMenuItem, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = withDefaults(defineProps<ContextMenuItemProps & {
-  class?: HTMLAttributes["class"]
-  inset?: boolean
-  variant?: "default" | "destructive"
-}>(), {
-  variant: "default",
-})
-const emits = defineEmits<ContextMenuItemEmits>()
+const props = withDefaults(
+  defineProps<
+    ContextMenuItemProps & {
+      class?: HTMLAttributes["class"];
+      inset?: boolean;
+      variant?: "default" | "destructive";
+    }
+  >(),
+  {
+    variant: "default",
+  },
+);
+const emits = defineEmits<ContextMenuItemEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -28,10 +30,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     :data-inset="inset ? '' : undefined"
     :data-variant="variant"
     v-bind="forwarded"
-    :class="cn(
-      `focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
+    :class="
+      cn(
+        `focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        props.class,
+      )
+    "
   >
     <slot />
   </ContextMenuItem>
diff --git a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuLabel.vue b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuLabel.vue
index 80d05195..b639f81e 100644
--- a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuLabel.vue
+++ b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuLabel.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import type { ContextMenuLabelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ContextMenuLabel } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ContextMenuLabelProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ContextMenuLabel } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+const props = defineProps<
+  ContextMenuLabelProps & { class?: HTMLAttributes["class"]; inset?: boolean }
+>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuPortal.vue b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuPortal.vue
index c50a2b33..d7271340 100644
--- a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuPortal.vue
+++ b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuPortal.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { ContextMenuPortalProps } from "reka-ui"
-import { ContextMenuPortal } from "reka-ui"
+import type { ContextMenuPortalProps } from "reka-ui";
+import { ContextMenuPortal } from "reka-ui";
 
-const props = defineProps<ContextMenuPortalProps>()
+const props = defineProps<ContextMenuPortalProps>();
 </script>
 
 <template>
-  <ContextMenuPortal
-    data-slot="context-menu-portal"
-    v-bind="props"
-  >
+  <ContextMenuPortal data-slot="context-menu-portal" v-bind="props">
     <slot />
   </ContextMenuPortal>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuRadioGroup.vue b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuRadioGroup.vue
index 25372ed8..97eeabd2 100644
--- a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuRadioGroup.vue
+++ b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuRadioGroup.vue
@@ -1,21 +1,15 @@
 <script setup lang="ts">
-import type { ContextMenuRadioGroupEmits, ContextMenuRadioGroupProps } from "reka-ui"
-import {
-  ContextMenuRadioGroup,
-  useForwardPropsEmits,
-} from "reka-ui"
+import type { ContextMenuRadioGroupEmits, ContextMenuRadioGroupProps } from "reka-ui";
+import { ContextMenuRadioGroup, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<ContextMenuRadioGroupProps>()
-const emits = defineEmits<ContextMenuRadioGroupEmits>()
+const props = defineProps<ContextMenuRadioGroupProps>();
+const emits = defineEmits<ContextMenuRadioGroupEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <ContextMenuRadioGroup
-    data-slot="context-menu-radio-group"
-    v-bind="forwarded"
-  >
+  <ContextMenuRadioGroup data-slot="context-menu-radio-group" v-bind="forwarded">
     <slot />
   </ContextMenuRadioGroup>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuRadioItem.vue b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuRadioItem.vue
index 770b4a02..5b491901 100644
--- a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuRadioItem.vue
+++ b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuRadioItem.vue
@@ -1,31 +1,29 @@
 <script setup lang="ts">
-import type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Circle } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  ContextMenuItemIndicator,
-  ContextMenuRadioItem,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Circle } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ContextMenuItemIndicator, ContextMenuRadioItem, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<ContextMenuRadioItemEmits>()
+const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<ContextMenuRadioItemEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <ContextMenuRadioItem
     data-slot="context-menu-radio-item"
     v-bind="forwarded"
-    :class="cn(
-      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
+    :class="
+      cn(
+        `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        props.class,
+      )
+    "
   >
     <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <ContextMenuItemIndicator>
diff --git a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuSeparator.vue b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuSeparator.vue
index d7f0c60f..90140686 100644
--- a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuSeparator.vue
+++ b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuSeparator.vue
@@ -1,15 +1,13 @@
 <script setup lang="ts">
-import type { ContextMenuSeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  ContextMenuSeparator,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ContextMenuSeparatorProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ContextMenuSeparator } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuShortcut.vue b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuShortcut.vue
index 2631d682..3ed880ee 100644
--- a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuShortcut.vue
+++ b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuShortcut.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuSub.vue b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuSub.vue
index aeb1835c..31bc7e0b 100644
--- a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuSub.vue
+++ b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuSub.vue
@@ -1,21 +1,15 @@
 <script setup lang="ts">
-import type { ContextMenuSubEmits, ContextMenuSubProps } from "reka-ui"
-import {
-  ContextMenuSub,
-  useForwardPropsEmits,
-} from "reka-ui"
+import type { ContextMenuSubEmits, ContextMenuSubProps } from "reka-ui";
+import { ContextMenuSub, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<ContextMenuSubProps>()
-const emits = defineEmits<ContextMenuSubEmits>()
+const props = defineProps<ContextMenuSubProps>();
+const emits = defineEmits<ContextMenuSubEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <ContextMenuSub
-    data-slot="context-menu-sub"
-    v-bind="forwarded"
-  >
+  <ContextMenuSub data-slot="context-menu-sub" v-bind="forwarded">
     <slot />
   </ContextMenuSub>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuSubContent.vue b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuSubContent.vue
index c4fcafda..69e2f431 100644
--- a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuSubContent.vue
+++ b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuSubContent.vue
@@ -1,19 +1,16 @@
 <script setup lang="ts">
-import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  ContextMenuSubContent,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ContextMenuSubContent, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<DropdownMenuSubContentEmits>()
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<DropdownMenuSubContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuSubTrigger.vue b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuSubTrigger.vue
index 2c1cd70b..f9733378 100644
--- a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuSubTrigger.vue
+++ b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuSubTrigger.vue
@@ -1,19 +1,18 @@
 <script setup lang="ts">
-import type { ContextMenuSubTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { ChevronRight } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  ContextMenuSubTrigger,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ContextMenuSubTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { ChevronRight } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ContextMenuSubTrigger, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+const props = defineProps<
+  ContextMenuSubTriggerProps & { class?: HTMLAttributes["class"]; inset?: boolean }
+>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
@@ -21,10 +20,12 @@ const forwardedProps = useForwardProps(delegatedProps)
     data-slot="context-menu-sub-trigger"
     :data-inset="inset ? '' : undefined"
     v-bind="forwardedProps"
-    :class="cn(
-      `focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
+    :class="
+      cn(
+        `focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        props.class,
+      )
+    "
   >
     <slot />
     <ChevronRight class="ml-auto" />
diff --git a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuTrigger.vue b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuTrigger.vue
index 70a8143f..a9fa50c3 100644
--- a/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuTrigger.vue
+++ b/code/fms/fms-vue/src/components/ui/context-menu/ContextMenuTrigger.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import type { ContextMenuTriggerProps } from "reka-ui"
-import { ContextMenuTrigger, useForwardProps } from "reka-ui"
+import type { ContextMenuTriggerProps } from "reka-ui";
+import { ContextMenuTrigger, useForwardProps } from "reka-ui";
 
-const props = defineProps<ContextMenuTriggerProps>()
+const props = defineProps<ContextMenuTriggerProps>();
 
-const forwardedProps = useForwardProps(props)
+const forwardedProps = useForwardProps(props);
 </script>
 
 <template>
-  <ContextMenuTrigger
-    data-slot="context-menu-trigger"
-    v-bind="forwardedProps"
-  >
+  <ContextMenuTrigger data-slot="context-menu-trigger" v-bind="forwardedProps">
     <slot />
   </ContextMenuTrigger>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/context-menu/index.ts b/code/fms/fms-vue/src/components/ui/context-menu/index.ts
index 5919fd37..947b5ba5 100644
--- a/code/fms/fms-vue/src/components/ui/context-menu/index.ts
+++ b/code/fms/fms-vue/src/components/ui/context-menu/index.ts
@@ -1,14 +1,14 @@
-export { default as ContextMenu } from "./ContextMenu.vue"
-export { default as ContextMenuCheckboxItem } from "./ContextMenuCheckboxItem.vue"
-export { default as ContextMenuContent } from "./ContextMenuContent.vue"
-export { default as ContextMenuGroup } from "./ContextMenuGroup.vue"
-export { default as ContextMenuItem } from "./ContextMenuItem.vue"
-export { default as ContextMenuLabel } from "./ContextMenuLabel.vue"
-export { default as ContextMenuRadioGroup } from "./ContextMenuRadioGroup.vue"
-export { default as ContextMenuRadioItem } from "./ContextMenuRadioItem.vue"
-export { default as ContextMenuSeparator } from "./ContextMenuSeparator.vue"
-export { default as ContextMenuShortcut } from "./ContextMenuShortcut.vue"
-export { default as ContextMenuSub } from "./ContextMenuSub.vue"
-export { default as ContextMenuSubContent } from "./ContextMenuSubContent.vue"
-export { default as ContextMenuSubTrigger } from "./ContextMenuSubTrigger.vue"
-export { default as ContextMenuTrigger } from "./ContextMenuTrigger.vue"
+export { default as ContextMenu } from "./ContextMenu.vue";
+export { default as ContextMenuCheckboxItem } from "./ContextMenuCheckboxItem.vue";
+export { default as ContextMenuContent } from "./ContextMenuContent.vue";
+export { default as ContextMenuGroup } from "./ContextMenuGroup.vue";
+export { default as ContextMenuItem } from "./ContextMenuItem.vue";
+export { default as ContextMenuLabel } from "./ContextMenuLabel.vue";
+export { default as ContextMenuRadioGroup } from "./ContextMenuRadioGroup.vue";
+export { default as ContextMenuRadioItem } from "./ContextMenuRadioItem.vue";
+export { default as ContextMenuSeparator } from "./ContextMenuSeparator.vue";
+export { default as ContextMenuShortcut } from "./ContextMenuShortcut.vue";
+export { default as ContextMenuSub } from "./ContextMenuSub.vue";
+export { default as ContextMenuSubContent } from "./ContextMenuSubContent.vue";
+export { default as ContextMenuSubTrigger } from "./ContextMenuSubTrigger.vue";
+export { default as ContextMenuTrigger } from "./ContextMenuTrigger.vue";
diff --git a/code/fms/fms-vue/src/components/ui/dialog/Dialog.vue b/code/fms/fms-vue/src/components/ui/dialog/Dialog.vue
index ade52603..add07984 100644
--- a/code/fms/fms-vue/src/components/ui/dialog/Dialog.vue
+++ b/code/fms/fms-vue/src/components/ui/dialog/Dialog.vue
@@ -1,19 +1,15 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from "reka-ui"
-import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+import type { DialogRootEmits, DialogRootProps } from "reka-ui";
+import { DialogRoot, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<DialogRootProps>()
-const emits = defineEmits<DialogRootEmits>()
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <DialogRoot
-    v-slot="slotProps"
-    data-slot="dialog"
-    v-bind="forwarded"
-  >
+  <DialogRoot v-slot="slotProps" data-slot="dialog" v-bind="forwarded">
     <slot v-bind="slotProps" />
   </DialogRoot>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/dialog/DialogClose.vue b/code/fms/fms-vue/src/components/ui/dialog/DialogClose.vue
index c5fae043..98cd03c1 100644
--- a/code/fms/fms-vue/src/components/ui/dialog/DialogClose.vue
+++ b/code/fms/fms-vue/src/components/ui/dialog/DialogClose.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { DialogCloseProps } from "reka-ui"
-import { DialogClose } from "reka-ui"
+import type { DialogCloseProps } from "reka-ui";
+import { DialogClose } from "reka-ui";
 
-const props = defineProps<DialogCloseProps>()
+const props = defineProps<DialogCloseProps>();
 </script>
 
 <template>
-  <DialogClose
-    data-slot="dialog-close"
-    v-bind="props"
-  >
+  <DialogClose data-slot="dialog-close" v-bind="props">
     <slot />
   </DialogClose>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/dialog/DialogContent.vue b/code/fms/fms-vue/src/components/ui/dialog/DialogContent.vue
index 05172f0f..87be5269 100644
--- a/code/fms/fms-vue/src/components/ui/dialog/DialogContent.vue
+++ b/code/fms/fms-vue/src/components/ui/dialog/DialogContent.vue
@@ -1,29 +1,29 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { X } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DialogClose,
-  DialogContent,
-  DialogPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import DialogOverlay from "./DialogOverlay.vue"
+import type { DialogContentEmits, DialogContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { X } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+import DialogOverlay from "./DialogOverlay.vue";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = withDefaults(defineProps<DialogContentProps & { class?: HTMLAttributes["class"], showCloseButton?: boolean }>(), {
-  showCloseButton: true,
-})
-const emits = defineEmits<DialogContentEmits>()
+const props = withDefaults(
+  defineProps<
+    DialogContentProps & { class?: HTMLAttributes["class"]; showCloseButton?: boolean }
+  >(),
+  {
+    showCloseButton: true,
+  },
+);
+const emits = defineEmits<DialogContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -36,7 +36,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         cn(
           'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
           props.class,
-        )"
+        )
+      "
     >
       <slot />
 
diff --git a/code/fms/fms-vue/src/components/ui/dialog/DialogDescription.vue b/code/fms/fms-vue/src/components/ui/dialog/DialogDescription.vue
index f52e6555..367ed29d 100644
--- a/code/fms/fms-vue/src/components/ui/dialog/DialogDescription.vue
+++ b/code/fms/fms-vue/src/components/ui/dialog/DialogDescription.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { DialogDescriptionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogDescription, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DialogDescriptionProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DialogDescription, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/dialog/DialogFooter.vue b/code/fms/fms-vue/src/components/ui/dialog/DialogFooter.vue
index c7500a96..1c4f3f28 100644
--- a/code/fms/fms-vue/src/components/ui/dialog/DialogFooter.vue
+++ b/code/fms/fms-vue/src/components/ui/dialog/DialogFooter.vue
@@ -1,15 +1,18 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { DialogClose } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { Button } from '@/components/ui/button'
+import type { HTMLAttributes } from "vue";
+import { DialogClose } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
 
-const props = withDefaults(defineProps<{
-  class?: HTMLAttributes["class"]
-  showCloseButton?: boolean
-}>(), {
-  showCloseButton: false,
-})
+const props = withDefaults(
+  defineProps<{
+    class?: HTMLAttributes["class"];
+    showCloseButton?: boolean;
+  }>(),
+  {
+    showCloseButton: false,
+  },
+);
 </script>
 
 <template>
@@ -19,9 +22,7 @@ const props = withDefaults(defineProps<{
   >
     <slot />
     <DialogClose v-if="showCloseButton" as-child>
-      <Button variant="outline">
-        Close
-      </Button>
+      <Button variant="outline"> Close </Button>
     </DialogClose>
   </div>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/dialog/DialogHeader.vue b/code/fms/fms-vue/src/components/ui/dialog/DialogHeader.vue
index bfc3c646..041bdfab 100644
--- a/code/fms/fms-vue/src/components/ui/dialog/DialogHeader.vue
+++ b/code/fms/fms-vue/src/components/ui/dialog/DialogHeader.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/dialog/DialogOverlay.vue b/code/fms/fms-vue/src/components/ui/dialog/DialogOverlay.vue
index 77900772..b28b1efd 100644
--- a/code/fms/fms-vue/src/components/ui/dialog/DialogOverlay.vue
+++ b/code/fms/fms-vue/src/components/ui/dialog/DialogOverlay.vue
@@ -1,20 +1,25 @@
 <script setup lang="ts">
-import type { DialogOverlayProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogOverlay } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DialogOverlayProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DialogOverlay } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
   <DialogOverlay
     data-slot="dialog-overlay"
     v-bind="delegatedProps"
-    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+    :class="
+      cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+        props.class,
+      )
+    "
   >
     <slot />
   </DialogOverlay>
diff --git a/code/fms/fms-vue/src/components/ui/dialog/DialogScrollContent.vue b/code/fms/fms-vue/src/components/ui/dialog/DialogScrollContent.vue
index abfb3a1e..dbb1e3b4 100644
--- a/code/fms/fms-vue/src/components/ui/dialog/DialogScrollContent.vue
+++ b/code/fms/fms-vue/src/components/ui/dialog/DialogScrollContent.vue
@@ -1,33 +1,33 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { X } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
+import type { DialogContentEmits, DialogContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { X } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
 import {
   DialogClose,
   DialogContent,
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+} from "reka-ui";
+import { cn } from "@/lib/utils";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<DialogContentEmits>()
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<DialogContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <DialogPortal>
     <DialogOverlay
-      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     >
       <DialogContent
         :class="
@@ -37,13 +37,18 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
           )
         "
         v-bind="{ ...$attrs, ...forwarded }"
-        @pointer-down-outside="(event) => {
-          const originalEvent = event.detail.originalEvent;
-          const target = originalEvent.target as HTMLElement;
-          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
-            event.preventDefault();
+        @pointer-down-outside="
+          (event) => {
+            const originalEvent = event.detail.originalEvent;
+            const target = originalEvent.target as HTMLElement;
+            if (
+              originalEvent.offsetX > target.clientWidth ||
+              originalEvent.offsetY > target.clientHeight
+            ) {
+              event.preventDefault();
+            }
           }
-        }"
+        "
       >
         <slot />
 
diff --git a/code/fms/fms-vue/src/components/ui/dialog/DialogTitle.vue b/code/fms/fms-vue/src/components/ui/dialog/DialogTitle.vue
index 860f01a4..930f8e2f 100644
--- a/code/fms/fms-vue/src/components/ui/dialog/DialogTitle.vue
+++ b/code/fms/fms-vue/src/components/ui/dialog/DialogTitle.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { DialogTitleProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogTitle, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DialogTitleProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DialogTitle, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/dialog/DialogTrigger.vue b/code/fms/fms-vue/src/components/ui/dialog/DialogTrigger.vue
index 49667e99..24dbf1b3 100644
--- a/code/fms/fms-vue/src/components/ui/dialog/DialogTrigger.vue
+++ b/code/fms/fms-vue/src/components/ui/dialog/DialogTrigger.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { DialogTriggerProps } from "reka-ui"
-import { DialogTrigger } from "reka-ui"
+import type { DialogTriggerProps } from "reka-ui";
+import { DialogTrigger } from "reka-ui";
 
-const props = defineProps<DialogTriggerProps>()
+const props = defineProps<DialogTriggerProps>();
 </script>
 
 <template>
-  <DialogTrigger
-    data-slot="dialog-trigger"
-    v-bind="props"
-  >
+  <DialogTrigger data-slot="dialog-trigger" v-bind="props">
     <slot />
   </DialogTrigger>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/dialog/index.ts b/code/fms/fms-vue/src/components/ui/dialog/index.ts
index 6768b090..6c411de2 100644
--- a/code/fms/fms-vue/src/components/ui/dialog/index.ts
+++ b/code/fms/fms-vue/src/components/ui/dialog/index.ts
@@ -1,10 +1,10 @@
-export { default as Dialog } from "./Dialog.vue"
-export { default as DialogClose } from "./DialogClose.vue"
-export { default as DialogContent } from "./DialogContent.vue"
-export { default as DialogDescription } from "./DialogDescription.vue"
-export { default as DialogFooter } from "./DialogFooter.vue"
-export { default as DialogHeader } from "./DialogHeader.vue"
-export { default as DialogOverlay } from "./DialogOverlay.vue"
-export { default as DialogScrollContent } from "./DialogScrollContent.vue"
-export { default as DialogTitle } from "./DialogTitle.vue"
-export { default as DialogTrigger } from "./DialogTrigger.vue"
+export { default as Dialog } from "./Dialog.vue";
+export { default as DialogClose } from "./DialogClose.vue";
+export { default as DialogContent } from "./DialogContent.vue";
+export { default as DialogDescription } from "./DialogDescription.vue";
+export { default as DialogFooter } from "./DialogFooter.vue";
+export { default as DialogHeader } from "./DialogHeader.vue";
+export { default as DialogOverlay } from "./DialogOverlay.vue";
+export { default as DialogScrollContent } from "./DialogScrollContent.vue";
+export { default as DialogTitle } from "./DialogTitle.vue";
+export { default as DialogTrigger } from "./DialogTrigger.vue";
diff --git a/code/fms/fms-vue/src/components/ui/drawer/Drawer.vue b/code/fms/fms-vue/src/components/ui/drawer/Drawer.vue
index 33433860..4c31221e 100644
--- a/code/fms/fms-vue/src/components/ui/drawer/Drawer.vue
+++ b/code/fms/fms-vue/src/components/ui/drawer/Drawer.vue
@@ -1,19 +1,16 @@
 <script lang="ts" setup>
-import type { DrawerRootEmits, DrawerRootProps } from "reka-ui"
-import { DrawerRoot, useForwardPropsEmits } from "reka-ui"
+import type { DrawerRootEmits, DrawerRootProps } from "reka-ui";
+import { DrawerRoot, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<DrawerRootProps>()
+const props = defineProps<DrawerRootProps>();
 
-const emits = defineEmits<DrawerRootEmits>()
+const emits = defineEmits<DrawerRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <DrawerRoot
-    v-slot="slotProps"
-    v-bind="forwarded"
-  >
+  <DrawerRoot v-slot="slotProps" v-bind="forwarded">
     <slot v-bind="slotProps" />
   </DrawerRoot>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/drawer/DrawerClose.vue b/code/fms/fms-vue/src/components/ui/drawer/DrawerClose.vue
index cdd8cca1..3b5cff23 100644
--- a/code/fms/fms-vue/src/components/ui/drawer/DrawerClose.vue
+++ b/code/fms/fms-vue/src/components/ui/drawer/DrawerClose.vue
@@ -1,15 +1,12 @@
 <script lang="ts" setup>
-import type { DrawerCloseProps } from "reka-ui"
-import { DrawerClose } from "reka-ui"
+import type { DrawerCloseProps } from "reka-ui";
+import { DrawerClose } from "reka-ui";
 
-const props = defineProps<DrawerCloseProps>()
+const props = defineProps<DrawerCloseProps>();
 </script>
 
 <template>
-  <DrawerClose
-    data-slot="drawer-close"
-    v-bind="props"
-  >
+  <DrawerClose data-slot="drawer-close" v-bind="props">
     <slot />
   </DrawerClose>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/drawer/DrawerContent.vue b/code/fms/fms-vue/src/components/ui/drawer/DrawerContent.vue
index 51c60cad..ea86da98 100644
--- a/code/fms/fms-vue/src/components/ui/drawer/DrawerContent.vue
+++ b/code/fms/fms-vue/src/components/ui/drawer/DrawerContent.vue
@@ -1,26 +1,21 @@
 <script lang="ts" setup>
-import type { DrawerContentEmits, DrawerContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DrawerContent,
-  DrawerHandle,
-  DrawerPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import DrawerOverlay from "./DrawerOverlay.vue"
+import type { DrawerContentEmits, DrawerContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DrawerContent, DrawerHandle, DrawerPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+import DrawerOverlay from "./DrawerOverlay.vue";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = defineProps<DrawerContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<DrawerContentEmits>()
+const props = defineProps<DrawerContentProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<DrawerContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -29,19 +24,23 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <DrawerContent
       data-slot="drawer-content"
       v-bind="{ ...$attrs, ...forwarded }"
-      :class="cn(
-        'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
-        'will-change-transform transform-[translate3d(var(--drawer-swipe-movement-x,0px),var(--drawer-swipe-movement-y,0px),0)]',
-        'transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-swiping:select-none',
-        'data-[state=open]:animate-in data-[state=closed]:animate-out',
-        'data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:rounded-b-lg data-[swipe-direction=up]:data-[state=open]:slide-in-from-top data-[swipe-direction=up]:data-[state=closed]:slide-out-to-top',
-        'data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:rounded-t-lg data-[swipe-direction=down]:data-[state=open]:slide-in-from-bottom data-[swipe-direction=down]:data-[state=closed]:slide-out-to-bottom',
-        'data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:sm:max-w-sm data-[swipe-direction=right]:data-[state=open]:slide-in-from-right data-[swipe-direction=right]:data-[state=closed]:slide-out-to-right',
-        'data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:sm:max-w-sm data-[swipe-direction=left]:data-[state=open]:slide-in-from-left data-[swipe-direction=left]:data-[state=closed]:slide-out-to-left',
-        props.class,
-      )"
+      :class="
+        cn(
+          'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
+          'will-change-transform transform-[translate3d(var(--drawer-swipe-movement-x,0px),var(--drawer-swipe-movement-y,0px),0)]',
+          'transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0 data-swiping:select-none',
+          'data-[state=open]:animate-in data-[state=closed]:animate-out',
+          'data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:rounded-b-lg data-[swipe-direction=up]:data-[state=open]:slide-in-from-top data-[swipe-direction=up]:data-[state=closed]:slide-out-to-top',
+          'data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:rounded-t-lg data-[swipe-direction=down]:data-[state=open]:slide-in-from-bottom data-[swipe-direction=down]:data-[state=closed]:slide-out-to-bottom',
+          'data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:sm:max-w-sm data-[swipe-direction=right]:data-[state=open]:slide-in-from-right data-[swipe-direction=right]:data-[state=closed]:slide-out-to-right',
+          'data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:sm:max-w-sm data-[swipe-direction=left]:data-[state=open]:slide-in-from-left data-[swipe-direction=left]:data-[state=closed]:slide-out-to-left',
+          props.class,
+        )
+      "
     >
-      <DrawerHandle class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[swipe-direction=down]/drawer-content:block" />
+      <DrawerHandle
+        class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[swipe-direction=down]/drawer-content:block"
+      />
       <slot />
     </DrawerContent>
   </DrawerPortal>
diff --git a/code/fms/fms-vue/src/components/ui/drawer/DrawerDescription.vue b/code/fms/fms-vue/src/components/ui/drawer/DrawerDescription.vue
index 34d4f66e..6a08a745 100644
--- a/code/fms/fms-vue/src/components/ui/drawer/DrawerDescription.vue
+++ b/code/fms/fms-vue/src/components/ui/drawer/DrawerDescription.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import type { DrawerDescriptionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DrawerDescription } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DrawerDescriptionProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DrawerDescription } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<DrawerDescriptionProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<DrawerDescriptionProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/drawer/DrawerFooter.vue b/code/fms/fms-vue/src/components/ui/drawer/DrawerFooter.vue
index 34c2e121..e0e96a2e 100644
--- a/code/fms/fms-vue/src/components/ui/drawer/DrawerFooter.vue
+++ b/code/fms/fms-vue/src/components/ui/drawer/DrawerFooter.vue
@@ -1,17 +1,14 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
-  <div
-    data-slot="drawer-footer"
-    :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)"
-  >
+  <div data-slot="drawer-footer" :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
     <slot />
   </div>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/drawer/DrawerHeader.vue b/code/fms/fms-vue/src/components/ui/drawer/DrawerHeader.vue
index f68aeb05..ee2a609e 100644
--- a/code/fms/fms-vue/src/components/ui/drawer/DrawerHeader.vue
+++ b/code/fms/fms-vue/src/components/ui/drawer/DrawerHeader.vue
@@ -1,17 +1,14 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
-  <div
-    data-slot="drawer-header"
-    :class="cn('flex flex-col gap-1.5 p-4', props.class)"
-  >
+  <div data-slot="drawer-header" :class="cn('flex flex-col gap-1.5 p-4', props.class)">
     <slot />
   </div>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/drawer/DrawerOverlay.vue b/code/fms/fms-vue/src/components/ui/drawer/DrawerOverlay.vue
index c270bd06..aa21ca67 100644
--- a/code/fms/fms-vue/src/components/ui/drawer/DrawerOverlay.vue
+++ b/code/fms/fms-vue/src/components/ui/drawer/DrawerOverlay.vue
@@ -1,19 +1,24 @@
 <script lang="ts" setup>
-import type { DrawerOverlayProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DrawerOverlay } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DrawerOverlayProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DrawerOverlay } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<DrawerOverlayProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<DrawerOverlayProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
   <DrawerOverlay
     data-slot="drawer-overlay"
     v-bind="delegatedProps"
-    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 duration-500', props.class)"
+    :class="
+      cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 duration-500',
+        props.class,
+      )
+    "
   />
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/drawer/DrawerTitle.vue b/code/fms/fms-vue/src/components/ui/drawer/DrawerTitle.vue
index 07c8851f..fac9e6ae 100644
--- a/code/fms/fms-vue/src/components/ui/drawer/DrawerTitle.vue
+++ b/code/fms/fms-vue/src/components/ui/drawer/DrawerTitle.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import type { DrawerTitleProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DrawerTitle } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DrawerTitleProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DrawerTitle } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<DrawerTitleProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<DrawerTitleProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/drawer/DrawerTrigger.vue b/code/fms/fms-vue/src/components/ui/drawer/DrawerTrigger.vue
index 8186167f..cade3f40 100644
--- a/code/fms/fms-vue/src/components/ui/drawer/DrawerTrigger.vue
+++ b/code/fms/fms-vue/src/components/ui/drawer/DrawerTrigger.vue
@@ -1,15 +1,12 @@
 <script lang="ts" setup>
-import type { DrawerTriggerProps } from "reka-ui"
-import { DrawerTrigger } from "reka-ui"
+import type { DrawerTriggerProps } from "reka-ui";
+import { DrawerTrigger } from "reka-ui";
 
-const props = defineProps<DrawerTriggerProps>()
+const props = defineProps<DrawerTriggerProps>();
 </script>
 
 <template>
-  <DrawerTrigger
-    data-slot="drawer-trigger"
-    v-bind="props"
-  >
+  <DrawerTrigger data-slot="drawer-trigger" v-bind="props">
     <slot />
   </DrawerTrigger>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/drawer/index.ts b/code/fms/fms-vue/src/components/ui/drawer/index.ts
index 0d07820d..83091b48 100644
--- a/code/fms/fms-vue/src/components/ui/drawer/index.ts
+++ b/code/fms/fms-vue/src/components/ui/drawer/index.ts
@@ -1,9 +1,9 @@
-export { default as Drawer } from "./Drawer.vue"
-export { default as DrawerClose } from "./DrawerClose.vue"
-export { default as DrawerContent } from "./DrawerContent.vue"
-export { default as DrawerDescription } from "./DrawerDescription.vue"
-export { default as DrawerFooter } from "./DrawerFooter.vue"
-export { default as DrawerHeader } from "./DrawerHeader.vue"
-export { default as DrawerOverlay } from "./DrawerOverlay.vue"
-export { default as DrawerTitle } from "./DrawerTitle.vue"
-export { default as DrawerTrigger } from "./DrawerTrigger.vue"
+export { default as Drawer } from "./Drawer.vue";
+export { default as DrawerClose } from "./DrawerClose.vue";
+export { default as DrawerContent } from "./DrawerContent.vue";
+export { default as DrawerDescription } from "./DrawerDescription.vue";
+export { default as DrawerFooter } from "./DrawerFooter.vue";
+export { default as DrawerHeader } from "./DrawerHeader.vue";
+export { default as DrawerOverlay } from "./DrawerOverlay.vue";
+export { default as DrawerTitle } from "./DrawerTitle.vue";
+export { default as DrawerTrigger } from "./DrawerTrigger.vue";
diff --git a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenu.vue b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenu.vue
index e1c9ee30..3d5e3346 100644
--- a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenu.vue
+++ b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenu.vue
@@ -1,19 +1,15 @@
 <script setup lang="ts">
-import type { DropdownMenuRootEmits, DropdownMenuRootProps } from "reka-ui"
-import { DropdownMenuRoot, useForwardPropsEmits } from "reka-ui"
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from "reka-ui";
+import { DropdownMenuRoot, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<DropdownMenuRootProps>()
-const emits = defineEmits<DropdownMenuRootEmits>()
+const props = defineProps<DropdownMenuRootProps>();
+const emits = defineEmits<DropdownMenuRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <DropdownMenuRoot
-    v-slot="slotProps"
-    data-slot="dropdown-menu"
-    v-bind="forwarded"
-  >
+  <DropdownMenuRoot v-slot="slotProps" data-slot="dropdown-menu" v-bind="forwarded">
     <slot v-bind="slotProps" />
   </DropdownMenuRoot>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index 5dab8560..325032c7 100644
--- a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -1,31 +1,29 @@
 <script setup lang="ts">
-import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Check } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DropdownMenuCheckboxItem,
-  DropdownMenuItemIndicator,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Check } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuCheckboxItem, DropdownMenuItemIndicator, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <DropdownMenuCheckboxItem
     data-slot="dropdown-menu-checkbox-item"
     v-bind="forwarded"
-    :class=" cn(
-      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
+    :class="
+      cn(
+        `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        props.class,
+      )
+    "
   >
     <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
diff --git a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuContent.vue b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuContent.vue
index 7c430141..d1f8b7fe 100644
--- a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuContent.vue
@@ -1,29 +1,25 @@
 <script setup lang="ts">
-import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DropdownMenuContent,
-  DropdownMenuPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuContent, DropdownMenuPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
 const props = withDefaults(
   defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(),
   {
     sideOffset: 4,
   },
-)
-const emits = defineEmits<DropdownMenuContentEmits>()
+);
+const emits = defineEmits<DropdownMenuContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -31,7 +27,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <DropdownMenuContent
       data-slot="dropdown-menu-content"
       v-bind="{ ...$attrs, ...forwarded }"
-      :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          props.class,
+        )
+      "
     >
       <slot />
     </DropdownMenuContent>
diff --git a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuGroup.vue b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuGroup.vue
index da634ec0..d22b0247 100644
--- a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuGroup.vue
+++ b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { DropdownMenuGroupProps } from "reka-ui"
-import { DropdownMenuGroup } from "reka-ui"
+import type { DropdownMenuGroupProps } from "reka-ui";
+import { DropdownMenuGroup } from "reka-ui";
 
-const props = defineProps<DropdownMenuGroupProps>()
+const props = defineProps<DropdownMenuGroupProps>();
 </script>
 
 <template>
-  <DropdownMenuGroup
-    data-slot="dropdown-menu-group"
-    v-bind="props"
-  >
+  <DropdownMenuGroup data-slot="dropdown-menu-group" v-bind="props">
     <slot />
   </DropdownMenuGroup>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuItem.vue b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuItem.vue
index fde7a6d1..44af5dcc 100644
--- a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuItem.vue
@@ -1,21 +1,26 @@
 <script setup lang="ts">
-import type { DropdownMenuItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DropdownMenuItem, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DropdownMenuItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuItem, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = withDefaults(defineProps<DropdownMenuItemProps & {
-  class?: HTMLAttributes["class"]
-  inset?: boolean
-  variant?: "default" | "destructive"
-}>(), {
-  variant: "default",
-})
+const props = withDefaults(
+  defineProps<
+    DropdownMenuItemProps & {
+      class?: HTMLAttributes["class"];
+      inset?: boolean;
+      variant?: "default" | "destructive";
+    }
+  >(),
+  {
+    variant: "default",
+  },
+);
 
-const delegatedProps = reactiveOmit(props, "inset", "variant", "class")
+const delegatedProps = reactiveOmit(props, "inset", "variant", "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
@@ -24,7 +29,12 @@ const forwardedProps = useForwardProps(delegatedProps)
     :data-inset="inset ? '' : undefined"
     :data-variant="variant"
     v-bind="forwardedProps"
-    :class="cn(`relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!`, props.class)"
+    :class="
+      cn(
+        `relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!`,
+        props.class,
+      )
+    "
   >
     <slot />
   </DropdownMenuItem>
diff --git a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuLabel.vue b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
index 8bca83c4..bdd931a9 100644
--- a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
-import type { DropdownMenuLabelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DropdownMenuLabel, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DropdownMenuLabelProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuLabel, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+const props = defineProps<
+  DropdownMenuLabelProps & { class?: HTMLAttributes["class"]; inset?: boolean }
+>();
 
-const delegatedProps = reactiveOmit(props, "class", "inset")
-const forwardedProps = useForwardProps(delegatedProps)
+const delegatedProps = reactiveOmit(props, "class", "inset");
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
index fe82cadd..32313a33 100644
--- a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -1,21 +1,15 @@
 <script setup lang="ts">
-import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from "reka-ui"
-import {
-  DropdownMenuRadioGroup,
-  useForwardPropsEmits,
-} from "reka-ui"
+import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from "reka-ui";
+import { DropdownMenuRadioGroup, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<DropdownMenuRadioGroupProps>()
-const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+const props = defineProps<DropdownMenuRadioGroupProps>();
+const emits = defineEmits<DropdownMenuRadioGroupEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <DropdownMenuRadioGroup
-    data-slot="dropdown-menu-radio-group"
-    v-bind="forwarded"
-  >
+  <DropdownMenuRadioGroup data-slot="dropdown-menu-radio-group" v-bind="forwarded">
     <slot />
   </DropdownMenuRadioGroup>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
index c26cb943..0b66c8aa 100644
--- a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -1,32 +1,30 @@
 <script setup lang="ts">
-import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Circle } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DropdownMenuItemIndicator,
-  DropdownMenuRadioItem,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Circle } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuItemIndicator, DropdownMenuRadioItem, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>();
 
-const emits = defineEmits<DropdownMenuRadioItemEmits>()
+const emits = defineEmits<DropdownMenuRadioItemEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <DropdownMenuRadioItem
     data-slot="dropdown-menu-radio-item"
     v-bind="forwarded"
-    :class="cn(
-      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
+    :class="
+      cn(
+        `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        props.class,
+      )
+    "
   >
     <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
diff --git a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
index 1b936c39..6f3568af 100644
--- a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import type { DropdownMenuSeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DropdownMenuSeparator,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DropdownMenuSeparatorProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuSeparator } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<DropdownMenuSeparatorProps & {
-  class?: HTMLAttributes["class"]
-}>()
+const props = defineProps<
+  DropdownMenuSeparatorProps & {
+    class?: HTMLAttributes["class"];
+  }
+>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
index 60be75cc..322019d6 100644
--- a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
+++ b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuSub.vue b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuSub.vue
index 7472e77f..22624e88 100644
--- a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuSub.vue
+++ b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuSub.vue
@@ -1,14 +1,11 @@
 <script setup lang="ts">
-import type { DropdownMenuSubEmits, DropdownMenuSubProps } from "reka-ui"
-import {
-  DropdownMenuSub,
-  useForwardPropsEmits,
-} from "reka-ui"
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from "reka-ui";
+import { DropdownMenuSub, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<DropdownMenuSubProps>()
-const emits = defineEmits<DropdownMenuSubEmits>()
+const props = defineProps<DropdownMenuSubProps>();
+const emits = defineEmits<DropdownMenuSubEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
index 5f6da9b8..7c225415 100644
--- a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -1,26 +1,28 @@
 <script setup lang="ts">
-import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DropdownMenuSubContent,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuSubContent, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<DropdownMenuSubContentEmits>()
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<DropdownMenuSubContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <DropdownMenuSubContent
     data-slot="dropdown-menu-sub-content"
     v-bind="forwarded"
-    :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] max-w-(--reka-dropdown-menu-content-available-width) origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', props.class)"
+    :class="
+      cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] max-w-(--reka-dropdown-menu-content-available-width) origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        props.class,
+      )
+    "
   >
     <slot />
   </DropdownMenuSubContent>
diff --git a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index 48b05949..e88f48b8 100644
--- a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import type { DropdownMenuSubTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { ChevronRight } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DropdownMenuSubTrigger,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DropdownMenuSubTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { ChevronRight } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuSubTrigger, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+const props = defineProps<
+  DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"]; inset?: boolean }
+>();
 
-const delegatedProps = reactiveOmit(props, "class", "inset")
-const forwardedProps = useForwardProps(delegatedProps)
+const delegatedProps = reactiveOmit(props, "class", "inset");
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
@@ -20,10 +19,12 @@ const forwardedProps = useForwardProps(delegatedProps)
     data-slot="dropdown-menu-sub-trigger"
     v-bind="forwardedProps"
     :data-inset="inset ? '' : undefined"
-    :class="cn(
-      `relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!`,
-      props.class,
-    )"
+    :class="
+      cn(
+        `relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!`,
+        props.class,
+      )
+    "
   >
     <slot />
     <ChevronRight class="ml-auto size-4" />
diff --git a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
index 75cd7472..d52d0b44 100644
--- a/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ b/code/fms/fms-vue/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import type { DropdownMenuTriggerProps } from "reka-ui"
-import { DropdownMenuTrigger, useForwardProps } from "reka-ui"
+import type { DropdownMenuTriggerProps } from "reka-ui";
+import { DropdownMenuTrigger, useForwardProps } from "reka-ui";
 
-const props = defineProps<DropdownMenuTriggerProps>()
+const props = defineProps<DropdownMenuTriggerProps>();
 
-const forwardedProps = useForwardProps(props)
+const forwardedProps = useForwardProps(props);
 </script>
 
 <template>
-  <DropdownMenuTrigger
-    data-slot="dropdown-menu-trigger"
-    v-bind="forwardedProps"
-  >
+  <DropdownMenuTrigger data-slot="dropdown-menu-trigger" v-bind="forwardedProps">
     <slot />
   </DropdownMenuTrigger>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/dropdown-menu/index.ts b/code/fms/fms-vue/src/components/ui/dropdown-menu/index.ts
index 955fe3aa..9e57848a 100644
--- a/code/fms/fms-vue/src/components/ui/dropdown-menu/index.ts
+++ b/code/fms/fms-vue/src/components/ui/dropdown-menu/index.ts
@@ -1,16 +1,16 @@
-export { default as DropdownMenu } from "./DropdownMenu.vue"
+export { default as DropdownMenu } from "./DropdownMenu.vue";
 
-export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.vue"
-export { default as DropdownMenuContent } from "./DropdownMenuContent.vue"
-export { default as DropdownMenuGroup } from "./DropdownMenuGroup.vue"
-export { default as DropdownMenuItem } from "./DropdownMenuItem.vue"
-export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue"
-export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.vue"
-export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.vue"
-export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue"
-export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.vue"
-export { default as DropdownMenuSub } from "./DropdownMenuSub.vue"
-export { default as DropdownMenuSubContent } from "./DropdownMenuSubContent.vue"
-export { default as DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.vue"
-export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue"
-export { DropdownMenuPortal } from "reka-ui"
+export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.vue";
+export { default as DropdownMenuContent } from "./DropdownMenuContent.vue";
+export { default as DropdownMenuGroup } from "./DropdownMenuGroup.vue";
+export { default as DropdownMenuItem } from "./DropdownMenuItem.vue";
+export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue";
+export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.vue";
+export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.vue";
+export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue";
+export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.vue";
+export { default as DropdownMenuSub } from "./DropdownMenuSub.vue";
+export { default as DropdownMenuSubContent } from "./DropdownMenuSubContent.vue";
+export { default as DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.vue";
+export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue";
+export { DropdownMenuPortal } from "reka-ui";
diff --git a/code/fms/fms-vue/src/components/ui/field/Field.vue b/code/fms/fms-vue/src/components/ui/field/Field.vue
index 5519d370..1e3e418f 100644
--- a/code/fms/fms-vue/src/components/ui/field/Field.vue
+++ b/code/fms/fms-vue/src/components/ui/field/Field.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import type { FieldVariants } from "."
-import { cn } from "@/lib/utils"
-import { fieldVariants } from "."
+import type { HTMLAttributes } from "vue";
+import type { FieldVariants } from ".";
+import { cn } from "@/lib/utils";
+import { fieldVariants } from ".";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-  orientation?: FieldVariants["orientation"]
-}>()
+  class?: HTMLAttributes["class"];
+  orientation?: FieldVariants["orientation"];
+}>();
 </script>
 
 <template>
@@ -15,10 +15,7 @@ const props = defineProps<{
     role="group"
     data-slot="field"
     :data-orientation="orientation"
-    :class="cn(
-      fieldVariants({ orientation }),
-      props.class,
-    )"
+    :class="cn(fieldVariants({ orientation }), props.class)"
   >
     <slot />
   </div>
diff --git a/code/fms/fms-vue/src/components/ui/field/FieldContent.vue b/code/fms/fms-vue/src/components/ui/field/FieldContent.vue
index d9a23fd7..52a811ea 100644
--- a/code/fms/fms-vue/src/components/ui/field/FieldContent.vue
+++ b/code/fms/fms-vue/src/components/ui/field/FieldContent.vue
@@ -1,19 +1,16 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
   <div
     data-slot="field-content"
-    :class="cn(
-      'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',
-      props.class,
-    )"
+    :class="cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', props.class)"
   >
     <slot />
   </div>
diff --git a/code/fms/fms-vue/src/components/ui/field/FieldDescription.vue b/code/fms/fms-vue/src/components/ui/field/FieldDescription.vue
index 7240a837..231edad4 100644
--- a/code/fms/fms-vue/src/components/ui/field/FieldDescription.vue
+++ b/code/fms/fms-vue/src/components/ui/field/FieldDescription.vue
@@ -1,21 +1,23 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
   <p
     data-slot="field-description"
-    :class="cn(
-      'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
-      'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
-      '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
-      props.class,
-    )"
+    :class="
+      cn(
+        'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
+        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        props.class,
+      )
+    "
   >
     <slot />
   </p>
diff --git a/code/fms/fms-vue/src/components/ui/field/FieldError.vue b/code/fms/fms-vue/src/components/ui/field/FieldError.vue
index 8a0a63f0..07ed7fa2 100644
--- a/code/fms/fms-vue/src/components/ui/field/FieldError.vue
+++ b/code/fms/fms-vue/src/components/ui/field/FieldError.vue
@@ -1,34 +1,31 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { computed } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { computed } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-  errors?: Array<string | { message: string | undefined } | undefined>
-}>()
+  class?: HTMLAttributes["class"];
+  errors?: Array<string | { message: string | undefined } | undefined>;
+}>();
 
 const content = computed(() => {
-  if (!props.errors || props.errors.length === 0)
-    return null
+  if (!props.errors || props.errors.length === 0) return null;
 
   const uniqueErrors = [
     ...new Map(
-      props.errors
-        .filter(Boolean)
-        .map((error) => {
-          const message = typeof error === "string" ? error : error?.message
-          return [message, error]
-        }),
+      props.errors.filter(Boolean).map((error) => {
+        const message = typeof error === "string" ? error : error?.message;
+        return [message, error];
+      }),
     ).values(),
-  ]
+  ];
 
   if (uniqueErrors.length === 1 && uniqueErrors[0]) {
-    return typeof uniqueErrors[0] === "string" ? uniqueErrors[0] : uniqueErrors[0].message
+    return typeof uniqueErrors[0] === "string" ? uniqueErrors[0] : uniqueErrors[0].message;
   }
 
-  return uniqueErrors.map(error => typeof error === "string" ? error : error?.message)
-})
+  return uniqueErrors.map((error) => (typeof error === "string" ? error : error?.message));
+});
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/field/FieldGroup.vue b/code/fms/fms-vue/src/components/ui/field/FieldGroup.vue
index 834d8ced..6e4d22ab 100644
--- a/code/fms/fms-vue/src/components/ui/field/FieldGroup.vue
+++ b/code/fms/fms-vue/src/components/ui/field/FieldGroup.vue
@@ -1,19 +1,21 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
   <div
     data-slot="field-group"
-    :class="cn(
-      'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
-      props.class,
-    )"
+    :class="
+      cn(
+        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+        props.class,
+      )
+    "
   >
     <slot />
   </div>
diff --git a/code/fms/fms-vue/src/components/ui/field/FieldLabel.vue b/code/fms/fms-vue/src/components/ui/field/FieldLabel.vue
index ce6c4985..968fe81b 100644
--- a/code/fms/fms-vue/src/components/ui/field/FieldLabel.vue
+++ b/code/fms/fms-vue/src/components/ui/field/FieldLabel.vue
@@ -1,22 +1,24 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-import { Label } from '@/components/ui/label'
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
   <Label
     data-slot="field-label"
-    :class="cn(
-      'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
-      'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
-      'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
-      props.class,
-    )"
+    :class="
+      cn(
+        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
+        'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+        props.class,
+      )
+    "
   >
     <slot />
   </Label>
diff --git a/code/fms/fms-vue/src/components/ui/field/FieldLegend.vue b/code/fms/fms-vue/src/components/ui/field/FieldLegend.vue
index c620fed4..af8f18db 100644
--- a/code/fms/fms-vue/src/components/ui/field/FieldLegend.vue
+++ b/code/fms/fms-vue/src/components/ui/field/FieldLegend.vue
@@ -1,23 +1,25 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-  variant?: "legend" | "label"
-}>()
+  class?: HTMLAttributes["class"];
+  variant?: "legend" | "label";
+}>();
 </script>
 
 <template>
   <legend
     data-slot="field-legend"
     :data-variant="variant"
-    :class="cn(
-      'mb-3 font-medium',
-      'data-[variant=legend]:text-base',
-      'data-[variant=label]:text-sm',
-      props.class,
-    )"
+    :class="
+      cn(
+        'mb-3 font-medium',
+        'data-[variant=legend]:text-base',
+        'data-[variant=label]:text-sm',
+        props.class,
+      )
+    "
   >
     <slot />
   </legend>
diff --git a/code/fms/fms-vue/src/components/ui/field/FieldSeparator.vue b/code/fms/fms-vue/src/components/ui/field/FieldSeparator.vue
index 97d0efa8..e624e435 100644
--- a/code/fms/fms-vue/src/components/ui/field/FieldSeparator.vue
+++ b/code/fms/fms-vue/src/components/ui/field/FieldSeparator.vue
@@ -1,21 +1,20 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-import { Separator } from '@/components/ui/separator'
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
   <div
     data-slot="field-separator"
     :data-content="!!$slots.default"
-    :class="cn(
-      'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
-      props.class,
-    )"
+    :class="
+      cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', props.class)
+    "
   >
     <Separator class="absolute inset-0 top-1/2" />
     <span
diff --git a/code/fms/fms-vue/src/components/ui/field/FieldSet.vue b/code/fms/fms-vue/src/components/ui/field/FieldSet.vue
index 7be4dc9e..4aec339f 100644
--- a/code/fms/fms-vue/src/components/ui/field/FieldSet.vue
+++ b/code/fms/fms-vue/src/components/ui/field/FieldSet.vue
@@ -1,20 +1,22 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
   <fieldset
     data-slot="field-set"
-    :class="cn(
-      'flex flex-col gap-6',
-      'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
-      props.class,
-    )"
+    :class="
+      cn(
+        'flex flex-col gap-6',
+        'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+        props.class,
+      )
+    "
   >
     <slot />
   </fieldset>
diff --git a/code/fms/fms-vue/src/components/ui/field/FieldTitle.vue b/code/fms/fms-vue/src/components/ui/field/FieldTitle.vue
index f564b8b8..4d252d0b 100644
--- a/code/fms/fms-vue/src/components/ui/field/FieldTitle.vue
+++ b/code/fms/fms-vue/src/components/ui/field/FieldTitle.vue
@@ -1,19 +1,21 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
   <div
     data-slot="field-label"
-    :class="cn(
-      'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
-      props.class,
-    )"
+    :class="
+      cn(
+        'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+        props.class,
+      )
+    "
   >
     <slot />
   </div>
diff --git a/code/fms/fms-vue/src/components/ui/field/index.ts b/code/fms/fms-vue/src/components/ui/field/index.ts
index 162ba14d..986c62ee 100644
--- a/code/fms/fms-vue/src/components/ui/field/index.ts
+++ b/code/fms/fms-vue/src/components/ui/field/index.ts
@@ -1,5 +1,5 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 
 export const fieldVariants = cva(
   "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
@@ -23,17 +23,17 @@ export const fieldVariants = cva(
       orientation: "vertical",
     },
   },
-)
+);
 
-export type FieldVariants = VariantProps<typeof fieldVariants>
+export type FieldVariants = VariantProps<typeof fieldVariants>;
 
-export { default as Field } from "./Field.vue"
-export { default as FieldContent } from "./FieldContent.vue"
-export { default as FieldDescription } from "./FieldDescription.vue"
-export { default as FieldError } from "./FieldError.vue"
-export { default as FieldGroup } from "./FieldGroup.vue"
-export { default as FieldLabel } from "./FieldLabel.vue"
-export { default as FieldLegend } from "./FieldLegend.vue"
-export { default as FieldSeparator } from "./FieldSeparator.vue"
-export { default as FieldSet } from "./FieldSet.vue"
-export { default as FieldTitle } from "./FieldTitle.vue"
+export { default as Field } from "./Field.vue";
+export { default as FieldContent } from "./FieldContent.vue";
+export { default as FieldDescription } from "./FieldDescription.vue";
+export { default as FieldError } from "./FieldError.vue";
+export { default as FieldGroup } from "./FieldGroup.vue";
+export { default as FieldLabel } from "./FieldLabel.vue";
+export { default as FieldLegend } from "./FieldLegend.vue";
+export { default as FieldSeparator } from "./FieldSeparator.vue";
+export { default as FieldSet } from "./FieldSet.vue";
+export { default as FieldTitle } from "./FieldTitle.vue";
diff --git a/code/fms/fms-vue/src/components/ui/form/Form.vue b/code/fms/fms-vue/src/components/ui/form/Form.vue
index 72405c0a..9766152f 100644
--- a/code/fms/fms-vue/src/components/ui/form/Form.vue
+++ b/code/fms/fms-vue/src/components/ui/form/Form.vue
@@ -1,28 +1,30 @@
 <script setup lang="ts">
-import type { FormContext, GenericSchema } from "vee-validate"
-import { useForm } from "vee-validate"
+import type { FormContext, GenericSchema } from "vee-validate";
+import { useForm } from "vee-validate";
 
 interface FormProps<T extends GenericSchema = GenericSchema> {
-  form?: FormContext<T>
-  validationSchema?: T
-  initialValues?: Record<string, unknown>
-  keepValuesOnUnmount?: boolean
+  form?: FormContext<T>;
+  validationSchema?: T;
+  initialValues?: Record<string, unknown>;
+  keepValuesOnUnmount?: boolean;
 }
 
-const props = defineProps<FormProps>()
+const props = defineProps<FormProps>();
 const emit = defineEmits<{
-  submit: [values: Record<string, unknown>]
-}>()
+  submit: [values: Record<string, unknown>];
+}>();
 
-const form = props.form ?? useForm({
-  validationSchema: props.validationSchema,
-  initialValues: props.initialValues,
-  keepValuesOnUnmount: props.keepValuesOnUnmount,
-})
+const form =
+  props.form ??
+  useForm({
+    validationSchema: props.validationSchema,
+    initialValues: props.initialValues,
+    keepValuesOnUnmount: props.keepValuesOnUnmount,
+  });
 
 const onSubmit = form.handleSubmit((values) => {
-  emit("submit", values)
-})
+  emit("submit", values);
+});
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/form/FormControl.vue b/code/fms/fms-vue/src/components/ui/form/FormControl.vue
index b1bc4bfa..98ab2dda 100644
--- a/code/fms/fms-vue/src/components/ui/form/FormControl.vue
+++ b/code/fms/fms-vue/src/components/ui/form/FormControl.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { Slot } from "reka-ui"
-import { useFormField } from "./useFormField"
+import { Slot } from "reka-ui";
+import { useFormField } from "./useFormField";
 
-const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/form/FormDescription.vue b/code/fms/fms-vue/src/components/ui/form/FormDescription.vue
index 2d3a903d..79baa4c5 100644
--- a/code/fms/fms-vue/src/components/ui/form/FormDescription.vue
+++ b/code/fms/fms-vue/src/components/ui/form/FormDescription.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-import { useFormField } from "./useFormField"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+import { useFormField } from "./useFormField";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 
-const { formDescriptionId } = useFormField()
+const { formDescriptionId } = useFormField();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/form/FormField.vue b/code/fms/fms-vue/src/components/ui/form/FormField.vue
index 84846b8c..093398f7 100644
--- a/code/fms/fms-vue/src/components/ui/form/FormField.vue
+++ b/code/fms/fms-vue/src/components/ui/form/FormField.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Field } from "vee-validate"
+import { Field } from "vee-validate";
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/form/FormItem.vue b/code/fms/fms-vue/src/components/ui/form/FormItem.vue
index 40cb994d..231f62f1 100644
--- a/code/fms/fms-vue/src/components/ui/form/FormItem.vue
+++ b/code/fms/fms-vue/src/components/ui/form/FormItem.vue
@@ -1,23 +1,20 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { useId } from "reka-ui"
-import { provide } from "vue"
-import { cn } from "@/lib/utils"
-import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+import type { HTMLAttributes } from "vue";
+import { useId } from "reka-ui";
+import { provide } from "vue";
+import { cn } from "@/lib/utils";
+import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 
-const id = useId()
-provide(FORM_ITEM_INJECTION_KEY, id)
+const id = useId();
+provide(FORM_ITEM_INJECTION_KEY, id);
 </script>
 
 <template>
-  <div
-    data-slot="form-item"
-    :class="cn('grid gap-2', props.class)"
-  >
+  <div data-slot="form-item" :class="cn('grid gap-2', props.class)">
     <slot />
   </div>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/form/FormLabel.vue b/code/fms/fms-vue/src/components/ui/form/FormLabel.vue
index 141655b5..8c05b2d8 100644
--- a/code/fms/fms-vue/src/components/ui/form/FormLabel.vue
+++ b/code/fms/fms-vue/src/components/ui/form/FormLabel.vue
@@ -1,23 +1,20 @@
 <script lang="ts" setup>
-import type { LabelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-import { Label } from '@/components/ui/label'
-import { useFormField } from "./useFormField"
+import type { LabelProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+import { useFormField } from "./useFormField";
 
-const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>();
 
-const { error, formItemId } = useFormField()
+const { error, formItemId } = useFormField();
 </script>
 
 <template>
   <Label
     data-slot="form-label"
     :data-error="!!error"
-    :class="cn(
-      'data-[error=true]:text-destructive',
-      props.class,
-    )"
+    :class="cn('data-[error=true]:text-destructive', props.class)"
     :for="formItemId"
   >
     <slot />
diff --git a/code/fms/fms-vue/src/components/ui/form/FormMessage.vue b/code/fms/fms-vue/src/components/ui/form/FormMessage.vue
index c80c482d..6f0de347 100644
--- a/code/fms/fms-vue/src/components/ui/form/FormMessage.vue
+++ b/code/fms/fms-vue/src/components/ui/form/FormMessage.vue
@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { ErrorMessage } from "vee-validate"
-import { toValue } from "vue"
-import { cn } from "@/lib/utils"
-import { useFormField } from "./useFormField"
+import type { HTMLAttributes } from "vue";
+import { ErrorMessage } from "vee-validate";
+import { toValue } from "vue";
+import { cn } from "@/lib/utils";
+import { useFormField } from "./useFormField";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 
-const { name, formMessageId } = useFormField()
+const { name, formMessageId } = useFormField();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/form/index.ts b/code/fms/fms-vue/src/components/ui/form/index.ts
index 8587eb5f..107087f9 100644
--- a/code/fms/fms-vue/src/components/ui/form/index.ts
+++ b/code/fms/fms-vue/src/components/ui/form/index.ts
@@ -1,8 +1,8 @@
-export { default as Form } from "./Form.vue"
-export { default as FormField } from "./FormField.vue"
-export { default as FormControl } from "./FormControl.vue"
-export { default as FormDescription } from "./FormDescription.vue"
-export { default as FormItem } from "./FormItem.vue"
-export { default as FormLabel } from "./FormLabel.vue"
-export { default as FormMessage } from "./FormMessage.vue"
-export { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+export { default as Form } from "./Form.vue";
+export { default as FormField } from "./FormField.vue";
+export { default as FormControl } from "./FormControl.vue";
+export { default as FormDescription } from "./FormDescription.vue";
+export { default as FormItem } from "./FormItem.vue";
+export { default as FormLabel } from "./FormLabel.vue";
+export { default as FormMessage } from "./FormMessage.vue";
+export { FORM_ITEM_INJECTION_KEY } from "./injectionKeys";
diff --git a/code/fms/fms-vue/src/components/ui/form/injectionKeys.ts b/code/fms/fms-vue/src/components/ui/form/injectionKeys.ts
index 04a9df35..c72c0b67 100644
--- a/code/fms/fms-vue/src/components/ui/form/injectionKeys.ts
+++ b/code/fms/fms-vue/src/components/ui/form/injectionKeys.ts
@@ -1,4 +1,3 @@
-import type { InjectionKey } from "vue"
+import type { InjectionKey } from "vue";
 
-export const FORM_ITEM_INJECTION_KEY
-  = Symbol("FORM_ITEM_INJECTION_KEY") as InjectionKey<string>
+export const FORM_ITEM_INJECTION_KEY = Symbol("FORM_ITEM_INJECTION_KEY") as InjectionKey<string>;
diff --git a/code/fms/fms-vue/src/components/ui/form/useFormField.ts b/code/fms/fms-vue/src/components/ui/form/useFormField.ts
index 62d86c26..b9d96d31 100644
--- a/code/fms/fms-vue/src/components/ui/form/useFormField.ts
+++ b/code/fms/fms-vue/src/components/ui/form/useFormField.ts
@@ -1,23 +1,22 @@
-import { FieldContextKey } from "vee-validate"
-import { computed, inject } from "vue"
-import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+import { FieldContextKey } from "vee-validate";
+import { computed, inject } from "vue";
+import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys";
 
 export function useFormField() {
-  const fieldContext = inject(FieldContextKey)
-  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
+  const fieldContext = inject(FieldContextKey);
+  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY);
 
-  if (!fieldContext)
-    throw new Error("useFormField should be used within <FormField>")
+  if (!fieldContext) throw new Error("useFormField should be used within <FormField>");
 
-  const { name, errorMessage: error, meta } = fieldContext
-  const id = fieldItemContext
+  const { name, errorMessage: error, meta } = fieldContext;
+  const id = fieldItemContext;
 
   const fieldState = {
     valid: computed(() => meta.valid),
     isDirty: computed(() => meta.dirty),
     isTouched: computed(() => meta.touched),
     error,
-  }
+  };
 
   return {
     id,
@@ -26,5 +25,5 @@ export function useFormField() {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
-  }
+  };
 }
diff --git a/code/fms/fms-vue/src/components/ui/hover-card/HoverCard.vue b/code/fms/fms-vue/src/components/ui/hover-card/HoverCard.vue
index 07d11e60..d421e761 100644
--- a/code/fms/fms-vue/src/components/ui/hover-card/HoverCard.vue
+++ b/code/fms/fms-vue/src/components/ui/hover-card/HoverCard.vue
@@ -1,19 +1,15 @@
 <script setup lang="ts">
-import type { HoverCardRootEmits, HoverCardRootProps } from "reka-ui"
-import { HoverCardRoot, useForwardPropsEmits } from "reka-ui"
+import type { HoverCardRootEmits, HoverCardRootProps } from "reka-ui";
+import { HoverCardRoot, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<HoverCardRootProps>()
-const emits = defineEmits<HoverCardRootEmits>()
+const props = defineProps<HoverCardRootProps>();
+const emits = defineEmits<HoverCardRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <HoverCardRoot
-    v-slot="slotProps"
-    data-slot="hover-card"
-    v-bind="forwarded"
-  >
+  <HoverCardRoot v-slot="slotProps" data-slot="hover-card" v-bind="forwarded">
     <slot v-bind="slotProps" />
   </HoverCardRoot>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/hover-card/HoverCardContent.vue b/code/fms/fms-vue/src/components/ui/hover-card/HoverCardContent.vue
index 2a3c5533..1d3d0393 100644
--- a/code/fms/fms-vue/src/components/ui/hover-card/HoverCardContent.vue
+++ b/code/fms/fms-vue/src/components/ui/hover-card/HoverCardContent.vue
@@ -1,28 +1,24 @@
 <script setup lang="ts">
-import type { HoverCardContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  HoverCardContent,
-  HoverCardPortal,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { HoverCardContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { HoverCardContent, HoverCardPortal, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
 const props = withDefaults(
   defineProps<HoverCardContentProps & { class?: HTMLAttributes["class"] }>(),
   {
     sideOffset: 4,
   },
-)
+);
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/hover-card/HoverCardTrigger.vue b/code/fms/fms-vue/src/components/ui/hover-card/HoverCardTrigger.vue
index 0a090019..55397b10 100644
--- a/code/fms/fms-vue/src/components/ui/hover-card/HoverCardTrigger.vue
+++ b/code/fms/fms-vue/src/components/ui/hover-card/HoverCardTrigger.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { HoverCardTriggerProps } from "reka-ui"
-import { HoverCardTrigger } from "reka-ui"
+import type { HoverCardTriggerProps } from "reka-ui";
+import { HoverCardTrigger } from "reka-ui";
 
-const props = defineProps<HoverCardTriggerProps>()
+const props = defineProps<HoverCardTriggerProps>();
 </script>
 
 <template>
-  <HoverCardTrigger
-    data-slot="hover-card-trigger"
-    v-bind="props"
-  >
+  <HoverCardTrigger data-slot="hover-card-trigger" v-bind="props">
     <slot />
   </HoverCardTrigger>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/hover-card/index.ts b/code/fms/fms-vue/src/components/ui/hover-card/index.ts
index 49b2930d..b16bbcf9 100644
--- a/code/fms/fms-vue/src/components/ui/hover-card/index.ts
+++ b/code/fms/fms-vue/src/components/ui/hover-card/index.ts
@@ -1,3 +1,3 @@
-export { default as HoverCard } from "./HoverCard.vue"
-export { default as HoverCardContent } from "./HoverCardContent.vue"
-export { default as HoverCardTrigger } from "./HoverCardTrigger.vue"
+export { default as HoverCard } from "./HoverCard.vue";
+export { default as HoverCardContent } from "./HoverCardContent.vue";
+export { default as HoverCardTrigger } from "./HoverCardTrigger.vue";
diff --git a/code/fms/fms-vue/src/components/ui/input-otp/InputOTP.vue b/code/fms/fms-vue/src/components/ui/input-otp/InputOTP.vue
index f34b7348..b72f53e0 100644
--- a/code/fms/fms-vue/src/components/ui/input-otp/InputOTP.vue
+++ b/code/fms/fms-vue/src/components/ui/input-otp/InputOTP.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import type { OTPInputEmits, OTPInputProps } from "vue-input-otp"
-import { reactiveOmit } from "@vueuse/core"
-import { useForwardPropsEmits } from "reka-ui"
-import { OTPInput } from "vue-input-otp"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import type { OTPInputEmits, OTPInputProps } from "vue-input-otp";
+import { reactiveOmit } from "@vueuse/core";
+import { useForwardPropsEmits } from "reka-ui";
+import { OTPInput } from "vue-input-otp";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<OTPInputProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<OTPInputProps & { class?: HTMLAttributes["class"] }>();
 
-const emits = defineEmits<OTPInputEmits>()
+const emits = defineEmits<OTPInputEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/input-otp/InputOTPGroup.vue b/code/fms/fms-vue/src/components/ui/input-otp/InputOTPGroup.vue
index 1dea2aba..98aa9d3f 100644
--- a/code/fms/fms-vue/src/components/ui/input-otp/InputOTPGroup.vue
+++ b/code/fms/fms-vue/src/components/ui/input-otp/InputOTPGroup.vue
@@ -1,22 +1,18 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardProps(delegatedProps)
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <div
-    data-slot="input-otp-group"
-    v-bind="forwarded"
-    :class="cn('flex items-center', props.class)"
-  >
+  <div data-slot="input-otp-group" v-bind="forwarded" :class="cn('flex items-center', props.class)">
     <slot />
   </div>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/input-otp/InputOTPSeparator.vue b/code/fms/fms-vue/src/components/ui/input-otp/InputOTPSeparator.vue
index 2350e97d..f862b203 100644
--- a/code/fms/fms-vue/src/components/ui/input-otp/InputOTPSeparator.vue
+++ b/code/fms/fms-vue/src/components/ui/input-otp/InputOTPSeparator.vue
@@ -1,19 +1,15 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { MinusIcon } from "@lucide/vue"
-import { useForwardProps } from "reka-ui"
+import type { HTMLAttributes } from "vue";
+import { MinusIcon } from "@lucide/vue";
+import { useForwardProps } from "reka-ui";
 
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
 
-const forwarded = useForwardProps(props)
+const forwarded = useForwardProps(props);
 </script>
 
 <template>
-  <div
-    data-slot="input-otp-separator"
-    role="separator"
-    v-bind="forwarded"
-  >
+  <div data-slot="input-otp-separator" role="separator" v-bind="forwarded">
     <slot>
       <MinusIcon />
     </slot>
diff --git a/code/fms/fms-vue/src/components/ui/input-otp/InputOTPSlot.vue b/code/fms/fms-vue/src/components/ui/input-otp/InputOTPSlot.vue
index fa450ec6..119a8300 100644
--- a/code/fms/fms-vue/src/components/ui/input-otp/InputOTPSlot.vue
+++ b/code/fms/fms-vue/src/components/ui/input-otp/InputOTPSlot.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { useForwardProps } from "reka-ui"
-import { computed } from "vue"
-import { useVueOTPContext } from "vue-input-otp"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { useForwardProps } from "reka-ui";
+import { computed } from "vue";
+import { useVueOTPContext } from "vue-input-otp";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<{ index: number, class?: HTMLAttributes["class"] }>()
+const props = defineProps<{ index: number; class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardProps(delegatedProps)
+const forwarded = useForwardProps(delegatedProps);
 
-const context = useVueOTPContext()
+const context = useVueOTPContext();
 
-const slot = computed(() => context?.value.slots[props.index])
+const slot = computed(() => context?.value.slots[props.index]);
 </script>
 
 <template>
@@ -22,10 +22,18 @@ const slot = computed(() => context?.value.slots[props.index])
     v-bind="forwarded"
     data-slot="input-otp-slot"
     :data-active="slot?.isActive"
-    :class="cn('data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-3', props.class)"
+    :class="
+      cn(
+        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-3',
+        props.class,
+      )
+    "
   >
     {{ slot?.char }}
-    <div v-if="slot?.hasFakeCaret" class="pointer-events-none absolute inset-0 flex items-center justify-center">
+    <div
+      v-if="slot?.hasFakeCaret"
+      class="pointer-events-none absolute inset-0 flex items-center justify-center"
+    >
       <div class="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
     </div>
   </div>
diff --git a/code/fms/fms-vue/src/components/ui/input-otp/index.ts b/code/fms/fms-vue/src/components/ui/input-otp/index.ts
index d97448a5..0fd05d83 100644
--- a/code/fms/fms-vue/src/components/ui/input-otp/index.ts
+++ b/code/fms/fms-vue/src/components/ui/input-otp/index.ts
@@ -1,4 +1,4 @@
-export { default as InputOTP } from "./InputOTP.vue"
-export { default as InputOTPGroup } from "./InputOTPGroup.vue"
-export { default as InputOTPSeparator } from "./InputOTPSeparator.vue"
-export { default as InputOTPSlot } from "./InputOTPSlot.vue"
+export { default as InputOTP } from "./InputOTP.vue";
+export { default as InputOTPGroup } from "./InputOTPGroup.vue";
+export { default as InputOTPSeparator } from "./InputOTPSeparator.vue";
+export { default as InputOTPSlot } from "./InputOTPSlot.vue";
diff --git a/code/fms/fms-vue/src/components/ui/input/Input.vue b/code/fms/fms-vue/src/components/ui/input/Input.vue
index 9db9e85f..23f08619 100644
--- a/code/fms/fms-vue/src/components/ui/input/Input.vue
+++ b/code/fms/fms-vue/src/components/ui/input/Input.vue
@@ -1,33 +1,35 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { useVModel } from "@vueuse/core"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { useVModel } from "@vueuse/core";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  defaultValue?: string | number
-  modelValue?: string | number
-  class?: HTMLAttributes["class"]
-}>()
+  defaultValue?: string | number;
+  modelValue?: string | number;
+  class?: HTMLAttributes["class"];
+}>();
 
 const emits = defineEmits<{
-  (e: "update:modelValue", payload: string | number): void
-}>()
+  (e: "update:modelValue", payload: string | number): void;
+}>();
 
 const modelValue = useVModel(props, "modelValue", emits, {
   passive: true,
   defaultValue: props.defaultValue,
-})
+});
 </script>
 
 <template>
   <input
     v-model="modelValue"
     data-slot="input"
-    :class="cn(
-      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3',
-      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-      props.class,
-    )"
-  >
+    :class="
+      cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        props.class,
+      )
+    "
+  />
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/input/index.ts b/code/fms/fms-vue/src/components/ui/input/index.ts
index 9976b86f..110f0460 100644
--- a/code/fms/fms-vue/src/components/ui/input/index.ts
+++ b/code/fms/fms-vue/src/components/ui/input/index.ts
@@ -1 +1 @@
-export { default as Input } from "./Input.vue"
+export { default as Input } from "./Input.vue";
diff --git a/code/fms/fms-vue/src/components/ui/label/Label.vue b/code/fms/fms-vue/src/components/ui/label/Label.vue
index ee639702..1191606e 100644
--- a/code/fms/fms-vue/src/components/ui/label/Label.vue
+++ b/code/fms/fms-vue/src/components/ui/label/Label.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { LabelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Label } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { LabelProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { Label } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/label/index.ts b/code/fms/fms-vue/src/components/ui/label/index.ts
index 036e35c3..38eaa356 100644
--- a/code/fms/fms-vue/src/components/ui/label/index.ts
+++ b/code/fms/fms-vue/src/components/ui/label/index.ts
@@ -1 +1 @@
-export { default as Label } from "./Label.vue"
+export { default as Label } from "./Label.vue";
diff --git a/code/fms/fms-vue/src/components/ui/menubar/Menubar.vue b/code/fms/fms-vue/src/components/ui/menubar/Menubar.vue
index fb2032ac..c68e4c96 100644
--- a/code/fms/fms-vue/src/components/ui/menubar/Menubar.vue
+++ b/code/fms/fms-vue/src/components/ui/menubar/Menubar.vue
@@ -1,19 +1,16 @@
 <script setup lang="ts">
-import type { MenubarRootEmits, MenubarRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  MenubarRoot,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { MenubarRootEmits, MenubarRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { MenubarRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<MenubarRootProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<MenubarRootEmits>()
+const props = defineProps<MenubarRootProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<MenubarRootEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -22,10 +19,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="menubar"
     v-bind="forwarded"
     :class="
-      cn(
-        'bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs',
-        props.class,
-      )
+      cn('bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs', props.class)
     "
   >
     <slot v-bind="slotProps" />
diff --git a/code/fms/fms-vue/src/components/ui/menubar/MenubarCheckboxItem.vue b/code/fms/fms-vue/src/components/ui/menubar/MenubarCheckboxItem.vue
index 28c3dd8f..cfe31139 100644
--- a/code/fms/fms-vue/src/components/ui/menubar/MenubarCheckboxItem.vue
+++ b/code/fms/fms-vue/src/components/ui/menubar/MenubarCheckboxItem.vue
@@ -1,31 +1,29 @@
 <script setup lang="ts">
-import type { MenubarCheckboxItemEmits, MenubarCheckboxItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Check } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  MenubarCheckboxItem,
-  MenubarItemIndicator,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { MenubarCheckboxItemEmits, MenubarCheckboxItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Check } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { MenubarCheckboxItem, MenubarItemIndicator, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<MenubarCheckboxItemEmits>()
+const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<MenubarCheckboxItemEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <MenubarCheckboxItem
     data-slot="menubar-checkbox-item"
     v-bind="forwarded"
-    :class="cn(
-      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
+    :class="
+      cn(
+        `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        props.class,
+      )
+    "
   >
     <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <MenubarItemIndicator>
diff --git a/code/fms/fms-vue/src/components/ui/menubar/MenubarContent.vue b/code/fms/fms-vue/src/components/ui/menubar/MenubarContent.vue
index fa116be5..fa8c27b1 100644
--- a/code/fms/fms-vue/src/components/ui/menubar/MenubarContent.vue
+++ b/code/fms/fms-vue/src/components/ui/menubar/MenubarContent.vue
@@ -1,17 +1,13 @@
 <script setup lang="ts">
-import type { MenubarContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  MenubarContent,
-  MenubarPortal,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { MenubarContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { MenubarContent, MenubarPortal, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
 const props = withDefaults(
   defineProps<MenubarContentProps & { class?: HTMLAttributes["class"] }>(),
@@ -20,11 +16,11 @@ const props = withDefaults(
     alignOffset: -4,
     sideOffset: 8,
   },
-)
+);
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/menubar/MenubarGroup.vue b/code/fms/fms-vue/src/components/ui/menubar/MenubarGroup.vue
index 928e5032..2030b0a6 100644
--- a/code/fms/fms-vue/src/components/ui/menubar/MenubarGroup.vue
+++ b/code/fms/fms-vue/src/components/ui/menubar/MenubarGroup.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { MenubarGroupProps } from "reka-ui"
-import { MenubarGroup } from "reka-ui"
+import type { MenubarGroupProps } from "reka-ui";
+import { MenubarGroup } from "reka-ui";
 
-const props = defineProps<MenubarGroupProps>()
+const props = defineProps<MenubarGroupProps>();
 </script>
 
 <template>
-  <MenubarGroup
-    data-slot="menubar-group"
-    v-bind="props"
-  >
+  <MenubarGroup data-slot="menubar-group" v-bind="props">
     <slot />
   </MenubarGroup>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/menubar/MenubarItem.vue b/code/fms/fms-vue/src/components/ui/menubar/MenubarItem.vue
index 15c058d8..1b9cbbfa 100644
--- a/code/fms/fms-vue/src/components/ui/menubar/MenubarItem.vue
+++ b/code/fms/fms-vue/src/components/ui/menubar/MenubarItem.vue
@@ -1,23 +1,22 @@
 <script setup lang="ts">
-import type { MenubarItemEmits, MenubarItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  MenubarItem,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { MenubarItemEmits, MenubarItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { MenubarItem, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<MenubarItemProps & {
-  class?: HTMLAttributes["class"]
-  inset?: boolean
-  variant?: "default" | "destructive"
-}>()
+const props = defineProps<
+  MenubarItemProps & {
+    class?: HTMLAttributes["class"];
+    inset?: boolean;
+    variant?: "default" | "destructive";
+  }
+>();
 
-const emits = defineEmits<MenubarItemEmits>()
+const emits = defineEmits<MenubarItemEmits>();
 
-const delegatedProps = reactiveOmit(props, "class", "inset", "variant")
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const delegatedProps = reactiveOmit(props, "class", "inset", "variant");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -26,10 +25,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     :data-inset="inset ? '' : undefined"
     :data-variant="variant"
     v-bind="forwarded"
-    :class="cn(
-      `focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
+    :class="
+      cn(
+        `focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        props.class,
+      )
+    "
   >
     <slot />
   </MenubarItem>
diff --git a/code/fms/fms-vue/src/components/ui/menubar/MenubarLabel.vue b/code/fms/fms-vue/src/components/ui/menubar/MenubarLabel.vue
index 2d28e3b5..532ea5d2 100644
--- a/code/fms/fms-vue/src/components/ui/menubar/MenubarLabel.vue
+++ b/code/fms/fms-vue/src/components/ui/menubar/MenubarLabel.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import type { MenubarLabelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { MenubarLabel } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { MenubarLabelProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { MenubarLabel } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
-const delegatedProps = reactiveOmit(props, "class", "inset")
+const props = defineProps<
+  MenubarLabelProps & { class?: HTMLAttributes["class"]; inset?: boolean }
+>();
+const delegatedProps = reactiveOmit(props, "class", "inset");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/menubar/MenubarMenu.vue b/code/fms/fms-vue/src/components/ui/menubar/MenubarMenu.vue
index 8a6c27ed..34de9515 100644
--- a/code/fms/fms-vue/src/components/ui/menubar/MenubarMenu.vue
+++ b/code/fms/fms-vue/src/components/ui/menubar/MenubarMenu.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { MenubarMenuProps } from "reka-ui"
-import { MenubarMenu } from "reka-ui"
+import type { MenubarMenuProps } from "reka-ui";
+import { MenubarMenu } from "reka-ui";
 
-const props = defineProps<MenubarMenuProps>()
+const props = defineProps<MenubarMenuProps>();
 </script>
 
 <template>
-  <MenubarMenu
-    data-slot="menubar-menu"
-    v-bind="props"
-  >
+  <MenubarMenu data-slot="menubar-menu" v-bind="props">
     <slot />
   </MenubarMenu>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/menubar/MenubarRadioGroup.vue b/code/fms/fms-vue/src/components/ui/menubar/MenubarRadioGroup.vue
index 9fc3a0f1..23ba7cab 100644
--- a/code/fms/fms-vue/src/components/ui/menubar/MenubarRadioGroup.vue
+++ b/code/fms/fms-vue/src/components/ui/menubar/MenubarRadioGroup.vue
@@ -1,21 +1,15 @@
 <script setup lang="ts">
-import type { MenubarRadioGroupEmits, MenubarRadioGroupProps } from "reka-ui"
-import {
-  MenubarRadioGroup,
-  useForwardPropsEmits,
-} from "reka-ui"
+import type { MenubarRadioGroupEmits, MenubarRadioGroupProps } from "reka-ui";
+import { MenubarRadioGroup, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<MenubarRadioGroupProps>()
-const emits = defineEmits<MenubarRadioGroupEmits>()
+const props = defineProps<MenubarRadioGroupProps>();
+const emits = defineEmits<MenubarRadioGroupEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <MenubarRadioGroup
-    data-slot="menubar-radio-group"
-    v-bind="forwarded"
-  >
+  <MenubarRadioGroup data-slot="menubar-radio-group" v-bind="forwarded">
     <slot />
   </MenubarRadioGroup>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/menubar/MenubarRadioItem.vue b/code/fms/fms-vue/src/components/ui/menubar/MenubarRadioItem.vue
index da6c8e0a..22d93060 100644
--- a/code/fms/fms-vue/src/components/ui/menubar/MenubarRadioItem.vue
+++ b/code/fms/fms-vue/src/components/ui/menubar/MenubarRadioItem.vue
@@ -1,31 +1,29 @@
 <script setup lang="ts">
-import type { MenubarRadioItemEmits, MenubarRadioItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Circle } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  MenubarItemIndicator,
-  MenubarRadioItem,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { MenubarRadioItemEmits, MenubarRadioItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Circle } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { MenubarItemIndicator, MenubarRadioItem, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<MenubarRadioItemEmits>()
+const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<MenubarRadioItemEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <MenubarRadioItem
     data-slot="menubar-radio-item"
     v-bind="forwarded"
-    :class="cn(
-      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
+    :class="
+      cn(
+        `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        props.class,
+      )
+    "
   >
     <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
       <MenubarItemIndicator>
diff --git a/code/fms/fms-vue/src/components/ui/menubar/MenubarSeparator.vue b/code/fms/fms-vue/src/components/ui/menubar/MenubarSeparator.vue
index f65b4239..3804645f 100644
--- a/code/fms/fms-vue/src/components/ui/menubar/MenubarSeparator.vue
+++ b/code/fms/fms-vue/src/components/ui/menubar/MenubarSeparator.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type { MenubarSeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { MenubarSeparator, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { MenubarSeparatorProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { MenubarSeparator, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
   <MenubarSeparator
     data-slot="menubar-separator"
-    :class=" cn('bg-border -mx-1 my-1 h-px', props.class)"
+    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
     v-bind="forwardedProps"
   />
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/menubar/MenubarShortcut.vue b/code/fms/fms-vue/src/components/ui/menubar/MenubarShortcut.vue
index ec8dc917..c1682584 100644
--- a/code/fms/fms-vue/src/components/ui/menubar/MenubarShortcut.vue
+++ b/code/fms/fms-vue/src/components/ui/menubar/MenubarShortcut.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/menubar/MenubarSub.vue b/code/fms/fms-vue/src/components/ui/menubar/MenubarSub.vue
index c99cf420..1c1825a0 100644
--- a/code/fms/fms-vue/src/components/ui/menubar/MenubarSub.vue
+++ b/code/fms/fms-vue/src/components/ui/menubar/MenubarSub.vue
@@ -1,24 +1,20 @@
 <script setup lang="ts">
-import type { MenubarSubEmits } from "reka-ui"
-import { MenubarSub, useForwardPropsEmits } from "reka-ui"
+import type { MenubarSubEmits } from "reka-ui";
+import { MenubarSub, useForwardPropsEmits } from "reka-ui";
 
 interface MenubarSubRootProps {
-  defaultOpen?: boolean
-  open?: boolean
+  defaultOpen?: boolean;
+  open?: boolean;
 }
 
-const props = defineProps<MenubarSubRootProps>()
-const emits = defineEmits<MenubarSubEmits>()
+const props = defineProps<MenubarSubRootProps>();
+const emits = defineEmits<MenubarSubEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <MenubarSub
-    v-slot="slotProps"
-    data-slot="menubar-sub"
-    v-bind="forwarded"
-  >
+  <MenubarSub v-slot="slotProps" data-slot="menubar-sub" v-bind="forwarded">
     <slot v-bind="slotProps" />
   </MenubarSub>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/menubar/MenubarSubContent.vue b/code/fms/fms-vue/src/components/ui/menubar/MenubarSubContent.vue
index f4831d36..df8e607f 100644
--- a/code/fms/fms-vue/src/components/ui/menubar/MenubarSubContent.vue
+++ b/code/fms/fms-vue/src/components/ui/menubar/MenubarSubContent.vue
@@ -1,24 +1,20 @@
 <script setup lang="ts">
-import type { MenubarSubContentEmits, MenubarSubContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  MenubarPortal,
-  MenubarSubContent,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { MenubarSubContentEmits, MenubarSubContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { MenubarPortal, MenubarSubContent, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<MenubarSubContentEmits>()
+const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<MenubarSubContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/menubar/MenubarSubTrigger.vue b/code/fms/fms-vue/src/components/ui/menubar/MenubarSubTrigger.vue
index 35650433..33544dbc 100644
--- a/code/fms/fms-vue/src/components/ui/menubar/MenubarSubTrigger.vue
+++ b/code/fms/fms-vue/src/components/ui/menubar/MenubarSubTrigger.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import type { MenubarSubTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { ChevronRight } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { MenubarSubTrigger, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { MenubarSubTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { ChevronRight } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { MenubarSubTrigger, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+const props = defineProps<
+  MenubarSubTriggerProps & { class?: HTMLAttributes["class"]; inset?: boolean }
+>();
 
-const delegatedProps = reactiveOmit(props, "class", "inset")
-const forwardedProps = useForwardProps(delegatedProps)
+const delegatedProps = reactiveOmit(props, "class", "inset");
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
@@ -17,10 +19,12 @@ const forwardedProps = useForwardProps(delegatedProps)
     data-slot="menubar-sub-trigger"
     :data-inset="inset ? '' : undefined"
     v-bind="forwardedProps"
-    :class="cn(
-      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',
-      props.class,
-    )"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',
+        props.class,
+      )
+    "
   >
     <slot />
     <ChevronRight class="ml-auto size-4" />
diff --git a/code/fms/fms-vue/src/components/ui/menubar/MenubarTrigger.vue b/code/fms/fms-vue/src/components/ui/menubar/MenubarTrigger.vue
index 47fbaad2..138bacc5 100644
--- a/code/fms/fms-vue/src/components/ui/menubar/MenubarTrigger.vue
+++ b/code/fms/fms-vue/src/components/ui/menubar/MenubarTrigger.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { MenubarTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { MenubarTrigger, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { MenubarTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { MenubarTrigger, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/menubar/index.ts b/code/fms/fms-vue/src/components/ui/menubar/index.ts
index bebbb780..7b21aadd 100644
--- a/code/fms/fms-vue/src/components/ui/menubar/index.ts
+++ b/code/fms/fms-vue/src/components/ui/menubar/index.ts
@@ -1,15 +1,15 @@
-export { default as Menubar } from "./Menubar.vue"
-export { default as MenubarCheckboxItem } from "./MenubarCheckboxItem.vue"
-export { default as MenubarContent } from "./MenubarContent.vue"
-export { default as MenubarGroup } from "./MenubarGroup.vue"
-export { default as MenubarItem } from "./MenubarItem.vue"
-export { default as MenubarLabel } from "./MenubarLabel.vue"
-export { default as MenubarMenu } from "./MenubarMenu.vue"
-export { default as MenubarRadioGroup } from "./MenubarRadioGroup.vue"
-export { default as MenubarRadioItem } from "./MenubarRadioItem.vue"
-export { default as MenubarSeparator } from "./MenubarSeparator.vue"
-export { default as MenubarShortcut } from "./MenubarShortcut.vue"
-export { default as MenubarSub } from "./MenubarSub.vue"
-export { default as MenubarSubContent } from "./MenubarSubContent.vue"
-export { default as MenubarSubTrigger } from "./MenubarSubTrigger.vue"
-export { default as MenubarTrigger } from "./MenubarTrigger.vue"
+export { default as Menubar } from "./Menubar.vue";
+export { default as MenubarCheckboxItem } from "./MenubarCheckboxItem.vue";
+export { default as MenubarContent } from "./MenubarContent.vue";
+export { default as MenubarGroup } from "./MenubarGroup.vue";
+export { default as MenubarItem } from "./MenubarItem.vue";
+export { default as MenubarLabel } from "./MenubarLabel.vue";
+export { default as MenubarMenu } from "./MenubarMenu.vue";
+export { default as MenubarRadioGroup } from "./MenubarRadioGroup.vue";
+export { default as MenubarRadioItem } from "./MenubarRadioItem.vue";
+export { default as MenubarSeparator } from "./MenubarSeparator.vue";
+export { default as MenubarShortcut } from "./MenubarShortcut.vue";
+export { default as MenubarSub } from "./MenubarSub.vue";
+export { default as MenubarSubContent } from "./MenubarSubContent.vue";
+export { default as MenubarSubTrigger } from "./MenubarSubTrigger.vue";
+export { default as MenubarTrigger } from "./MenubarTrigger.vue";
diff --git a/code/fms/fms-vue/src/components/ui/native-select/NativeSelect.vue b/code/fms/fms-vue/src/components/ui/native-select/NativeSelect.vue
index c54623c8..d34268b4 100644
--- a/code/fms/fms-vue/src/components/ui/native-select/NativeSelect.vue
+++ b/code/fms/fms-vue/src/components/ui/native-select/NativeSelect.vue
@@ -1,26 +1,29 @@
 <script setup lang="ts">
-import type { AcceptableValue } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { ChevronDownIcon } from "@lucide/vue"
-import { reactiveOmit, useVModel } from "@vueuse/core"
-import { cn } from "@/lib/utils"
+import type { AcceptableValue } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { ChevronDownIcon } from "@lucide/vue";
+import { reactiveOmit, useVModel } from "@vueuse/core";
+import { cn } from "@/lib/utils";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = defineProps<{ modelValue?: AcceptableValue | AcceptableValue[], class?: HTMLAttributes["class"] }>()
+const props = defineProps<{
+  modelValue?: AcceptableValue | AcceptableValue[];
+  class?: HTMLAttributes["class"];
+}>();
 
 const emit = defineEmits<{
-  "update:modelValue": AcceptableValue
-}>()
+  "update:modelValue": AcceptableValue;
+}>();
 
 const modelValue = useVModel(props, "modelValue", emit, {
   passive: true,
   defaultValue: "",
-})
+});
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
@@ -32,12 +35,14 @@ const delegatedProps = reactiveOmit(props, "class")
       v-bind="{ ...$attrs, ...delegatedProps }"
       v-model="modelValue"
       data-slot="native-select"
-      :class="cn(
-        'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
-        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-        props.class,
-      )"
+      :class="
+        cn(
+          'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
+          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3',
+          'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+          props.class,
+        )
+      "
     >
       <slot />
     </select>
diff --git a/code/fms/fms-vue/src/components/ui/native-select/NativeSelectOptGroup.vue b/code/fms/fms-vue/src/components/ui/native-select/NativeSelectOptGroup.vue
index d70cb6be..6eddf30d 100644
--- a/code/fms/fms-vue/src/components/ui/native-select/NativeSelectOptGroup.vue
+++ b/code/fms/fms-vue/src/components/ui/native-select/NativeSelectOptGroup.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
 </script>
 
 <template>
-  <optgroup data-slot="native-select-optgroup" :class="cn('bg-popover text-popover-foreground', props.class)">
+  <optgroup
+    data-slot="native-select-optgroup"
+    :class="cn('bg-popover text-popover-foreground', props.class)"
+  >
     <slot />
   </optgroup>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/native-select/NativeSelectOption.vue b/code/fms/fms-vue/src/components/ui/native-select/NativeSelectOption.vue
index 5fe52c6a..2318540b 100644
--- a/code/fms/fms-vue/src/components/ui/native-select/NativeSelectOption.vue
+++ b/code/fms/fms-vue/src/components/ui/native-select/NativeSelectOption.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
 </script>
 
 <template>
-  <option data-slot="native-select-option" :class="cn('bg-popover text-popover-foreground', props.class)">
+  <option
+    data-slot="native-select-option"
+    :class="cn('bg-popover text-popover-foreground', props.class)"
+  >
     <slot />
   </option>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/native-select/index.ts b/code/fms/fms-vue/src/components/ui/native-select/index.ts
index 04e92c7e..7ebf6049 100644
--- a/code/fms/fms-vue/src/components/ui/native-select/index.ts
+++ b/code/fms/fms-vue/src/components/ui/native-select/index.ts
@@ -1,3 +1,3 @@
-export { default as NativeSelect } from "./NativeSelect.vue"
-export { default as NativeSelectOptGroup } from "./NativeSelectOptGroup.vue"
-export { default as NativeSelectOption } from "./NativeSelectOption.vue"
+export { default as NativeSelect } from "./NativeSelect.vue";
+export { default as NativeSelectOptGroup } from "./NativeSelectOptGroup.vue";
+export { default as NativeSelectOption } from "./NativeSelectOption.vue";
diff --git a/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenu.vue b/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenu.vue
index 6042a77d..7e42bac1 100644
--- a/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenu.vue
+++ b/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenu.vue
@@ -1,24 +1,26 @@
 <script setup lang="ts">
-import type { NavigationMenuRootEmits, NavigationMenuRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  NavigationMenuRoot,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import NavigationMenuViewport from "./NavigationMenuViewport.vue"
+import type { NavigationMenuRootEmits, NavigationMenuRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { NavigationMenuRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+import NavigationMenuViewport from "./NavigationMenuViewport.vue";
 
-const props = withDefaults(defineProps<NavigationMenuRootProps & {
-  class?: HTMLAttributes["class"]
-  viewport?: boolean
-}>(), {
-  viewport: true,
-})
-const emits = defineEmits<NavigationMenuRootEmits>()
+const props = withDefaults(
+  defineProps<
+    NavigationMenuRootProps & {
+      class?: HTMLAttributes["class"];
+      viewport?: boolean;
+    }
+  >(),
+  {
+    viewport: true,
+  },
+);
+const emits = defineEmits<NavigationMenuRootEmits>();
 
-const delegatedProps = reactiveOmit(props, "class", "viewport")
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const delegatedProps = reactiveOmit(props, "class", "viewport");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -27,7 +29,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="navigation-menu"
     :data-viewport="viewport"
     v-bind="forwarded"
-    :class="cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', props.class)"
+    :class="
+      cn(
+        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+        props.class,
+      )
+    "
   >
     <slot v-bind="slotProps" />
     <NavigationMenuViewport v-if="viewport" />
diff --git a/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuContent.vue b/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuContent.vue
index 395dc2df..7fa880dc 100644
--- a/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuContent.vue
+++ b/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuContent.vue
@@ -1,30 +1,29 @@
 <script setup lang="ts">
-import type { NavigationMenuContentEmits, NavigationMenuContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  NavigationMenuContent,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { NavigationMenuContentEmits, NavigationMenuContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { NavigationMenuContent, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<NavigationMenuContentEmits>()
+const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<NavigationMenuContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <NavigationMenuContent
     data-slot="navigation-menu-content"
     v-bind="forwarded"
-    :class="cn(
-      'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
-      'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
-      props.class,
-    )"
+    :class="
+      cn(
+        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
+        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+        props.class,
+      )
+    "
   >
     <slot />
   </NavigationMenuContent>
diff --git a/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuIndicator.vue b/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuIndicator.vue
index 2558371a..52e44c7f 100644
--- a/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuIndicator.vue
+++ b/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuIndicator.vue
@@ -1,22 +1,27 @@
 <script setup lang="ts">
-import type { NavigationMenuIndicatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { NavigationMenuIndicator, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { NavigationMenuIndicatorProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { NavigationMenuIndicator, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
   <NavigationMenuIndicator
     data-slot="navigation-menu-indicator"
     v-bind="forwardedProps"
-    :class="cn('data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden', props.class)"
+    :class="
+      cn(
+        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+        props.class,
+      )
+    "
   >
     <div class="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
   </NavigationMenuIndicator>
diff --git a/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuItem.vue b/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuItem.vue
index 1a8595b8..8a859ccb 100644
--- a/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuItem.vue
+++ b/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuItem.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { NavigationMenuItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { NavigationMenuItem } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { NavigationMenuItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { NavigationMenuItem } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<NavigationMenuItemProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<NavigationMenuItemProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuLink.vue b/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuLink.vue
index 790f5109..60c31706 100644
--- a/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuLink.vue
+++ b/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuLink.vue
@@ -1,25 +1,27 @@
 <script setup lang="ts">
-import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  NavigationMenuLink,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { NavigationMenuLink, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<NavigationMenuLinkProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<NavigationMenuLinkEmits>()
+const props = defineProps<NavigationMenuLinkProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<NavigationMenuLinkEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const delegatedProps = reactiveOmit(props, "class");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <NavigationMenuLink
     data-slot="navigation-menu-link"
     v-bind="forwarded"
-    :class="cn(`data-active:focus:bg-accent data-active:hover:bg-accent data-active:bg-accent/50 data-active:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4`, props.class)"
+    :class="
+      cn(
+        `data-active:focus:bg-accent data-active:hover:bg-accent data-active:bg-accent/50 data-active:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4`,
+        props.class,
+      )
+    "
   >
     <slot />
   </NavigationMenuLink>
diff --git a/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuList.vue b/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuList.vue
index a702d706..432e1c97 100644
--- a/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuList.vue
+++ b/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuList.vue
@@ -1,27 +1,22 @@
 <script setup lang="ts">
-import type { NavigationMenuListProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { NavigationMenuList, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { NavigationMenuListProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { NavigationMenuList, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
   <NavigationMenuList
     data-slot="navigation-menu-list"
     v-bind="forwardedProps"
-    :class="
-      cn(
-        'group flex flex-1 list-none items-center justify-center gap-1',
-        props.class,
-      )
-    "
+    :class="cn('group flex flex-1 list-none items-center justify-center gap-1', props.class)"
   >
     <slot />
   </NavigationMenuList>
diff --git a/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuTrigger.vue b/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuTrigger.vue
index ae9626ee..3f54adab 100644
--- a/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuTrigger.vue
+++ b/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -1,20 +1,17 @@
 <script setup lang="ts">
-import type { NavigationMenuTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { ChevronDown } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  NavigationMenuTrigger,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import { navigationMenuTriggerStyle } from "."
+import type { NavigationMenuTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { ChevronDown } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { NavigationMenuTrigger, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { navigationMenuTriggerStyle } from ".";
 
-const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuViewport.vue b/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuViewport.vue
index b08e43ae..eeaae3d7 100644
--- a/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuViewport.vue
+++ b/code/fms/fms-vue/src/components/ui/navigation-menu/NavigationMenuViewport.vue
@@ -1,18 +1,15 @@
 <script setup lang="ts">
-import type { NavigationMenuViewportProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  NavigationMenuViewport,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { NavigationMenuViewportProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { NavigationMenuViewport, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/navigation-menu/index.ts b/code/fms/fms-vue/src/components/ui/navigation-menu/index.ts
index d8244d3f..729de13f 100644
--- a/code/fms/fms-vue/src/components/ui/navigation-menu/index.ts
+++ b/code/fms/fms-vue/src/components/ui/navigation-menu/index.ts
@@ -1,14 +1,14 @@
-import { cva } from "class-variance-authority"
+import { cva } from "class-variance-authority";
 
-export { default as NavigationMenu } from "./NavigationMenu.vue"
-export { default as NavigationMenuContent } from "./NavigationMenuContent.vue"
-export { default as NavigationMenuIndicator } from "./NavigationMenuIndicator.vue"
-export { default as NavigationMenuItem } from "./NavigationMenuItem.vue"
-export { default as NavigationMenuLink } from "./NavigationMenuLink.vue"
-export { default as NavigationMenuList } from "./NavigationMenuList.vue"
-export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.vue"
-export { default as NavigationMenuViewport } from "./NavigationMenuViewport.vue"
+export { default as NavigationMenu } from "./NavigationMenu.vue";
+export { default as NavigationMenuContent } from "./NavigationMenuContent.vue";
+export { default as NavigationMenuIndicator } from "./NavigationMenuIndicator.vue";
+export { default as NavigationMenuItem } from "./NavigationMenuItem.vue";
+export { default as NavigationMenuLink } from "./NavigationMenuLink.vue";
+export { default as NavigationMenuList } from "./NavigationMenuList.vue";
+export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.vue";
+export { default as NavigationMenuViewport } from "./NavigationMenuViewport.vue";
 
 export const navigationMenuTriggerStyle = cva(
   "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-3 focus-visible:outline-1",
-)
+);
diff --git a/code/fms/fms-vue/src/components/ui/pagination/Pagination.vue b/code/fms/fms-vue/src/components/ui/pagination/Pagination.vue
index d410b242..1f00f20f 100644
--- a/code/fms/fms-vue/src/components/ui/pagination/Pagination.vue
+++ b/code/fms/fms-vue/src/components/ui/pagination/Pagination.vue
@@ -1,17 +1,19 @@
 <script setup lang="ts">
-import type { PaginationRootEmits, PaginationRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { PaginationRoot, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { PaginationRootEmits, PaginationRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { PaginationRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<PaginationRootProps & {
-  class?: HTMLAttributes["class"]
-}>()
-const emits = defineEmits<PaginationRootEmits>()
+const props = defineProps<
+  PaginationRootProps & {
+    class?: HTMLAttributes["class"];
+  }
+>();
+const emits = defineEmits<PaginationRootEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const delegatedProps = reactiveOmit(props, "class");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/pagination/PaginationContent.vue b/code/fms/fms-vue/src/components/ui/pagination/PaginationContent.vue
index 5150b496..e1ba1fe7 100644
--- a/code/fms/fms-vue/src/components/ui/pagination/PaginationContent.vue
+++ b/code/fms/fms-vue/src/components/ui/pagination/PaginationContent.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { PaginationListProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { PaginationList } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { PaginationListProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { PaginationList } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<PaginationListProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<PaginationListProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/pagination/PaginationEllipsis.vue b/code/fms/fms-vue/src/components/ui/pagination/PaginationEllipsis.vue
index 5d2b15da..a17c8fe6 100644
--- a/code/fms/fms-vue/src/components/ui/pagination/PaginationEllipsis.vue
+++ b/code/fms/fms-vue/src/components/ui/pagination/PaginationEllipsis.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { PaginationEllipsisProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { MoreHorizontal } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { PaginationEllipsis } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { PaginationEllipsisProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { MoreHorizontal } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { PaginationEllipsis } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/pagination/PaginationFirst.vue b/code/fms/fms-vue/src/components/ui/pagination/PaginationFirst.vue
index 7e2a86f7..26673e7e 100644
--- a/code/fms/fms-vue/src/components/ui/pagination/PaginationFirst.vue
+++ b/code/fms/fms-vue/src/components/ui/pagination/PaginationFirst.vue
@@ -1,22 +1,27 @@
 <script setup lang="ts">
-import type { PaginationFirstProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from '@/components/ui/button'
-import { ChevronLeftIcon } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { PaginationFirst, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
+import type { PaginationFirstProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { ButtonVariants } from "@/components/ui/button";
+import { ChevronLeftIcon } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { PaginationFirst, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const props = withDefaults(defineProps<PaginationFirstProps & {
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
-}>(), {
-  size: "default",
-})
+const props = withDefaults(
+  defineProps<
+    PaginationFirstProps & {
+      size?: ButtonVariants["size"];
+      class?: HTMLAttributes["class"];
+    }
+  >(),
+  {
+    size: "default",
+  },
+);
 
-const delegatedProps = reactiveOmit(props, "class", "size")
-const forwarded = useForwardProps(delegatedProps)
+const delegatedProps = reactiveOmit(props, "class", "size");
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/pagination/PaginationItem.vue b/code/fms/fms-vue/src/components/ui/pagination/PaginationItem.vue
index bc03720e..f969bb12 100644
--- a/code/fms/fms-vue/src/components/ui/pagination/PaginationItem.vue
+++ b/code/fms/fms-vue/src/components/ui/pagination/PaginationItem.vue
@@ -1,33 +1,41 @@
 <script setup lang="ts">
-import type { PaginationListItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from '@/components/ui/button'
-import { reactiveOmit } from "@vueuse/core"
-import { PaginationListItem } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
+import type { PaginationListItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { ButtonVariants } from "@/components/ui/button";
+import { reactiveOmit } from "@vueuse/core";
+import { PaginationListItem } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const props = withDefaults(defineProps<PaginationListItemProps & {
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
-  isActive?: boolean
-}>(), {
-  size: "icon",
-})
+const props = withDefaults(
+  defineProps<
+    PaginationListItemProps & {
+      size?: ButtonVariants["size"];
+      class?: HTMLAttributes["class"];
+      isActive?: boolean;
+    }
+  >(),
+  {
+    size: "icon",
+  },
+);
 
-const delegatedProps = reactiveOmit(props, "class", "size", "isActive")
+const delegatedProps = reactiveOmit(props, "class", "size", "isActive");
 </script>
 
 <template>
   <PaginationListItem
     data-slot="pagination-item"
     v-bind="delegatedProps"
-    :class="cn(
-      buttonVariants({
-        variant: isActive ? 'outline' : 'ghost',
-        size,
-      }),
-      props.class)"
+    :class="
+      cn(
+        buttonVariants({
+          variant: isActive ? 'outline' : 'ghost',
+          size,
+        }),
+        props.class,
+      )
+    "
   >
     <slot />
   </PaginationListItem>
diff --git a/code/fms/fms-vue/src/components/ui/pagination/PaginationLast.vue b/code/fms/fms-vue/src/components/ui/pagination/PaginationLast.vue
index 698cdab0..40ad2de5 100644
--- a/code/fms/fms-vue/src/components/ui/pagination/PaginationLast.vue
+++ b/code/fms/fms-vue/src/components/ui/pagination/PaginationLast.vue
@@ -1,22 +1,27 @@
 <script setup lang="ts">
-import type { PaginationLastProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from '@/components/ui/button'
-import { ChevronRightIcon } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { PaginationLast, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
+import type { PaginationLastProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { ButtonVariants } from "@/components/ui/button";
+import { ChevronRightIcon } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { PaginationLast, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const props = withDefaults(defineProps<PaginationLastProps & {
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
-}>(), {
-  size: "default",
-})
+const props = withDefaults(
+  defineProps<
+    PaginationLastProps & {
+      size?: ButtonVariants["size"];
+      class?: HTMLAttributes["class"];
+    }
+  >(),
+  {
+    size: "default",
+  },
+);
 
-const delegatedProps = reactiveOmit(props, "class", "size")
-const forwarded = useForwardProps(delegatedProps)
+const delegatedProps = reactiveOmit(props, "class", "size");
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/pagination/PaginationNext.vue b/code/fms/fms-vue/src/components/ui/pagination/PaginationNext.vue
index adf9c0ae..c589d8c8 100644
--- a/code/fms/fms-vue/src/components/ui/pagination/PaginationNext.vue
+++ b/code/fms/fms-vue/src/components/ui/pagination/PaginationNext.vue
@@ -1,22 +1,27 @@
 <script setup lang="ts">
-import type { PaginationNextProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from '@/components/ui/button'
-import { ChevronRightIcon } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { PaginationNext, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
+import type { PaginationNextProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { ButtonVariants } from "@/components/ui/button";
+import { ChevronRightIcon } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { PaginationNext, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const props = withDefaults(defineProps<PaginationNextProps & {
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
-}>(), {
-  size: "default",
-})
+const props = withDefaults(
+  defineProps<
+    PaginationNextProps & {
+      size?: ButtonVariants["size"];
+      class?: HTMLAttributes["class"];
+    }
+  >(),
+  {
+    size: "default",
+  },
+);
 
-const delegatedProps = reactiveOmit(props, "class", "size")
-const forwarded = useForwardProps(delegatedProps)
+const delegatedProps = reactiveOmit(props, "class", "size");
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/pagination/PaginationPrevious.vue b/code/fms/fms-vue/src/components/ui/pagination/PaginationPrevious.vue
index bcf8999a..3c6710b8 100644
--- a/code/fms/fms-vue/src/components/ui/pagination/PaginationPrevious.vue
+++ b/code/fms/fms-vue/src/components/ui/pagination/PaginationPrevious.vue
@@ -1,22 +1,27 @@
 <script setup lang="ts">
-import type { PaginationPrevProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from '@/components/ui/button'
-import { ChevronLeftIcon } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { PaginationPrev, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from '@/components/ui/button'
+import type { PaginationPrevProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { ButtonVariants } from "@/components/ui/button";
+import { ChevronLeftIcon } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { PaginationPrev, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const props = withDefaults(defineProps<PaginationPrevProps & {
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
-}>(), {
-  size: "default",
-})
+const props = withDefaults(
+  defineProps<
+    PaginationPrevProps & {
+      size?: ButtonVariants["size"];
+      class?: HTMLAttributes["class"];
+    }
+  >(),
+  {
+    size: "default",
+  },
+);
 
-const delegatedProps = reactiveOmit(props, "class", "size")
-const forwarded = useForwardProps(delegatedProps)
+const delegatedProps = reactiveOmit(props, "class", "size");
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/pagination/index.ts b/code/fms/fms-vue/src/components/ui/pagination/index.ts
index 51ae7fdd..349edff7 100644
--- a/code/fms/fms-vue/src/components/ui/pagination/index.ts
+++ b/code/fms/fms-vue/src/components/ui/pagination/index.ts
@@ -1,8 +1,8 @@
-export { default as Pagination } from "./Pagination.vue"
-export { default as PaginationContent } from "./PaginationContent.vue"
-export { default as PaginationEllipsis } from "./PaginationEllipsis.vue"
-export { default as PaginationFirst } from "./PaginationFirst.vue"
-export { default as PaginationItem } from "./PaginationItem.vue"
-export { default as PaginationLast } from "./PaginationLast.vue"
-export { default as PaginationNext } from "./PaginationNext.vue"
-export { default as PaginationPrevious } from "./PaginationPrevious.vue"
+export { default as Pagination } from "./Pagination.vue";
+export { default as PaginationContent } from "./PaginationContent.vue";
+export { default as PaginationEllipsis } from "./PaginationEllipsis.vue";
+export { default as PaginationFirst } from "./PaginationFirst.vue";
+export { default as PaginationItem } from "./PaginationItem.vue";
+export { default as PaginationLast } from "./PaginationLast.vue";
+export { default as PaginationNext } from "./PaginationNext.vue";
+export { default as PaginationPrevious } from "./PaginationPrevious.vue";
diff --git a/code/fms/fms-vue/src/components/ui/popover/Popover.vue b/code/fms/fms-vue/src/components/ui/popover/Popover.vue
index 4efdb98a..e43a385b 100644
--- a/code/fms/fms-vue/src/components/ui/popover/Popover.vue
+++ b/code/fms/fms-vue/src/components/ui/popover/Popover.vue
@@ -1,19 +1,15 @@
 <script setup lang="ts">
-import type { PopoverRootEmits, PopoverRootProps } from "reka-ui"
-import { PopoverRoot, useForwardPropsEmits } from "reka-ui"
+import type { PopoverRootEmits, PopoverRootProps } from "reka-ui";
+import { PopoverRoot, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<PopoverRootProps>()
-const emits = defineEmits<PopoverRootEmits>()
+const props = defineProps<PopoverRootProps>();
+const emits = defineEmits<PopoverRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <PopoverRoot
-    v-slot="slotProps"
-    data-slot="popover"
-    v-bind="forwarded"
-  >
+  <PopoverRoot v-slot="slotProps" data-slot="popover" v-bind="forwarded">
     <slot v-bind="slotProps" />
   </PopoverRoot>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/popover/PopoverAnchor.vue b/code/fms/fms-vue/src/components/ui/popover/PopoverAnchor.vue
index 49e01dbc..44a42965 100644
--- a/code/fms/fms-vue/src/components/ui/popover/PopoverAnchor.vue
+++ b/code/fms/fms-vue/src/components/ui/popover/PopoverAnchor.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { PopoverAnchorProps } from "reka-ui"
-import { PopoverAnchor } from "reka-ui"
+import type { PopoverAnchorProps } from "reka-ui";
+import { PopoverAnchor } from "reka-ui";
 
-const props = defineProps<PopoverAnchorProps>()
+const props = defineProps<PopoverAnchorProps>();
 </script>
 
 <template>
-  <PopoverAnchor
-    data-slot="popover-anchor"
-    v-bind="props"
-  >
+  <PopoverAnchor data-slot="popover-anchor" v-bind="props">
     <slot />
   </PopoverAnchor>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/popover/PopoverContent.vue b/code/fms/fms-vue/src/components/ui/popover/PopoverContent.vue
index 27ebbc87..2f9cbb1b 100644
--- a/code/fms/fms-vue/src/components/ui/popover/PopoverContent.vue
+++ b/code/fms/fms-vue/src/components/ui/popover/PopoverContent.vue
@@ -1,17 +1,13 @@
 <script setup lang="ts">
-import type { PopoverContentEmits, PopoverContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  PopoverContent,
-  PopoverPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { PopoverContentEmits, PopoverContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { PopoverContent, PopoverPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
 const props = withDefaults(
   defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(),
@@ -19,12 +15,12 @@ const props = withDefaults(
     align: "center",
     sideOffset: 4,
   },
-)
-const emits = defineEmits<PopoverContentEmits>()
+);
+const emits = defineEmits<PopoverContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/popover/PopoverTrigger.vue b/code/fms/fms-vue/src/components/ui/popover/PopoverTrigger.vue
index fd3b4974..748f0283 100644
--- a/code/fms/fms-vue/src/components/ui/popover/PopoverTrigger.vue
+++ b/code/fms/fms-vue/src/components/ui/popover/PopoverTrigger.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { PopoverTriggerProps } from "reka-ui"
-import { PopoverTrigger } from "reka-ui"
+import type { PopoverTriggerProps } from "reka-ui";
+import { PopoverTrigger } from "reka-ui";
 
-const props = defineProps<PopoverTriggerProps>()
+const props = defineProps<PopoverTriggerProps>();
 </script>
 
 <template>
-  <PopoverTrigger
-    data-slot="popover-trigger"
-    v-bind="props"
-  >
+  <PopoverTrigger data-slot="popover-trigger" v-bind="props">
     <slot />
   </PopoverTrigger>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/popover/index.ts b/code/fms/fms-vue/src/components/ui/popover/index.ts
index 66edf89f..94275eb3 100644
--- a/code/fms/fms-vue/src/components/ui/popover/index.ts
+++ b/code/fms/fms-vue/src/components/ui/popover/index.ts
@@ -1,4 +1,4 @@
-export { default as Popover } from "./Popover.vue"
-export { default as PopoverAnchor } from "./PopoverAnchor.vue"
-export { default as PopoverContent } from "./PopoverContent.vue"
-export { default as PopoverTrigger } from "./PopoverTrigger.vue"
+export { default as Popover } from "./Popover.vue";
+export { default as PopoverAnchor } from "./PopoverAnchor.vue";
+export { default as PopoverContent } from "./PopoverContent.vue";
+export { default as PopoverTrigger } from "./PopoverTrigger.vue";
diff --git a/code/fms/fms-vue/src/components/ui/progress/Progress.vue b/code/fms/fms-vue/src/components/ui/progress/Progress.vue
index 5532af7a..3d245153 100644
--- a/code/fms/fms-vue/src/components/ui/progress/Progress.vue
+++ b/code/fms/fms-vue/src/components/ui/progress/Progress.vue
@@ -1,33 +1,22 @@
 <script setup lang="ts">
-import type { ProgressRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  ProgressIndicator,
-  ProgressRoot,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ProgressRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ProgressIndicator, ProgressRoot } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = withDefaults(
-  defineProps<ProgressRootProps & { class?: HTMLAttributes["class"] }>(),
-  {
-    modelValue: 0,
-  },
-)
+const props = withDefaults(defineProps<ProgressRootProps & { class?: HTMLAttributes["class"] }>(), {
+  modelValue: 0,
+});
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
   <ProgressRoot
     data-slot="progress"
     v-bind="delegatedProps"
-    :class="
-      cn(
-        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
-        props.class,
-      )
-    "
+    :class="cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', props.class)"
   >
     <ProgressIndicator
       data-slot="progress-indicator"
diff --git a/code/fms/fms-vue/src/components/ui/progress/index.ts b/code/fms/fms-vue/src/components/ui/progress/index.ts
index 8598b969..e934a9bb 100644
--- a/code/fms/fms-vue/src/components/ui/progress/index.ts
+++ b/code/fms/fms-vue/src/components/ui/progress/index.ts
@@ -1 +1 @@
-export { default as Progress } from "./Progress.vue"
+export { default as Progress } from "./Progress.vue";
diff --git a/code/fms/fms-vue/src/components/ui/radio-group/RadioGroup.vue b/code/fms/fms-vue/src/components/ui/radio-group/RadioGroup.vue
index 54045c42..6fb9f80a 100644
--- a/code/fms/fms-vue/src/components/ui/radio-group/RadioGroup.vue
+++ b/code/fms/fms-vue/src/components/ui/radio-group/RadioGroup.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { RadioGroupRootEmits, RadioGroupRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { RadioGroupRoot, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { RadioGroupRootEmits, RadioGroupRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { RadioGroupRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<RadioGroupRootEmits>()
+const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<RadioGroupRootEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/radio-group/RadioGroupItem.vue b/code/fms/fms-vue/src/components/ui/radio-group/RadioGroupItem.vue
index 1a2142f3..be15ff75 100644
--- a/code/fms/fms-vue/src/components/ui/radio-group/RadioGroupItem.vue
+++ b/code/fms/fms-vue/src/components/ui/radio-group/RadioGroupItem.vue
@@ -1,20 +1,16 @@
 <script setup lang="ts">
-import type { RadioGroupItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { CircleIcon } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  RadioGroupIndicator,
-  RadioGroupItem,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { RadioGroupItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { CircleIcon } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { RadioGroupIndicator, RadioGroupItem, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
@@ -33,7 +29,9 @@ const forwardedProps = useForwardProps(delegatedProps)
       class="relative flex items-center justify-center"
     >
       <slot>
-        <CircleIcon class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+        <CircleIcon
+          class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2"
+        />
       </slot>
     </RadioGroupIndicator>
   </RadioGroupItem>
diff --git a/code/fms/fms-vue/src/components/ui/radio-group/index.ts b/code/fms/fms-vue/src/components/ui/radio-group/index.ts
index 7cb0e3b1..1387e434 100644
--- a/code/fms/fms-vue/src/components/ui/radio-group/index.ts
+++ b/code/fms/fms-vue/src/components/ui/radio-group/index.ts
@@ -1,2 +1,2 @@
-export { default as RadioGroup } from "./RadioGroup.vue"
-export { default as RadioGroupItem } from "./RadioGroupItem.vue"
+export { default as RadioGroup } from "./RadioGroup.vue";
+export { default as RadioGroupItem } from "./RadioGroupItem.vue";
diff --git a/code/fms/fms-vue/src/components/ui/resizable/ResizableHandle.vue b/code/fms/fms-vue/src/components/ui/resizable/ResizableHandle.vue
index a804c38f..4d958ebd 100644
--- a/code/fms/fms-vue/src/components/ui/resizable/ResizableHandle.vue
+++ b/code/fms/fms-vue/src/components/ui/resizable/ResizableHandle.vue
@@ -1,23 +1,30 @@
 <script setup lang="ts">
-import type { SplitterResizeHandleEmits, SplitterResizeHandleProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { GripVertical } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SplitterResizeHandle, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { SplitterResizeHandleEmits, SplitterResizeHandleProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { GripVertical } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { SplitterResizeHandle, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes["class"], withHandle?: boolean }>()
-const emits = defineEmits<SplitterResizeHandleEmits>()
+const props = defineProps<
+  SplitterResizeHandleProps & { class?: HTMLAttributes["class"]; withHandle?: boolean }
+>();
+const emits = defineEmits<SplitterResizeHandleEmits>();
 
-const delegatedProps = reactiveOmit(props, "class", "withHandle")
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const delegatedProps = reactiveOmit(props, "class", "withHandle");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <SplitterResizeHandle
     data-slot="resizable-handle"
     v-bind="forwarded"
-    :class="cn('bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)"
+    :class="
+      cn(
+        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90',
+        props.class,
+      )
+    "
   >
     <template v-if="props.withHandle">
       <div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
diff --git a/code/fms/fms-vue/src/components/ui/resizable/ResizablePanel.vue b/code/fms/fms-vue/src/components/ui/resizable/ResizablePanel.vue
index e52e1ecb..88b73e64 100644
--- a/code/fms/fms-vue/src/components/ui/resizable/ResizablePanel.vue
+++ b/code/fms/fms-vue/src/components/ui/resizable/ResizablePanel.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { SplitterPanelEmits, SplitterPanelProps } from "reka-ui"
-import { SplitterPanel, useForwardExpose, useForwardPropsEmits } from "reka-ui"
+import type { SplitterPanelEmits, SplitterPanelProps } from "reka-ui";
+import { SplitterPanel, useForwardExpose, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<SplitterPanelProps>()
-const emits = defineEmits<SplitterPanelEmits>()
+const props = defineProps<SplitterPanelProps>();
+const emits = defineEmits<SplitterPanelEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
-const { forwardRef } = useForwardExpose()
+const forwarded = useForwardPropsEmits(props, emits);
+const { forwardRef } = useForwardExpose();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/resizable/ResizablePanelGroup.vue b/code/fms/fms-vue/src/components/ui/resizable/ResizablePanelGroup.vue
index dd55b50c..0f1f27b2 100644
--- a/code/fms/fms-vue/src/components/ui/resizable/ResizablePanelGroup.vue
+++ b/code/fms/fms-vue/src/components/ui/resizable/ResizablePanelGroup.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { SplitterGroupEmits, SplitterGroupProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SplitterGroup, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { SplitterGroupEmits, SplitterGroupProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { SplitterGroup, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<SplitterGroupEmits>()
+const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<SplitterGroupEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/resizable/index.ts b/code/fms/fms-vue/src/components/ui/resizable/index.ts
index 89e5d770..090ee08b 100644
--- a/code/fms/fms-vue/src/components/ui/resizable/index.ts
+++ b/code/fms/fms-vue/src/components/ui/resizable/index.ts
@@ -1,3 +1,3 @@
-export { default as ResizableHandle } from "./ResizableHandle.vue"
-export { default as ResizablePanel } from "./ResizablePanel.vue"
-export { default as ResizablePanelGroup } from "./ResizablePanelGroup.vue"
+export { default as ResizableHandle } from "./ResizableHandle.vue";
+export { default as ResizablePanel } from "./ResizablePanel.vue";
+export { default as ResizablePanelGroup } from "./ResizablePanelGroup.vue";
diff --git a/code/fms/fms-vue/src/components/ui/scroll-area/ScrollArea.vue b/code/fms/fms-vue/src/components/ui/scroll-area/ScrollArea.vue
index 1cb3214c..1828c570 100644
--- a/code/fms/fms-vue/src/components/ui/scroll-area/ScrollArea.vue
+++ b/code/fms/fms-vue/src/components/ui/scroll-area/ScrollArea.vue
@@ -1,18 +1,14 @@
 <script setup lang="ts">
-import type { ScrollAreaRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  ScrollAreaCorner,
-  ScrollAreaRoot,
-  ScrollAreaViewport,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import ScrollBar from "./ScrollBar.vue"
+import type { ScrollAreaRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport } from "reka-ui";
+import { cn } from "@/lib/utils";
+import ScrollBar from "./ScrollBar.vue";
 
-const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/scroll-area/ScrollBar.vue b/code/fms/fms-vue/src/components/ui/scroll-area/ScrollBar.vue
index a0b6f9b7..8c54c8df 100644
--- a/code/fms/fms-vue/src/components/ui/scroll-area/ScrollBar.vue
+++ b/code/fms/fms-vue/src/components/ui/scroll-area/ScrollBar.vue
@@ -1,15 +1,18 @@
 <script setup lang="ts">
-import type { ScrollAreaScrollbarProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ScrollAreaScrollbar, ScrollAreaThumb } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ScrollAreaScrollbarProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ScrollAreaScrollbar, ScrollAreaThumb } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes["class"] }>(), {
-  orientation: "vertical",
-})
+const props = withDefaults(
+  defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    orientation: "vertical",
+  },
+);
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
@@ -17,16 +20,14 @@ const delegatedProps = reactiveOmit(props, "class")
     data-slot="scroll-area-scrollbar"
     v-bind="delegatedProps"
     :class="
-      cn('flex touch-none p-px transition-colors select-none',
-         orientation === 'vertical'
-           && 'h-full w-2.5 border-l border-l-transparent',
-         orientation === 'horizontal'
-           && 'h-2.5 flex-col border-t border-t-transparent',
-         props.class)"
+      cn(
+        'flex touch-none p-px transition-colors select-none',
+        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',
+        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
+        props.class,
+      )
+    "
   >
-    <ScrollAreaThumb
-      data-slot="scroll-area-thumb"
-      class="bg-border relative flex-1 rounded-full"
-    />
+    <ScrollAreaThumb data-slot="scroll-area-thumb" class="bg-border relative flex-1 rounded-full" />
   </ScrollAreaScrollbar>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/scroll-area/index.ts b/code/fms/fms-vue/src/components/ui/scroll-area/index.ts
index c416759c..cd655e02 100644
--- a/code/fms/fms-vue/src/components/ui/scroll-area/index.ts
+++ b/code/fms/fms-vue/src/components/ui/scroll-area/index.ts
@@ -1,2 +1,2 @@
-export { default as ScrollArea } from "./ScrollArea.vue"
-export { default as ScrollBar } from "./ScrollBar.vue"
+export { default as ScrollArea } from "./ScrollArea.vue";
+export { default as ScrollBar } from "./ScrollBar.vue";
diff --git a/code/fms/fms-vue/src/components/ui/select/Select.vue b/code/fms/fms-vue/src/components/ui/select/Select.vue
index c94bbe88..f58547d1 100644
--- a/code/fms/fms-vue/src/components/ui/select/Select.vue
+++ b/code/fms/fms-vue/src/components/ui/select/Select.vue
@@ -1,19 +1,15 @@
 <script setup lang="ts">
-import type { SelectRootEmits, SelectRootProps } from "reka-ui"
-import { SelectRoot, useForwardPropsEmits } from "reka-ui"
+import type { SelectRootEmits, SelectRootProps } from "reka-ui";
+import { SelectRoot, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<SelectRootProps>()
-const emits = defineEmits<SelectRootEmits>()
+const props = defineProps<SelectRootProps>();
+const emits = defineEmits<SelectRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <SelectRoot
-    v-slot="slotProps"
-    data-slot="select"
-    v-bind="forwarded"
-  >
+  <SelectRoot v-slot="slotProps" data-slot="select" v-bind="forwarded">
     <slot v-bind="slotProps" />
   </SelectRoot>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/select/SelectContent.vue b/code/fms/fms-vue/src/components/ui/select/SelectContent.vue
index 1dc29a04..d026dcb9 100644
--- a/code/fms/fms-vue/src/components/ui/select/SelectContent.vue
+++ b/code/fms/fms-vue/src/components/ui/select/SelectContent.vue
@@ -1,31 +1,26 @@
 <script setup lang="ts">
-import type { SelectContentEmits, SelectContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  SelectContent,
-  SelectPortal,
-  SelectViewport,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import { SelectScrollDownButton, SelectScrollUpButton } from "."
+import type { SelectContentEmits, SelectContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { SelectContent, SelectPortal, SelectViewport, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { SelectScrollDownButton, SelectScrollUpButton } from ".";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
 const props = withDefaults(
   defineProps<SelectContentProps & { class?: HTMLAttributes["class"] }>(),
   {
     position: "popper",
   },
-)
-const emits = defineEmits<SelectContentEmits>()
+);
+const emits = defineEmits<SelectContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -33,16 +28,25 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <SelectContent
       data-slot="select-content"
       v-bind="{ ...$attrs, ...forwarded }"
-      :class="cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
-        position === 'popper'
-          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        props.class,
-      )
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          props.class,
+        )
       "
     >
       <SelectScrollUpButton />
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-(--reka-select-trigger-height) w-full min-w-(--reka-select-trigger-width) scroll-my-1')">
+      <SelectViewport
+        :class="
+          cn(
+            'p-1',
+            position === 'popper' &&
+              'h-(--reka-select-trigger-height) w-full min-w-(--reka-select-trigger-width) scroll-my-1',
+          )
+        "
+      >
         <slot />
       </SelectViewport>
       <SelectScrollDownButton />
diff --git a/code/fms/fms-vue/src/components/ui/select/SelectGroup.vue b/code/fms/fms-vue/src/components/ui/select/SelectGroup.vue
index e981c6c5..defbcfec 100644
--- a/code/fms/fms-vue/src/components/ui/select/SelectGroup.vue
+++ b/code/fms/fms-vue/src/components/ui/select/SelectGroup.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { SelectGroupProps } from "reka-ui"
-import { SelectGroup } from "reka-ui"
+import type { SelectGroupProps } from "reka-ui";
+import { SelectGroup } from "reka-ui";
 
-const props = defineProps<SelectGroupProps>()
+const props = defineProps<SelectGroupProps>();
 </script>
 
 <template>
-  <SelectGroup
-    data-slot="select-group"
-    v-bind="props"
-  >
+  <SelectGroup data-slot="select-group" v-bind="props">
     <slot />
   </SelectGroup>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/select/SelectItem.vue b/code/fms/fms-vue/src/components/ui/select/SelectItem.vue
index 80a64602..f007bd70 100644
--- a/code/fms/fms-vue/src/components/ui/select/SelectItem.vue
+++ b/code/fms/fms-vue/src/components/ui/select/SelectItem.vue
@@ -1,21 +1,16 @@
 <script setup lang="ts">
-import type { SelectItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Check } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  SelectItem,
-  SelectItemIndicator,
-  SelectItemText,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { SelectItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Check } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { SelectItem, SelectItemIndicator, SelectItemText, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<SelectItemProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/select/SelectItemText.vue b/code/fms/fms-vue/src/components/ui/select/SelectItemText.vue
index b6700b17..1ddc6d79 100644
--- a/code/fms/fms-vue/src/components/ui/select/SelectItemText.vue
+++ b/code/fms/fms-vue/src/components/ui/select/SelectItemText.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { SelectItemTextProps } from "reka-ui"
-import { SelectItemText } from "reka-ui"
+import type { SelectItemTextProps } from "reka-ui";
+import { SelectItemText } from "reka-ui";
 
-const props = defineProps<SelectItemTextProps>()
+const props = defineProps<SelectItemTextProps>();
 </script>
 
 <template>
-  <SelectItemText
-    data-slot="select-item-text"
-    v-bind="props"
-  >
+  <SelectItemText data-slot="select-item-text" v-bind="props">
     <slot />
   </SelectItemText>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/select/SelectLabel.vue b/code/fms/fms-vue/src/components/ui/select/SelectLabel.vue
index 5b6650cb..fb6519ca 100644
--- a/code/fms/fms-vue/src/components/ui/select/SelectLabel.vue
+++ b/code/fms/fms-vue/src/components/ui/select/SelectLabel.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { SelectLabelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { SelectLabel } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { SelectLabelProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { SelectLabel } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<SelectLabelProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes["class"] }>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/select/SelectScrollDownButton.vue b/code/fms/fms-vue/src/components/ui/select/SelectScrollDownButton.vue
index 62c9c9eb..96b486d6 100644
--- a/code/fms/fms-vue/src/components/ui/select/SelectScrollDownButton.vue
+++ b/code/fms/fms-vue/src/components/ui/select/SelectScrollDownButton.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { SelectScrollDownButtonProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { ChevronDown } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SelectScrollDownButton, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { SelectScrollDownButtonProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { ChevronDown } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { SelectScrollDownButton, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/select/SelectScrollUpButton.vue b/code/fms/fms-vue/src/components/ui/select/SelectScrollUpButton.vue
index b27afe87..0c6bc2a7 100644
--- a/code/fms/fms-vue/src/components/ui/select/SelectScrollUpButton.vue
+++ b/code/fms/fms-vue/src/components/ui/select/SelectScrollUpButton.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { SelectScrollUpButtonProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { ChevronUp } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SelectScrollUpButton, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { SelectScrollUpButtonProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { ChevronUp } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { SelectScrollUpButton, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/select/SelectSeparator.vue b/code/fms/fms-vue/src/components/ui/select/SelectSeparator.vue
index 4b5c8857..c2a18ee5 100644
--- a/code/fms/fms-vue/src/components/ui/select/SelectSeparator.vue
+++ b/code/fms/fms-vue/src/components/ui/select/SelectSeparator.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { SelectSeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SelectSeparator } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { SelectSeparatorProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { SelectSeparator } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/select/SelectTrigger.vue b/code/fms/fms-vue/src/components/ui/select/SelectTrigger.vue
index a0841296..2c35ad14 100644
--- a/code/fms/fms-vue/src/components/ui/select/SelectTrigger.vue
+++ b/code/fms/fms-vue/src/components/ui/select/SelectTrigger.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import type { SelectTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { ChevronDown } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SelectIcon, SelectTrigger, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { SelectTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { ChevronDown } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { SelectIcon, SelectTrigger, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
 const props = withDefaults(
-  defineProps<SelectTriggerProps & { class?: HTMLAttributes["class"], size?: "sm" | "default" }>(),
+  defineProps<SelectTriggerProps & { class?: HTMLAttributes["class"]; size?: "sm" | "default" }>(),
   { size: "default" },
-)
+);
 
-const delegatedProps = reactiveOmit(props, "class", "size")
-const forwardedProps = useForwardProps(delegatedProps)
+const delegatedProps = reactiveOmit(props, "class", "size");
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
@@ -20,10 +20,12 @@ const forwardedProps = useForwardProps(delegatedProps)
     data-slot="select-trigger"
     :data-size="size"
     v-bind="forwardedProps"
-    :class="cn(
-      `border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
+    :class="
+      cn(
+        `border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        props.class,
+      )
+    "
   >
     <slot />
     <SelectIcon as-child>
diff --git a/code/fms/fms-vue/src/components/ui/select/SelectValue.vue b/code/fms/fms-vue/src/components/ui/select/SelectValue.vue
index d5ce58b5..38115283 100644
--- a/code/fms/fms-vue/src/components/ui/select/SelectValue.vue
+++ b/code/fms/fms-vue/src/components/ui/select/SelectValue.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { SelectValueProps } from "reka-ui"
-import { SelectValue } from "reka-ui"
+import type { SelectValueProps } from "reka-ui";
+import { SelectValue } from "reka-ui";
 
-const props = defineProps<SelectValueProps>()
+const props = defineProps<SelectValueProps>();
 </script>
 
 <template>
-  <SelectValue
-    data-slot="select-value"
-    v-bind="props"
-  >
+  <SelectValue data-slot="select-value" v-bind="props">
     <slot />
   </SelectValue>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/select/index.ts b/code/fms/fms-vue/src/components/ui/select/index.ts
index 96eae60c..d911c4e1 100644
--- a/code/fms/fms-vue/src/components/ui/select/index.ts
+++ b/code/fms/fms-vue/src/components/ui/select/index.ts
@@ -1,11 +1,11 @@
-export { default as Select } from "./Select.vue"
-export { default as SelectContent } from "./SelectContent.vue"
-export { default as SelectGroup } from "./SelectGroup.vue"
-export { default as SelectItem } from "./SelectItem.vue"
-export { default as SelectItemText } from "./SelectItemText.vue"
-export { default as SelectLabel } from "./SelectLabel.vue"
-export { default as SelectScrollDownButton } from "./SelectScrollDownButton.vue"
-export { default as SelectScrollUpButton } from "./SelectScrollUpButton.vue"
-export { default as SelectSeparator } from "./SelectSeparator.vue"
-export { default as SelectTrigger } from "./SelectTrigger.vue"
-export { default as SelectValue } from "./SelectValue.vue"
+export { default as Select } from "./Select.vue";
+export { default as SelectContent } from "./SelectContent.vue";
+export { default as SelectGroup } from "./SelectGroup.vue";
+export { default as SelectItem } from "./SelectItem.vue";
+export { default as SelectItemText } from "./SelectItemText.vue";
+export { default as SelectLabel } from "./SelectLabel.vue";
+export { default as SelectScrollDownButton } from "./SelectScrollDownButton.vue";
+export { default as SelectScrollUpButton } from "./SelectScrollUpButton.vue";
+export { default as SelectSeparator } from "./SelectSeparator.vue";
+export { default as SelectTrigger } from "./SelectTrigger.vue";
+export { default as SelectValue } from "./SelectValue.vue";
diff --git a/code/fms/fms-vue/src/components/ui/separator/Separator.vue b/code/fms/fms-vue/src/components/ui/separator/Separator.vue
index 78d60eca..4fc8f2f9 100644
--- a/code/fms/fms-vue/src/components/ui/separator/Separator.vue
+++ b/code/fms/fms-vue/src/components/ui/separator/Separator.vue
@@ -1,18 +1,16 @@
 <script setup lang="ts">
-import type { SeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Separator } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { SeparatorProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { Separator } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = withDefaults(defineProps<
-  SeparatorProps & { class?: HTMLAttributes["class"] }
->(), {
+const props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>(), {
   orientation: "horizontal",
   decorative: true,
-})
+});
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/separator/index.ts b/code/fms/fms-vue/src/components/ui/separator/index.ts
index 44072873..aae7f1a6 100644
--- a/code/fms/fms-vue/src/components/ui/separator/index.ts
+++ b/code/fms/fms-vue/src/components/ui/separator/index.ts
@@ -1 +1 @@
-export { default as Separator } from "./Separator.vue"
+export { default as Separator } from "./Separator.vue";
diff --git a/code/fms/fms-vue/src/components/ui/sheet/Sheet.vue b/code/fms/fms-vue/src/components/ui/sheet/Sheet.vue
index 8522f84d..ecdbffe0 100644
--- a/code/fms/fms-vue/src/components/ui/sheet/Sheet.vue
+++ b/code/fms/fms-vue/src/components/ui/sheet/Sheet.vue
@@ -1,19 +1,15 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from "reka-ui"
-import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+import type { DialogRootEmits, DialogRootProps } from "reka-ui";
+import { DialogRoot, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<DialogRootProps>()
-const emits = defineEmits<DialogRootEmits>()
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <DialogRoot
-    v-slot="slotProps"
-    data-slot="sheet"
-    v-bind="forwarded"
-  >
+  <DialogRoot v-slot="slotProps" data-slot="sheet" v-bind="forwarded">
     <slot v-bind="slotProps" />
   </DialogRoot>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/sheet/SheetClose.vue b/code/fms/fms-vue/src/components/ui/sheet/SheetClose.vue
index 39a942c4..cc157419 100644
--- a/code/fms/fms-vue/src/components/ui/sheet/SheetClose.vue
+++ b/code/fms/fms-vue/src/components/ui/sheet/SheetClose.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { DialogCloseProps } from "reka-ui"
-import { DialogClose } from "reka-ui"
+import type { DialogCloseProps } from "reka-ui";
+import { DialogClose } from "reka-ui";
 
-const props = defineProps<DialogCloseProps>()
+const props = defineProps<DialogCloseProps>();
 </script>
 
 <template>
-  <DialogClose
-    data-slot="sheet-close"
-    v-bind="props"
-  >
+  <DialogClose data-slot="sheet-close" v-bind="props">
     <slot />
   </DialogClose>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/sheet/SheetContent.vue b/code/fms/fms-vue/src/components/ui/sheet/SheetContent.vue
index 77fd5d4f..c0e68838 100644
--- a/code/fms/fms-vue/src/components/ui/sheet/SheetContent.vue
+++ b/code/fms/fms-vue/src/components/ui/sheet/SheetContent.vue
@@ -1,34 +1,29 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { X } from "@lucide/vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DialogClose,
-  DialogContent,
-  DialogPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import SheetOverlay from "./SheetOverlay.vue"
+import type { DialogContentEmits, DialogContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { X } from "@lucide/vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+import SheetOverlay from "./SheetOverlay.vue";
 
 interface SheetContentProps extends DialogContentProps {
-  class?: HTMLAttributes["class"]
-  side?: "top" | "right" | "bottom" | "left"
+  class?: HTMLAttributes["class"];
+  side?: "top" | "right" | "bottom" | "left";
 }
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
 const props = withDefaults(defineProps<SheetContentProps>(), {
   side: "right",
-})
-const emits = defineEmits<DialogContentEmits>()
+});
+const emits = defineEmits<DialogContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class", "side")
+const delegatedProps = reactiveOmit(props, "class", "side");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -36,17 +31,20 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <SheetOverlay />
     <DialogContent
       data-slot="sheet-content"
-      :class="cn(
-        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-        side === 'right'
-          && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
-        side === 'left'
-          && 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
-        side === 'top'
-          && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
-        side === 'bottom'
-          && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
-        props.class)"
+      :class="
+        cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          side === 'right' &&
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          side === 'left' &&
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+          side === 'top' &&
+            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+          side === 'bottom' &&
+            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          props.class,
+        )
+      "
       v-bind="{ ...$attrs, ...forwarded }"
     >
       <slot />
diff --git a/code/fms/fms-vue/src/components/ui/sheet/SheetDescription.vue b/code/fms/fms-vue/src/components/ui/sheet/SheetDescription.vue
index 6c8ba0a9..9a8eb2f2 100644
--- a/code/fms/fms-vue/src/components/ui/sheet/SheetDescription.vue
+++ b/code/fms/fms-vue/src/components/ui/sheet/SheetDescription.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { DialogDescriptionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogDescription } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DialogDescriptionProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DialogDescription } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/sheet/SheetFooter.vue b/code/fms/fms-vue/src/components/ui/sheet/SheetFooter.vue
index 5fcf751d..5c88d03d 100644
--- a/code/fms/fms-vue/src/components/ui/sheet/SheetFooter.vue
+++ b/code/fms/fms-vue/src/components/ui/sheet/SheetFooter.vue
@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
 </script>
 
 <template>
-  <div
-    data-slot="sheet-footer"
-    :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)
-    "
-  >
+  <div data-slot="sheet-footer" :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
     <slot />
   </div>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/sheet/SheetHeader.vue b/code/fms/fms-vue/src/components/ui/sheet/SheetHeader.vue
index b6305ab6..6614d6a6 100644
--- a/code/fms/fms-vue/src/components/ui/sheet/SheetHeader.vue
+++ b/code/fms/fms-vue/src/components/ui/sheet/SheetHeader.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
 </script>
 
 <template>
-  <div
-    data-slot="sheet-header"
-    :class="cn('flex flex-col gap-1.5 p-4', props.class)"
-  >
+  <div data-slot="sheet-header" :class="cn('flex flex-col gap-1.5 p-4', props.class)">
     <slot />
   </div>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/sheet/SheetOverlay.vue b/code/fms/fms-vue/src/components/ui/sheet/SheetOverlay.vue
index 220452a7..390b7f74 100644
--- a/code/fms/fms-vue/src/components/ui/sheet/SheetOverlay.vue
+++ b/code/fms/fms-vue/src/components/ui/sheet/SheetOverlay.vue
@@ -1,19 +1,24 @@
 <script setup lang="ts">
-import type { DialogOverlayProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogOverlay } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DialogOverlayProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DialogOverlay } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
   <DialogOverlay
     data-slot="sheet-overlay"
-    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+    :class="
+      cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+        props.class,
+      )
+    "
     v-bind="delegatedProps"
   >
     <slot />
diff --git a/code/fms/fms-vue/src/components/ui/sheet/SheetTitle.vue b/code/fms/fms-vue/src/components/ui/sheet/SheetTitle.vue
index 889ae54a..37500214 100644
--- a/code/fms/fms-vue/src/components/ui/sheet/SheetTitle.vue
+++ b/code/fms/fms-vue/src/components/ui/sheet/SheetTitle.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { DialogTitleProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogTitle } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { DialogTitleProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DialogTitle } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/sheet/SheetTrigger.vue b/code/fms/fms-vue/src/components/ui/sheet/SheetTrigger.vue
index 41b121db..a57258ef 100644
--- a/code/fms/fms-vue/src/components/ui/sheet/SheetTrigger.vue
+++ b/code/fms/fms-vue/src/components/ui/sheet/SheetTrigger.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { DialogTriggerProps } from "reka-ui"
-import { DialogTrigger } from "reka-ui"
+import type { DialogTriggerProps } from "reka-ui";
+import { DialogTrigger } from "reka-ui";
 
-const props = defineProps<DialogTriggerProps>()
+const props = defineProps<DialogTriggerProps>();
 </script>
 
 <template>
-  <DialogTrigger
-    data-slot="sheet-trigger"
-    v-bind="props"
-  >
+  <DialogTrigger data-slot="sheet-trigger" v-bind="props">
     <slot />
   </DialogTrigger>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/sheet/index.ts b/code/fms/fms-vue/src/components/ui/sheet/index.ts
index 7c70e5d7..b94a071f 100644
--- a/code/fms/fms-vue/src/components/ui/sheet/index.ts
+++ b/code/fms/fms-vue/src/components/ui/sheet/index.ts
@@ -1,8 +1,8 @@
-export { default as Sheet } from "./Sheet.vue"
-export { default as SheetClose } from "./SheetClose.vue"
-export { default as SheetContent } from "./SheetContent.vue"
-export { default as SheetDescription } from "./SheetDescription.vue"
-export { default as SheetFooter } from "./SheetFooter.vue"
-export { default as SheetHeader } from "./SheetHeader.vue"
-export { default as SheetTitle } from "./SheetTitle.vue"
-export { default as SheetTrigger } from "./SheetTrigger.vue"
+export { default as Sheet } from "./Sheet.vue";
+export { default as SheetClose } from "./SheetClose.vue";
+export { default as SheetContent } from "./SheetContent.vue";
+export { default as SheetDescription } from "./SheetDescription.vue";
+export { default as SheetFooter } from "./SheetFooter.vue";
+export { default as SheetHeader } from "./SheetHeader.vue";
+export { default as SheetTitle } from "./SheetTitle.vue";
+export { default as SheetTrigger } from "./SheetTrigger.vue";
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/Sidebar.vue b/code/fms/fms-vue/src/components/ui/sidebar/Sidebar.vue
index eb251566..faa2b363 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/Sidebar.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/Sidebar.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import type { SidebarProps } from "."
-import { cn } from "@/lib/utils"
-import { Sheet, SheetContent } from '@/components/ui/sheet'
-import SheetDescription from '@/components/ui/sheet/SheetDescription.vue'
-import SheetHeader from '@/components/ui/sheet/SheetHeader.vue'
-import SheetTitle from '@/components/ui/sheet/SheetTitle.vue'
-import { SIDEBAR_WIDTH_MOBILE, useSidebar } from "./utils"
+import type { SidebarProps } from ".";
+import { cn } from "@/lib/utils";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
+import SheetDescription from "@/components/ui/sheet/SheetDescription.vue";
+import SheetHeader from "@/components/ui/sheet/SheetHeader.vue";
+import SheetTitle from "@/components/ui/sheet/SheetTitle.vue";
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from "./utils";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
 const props = withDefaults(defineProps<SidebarProps>(), {
   side: "left",
   variant: "sidebar",
   collapsible: "offcanvas",
-})
+});
 
-const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 </script>
 
 <template>
@@ -62,27 +62,31 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
   >
     <!-- This is what handles the sidebar gap on desktop  -->
     <div
-      :class="cn(
-        'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
-        'group-data-[collapsible=offcanvas]:w-0',
-        'group-data-[side=right]:rotate-180',
-        variant === 'floating' || variant === 'inset'
-          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
-          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
-      )"
+      :class="
+        cn(
+          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+          'group-data-[collapsible=offcanvas]:w-0',
+          'group-data-[side=right]:rotate-180',
+          variant === 'floating' || variant === 'inset'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+        )
+      "
     />
     <div
-      :class="cn(
-        'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
-        side === 'left'
-          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
-          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
-        // Adjust the padding for floating and inset variants.
-        variant === 'floating' || variant === 'inset'
-          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
-        props.class,
-      )"
+      :class="
+        cn(
+          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+          side === 'left'
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+          // Adjust the padding for floating and inset variants.
+          variant === 'floating' || variant === 'inset'
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          props.class,
+        )
+      "
       v-bind="$attrs"
     >
       <div
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/SidebarContent.vue b/code/fms/fms-vue/src/components/ui/sidebar/SidebarContent.vue
index bb6d9f1d..84e91563 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/SidebarContent.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/SidebarContent.vue
@@ -1,17 +1,22 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
   <div
     data-slot="sidebar-content"
     data-sidebar="content"
-    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
+    :class="
+      cn(
+        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        props.class,
+      )
+    "
   >
     <slot />
   </div>
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/SidebarFooter.vue b/code/fms/fms-vue/src/components/ui/sidebar/SidebarFooter.vue
index 20dd72f4..e6d30b64 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/SidebarFooter.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/SidebarFooter.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/SidebarGroup.vue b/code/fms/fms-vue/src/components/ui/sidebar/SidebarGroup.vue
index fbb48873..4cd5a383 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/SidebarGroup.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/SidebarGroup.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/SidebarGroupAction.vue b/code/fms/fms-vue/src/components/ui/sidebar/SidebarGroupAction.vue
index f5fa5eb0..e91f5b28 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/SidebarGroupAction.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/SidebarGroupAction.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<PrimitiveProps & {
-  class?: HTMLAttributes["class"]
-}>()
+const props = defineProps<
+  PrimitiveProps & {
+    class?: HTMLAttributes["class"];
+  }
+>();
 </script>
 
 <template>
@@ -15,12 +17,14 @@ const props = defineProps<PrimitiveProps & {
     data-sidebar="group-action"
     :as="as"
     :as-child="asChild"
-    :class="cn(
-      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'after:absolute after:-inset-2 md:after:hidden',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
+    :class="
+      cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 md:after:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
   >
     <slot />
   </Primitive>
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/SidebarGroupContent.vue b/code/fms/fms-vue/src/components/ui/sidebar/SidebarGroupContent.vue
index 06e1a92f..1f586cad 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/SidebarGroupContent.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/SidebarGroupContent.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/SidebarGroupLabel.vue b/code/fms/fms-vue/src/components/ui/sidebar/SidebarGroupLabel.vue
index a1ec4a42..0f4ffbf8 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/SidebarGroupLabel.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/SidebarGroupLabel.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<PrimitiveProps & {
-  class?: HTMLAttributes["class"]
-}>()
+const props = defineProps<
+  PrimitiveProps & {
+    class?: HTMLAttributes["class"];
+  }
+>();
 </script>
 
 <template>
@@ -15,10 +17,13 @@ const props = defineProps<PrimitiveProps & {
     data-sidebar="group-label"
     :as="as"
     :as-child="asChild"
-    :class="cn(
-      'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'group-data-[collapsible=icon]:pointer-events-none group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:select-none group-data-[collapsible=icon]:opacity-0',
-      props.class)"
+    :class="
+      cn(
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:pointer-events-none group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:select-none group-data-[collapsible=icon]:opacity-0',
+        props.class,
+      )
+    "
   >
     <slot />
   </Primitive>
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/SidebarHeader.vue b/code/fms/fms-vue/src/components/ui/sidebar/SidebarHeader.vue
index 79cf8833..917d0424 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/SidebarHeader.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/SidebarHeader.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/SidebarInput.vue b/code/fms/fms-vue/src/components/ui/sidebar/SidebarInput.vue
index 3afc5da7..ac2684da 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/SidebarInput.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/SidebarInput.vue
@@ -1,21 +1,18 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-import { Input } from '@/components/ui/input'
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+import { Input } from "@/components/ui/input";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
   <Input
     data-slot="sidebar-input"
     data-sidebar="input"
-    :class="cn(
-      'bg-background h-8 w-full shadow-none',
-      props.class,
-    )"
+    :class="cn('bg-background h-8 w-full shadow-none', props.class)"
   >
     <slot />
   </Input>
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/SidebarInset.vue b/code/fms/fms-vue/src/components/ui/sidebar/SidebarInset.vue
index f46b43a8..65a94899 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/SidebarInset.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/SidebarInset.vue
@@ -1,20 +1,22 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
   <main
     data-slot="sidebar-inset"
-    :class="cn(
-      'bg-background relative flex w-full flex-1 flex-col',
-      'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
-      props.class,
-    )"
+    :class="
+      cn(
+        'bg-background relative flex w-full flex-1 flex-col',
+        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+        props.class,
+      )
+    "
   >
     <slot />
   </main>
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenu.vue b/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenu.vue
index e1dd39eb..a7f7eb37 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenu.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenu.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuAction.vue b/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuAction.vue
index bdffdb7d..ac86984c 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuAction.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuAction.vue
@@ -1,32 +1,39 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = withDefaults(defineProps<PrimitiveProps & {
-  showOnHover?: boolean
-  class?: HTMLAttributes["class"]
-}>(), {
-  as: "button",
-})
+const props = withDefaults(
+  defineProps<
+    PrimitiveProps & {
+      showOnHover?: boolean;
+      class?: HTMLAttributes["class"];
+    }
+  >(),
+  {
+    as: "button",
+  },
+);
 </script>
 
 <template>
   <Primitive
     data-slot="sidebar-menu-action"
     data-sidebar="menu-action"
-    :class="cn(
-      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'after:absolute after:-inset-2 md:after:hidden',
-      'peer-data-[size=sm]/menu-button:top-1',
-      'peer-data-[size=default]/menu-button:top-1.5',
-      'peer-data-[size=lg]/menu-button:top-2.5',
-      'group-data-[collapsible=icon]:hidden',
-      showOnHover
-        && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
-      props.class,
-    )"
+    :class="
+      cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 md:after:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        props.class,
+      )
+    "
     :as="as"
     :as-child="asChild"
   >
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuBadge.vue b/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuBadge.vue
index 43216184..bb108a9b 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuBadge.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuBadge.vue
@@ -1,25 +1,27 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
   <div
     data-slot="sidebar-menu-badge"
     data-sidebar="menu-badge"
-    :class="cn(
-      'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
-      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-      'peer-data-[size=sm]/menu-button:top-1',
-      'peer-data-[size=default]/menu-button:top-1.5',
-      'peer-data-[size=lg]/menu-button:top-2.5',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
+    :class="
+      cn(
+        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
   >
     <slot />
   </div>
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuButton.vue b/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuButton.vue
index 502d3959..28f65859 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuButton.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuButton.vue
@@ -1,26 +1,31 @@
 <script setup lang="ts">
-import type { Component } from "vue"
-import type { SidebarMenuButtonProps } from "./SidebarMenuButtonChild.vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import SidebarMenuButtonChild from "./SidebarMenuButtonChild.vue"
-import { useSidebar } from "./utils"
+import type { Component } from "vue";
+import type { SidebarMenuButtonProps } from "./SidebarMenuButtonChild.vue";
+import { reactiveOmit } from "@vueuse/core";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import SidebarMenuButtonChild from "./SidebarMenuButtonChild.vue";
+import { useSidebar } from "./utils";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = withDefaults(defineProps<SidebarMenuButtonProps & {
-  tooltip?: string | Component
-}>(), {
-  as: "button",
-  variant: "default",
-  size: "default",
-})
+const props = withDefaults(
+  defineProps<
+    SidebarMenuButtonProps & {
+      tooltip?: string | Component;
+    }
+  >(),
+  {
+    as: "button",
+    variant: "default",
+    size: "default",
+  },
+);
 
-const { isMobile, state } = useSidebar()
+const { isMobile, state } = useSidebar();
 
-const delegatedProps = reactiveOmit(props, "tooltip")
+const delegatedProps = reactiveOmit(props, "tooltip");
 </script>
 
 <template>
@@ -34,11 +39,7 @@ const delegatedProps = reactiveOmit(props, "tooltip")
         <slot />
       </SidebarMenuButtonChild>
     </TooltipTrigger>
-    <TooltipContent
-      side="right"
-      align="center"
-      :hidden="state !== 'collapsed' || isMobile"
-    >
+    <TooltipContent side="right" align="center" :hidden="state !== 'collapsed' || isMobile">
       <template v-if="typeof tooltip === 'string'">
         {{ tooltip }}
       </template>
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuButtonChild.vue b/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuButtonChild.vue
index 4b4ca3ba..1f1d77fc 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuButtonChild.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuButtonChild.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { SidebarMenuButtonVariants } from "."
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { sidebarMenuButtonVariants } from "."
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { SidebarMenuButtonVariants } from ".";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { sidebarMenuButtonVariants } from ".";
 
 export interface SidebarMenuButtonProps extends PrimitiveProps {
-  variant?: SidebarMenuButtonVariants["variant"]
-  size?: SidebarMenuButtonVariants["size"]
-  isActive?: boolean
-  class?: HTMLAttributes["class"]
+  variant?: SidebarMenuButtonVariants["variant"];
+  size?: SidebarMenuButtonVariants["size"];
+  isActive?: boolean;
+  class?: HTMLAttributes["class"];
 }
 
 const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
   as: "button",
   variant: "default",
   size: "default",
-})
+});
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuItem.vue b/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuItem.vue
index e2fda5b4..2878e43b 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuItem.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuItem.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuSkeleton.vue b/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuSkeleton.vue
index b33812c3..4075fd34 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuSkeleton.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuSkeleton.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { computed } from "vue"
-import { cn } from "@/lib/utils"
-import { Skeleton } from '@/components/ui/skeleton'
+import type { HTMLAttributes } from "vue";
+import { computed } from "vue";
+import { cn } from "@/lib/utils";
+import { Skeleton } from "@/components/ui/skeleton";
 
 const props = defineProps<{
-  showIcon?: boolean
-  class?: HTMLAttributes["class"]
-}>()
+  showIcon?: boolean;
+  class?: HTMLAttributes["class"];
+}>();
 
 const width = computed(() => {
-  return `${Math.floor(Math.random() * 40) + 50}%`
-})
+  return `${Math.floor(Math.random() * 40) + 50}%`;
+});
 </script>
 
 <template>
@@ -20,11 +20,7 @@ const width = computed(() => {
     data-sidebar="menu-skeleton"
     :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)"
   >
-    <Skeleton
-      v-if="showIcon"
-      class="size-4 rounded-md"
-      data-sidebar="menu-skeleton-icon"
-    />
+    <Skeleton v-if="showIcon" class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
 
     <Skeleton
       class="h-4 max-w-(--skeleton-width) flex-1"
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuSub.vue b/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuSub.vue
index 81c2dab9..3053ac9a 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuSub.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuSub.vue
@@ -1,21 +1,23 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
   <ul
     data-slot="sidebar-menu-sub"
     data-sidebar="menu-badge"
-    :class="cn(
-      'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
+    :class="
+      cn(
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
   >
     <slot />
   </ul>
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuSubButton.vue b/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuSubButton.vue
index 457cfb63..c6db8ee6 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuSubButton.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuSubButton.vue
@@ -1,17 +1,22 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Primitive } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = withDefaults(defineProps<PrimitiveProps & {
-  size?: "sm" | "md"
-  isActive?: boolean
-  class?: HTMLAttributes["class"]
-}>(), {
-  as: "a",
-  size: "md",
-})
+const props = withDefaults(
+  defineProps<
+    PrimitiveProps & {
+      size?: "sm" | "md";
+      isActive?: boolean;
+      class?: HTMLAttributes["class"];
+    }
+  >(),
+  {
+    as: "a",
+    size: "md",
+  },
+);
 </script>
 
 <template>
@@ -22,14 +27,16 @@ const props = withDefaults(defineProps<PrimitiveProps & {
     :as-child="asChild"
     :data-size="size"
     :data-active="isActive"
-    :class="cn(
-      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
-      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-      size === 'sm' && 'text-xs',
-      size === 'md' && 'text-sm',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
+    :class="
+      cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'data-[active=true]:bg-background data-[active=true]:text-sidebar-accent-foreground data-[active=true]:shadow-sm',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        props.class,
+      )
+    "
   >
     <slot />
   </Primitive>
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuSubItem.vue b/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuSubItem.vue
index d4374f65..f768e0c6 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuSubItem.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/SidebarMenuSubItem.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/SidebarProvider.vue b/code/fms/fms-vue/src/components/ui/sidebar/SidebarProvider.vue
index 10de1ca7..185717b9 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/SidebarProvider.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/SidebarProvider.vue
@@ -1,55 +1,63 @@
 <script setup lang="ts">
-import type { HTMLAttributes, Ref } from "vue"
-import { useEventListener, useMediaQuery, useVModel } from "@vueuse/core"
-import { TooltipProvider } from "reka-ui"
-import { computed, ref } from "vue"
-import { cn } from "@/lib/utils"
-import { provideSidebarContext, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from "./utils"
+import type { HTMLAttributes, Ref } from "vue";
+import { useEventListener, useMediaQuery, useVModel } from "@vueuse/core";
+import { TooltipProvider } from "reka-ui";
+import { computed, ref } from "vue";
+import { cn } from "@/lib/utils";
+import {
+  provideSidebarContext,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+} from "./utils";
 
-const props = withDefaults(defineProps<{
-  defaultOpen?: boolean
-  open?: boolean
-  class?: HTMLAttributes["class"]
-}>(), {
-  defaultOpen: true,
-  open: undefined,
-})
+const props = withDefaults(
+  defineProps<{
+    defaultOpen?: boolean;
+    open?: boolean;
+    class?: HTMLAttributes["class"];
+  }>(),
+  {
+    defaultOpen: true,
+    open: undefined,
+  },
+);
 
 const emits = defineEmits<{
-  "update:open": [open: boolean]
-}>()
+  "update:open": [open: boolean];
+}>();
 
-const isMobile = useMediaQuery("(max-width: 768px)")
-const openMobile = ref(false)
+const isMobile = useMediaQuery("(max-width: 768px)");
+const openMobile = ref(false);
 
 const open = useVModel(props, "open", emits, {
   defaultValue: props.defaultOpen ?? false,
   passive: (props.open === undefined) as false,
-}) as Ref<boolean>
+}) as Ref<boolean>;
 
 function setOpen(value: boolean) {
-  open.value = value // emits('update:open', value)
+  open.value = value; // emits('update:open', value)
 }
 
 function setOpenMobile(value: boolean) {
-  openMobile.value = value
+  openMobile.value = value;
 }
 
 // Helper to toggle the sidebar.
 function toggleSidebar() {
-  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
+  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value);
 }
 
 useEventListener("keydown", (event: KeyboardEvent) => {
   if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-    event.preventDefault()
-    toggleSidebar()
+    event.preventDefault();
+    toggleSidebar();
   }
-})
+});
 
 // We add a state so that we can do data-state="expanded" or "collapsed".
 // This makes it easier to style the sidebar with Tailwind classes.
-const state = computed(() => open.value ? "expanded" : "collapsed")
+const state = computed(() => (open.value ? "expanded" : "collapsed"));
 
 provideSidebarContext({
   state,
@@ -59,7 +67,7 @@ provideSidebarContext({
   openMobile,
   setOpenMobile,
   toggleSidebar,
-})
+});
 </script>
 
 <template>
@@ -70,7 +78,12 @@ provideSidebarContext({
         '--sidebar-width': SIDEBAR_WIDTH,
         '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
       }"
-      :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
+      :class="
+        cn(
+          'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+          props.class,
+        )
+      "
       v-bind="$attrs"
     >
       <slot />
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/SidebarSeparator.vue b/code/fms/fms-vue/src/components/ui/sidebar/SidebarSeparator.vue
index 91170bc4..b282668a 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/SidebarSeparator.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/SidebarSeparator.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-import { Separator } from '@/components/ui/separator'
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/SidebarTrigger.vue b/code/fms/fms-vue/src/components/ui/sidebar/SidebarTrigger.vue
index 001478ac..93caf517 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/SidebarTrigger.vue
+++ b/code/fms/fms-vue/src/components/ui/sidebar/SidebarTrigger.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { PanelLeft } from "@lucide/vue"
-import { cn } from "@/lib/utils"
-import { Button } from '@/components/ui/button'
-import { useSidebar } from "./utils"
+import type { HTMLAttributes } from "vue";
+import { PanelLeft } from "@lucide/vue";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { useSidebar } from "./utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 
-const { toggleSidebar } = useSidebar()
+const { toggleSidebar } = useSidebar();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/index.ts b/code/fms/fms-vue/src/components/ui/sidebar/index.ts
index 0389b5f8..e7036913 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/index.ts
+++ b/code/fms/fms-vue/src/components/ui/sidebar/index.ts
@@ -1,41 +1,41 @@
-import type { VariantProps } from "class-variance-authority"
-import type { HTMLAttributes } from "vue"
-import { cva } from "class-variance-authority"
+import type { VariantProps } from "class-variance-authority";
+import type { HTMLAttributes } from "vue";
+import { cva } from "class-variance-authority";
 
 export interface SidebarProps {
-  side?: "left" | "right"
-  variant?: "sidebar" | "floating" | "inset"
-  collapsible?: "offcanvas" | "icon" | "none"
-  class?: HTMLAttributes["class"]
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
+  class?: HTMLAttributes["class"];
 }
 
-export { default as Sidebar } from "./Sidebar.vue"
-export { default as SidebarContent } from "./SidebarContent.vue"
-export { default as SidebarFooter } from "./SidebarFooter.vue"
-export { default as SidebarGroup } from "./SidebarGroup.vue"
-export { default as SidebarGroupAction } from "./SidebarGroupAction.vue"
-export { default as SidebarGroupContent } from "./SidebarGroupContent.vue"
-export { default as SidebarGroupLabel } from "./SidebarGroupLabel.vue"
-export { default as SidebarHeader } from "./SidebarHeader.vue"
-export { default as SidebarInput } from "./SidebarInput.vue"
-export { default as SidebarInset } from "./SidebarInset.vue"
-export { default as SidebarMenu } from "./SidebarMenu.vue"
-export { default as SidebarMenuAction } from "./SidebarMenuAction.vue"
-export { default as SidebarMenuBadge } from "./SidebarMenuBadge.vue"
-export { default as SidebarMenuButton } from "./SidebarMenuButton.vue"
-export { default as SidebarMenuItem } from "./SidebarMenuItem.vue"
-export { default as SidebarMenuSkeleton } from "./SidebarMenuSkeleton.vue"
-export { default as SidebarMenuSub } from "./SidebarMenuSub.vue"
-export { default as SidebarMenuSubButton } from "./SidebarMenuSubButton.vue"
-export { default as SidebarMenuSubItem } from "./SidebarMenuSubItem.vue"
-export { default as SidebarProvider } from "./SidebarProvider.vue"
-export { default as SidebarSeparator } from "./SidebarSeparator.vue"
-export { default as SidebarTrigger } from "./SidebarTrigger.vue"
+export { default as Sidebar } from "./Sidebar.vue";
+export { default as SidebarContent } from "./SidebarContent.vue";
+export { default as SidebarFooter } from "./SidebarFooter.vue";
+export { default as SidebarGroup } from "./SidebarGroup.vue";
+export { default as SidebarGroupAction } from "./SidebarGroupAction.vue";
+export { default as SidebarGroupContent } from "./SidebarGroupContent.vue";
+export { default as SidebarGroupLabel } from "./SidebarGroupLabel.vue";
+export { default as SidebarHeader } from "./SidebarHeader.vue";
+export { default as SidebarInput } from "./SidebarInput.vue";
+export { default as SidebarInset } from "./SidebarInset.vue";
+export { default as SidebarMenu } from "./SidebarMenu.vue";
+export { default as SidebarMenuAction } from "./SidebarMenuAction.vue";
+export { default as SidebarMenuBadge } from "./SidebarMenuBadge.vue";
+export { default as SidebarMenuButton } from "./SidebarMenuButton.vue";
+export { default as SidebarMenuItem } from "./SidebarMenuItem.vue";
+export { default as SidebarMenuSkeleton } from "./SidebarMenuSkeleton.vue";
+export { default as SidebarMenuSub } from "./SidebarMenuSub.vue";
+export { default as SidebarMenuSubButton } from "./SidebarMenuSubButton.vue";
+export { default as SidebarMenuSubItem } from "./SidebarMenuSubItem.vue";
+export { default as SidebarProvider } from "./SidebarProvider.vue";
+export { default as SidebarSeparator } from "./SidebarSeparator.vue";
+export { default as SidebarTrigger } from "./SidebarTrigger.vue";
 
-export { useSidebar } from "./utils"
+export { useSidebar } from "./utils";
 
 export const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! group-data-[collapsible=icon]:cursor-pointer [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding,background-color,box-shadow] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-background data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[active=true]:shadow-sm data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! group-data-[collapsible=icon]:cursor-pointer [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -54,6 +54,6 @@ export const sidebarMenuButtonVariants = cva(
       size: "default",
     },
   },
-)
+);
 
-export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>
+export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>;
diff --git a/code/fms/fms-vue/src/components/ui/sidebar/utils.ts b/code/fms/fms-vue/src/components/ui/sidebar/utils.ts
index 6e57eeb9..4c082901 100644
--- a/code/fms/fms-vue/src/components/ui/sidebar/utils.ts
+++ b/code/fms/fms-vue/src/components/ui/sidebar/utils.ts
@@ -1,19 +1,19 @@
-import type { ComputedRef, Ref } from "vue"
-import { createContext } from "reka-ui"
+import type { ComputedRef, Ref } from "vue";
+import { createContext } from "reka-ui";
 
-export const SIDEBAR_COOKIE_NAME = "sidebar_state"
-export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-export const SIDEBAR_WIDTH = "16rem"
-export const SIDEBAR_WIDTH_MOBILE = "18rem"
-export const SIDEBAR_WIDTH_ICON = "3rem"
-export const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+export const SIDEBAR_COOKIE_NAME = "sidebar_state";
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = "16rem";
+export const SIDEBAR_WIDTH_MOBILE = "18rem";
+export const SIDEBAR_WIDTH_ICON = "3rem";
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
 export const [useSidebar, provideSidebarContext] = createContext<{
-  state: ComputedRef<"expanded" | "collapsed">
-  open: Ref<boolean>
-  setOpen: (value: boolean) => void
-  isMobile: Ref<boolean>
-  openMobile: Ref<boolean>
-  setOpenMobile: (value: boolean) => void
-  toggleSidebar: () => void
-}>("Sidebar")
+  state: ComputedRef<"expanded" | "collapsed">;
+  open: Ref<boolean>;
+  setOpen: (value: boolean) => void;
+  isMobile: Ref<boolean>;
+  openMobile: Ref<boolean>;
+  setOpenMobile: (value: boolean) => void;
+  toggleSidebar: () => void;
+}>("Sidebar");
diff --git a/code/fms/fms-vue/src/components/ui/skeleton/Skeleton.vue b/code/fms/fms-vue/src/components/ui/skeleton/Skeleton.vue
index 0dadcef9..15eadfc0 100644
--- a/code/fms/fms-vue/src/components/ui/skeleton/Skeleton.vue
+++ b/code/fms/fms-vue/src/components/ui/skeleton/Skeleton.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 interface SkeletonProps {
-  class?: HTMLAttributes["class"]
+  class?: HTMLAttributes["class"];
 }
 
-const props = defineProps<SkeletonProps>()
+const props = defineProps<SkeletonProps>();
 </script>
 
 <template>
-  <div
-    data-slot="skeleton"
-    :class="cn('animate-pulse rounded-md bg-primary/10', props.class)"
-  />
+  <div data-slot="skeleton" :class="cn('animate-pulse rounded-md bg-primary/10', props.class)" />
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/skeleton/index.ts b/code/fms/fms-vue/src/components/ui/skeleton/index.ts
index e5ce72c3..72cb1d96 100644
--- a/code/fms/fms-vue/src/components/ui/skeleton/index.ts
+++ b/code/fms/fms-vue/src/components/ui/skeleton/index.ts
@@ -1 +1 @@
-export { default as Skeleton } from "./Skeleton.vue"
+export { default as Skeleton } from "./Skeleton.vue";
diff --git a/code/fms/fms-vue/src/components/ui/slider/Slider.vue b/code/fms/fms-vue/src/components/ui/slider/Slider.vue
index bae7b720..ded030cb 100644
--- a/code/fms/fms-vue/src/components/ui/slider/Slider.vue
+++ b/code/fms/fms-vue/src/components/ui/slider/Slider.vue
@@ -1,26 +1,28 @@
 <script setup lang="ts">
-import type { SliderRootEmits, SliderRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { SliderRootEmits, SliderRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<SliderRootEmits>()
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<SliderRootEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <SliderRoot
     v-slot="{ modelValue }"
     data-slot="slider"
-    :class="cn(
-      'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
-      props.class,
-    )"
+    :class="
+      cn(
+        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+        props.class,
+      )
+    "
     v-bind="forwarded"
   >
     <SliderTrack
diff --git a/code/fms/fms-vue/src/components/ui/slider/index.ts b/code/fms/fms-vue/src/components/ui/slider/index.ts
index f7a7b096..765baabc 100644
--- a/code/fms/fms-vue/src/components/ui/slider/index.ts
+++ b/code/fms/fms-vue/src/components/ui/slider/index.ts
@@ -1 +1 @@
-export { default as Slider } from "./Slider.vue"
+export { default as Slider } from "./Slider.vue";
diff --git a/code/fms/fms-vue/src/components/ui/sonner/Sonner.vue b/code/fms/fms-vue/src/components/ui/sonner/Sonner.vue
index 45389fc8..7b3fc5cc 100644
--- a/code/fms/fms-vue/src/components/ui/sonner/Sonner.vue
+++ b/code/fms/fms-vue/src/components/ui/sonner/Sonner.vue
@@ -1,10 +1,17 @@
 <script lang="ts" setup>
-import type { ToasterProps } from "vue-sonner"
-import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from "@lucide/vue"
-import { Toaster as Sonner } from "vue-sonner"
-import { cn } from "@/lib/utils"
+import type { ToasterProps } from "vue-sonner";
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+  XIcon,
+} from "@lucide/vue";
+import { Toaster as Sonner } from "vue-sonner";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<ToasterProps>()
+const props = defineProps<ToasterProps>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/sonner/index.ts b/code/fms/fms-vue/src/components/ui/sonner/index.ts
index 6673112e..39a59dd3 100644
--- a/code/fms/fms-vue/src/components/ui/sonner/index.ts
+++ b/code/fms/fms-vue/src/components/ui/sonner/index.ts
@@ -1 +1 @@
-export { default as Toaster } from "./Sonner.vue"
+export { default as Toaster } from "./Sonner.vue";
diff --git a/code/fms/fms-vue/src/components/ui/switch/Switch.vue b/code/fms/fms-vue/src/components/ui/switch/Switch.vue
index 96bf705a..16ef0c69 100644
--- a/code/fms/fms-vue/src/components/ui/switch/Switch.vue
+++ b/code/fms/fms-vue/src/components/ui/switch/Switch.vue
@@ -1,21 +1,17 @@
 <script setup lang="ts">
-import type { SwitchRootEmits, SwitchRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  SwitchRoot,
-  SwitchThumb,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { SwitchRootEmits, SwitchRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { SwitchRoot, SwitchThumb, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<SwitchRootProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes["class"] }>();
 
-const emits = defineEmits<SwitchRootEmits>()
+const emits = defineEmits<SwitchRootEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -23,14 +19,20 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-slot="slotProps"
     data-slot="switch"
     v-bind="forwarded"
-    :class="cn(
-      'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50',
-      props.class,
-    )"
+    :class="
+      cn(
+        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
   >
     <SwitchThumb
       data-slot="switch-thumb"
-      :class="cn('bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0')"
+      :class="
+        cn(
+          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
+        )
+      "
     >
       <slot name="thumb" v-bind="slotProps" />
     </SwitchThumb>
diff --git a/code/fms/fms-vue/src/components/ui/switch/index.ts b/code/fms/fms-vue/src/components/ui/switch/index.ts
index cc081f3f..c986f8ab 100644
--- a/code/fms/fms-vue/src/components/ui/switch/index.ts
+++ b/code/fms/fms-vue/src/components/ui/switch/index.ts
@@ -1 +1 @@
-export { default as Switch } from "./Switch.vue"
+export { default as Switch } from "./Switch.vue";
diff --git a/code/fms/fms-vue/src/components/ui/table/Table.vue b/code/fms/fms-vue/src/components/ui/table/Table.vue
index 0d0cd9b4..cae16b86 100644
--- a/code/fms/fms-vue/src/components/ui/table/Table.vue
+++ b/code/fms/fms-vue/src/components/ui/table/Table.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/table/TableBody.vue b/code/fms/fms-vue/src/components/ui/table/TableBody.vue
index d14a2d32..7bf304f0 100644
--- a/code/fms/fms-vue/src/components/ui/table/TableBody.vue
+++ b/code/fms/fms-vue/src/components/ui/table/TableBody.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
-  <tbody
-    data-slot="table-body"
-    :class="cn('[&_tr:last-child]:border-0', props.class)"
-  >
+  <tbody data-slot="table-body" :class="cn('[&_tr:last-child]:border-0', props.class)">
     <slot />
   </tbody>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/table/TableCaption.vue b/code/fms/fms-vue/src/components/ui/table/TableCaption.vue
index 36300845..0918a58b 100644
--- a/code/fms/fms-vue/src/components/ui/table/TableCaption.vue
+++ b/code/fms/fms-vue/src/components/ui/table/TableCaption.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
-  <caption
-    data-slot="table-caption"
-    :class="cn('text-muted-foreground mt-4 text-sm', props.class)"
-  >
+  <caption data-slot="table-caption" :class="cn('text-muted-foreground mt-4 text-sm', props.class)">
     <slot />
   </caption>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/table/TableCell.vue b/code/fms/fms-vue/src/components/ui/table/TableCell.vue
index 3a83b7db..a0983a1e 100644
--- a/code/fms/fms-vue/src/components/ui/table/TableCell.vue
+++ b/code/fms/fms-vue/src/components/ui/table/TableCell.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/table/TableEmpty.vue b/code/fms/fms-vue/src/components/ui/table/TableEmpty.vue
index 95193286..c8a40051 100644
--- a/code/fms/fms-vue/src/components/ui/table/TableEmpty.vue
+++ b/code/fms/fms-vue/src/components/ui/table/TableEmpty.vue
@@ -1,29 +1,27 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { cn } from "@/lib/utils"
-import TableCell from "./TableCell.vue"
-import TableRow from "./TableRow.vue"
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { cn } from "@/lib/utils";
+import TableCell from "./TableCell.vue";
+import TableRow from "./TableRow.vue";
 
-const props = withDefaults(defineProps<{
-  class?: HTMLAttributes["class"]
-  colspan?: number
-}>(), {
-  colspan: 1,
-})
+const props = withDefaults(
+  defineProps<{
+    class?: HTMLAttributes["class"];
+    colspan?: number;
+  }>(),
+  {
+    colspan: 1,
+  },
+);
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
   <TableRow>
     <TableCell
-      :class="
-        cn(
-          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
-          props.class,
-        )
-      "
+      :class="cn('p-4 whitespace-nowrap align-middle text-sm text-foreground', props.class)"
       v-bind="delegatedProps"
     >
       <div class="flex items-center justify-center py-10">
diff --git a/code/fms/fms-vue/src/components/ui/table/TableFooter.vue b/code/fms/fms-vue/src/components/ui/table/TableFooter.vue
index 29e0ce9a..096fb4f1 100644
--- a/code/fms/fms-vue/src/components/ui/table/TableFooter.vue
+++ b/code/fms/fms-vue/src/components/ui/table/TableFooter.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/table/TableHead.vue b/code/fms/fms-vue/src/components/ui/table/TableHead.vue
index 3a2ea4ce..628e6eaa 100644
--- a/code/fms/fms-vue/src/components/ui/table/TableHead.vue
+++ b/code/fms/fms-vue/src/components/ui/table/TableHead.vue
@@ -1,16 +1,21 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
   <th
     data-slot="table-head"
-    :class="cn('text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5', props.class)"
+    :class="
+      cn(
+        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5',
+        props.class,
+      )
+    "
   >
     <slot />
   </th>
diff --git a/code/fms/fms-vue/src/components/ui/table/TableHeader.vue b/code/fms/fms-vue/src/components/ui/table/TableHeader.vue
index b4ab5cfb..dd62d552 100644
--- a/code/fms/fms-vue/src/components/ui/table/TableHeader.vue
+++ b/code/fms/fms-vue/src/components/ui/table/TableHeader.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
-  <thead
-    data-slot="table-header"
-    :class="cn('[&_tr]:border-b', props.class)"
-  >
+  <thead data-slot="table-header" :class="cn('[&_tr]:border-b', props.class)">
     <slot />
   </thead>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/table/TableRow.vue b/code/fms/fms-vue/src/components/ui/table/TableRow.vue
index 8f1d172f..58142216 100644
--- a/code/fms/fms-vue/src/components/ui/table/TableRow.vue
+++ b/code/fms/fms-vue/src/components/ui/table/TableRow.vue
@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
   <tr
     data-slot="table-row"
-    :class="cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', props.class)"
+    :class="
+      cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', props.class)
+    "
   >
     <slot />
   </tr>
diff --git a/code/fms/fms-vue/src/components/ui/table/index.ts b/code/fms/fms-vue/src/components/ui/table/index.ts
index 3be308b5..0afab4c0 100644
--- a/code/fms/fms-vue/src/components/ui/table/index.ts
+++ b/code/fms/fms-vue/src/components/ui/table/index.ts
@@ -1,9 +1,9 @@
-export { default as Table } from "./Table.vue"
-export { default as TableBody } from "./TableBody.vue"
-export { default as TableCaption } from "./TableCaption.vue"
-export { default as TableCell } from "./TableCell.vue"
-export { default as TableEmpty } from "./TableEmpty.vue"
-export { default as TableFooter } from "./TableFooter.vue"
-export { default as TableHead } from "./TableHead.vue"
-export { default as TableHeader } from "./TableHeader.vue"
-export { default as TableRow } from "./TableRow.vue"
+export { default as Table } from "./Table.vue";
+export { default as TableBody } from "./TableBody.vue";
+export { default as TableCaption } from "./TableCaption.vue";
+export { default as TableCell } from "./TableCell.vue";
+export { default as TableEmpty } from "./TableEmpty.vue";
+export { default as TableFooter } from "./TableFooter.vue";
+export { default as TableHead } from "./TableHead.vue";
+export { default as TableHeader } from "./TableHeader.vue";
+export { default as TableRow } from "./TableRow.vue";
diff --git a/code/fms/fms-vue/src/components/ui/tabs/Tabs.vue b/code/fms/fms-vue/src/components/ui/tabs/Tabs.vue
index d260a15c..3ee39e49 100644
--- a/code/fms/fms-vue/src/components/ui/tabs/Tabs.vue
+++ b/code/fms/fms-vue/src/components/ui/tabs/Tabs.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { TabsRootEmits, TabsRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { TabsRoot, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { TabsRootEmits, TabsRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { TabsRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<TabsRootProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<TabsRootEmits>()
+const props = defineProps<TabsRootProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<TabsRootEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const delegatedProps = reactiveOmit(props, "class");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/tabs/TabsContent.vue b/code/fms/fms-vue/src/components/ui/tabs/TabsContent.vue
index 3186ee88..416563d5 100644
--- a/code/fms/fms-vue/src/components/ui/tabs/TabsContent.vue
+++ b/code/fms/fms-vue/src/components/ui/tabs/TabsContent.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { TabsContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { TabsContent } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { TabsContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { TabsContent } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<TabsContentProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/tabs/TabsList.vue b/code/fms/fms-vue/src/components/ui/tabs/TabsList.vue
index 2b75b431..cc609882 100644
--- a/code/fms/fms-vue/src/components/ui/tabs/TabsList.vue
+++ b/code/fms/fms-vue/src/components/ui/tabs/TabsList.vue
@@ -1,23 +1,25 @@
 <script setup lang="ts">
-import type { TabsListProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { TabsList } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { TabsListProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { TabsList } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<TabsListProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<TabsListProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
   <TabsList
     data-slot="tabs-list"
     v-bind="delegatedProps"
-    :class="cn(
-      'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-0.75',
-      props.class,
-    )"
+    :class="
+      cn(
+        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-0.75',
+        props.class,
+      )
+    "
   >
     <slot />
   </TabsList>
diff --git a/code/fms/fms-vue/src/components/ui/tabs/TabsTrigger.vue b/code/fms/fms-vue/src/components/ui/tabs/TabsTrigger.vue
index e4f3f873..c588bb40 100644
--- a/code/fms/fms-vue/src/components/ui/tabs/TabsTrigger.vue
+++ b/code/fms/fms-vue/src/components/ui/tabs/TabsTrigger.vue
@@ -1,24 +1,26 @@
 <script setup lang="ts">
-import type { TabsTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { TabsTrigger, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { TabsTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { TabsTrigger, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes["class"] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
   <TabsTrigger
     data-slot="tabs-trigger"
-    :class="cn(
-      `data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-3 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
+    :class="
+      cn(
+        `data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-3 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        props.class,
+      )
+    "
     v-bind="forwardedProps"
   >
     <slot />
diff --git a/code/fms/fms-vue/src/components/ui/tabs/index.ts b/code/fms/fms-vue/src/components/ui/tabs/index.ts
index 7f99b7f2..3b3741b2 100644
--- a/code/fms/fms-vue/src/components/ui/tabs/index.ts
+++ b/code/fms/fms-vue/src/components/ui/tabs/index.ts
@@ -1,4 +1,4 @@
-export { default as Tabs } from "./Tabs.vue"
-export { default as TabsContent } from "./TabsContent.vue"
-export { default as TabsList } from "./TabsList.vue"
-export { default as TabsTrigger } from "./TabsTrigger.vue"
+export { default as Tabs } from "./Tabs.vue";
+export { default as TabsContent } from "./TabsContent.vue";
+export { default as TabsList } from "./TabsList.vue";
+export { default as TabsTrigger } from "./TabsTrigger.vue";
diff --git a/code/fms/fms-vue/src/components/ui/textarea/Textarea.vue b/code/fms/fms-vue/src/components/ui/textarea/Textarea.vue
index 3a4ddf30..c5ac2f21 100644
--- a/code/fms/fms-vue/src/components/ui/textarea/Textarea.vue
+++ b/code/fms/fms-vue/src/components/ui/textarea/Textarea.vue
@@ -1,28 +1,33 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { useVModel } from "@vueuse/core"
-import { cn } from "@/lib/utils"
+import type { HTMLAttributes } from "vue";
+import { useVModel } from "@vueuse/core";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-  defaultValue?: string | number
-  modelValue?: string | number
-}>()
+  class?: HTMLAttributes["class"];
+  defaultValue?: string | number;
+  modelValue?: string | number;
+}>();
 
 const emits = defineEmits<{
-  (e: "update:modelValue", payload: string | number): void
-}>()
+  (e: "update:modelValue", payload: string | number): void;
+}>();
 
 const modelValue = useVModel(props, "modelValue", emits, {
   passive: true,
   defaultValue: props.defaultValue,
-})
+});
 </script>
 
 <template>
   <textarea
     v-model="modelValue"
     data-slot="textarea"
-    :class="cn('border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', props.class)"
+    :class="
+      cn(
+        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        props.class,
+      )
+    "
   />
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/textarea/index.ts b/code/fms/fms-vue/src/components/ui/textarea/index.ts
index 8ce91e9c..178d08cb 100644
--- a/code/fms/fms-vue/src/components/ui/textarea/index.ts
+++ b/code/fms/fms-vue/src/components/ui/textarea/index.ts
@@ -1 +1 @@
-export { default as Textarea } from "./Textarea.vue"
+export { default as Textarea } from "./Textarea.vue";
diff --git a/code/fms/fms-vue/src/components/ui/toggle-group/ToggleGroup.vue b/code/fms/fms-vue/src/components/ui/toggle-group/ToggleGroup.vue
index 876051fd..46469f1d 100644
--- a/code/fms/fms-vue/src/components/ui/toggle-group/ToggleGroup.vue
+++ b/code/fms/fms-vue/src/components/ui/toggle-group/ToggleGroup.vue
@@ -1,34 +1,39 @@
 <script setup lang="ts">
-import type { VariantProps } from "class-variance-authority"
-import type { ToggleGroupRootEmits, ToggleGroupRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { toggleVariants } from '@/components/ui/toggle'
-import { reactiveOmit } from "@vueuse/core"
-import { ToggleGroupRoot, useForwardPropsEmits } from "reka-ui"
-import { provide } from "vue"
-import { cn } from "@/lib/utils"
+import type { VariantProps } from "class-variance-authority";
+import type { ToggleGroupRootEmits, ToggleGroupRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { toggleVariants } from "@/components/ui/toggle";
+import { reactiveOmit } from "@vueuse/core";
+import { ToggleGroupRoot, useForwardPropsEmits } from "reka-ui";
+import { provide } from "vue";
+import { cn } from "@/lib/utils";
 
-type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
 
-const props = withDefaults(defineProps<ToggleGroupRootProps & {
-  class?: HTMLAttributes["class"]
-  variant?: ToggleGroupVariants["variant"]
-  size?: ToggleGroupVariants["size"]
-  spacing?: number
-}>(), {
-  spacing: 0,
-})
+const props = withDefaults(
+  defineProps<
+    ToggleGroupRootProps & {
+      class?: HTMLAttributes["class"];
+      variant?: ToggleGroupVariants["variant"];
+      size?: ToggleGroupVariants["size"];
+      spacing?: number;
+    }
+  >(),
+  {
+    spacing: 0,
+  },
+);
 
-const emits = defineEmits<ToggleGroupRootEmits>()
+const emits = defineEmits<ToggleGroupRootEmits>();
 
 provide("toggleGroup", {
   variant: props.variant,
   size: props.size,
   spacing: props.spacing,
-})
+});
 
-const delegatedProps = reactiveOmit(props, "class", "size", "variant")
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const delegatedProps = reactiveOmit(props, "class", "size", "variant");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -42,7 +47,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       '--gap': spacing,
     }"
     v-bind="forwarded"
-    :class="cn('group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs', props.class)"
+    :class="
+      cn(
+        'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs',
+        props.class,
+      )
+    "
   >
     <slot v-bind="slotProps" />
   </ToggleGroupRoot>
diff --git a/code/fms/fms-vue/src/components/ui/toggle-group/ToggleGroupItem.vue b/code/fms/fms-vue/src/components/ui/toggle-group/ToggleGroupItem.vue
index c042abf8..a7e21f07 100644
--- a/code/fms/fms-vue/src/components/ui/toggle-group/ToggleGroupItem.vue
+++ b/code/fms/fms-vue/src/components/ui/toggle-group/ToggleGroupItem.vue
@@ -1,27 +1,29 @@
 <script setup lang="ts">
-import type { VariantProps } from "class-variance-authority"
-import type { ToggleGroupItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ToggleGroupItem, useForwardProps } from "reka-ui"
-import { inject } from "vue"
-import { cn } from "@/lib/utils"
-import { toggleVariants } from '@/components/ui/toggle'
+import type { VariantProps } from "class-variance-authority";
+import type { ToggleGroupItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ToggleGroupItem, useForwardProps } from "reka-ui";
+import { inject } from "vue";
+import { cn } from "@/lib/utils";
+import { toggleVariants } from "@/components/ui/toggle";
 
 type ToggleGroupVariants = VariantProps<typeof toggleVariants> & {
-  spacing?: number
-}
+  spacing?: number;
+};
 
-const props = defineProps<ToggleGroupItemProps & {
-  class?: HTMLAttributes["class"]
-  variant?: ToggleGroupVariants["variant"]
-  size?: ToggleGroupVariants["size"]
-}>()
+const props = defineProps<
+  ToggleGroupItemProps & {
+    class?: HTMLAttributes["class"];
+    variant?: ToggleGroupVariants["variant"];
+    size?: ToggleGroupVariants["size"];
+  }
+>();
 
-const context = inject<ToggleGroupVariants>("toggleGroup")
+const context = inject<ToggleGroupVariants>("toggleGroup");
 
-const delegatedProps = reactiveOmit(props, "class", "size", "variant")
-const forwardedProps = useForwardProps(delegatedProps)
+const delegatedProps = reactiveOmit(props, "class", "size", "variant");
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
@@ -32,14 +34,17 @@ const forwardedProps = useForwardProps(delegatedProps)
     :data-size="context?.size || size"
     :data-spacing="context?.spacing"
     v-bind="forwardedProps"
-    :class="cn(
-      toggleVariants({
-        variant: context?.variant || variant,
-        size: context?.size || size,
-      }),
-      'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',
-      'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',
-      props.class)"
+    :class="
+      cn(
+        toggleVariants({
+          variant: context?.variant || variant,
+          size: context?.size || size,
+        }),
+        'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',
+        'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',
+        props.class,
+      )
+    "
   >
     <slot v-bind="slotProps" />
   </ToggleGroupItem>
diff --git a/code/fms/fms-vue/src/components/ui/toggle-group/index.ts b/code/fms/fms-vue/src/components/ui/toggle-group/index.ts
index c6ce2fc9..c72df1e4 100644
--- a/code/fms/fms-vue/src/components/ui/toggle-group/index.ts
+++ b/code/fms/fms-vue/src/components/ui/toggle-group/index.ts
@@ -1,2 +1,2 @@
-export { default as ToggleGroup } from "./ToggleGroup.vue"
-export { default as ToggleGroupItem } from "./ToggleGroupItem.vue"
+export { default as ToggleGroup } from "./ToggleGroup.vue";
+export { default as ToggleGroupItem } from "./ToggleGroupItem.vue";
diff --git a/code/fms/fms-vue/src/components/ui/toggle/Toggle.vue b/code/fms/fms-vue/src/components/ui/toggle/Toggle.vue
index aea8e17d..2fd37335 100644
--- a/code/fms/fms-vue/src/components/ui/toggle/Toggle.vue
+++ b/code/fms/fms-vue/src/components/ui/toggle/Toggle.vue
@@ -1,26 +1,31 @@
 <script setup lang="ts">
-import type { ToggleEmits, ToggleProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ToggleVariants } from "."
-import { reactiveOmit } from "@vueuse/core"
-import { Toggle, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
-import { toggleVariants } from "."
+import type { ToggleEmits, ToggleProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { ToggleVariants } from ".";
+import { reactiveOmit } from "@vueuse/core";
+import { Toggle, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { toggleVariants } from ".";
 
-const props = withDefaults(defineProps<ToggleProps & {
-  class?: HTMLAttributes["class"]
-  variant?: ToggleVariants["variant"]
-  size?: ToggleVariants["size"]
-}>(), {
-  variant: "default",
-  size: "default",
-  disabled: false,
-})
+const props = withDefaults(
+  defineProps<
+    ToggleProps & {
+      class?: HTMLAttributes["class"];
+      variant?: ToggleVariants["variant"];
+      size?: ToggleVariants["size"];
+    }
+  >(),
+  {
+    variant: "default",
+    size: "default",
+    disabled: false,
+  },
+);
 
-const emits = defineEmits<ToggleEmits>()
+const emits = defineEmits<ToggleEmits>();
 
-const delegatedProps = reactiveOmit(props, "class", "size", "variant")
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const delegatedProps = reactiveOmit(props, "class", "size", "variant");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/toggle/index.ts b/code/fms/fms-vue/src/components/ui/toggle/index.ts
index 7bf08dce..428230b4 100644
--- a/code/fms/fms-vue/src/components/ui/toggle/index.ts
+++ b/code/fms/fms-vue/src/components/ui/toggle/index.ts
@@ -1,7 +1,7 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 
-export { default as Toggle } from "./Toggle.vue"
+export { default as Toggle } from "./Toggle.vue";
 
 export const toggleVariants = cva(
   "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
@@ -23,6 +23,6 @@ export const toggleVariants = cva(
       size: "default",
     },
   },
-)
+);
 
-export type ToggleVariants = VariantProps<typeof toggleVariants>
+export type ToggleVariants = VariantProps<typeof toggleVariants>;
diff --git a/code/fms/fms-vue/src/components/ui/tooltip/Tooltip.vue b/code/fms/fms-vue/src/components/ui/tooltip/Tooltip.vue
index 2a393d6d..4efee8cb 100644
--- a/code/fms/fms-vue/src/components/ui/tooltip/Tooltip.vue
+++ b/code/fms/fms-vue/src/components/ui/tooltip/Tooltip.vue
@@ -1,19 +1,15 @@
 <script setup lang="ts">
-import type { TooltipRootEmits, TooltipRootProps } from "reka-ui"
-import { TooltipRoot, useForwardPropsEmits } from "reka-ui"
+import type { TooltipRootEmits, TooltipRootProps } from "reka-ui";
+import { TooltipRoot, useForwardPropsEmits } from "reka-ui";
 
-const props = defineProps<TooltipRootProps>()
-const emits = defineEmits<TooltipRootEmits>()
+const props = defineProps<TooltipRootProps>();
+const emits = defineEmits<TooltipRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <TooltipRoot
-    v-slot="slotProps"
-    data-slot="tooltip"
-    v-bind="forwarded"
-  >
+  <TooltipRoot v-slot="slotProps" data-slot="tooltip" v-bind="forwarded">
     <slot v-bind="slotProps" />
   </TooltipRoot>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/tooltip/TooltipContent.vue b/code/fms/fms-vue/src/components/ui/tooltip/TooltipContent.vue
index 7954b147..9c9365c9 100644
--- a/code/fms/fms-vue/src/components/ui/tooltip/TooltipContent.vue
+++ b/code/fms/fms-vue/src/components/ui/tooltip/TooltipContent.vue
@@ -1,22 +1,25 @@
 <script setup lang="ts">
-import type { TooltipContentEmits, TooltipContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { TooltipContentEmits, TooltipContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(), {
-  sideOffset: 4,
-})
+const props = withDefaults(
+  defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    sideOffset: 4,
+  },
+);
 
-const emits = defineEmits<TooltipContentEmits>()
+const emits = defineEmits<TooltipContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const delegatedProps = reactiveOmit(props, "class");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -24,11 +27,18 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <TooltipContent
       data-slot="tooltip-content"
       v-bind="{ ...forwarded, ...$attrs }"
-      :class="cn('bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
+      :class="
+        cn(
+          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance',
+          props.class,
+        )
+      "
     >
       <slot />
 
-      <TooltipArrow class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-xs" />
+      <TooltipArrow
+        class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-xs"
+      />
     </TooltipContent>
   </TooltipPortal>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/tooltip/TooltipProvider.vue b/code/fms/fms-vue/src/components/ui/tooltip/TooltipProvider.vue
index 395927d5..7eb50ddd 100644
--- a/code/fms/fms-vue/src/components/ui/tooltip/TooltipProvider.vue
+++ b/code/fms/fms-vue/src/components/ui/tooltip/TooltipProvider.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { TooltipProviderProps } from "reka-ui"
-import { TooltipProvider } from "reka-ui"
+import type { TooltipProviderProps } from "reka-ui";
+import { TooltipProvider } from "reka-ui";
 
 const props = withDefaults(defineProps<TooltipProviderProps>(), {
   delayDuration: 0,
-})
+});
 </script>
 
 <template>
diff --git a/code/fms/fms-vue/src/components/ui/tooltip/TooltipTrigger.vue b/code/fms/fms-vue/src/components/ui/tooltip/TooltipTrigger.vue
index 3332950e..e624a660 100644
--- a/code/fms/fms-vue/src/components/ui/tooltip/TooltipTrigger.vue
+++ b/code/fms/fms-vue/src/components/ui/tooltip/TooltipTrigger.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { TooltipTriggerProps } from "reka-ui"
-import { TooltipTrigger } from "reka-ui"
+import type { TooltipTriggerProps } from "reka-ui";
+import { TooltipTrigger } from "reka-ui";
 
-const props = defineProps<TooltipTriggerProps>()
+const props = defineProps<TooltipTriggerProps>();
 </script>
 
 <template>
-  <TooltipTrigger
-    data-slot="tooltip-trigger"
-    v-bind="props"
-  >
+  <TooltipTrigger data-slot="tooltip-trigger" v-bind="props">
     <slot />
   </TooltipTrigger>
 </template>
diff --git a/code/fms/fms-vue/src/components/ui/tooltip/index.ts b/code/fms/fms-vue/src/components/ui/tooltip/index.ts
index 8f8d514d..0a8a8786 100644
--- a/code/fms/fms-vue/src/components/ui/tooltip/index.ts
+++ b/code/fms/fms-vue/src/components/ui/tooltip/index.ts
@@ -1,4 +1,4 @@
-export { default as Tooltip } from "./Tooltip.vue"
-export { default as TooltipContent } from "./TooltipContent.vue"
-export { default as TooltipProvider } from "./TooltipProvider.vue"
-export { default as TooltipTrigger } from "./TooltipTrigger.vue"
+export { default as Tooltip } from "./Tooltip.vue";
+export { default as TooltipContent } from "./TooltipContent.vue";
+export { default as TooltipProvider } from "./TooltipProvider.vue";
+export { default as TooltipTrigger } from "./TooltipTrigger.vue";
diff --git a/code/fms/fms-vue/src/layouts/DefaultLayout.vue b/code/fms/fms-vue/src/layouts/DefaultLayout.vue
index e68f753f..39b943f9 100644
--- a/code/fms/fms-vue/src/layouts/DefaultLayout.vue
+++ b/code/fms/fms-vue/src/layouts/DefaultLayout.vue
@@ -1,60 +1,65 @@
 <script setup lang="ts">
-import { useEventListener, usePreferredReducedMotion } from '@vueuse/core'
-import { computed, ref } from 'vue'
-import { useRoute } from 'vue-router'
-import { useAppStore } from '@/stores/app'
-import AppSidebar from '@/layouts/components/AppSidebar.vue'
-import AppTabs from '@/layouts/components/AppTabs.vue'
-import AppTopbar from '@/layouts/components/AppTopbar.vue'
-import {
-  SidebarInset, SidebarProvider,
-} from '@/components/ui/sidebar'
+import { useEventListener, usePreferredReducedMotion } from "@vueuse/core";
+import { computed, ref } from "vue";
+import { useRoute } from "vue-router";
+import { useAppStore } from "@/stores/app";
+import AppSidebar from "@/layouts/components/AppSidebar.vue";
+import AppTabs from "@/layouts/components/AppTabs.vue";
+import AppTopbar from "@/layouts/components/AppTopbar.vue";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 
-const route = useRoute()
-const appStore = useAppStore()
-const preferredReducedMotion = usePreferredReducedMotion()
+const route = useRoute();
+const appStore = useAppStore();
+const preferredReducedMotion = usePreferredReducedMotion();
 const routeInstanceKey = computed(
   () => `${route.fullPath}:${appStore.getRouteRefreshKey(route.fullPath)}`,
-)
+);
 
 // -- drag rail --
-const MIN_WIDTH = 180; const MAX_WIDTH = 400
-const dragging = ref(false)
-let startX = 0, startWidth = 0
+const MIN_WIDTH = 180;
+const MAX_WIDTH = 400;
+const dragging = ref(false);
+let startX = 0,
+  startWidth = 0;
 
-useEventListener('mousemove', (e: MouseEvent) => {
-  if (!dragging.value) return
-  const newWidth = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, Math.round(startWidth + e.clientX - startX)))
-  const wrapper = document.querySelector("[data-slot='sidebar-wrapper']") as HTMLElement | null
-  wrapper?.style.setProperty("--sidebar-width", `${newWidth / 16}rem`)
-})
+useEventListener("mousemove", (e: MouseEvent) => {
+  if (!dragging.value) return;
+  const newWidth = Math.max(
+    MIN_WIDTH,
+    Math.min(MAX_WIDTH, Math.round(startWidth + e.clientX - startX)),
+  );
+  const wrapper = document.querySelector("[data-slot='sidebar-wrapper']") as HTMLElement | null;
+  wrapper?.style.setProperty("--sidebar-width", `${newWidth / 16}rem`);
+});
 
-useEventListener('mouseup', () => {
-  if (!dragging.value) return
-  dragging.value = false
-  const wrapper = document.querySelector("[data-slot='sidebar-wrapper']") as HTMLElement | null
+useEventListener("mouseup", () => {
+  if (!dragging.value) return;
+  dragging.value = false;
+  const wrapper = document.querySelector("[data-slot='sidebar-wrapper']") as HTMLElement | null;
   if (wrapper) {
-    wrapper.style.userSelect = ""
-    const group = wrapper.querySelector(".group.peer") as HTMLElement | null
-    group?.querySelectorAll("*").forEach(el => {
-      (el as HTMLElement).style.removeProperty("transition")
-    })
+    wrapper.style.userSelect = "";
+    const group = wrapper.querySelector(".group.peer") as HTMLElement | null;
+    group?.querySelectorAll("*").forEach((el) => {
+      (el as HTMLElement).style.removeProperty("transition");
+    });
   }
-})
+});
 
 function onRailMouseDown(e: MouseEvent) {
-  const sidebar = document.querySelector("[data-slot='sidebar']") as HTMLElement | null
-  if (sidebar?.dataset.state !== "expanded") return
-  e.preventDefault(); dragging.value = true; startX = e.clientX
-  const wrapper = document.querySelector("[data-slot='sidebar-wrapper']") as HTMLElement | null
+  const sidebar = document.querySelector("[data-slot='sidebar']") as HTMLElement | null;
+  if (sidebar?.dataset.state !== "expanded") return;
+  e.preventDefault();
+  dragging.value = true;
+  startX = e.clientX;
+  const wrapper = document.querySelector("[data-slot='sidebar-wrapper']") as HTMLElement | null;
   if (wrapper) {
-    const w = getComputedStyle(wrapper).getPropertyValue("--sidebar-width").trim()
-    startWidth = parseFloat(w || "14") * 16
-    wrapper.style.userSelect = "none"
-    const group = wrapper.querySelector(".group.peer") as HTMLElement | null
-    group?.querySelectorAll("*").forEach(el => {
-      (el as HTMLElement).style.setProperty("transition", "none", "important")
-    })
+    const w = getComputedStyle(wrapper).getPropertyValue("--sidebar-width").trim();
+    startWidth = parseFloat(w || "14") * 16;
+    wrapper.style.userSelect = "none";
+    const group = wrapper.querySelector(".group.peer") as HTMLElement | null;
+    group?.querySelectorAll("*").forEach((el) => {
+      (el as HTMLElement).style.setProperty("transition", "none", "important");
+    });
   }
 }
 </script>
@@ -80,11 +85,7 @@ function onRailMouseDown(e: MouseEvent) {
 
       <div class="flex min-h-0 min-w-0 flex-1 flex-col gap-4 overflow-auto p-4 pt-2">
         <router-view v-slot="{ Component }">
-          <transition
-            name="page"
-            mode="out-in"
-            :css="preferredReducedMotion !== 'reduce'"
-          >
+          <transition name="page" mode="out-in" :css="preferredReducedMotion !== 'reduce'">
             <keep-alive :max="8">
               <component :is="Component" :key="routeInstanceKey" />
             </keep-alive>
diff --git a/code/fms/fms-vue/src/layouts/components/AppSidebar.vue b/code/fms/fms-vue/src/layouts/components/AppSidebar.vue
index 9b6a5266..52f22572 100644
--- a/code/fms/fms-vue/src/layouts/components/AppSidebar.vue
+++ b/code/fms/fms-vue/src/layouts/components/AppSidebar.vue
@@ -1,101 +1,108 @@
 <script setup lang="ts">
-import type { SidebarProps } from '@/components/ui/sidebar'
-import type { NavItem } from '@/layouts/components/NavMenuItem.vue'
+import type { SidebarProps } from "@/components/ui/sidebar";
+import type { NavItem } from "@/layouts/components/NavMenuItem.vue";
 
 import {
-  AudioWaveform, ChevronsUpDown, Command,
-  GalleryVerticalEnd, LayoutGrid, Plus,
-} from "@lucide/vue"
-import { computed, onMounted, ref } from 'vue'
-import { usePermissionStore } from '@/stores/permissions'
-import { getIcon } from '@/utils/lucideIcons'
-import { buildTree, sortTree } from '@/utils/tree'
+  AudioWaveform,
+  ChevronsUpDown,
+  Command,
+  GalleryVerticalEnd,
+  LayoutGrid,
+  Plus,
+} from "@lucide/vue";
+import { computed, onMounted, ref } from "vue";
+import { usePermissionStore } from "@/stores/permissions";
+import { getIcon } from "@/utils/lucideIcons";
+import { buildTree, sortTree } from "@/utils/tree";
 
 import {
-  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel,
-  DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import {
-  Sidebar, SidebarContent, SidebarHeader, SidebarMenu,
-  SidebarMenuButton, SidebarMenuItem, useSidebar,
-} from '@/components/ui/sidebar'
-import NavMain from '@/layouts/components/NavMain.vue'
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import NavMain from "@/layouts/components/NavMain.vue";
 
 const props = withDefaults(defineProps<SidebarProps>(), {
   collapsible: "icon",
-})
+});
 
-const { isMobile: isSidebarMobile } = useSidebar()
-const permissionStore = usePermissionStore()
+const { isMobile: isSidebarMobile } = useSidebar();
+const permissionStore = usePermissionStore();
 
 // ---- teams ----
 const teams = [
   { name: "金地集团", logo: GalleryVerticalEnd, plan: "企业版" },
   { name: "金地科技", logo: AudioWaveform, plan: "创业版" },
   { name: "测试公司", logo: Command, plan: "免费版" },
-]
-const activeTeam = ref(teams[0]!)
+];
+const activeTeam = ref(teams[0]!);
 
 // ---- dynamic nav items ----
 const navMain = computed(() => {
-  const items: NavItem[] = [
-    { title: "工作台", url: "/dashboard", icon: LayoutGrid },
-  ]
+  const items: NavItem[] = [{ title: "工作台", url: "/dashboard", icon: LayoutGrid }];
 
   const menuModules = permissionStore.modules.filter(
     (m: any) =>
-      m.b_canmenu === 1 &&
-      m.b_canuse === 1 &&
-      ["directory", "page"].includes(m.b_module_type),
-  )
+      m.b_canmenu === 1 && m.b_canuse === 1 && ["directory", "page"].includes(m.b_module_type),
+  );
 
-  if (!menuModules.length) return items
+  if (!menuModules.length) return items;
 
   // Keep only modules whose parent (if any) is also in the menu
-  const allowedIds = new Set(menuModules.map((m: any) => String(m.b_id)))
+  const allowedIds = new Set(menuModules.map((m: any) => String(m.b_id)));
   const valid = menuModules.filter(
-    (m: any) =>
-      m.b_parent_id == null || allowedIds.has(String(m.b_parent_id)),
-  )
+    (m: any) => m.b_parent_id == null || allowedIds.has(String(m.b_parent_id)),
+  );
 
-  const cloned: any[] = JSON.parse(JSON.stringify(valid))
-  const tree = buildTree(cloned)
-  sortTree(tree)
+  const cloned: any[] = JSON.parse(JSON.stringify(valid));
+  const tree = buildTree(cloned);
+  sortTree(tree);
 
   for (const node of tree) {
-    const item = toNavItem(node)
-    if (item) items.push(item)
+    const item = toNavItem(node);
+    if (item) items.push(item);
   }
 
-  return items
-})
+  return items;
+});
 
 function toNavItem(node: any): NavItem | null {
-  const isDir = node.b_module_type === "directory"
-  const icon = isDir ? getIcon(node.b_icon) ?? undefined : undefined
+  const isDir = node.b_module_type === "directory";
+  const icon = isDir ? (getIcon(node.b_icon) ?? undefined) : undefined;
 
   const item: NavItem = {
     title: node.b_name || node.b_code,
     url: node.b_route ? String(node.b_route) : `#${node.b_code}`,
-  }
-  if (icon) item.icon = icon
+  };
+  if (icon) item.icon = icon;
 
   if (!isDir && node.b_code) {
-    item.moduleId = String(node.b_code)
+    item.moduleId = String(node.b_code);
   }
 
   if (node.children?.length) {
-    item.items = node.children
-      .map((c: any) => toNavItem(c))
-      .filter(Boolean) as NavItem[]
+    item.items = node.children.map((c: any) => toNavItem(c)).filter(Boolean) as NavItem[];
   }
 
-  return item
+  return item;
 }
 
 onMounted(() => {
-  permissionStore.load()
-})
+  permissionStore.load();
+});
 </script>
 
 <template>
@@ -106,8 +113,13 @@ onMounted(() => {
         <SidebarMenuItem>
           <DropdownMenu>
             <DropdownMenuTrigger as-child>
-              <SidebarMenuButton size="lg" class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
-                <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+              <SidebarMenuButton
+                size="lg"
+                class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              >
+                <div
+                  class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
+                >
                   <component :is="activeTeam.logo" class="size-4" />
                 </div>
                 <div class="grid flex-1 text-left text-sm leading-tight">
@@ -117,10 +129,19 @@ onMounted(() => {
                 <ChevronsUpDown class="ml-auto" />
               </SidebarMenuButton>
             </DropdownMenuTrigger>
-            <DropdownMenuContent class="w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg" align="start"
-              :side="isSidebarMobile ? 'bottom' : 'right'" :side-offset="4">
+            <DropdownMenuContent
+              class="w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+              align="start"
+              :side="isSidebarMobile ? 'bottom' : 'right'"
+              :side-offset="4"
+            >
               <DropdownMenuLabel class="text-xs text-muted-foreground">Teams</DropdownMenuLabel>
-              <DropdownMenuItem v-for="(team, i) in teams" :key="team.name" class="gap-2 p-2" @click="activeTeam = team">
+              <DropdownMenuItem
+                v-for="(team, i) in teams"
+                :key="team.name"
+                class="gap-2 p-2"
+                @click="activeTeam = team"
+              >
                 <div class="flex size-6 items-center justify-center rounded-sm border">
                   <component :is="team.logo" class="size-3.5 shrink-0" />
                 </div>
@@ -129,7 +150,9 @@ onMounted(() => {
               </DropdownMenuItem>
               <DropdownMenuSeparator />
               <DropdownMenuItem class="gap-2 p-2">
-                <div class="flex size-6 items-center justify-center rounded-md border bg-transparent">
+                <div
+                  class="flex size-6 items-center justify-center rounded-md border bg-transparent"
+                >
                   <Plus class="size-4" />
                 </div>
                 <div class="font-medium text-muted-foreground">Add team</div>
diff --git a/code/fms/fms-vue/src/layouts/components/AppTabs.vue b/code/fms/fms-vue/src/layouts/components/AppTabs.vue
index fe5ce5de..e960a33f 100644
--- a/code/fms/fms-vue/src/layouts/components/AppTabs.vue
+++ b/code/fms/fms-vue/src/layouts/components/AppTabs.vue
@@ -1,109 +1,109 @@
 <script setup lang="ts">
-import { ChevronLeft, ChevronRight, X } from "@lucide/vue"
-import { useResizeObserver } from "@vueuse/core"
-import { useRoute, useRouter } from "vue-router"
-import { computed, nextTick, ref, watch } from "vue"
-import { useAppStore } from "@/stores/app"
-import { Button } from "@/components/ui/button"
+import { ChevronLeft, ChevronRight, X } from "@lucide/vue";
+import { useResizeObserver } from "@vueuse/core";
+import { useRoute, useRouter } from "vue-router";
+import { computed, nextTick, ref, watch } from "vue";
+import { useAppStore } from "@/stores/app";
+import { Button } from "@/components/ui/button";
 
-const route = useRoute()
-const router = useRouter()
-const appStore = useAppStore()
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
 
-const trackRef = ref<HTMLElement | null>(null)
-const overflowed = ref(false)
-const canScrollLeft = ref(false)
-const canScrollRight = ref(false)
-const activeKey = computed(() => route.fullPath)
-const tabs = computed(() => appStore.visitedTabs)
+const trackRef = ref<HTMLElement | null>(null);
+const overflowed = ref(false);
+const canScrollLeft = ref(false);
+const canScrollRight = ref(false);
+const activeKey = computed(() => route.fullPath);
+const tabs = computed(() => appStore.visitedTabs);
 
 // Watch route changes to add tabs
 watch(
   () => route.fullPath,
   async () => {
-    const meta = route.meta as { title?: string }
+    const meta = route.meta as { title?: string };
     if (meta.title) {
       appStore.addVisitedTab({
         key: route.fullPath,
         label: meta.title,
         closable: route.fullPath !== "/dashboard",
-      })
+      });
     }
-    await nextTick()
-    revealActiveTab()
-    updateScrollState()
+    await nextTick();
+    revealActiveTab();
+    updateScrollState();
   },
   { immediate: true },
-)
+);
 
 // Update scroll state when tabs change
-watch(() => appStore.visitedTabs.length, async () => {
-  await nextTick()
-  updateScrollState()
-})
+watch(
+  () => appStore.visitedTabs.length,
+  async () => {
+    await nextTick();
+    updateScrollState();
+  },
+);
 
-useResizeObserver(trackRef, updateScrollState)
+useResizeObserver(trackRef, updateScrollState);
 
 function changeTab(key: string) {
-  if (key !== route.fullPath) router.push(key)
+  if (key !== route.fullPath) router.push(key);
 }
 
 function closeTab(key: string, e: MouseEvent) {
-  e.stopPropagation()
-  if (key === "/dashboard") return
-  const currentIndex = tabs.value.findIndex(t => t.key === key)
-  const fallback =
-    tabs.value[currentIndex - 1] ??
-    tabs.value[currentIndex + 1] ??
-    tabs.value[0]
-  appStore.removeVisitedTab(key)
-  if (route.fullPath === key && fallback) router.push(fallback.key)
+  e.stopPropagation();
+  if (key === "/dashboard") return;
+  const currentIndex = tabs.value.findIndex((t) => t.key === key);
+  const fallback = tabs.value[currentIndex - 1] ?? tabs.value[currentIndex + 1] ?? tabs.value[0];
+  appStore.removeVisitedTab(key);
+  if (route.fullPath === key && fallback) router.push(fallback.key);
 }
 
 function updateScrollState() {
-  const track = trackRef.value
-  if (!track) return
-  const shouldOverflow = track.scrollWidth > track.clientWidth + 1
-  overflowed.value = shouldOverflow
+  const track = trackRef.value;
+  if (!track) return;
+  const shouldOverflow = track.scrollWidth > track.clientWidth + 1;
+  overflowed.value = shouldOverflow;
   if (!shouldOverflow) {
-    track.scrollLeft = 0
-    canScrollLeft.value = false
-    canScrollRight.value = false
-    return
+    track.scrollLeft = 0;
+    canScrollLeft.value = false;
+    canScrollRight.value = false;
+    return;
   }
-  canScrollLeft.value = track.scrollLeft > 1
-  canScrollRight.value = track.scrollLeft + track.clientWidth < track.scrollWidth - 1
+  canScrollLeft.value = track.scrollLeft > 1;
+  canScrollRight.value = track.scrollLeft + track.clientWidth < track.scrollWidth - 1;
 }
 
 function scrollTabs(direction: number) {
-  const track = trackRef.value
-  if (!track) return
+  const track = trackRef.value;
+  if (!track) return;
   track.scrollBy({
     left: direction * Math.max(track.clientWidth * 0.6, 120),
     behavior: "smooth",
-  })
+  });
 }
 
 function revealActiveTab(behavior: ScrollBehavior = "smooth") {
-  const track = trackRef.value
-  if (!track) return
+  const track = trackRef.value;
+  if (!track) return;
   const activeElement = Array.from(track.querySelectorAll<HTMLElement>("[data-tab-key]")).find(
-    element => element.dataset.tabKey === activeKey.value,
-  )
-  activeElement?.scrollIntoView({ behavior, block: "nearest", inline: "center" })
+    (element) => element.dataset.tabKey === activeKey.value,
+  );
+  activeElement?.scrollIntoView({ behavior, block: "nearest", inline: "center" });
 }
 
 function handleWheel(e: WheelEvent) {
-  const track = trackRef.value
-  if (!track || track.scrollWidth <= track.clientWidth) return
-  const delta = Math.abs(e.deltaY) >= Math.abs(e.deltaX) ? e.deltaY : e.deltaX
-  if (!delta) return
-  e.preventDefault()
-  track.scrollLeft += delta
+  const track = trackRef.value;
+  if (!track || track.scrollWidth <= track.clientWidth) return;
+  const delta = Math.abs(e.deltaY) >= Math.abs(e.deltaX) ? e.deltaY : e.deltaX;
+  if (!delta) return;
+  e.preventDefault();
+  track.scrollLeft += delta;
 }
 
 function refreshTab(key: string) {
-  appStore.refreshRoute(key)
+  appStore.refreshRoute(key);
 }
 </script>
 
@@ -142,10 +142,12 @@ function refreshTab(key: string) {
         :data-tab-key="tab.key"
         :aria-selected="tab.key === activeKey"
         class="group/tab relative flex shrink-0 items-center gap-1 h-7 rounded-md pl-2.5 text-xs font-medium transition-colors cursor-pointer border"
-        :class="[tab.key === activeKey
-          ? 'bg-muted text-foreground border-border'
-          : 'bg-background text-muted-foreground border-border/70 hover:border-border hover:text-foreground',
-          tab.closable ? 'pr-0' : 'pr-2.5']"
+        :class="[
+          tab.key === activeKey
+            ? 'bg-muted text-foreground border-border'
+            : 'bg-background text-muted-foreground border-border/70 hover:border-border hover:text-foreground',
+          tab.closable ? 'pr-0' : 'pr-2.5',
+        ]"
         @click="changeTab(tab.key)"
         @dblclick.prevent="refreshTab(tab.key)"
       >
diff --git a/code/fms/fms-vue/src/layouts/components/AppTopbar.vue b/code/fms/fms-vue/src/layouts/components/AppTopbar.vue
index af91b4d3..b0610450 100644
--- a/code/fms/fms-vue/src/layouts/components/AppTopbar.vue
+++ b/code/fms/fms-vue/src/layouts/components/AppTopbar.vue
@@ -1,79 +1,103 @@
 <script setup lang="ts">
 import {
-  BadgeCheck, Bell, ChevronDown, CreditCard, Languages, LogOut, Moon, Palette, Sun,
-} from "@lucide/vue"
-import { computed, onMounted, watchEffect } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { toast } from "vue-sonner"
-import { useAppStore } from '@/stores/app'
-import { useAuthStore } from '@/stores/auth'
+  BadgeCheck,
+  Bell,
+  ChevronDown,
+  CreditCard,
+  Languages,
+  LogOut,
+  Moon,
+  Palette,
+  Sun,
+} from "@lucide/vue";
+import { computed, onMounted, watchEffect } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { toast } from "vue-sonner";
+import { useAppStore } from "@/stores/app";
+import { useAuthStore } from "@/stores/auth";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
-  Avatar, AvatarFallback, AvatarImage,
-} from '@/components/ui/avatar'
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
 import {
-  Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb'
-import { Button } from '@/components/ui/button'
-import {
-  DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem,
-  DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { Separator } from '@/components/ui/separator'
-import { SidebarTrigger } from '@/components/ui/sidebar'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Separator } from "@/components/ui/separator";
+import { SidebarTrigger } from "@/components/ui/sidebar";
 
-const route = useRoute()
-const router = useRouter()
-const store = useAppStore()
-const authStore = useAuthStore()
+const route = useRoute();
+const router = useRouter();
+const store = useAppStore();
+const authStore = useAuthStore();
 
 const user = computed(() => ({
-  name: authStore.user?.name ?? '用户',
-  email: authStore.user?.account ?? '',
-  avatar: '',
-}))
+  name: authStore.user?.name ?? "用户",
+  email: authStore.user?.account ?? "",
+  avatar: "",
+}));
 
 function logout() {
-  authStore.clearSession()
-  toast.info('已退出登录')
-  router.replace('/login')
+  authStore.clearSession();
+  toast.info("已退出登录");
+  router.replace("/login");
 }
 
-const breadcrumbTitle = computed(() => (route.meta as { title?: string }).title ?? String(route.name ?? ''))
-const breadcrumbSection = computed(() => (route.meta as { section?: string }).section)
+const breadcrumbTitle = computed(
+  () => (route.meta as { title?: string }).title ?? String(route.name ?? ""),
+);
+const breadcrumbSection = computed(() => (route.meta as { section?: string }).section);
 const breadcrumbItems = computed(() => {
-  const items: { label: string; current?: boolean }[] = []
+  const items: { label: string; current?: boolean }[] = [];
   if (breadcrumbSection.value) {
-    items.push({ label: breadcrumbSection.value })
+    items.push({ label: breadcrumbSection.value });
   }
   if (breadcrumbTitle.value) {
-    items.push({ label: breadcrumbTitle.value, current: true })
+    items.push({ label: breadcrumbTitle.value, current: true });
   }
   if (items.length === 0) {
-    items.push({ label: '工作台', current: true })
+    items.push({ label: "工作台", current: true });
   }
-  return items
-})
+  return items;
+});
 
 // Apply color scheme on mount and whenever dark/scheme changes
 onMounted(() => {
-  const scheme = store.schemeKeys[store.schemeIndex]
-  const theme = store.isDark ? scheme.dark : scheme.light
-  applyTheme(theme)
-})
+  const scheme = store.schemeKeys[store.schemeIndex];
+  const theme = store.isDark ? scheme.dark : scheme.light;
+  applyTheme(theme);
+});
 
 watchEffect(() => {
-  const scheme = store.schemeKeys[store.schemeIndex]
-  const theme = store.isDark ? scheme.dark : scheme.light
-  applyTheme(theme)
-})
+  const scheme = store.schemeKeys[store.schemeIndex];
+  const theme = store.isDark ? scheme.dark : scheme.light;
+  applyTheme(theme);
+});
 
-function applyTheme(theme: { primary: string; primaryFg: string; ring: string; sidebarPrimary: string; sidebarRing: string }) {
-  const root = document.documentElement
-  root.style.setProperty('--primary', theme.primary)
-  root.style.setProperty('--primary-foreground', theme.primaryFg)
-  root.style.setProperty('--ring', theme.ring)
-  root.style.setProperty('--sidebar-primary', theme.sidebarPrimary)
-  root.style.setProperty('--sidebar-ring', theme.sidebarRing)
+function applyTheme(theme: {
+  primary: string;
+  primaryFg: string;
+  ring: string;
+  sidebarPrimary: string;
+  sidebarRing: string;
+}) {
+  const root = document.documentElement;
+  root.style.setProperty("--primary", theme.primary);
+  root.style.setProperty("--primary-foreground", theme.primaryFg);
+  root.style.setProperty("--ring", theme.ring);
+  root.style.setProperty("--sidebar-primary", theme.sidebarPrimary);
+  root.style.setProperty("--sidebar-ring", theme.sidebarRing);
 }
 </script>
 
@@ -98,7 +122,13 @@ function applyTheme(theme: { primary: string; primaryFg: string; ring: string; s
 
     <!-- Right tools -->
     <div class="flex items-center gap-1 px-4">
-      <Button variant="ghost" size="icon-sm" class="cursor-pointer" @click="store.toggleLocale" :title="store.locale === 'zh-CN' ? 'English' : '中文'">
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        class="cursor-pointer"
+        @click="store.toggleLocale"
+        :title="store.locale === 'zh-CN' ? 'English' : '中文'"
+      >
         <Languages />
       </Button>
 
@@ -123,7 +153,13 @@ function applyTheme(theme: { primary: string; primaryFg: string; ring: string; s
         </DropdownMenuContent>
       </DropdownMenu>
 
-      <Button variant="ghost" size="icon-sm" class="cursor-pointer" @click="store.toggleTheme" :title="store.isDark ? '浅色模式' : '深色模式'">
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        class="cursor-pointer"
+        @click="store.toggleTheme"
+        :title="store.isDark ? '浅色模式' : '深色模式'"
+      >
         <Sun v-if="store.isDark" />
         <Moon v-else />
       </Button>
@@ -135,10 +171,16 @@ function applyTheme(theme: { primary: string; primaryFg: string; ring: string; s
       <!-- User dropdown -->
       <DropdownMenu>
         <DropdownMenuTrigger as-child>
-          <Button variant="ghost" size="sm" class="gap-2 cursor-pointer data-[state=open]:bg-accent">
+          <Button
+            variant="ghost"
+            size="sm"
+            class="gap-2 cursor-pointer data-[state=open]:bg-accent"
+          >
             <Avatar class="size-7 rounded-md">
               <AvatarImage :src="user.avatar" :alt="user.name" />
-              <AvatarFallback class="rounded-md text-xs">{{ user.name.slice(0, 1) }}</AvatarFallback>
+              <AvatarFallback class="rounded-md text-xs">{{
+                user.name.slice(0, 1)
+              }}</AvatarFallback>
             </Avatar>
             <span class="hidden text-sm font-medium md:inline">{{ user.name }}</span>
             <ChevronDown class="size-3.5 text-muted-foreground" />
diff --git a/code/fms/fms-vue/src/layouts/components/NavMain.vue b/code/fms/fms-vue/src/layouts/components/NavMain.vue
index 7aea8a41..ff0def41 100644
--- a/code/fms/fms-vue/src/layouts/components/NavMain.vue
+++ b/code/fms/fms-vue/src/layouts/components/NavMain.vue
@@ -1,25 +1,17 @@
 <script setup lang="ts">
-import type { NavItem } from '@/layouts/components/NavMenuItem.vue'
-import NavMenuItem from '@/layouts/components/NavMenuItem.vue'
-import {
-  SidebarGroup,
-  SidebarMenu,
-} from '@/components/ui/sidebar'
+import type { NavItem } from "@/layouts/components/NavMenuItem.vue";
+import NavMenuItem from "@/layouts/components/NavMenuItem.vue";
+import { SidebarGroup, SidebarMenu } from "@/components/ui/sidebar";
 
 defineProps<{
-  items: NavItem[]
-}>()
+  items: NavItem[];
+}>();
 </script>
 
 <template>
   <SidebarGroup>
     <SidebarMenu>
-      <NavMenuItem
-        v-for="item in items"
-        :key="item.title"
-        :item="item"
-        :depth="0"
-      />
+      <NavMenuItem v-for="item in items" :key="item.title" :item="item" :depth="0" />
     </SidebarMenu>
   </SidebarGroup>
 </template>
diff --git a/code/fms/fms-vue/src/layouts/components/NavMenuItem.vue b/code/fms/fms-vue/src/layouts/components/NavMenuItem.vue
index d66b4a4c..d1fd41e0 100644
--- a/code/fms/fms-vue/src/layouts/components/NavMenuItem.vue
+++ b/code/fms/fms-vue/src/layouts/components/NavMenuItem.vue
@@ -1,19 +1,15 @@
 <script setup lang="ts">
-import type { LucideIcon } from "@lucide/vue"
-import { ChevronRight } from "@lucide/vue"
-import { RouterLink, useRoute } from 'vue-router'
-import { computed } from 'vue'
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from '@/components/ui/collapsible'
+import type { LucideIcon } from "@lucide/vue";
+import { ChevronRight } from "@lucide/vue";
+import { RouterLink, useRoute } from "vue-router";
+import { computed } from "vue";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
+} from "@/components/ui/dropdown-menu";
 import {
   SidebarMenuButton,
   SidebarMenuItem,
@@ -21,37 +17,40 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem,
   useSidebar,
-} from '@/components/ui/sidebar'
+} from "@/components/ui/sidebar";
 
 export type NavItem = {
-  title: string
-  url: string
-  icon?: LucideIcon
-  isActive?: boolean
-  items?: NavItem[]
-  moduleId?: string
-}
+  title: string;
+  url: string;
+  icon?: LucideIcon;
+  isActive?: boolean;
+  items?: NavItem[];
+  moduleId?: string;
+};
 
-const props = withDefaults(defineProps<{
-  item: NavItem
-  depth?: number
-}>(), {
-  depth: 0,
-})
+const props = withDefaults(
+  defineProps<{
+    item: NavItem;
+    depth?: number;
+  }>(),
+  {
+    depth: 0,
+  },
+);
 
-const route = useRoute()
-const { state } = useSidebar()
+const route = useRoute();
+const { state } = useSidebar();
 
-const isCollapsed = computed(() => state.value === 'collapsed')
+const isCollapsed = computed(() => state.value === "collapsed");
 
 function isActive(url: string) {
-  if (url === '#') return false
-  return route.path === url || route.path.startsWith(url + '/')
+  if (url === "#") return false;
+  return route.path === url || route.path.startsWith(url + "/");
 }
 
 function hasActiveChild(item: NavItem): boolean {
-  if (!item.items?.length) return false
-  return item.items.some(child => isActive(child.url) || hasActiveChild(child))
+  if (!item.items?.length) return false;
+  return item.items.some((child) => isActive(child.url) || hasActiveChild(child));
 }
 </script>
 
@@ -72,17 +71,26 @@ function hasActiveChild(item: NavItem): boolean {
             <!-- Child with grandchildren: nested DropdownMenu -->
             <DropdownMenuItem v-if="child.items?.length" as-child>
               <DropdownMenu>
-                <DropdownMenuTrigger class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none cursor-pointer hover:bg-accent hover:text-accent-foreground">
+                <DropdownMenuTrigger
+                  class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none cursor-pointer hover:bg-accent hover:text-accent-foreground"
+                >
                   <span>{{ child.title }}</span>
                   <ChevronRight class="size-3.5" />
                 </DropdownMenuTrigger>
-                <DropdownMenuContent class="w-40 rounded-lg" side="right" :side-offset="4" align="start">
+                <DropdownMenuContent
+                  class="w-40 rounded-lg"
+                  side="right"
+                  :side-offset="4"
+                  align="start"
+                >
                   <DropdownMenuItem
                     v-for="grandchild in child.items"
                     :key="grandchild.title"
                     as-child
                   >
-                    <RouterLink :to="grandchild.url" class="w-full">{{ grandchild.title }}</RouterLink>
+                    <RouterLink :to="grandchild.url" class="w-full">{{
+                      grandchild.title
+                    }}</RouterLink>
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
@@ -103,17 +111,14 @@ function hasActiveChild(item: NavItem): boolean {
           <SidebarMenuButton :tooltip="item.title">
             <component :is="item.icon" v-if="item.icon" />
             <span>{{ item.title }}</span>
-            <ChevronRight class="ml-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+            <ChevronRight
+              class="ml-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+            />
           </SidebarMenuButton>
         </CollapsibleTrigger>
         <CollapsibleContent>
           <SidebarMenuSub>
-            <NavMenuItem
-              v-for="child in item.items"
-              :key="child.title"
-              :item="child"
-              :depth="1"
-            />
+            <NavMenuItem v-for="child in item.items" :key="child.title" :item="child" :depth="1" />
           </SidebarMenuSub>
         </CollapsibleContent>
       </SidebarMenuItem>
@@ -121,12 +126,19 @@ function hasActiveChild(item: NavItem): boolean {
   </template>
 
   <!-- Sub-level parent with children -->
-  <Collapsible v-else-if="item.items?.length" as-child :default-open="hasActiveChild(item)" class="group/collapsible">
+  <Collapsible
+    v-else-if="item.items?.length"
+    as-child
+    :default-open="hasActiveChild(item)"
+    class="group/collapsible"
+  >
     <SidebarMenuSubItem>
       <CollapsibleTrigger as-child>
         <SidebarMenuSubButton>
           <span>{{ item.title }}</span>
-          <ChevronRight class="ml-auto size-3.5 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+          <ChevronRight
+            class="ml-auto size-3.5 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+          />
         </SidebarMenuSubButton>
       </CollapsibleTrigger>
       <CollapsibleContent>
diff --git a/code/fms/fms-vue/src/lib/utils.ts b/code/fms/fms-vue/src/lib/utils.ts
index c66a9d9c..88283f01 100644
--- a/code/fms/fms-vue/src/lib/utils.ts
+++ b/code/fms/fms-vue/src/lib/utils.ts
@@ -1,7 +1,7 @@
-import type { ClassValue } from "clsx"
-import { clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import type { ClassValue } from "clsx";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
diff --git a/code/fms/fms-vue/src/main.ts b/code/fms/fms-vue/src/main.ts
index 6bd5725c..60d98db9 100644
--- a/code/fms/fms-vue/src/main.ts
+++ b/code/fms/fms-vue/src/main.ts
@@ -1,15 +1,19 @@
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
-import App from './App.vue'
-import router from './router'
-import '@/styles/index.css'
-import 'vue-sonner/style.css'
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+import App from "./App.vue";
+import router from "./router";
+import { registerFeature, useAreaSelection } from "stk-table-vue";
+import "@/styles/index.css";
+import "stk-table-vue/lib/style.css";
+import "vue-sonner/style.css";
 
-const app = createApp(App)
-const pinia = createPinia()
+registerFeature(useAreaSelection);
 
-pinia.use(piniaPluginPersistedstate)
-app.use(pinia)
-app.use(router)
-app.mount('#app')
+const app = createApp(App);
+const pinia = createPinia();
+
+pinia.use(piniaPluginPersistedstate);
+app.use(pinia);
+app.use(router);
+app.mount("#app");
diff --git a/code/fms/fms-vue/src/router/index.ts b/code/fms/fms-vue/src/router/index.ts
index 071ad82a..807e20ae 100644
--- a/code/fms/fms-vue/src/router/index.ts
+++ b/code/fms/fms-vue/src/router/index.ts
@@ -1,114 +1,114 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import NProgress from 'nprogress'
-import 'nprogress/nprogress.css'
-import DefaultLayout from '@/layouts/DefaultLayout.vue'
-import { useAuthStore } from '@/stores/auth'
-import { usePermissionStore } from '@/stores/permissions'
+import { createRouter, createWebHistory } from "vue-router";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+import DefaultLayout from "@/layouts/DefaultLayout.vue";
+import { useAuthStore } from "@/stores/auth";
+import { usePermissionStore } from "@/stores/permissions";
 
-NProgress.configure({ showSpinner: false })
+NProgress.configure({ showSpinner: false });
 
 const router = createRouter({
   history: createWebHistory(),
   routes: [
     {
-      path: '/login',
-      name: 'login',
-      component: () => import('@/views/login/index.vue'),
+      path: "/login",
+      name: "login",
+      component: () => import("@/views/login/index.vue"),
     },
     {
-      path: '/',
+      path: "/",
       component: DefaultLayout,
-      redirect: '/dashboard',
+      redirect: "/dashboard",
       meta: { requiresAuth: true },
       children: [
         {
-          path: '/dashboard',
-          name: 'dashboard',
-          component: () => import('@/views/dashboard/index.vue'),
-          meta: { title: '工作台' },
+          path: "/dashboard",
+          name: "dashboard",
+          component: () => import("@/views/dashboard/index.vue"),
+          meta: { title: "工作台" },
         },
         // Base
         {
-          path: '/base/othercompany',
-          name: 'base-othercompany',
-          component: () => import('@/views/base/OtherCompanyPage.vue'),
-          meta: { title: '合作伙伴', moduleId: 'v_b_othercompany' },
+          path: "/base/othercompany",
+          name: "base-othercompany",
+          component: () => import("@/views/base/othercompany/index.vue"),
+          meta: { title: "合作伙伴", moduleId: "v_b_othercompany" },
         },
         {
-          path: '/base/contact',
-          name: 'base-contact',
-          component: () => import('@/views/base/ContactPage.vue'),
-          meta: { title: '联系人', moduleId: 'v_b_contact' },
+          path: "/base/contact",
+          name: "base-contact",
+          component: () => import("@/views/base/contact/index.vue"),
+          meta: { title: "联系人", moduleId: "v_b_contact" },
         },
         {
-          path: '/base/otherdata',
-          name: 'base-otherdata',
-          component: () => import('@/views/base/OtherDataPage.vue'),
-          meta: { title: '其他数据', moduleId: 'v_b_otherdata' },
+          path: "/base/otherdata",
+          name: "base-otherdata",
+          component: () => import("@/views/base/otherdata/index.vue"),
+          meta: { title: "其他数据", moduleId: "v_b_otherdata" },
         },
         // System
         {
-          path: '/system/module-management',
-          name: 'system-module-management',
-          component: () => import('@/views/system/ModuleManagementPage.vue'),
-          meta: { title: '模块管理', moduleId: 'm_metadata' },
+          path: "/system/module-management",
+          name: "system-module-management",
+          component: () => import("@/views/system/module-management/index.vue"),
+          meta: { title: "模块管理", moduleId: "m_metadata" },
         },
         {
-          path: '/system/i18n-type',
-          name: 'system-i18n-type',
-          component: () => import('@/views/system/I18nTypePage.vue'),
-          meta: { title: '多语言类型', moduleId: 'm_i18n' },
+          path: "/system/i18n-type",
+          name: "system-i18n-type",
+          component: () => import("@/views/system/i18n-type/index.vue"),
+          meta: { title: "多语言类型", moduleId: "m_i18n" },
         },
         {
-          path: '/system/login-log',
-          name: 'system-login-log',
-          component: () => import('@/views/system/LoginLogPage.vue'),
-          meta: { title: '登录日志', moduleId: 'd_login_log' },
+          path: "/system/login-log",
+          name: "system-login-log",
+          component: () => import("@/views/system/login-log/index.vue"),
+          meta: { title: "登录日志", moduleId: "d_login_log" },
         },
         {
-          path: '/system/user',
-          name: 'system-user',
-          component: () => import('@/views/system/UserPage.vue'),
-          meta: { title: '用户管理', moduleId: 'b_user' },
+          path: "/system/user",
+          name: "system-user",
+          component: () => import("@/views/system/user/index.vue"),
+          meta: { title: "用户管理", moduleId: "b_user" },
         },
       ],
     },
     {
-      path: '/:pathMatch(.*)*',
-      redirect: '/dashboard',
+      path: "/:pathMatch(.*)*",
+      redirect: "/dashboard",
     },
   ],
-})
+});
 
 // Auth + permission guard
 router.beforeEach(async (to) => {
-  NProgress.start()
-  const authStore = useAuthStore()
+  NProgress.start();
+  const authStore = useAuthStore();
 
-  if (to.path === '/login') {
-    if (authStore.isAuthenticated) return '/dashboard'
-    return
+  if (to.path === "/login") {
+    if (authStore.isAuthenticated) return "/dashboard";
+    return;
   }
 
-  if (to.matched.some(r => r.meta.requiresAuth)) {
+  if (to.matched.some((r) => r.meta.requiresAuth)) {
     if (!authStore.isAuthenticated) {
-      return { path: '/login', query: { redirect: to.fullPath } }
+      return { path: "/login", query: { redirect: to.fullPath } };
     }
 
     // Permission check
-    const moduleId = (to.meta as { moduleId?: string }).moduleId
+    const moduleId = (to.meta as { moduleId?: string }).moduleId;
     if (moduleId) {
-      const permissionStore = usePermissionStore()
-      await permissionStore.load()
+      const permissionStore = usePermissionStore();
+      await permissionStore.load();
       if (!permissionStore.canAccess(moduleId)) {
-        return '/dashboard'
+        return "/dashboard";
       }
     }
   }
-})
+});
 
 router.afterEach(() => {
-  NProgress.done()
-})
+  NProgress.done();
+});
 
-export default router
+export default router;
diff --git a/code/fms/fms-vue/src/services/api.ts b/code/fms/fms-vue/src/services/api.ts
index 03e68467..cfa39d86 100644
--- a/code/fms/fms-vue/src/services/api.ts
+++ b/code/fms/fms-vue/src/services/api.ts
@@ -1,4 +1,4 @@
-import { post, type ApiResult } from './http'
+import { post, type ApiResult } from "./http";
 
 /**
  * 机构用户登录。
@@ -8,7 +8,7 @@ export function loginApi(
   userId: string,
   password: string,
 ): Promise<ApiResult<{ token: string; orgid: string; user: { id: string; name: string } }>> {
-  return post('/auth/login', { orgid: orgId, userid: userId, password })
+  return post("/auth/login", { orgid: orgId, userid: userId, password });
 }
 
 /**
@@ -24,36 +24,38 @@ export function loadDataApi<T = Record<string, unknown>[]>(
   orderBy?: string,
   searchColumns?: string[],
 ): Promise<ApiResult<T>> {
-  return post('/data/loaddata', {
+  return post("/data/loaddata", {
     view_name: viewName,
     search_condition: searchCondition,
     order_by: orderBy,
     search_columns: searchColumns,
-  })
+  });
 }
 
 /**
  * 执行只读 SQL 查询。
  */
-export function loadDataBySqlApi<T = Record<string, unknown>[]>(sql: string): Promise<ApiResult<T>> {
-  return post('/data/loaddatabysql', { sql })
+export function loadDataBySqlApi<T = Record<string, unknown>[]>(
+  sql: string,
+): Promise<ApiResult<T>> {
+  return post("/data/loaddatabysql", { sql });
 }
 
 export interface PageParams {
-  viewName: string
-  orderBy: string
-  searchColumns?: string[]
-  searchCondition?: string
-  pageNo?: number
-  pageSize?: number
+  viewName: string;
+  orderBy: string;
+  searchColumns?: string[];
+  searchCondition?: string;
+  pageNo?: number;
+  pageSize?: number;
 }
 
 export interface PageResult {
-  rows: Record<string, unknown>[]
-  row_count: number
-  total: number
-  page_no: number
-  page_size: number
+  rows: Record<string, unknown>[];
+  row_count: number;
+  total: number;
+  page_no: number;
+  page_size: number;
 }
 
 /**
@@ -67,57 +69,57 @@ export function pageDataApi({
   pageNo = 1,
   pageSize = 20,
 }: PageParams): Promise<ApiResult<PageResult>> {
-  return post('/data/page', {
+  return post("/data/page", {
     view_name: viewName,
     order_by: orderBy,
     search_columns: searchColumns,
     search_condition: searchCondition,
     page_no: pageNo,
     page_size: pageSize,
-  })
+  });
 }
 
 export interface SaveRequest {
-  table: string
-  key_field: string
-  inserts?: Record<string, unknown>[]
-  updates?: Record<string, unknown>[]
-  deletes?: Record<string, unknown>[]
+  table: string;
+  key_field: string;
+  inserts?: Record<string, unknown>[];
+  updates?: Record<string, unknown>[];
+  deletes?: Record<string, unknown>[];
 }
 
 /**
  * 在同一事务中保存一个或多个表的数据变更。
  */
 export function saveObjectApi(requests: SaveRequest[]): Promise<ApiResult<null>> {
-  return post('/data/saveobjt', requests)
+  return post("/data/saveobjt", requests);
 }
 
 /**
  * 获取下一个雪花 ID；传入 count 可批量获取指定数量的 ID（返回数组）。
  */
-export function nextIdApi(count?: number): Promise<ApiResult<string>>
-export function nextIdApi(count: number): Promise<ApiResult<string[]>>
+export function nextIdApi(count?: number): Promise<ApiResult<string>>;
+export function nextIdApi(count: number): Promise<ApiResult<string[]>>;
 export function nextIdApi(count = 1): Promise<ApiResult<string | string[]>> {
-  return post('/data/nextid', { count })
+  return post("/data/nextid", { count });
 }
 
 /**
  * 按模块规则原子获取业务编号。
  */
 export function nextCodeApi(moduleId: string, count = 1): Promise<ApiResult<string | string[]>> {
-  return post('/data/nextcode', { moduleId: String(moduleId), count })
+  return post("/data/nextcode", { moduleId: String(moduleId), count });
 }
 
 export interface ColumnDesc {
-  name: string
-  type: string
-  nullable: boolean
-  size: number
+  name: string;
+  type: string;
+  nullable: boolean;
+  size: number;
 }
 
 /**
  * 读取表或视图的列结构。
  */
 export function describeApi(table: string): Promise<ApiResult<ColumnDesc[]>> {
-  return post('/data/describe', { table })
+  return post("/data/describe", { table });
 }
diff --git a/code/fms/fms-vue/src/services/fileService.ts b/code/fms/fms-vue/src/services/fileService.ts
index 72bb64b4..5fa17ee9 100644
--- a/code/fms/fms-vue/src/services/fileService.ts
+++ b/code/fms/fms-vue/src/services/fileService.ts
@@ -1,90 +1,100 @@
-import { post, type ApiResult } from './http'
+import { post, type ApiResult } from "./http";
 
-let storageType: string | null = null
-let ossCredCache: OssCredential | null = null
-const CRED_BUFFER_MS = 5 * 60 * 1000
+let storageType: string | null = null;
+let ossCredCache: OssCredential | null = null;
+const CRED_BUFFER_MS = 5 * 60 * 1000;
 
 export async function initFileConfig(): Promise<string> {
-  if (storageType) return storageType
-  const res = await post<{ storageType: string }>('/file/config')
-  storageType = res.data.storageType
-  return storageType
+  if (storageType) return storageType;
+  const res = await post<{ storageType: string }>("/file/config");
+  storageType = res.data.storageType;
+  return storageType;
 }
 
 export function getStorageType(): string | null {
-  return storageType
+  return storageType;
 }
 
 export interface UploadOptions {
-  files: File[]
-  father: string
-  moduleId: string
-  cateId?: string
+  files: File[];
+  father: string;
+  moduleId: string;
+  cateId?: string;
 }
 
 export interface FileRecord {
-  subid: string
-  father: string
-  mx_moduleid: string
-  mx_cate_id: string
-  mx_filename: string
-  mx_filesize: string
-  mx_fileext: string
-  mx_mapfilename: string
+  subid: string;
+  father: string;
+  mx_moduleid: string;
+  mx_cate_id: string;
+  mx_filename: string;
+  mx_filesize: string;
+  mx_fileext: string;
+  mx_mapfilename: string;
 }
 
 export async function upload(opts: UploadOptions): Promise<FileRecord[]> {
-  if (!storageType) await initFileConfig()
+  if (!storageType) await initFileConfig();
 
-  if (storageType === 'aliyun-oss') {
-    return uploadToOss(opts)
+  if (storageType === "aliyun-oss") {
+    return uploadToOss(opts);
   }
-  return uploadToLocal(opts)
+  return uploadToLocal(opts);
 }
 
-async function uploadToLocal({ files, father, moduleId, cateId }: UploadOptions): Promise<FileRecord[]> {
-  const fd = new FormData()
+async function uploadToLocal({
+  files,
+  father,
+  moduleId,
+  cateId,
+}: UploadOptions): Promise<FileRecord[]> {
+  const fd = new FormData();
   for (const f of files) {
-    fd.append('files', f)
+    fd.append("files", f);
   }
-  fd.append('father', father)
-  fd.append('moduleId', moduleId)
-  if (cateId) fd.append('cateId', cateId)
+  fd.append("father", father);
+  fd.append("moduleId", moduleId);
+  if (cateId) fd.append("cateId", cateId);
 
-  const res = await post<FileRecord[]>('/file/upload', fd, {
-    headers: { 'Content-Type': undefined },
-  })
-  return res.data
+  const res = await post<FileRecord[]>("/file/upload", fd, {
+    headers: { "Content-Type": undefined },
+  });
+  return res.data;
 }
 
 interface OssCredential {
-  accessid: string
-  policy: string
-  signature: string
-  dir: string
-  host: string
-  expire?: number
+  accessid: string;
+  policy: string;
+  signature: string;
+  dir: string;
+  host: string;
+  expire?: number;
 }
 
 interface OssUploadResult {
-  accessid: string
-  policy: string
-  signature: string
-  dir: string
-  host: string
-  expire?: number
+  accessid: string;
+  policy: string;
+  signature: string;
+  dir: string;
+  host: string;
+  expire?: number;
 }
 
-async function uploadToOss({ files, father, moduleId, cateId }: UploadOptions): Promise<FileRecord[]> {
-  const cred = await getOssCredential()
+async function uploadToOss({
+  files,
+  father,
+  moduleId,
+  cateId,
+}: UploadOptions): Promise<FileRecord[]> {
+  const cred = await getOssCredential();
 
-  const results: FileRecord[] = []
+  const results: FileRecord[] = [];
   for (const file of files) {
-    const idRes = await post<string>('/data/nextid')
-    const subid = String(idRes.data)
+    const idRes = await post<string>("/data/nextid");
+    const subid = String(idRes.data);
 
-    const ext = extname(file.name)
-    const objectName = `${Date.now()}_${Math.random().toString(36).slice(2)}${ext ? '.' + ext : ''}`
+    const ext = extname(file.name);
+    const objectName = `${Date.now()}_${Math.random().toString(36).slice(2)}${ext ? "." + ext : ""}`;
     const url = await xhrUpload(cred.host, {
       key: cred.dir + objectName,
       ossAccessKeyId: cred.accessid,
@@ -92,29 +102,29 @@ async function uploadToOss({ files, father, moduleId, cateId }: UploadOptions):
       signature: cred.signature,
       file,
       filename: objectName,
-    })
+    });
 
     const record: FileRecord = {
       subid,
       father,
       mx_moduleid: moduleId,
-      mx_cate_id: cateId || '',
+      mx_cate_id: cateId || "",
       mx_filename: file.name,
       mx_filesize: String(file.size),
       mx_fileext: ext,
       mx_mapfilename: url,
-    }
-    await post('/file/save-record', record)
-    results.push(record)
+    };
+    await post("/file/save-record", record);
+    results.push(record);
   }
-  return results
+  return results;
 }
 
 async function getOssCredential(): Promise<OssCredential> {
   if (ossCredCache && !credExpiring(ossCredCache)) {
-    return ossCredCache
+    return ossCredCache;
   }
-  const res = await post<OssUploadResult>('/file/upload-credential')
+  const res = await post<OssUploadResult>("/file/upload-credential");
   ossCredCache = {
     accessid: res.data.accessid,
     policy: res.data.policy,
@@ -122,59 +132,59 @@ async function getOssCredential(): Promise<OssCredential> {
     dir: res.data.dir,
     host: res.data.host,
     expire: res.data.expire,
-  }
-  return ossCredCache
+  };
+  return ossCredCache;
 }
 
 function credExpiring(cache: OssCredential): boolean {
   if (cache.expire) {
-    return Date.now() + CRED_BUFFER_MS > cache.expire * 1000
+    return Date.now() + CRED_BUFFER_MS > cache.expire * 1000;
   }
   // No expiry — assume 55-minute max lifetime
-  return false
+  return false;
 }
 
 interface XhrUploadFields {
-  key: string
-  ossAccessKeyId: string
-  policy: string
-  signature: string
-  file: File
-  filename: string
+  key: string;
+  ossAccessKeyId: string;
+  policy: string;
+  signature: string;
+  file: File;
+  filename: string;
 }
 
 function xhrUpload(host: string, fields: XhrUploadFields): Promise<string> {
-  const fd = new FormData()
-  fd.append('key', fields.key)
-  fd.append('OSSAccessKeyId', fields.ossAccessKeyId)
-  fd.append('policy', fields.policy)
-  fd.append('Signature', fields.signature)
-  fd.append('file', fields.file, fields.filename)
+  const fd = new FormData();
+  fd.append("key", fields.key);
+  fd.append("OSSAccessKeyId", fields.ossAccessKeyId);
+  fd.append("policy", fields.policy);
+  fd.append("Signature", fields.signature);
+  fd.append("file", fields.file, fields.filename);
 
   return new Promise((resolve, reject) => {
-    const xhr = new XMLHttpRequest()
-    xhr.open('POST', host)
+    const xhr = new XMLHttpRequest();
+    xhr.open("POST", host);
     xhr.onload = () => {
       if (xhr.status === 200 || xhr.status === 204) {
-        resolve(host + '/' + fields.key)
+        resolve(host + "/" + fields.key);
       } else {
-        reject(new Error('OSS 上传失败: ' + xhr.status))
+        reject(new Error("OSS 上传失败: " + xhr.status));
       }
-    }
-    xhr.onerror = () => reject(new Error('OSS 上传异常'))
-    xhr.send(fd)
-  })
+    };
+    xhr.onerror = () => reject(new Error("OSS 上传异常"));
+    xhr.send(fd);
+  });
 }
 
 export function getPreviewUrl(fileRow: { mx_mapfilename: string }): string {
-  return fileRow.mx_mapfilename
+  return fileRow.mx_mapfilename;
 }
 
 export function removeFile(subid: string): Promise<ApiResult> {
-  return post('/file/delete', { subid })
+  return post("/file/delete", { subid });
 }
 
 function extname(name: string): string {
-  if (!name || !name.includes('.')) return ''
-  return name.substring(name.lastIndexOf('.') + 1).toLowerCase()
+  if (!name || !name.includes(".")) return "";
+  return name.substring(name.lastIndexOf(".") + 1).toLowerCase();
 }
diff --git a/code/fms/fms-vue/src/services/http.ts b/code/fms/fms-vue/src/services/http.ts
index 3126a0d1..47580240 100644
--- a/code/fms/fms-vue/src/services/http.ts
+++ b/code/fms/fms-vue/src/services/http.ts
@@ -1,102 +1,113 @@
-import type { AxiosResponse } from 'axios'
-import axios from 'axios'
-import { useAuthStore } from '@/stores/auth'
+import type { AxiosResponse } from "axios";
+import axios from "axios";
+import { useAuthStore } from "@/stores/auth";
 
-const AUTH_ERROR_CODE = 401
-const SESSION_REPLACED_CODE = 40101
+const AUTH_ERROR_CODE = 401;
+const SESSION_REPLACED_CODE = 40101;
 
 export interface ApiResult<T = unknown> {
-  success: boolean
-  code: number
-  message: string
-  data: T
+  success: boolean;
+  code: number;
+  message: string;
+  data: T;
 }
 
 interface ApiError extends Error {
-  code: number
-  data?: unknown
-  success: boolean
+  code: number;
+  data?: unknown;
+  success: boolean;
 }
 
 const http = axios.create({
-  baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
+  baseURL: import.meta.env.VITE_API_BASE_URL || "/api",
   timeout: 15000,
   headers: {
-    Accept: 'application/json',
-    'Content-Type': 'application/json',
+    Accept: "application/json",
+    "Content-Type": "application/json",
   },
-})
+});
 
-let redirectingToLogin = false
+let redirectingToLogin = false;
 
 function redirectToLogin(reason?: string) {
-  const currentPath = window.location.pathname.replace(/\/+$/, '') || '/'
-  if (currentPath === '/login' || redirectingToLogin) return
+  const currentPath = window.location.pathname.replace(/\/+$/, "") || "/";
+  if (currentPath === "/login" || redirectingToLogin) return;
 
-  redirectingToLogin = true
-  const redirect = `${window.location.pathname}${window.location.search}${window.location.hash}`
-  const query = new URLSearchParams({ redirect })
-  if (reason) query.set('reason', reason)
-  window.location.assign(`/login?${query.toString()}`)
+  redirectingToLogin = true;
+  const redirect = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+  const query = new URLSearchParams({ redirect });
+  if (reason) query.set("reason", reason);
+  window.location.assign(`/login?${query.toString()}`);
 }
 
 function isAuthenticationError(code: number): boolean {
-  return code === AUTH_ERROR_CODE || code === SESSION_REPLACED_CODE
+  return code === AUTH_ERROR_CODE || code === SESSION_REPLACED_CODE;
 }
 
 function handleUnauthorized(code: number) {
-  const authStore = useAuthStore()
-  authStore.clearSession()
-  redirectToLogin(code === SESSION_REPLACED_CODE ? 'session-replaced' : 'expired')
+  const authStore = useAuthStore();
+  authStore.clearSession();
+  redirectToLogin(code === SESSION_REPLACED_CODE ? "session-replaced" : "expired");
 }
 
 http.interceptors.request.use((config) => {
-  const authStore = useAuthStore()
+  const authStore = useAuthStore();
   if (authStore.token) {
-    config.headers.Authorization = `Bearer ${authStore.token}`
+    config.headers.Authorization = `Bearer ${authStore.token}`;
   }
-  return config
-})
+  return config;
+});
 
 http.interceptors.response.use(
   (response: AxiosResponse<ApiResult>) => {
-    const payload = response.data
+    const payload = response.data;
 
     if (payload?.code === undefined) {
-      return { success: true, code: 0, message: '', data: payload } as unknown as AxiosResponse<ApiResult>
+      return {
+        success: true,
+        code: 0,
+        message: "",
+        data: payload,
+      } as unknown as AxiosResponse<ApiResult>;
     }
 
-    payload.success = payload.code === 0
+    payload.success = payload.code === 0;
 
-    if (payload.success) return response
+    if (payload.success) return response;
 
-    if (isAuthenticationError(payload.code)) handleUnauthorized(payload.code)
+    if (isAuthenticationError(payload.code)) handleUnauthorized(payload.code);
 
-    const err = new Error(payload.message || '请求失败') as ApiError
-    err.code = payload.code
-    err.data = payload.data
-    err.success = payload.success
-    throw err
+    const err = new Error(payload.message || "请求失败") as ApiError;
+    err.code = payload.code;
+    err.data = payload.data;
+    err.success = payload.success;
+    throw err;
   },
   (error: { response?: AxiosResponse; code?: string }) => {
-    const status = error.response?.status as number | undefined
-    const payload = error.response?.data as { code?: number; message?: string; data?: unknown } | undefined
+    const status = error.response?.status as number | undefined;
+    const payload = error.response?.data as
+      | { code?: number; message?: string; data?: unknown }
+      | undefined;
 
-    handleUnauthorized(payload?.code ?? status ?? 0)
+    handleUnauthorized(payload?.code ?? status ?? 0);
 
     const requestError = new Error(
       payload?.message ||
-        (error.code === 'ECONNABORTED' ? '请求超时，请稍后重试' : '网络异常，请检查服务是否正常'),
-    ) as ApiError
-    requestError.code = payload?.code ?? status ?? -1
-    requestError.data = payload?.data
-    requestError.success = false
-    throw requestError
+        (error.code === "ECONNABORTED" ? "请求超时，请稍后重试" : "网络异常，请检查服务是否正常"),
+    ) as ApiError;
+    requestError.code = payload?.code ?? status ?? -1;
+    requestError.data = payload?.data;
+    requestError.success = false;
+    throw requestError;
   },
-)
+);
 
-export function post<T = unknown>(path: string, data?: unknown, config?: Record<string, unknown>): Promise<ApiResult<T>> {
-  return http.post(path, data, config).then(r => r.data) as Promise<ApiResult<T>>
+export function post<T = unknown>(
+  path: string,
+  data?: unknown,
+  config?: Record<string, unknown>,
+): Promise<ApiResult<T>> {
+  return http.post(path, data, config).then((r) => r.data) as Promise<ApiResult<T>>;
 }
 
-export default http
+export default http;
diff --git a/code/fms/fms-vue/src/stores/app.ts b/code/fms/fms-vue/src/stores/app.ts
index 34a6942b..602595c9 100644
--- a/code/fms/fms-vue/src/stores/app.ts
+++ b/code/fms/fms-vue/src/stores/app.ts
@@ -1,143 +1,269 @@
-import { defineStore } from 'pinia'
-import { computed, ref, watch } from 'vue'
+import { defineStore } from "pinia";
+import { computed, ref, watch } from "vue";
 
 export type ColorScheme = {
-  label: string
-  primary: string
-  primaryFg: string
-  ring: string
-  sidebarPrimary: string
-  sidebarRing: string
-}
+  label: string;
+  primary: string;
+  primaryFg: string;
+  ring: string;
+  sidebarPrimary: string;
+  sidebarRing: string;
+};
 
 const colorSchemes: { light: ColorScheme; dark: ColorScheme }[] = [
   {
-    light: { label: '#1a1a2e', primary: 'oklch(0.205 0 0)', primaryFg: 'oklch(0.985 0 0)', ring: 'oklch(0.708 0 0)', sidebarPrimary: 'oklch(0.205 0 0)', sidebarRing: 'oklch(0.708 0 0)' },
-    dark:  { label: '#1a1a2e', primary: 'oklch(0.922 0 0)', primaryFg: 'oklch(0.205 0 0)', ring: 'oklch(0.556 0 0)', sidebarPrimary: 'oklch(0.488 0.243 264.376)', sidebarRing: 'oklch(0.556 0 0)' },
+    light: {
+      label: "#1a1a2e",
+      primary: "oklch(0.205 0 0)",
+      primaryFg: "oklch(0.985 0 0)",
+      ring: "oklch(0.708 0 0)",
+      sidebarPrimary: "oklch(0.205 0 0)",
+      sidebarRing: "oklch(0.708 0 0)",
+    },
+    dark: {
+      label: "#1a1a2e",
+      primary: "oklch(0.922 0 0)",
+      primaryFg: "oklch(0.205 0 0)",
+      ring: "oklch(0.556 0 0)",
+      sidebarPrimary: "oklch(0.488 0.243 264.376)",
+      sidebarRing: "oklch(0.556 0 0)",
+    },
   },
   {
-    light: { label: '#3b82f6', primary: 'oklch(0.546 0.245 262.881)', primaryFg: 'oklch(0.985 0 0)', ring: 'oklch(0.546 0.245 262.881)', sidebarPrimary: 'oklch(0.546 0.245 262.881)', sidebarRing: 'oklch(0.546 0.245 262.881)' },
-    dark:  { label: '#3b82f6', primary: 'oklch(0.623 0.214 259.815)', primaryFg: 'oklch(0.985 0 0)', ring: 'oklch(0.623 0.214 259.815)', sidebarPrimary: 'oklch(0.623 0.214 259.815)', sidebarRing: 'oklch(0.623 0.214 259.815)' },
+    light: {
+      label: "#3b82f6",
+      primary: "oklch(0.546 0.245 262.881)",
+      primaryFg: "oklch(0.985 0 0)",
+      ring: "oklch(0.546 0.245 262.881)",
+      sidebarPrimary: "oklch(0.546 0.245 262.881)",
+      sidebarRing: "oklch(0.546 0.245 262.881)",
+    },
+    dark: {
+      label: "#3b82f6",
+      primary: "oklch(0.623 0.214 259.815)",
+      primaryFg: "oklch(0.985 0 0)",
+      ring: "oklch(0.623 0.214 259.815)",
+      sidebarPrimary: "oklch(0.623 0.214 259.815)",
+      sidebarRing: "oklch(0.623 0.214 259.815)",
+    },
   },
   {
-    light: { label: '#22c55e', primary: 'oklch(0.527 0.154 150.069)', primaryFg: 'oklch(0.985 0 0)', ring: 'oklch(0.527 0.154 150.069)', sidebarPrimary: 'oklch(0.527 0.154 150.069)', sidebarRing: 'oklch(0.527 0.154 150.069)' },
-    dark:  { label: '#22c55e', primary: 'oklch(0.596 0.145 163.225)', primaryFg: 'oklch(0.985 0 0)', ring: 'oklch(0.596 0.145 163.225)', sidebarPrimary: 'oklch(0.596 0.145 163.225)', sidebarRing: 'oklch(0.596 0.145 163.225)' },
+    light: {
+      label: "#22c55e",
+      primary: "oklch(0.527 0.154 150.069)",
+      primaryFg: "oklch(0.985 0 0)",
+      ring: "oklch(0.527 0.154 150.069)",
+      sidebarPrimary: "oklch(0.527 0.154 150.069)",
+      sidebarRing: "oklch(0.527 0.154 150.069)",
+    },
+    dark: {
+      label: "#22c55e",
+      primary: "oklch(0.596 0.145 163.225)",
+      primaryFg: "oklch(0.985 0 0)",
+      ring: "oklch(0.596 0.145 163.225)",
+      sidebarPrimary: "oklch(0.596 0.145 163.225)",
+      sidebarRing: "oklch(0.596 0.145 163.225)",
+    },
   },
   {
-    light: { label: '#8b5cf6', primary: 'oklch(0.496 0.265 301.924)', primaryFg: 'oklch(0.985 0 0)', ring: 'oklch(0.496 0.265 301.924)', sidebarPrimary: 'oklch(0.496 0.265 301.924)', sidebarRing: 'oklch(0.496 0.265 301.924)' },
-    dark:  { label: '#8b5cf6', primary: 'oklch(0.558 0.238 301.358)', primaryFg: 'oklch(0.985 0 0)', ring: 'oklch(0.558 0.238 301.358)', sidebarPrimary: 'oklch(0.558 0.238 301.358)', sidebarRing: 'oklch(0.558 0.238 301.358)' },
+    light: {
+      label: "#8b5cf6",
+      primary: "oklch(0.496 0.265 301.924)",
+      primaryFg: "oklch(0.985 0 0)",
+      ring: "oklch(0.496 0.265 301.924)",
+      sidebarPrimary: "oklch(0.496 0.265 301.924)",
+      sidebarRing: "oklch(0.496 0.265 301.924)",
+    },
+    dark: {
+      label: "#8b5cf6",
+      primary: "oklch(0.558 0.238 301.358)",
+      primaryFg: "oklch(0.985 0 0)",
+      ring: "oklch(0.558 0.238 301.358)",
+      sidebarPrimary: "oklch(0.558 0.238 301.358)",
+      sidebarRing: "oklch(0.558 0.238 301.358)",
+    },
   },
   {
-    light: { label: '#f97316', primary: 'oklch(0.57 0.2 49.5)', primaryFg: 'oklch(0.985 0 0)', ring: 'oklch(0.57 0.2 49.5)', sidebarPrimary: 'oklch(0.57 0.2 49.5)', sidebarRing: 'oklch(0.57 0.2 49.5)' },
-    dark:  { label: '#f97316', primary: 'oklch(0.643 0.215 41.5)', primaryFg: 'oklch(0.985 0 0)', ring: 'oklch(0.643 0.215 41.5)', sidebarPrimary: 'oklch(0.643 0.215 41.5)', sidebarRing: 'oklch(0.643 0.215 41.5)' },
+    light: {
+      label: "#f97316",
+      primary: "oklch(0.57 0.2 49.5)",
+      primaryFg: "oklch(0.985 0 0)",
+      ring: "oklch(0.57 0.2 49.5)",
+      sidebarPrimary: "oklch(0.57 0.2 49.5)",
+      sidebarRing: "oklch(0.57 0.2 49.5)",
+    },
+    dark: {
+      label: "#f97316",
+      primary: "oklch(0.643 0.215 41.5)",
+      primaryFg: "oklch(0.985 0 0)",
+      ring: "oklch(0.643 0.215 41.5)",
+      sidebarPrimary: "oklch(0.643 0.215 41.5)",
+      sidebarRing: "oklch(0.643 0.215 41.5)",
+    },
   },
   {
-    light: { label: '#ef4444', primary: 'oklch(0.506 0.232 25.7)', primaryFg: 'oklch(0.985 0 0)', ring: 'oklch(0.506 0.232 25.7)', sidebarPrimary: 'oklch(0.506 0.232 25.7)', sidebarRing: 'oklch(0.506 0.232 25.7)' },
-    dark:  { label: '#ef4444', primary: 'oklch(0.577 0.245 27.325)', primaryFg: 'oklch(0.985 0 0)', ring: 'oklch(0.577 0.245 27.325)', sidebarPrimary: 'oklch(0.577 0.245 27.325)', sidebarRing: 'oklch(0.577 0.245 27.325)' },
+    light: {
+      label: "#ef4444",
+      primary: "oklch(0.506 0.232 25.7)",
+      primaryFg: "oklch(0.985 0 0)",
+      ring: "oklch(0.506 0.232 25.7)",
+      sidebarPrimary: "oklch(0.506 0.232 25.7)",
+      sidebarRing: "oklch(0.506 0.232 25.7)",
+    },
+    dark: {
+      label: "#ef4444",
+      primary: "oklch(0.577 0.245 27.325)",
+      primaryFg: "oklch(0.985 0 0)",
+      ring: "oklch(0.577 0.245 27.325)",
+      sidebarPrimary: "oklch(0.577 0.245 27.325)",
+      sidebarRing: "oklch(0.577 0.245 27.325)",
+    },
   },
   {
-    light: { label: '#ec4899', primary: 'oklch(0.523 0.214 349.4)', primaryFg: 'oklch(0.985 0 0)', ring: 'oklch(0.523 0.214 349.4)', sidebarPrimary: 'oklch(0.523 0.214 349.4)', sidebarRing: 'oklch(0.523 0.214 349.4)' },
-    dark:  { label: '#ec4899', primary: 'oklch(0.592 0.225 349.5)', primaryFg: 'oklch(0.985 0 0)', ring: 'oklch(0.592 0.225 349.5)', sidebarPrimary: 'oklch(0.592 0.225 349.5)', sidebarRing: 'oklch(0.592 0.225 349.5)' },
+    light: {
+      label: "#ec4899",
+      primary: "oklch(0.523 0.214 349.4)",
+      primaryFg: "oklch(0.985 0 0)",
+      ring: "oklch(0.523 0.214 349.4)",
+      sidebarPrimary: "oklch(0.523 0.214 349.4)",
+      sidebarRing: "oklch(0.523 0.214 349.4)",
+    },
+    dark: {
+      label: "#ec4899",
+      primary: "oklch(0.592 0.225 349.5)",
+      primaryFg: "oklch(0.985 0 0)",
+      ring: "oklch(0.592 0.225 349.5)",
+      sidebarPrimary: "oklch(0.592 0.225 349.5)",
+      sidebarRing: "oklch(0.592 0.225 349.5)",
+    },
   },
   {
-    light: { label: '#14b8a6', primary: 'oklch(0.563 0.144 180)', primaryFg: 'oklch(0.985 0 0)', ring: 'oklch(0.563 0.144 180)', sidebarPrimary: 'oklch(0.563 0.144 180)', sidebarRing: 'oklch(0.563 0.144 180)' },
-    dark:  { label: '#14b8a6', primary: 'oklch(0.627 0.124 180)', primaryFg: 'oklch(0.985 0 0)', ring: 'oklch(0.627 0.124 180)', sidebarPrimary: 'oklch(0.627 0.124 180)', sidebarRing: 'oklch(0.627 0.124 180)' },
+    light: {
+      label: "#14b8a6",
+      primary: "oklch(0.563 0.144 180)",
+      primaryFg: "oklch(0.985 0 0)",
+      ring: "oklch(0.563 0.144 180)",
+      sidebarPrimary: "oklch(0.563 0.144 180)",
+      sidebarRing: "oklch(0.563 0.144 180)",
+    },
+    dark: {
+      label: "#14b8a6",
+      primary: "oklch(0.627 0.124 180)",
+      primaryFg: "oklch(0.985 0 0)",
+      ring: "oklch(0.627 0.124 180)",
+      sidebarPrimary: "oklch(0.627 0.124 180)",
+      sidebarRing: "oklch(0.627 0.124 180)",
+    },
   },
-]
+];
 
 function loadPersisted<T>(key: string, fallback: T): T {
   try {
-    const raw = localStorage.getItem(key)
-    if (raw != null) return JSON.parse(raw) as T
-  } catch { /* ignore */ }
-  return fallback
+    const raw = localStorage.getItem(key);
+    if (raw != null) return JSON.parse(raw) as T;
+  } catch {
+    /* ignore */
+  }
+  return fallback;
 }
 
 function persist(key: string, value: unknown) {
-  try { localStorage.setItem(key, JSON.stringify(value)) } catch { /* ignore */ }
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+    /* ignore */
+  }
 }
 
 export type TabItem = {
-  key: string
-  label: string
-  closable: boolean
-}
+  key: string;
+  label: string;
+  closable: boolean;
+};
 
-export const useAppStore = defineStore('app', () => {
-  // -- dark mode --
-  const isDark = ref(loadPersisted<boolean>('fms-dark', false))
-  function toggleTheme() {
-    isDark.value = !isDark.value
-  }
-  // Sync to DOM
-  watch(isDark, (v) => {
-    document.documentElement.classList.toggle('dark', v)
-    persist('fms-dark', v)
-  }, { immediate: true })
+export const useAppStore = defineStore(
+  "app",
+  () => {
+    // -- dark mode --
+    const isDark = ref(loadPersisted<boolean>("fms-dark", false));
+    function toggleTheme() {
+      isDark.value = !isDark.value;
+    }
+    // Sync to DOM
+    watch(
+      isDark,
+      (v) => {
+        document.documentElement.classList.toggle("dark", v);
+        persist("fms-dark", v);
+      },
+      { immediate: true },
+    );
 
-  // -- color scheme & locale (persisted by pinia-plugin-persistedstate) --
-  const schemeIndex = ref(0)
-  const locale = ref('zh-CN')
+    // -- color scheme & locale (persisted by pinia-plugin-persistedstate) --
+    const schemeIndex = ref(0);
+    const locale = ref("zh-CN");
 
-  // -- tabs --
-  const visitedTabs = ref<TabItem[]>([{ key: '/dashboard', label: '工作台', closable: false }])
-  const routeRefreshKeys = ref<Record<string, number>>({})
+    // -- tabs --
+    const visitedTabs = ref<TabItem[]>([{ key: "/dashboard", label: "工作台", closable: false }]);
+    const routeRefreshKeys = ref<Record<string, number>>({});
 
-  const schemeKeys = colorSchemes
-  const totalSchemes = colorSchemes.length
+    const schemeKeys = colorSchemes;
+    const totalSchemes = colorSchemes.length;
 
-  const currentScheme = computed<ColorScheme>(() => {
-    const entry = colorSchemes[schemeIndex.value] ?? colorSchemes[0]
-    return isDark.value ? entry.dark : entry.light
-  })
+    const currentScheme = computed<ColorScheme>(() => {
+      const entry = colorSchemes[schemeIndex.value] ?? colorSchemes[0];
+      return isDark.value ? entry.dark : entry.light;
+    });
 
-  function selectColorScheme(index: number) {
-    schemeIndex.value = index
-  }
+    function selectColorScheme(index: number) {
+      schemeIndex.value = index;
+    }
 
-  function toggleLocale() {
-    locale.value = locale.value === 'zh-CN' ? 'en-US' : 'zh-CN'
-  }
+    function toggleLocale() {
+      locale.value = locale.value === "zh-CN" ? "en-US" : "zh-CN";
+    }
 
-  // -- tab management --
-  function addVisitedTab(tab: TabItem) {
-    const exists = visitedTabs.value.find(t => t.key === tab.key)
-    if (exists) return
-    visitedTabs.value.push(tab)
-  }
+    // -- tab management --
+    function addVisitedTab(tab: TabItem) {
+      const exists = visitedTabs.value.find((t) => t.key === tab.key);
+      if (exists) return;
+      visitedTabs.value.push(tab);
+    }
 
-  function removeVisitedTab(key: string) {
-    const index = visitedTabs.value.findIndex(t => t.key === key)
-    if (index >= 0) visitedTabs.value.splice(index, 1)
-  }
+    function removeVisitedTab(key: string) {
+      const index = visitedTabs.value.findIndex((t) => t.key === key);
+      if (index >= 0) visitedTabs.value.splice(index, 1);
+    }
 
-  function getRouteRefreshKey(key: string) {
-    return routeRefreshKeys.value[key] ?? 0
-  }
+    function getRouteRefreshKey(key: string) {
+      return routeRefreshKeys.value[key] ?? 0;
+    }
 
-  function refreshRoute(key: string) {
-    routeRefreshKeys.value[key] = (routeRefreshKeys.value[key] ?? 0) + 1
-  }
+    function refreshRoute(key: string) {
+      routeRefreshKeys.value[key] = (routeRefreshKeys.value[key] ?? 0) + 1;
+    }
 
-  return {
-    isDark,
-    toggleTheme,
-    schemeIndex,
-    locale,
-    visitedTabs,
-    routeRefreshKeys,
-    schemeKeys,
-    totalSchemes,
-    currentScheme,
-    selectColorScheme,
-    toggleLocale,
-    addVisitedTab,
-    removeVisitedTab,
-    getRouteRefreshKey,
-    refreshRoute,
-  }
-}, {
-  persist: {
-    pick: ['schemeIndex', 'locale'],
+    return {
+      isDark,
+      toggleTheme,
+      schemeIndex,
+      locale,
+      visitedTabs,
+      routeRefreshKeys,
+      schemeKeys,
+      totalSchemes,
+      currentScheme,
+      selectColorScheme,
+      toggleLocale,
+      addVisitedTab,
+      removeVisitedTab,
+      getRouteRefreshKey,
+      refreshRoute,
+    };
   },
-})
+  {
+    persist: {
+      pick: ["schemeIndex", "locale"],
+    },
+  },
+);
diff --git a/code/fms/fms-vue/src/stores/auth.ts b/code/fms/fms-vue/src/stores/auth.ts
index 345b40dc..52672bcf 100644
--- a/code/fms/fms-vue/src/stores/auth.ts
+++ b/code/fms/fms-vue/src/stores/auth.ts
@@ -1,47 +1,47 @@
-import { computed, ref } from 'vue'
-import { defineStore } from 'pinia'
+import { computed, ref } from "vue";
+import { defineStore } from "pinia";
 
-const AUTH_STORAGE_KEY = 'fms-auth'
+const AUTH_STORAGE_KEY = "fms-auth";
 
 try {
-  const session = sessionStorage.getItem(AUTH_STORAGE_KEY)
+  const session = sessionStorage.getItem(AUTH_STORAGE_KEY);
   if (session && !localStorage.getItem(AUTH_STORAGE_KEY)) {
-    localStorage.setItem(AUTH_STORAGE_KEY, session)
+    localStorage.setItem(AUTH_STORAGE_KEY, session);
   }
 } catch {
   // Storage can be unavailable in restricted browser contexts.
 }
 
 interface UserInfo {
-  id: string
-  account?: string
-  name: string
+  id: string;
+  account?: string;
+  name: string;
 }
 
 interface SessionData {
-  token?: string
-  access_token?: string
-  orgid?: string
-  user?: UserInfo
-  user_info?: UserInfo
+  token?: string;
+  access_token?: string;
+  orgid?: string;
+  user?: UserInfo;
+  user_info?: UserInfo;
 }
 
 export const useAuthStore = defineStore(
-  'auth',
+  "auth",
   () => {
-    const token = ref('')
-    const orgId = ref('')
-    const user = ref<UserInfo | null>(null)
-    const isAuthenticated = computed(() => Boolean(token.value))
+    const token = ref("");
+    const orgId = ref("");
+    const user = ref<UserInfo | null>(null);
+    const isAuthenticated = computed(() => Boolean(token.value));
 
     function setSession(session: SessionData, organizationId?: string) {
-      token.value = session.token ?? session.access_token ?? ''
-      orgId.value = session.orgid ?? organizationId ?? ''
-      user.value = session.user ?? session.user_info ?? null
+      token.value = session.token ?? session.access_token ?? "";
+      orgId.value = session.orgid ?? organizationId ?? "";
+      user.value = session.user ?? session.user_info ?? null;
     }
 
     function clearSession() {
-      token.value = ''
+      token.value = "";
     }
 
     return {
@@ -51,13 +51,13 @@ export const useAuthStore = defineStore(
       isAuthenticated,
       setSession,
       clearSession,
-    }
+    };
   },
   {
     persist: {
       key: AUTH_STORAGE_KEY,
       storage: localStorage,
-      pick: ['token', 'orgId', 'user'],
+      pick: ["token", "orgId", "user"],
     },
   },
-)
+);
diff --git a/code/fms/fms-vue/src/stores/permissions.ts b/code/fms/fms-vue/src/stores/permissions.ts
index 60f12307..c57f1188 100644
--- a/code/fms/fms-vue/src/stores/permissions.ts
+++ b/code/fms/fms-vue/src/stores/permissions.ts
@@ -1,168 +1,172 @@
-import { computed, ref, watch } from 'vue'
-import { defineStore } from 'pinia'
-import { loadDataApi } from '@/services/api'
-import { useAuthStore } from './auth'
+import { computed, ref, watch } from "vue";
+import { defineStore } from "pinia";
+import { loadDataApi } from "@/services/api";
+import { useAuthStore } from "./auth";
 
 interface Module {
-  b_id: number | string
-  b_code: string
-  b_module_type: string
-  b_parent_id?: number | string
-  [key: string]: unknown
+  b_id: number | string;
+  b_code: string;
+  b_module_type: string;
+  b_parent_id?: number | string;
+  [key: string]: unknown;
 }
 
 interface UserModule {
-  b_module_id: number | string
-  [key: string]: unknown
+  b_module_id: number | string;
+  [key: string]: unknown;
 }
 
 interface ModulePower {
-  b_id: number | string
-  b_module_id: number | string
-  b_code: string
-  [key: string]: unknown
+  b_id: number | string;
+  b_module_id: number | string;
+  b_code: string;
+  [key: string]: unknown;
 }
 
-export const usePermissionStore = defineStore('permissions', () => {
-  const authStore = useAuthStore()
-  const loadedPrincipalKey = ref('')
-  const modules = ref<Module[]>([])
-  const grantedPageIds = ref<string[]>([])
-  const moduleCodes = ref<string[]>([])
-  const powerCodes = ref<string[]>([])
-  let loadingPromise: Promise<void> | null = null
-  let loadingPrincipalKey = ''
-  let loadVersion = 0
+export const usePermissionStore = defineStore("permissions", () => {
+  const authStore = useAuthStore();
+  const loadedPrincipalKey = ref("");
+  const modules = ref<Module[]>([]);
+  const grantedPageIds = ref<string[]>([]);
+  const moduleCodes = ref<string[]>([]);
+  const powerCodes = ref<string[]>([]);
+  let loadingPromise: Promise<void> | null = null;
+  let loadingPrincipalKey = "";
+  let loadVersion = 0;
 
   const moduleByCode = computed(
-    () => new Map(modules.value.map((m) => [String(m.b_code || ''), m])),
-  )
-  const moduleById = computed(
-    () => new Map(modules.value.map((m) => [String(m.b_id || ''), m])),
-  )
-  const grantedPageSet = computed(() => new Set(grantedPageIds.value))
-  const powerSet = computed(() => new Set(powerCodes.value))
+    () => new Map(modules.value.map((m) => [String(m.b_code || ""), m])),
+  );
+  const moduleById = computed(() => new Map(modules.value.map((m) => [String(m.b_id || ""), m])));
+  const grantedPageSet = computed(() => new Set(grantedPageIds.value));
+  const powerSet = computed(() => new Set(powerCodes.value));
   const isG3soft = computed(() => {
-    return String(authStore.user?.account || '').trim().toLowerCase() === 'g3soft'
-  })
+    return (
+      String(authStore.user?.account || "")
+        .trim()
+        .toLowerCase() === "g3soft"
+    );
+  });
 
   async function load(): Promise<void> {
-    const userId = String(authStore.user?.id || '')
-    const principalKey = `${String(authStore.orgId || '')}:${userId}`
+    const userId = String(authStore.user?.id || "");
+    const principalKey = `${String(authStore.orgId || "")}:${userId}`;
 
     if (isG3soft.value) {
-      const elevatedKey = `g3soft:${principalKey}`
-      if (loadedPrincipalKey.value === elevatedKey) return
-      loadingPromise = null
-      loadingPrincipalKey = ''
+      const elevatedKey = `g3soft:${principalKey}`;
+      if (loadedPrincipalKey.value === elevatedKey) return;
+      loadingPromise = null;
+      loadingPrincipalKey = "";
 
-      const requestVersion = ++loadVersion
-      const request = loadDataApi<Module[]>('s_module', 'b_canuse = 1', 'b_id ASC')
+      const requestVersion = ++loadVersion;
+      const request = loadDataApi<Module[]>("s_module", "b_canuse = 1", "b_id ASC")
         .then((res) => {
-          if (requestVersion !== loadVersion) return
-          modules.value = res.data || []
-          grantedPageIds.value = []
-          moduleCodes.value = []
-          powerCodes.value = []
-          loadedPrincipalKey.value = elevatedKey
+          if (requestVersion !== loadVersion) return;
+          modules.value = res.data || [];
+          grantedPageIds.value = [];
+          moduleCodes.value = [];
+          powerCodes.value = [];
+          loadedPrincipalKey.value = elevatedKey;
         })
         .finally(() => {
-          if (requestVersion !== loadVersion) return
-          loadingPromise = null
-          loadingPrincipalKey = ''
-        })
-      loadingPromise = request
-      return request
+          if (requestVersion !== loadVersion) return;
+          loadingPromise = null;
+          loadingPrincipalKey = "";
+        });
+      loadingPromise = request;
+      return request;
     }
 
-    if (!/^\d+$/.test(userId)) throw new Error('登录用户 ID 无效，请重新登录')
-    if (loadedPrincipalKey.value === principalKey) return
-    if (loadingPromise && loadingPrincipalKey === principalKey) return loadingPromise
+    if (!/^\d+$/.test(userId)) throw new Error("登录用户 ID 无效，请重新登录");
+    if (loadedPrincipalKey.value === principalKey) return;
+    if (loadingPromise && loadingPrincipalKey === principalKey) return loadingPromise;
 
-    const requestVersion = ++loadVersion
-    loadingPrincipalKey = principalKey
+    const requestVersion = ++loadVersion;
+    loadingPrincipalKey = principalKey;
     const request = Promise.all([
-      loadDataApi<Module[]>('s_module', 'b_canuse = 1', 'b_id ASC'),
-      loadDataApi<UserModule[]>('b_user_module', `b_user_id = ${userId}`, 'b_id ASC'),
-      loadDataApi<UserModule[]>('b_user_power', `b_user_id = ${userId}`, 'b_id ASC'),
-      loadDataApi<ModulePower[]>('s_module_power', 'b_canuse = 1', 'b_id ASC'),
+      loadDataApi<Module[]>("s_module", "b_canuse = 1", "b_id ASC"),
+      loadDataApi<UserModule[]>("b_user_module", `b_user_id = ${userId}`, "b_id ASC"),
+      loadDataApi<UserModule[]>("b_user_power", `b_user_id = ${userId}`, "b_id ASC"),
+      loadDataApi<ModulePower[]>("s_module_power", "b_canuse = 1", "b_id ASC"),
     ])
       .then(([moduleResponse, userModules, userPowers, powers]) => {
-        if (requestVersion !== loadVersion) return
-        const activeModules = moduleResponse.data || []
-        const mById = new Map(activeModules.map((m) => [String(m.b_id), m]))
-        const pById = new Map(powers.data.map((p) => [String(p.b_id), p]))
-        const pageIds = userModules.data.map((item) => String(item.b_module_id || '')).filter(Boolean)
-        modules.value = activeModules
-        grantedPageIds.value = pageIds
+        if (requestVersion !== loadVersion) return;
+        const activeModules = moduleResponse.data || [];
+        const mById = new Map(activeModules.map((m) => [String(m.b_id), m]));
+        const pById = new Map(powers.data.map((p) => [String(p.b_id), p]));
+        const pageIds = userModules.data
+          .map((item) => String(item.b_module_id || ""))
+          .filter(Boolean);
+        modules.value = activeModules;
+        grantedPageIds.value = pageIds;
         moduleCodes.value = userModules.data
           .map((item) => mById.get(String(item.b_module_id))?.b_code)
-          .filter(Boolean) as string[]
+          .filter(Boolean) as string[];
         powerCodes.value = userPowers.data
           .map((item) => pById.get(String(item.b_power_id)))
           .filter((p): p is ModulePower => Boolean(p))
-          .map((power) => `${String(power.b_module_id)}.${power.b_code}`)
-        loadedPrincipalKey.value = principalKey
+          .map((power) => `${String(power.b_module_id)}.${power.b_code}`);
+        loadedPrincipalKey.value = principalKey;
       })
       .finally(() => {
-        if (requestVersion !== loadVersion) return
-        loadingPromise = null
-        loadingPrincipalKey = ''
-      })
-    loadingPromise = request
-    return request
+        if (requestVersion !== loadVersion) return;
+        loadingPromise = null;
+        loadingPrincipalKey = "";
+      });
+    loadingPromise = request;
+    return request;
   }
 
   function resolvePageId(code: string): string {
-    let module = moduleByCode.value.get(String(code || ''))
-    const visited = new Set<string>()
+    let module = moduleByCode.value.get(String(code || ""));
+    const visited = new Set<string>();
     while (module) {
-      const moduleId = String(module.b_id || '')
-      if (!moduleId || visited.has(moduleId)) return ''
-      visited.add(moduleId)
-      if (module.b_module_type === 'page') return moduleId
-      const parentId = String(module.b_parent_id || '')
-      module = parentId ? moduleById.value.get(parentId) : undefined
+      const moduleId = String(module.b_id || "");
+      if (!moduleId || visited.has(moduleId)) return "";
+      visited.add(moduleId);
+      if (module.b_module_type === "page") return moduleId;
+      const parentId = String(module.b_parent_id || "");
+      module = parentId ? moduleById.value.get(parentId) : undefined;
     }
-    return ''
+    return "";
   }
 
   function canAccess(moduleCode?: string): boolean {
-    if (isG3soft.value || !moduleCode) return true
-    const module = moduleByCode.value.get(String(moduleCode))
-    if (!module) return false
-    const moduleId = String(module.b_id || '')
-    const pageId = resolvePageId(moduleCode)
-    return grantedPageSet.value.has(moduleId) || (!!pageId && grantedPageSet.value.has(pageId))
+    if (isG3soft.value || !moduleCode) return true;
+    const module = moduleByCode.value.get(String(moduleCode));
+    if (!module) return false;
+    const moduleId = String(module.b_id || "");
+    const pageId = resolvePageId(moduleCode);
+    return grantedPageSet.value.has(moduleId) || (!!pageId && grantedPageSet.value.has(pageId));
   }
 
   function canPower(scopeCode?: string, powerCode?: string): boolean {
-    if (isG3soft.value) return true
-    const module = moduleByCode.value.get(String(scopeCode || ''))
-    if (!module || !canAccess(scopeCode)) return false
-    const moduleId = String(module.b_id || '')
-    const pageId = resolvePageId(scopeCode || '')
+    if (isG3soft.value) return true;
+    const module = moduleByCode.value.get(String(scopeCode || ""));
+    if (!module || !canAccess(scopeCode)) return false;
+    const moduleId = String(module.b_id || "");
+    const pageId = resolvePageId(scopeCode || "");
     return (
       powerSet.value.has(`${moduleId}.${powerCode}`) ||
       (!!pageId && powerSet.value.has(`${pageId}.${powerCode}`))
-    )
+    );
   }
 
   function clear() {
-    loadVersion++
-    loadingPromise = null
-    loadingPrincipalKey = ''
-    loadedPrincipalKey.value = ''
-    modules.value = []
-    grantedPageIds.value = []
-    moduleCodes.value = []
-    powerCodes.value = []
+    loadVersion++;
+    loadingPromise = null;
+    loadingPrincipalKey = "";
+    loadedPrincipalKey.value = "";
+    modules.value = [];
+    grantedPageIds.value = [];
+    moduleCodes.value = [];
+    powerCodes.value = [];
   }
 
   watch(
     () => [authStore.orgId, authStore.user?.id, authStore.user?.account, authStore.token],
     clear,
-  )
+  );
 
   return {
     load,
@@ -174,5 +178,5 @@ export const usePermissionStore = defineStore('permissions', () => {
     moduleCodes,
     powerCodes,
     isG3soft,
-  }
-})
+  };
+});
diff --git a/code/fms/fms-vue/src/styles/index.css b/code/fms/fms-vue/src/styles/index.css
index 0a7e50aa..26388f53 100644
--- a/code/fms/fms-vue/src/styles/index.css
+++ b/code/fms/fms-vue/src/styles/index.css
@@ -1,5 +1,4 @@
-
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
 
 @import "tailwindcss";
 @import "tw-animate-css";
diff --git a/code/fms/fms-vue/src/utils/lucideIcons.ts b/code/fms/fms-vue/src/utils/lucideIcons.ts
index d48533fa..71028f84 100644
--- a/code/fms/fms-vue/src/utils/lucideIcons.ts
+++ b/code/fms/fms-vue/src/utils/lucideIcons.ts
@@ -1,21 +1,26 @@
-import * as LucideIcons from "@lucide/vue"
+import * as LucideIcons from "@lucide/vue";
 
-let iconMap: Record<string, any> | null = null
+let iconMap: Record<string, any> | null = null;
 
 function loadIcons() {
-  if (iconMap) return
-  const map: Record<string, any> = {}
+  if (iconMap) return;
+  const map: Record<string, any> = {};
   for (const [key, component] of Object.entries(LucideIcons)) {
-    if (key !== "default" && key !== "createLucideIcon" && typeof key === "string" && key.charAt(0) === key.charAt(0).toUpperCase()) {
-      map[key] = component
+    if (
+      key !== "default" &&
+      key !== "createLucideIcon" &&
+      typeof key === "string" &&
+      key.charAt(0) === key.charAt(0).toUpperCase()
+    ) {
+      map[key] = component;
     }
   }
-  iconMap = map
+  iconMap = map;
 }
 
 /** 同步获取图标组件，传入 null/空字符串时返回 null */
 export function getIcon(name?: string | null) {
-  if (!iconMap) loadIcons()
-  if (!name || !iconMap) return null
-  return iconMap[name] || null
+  if (!iconMap) loadIcons();
+  if (!name || !iconMap) return null;
+  return iconMap[name] || null;
 }
diff --git a/code/fms/fms-vue/src/utils/tree.ts b/code/fms/fms-vue/src/utils/tree.ts
index 417a0302..9d1c4c45 100644
--- a/code/fms/fms-vue/src/utils/tree.ts
+++ b/code/fms/fms-vue/src/utils/tree.ts
@@ -1,5 +1,5 @@
 export interface TreeNode<T> extends Record<string, unknown> {
-  children?: T[]
+  children?: T[];
 }
 
 /**
@@ -15,48 +15,44 @@ export function buildTree<T extends TreeNode<T>>(
   parentKey = "b_parent_id",
   childrenKey = "children",
 ): T[] {
-  const map = new Map<string, T>()
-  const roots: T[] = []
+  const map = new Map<string, T>();
+  const roots: T[] = [];
 
   for (const node of list) {
-    map.set(String((node as any)[idKey]), node)
+    map.set(String((node as any)[idKey]), node);
   }
 
   for (const node of list) {
-    const pid = (node as any)[parentKey]
+    const pid = (node as any)[parentKey];
     if (pid != null) {
-      const parent = map.get(String(pid))
+      const parent = map.get(String(pid));
       if (parent) {
         if (!(parent as any)[childrenKey]) {
-          ;(parent as any)[childrenKey] = []
+          (parent as any)[childrenKey] = [];
         }
-        ;(parent as any)[childrenKey].push(node)
-        continue
+        (parent as any)[childrenKey].push(node);
+        continue;
       }
     }
-    roots.push(node)
+    roots.push(node);
   }
 
-  return roots
+  return roots;
 }
 
 /**
  * 按 b_xh 升序、b_id 升序 递归排序树。
  */
-export function sortTree<T extends TreeNode<T>>(
-  tree: T[],
-  xhKey = "b_xh",
-  idKey = "b_id",
-): T[] {
+export function sortTree<T extends TreeNode<T>>(tree: T[], xhKey = "b_xh", idKey = "b_id"): T[] {
   tree.sort((a: any, b: any) => {
-    const xhDiff = (Number(a[xhKey]) || 0) - (Number(b[xhKey]) || 0)
-    if (xhDiff !== 0) return xhDiff
-    return String(a[idKey] || "").localeCompare(String(b[idKey] || ""))
-  })
+    const xhDiff = (Number(a[xhKey]) || 0) - (Number(b[xhKey]) || 0);
+    if (xhDiff !== 0) return xhDiff;
+    return String(a[idKey] || "").localeCompare(String(b[idKey] || ""));
+  });
   for (const node of tree) {
     if (node.children?.length) {
-      sortTree(node.children as T[], xhKey, idKey)
+      sortTree(node.children as T[], xhKey, idKey);
     }
   }
-  return tree
+  return tree;
 }
diff --git a/code/fms/fms-vue/src/views/base/PlaceholderPage.vue b/code/fms/fms-vue/src/views/base/PlaceholderPage.vue
index e6fefdee..c498e4ae 100644
--- a/code/fms/fms-vue/src/views/base/PlaceholderPage.vue
+++ b/code/fms/fms-vue/src/views/base/PlaceholderPage.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { computed } from "vue";
+import { useRoute } from "vue-router";
 
-const route = useRoute()
-const title = computed(() => (route.meta.title as string) ?? '页面')
+const route = useRoute();
+const title = computed(() => (route.meta.title as string) ?? "页面");
 </script>
diff --git a/code/fms/fms-vue/src/views/base/ContactPage.vue b/code/fms/fms-vue/src/views/base/contact/index.vue
similarity index 100%
rename from code/fms/fms-vue/src/views/base/ContactPage.vue
rename to code/fms/fms-vue/src/views/base/contact/index.vue
diff --git a/code/fms/fms-vue/src/views/base/OtherCompanyPage.vue b/code/fms/fms-vue/src/views/base/othercompany/index.vue
similarity index 100%
rename from code/fms/fms-vue/src/views/base/OtherCompanyPage.vue
rename to code/fms/fms-vue/src/views/base/othercompany/index.vue
diff --git a/code/fms/fms-vue/src/views/base/OtherDataPage.vue b/code/fms/fms-vue/src/views/base/otherdata/index.vue
similarity index 100%
rename from code/fms/fms-vue/src/views/base/OtherDataPage.vue
rename to code/fms/fms-vue/src/views/base/otherdata/index.vue
diff --git a/code/fms/fms-vue/src/views/dashboard/index.vue b/code/fms/fms-vue/src/views/dashboard/index.vue
index 6c0ad715..f28e3c24 100644
--- a/code/fms/fms-vue/src/views/dashboard/index.vue
+++ b/code/fms/fms-vue/src/views/dashboard/index.vue
@@ -1,80 +1,438 @@
 <script setup lang="ts">
-import { ref } from "vue"
-import FmsSelect from "@/components/FmsSelect.vue"
-import FmsAutoComplete from "@/components/FmsAutoComplete.vue"
+import { computed, nextTick, ref, shallowRef } from "vue";
+import { toast } from "vue-sonner";
+import {
+  CheckCircle2,
+  Copy,
+  Database,
+  Pencil,
+  Plus,
+  RefreshCw,
+  Rows3,
+  Search,
+  Trash2,
+  X,
+} from "@lucide/vue";
+import FmsAutoComplete from "@/components/FmsAutoComplete.vue";
+import FmsSelect from "@/components/FmsSelect.vue";
+import FmsTable from "@/components/fms-table/FmsTable.vue";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
-// FmsSelect demo
-const localeCode = ref("")
-const localeLabel = ref("")
-const localeRecord = ref<Record<string, any> | null>(null)
+type DemoRow = {
+  id: string;
+  code: string;
+  name: string;
+  owner: string;
+  status: number;
+  enabled: number;
+  updatedAt: string;
+};
 
-function onLocaleChange(record: Record<string, any> | null) {
-  localeRecord.value = record
+const ROW_COUNT = 15;
+const OWNER_OPTIONS = [
+  { label: "林晓", value: "lin-xiao" },
+  { label: "陈默", value: "chen-mo" },
+  { label: "周宁", value: "zhou-ning" },
+  { label: "方言", value: "fang-yan" },
+];
+const STATUS_OPTIONS = [
+  { label: "启用", value: 1 },
+  { label: "禁用", value: 0 },
+];
+
+function buildRows(): DemoRow[] {
+  return Array.from({ length: ROW_COUNT }, (_, index) => ({
+    id: `R${String(index + 1).padStart(4, "0")}`,
+    code: `FMS-${String(index + 1).padStart(4, "0")}`,
+    name: ["客户资料", "订单状态", "库存预警", "合同归档", "发票登记"][index % 5] + ` ${index + 1}`,
+    owner: OWNER_OPTIONS[index % OWNER_OPTIONS.length]!.value,
+    status: index % 7 === 0 ? 0 : 1,
+    enabled: index % 11 === 0 ? 0 : 1,
+    updatedAt: `2026-08-${String((index % 28) + 1).padStart(2, "0")} ${String((index % 10) + 8).padStart(2, "0")}:30`,
+  }));
 }
 
-// FmsAutoComplete demo
-const autoValue = ref("")
-const autoRecord = ref<Record<string, any> | null>(null)
+const tableRef = ref<InstanceType<typeof FmsTable> | null>(null);
+const dataSource = shallowRef<DemoRow[]>(buildRows());
+const searchQuery = ref("");
+const statusFilter = ref("all");
+const selectedRowKeys = ref<string[]>([]);
+const activeRowKey = ref<string | null>(null);
+const nextRowNumber = ref(ROW_COUNT + 1);
 
-function onAutoChange(record: Record<string, any> | null) {
-  autoRecord.value = record
+const columns = shallowRef([
+  { dataIndex: "code", title: "记录编号", width: 145, fixed: "left" },
+  { dataIndex: "name", title: "项目名称", width: 220, editor: { type: "input" } },
+  {
+    dataIndex: "owner",
+    title: "负责人",
+    width: 130,
+    editor: { type: "select", options: OWNER_OPTIONS },
+  },
+  {
+    dataIndex: "status",
+    title: "状态",
+    width: 105,
+    editor: { type: "select", options: STATUS_OPTIONS },
+  },
+  { dataIndex: "enabled", title: "启用", width: 82, editor: { type: "checkbox" } },
+  { dataIndex: "updatedAt", title: "最近更新", width: 175 },
+  {
+    dataIndex: "actions",
+    key: "actions",
+    title: "操作",
+    width: 190,
+    actions: [
+      { type: "edit", label: "编辑", icon: Pencil, onClick: (row: DemoRow) => editRow(row) },
+      {
+        type: "delete",
+        label: "删除",
+        icon: Trash2,
+        danger: true,
+        confirm: {
+          title: "删除这条记录？",
+          content: "删除后无法恢复，请确认操作。",
+          okType: "danger",
+        },
+        onClick: (row: DemoRow) => removeRow(row),
+      },
+      {
+        type: "more",
+        label: "更多",
+        items: [
+          {
+            key: "duplicate",
+            label: "复制记录",
+            icon: Copy,
+            onClick: (row: DemoRow) => duplicateRow(row),
+          },
+          { key: "disable", label: "切换启用状态", onClick: (row: DemoRow) => toggleRow(row) },
+        ],
+      },
+    ],
+  },
+]);
+
+const filteredRows = computed(() => {
+  const keyword = searchQuery.value.trim().toLowerCase();
+  return dataSource.value.filter((row) => {
+    const matchesKeyword =
+      !keyword || `${row.code} ${row.name} ${row.owner}`.toLowerCase().includes(keyword);
+    const matchesStatus = statusFilter.value === "all" || String(row.status) === statusFilter.value;
+    return matchesKeyword && matchesStatus;
+  });
+});
+
+const rowSelection = computed(() => ({
+  selectedRowKeys: selectedRowKeys.value,
+  onChange: (keys: (string | number)[]) => {
+    selectedRowKeys.value = keys.map(String);
+  },
+}));
+
+const enabledCount = computed(() => dataSource.value.filter((row) => row.enabled === 1).length);
+const selectedCount = computed(() => selectedRowKeys.value.length);
+
+function syncRows() {
+  dataSource.value = [...dataSource.value];
 }
+
+function onTableChange(
+  row: DemoRow,
+  column: { title?: string; dataIndex?: string },
+  value: unknown,
+) {
+  activeRowKey.value = row.id;
+  syncRows();
+  toast.success(`${column.title || column.dataIndex} 已更新`, {
+    description: `${row.code} · ${String(value)}`,
+  });
+}
+
+function onRowOrderChange(rows: DemoRow[]) {
+  dataSource.value = rows;
+  toast.success("行顺序已更新");
+}
+
+function regenerate() {
+  dataSource.value = buildRows();
+  selectedRowKeys.value = [];
+  activeRowKey.value = null;
+  nextRowNumber.value = ROW_COUNT + 1;
+  toast.success(`已生成 ${ROW_COUNT.toLocaleString()} 条演示数据`);
+}
+
+async function addRow() {
+  const rowNumber = nextRowNumber.value++;
+  const row: DemoRow = {
+    id: `R${String(rowNumber).padStart(4, "0")}`,
+    code: `FMS-${String(rowNumber).padStart(4, "0")}`,
+    name: `新建记录 ${rowNumber}`,
+    owner: OWNER_OPTIONS[0]!.value,
+    status: 1,
+    enabled: 1,
+    updatedAt: "2026-08-10 20:00",
+  };
+
+  dataSource.value = [...dataSource.value, row];
+  searchQuery.value = "";
+  statusFilter.value = "all";
+  activeRowKey.value = row.id;
+  await nextTick();
+  await tableRef.value?.editRow(row.id, "name");
+  toast.success(`已新增 ${row.code}`);
+}
+
+function editRow(row: DemoRow) {
+  activeRowKey.value = row.id;
+  tableRef.value?.editRow(row.id, "name", { scroll: false });
+}
+
+function removeRow(row: DemoRow) {
+  dataSource.value = dataSource.value.filter((item) => item.id !== row.id);
+  selectedRowKeys.value = selectedRowKeys.value.filter((key) => key !== row.id);
+  toast.success(`已删除 ${row.code}`);
+}
+
+function duplicateRow(row: DemoRow) {
+  const copyRow = {
+    ...row,
+    id: `${row.id}-COPY`,
+    code: `${row.code}-COPY`,
+    name: `${row.name} 副本`,
+  };
+  dataSource.value = [copyRow, ...dataSource.value];
+  toast.success(`已复制 ${row.code}`);
+}
+
+function toggleRow(row: DemoRow) {
+  row.enabled = row.enabled === 1 ? 0 : 1;
+  syncRows();
+  toast.success(row.enabled === 1 ? "记录已启用" : "记录已停用");
+}
+
+function editFirstSelected() {
+  const firstKey = selectedRowKeys.value[0];
+  if (!firstKey) {
+    toast.info("请先选择一条记录");
+    return;
+  }
+  editRow(dataSource.value.find((row) => row.id === firstKey)!);
+}
+
+function clearSelection() {
+  selectedRowKeys.value = [];
+  tableRef.value?.clearSelectedArea();
+}
+
+// 远程控件 demo
+const localeCode = ref("");
+const localeLabel = ref("");
+const localeRecord = ref<Record<string, unknown> | null>(null);
+const autoValue = ref("");
+const autoRecord = ref<Record<string, unknown> | null>(null);
 </script>
 
 <template>
-  <div class="flex h-full flex-col items-center gap-8 p-8">
-    <h1 class="text-2xl font-bold text-muted-foreground">Dashboard</h1>
-
-    <div class="grid w-full max-w-2xl gap-8">
-      <!-- FmsSelect demo -->
-      <div class="rounded-lg border p-6 space-y-3">
-        <h2 class="text-sm font-semibold">FmsSelect（多语言类型）</h2>
-        <p class="text-xs text-muted-foreground">
-          v-model + v-model:label 双绑定，支持远程搜索、滚动分页、清除、未匹配值回显
-        </p>
-        <div class="w-64">
-          <FmsSelect
-            v-model="localeCode"
-            v-model:label="localeLabel"
-            view-name="b_i18n_type"
-            label-key="b_name"
-            value-key="b_code"
-            order-by="b_code ASC"
-            :page-size="10"
-            allow-clear
-            placeholder="选择语言类型..."
-            @change="onLocaleChange"
-          />
+  <main class="flex min-h-full flex-col gap-5 pb-2">
+    <header class="flex flex-wrap items-end justify-between gap-4 border-b pb-4">
+      <div class="min-w-0">
+        <div
+          class="mb-1 flex items-center gap-2 text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground"
+        >
+          <Database class="size-3.5" />
+          FmsTable Playground
         </div>
-        <div class="text-xs text-muted-foreground space-y-0.5">
-          <div>value（b_code）：<code class="text-foreground">{{ localeCode || '-' }}</code></div>
-          <div>label（b_name）：<code class="text-foreground">{{ localeLabel || '-' }}</code></div>
-          <div>record：<code class="text-foreground">{{ localeRecord || '-' }}</code></div>
+        <h1 class="text-2xl font-semibold tracking-tight">数据表格工作台</h1>
+        <p class="mt-1 max-w-2xl text-sm text-muted-foreground">
+          在真实数据场景下验证虚拟滚动、行选择、单元格编辑和行拖拽。
+        </p>
+      </div>
+      <div class="flex flex-wrap items-center gap-2">
+        <Button variant="outline" size="sm" @click="clearSelection">
+          <X data-icon="inline-start" />
+          清空选择
+        </Button>
+        <Button variant="outline" size="sm" :disabled="!selectedCount" @click="editFirstSelected">
+          <Pencil data-icon="inline-start" />
+          编辑选中
+        </Button>
+        <Button size="sm" @click="regenerate">
+          <RefreshCw data-icon="inline-start" />
+          重新生成
+        </Button>
+      </div>
+    </header>
+
+    <section class="grid grid-cols-2 gap-3 sm:grid-cols-4" aria-label="表格统计">
+      <Card class="gap-2 py-3">
+        <CardHeader class="flex items-center justify-between px-4 pb-0 pt-0"
+          ><CardTitle class="text-xs font-medium text-muted-foreground">总记录</CardTitle
+          ><Rows3 class="size-4 text-muted-foreground"
+        /></CardHeader>
+        <CardContent class="px-4"
+          ><div class="text-xl font-semibold tabular-nums">
+            {{ dataSource.length.toLocaleString() }}
+          </div></CardContent
+        >
+      </Card>
+      <Card class="gap-2 py-3">
+        <CardHeader class="flex items-center justify-between px-4 pb-0 pt-0"
+          ><CardTitle class="text-xs font-medium text-muted-foreground">当前显示</CardTitle
+          ><Search class="size-4 text-muted-foreground"
+        /></CardHeader>
+        <CardContent class="px-4"
+          ><div class="text-xl font-semibold tabular-nums">
+            {{ filteredRows.length.toLocaleString() }}
+          </div></CardContent
+        >
+      </Card>
+      <Card class="gap-2 py-3">
+        <CardHeader class="flex items-center justify-between px-4 pb-0 pt-0"
+          ><CardTitle class="text-xs font-medium text-muted-foreground">已启用</CardTitle
+          ><CheckCircle2 class="size-4 text-muted-foreground"
+        /></CardHeader>
+        <CardContent class="px-4"
+          ><div class="text-xl font-semibold tabular-nums">
+            {{ enabledCount.toLocaleString() }}
+          </div></CardContent
+        >
+      </Card>
+      <Card class="gap-2 py-3">
+        <CardHeader class="flex items-center justify-between px-4 pb-0 pt-0"
+          ><CardTitle class="text-xs font-medium text-muted-foreground">已选择</CardTitle
+          ><Badge variant="secondary">{{ selectedCount }}</Badge></CardHeader
+        >
+        <CardContent class="px-4"
+          ><div class="text-xl font-semibold tabular-nums">{{ selectedCount }}</div></CardContent
+        >
+      </Card>
+    </section>
+
+    <section class="flex min-h-0 flex-1 flex-col gap-3 rounded-lg border bg-card p-3 sm:p-4">
+      <div class="flex flex-wrap items-end justify-between gap-3">
+        <div>
+          <h2 class="text-base font-semibold">记录清单</h2>
+          <p class="mt-1 text-xs text-muted-foreground">
+            点击文本或下拉单元格开始编辑，复选框可直接切换。
+          </p>
+        </div>
+        <div class="flex flex-wrap items-end gap-2">
+          <Button size="sm" @click="addRow">
+            <Plus data-icon="inline-start" />
+            新增行
+          </Button>
+          <label class="grid gap-1 text-xs text-muted-foreground">
+            <span>搜索</span>
+            <Input
+              v-model="searchQuery"
+              class="h-8 w-44 text-xs"
+              placeholder="编号、名称或负责人"
+            />
+          </label>
+          <label class="grid gap-1 text-xs text-muted-foreground">
+            <span>状态</span>
+            <Select v-model="statusFilter">
+              <SelectTrigger size="sm" class="h-8 w-28"
+                ><SelectValue placeholder="全部状态"
+              /></SelectTrigger>
+              <SelectContent
+                ><SelectGroup
+                  ><SelectItem value="all">全部状态</SelectItem
+                  ><SelectItem value="1">启用</SelectItem
+                  ><SelectItem value="0">禁用</SelectItem></SelectGroup
+                ></SelectContent
+              >
+            </Select>
+          </label>
         </div>
       </div>
 
-      <!-- FmsAutoComplete demo -->
-      <div class="rounded-lg border p-6 space-y-3">
-        <h2 class="text-sm font-semibold">FmsAutoComplete（语言类型搜索）</h2>
-        <p class="text-xs text-muted-foreground">
-          单 v-model 绑定文本，回车/选中后拿到完整记录
-        </p>
-        <div class="w-64">
-          <FmsAutoComplete
-            v-model="autoValue"
-            view-name="b_i18n_type"
-            label-key="b_name"
-            value-key="b_code"
-            order-by="b_code ASC"
-            placeholder="输入语言关键字..."
-            @change="onAutoChange"
-          />
-        </div>
-        <div class="text-xs text-muted-foreground space-y-0.5">
-          <div>v-model：<code class="text-foreground">{{ autoValue || '-' }}</code></div>
-          <div>record：<code class="text-foreground">{{ autoRecord || '-' }}</code></div>
-        </div>
+      <div class="min-h-[460px] flex-1">
+        <FmsTable
+          ref="tableRef"
+          v-model:columns="columns"
+          :data-source="filteredRows"
+          :row-selection="rowSelection"
+          :active-row-key="activeRowKey"
+          row-key="id"
+          row-draggable
+          show-overflow
+          @change="onTableChange"
+          @row-order-change="onRowOrderChange"
+        />
       </div>
-    </div>
-  </div>
+    </section>
+
+    <section class="grid gap-3 lg:grid-cols-2">
+      <Card class="gap-4 py-4">
+        <CardHeader class="px-4 pb-0 pt-0"
+          ><CardTitle class="text-sm">FmsSelect 远程选择</CardTitle></CardHeader
+        >
+        <CardContent class="px-4">
+          <div class="grid gap-3 sm:grid-cols-[240px_1fr] sm:items-center">
+            <FmsSelect
+              v-model="localeCode"
+              v-model:label="localeLabel"
+              view-name="b_i18n_type"
+              label-key="b_name"
+              value-key="b_code"
+              order-by="b_code ASC"
+              :page-size="10"
+              allow-clear
+              placeholder="选择语言类型..."
+              @change="localeRecord = $event"
+            />
+            <div class="grid gap-1 text-xs text-muted-foreground">
+              <span
+                >值：<code class="text-foreground">{{ localeCode || "-" }}</code></span
+              ><span
+                >记录：<code class="text-foreground">{{
+                  localeRecord ? JSON.stringify(localeRecord) : "-"
+                }}</code></span
+              >
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+      <Card class="gap-4 py-4">
+        <CardHeader class="px-4 pb-0 pt-0"
+          ><CardTitle class="text-sm">FmsAutoComplete 搜索</CardTitle></CardHeader
+        >
+        <CardContent class="px-4">
+          <div class="grid gap-3 sm:grid-cols-[240px_1fr] sm:items-center">
+            <FmsAutoComplete
+              v-model="autoValue"
+              view-name="b_i18n_type"
+              label-key="b_name"
+              value-key="b_code"
+              order-by="b_code ASC"
+              placeholder="输入语言关键字..."
+              @change="autoRecord = $event"
+            />
+            <div class="grid gap-1 text-xs text-muted-foreground">
+              <span
+                >输入：<code class="text-foreground">{{ autoValue || "-" }}</code></span
+              ><span
+                >记录：<code class="text-foreground">{{
+                  autoRecord ? JSON.stringify(autoRecord) : "-"
+                }}</code></span
+              >
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </section>
+  </main>
 </template>
diff --git a/code/fms/fms-vue/src/views/login/index.vue b/code/fms/fms-vue/src/views/login/index.vue
index 75337f46..5248e04c 100644
--- a/code/fms/fms-vue/src/views/login/index.vue
+++ b/code/fms/fms-vue/src/views/login/index.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { useForm } from "vee-validate"
-import { toast } from "vue-sonner"
-import { loginApi } from "@/services/api"
-import { useAuthStore } from "@/stores/auth"
-import { Building2, GalleryVerticalEnd, KeyRound, LoaderCircle, User } from "@lucide/vue"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
+import { computed, onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useForm } from "vee-validate";
+import { toast } from "vue-sonner";
+import { loginApi } from "@/services/api";
+import { useAuthStore } from "@/stores/auth";
+import { Building2, GalleryVerticalEnd, KeyRound, LoaderCircle, User } from "@lucide/vue";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import {
   Form,
   FormField,
@@ -15,20 +15,20 @@ import {
   FormLabel,
   FormControl,
   FormMessage,
-} from "@/components/ui/form"
-import { toTypedSchema } from "@vee-validate/zod"
-import { z } from "zod"
+} from "@/components/ui/form";
+import { toTypedSchema } from "@vee-validate/zod";
+import { z } from "zod";
 
-const router = useRouter()
-const route = useRoute()
-const authStore = useAuthStore()
+const router = useRouter();
+const route = useRoute();
+const authStore = useAuthStore();
 
 const loginHint = computed(() => {
-  const reason = String(route.query.reason || "")
-  if (reason === "session-replaced") return "账号已在其他设备登录，请重新登录"
-  if (reason === "expired") return "登录已过期，请重新登录"
-  return ""
-})
+  const reason = String(route.query.reason || "");
+  if (reason === "session-replaced") return "账号已在其他设备登录，请重新登录";
+  if (reason === "expired") return "登录已过期，请重新登录";
+  return "";
+});
 
 const formSchema = toTypedSchema(
   z.object({
@@ -36,44 +36,48 @@ const formSchema = toTypedSchema(
     userId: z.string({ required_error: "请输入账号" }).min(1, "账号不能为空"),
     password: z.string().optional(),
   }),
-)
+);
 
 const form = useForm({
   validationSchema: formSchema,
-})
+});
 
-const submitting = ref(false)
-const orgIdInput = ref<InstanceType<typeof Input> | null>(null)
+const submitting = ref(false);
+const orgIdInput = ref<InstanceType<typeof Input> | null>(null);
 
 onMounted(() => {
   form.setValues({
-    orgId: authStore.orgId || '',
-    userId: authStore.user?.account || '',
-    password: '',
-  })
-  orgIdInput.value?.$el?.focus()
-})
+    orgId: authStore.orgId || "",
+    userId: authStore.user?.account || "",
+    password: "",
+  });
+  orgIdInput.value?.$el?.focus();
+});
 
 async function onSubmit(values: Record<string, unknown>) {
-  submitting.value = true
+  submitting.value = true;
   try {
-    const { orgId, userId, password } = values as { orgId: string; userId: string; password?: string }
-    const res = await loginApi(orgId, userId, password ?? "")
+    const { orgId, userId, password } = values as {
+      orgId: string;
+      userId: string;
+      password?: string;
+    };
+    const res = await loginApi(orgId, userId, password ?? "");
     authStore.setSession(
       { token: res.data.token, user: { ...res.data.user, account: userId } },
       res.data.orgid ?? orgId,
-    )
-    toast.success('登录成功')
-    router.replace(String(route.query.redirect || "/dashboard"))
+    );
+    toast.success("登录成功");
+    router.replace(String(route.query.redirect || "/dashboard"));
   } catch (e: unknown) {
-    if (e instanceof Error) alert(e.message)
+    if (e instanceof Error) alert(e.message);
   } finally {
-    submitting.value = false
+    submitting.value = false;
   }
 }
 
 function login() {
-  form.handleSubmit(onSubmit)()
+  form.handleSubmit(onSubmit)();
 }
 </script>
 
@@ -96,7 +100,9 @@ function login() {
         <div
           v-if="loginHint"
           class="rounded-md bg-amber-50 px-4 py-2.5 text-center text-sm text-amber-700 dark:bg-amber-950 dark:text-amber-300"
-        >{{ loginHint }}</div>
+        >
+          {{ loginHint }}
+        </div>
 
         <!-- orgId -->
         <FormField v-slot="{ componentField }" name="orgId">
@@ -104,8 +110,17 @@ function login() {
             <FormLabel>机构码 <span class="text-destructive">*</span></FormLabel>
             <FormControl>
               <div class="relative">
-                <span class="absolute inset-y-0 left-3 flex items-center text-muted-foreground"><Building2 class="size-4" /></span>
-                <Input id="orgId" ref="orgIdInput" v-bind="componentField" placeholder="请输入机构码" class="pl-9" :disabled="submitting" />
+                <span class="absolute inset-y-0 left-3 flex items-center text-muted-foreground"
+                  ><Building2 class="size-4"
+                /></span>
+                <Input
+                  id="orgId"
+                  ref="orgIdInput"
+                  v-bind="componentField"
+                  placeholder="请输入机构码"
+                  class="pl-9"
+                  :disabled="submitting"
+                />
               </div>
             </FormControl>
             <FormMessage />
@@ -118,8 +133,16 @@ function login() {
             <FormLabel>账号 <span class="text-destructive">*</span></FormLabel>
             <FormControl>
               <div class="relative">
-                <span class="absolute inset-y-0 left-3 flex items-center text-muted-foreground"><User class="size-4" /></span>
-                <Input id="userId" v-bind="componentField" placeholder="请输入账号" class="pl-9" :disabled="submitting" />
+                <span class="absolute inset-y-0 left-3 flex items-center text-muted-foreground"
+                  ><User class="size-4"
+                /></span>
+                <Input
+                  id="userId"
+                  v-bind="componentField"
+                  placeholder="请输入账号"
+                  class="pl-9"
+                  :disabled="submitting"
+                />
               </div>
             </FormControl>
             <FormMessage />
@@ -132,8 +155,17 @@ function login() {
             <FormLabel>密码</FormLabel>
             <FormControl>
               <div class="relative">
-                <span class="absolute inset-y-0 left-3 flex items-center text-muted-foreground"><KeyRound class="size-4" /></span>
-                <Input id="password" v-bind="componentField" type="password" placeholder="请输入密码" class="pl-9" :disabled="submitting" />
+                <span class="absolute inset-y-0 left-3 flex items-center text-muted-foreground"
+                  ><KeyRound class="size-4"
+                /></span>
+                <Input
+                  id="password"
+                  v-bind="componentField"
+                  type="password"
+                  placeholder="请输入密码"
+                  class="pl-9"
+                  :disabled="submitting"
+                />
               </div>
             </FormControl>
             <FormMessage />
diff --git a/code/fms/fms-vue/src/views/system/ModuleManagementPage.vue b/code/fms/fms-vue/src/views/system/ModuleManagementPage.vue
deleted file mode 100644
index 30730ad2..00000000
--- a/code/fms/fms-vue/src/views/system/ModuleManagementPage.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="flex h-full items-center justify-center">
-    <h1 class="text-2xl font-bold text-muted-foreground">模块管理</h1>
-  </div>
-</template>
diff --git a/code/fms/fms-vue/src/views/system/I18nTypePage.vue b/code/fms/fms-vue/src/views/system/i18n-type/index.vue
similarity index 100%
rename from code/fms/fms-vue/src/views/system/I18nTypePage.vue
rename to code/fms/fms-vue/src/views/system/i18n-type/index.vue
diff --git a/code/fms/fms-vue/src/views/system/LoginLogPage.vue b/code/fms/fms-vue/src/views/system/login-log/index.vue
similarity index 100%
rename from code/fms/fms-vue/src/views/system/LoginLogPage.vue
rename to code/fms/fms-vue/src/views/system/login-log/index.vue
diff --git a/code/fms/fms-vue/src/views/system/module-management/index.vue b/code/fms/fms-vue/src/views/system/module-management/index.vue
new file mode 100644
index 00000000..9a040a77
--- /dev/null
+++ b/code/fms/fms-vue/src/views/system/module-management/index.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { toast } from "vue-sonner";
+import FmsTree from "@/components/FmsTree.vue";
+import type { TreeNode, ContextMenuItemDef } from "@/components/FmsTreeNode.vue";
+
+const expandedKeys = ref<string[]>(["__fms_root__"]);
+const selectedKeys = ref<string[]>([]);
+const selectedNode = ref<TreeNode | null>(null);
+
+const treeData: TreeNode[] = [
+  {
+    key: "sys",
+    title: "系统管理",
+    children: [
+      {
+        key: "sys_user",
+        title: "用户管理",
+        children: [
+          { key: "sys_user_list", title: "用户列表" },
+          { key: "sys_user_role", title: "角色配置" },
+        ],
+      },
+      {
+        key: "sys_log",
+        title: "日志管理",
+        children: [
+          { key: "sys_log_login", title: "登录日志" },
+          { key: "sys_log_op", title: "操作日志" },
+        ],
+      },
+      { key: "sys_i18n", title: "国际化管理" },
+    ],
+  },
+  {
+    key: "biz",
+    title: "业务模块",
+    children: [
+      {
+        key: "biz_order",
+        title: "订单管理",
+        children: [
+          { key: "biz_order_list", title: "订单列表" },
+          { key: "biz_order_setting", title: "订单配置" },
+        ],
+      },
+      { key: "biz_product", title: "产品管理" },
+    ],
+  },
+  {
+    key: "report",
+    title: "报表中心",
+    children: [
+      { key: "report_daily", title: "日报" },
+      { key: "report_monthly", title: "月报" },
+    ],
+  },
+];
+
+function buildContextMenu(node: TreeNode): ContextMenuItemDef[] {
+  return [
+    { key: "add_child", label: "新增子节点" },
+    { key: "edit", label: "编辑" },
+    { key: "delete", label: "删除" },
+  ];
+}
+
+function onSelect(_keys: string[], info: { node: TreeNode }) {
+  selectedNode.value = info.node;
+}
+
+function onMenuClick({ key, node }: { key: string; node: TreeNode }) {
+  switch (key) {
+    case "add_child":
+      toast.info(`新增子节点 — 父节点: ${node.title}`);
+      break;
+    case "edit":
+      toast.info(`编辑节点: ${node.title}`);
+      break;
+    case "delete":
+      toast.warning(`删除节点: ${node.title}`);
+      break;
+  }
+}
+</script>
+
+<template>
+  <div class="flex h-full gap-4 p-6">
+    <!-- 左侧树 -->
+    <div class="w-72 shrink-0 rounded-xl border bg-card p-4">
+      <h2 class="mb-3 text-sm font-semibold text-foreground">模块树</h2>
+      <FmsTree
+        v-model:expanded-keys="expandedKeys"
+        v-model:selected-keys="selectedKeys"
+        :tree-data="treeData"
+        :context-menu="buildContextMenu"
+        @select="onSelect"
+        @menu-click="onMenuClick"
+      >
+        <template #title="{ node }">
+          <span class="text-sm">{{ node.title }}</span>
+        </template>
+      </FmsTree>
+    </div>
+
+    <!-- 右侧详情 -->
+    <div class="flex-1 rounded-xl border bg-card p-4">
+      <h2 class="mb-3 text-sm font-semibold text-foreground">节点详情</h2>
+      <div v-if="selectedNode" class="space-y-2 text-sm text-muted-foreground">
+        <div>
+          <span class="font-medium text-foreground">Key: </span>
+          <code class="rounded bg-muted px-1.5 py-0.5 text-xs">{{ selectedNode.key }}</code>
+        </div>
+        <div>
+          <span class="font-medium text-foreground">Title: </span>
+          {{ selectedNode.title }}
+        </div>
+        <div>
+          <span class="font-medium text-foreground">子节点数: </span>
+          {{ selectedNode.children?.length ?? 0 }}
+        </div>
+      </div>
+      <div v-else class="flex h-40 items-center justify-center text-sm text-muted-foreground">
+        请在左侧树中选择一个节点
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/code/fms/fms-vue/src/views/system/UserPage.vue b/code/fms/fms-vue/src/views/system/user/index.vue
similarity index 100%
rename from code/fms/fms-vue/src/views/system/UserPage.vue
rename to code/fms/fms-vue/src/views/system/user/index.vue
diff --git a/code/fms/fms-vue/tsconfig.json b/code/fms/fms-vue/tsconfig.json
index fec8c8e5..2b78387c 100644
--- a/code/fms/fms-vue/tsconfig.json
+++ b/code/fms/fms-vue/tsconfig.json
@@ -1,9 +1,6 @@
 {
   "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
diff --git a/code/fms/fms-vue/vite.config.ts b/code/fms/fms-vue/vite.config.ts
index a38c42e9..5c0a000c 100644
--- a/code/fms/fms-vue/vite.config.ts
+++ b/code/fms/fms-vue/vite.config.ts
@@ -1,24 +1,24 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import tailwindcss from '@tailwindcss/vite'
-import { fileURLToPath, URL } from 'node:url'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import tailwindcss from "@tailwindcss/vite";
+import { fileURLToPath, URL } from "node:url";
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [vue(), tailwindcss()],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
     },
   },
   server: {
     port: 5081,
-    host: '0.0.0.0',
+    host: "0.0.0.0",
     proxy: {
-      '/api': {
-        target: 'http://127.0.0.1:8088',
+      "/api": {
+        target: "http://127.0.0.1:8088",
         changeOrigin: true,
       },
     },
   },
-})
+});