diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index c0b1410..396a9cd 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -1,9 +1,6 @@ name: CI on: - push: - branches: - - development pull_request: branches: - main diff --git a/apps/web/package.json b/apps/web/package.json index b6a5ebe..c79f20f 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -16,6 +16,7 @@ "fullclean": "rm -rf dist .next .turbo node_modules" }, "dependencies": { + "@repo/types": "workspace:*", "@auth/drizzle-adapter": "^1.8.0", "@codemirror/collab": "^6.1.1", "@codemirror/lang-markdown": "^6.3.2", @@ -34,6 +35,7 @@ "@tailwindcss/typography": "^0.5.16", "@tanstack/react-query": "^5.74.4", "@tanstack/react-query-devtools": "^5.74.4", + "@tanstack/react-table": "^8.21.3", "@trpc/client": "^11.1.0", "@trpc/next": "^11.1.0", "@trpc/react-query": "^11.1.0", @@ -58,6 +60,7 @@ "pg": "^8.14.1", "react": "^19.1.0", "react-dom": "^19.1.0", + "react-intersection-observer": "^9.16.0", "react-markdown": "^10.1.0", "react-syntax-highlighter": "^15.6.1", "rehype-highlight": "^7.0.2", diff --git a/apps/web/src/app/(auth)/login/login-page.tsx b/apps/web/src/app/(auth)/login/login-page.tsx new file mode 100644 index 0000000..afe9c2b --- /dev/null +++ b/apps/web/src/app/(auth)/login/login-page.tsx @@ -0,0 +1,54 @@ +"use client"; + +import { LoginForm } from "~/components/auth/LoginForm"; +import { Suspense, useEffect } from "react"; +import { useRouter } from "next/navigation"; +import { usePermissions } from "~/components/auth/permission/client"; +import { Button } from "@repo/ui"; +import { ArrowLeftIcon } from "lucide-react"; + +export default function LoginPage() { + const router = useRouter(); + const { isAuthenticated, hasPermission } = usePermissions(); + + useEffect(() => { + if (isAuthenticated) { + router.push("/"); + } + }, [isAuthenticated, router]); + + const hasWikiReadPermission = hasPermission("wiki:page:read"); + + return ( +
+
+
+

+ Sign in to NextWiki +

+ {!hasWikiReadPermission && ( +

+ This is a private wiki. You need to be logged in to access it. +

+ )} +
+ + Loading login form...
}> + + +
+ + {/* Show the back to home button if the user has the wiki:page:read permission, otherwise they will be redirected back here so no need to show it */} + {hasWikiReadPermission && ( + + )} + + ); +} diff --git a/apps/web/src/app/(auth)/register/page.tsx b/apps/web/src/app/(auth)/register/page.tsx index ecb7a1a..f856c11 100644 --- a/apps/web/src/app/(auth)/register/page.tsx +++ b/apps/web/src/app/(auth)/register/page.tsx @@ -1,25 +1,26 @@ -"use client"; +import RegisterClientPage from "./register-page"; +import { getSettingValue } from "~/lib/utils/settings"; -import { ArrowLeftIcon } from "lucide-react"; -import { useRouter } from "next/navigation"; -import { useEffect } from "react"; -import { RegisterForm } from "~/components/auth/RegisterForm"; -import { usePermissions } from "~/components/auth/permission/client"; -import { Button } from "@repo/ui"; - -export default function RegisterPage({ +export default async function RegisterPage({ isFirstUser = false, }: { isFirstUser?: boolean; }) { - const router = useRouter(); - const { isAuthenticated } = usePermissions(); + const allowRegistration = await getSettingValue("auth.allowRegistration"); - useEffect(() => { - if (isAuthenticated) { - router.push("/"); - } - }, [isAuthenticated, router]); + if (!allowRegistration) { + return ( +
+
+
+

+ Registration is not allowed +

+
+
+
+ ); + } return (
@@ -34,18 +35,8 @@ export default function RegisterPage({

)}
- - - - + ); } diff --git a/apps/web/src/app/(auth)/register/register-page.tsx b/apps/web/src/app/(auth)/register/register-page.tsx new file mode 100644 index 0000000..4ec589a --- /dev/null +++ b/apps/web/src/app/(auth)/register/register-page.tsx @@ -0,0 +1,38 @@ +"use client"; + +import { ArrowLeftIcon } from "lucide-react"; +import { useRouter } from "next/navigation"; +import { useEffect } from "react"; +import { RegisterForm } from "~/components/auth/RegisterForm"; +import { usePermissions } from "~/components/auth/permission/client"; +import { Button } from "@repo/ui"; + +export default function RegisterClientPage({ + isFirstUser = false, +}: { + isFirstUser?: boolean; +}) { + const router = useRouter(); + const { isAuthenticated } = usePermissions(); + + useEffect(() => { + if (isAuthenticated) { + router.push("/"); + } + }, [isAuthenticated, router]); + + return ( + <> + + + + + ); +} diff --git a/apps/web/src/app/admin/assets/page.tsx b/apps/web/src/app/admin/assets/page.tsx index d2dd008..e20a776 100644 --- a/apps/web/src/app/admin/assets/page.tsx +++ b/apps/web/src/app/admin/assets/page.tsx @@ -14,6 +14,17 @@ import { SelectValue, } from "@repo/ui"; +/* TODO: A lot to be done here and for assets in general + * - Add pagination URGENT + * - Add search + * - Add filter by file type + * - Add filter by uploaded by + * - Add filter by page + * - Add filter by date + * - Implement preview for images + * - Implement download + */ + export default function AssetsAdminPage() { const notification = useNotification(); const [searchTerm, setSearchTerm] = useState(""); @@ -69,7 +80,7 @@ export default function AssetsAdminPage() { : []; return ( -
+

Asset Management

{/* Search and filter controls */} diff --git a/apps/web/src/app/admin/dashboard/page.tsx b/apps/web/src/app/admin/dashboard/page.tsx index 634c36c..fa04c0e 100644 --- a/apps/web/src/app/admin/dashboard/page.tsx +++ b/apps/web/src/app/admin/dashboard/page.tsx @@ -1,19 +1,24 @@ "use client"; -import { Card } from "@repo/ui"; +import { Card, Skeleton, Button } from "@repo/ui"; import { useTRPC } from "~/server/client"; import { useQuery } from "@tanstack/react-query"; import type { AppRouter } from "~/server/routers"; +import Link from "next/link"; +import { formatDistanceToNow } from "date-fns"; // Define type for the stats object returned by the API type SystemStatsQueryProcedure = AppRouter["admin"]["system"]["getStats"]; type SystemStats = Awaited>; +// SystemStats type is now automatically inferred to include lockedPagesCount and activeSessionCount // Define type for the static part, adding a key to link to API data interface StaticStatData { title: string; icon: React.ReactNode; - key: keyof SystemStats; // Key to match the field in SystemStats + // Key type now includes activeSessionCount + key: keyof Omit; + link?: string; // Optional link for the card } // TODO: Make stats clickable and redirect to the respective page @@ -23,6 +28,7 @@ const staticStatsData: StaticStatData[] = [ { title: "Total Pages", key: "pageCount", + link: "/admin/wiki", icon: ( ), }, + // Add new stat for active sessions + { + title: "Active Sessions", + key: "activeSessionCount", + icon: ( + + + + + ), + }, ]; +// New HealthCheckItem component +function HealthCheckItem({ + label, + status, + isLoading, + error, + onRefresh, +}: { + label: string; + // Update status type to match systemService + status?: "healthy" | "unhealthy" | "pending" | "not-implemented" | "error"; + isLoading: boolean; + error?: string | null; + onRefresh?: () => void; +}) { + const getStatusIndicator = () => { + if (isLoading) { + return Checking...; + } + // Use the error prop directly + if (error) { + // Display the error message if available + return ( + + Error + + ); + } + switch (status) { + case "healthy": + return Healthy; + case "unhealthy": + case "error": // Treat 'error' status similar to 'unhealthy' + return Unhealthy; + case "not-implemented": + return Not Implemented; + case "pending": // Handle 'pending' status explicitly + default: + return Pending...; + } + }; + + return ( +
+ {label} +
+ {getStatusIndicator()} + {onRefresh && ( + + )} +
+
+ ); +} + export default function AdminDashboardPage() { - // Fetch system stats using tRPC and TanStack Query const trpc = useTRPC(); + + // Query for System Stats const { data: statsData, - isLoading, - error, + isLoading: isLoadingStats, + error: statsError, + refetch: refetchStats, } = useQuery(trpc.admin.system.getStats.queryOptions()); - // Handle error state - if (error) { + // Query for Recent Pages + const recentPagesQueryOptions = trpc.admin.wiki.list.queryOptions( + { limit: 5, sortBy: "updatedAt", sortOrder: "desc" }, + { select: (data) => data.items } // Select only the items array + ); + const { + data: recentPages, + isLoading: isLoadingPages, + error: pagesError, + } = useQuery(recentPagesQueryOptions); + + // NEW: Query for Locked Pages + const lockedPagesQueryOptions = trpc.admin.wiki.listLocked.queryOptions( + { limit: 5 }, // Fetch top 5 locked pages for the dashboard + { + // Optional: configure refetch behavior if needed + // refetchOnWindowFocus: false, + } + ); + const { + data: lockedPages, + isLoading: isLoadingLockedPages, + error: lockedPagesError, + } = useQuery(lockedPagesQueryOptions); + + // Handle error state for stats + if (statsError) { return ( -
Error loading system stats: {error.message}. Check permissions.
+
+ Error loading system stats: {statsError.message}. Check permissions. +
); } + // Handle error state for pages + if (pagesError) { + // Log or display the error, but allow the rest of the dashboard to render + console.error("Error loading recent pages:", pagesError.message); + } + + // Handle error state for locked pages (log it, maybe show message in card) + if (lockedPagesError) { + console.error("Error loading locked pages:", lockedPagesError.message); + // Decide if you want to stop rendering or show an error in the card + } return ( -
+

Admin Dashboard

Overview of your NextWiki system

-
+
{staticStatsData.map((statDef) => ( - -
-
- {statDef.icon} -
-
-

- {statDef.title} -

-

- {isLoading || !statsData ? ( - - ) : ( - statsData[statDef.key] - )} -

+ + +
+
+ {statDef.icon} +
+
+

+ {statDef.title} +

+

+ {isLoadingStats || !statsData ? ( + + ) : ( + statsData[statDef.key] + )} +

+
-
- + + ))}
-
+

Recent Pages

- {isLoading ? ( + {isLoadingPages ? (
- {[...Array(3)].map((_, i) => ( -
+ {[...Array(5)].map((_, i) => ( +
+ + +
))}
+ ) : pagesError ? ( +

+ Failed to load recent pages. +

+ ) : recentPages && recentPages.length > 0 ? ( +
    + {recentPages.map((page) => ( +
  • + + {page.title} + + + {page.updatedAtRelative} + +
    • + ))} +
) : ( +

No pages found.

+ )} + + + +

Pages Being Edited

+ {isLoadingLockedPages ? (
-

- Recent page activity will be shown here -

+ {[...Array(5)].map((_, i) => ( +
+ + +
+ ))}
+ ) : lockedPagesError ? ( +

+ Failed to load locked pages. +

+ ) : lockedPages && lockedPages.length > 0 ? ( +
    + {lockedPages.map((page) => ( +
  • + + {page.title} + + + Locked by {page.lockedBy?.name || "Unknown User"}{" "} + {page.lockedAtRelative} + +
    • + ))} +
+ ) : ( +

+ No pages are currently being edited. +

)}

System Health

- {isLoading ? ( + {isLoadingStats ? (
{[...Array(3)].map((_, i) => ( -
+
+ + +
))}
) : (
-
- Database - Healthy -
-
- Storage - Healthy -
-
- Cache - Healthy -
+ { + refetchStats(); + }} + /> + +
)} diff --git a/apps/web/src/app/admin/groups/[id]/edit/page.tsx b/apps/web/src/app/admin/groups/[id]/edit/page.tsx index d7a3e22..9ec6c1e 100644 --- a/apps/web/src/app/admin/groups/[id]/edit/page.tsx +++ b/apps/web/src/app/admin/groups/[id]/edit/page.tsx @@ -4,6 +4,9 @@ import { redirect } from "next/navigation"; import { dbService } from "~/lib/services"; import GroupForm from "../../group-form"; import { notFound } from "next/navigation"; +import { ArrowLeft } from "lucide-react"; +import { Button } from "@repo/ui"; +import Link from "next/link"; interface EditGroupPageProps { params: { @@ -14,17 +17,23 @@ interface EditGroupPageProps { export async function generateMetadata({ params, }: EditGroupPageProps): Promise { - const group = await dbService.groups.getById(parseInt(params.id)); + const groupId = parseInt((await params).id); + if (isNaN(groupId)) { + return { title: "Invalid Group | NextWiki" }; + } + const group = await dbService.groups.getById(groupId); return { title: `Edit ${group?.name ?? "Group"} | NextWiki`, description: "Edit user group settings and permissions", }; } -export default async function EditGroupPage( - propsPromise: Promise -) { - const { params } = await propsPromise; +export default async function EditGroupPage({ params }: EditGroupPageProps) { + const groupId = parseInt((await params).id); + if (isNaN(groupId)) { + notFound(); + } + const session = await getServerAuthSession(); // Redirect if not logged in @@ -37,33 +46,44 @@ export default async function EditGroupPage( redirect("/"); } - const group = await dbService.groups.getById(parseInt(params.id)); + const group = await dbService.groups.getById(groupId); if (!group) { notFound(); } - // Get all permissions - const permissions = await dbService.permissions.getAll(); + // Get all permissions (already includes module and action names) + const fetchedPermissions = await dbService.permissions.getAll(); + + // Transform permissions to include the synthesized 'name' expected by GroupForm + const permissionsForForm = fetchedPermissions.map((p) => ({ + ...p, + name: `${p.module.name}:${p.resource}:${p.action.name}`, // Synthesize the name + })); // Get group permissions - const groupPermissions = await dbService.groups.getGroupPermissions(group.id); + const groupPermissions = await dbService.groups.getGroupPermissions(groupId); const groupPermissionIds = groupPermissions.map((p) => p.id); // Get module permissions - const modulePermissions = await dbService.groups.getModulePermissions( - group.id - ); - const modulePermissionModules = modulePermissions.map((p) => p.module); + const modulePermissions = + await dbService.groups.getModulePermissions(groupId); + const initialSelectedModuleIds = modulePermissions.map((p) => p.moduleId); // Get action permissions - const actionPermissions = await dbService.groups.getActionPermissions( - group.id - ); - const actionPermissionActions = actionPermissions.map((p) => p.action); + const actionPermissions = + await dbService.groups.getActionPermissions(groupId); + const initialSelectedActionIds = actionPermissions.map((p) => p.actionId); return (
-

Edit Group

+
+ + + +

Edit Group: {group.name}

+

@@ -82,10 +102,10 @@ export default async function EditGroupPage( ? undefined : group.allowUserAssignment, }} - permissions={permissions} + permissions={permissionsForForm} groupPermissions={groupPermissionIds} - groupModulePermissions={modulePermissionModules} - groupActionPermissions={actionPermissionActions} + initialSelectedModuleIds={initialSelectedModuleIds} + initialSelectedActionIds={initialSelectedActionIds} />

diff --git a/apps/web/src/app/admin/groups/[id]/users/add-users-modal.tsx b/apps/web/src/app/admin/groups/[id]/users/add-users-modal.tsx index d8b0701..38b732a 100644 --- a/apps/web/src/app/admin/groups/[id]/users/add-users-modal.tsx +++ b/apps/web/src/app/admin/groups/[id]/users/add-users-modal.tsx @@ -131,7 +131,7 @@ export default function AddUsersModal({
- +
) : filteredUsers && filteredUsers.length > 0 ? ( -
+
- + @@ -159,7 +159,10 @@ export default function AddUsersModal({ {filteredUsers.map((user) => ( - +
Name Email
; }) { + const { id } = await params; const session = await getServerAuthSession(); // Redirect if not logged in @@ -30,7 +31,7 @@ export default async function GroupUsersPage({ redirect("/"); } - const groupId = parseInt(params.id); + const groupId = parseInt(id); const group = await dbService.groups.getById(groupId); if (!group) { @@ -61,10 +62,10 @@ export default async function GroupUsersPage({

{users.length > 0 ? ( -
+
- + @@ -72,7 +73,7 @@ export default async function GroupUsersPage({ {users.map((user) => ( - +
Name Email Actions
{user.name} {user.email} diff --git a/apps/web/src/app/admin/groups/group-form.tsx b/apps/web/src/app/admin/groups/group-form.tsx index 9d4888d..050eb79 100644 --- a/apps/web/src/app/admin/groups/group-form.tsx +++ b/apps/web/src/app/admin/groups/group-form.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import { useRouter } from "next/navigation"; import { Button, @@ -29,34 +29,39 @@ interface GroupFormProps { }; permissions: { id: number; - name: string; description: string | null; - module: string; + moduleId: number; resource: string; - action: string; + actionId: number; + module?: { name: string }; + action?: { name: string }; }[]; groupPermissions?: number[]; - groupModulePermissions?: string[]; - groupActionPermissions?: string[]; + initialSelectedModuleIds?: number[]; + initialSelectedActionIds?: number[]; + initialSelectedModuleNames?: string[]; + initialSelectedActionNames?: string[]; } export default function GroupForm({ group, permissions, groupPermissions = [], - groupModulePermissions = [], - groupActionPermissions = [], + initialSelectedModuleIds, + initialSelectedActionIds, + initialSelectedModuleNames = [], + initialSelectedActionNames = [], }: GroupFormProps) { const router = useRouter(); const [name, setName] = useState(group?.name ?? ""); const [description, setDescription] = useState(group?.description ?? ""); const [selectedPermissions, setSelectedPermissions] = useState(groupPermissions); - const [selectedModules, setSelectedModules] = useState( - groupModulePermissions + const [selectedModules, setSelectedModules] = useState( + initialSelectedModuleIds ?? [] ); - const [selectedActions, setSelectedActions] = useState( - groupActionPermissions + const [selectedActions, setSelectedActions] = useState( + initialSelectedActionIds ?? [] ); const isSystem = group?.isSystem ?? false; @@ -66,13 +71,60 @@ export default function GroupForm({ const trpc = useTRPC(); // Fetch available modules and actions - const { data: availableModules = [] } = useQuery( + const { data: availableModules = [], isLoading: modulesLoading } = useQuery( trpc.admin.permissions.getModules.queryOptions() ); - const { data: availableActions = [] } = useQuery( + const { data: availableActions = [], isLoading: actionsLoading } = useQuery( trpc.admin.permissions.getActions.queryOptions() ); + // Effect to initialize selected IDs from names once data is loaded + useEffect(() => { + if ( + !modulesLoading && + Array.isArray(availableModules) && + initialSelectedModuleNames.length > 0 && + availableModules.length > 0 && + selectedModules.length === 0 + ) { + const moduleNameToIdMap = new Map( + availableModules.map((m) => [m.name, m.id]) + ); + const ids = initialSelectedModuleNames + .map((name) => moduleNameToIdMap.get(name)) + .filter((id): id is number => id !== undefined); + setSelectedModules(ids); + } + }, [ + modulesLoading, + availableModules, + initialSelectedModuleNames, + selectedModules, + ]); + + useEffect(() => { + if ( + !actionsLoading && + Array.isArray(availableActions) && + initialSelectedActionNames.length > 0 && + availableActions.length > 0 && + selectedActions.length === 0 + ) { + const actionNameToIdMap = new Map( + availableActions.map((a) => [a.name, a.id]) + ); + const ids = initialSelectedActionNames + .map((name) => actionNameToIdMap.get(name)) + .filter((id): id is number => id !== undefined); + setSelectedActions(ids); + } + }, [ + actionsLoading, + availableActions, + initialSelectedActionNames, + selectedActions, + ]); + const createGroup = useMutation( trpc.admin.groups.create.mutationOptions({ onSuccess: () => { @@ -162,19 +214,13 @@ export default function GroupForm({ // Update module permissions await addModulePermissions.mutateAsync({ groupId: updatedGroup.id, - permissions: selectedModules.map((module) => ({ - module, - isAllowed: true, - })), + moduleIds: selectedModules, }); // Update action permissions await addActionPermissions.mutateAsync({ groupId: updatedGroup.id, - permissions: selectedActions.map((action) => ({ - action, - isAllowed: true, - })), + actionIds: selectedActions, }); } else { // Create new group @@ -196,19 +242,13 @@ export default function GroupForm({ // Add module permissions await addModulePermissions.mutateAsync({ groupId: newGroup.id, - permissions: selectedModules.map((module) => ({ - module, - isAllowed: true, - })), + moduleIds: selectedModules, }); // Add action permissions await addActionPermissions.mutateAsync({ groupId: newGroup.id, - permissions: selectedActions.map((action) => ({ - action, - isAllowed: true, - })), + actionIds: selectedActions, }); } } catch (error) { @@ -219,10 +259,17 @@ export default function GroupForm({ // Group permissions by module const permissionsByModule = permissions.reduce( (acc, permission) => { - if (!acc[permission.module]) { - acc[permission.module] = []; + if (!permission.module) { + return acc; + } + if (!acc[permission.module.name]) { + acc[permission.module.name] = []; } - acc[permission.module]?.push(permission); + const moduleKey = permission.module.name; + if (!acc[moduleKey]) { + acc[moduleKey] = []; + } + acc[moduleKey]?.push(permission); return acc; }, {} as Record @@ -235,14 +282,14 @@ export default function GroupForm({ // If no actions are selected, all actions are allowed if (selectedActions.length === 0) return true; // Otherwise, check if the action is allowed - return selectedActions.includes(permission.action); + return selectedActions.includes(permission.actionId); } // If modules are selected, check if the module is allowed - if (!selectedModules.includes(permission.module)) return false; + if (!selectedModules.includes(permission.moduleId)) return false; // If actions are selected, check if the action is allowed if ( selectedActions.length > 0 && - !selectedActions.includes(permission.action) + !selectedActions.includes(permission.actionId) ) return false; return true; @@ -275,7 +322,7 @@ export default function GroupForm({ /> {isSystem && ( -
+

This is a system group

You can manage permissions for this group, but the name and @@ -284,7 +331,7 @@ export default function GroupForm({

)} {name === "Administrators" && ( -
+

Administrator Group

The Administrators group has full access to all system features by @@ -297,7 +344,7 @@ export default function GroupForm({

{/* Main permissions area */}
-
+

Permissions

{Object.entries(permissionsByModule).map( @@ -342,7 +389,7 @@ export default function GroupForm({