feat: ✨ move org name and logo to db

frontend/src/api.ts

@@ -399,6 +399,14 @@ export const api = {
     );
     return d.items;
   },
+  async settings() {
+    return handle<{ org_name: string; org_logo: string }>(await fetchApi("/api/v2/settings"));
+  },
+  async updateSettings(body: { org_name: string; org_logo: string }) {
+    return handle<{ org_name: string; org_logo: string; org?: { name: string; logo: string } }>(
+      await fetchApi("/api/v2/settings", { method: "PUT", headers: jsonHeaders, body: JSON.stringify(body) }),
+    );
+  },
   async customFields(entityType: string) {
     const d = await handle<{ items: CustomFieldDef[] }>(await fetchApi(`/api/v2/custom_fields/${entityType}`));
     return d.items;

frontend/src/components/AppLayout.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from "vue";
 import { RouterLink, RouterView, useRoute, useRouter } from "vue-router";
-import { Menu, Search, X, Home, Server, Grid3x3, Settings, Users, Tag, Layers, FileText, User, Network } from "lucide-vue-next";
+import { Menu, Search, X, Home, Server, Grid3x3, Settings, SlidersHorizontal, Users, Tag, Layers, FileText, User, Network } from "lucide-vue-next";
 import { useAuthStore } from "@/stores/auth";
 import { api } from "@/api";
 
@@ -27,6 +27,7 @@ const nav = computed(() =>
     { to: "/audit", label: "Audit", icon: FileText, perm: "view_audit" },
     { to: "/subnets/manage", label: "Subnet Management", icon: Settings, perm: "view_admin" },
     { to: "/users", label: "Users", icon: Users, perm: "view_users" },
+    { to: "/settings", label: "Settings", icon: SlidersHorizontal, perm: "view_settings" },
     { to: "/custom-fields", label: "Fields", icon: Layers, perm: "view_custom_fields" },
     { to: "/account", label: "Account", icon: User, perm: null },
   ].filter((n) => !n.perm || auth.can(n.perm)),

frontend/src/router/index.ts

@@ -28,6 +28,7 @@ const router = createRouter({
         { path: "subnets/manage", name: "subnet-management", component: () => import("@/views/SubnetsView.vue") },
         { path: "admin", redirect: "/subnets/manage" },
         { path: "users", name: "users", component: () => import("@/views/UsersView.vue") },
+        { path: "settings", name: "settings", component: () => import("@/views/SettingsView.vue") },
         { path: "account", name: "account", component: () => import("@/views/AccountView.vue") },
       ],
     },

frontend/src/views/SettingsView.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { api } from "@/api";
+import { useAuthStore } from "@/stores/auth";
+
+const auth = useAuthStore();
+const form = ref({ org_name: "", org_logo: "" });
+const msg = ref("");
+const err = ref("");
+const busy = ref(false);
+
+async function load() {
+  const data = await api.settings();
+  form.value = { org_name: data.org_name, org_logo: data.org_logo };
+}
+
+onMounted(load);
+
+async function save() {
+  err.value = "";
+  msg.value = "";
+  busy.value = true;
+  try {
+    const data = await api.updateSettings(form.value);
+    form.value = { org_name: data.org_name, org_logo: data.org_logo };
+    if (data.org) auth.org = data.org;
+    else await auth.fetchMe();
+    msg.value = "Settings saved";
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "Failed";
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+
+<template>
+  <div>
+    <h1 class="text-2xl font-bold">Settings</h1>
+    <p class="mt-1 text-sm text-slate-500">Configure organisation branding shown in the header and browser tab.</p>
+
+    <form class="card mt-6 max-w-lg space-y-4" @submit.prevent="save">
+      <div>
+        <label class="mb-1 block text-xs font-medium uppercase tracking-wide text-slate-500">Organisation name</label>
+        <input v-model="form.org_name" class="input-field" placeholder="Your Organisation" />
+        <p class="mt-1 text-xs text-slate-500">Shown as “{{ form.org_name || "Organisation" }} IPAM” in the sidebar.</p>
+      </div>
+
+      <div>
+        <label class="mb-1 block text-xs font-medium uppercase tracking-wide text-slate-500">Logo URL</label>
+        <input v-model="form.org_logo" class="input-field font-mono text-sm" placeholder="https://example.com/logo.png" />
+        <p class="mt-1 text-xs text-slate-500">URL or path to a PNG logo. Also used as the favicon.</p>
+      </div>
+
+      <div v-if="form.org_logo" class="rounded-lg border border-slate-200 p-4 dark:border-slate-700">
+        <p class="mb-2 text-xs font-medium uppercase tracking-wide text-slate-500">Preview</p>
+        <img :src="form.org_logo" alt="" class="h-10 rounded" @error="($event.target as HTMLImageElement).style.display = 'none'" />
+      </div>
+
+      <div v-if="auth.can('manage_settings')" class="flex flex-wrap items-center gap-3">
+        <button type="submit" class="btn-primary" :disabled="busy">{{ busy ? "Saving…" : "Save" }}</button>
+        <p v-if="msg" class="text-sm text-accent">{{ msg }}</p>
+        <p v-if="err" class="text-sm text-red-500">{{ err }}</p>
+      </div>
+      <p v-else class="text-sm text-slate-500">You can view settings but do not have permission to change them.</p>
+    </form>
+  </div>
+</template>