From 3650dabb4703d5cc93d024da719b7956223424cb Mon Sep 17 00:00:00 2001
From: Mykyta <mykytakasianenko@gmail.com>
Date: Sat, 22 Aug 2026 20:38:53 +0200
Subject: [PATCH 1/6] ref

---
 uv.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/uv.lock b/uv.lock
index d664314..de2d47d 100644
--- a/uv.lock
+++ b/uv.lock
@@ -519,7 +519,7 @@ wheels = [
 
 [[package]]
 name = "openadmin"
-version = "0.7.17"
+version = "0.7.19"
 source = { editable = "." }
 dependencies = [
     { name = "fastapi", extra = ["standard"] },

From a00bdf0be228d666a103efb20fb79be9005b9666 Mon Sep 17 00:00:00 2001
From: Mykyta <mykytakasianenko@gmail.com>
Date: Sun, 23 Aug 2026 07:50:33 +0200
Subject: [PATCH 2/6] ref

---
 client/src/components/page/{Action.vue => ActionButton.vue} | 0
 client/src/components/page/{Form.vue => FormButton.vue}     | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename client/src/components/page/{Action.vue => ActionButton.vue} (100%)
 rename client/src/components/page/{Form.vue => FormButton.vue} (100%)

diff --git a/client/src/components/page/Action.vue b/client/src/components/page/ActionButton.vue
similarity index 100%
rename from client/src/components/page/Action.vue
rename to client/src/components/page/ActionButton.vue
diff --git a/client/src/components/page/Form.vue b/client/src/components/page/FormButton.vue
similarity index 100%
rename from client/src/components/page/Form.vue
rename to client/src/components/page/FormButton.vue

From 6aa1b637501b702d26e79c34de20d3c03865ee5a Mon Sep 17 00:00:00 2001
From: Mykyta <mykytakasianenko@gmail.com>
Date: Sun, 23 Aug 2026 07:51:38 +0200
Subject: [PATCH 3/6] ref

---
 client/src/components/page/PageSections.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/client/src/components/page/PageSections.vue b/client/src/components/page/PageSections.vue
index b51bf33..6d8f644 100644
--- a/client/src/components/page/PageSections.vue
+++ b/client/src/components/page/PageSections.vue
@@ -7,8 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 <script setup lang="ts">
 import { Icon } from "@iconify/vue"
 import { computed } from "vue"
-import Action from "@/components/page/Action.vue"
-import Form from "@/components/page/Form.vue"
+import ActionButton from "@/components/page/ActionButton.vue"
+import FormButton from "@/components/page/FormButton.vue"
 import Markdown from "@/components/page/Markdown.vue"
 import Stat from "@/components/page/Stat.vue"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
@@ -36,13 +36,18 @@ const tabItems = computed(() =>
 <template>
 	<div class="flex flex-col gap-24">
 		<section v-if="actions.length" class="flex flex-wrap justify-end gap-2">
-			<Action
+			<ActionButton
 				v-for="action in actions"
 				:section-id="sectionId"
 				:page-id="pageId"
 				:action-id="action.id"
 			/>
-			<Form v-for="form in forms" :section-id="sectionId" :page-id="pageId" :form-id="form.id" />
+			<FormButton
+				v-for="form in forms"
+				:section-id="sectionId"
+				:page-id="pageId"
+				:form-id="form.id"
+			/>
 		</section>
 		<section v-if="stats.length" class="flex flex-wrap justify-center gap-4">
 			<Stat v-for="stat in stats" :section-id="sectionId" :page-id="pageId" :stat-id="stat.id" />

From 357abf549091a75e4331498625dd60c7ad4c51a8 Mon Sep 17 00:00:00 2001
From: Mykyta <mykytakasianenko@gmail.com>
Date: Sun, 23 Aug 2026 08:07:55 +0200
Subject: [PATCH 4/6] feat: added form view

---
 client/src/components/dashboard/TopPanel.vue | 13 +++++++++++++
 client/src/router/index.ts                   |  5 +++++
 client/src/views/FormView.vue                |  9 +++++++++
 3 files changed, 27 insertions(+)
 create mode 100644 client/src/views/FormView.vue

diff --git a/client/src/components/dashboard/TopPanel.vue b/client/src/components/dashboard/TopPanel.vue
index b33a521..7ac204b 100644
--- a/client/src/components/dashboard/TopPanel.vue
+++ b/client/src/components/dashboard/TopPanel.vue
@@ -20,14 +20,19 @@ import { Separator } from "@/components/ui/separator"
 import { SidebarTrigger } from "@/components/ui/sidebar"
 import { usePageSpec } from "@/composables/openadmin-page"
 import { useSectionSpec } from "@/composables/openadmin-section"
+import { useForm } from "@/composables/openadmin-form"
+import { useColor } from "@/composables/colors"
 
 const route = useRoute()
 
 const sectionId = computed(() => route.params.sectionId as string)
 const pageId = computed(() => route.params.pageId as string)
+const formId = computed(() => (route.params.formId || "") as string)
 
 const { data: section } = useSectionSpec({ sectionId })
 const { page } = usePageSpec({ sectionId, pageId })
+const { form } = useForm({ sectionId, pageId, formId })
+const { style } = useColor(() => form.value?.color || "slate")
 </script>
 
 <template>
@@ -46,6 +51,14 @@ const { page } = usePageSpec({ sectionId, pageId })
 						{{ page.name }}
 					</BreadcrumbPage>
 				</BreadcrumbItem>
+
+				<BreadcrumbSeparator v-if="form" />
+				<BreadcrumbItem v-if="form">
+					<BreadcrumbPage class="flex items-center gap-1.5">
+						<Icon v-if="form.icon" :icon="`lucide:${form.icon}`" :class="style.text" />
+						{{ form.name }}
+					</BreadcrumbPage>
+				</BreadcrumbItem>
 			</BreadcrumbList>
 		</Breadcrumb>
 		<ThemeToggle class="ml-auto" />
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 3e41c69..f2f60c9 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -30,6 +30,11 @@ export const router = createRouter({
 					name: "page",
 					component: () => import("@/views/PageView.vue"),
 				},
+				{
+					path: ":sectionId/:pageId/forms/:formId",
+					name: "form",
+					component: () => import("@/views/FormView.vue"),
+				},
 			],
 		},
 	],
diff --git a/client/src/views/FormView.vue b/client/src/views/FormView.vue
new file mode 100644
index 0000000..e4e092f
--- /dev/null
+++ b/client/src/views/FormView.vue
@@ -0,0 +1,9 @@
+<!--
+SPDX-FileCopyrightText: 2026 OpenAdmin
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<h1>Home Form</h1>
+</template>

From f59363c0d3875bc7152823f46de05b6ffa6c4e03 Mon Sep 17 00:00:00 2001
From: Mykyta <mykytakasianenko@gmail.com>
Date: Sun, 23 Aug 2026 20:41:54 +0200
Subject: [PATCH 5/6] feat: form component

---
 client/src/components/page/Form.vue | 25 +++++++++++++++++++++++++
 client/src/views/FormView.vue       | 14 +++++++++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/page/Form.vue

diff --git a/client/src/components/page/Form.vue b/client/src/components/page/Form.vue
new file mode 100644
index 0000000..56081d0
--- /dev/null
+++ b/client/src/components/page/Form.vue
@@ -0,0 +1,25 @@
+<!--
+SPDX-FileCopyrightText: 2026 OpenAdmin
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { useForm } from "@/composables/openadmin-form"
+
+const props = defineProps<{
+	sectionId: string
+	pageId: string
+	formId: string
+}>()
+
+const { form } = useForm({
+	sectionId: props.sectionId,
+	pageId: props.pageId,
+	formId: props.formId,
+})
+</script>
+
+<template>
+	<h1>Form ! {{ form }}</h1>
+</template>
diff --git a/client/src/views/FormView.vue b/client/src/views/FormView.vue
index e4e092f..5b0d78a 100644
--- a/client/src/views/FormView.vue
+++ b/client/src/views/FormView.vue
@@ -4,6 +4,18 @@ SPDX-FileCopyrightText: 2026 OpenAdmin
 SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<script setup lang="ts">
+import { computed } from "vue"
+import { useRoute } from "vue-router"
+import Form from "@/components/page/Form.vue"
+
+const route = useRoute()
+
+const pageId = computed(() => route.params.pageId as string)
+const sectionId = computed(() => route.params.sectionId as string)
+const formId = computed(() => route.params.formId as string)
+</script>
+
 <template>
-	<h1>Home Form</h1>
+	<Form :section-id="sectionId" :page-id="pageId" :form-id="formId" />
 </template>

From 9c03aed2c84fff7e04b20ab051dbfe4b804882bf Mon Sep 17 00:00:00 2001
From: Mykyta <mykytakasianenko@gmail.com>
Date: Sun, 23 Aug 2026 20:45:07 +0200
Subject: [PATCH 6/6] feat: add links

---
 client/src/components/page/FormButton.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/client/src/components/page/FormButton.vue b/client/src/components/page/FormButton.vue
index 939df28..26fa1c4 100644
--- a/client/src/components/page/FormButton.vue
+++ b/client/src/components/page/FormButton.vue
@@ -8,6 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 import { useColor } from "@/composables/colors"
 import { Button } from "@/components/ui/button"
 import { Icon } from "@iconify/vue"
+import { RouterLink } from "vue-router"
 import { useForm } from "@/composables/openadmin-form"
 
 const props = defineProps<{
@@ -24,8 +25,12 @@ const { style } = useColor(() => form.value?.color || "slate")
 </script>
 
 <template>
-	<Button v-if="form" size="sm" variant="outline">
-		<Icon v-if="form.icon" :icon="`lucide:${form.icon}`" :class="style.text" />
-		{{ form.name }}
+	<Button v-if="form" as-child size="sm" variant="outline">
+		<RouterLink
+			:to="{ name: 'form', params: { sectionId: props.sectionId, pageId: props.pageId, formId: props.formId } }"
+		>
+			<Icon v-if="form.icon" :icon="`lucide:${form.icon}`" :class="style.text" />
+			{{ form.name }}
+		</RouterLink>
 	</Button>
 </template>