+
+
+
+
+
Admin Panel
+
Manage users, groups, spaces, and identity providers.
+
+
+
+
+
+ {error &&
{error}
}
+ {successMessage &&
{successMessage}
}
+
+
+ {showMobileSidebar &&
setShowMobileSidebar(false)} />}
+
+
+
+
+ {/* ── Users ── */}
+ {activeTab === "users" && (
+
+
+
+
All Users
+
+
+ {loadingUsers ? (
+
Loading users…
+ ) : users.length === 0 ? (
+
No users found.
+ ) : (
+
+ {users.map((u) => (
+
+
+
+ {u.username}
+ {u.is_active ? "Active" : "Inactive"}
+
+
+
+
+
Joined
+
{formatDate(u.created_at)}
+
+
+
Groups
+
{getUserGroupSummary(u)}
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+ )}
+
+
+
Permission Groups
+
+
+
+
+
+ {loadingGroups ? (
+
Loading groups…
+ ) : groups.length === 0 ? (
+
No groups created yet.
+ ) : (
+
+ {groups.map((g) => (
+
+
+
+ {g.name}
+ {g.is_system && System}
+
+
{g.description || "No description"}
+
+ {(g.permissions || []).length} permission{(g.permissions || []).length === 1 ? "" : "s"}
+
+
+
+
+
+
+
+ ))}
+
+ )}
+
+
+
All Spaces
+
+
+ {loadingSpaces ? (
+
Loading spaces…
+ ) : spaces.length === 0 ? (
+
No spaces found.
+ ) : (
+
+ {spaces.map((s) => (
+
+
+
{s.name}
+
{s.description || "No description"}
+
+
+ {s.is_public ? "Public" : "Private"}
+
+
+
+ ))}
+
+ )}
+
+
+
Identity Providers
+
+
+
+
+
+ {loadingProviders ? (
+
Loading providers…
+ ) : providers.length === 0 ? (
+
No providers configured yet.
+ ) : (
+
+ {providers.map((p) => (
+
+
+
+ {p.name}
+
+
+
+ ))}
+
+ )}
+
+
+
Application Feature Flags
+
+
+ {loadingFeatureFlags ? (
+
Loading feature flags…
+ ) : (
+
+
setFeatureFlags((f) => ({ ...f, registration_enabled: v }))}
+ />
+ setFeatureFlags((f) => ({ ...f, provider_login_enabled: v }))}
+ />
+ setFeatureFlags((f) => ({ ...f, public_sharing_enabled: v }))}
+ />
+ {/* File Explorer with S3 config */}
+
+
+
+
Enable File Explorer
+
Allow users to browse and insert files from an S3 bucket directly into notes.
+
+
+ setFeatureFlags((f) => ({ ...f, file_explorer_enabled: e.target.checked }))}
+ />
+
+
+ {featureFlags.file_explorer_enabled && (
+
+
+
+ setFeatureFlags((f) => ({ ...f, s3_endpoint: e.target.value }))}
+ />
+
+
+
+ setFeatureFlags((f) => ({ ...f, s3_bucket: e.target.value }))}
+ />
+
+
+
+ setFeatureFlags((f) => ({ ...f, s3_region: e.target.value }))}
+ />
+
+
+
+ setFeatureFlags((f) => ({ ...f, s3_access_key: e.target.value }))}
+ />
+
+
+
+
setFeatureFlags((f) => ({ ...f, s3_secret_key: e.target.value }))}
+ />
+ {featureFlags.s3_secret_key_set && !featureFlags.s3_secret_key && (
+
+ Secret key is set
+
+ )}
+
+
+ )}
+
+
+
+
+ )}
+
+
+
+ {/* Modals */}
+ {showUserModal && selectedUser && (
+
{
+ setShowUserModal(false);
+ setSelectedUser(null);
+ }}
+ onSubmit={submitEditUser}
+ />
+ )}
+
+ {showGroupModal && (
+ {
+ setShowGroupModal(false);
+ setSelectedGroup(null);
+ }}
+ onSubmit={submitGroupModal}
+ />
+ )}
+
+ {showSpaceModal && selectedSpace && (
+ {
+ setShowSpaceModal(false);
+ setSelectedSpace(null);
+ }}
+ onSaved={onSpaceSaved}
+ onDeleted={onSpaceDeleted}
+ />
+ )}
+
+ {showProviderModal && (
+ {
+ setShowProviderModal(false);
+ setSelectedProvider(null);
+ }}
+ onSubmit={submitProviderModal}
+ onDelete={requestDeleteProvider}
+ />
+ )}
+
+
+
+ );
+}
+
+function FlagItem({ id, title, description, checked, onChange }: { id: string; title: string; description: string; checked: boolean; onChange: (v: boolean) => void }) {
+ return (
+
+
+
{title}
+
{description}
+
+
+ onChange(e.target.checked)} />
+
+
+ );
+}
diff --git a/frontend_new/src/app/dashboard/layout.tsx b/frontend_new/src/app/dashboard/layout.tsx
new file mode 100644
index 0000000..b567a95
--- /dev/null
+++ b/frontend_new/src/app/dashboard/layout.tsx
@@ -0,0 +1,167 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuthStore } from "@/stores/authStore";
+import { Space, useSpaceStore } from "@/stores/spaceStore";
+import Navbar from "@/components/Navbar";
+import Sidebar from "@/components/Sidebar";
+import SpaceSettingsModal from "@/components/SpaceSettingsModal";
+import apiClient from "@/lib/apiClient";
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+ const router = useRouter();
+ const ensureInitialized = useAuthStore((s) => s.ensureInitialized);
+ const fetchSpaces = useSpaceStore((s) => s.fetchSpaces);
+ const currentSpace = useSpaceStore((s) => s.currentSpace!);
+
+ const [authChecked, setAuthChecked] = useState(false);
+ const [showSidebar, setShowSidebar] = useState(false);
+ const navbarRef = useRef
(null);
+ const [navbarHeight, setNavbarHeight] = useState(56);
+
+ const [showCreateCategoryModal, setShowCreateCategoryModal] = useState(false);
+ const [showSpaceSettingsModal, setShowSpaceSettingsModal] = useState(false);
+
+ useEffect(() => {
+ const theme = localStorage.getItem("theme") === "dark" ? "dark" : "light";
+ document.documentElement.setAttribute("data-bs-theme", theme);
+
+ ensureInitialized().then(() => {
+ if (!useAuthStore.getState().user) {
+ router.replace("/login");
+ } else {
+ setAuthChecked(true);
+ fetchSpaces();
+ }
+ });
+ }, []);
+
+ useEffect(() => {
+ const el = navbarRef.current;
+ if (!el) return;
+ setNavbarHeight(el.offsetHeight);
+ const ro = new ResizeObserver(() => setNavbarHeight(el.offsetHeight));
+ ro.observe(el);
+ return () => ro.disconnect();
+ }, [authChecked]);
+
+ if (!authChecked) {
+ return (
+
+ );
+ }
+
+ function handleCreateCategory(name: string) {
+ apiClient.post(`/api/v1/spaces/${currentSpace?.id}/categories`, { name }).then(() => {
+ useSpaceStore.getState().fetchCategories(currentSpace?.id || "");
+ });
+ }
+
+ function handleSpaceSaved(_updatedSpace: Space) {
+ useSpaceStore.getState().fetchSpaces();
+ setShowSpaceSettingsModal(false);
+ }
+
+ function handleSpaceDeleted() {
+ useSpaceStore.getState().fetchSpaces();
+ setShowSpaceSettingsModal(false);
+ }
+
+ return (
+ <>
+
+
+
+
+ setShowSidebar(false)}
+ navbarHeight={navbarHeight}
+ onOpenCreateCategory={() => setShowCreateCategoryModal(true)}
+ onOpenSpaceSettings={() => setShowSpaceSettingsModal(true)}
+ />
+ {children}
+
+
e.target === e.currentTarget && onClose()}
+ >
+
+
+
+
Create Category
+
+
+
+
+
+ setCategoryName(e.target.value)}
+ onKeyDown={handleKeyDown}
+ autoFocus
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
No Spaces Yet
+
Create a space to start organising your notes.
+ {canCreateSpaces && (
+
+ )}
+
+
+
+
+
Select a space to get started
+
+
+
+
+
{currentSpace.name}
+
+
+
+ {/* Search results */}
+ {isSearch ? (
+
+
+ Search results for "{searchQuery}"
+ {!searchLoading && ` — ${searchResults.length} found`}
+
+ {searchLoading ? (
+
+ ) : searchResults.length === 0 ? (
+
No results found.
+ ) : (
+
+ {searchResults.map((note) => (
+ router.push(`/dashboard/spaces/${currentSpace.id}/notes/${note.id}`)}
+ />
+ ))}
+
+ )}
+
+ ) : notesLoading && notes.length === 0 ? (
+
+ ) : (
+
+ {/* Category sections */}
+ {flatCategories.map((cat) => {
+ const catNotes = notesByCategory[cat.id] ?? [];
+ const catTaskLists = taskListsByCategory[cat.id] ?? [];
+ return (
+
router.push(`/dashboard/spaces/${currentSpace.id}/notes/${id}`)}
+ onTaskListClick={(id) => router.push(`/dashboard/spaces/${currentSpace.id}/tasklists/${id}`)}
+ onNewNote={() => router.push(`/dashboard/spaces/${currentSpace.id}/notes/new?categoryId=${cat.id}`)}
+ onNewTaskList={() => router.push(`/dashboard/spaces/${currentSpace.id}/tasklists/new?categoryId=${cat.id}`)}
+ />
+ );
+ })}
+
+ {/* Uncategorized section — only show if there are items */}
+ {(uncategorizedNotes.length > 0 || uncategorizedTaskLists.length > 0) && (
+ router.push(`/dashboard/spaces/${currentSpace.id}/notes/${id}`)}
+ onTaskListClick={(id) => router.push(`/dashboard/spaces/${currentSpace.id}/tasklists/${id}`)}
+ onNewNote={() => router.push(`/dashboard/spaces/${currentSpace.id}/notes/new`)}
+ onNewTaskList={() => router.push(`/dashboard/spaces/${currentSpace.id}/tasklists/new`)}
+ />
+ )}
+
+ {/* Empty space */}
+ {flatCategories.length === 0 && uncategorizedNotes.length === 0 && uncategorizedTaskLists.length === 0 && (
+
+
+
No content yet. Create a category in the sidebar to get started.
+
+
+
+ )}
+
+ )}
+
+
+
+
+ {category?.name ?? "Uncategorized"}
+
+
+
+
+ {notes.map((note) => (
+ onNoteClick(note.id)} />
+ ))}
+ {taskLists.map((tl) => (
+ onTaskListClick(tl.id)} />
+ ))}
+ {canCreateNotes && (
+
+ )}
+ {canCreateTasklists && (
+
+ )}
+
+
+
+
+
+
+ {note.is_password_protected && }
+ {note.title || "Untitled"}
+
+
{new Date(note.updated_at).toLocaleDateString()}
+
+
+
+
+
{taskList.name}
+ {taskList.description &&
{taskList.description.slice(0, 60)}
}
+
+
{error}
+
+
+ {/* Toolbar */}
+
+
+
+
+
+ {saveStatus === "saved" ? "Saved" : saveStatus === "saving" ? "Saving…" : "Unsaved"}
+
+
+
+ {/* Title */}
+
{
+ setTitle(e.target.value);
+ scheduleSave();
+ }}
+ maxLength={255}
+ />
+
+ {/* Description */}
+