feat(web): add workspace management UI (M2 #12)
- Create workspace listing page at /settings/workspaces - List all user workspaces with role badges - Create new workspace functionality - Display member count per workspace - Create workspace detail page at /settings/workspaces/[id] - Workspace settings (name, ID, created date) - Member management with role editing - Invite member functionality - Delete workspace (owner only) - Add workspace components: - WorkspaceCard: Display workspace info with role badge - WorkspaceSettings: Edit workspace settings and delete - MemberList: Display and manage workspace members - InviteMember: Send invitations with role selection - Add WorkspaceMemberWithUser type to shared package - Follow existing app patterns for styling and structure - Use mock data (ready for API integration)
This commit is contained in:
Jason Woltje
171
apps/web/src/lib/api/knowledge.ts
Normal file
171
apps/web/src/lib/api/knowledge.ts
Normal file
@@ -0,0 +1,171 @@
|
||||
/**
|
||||
* Knowledge API Client
|
||||
* Handles knowledge entry-related API requests
|
||||
*/
|
||||
|
||||
import type { KnowledgeEntryWithTags, KnowledgeTag } from "@mosaic/shared";
|
||||
import { EntryStatus } from "@mosaic/shared";
|
||||
import { apiGet, type ApiResponse } from "./client";
|
||||
|
||||
export interface EntryFilters {
|
||||
status?: EntryStatus;
|
||||
tag?: string;
|
||||
page?: number;
|
||||
limit?: number;
|
||||
search?: string;
|
||||
sortBy?: "updatedAt" | "createdAt" | "title";
|
||||
sortOrder?: "asc" | "desc";
|
||||
}
|
||||
|
||||
export interface EntriesResponse {
|
||||
data: KnowledgeEntryWithTags[];
|
||||
meta?: {
|
||||
total?: number;
|
||||
page?: number;
|
||||
limit?: number;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch knowledge entries with optional filters
|
||||
*/
|
||||
export async function fetchEntries(filters?: EntryFilters): Promise<EntriesResponse> {
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (filters?.status) {
|
||||
params.append("status", filters.status);
|
||||
}
|
||||
if (filters?.tag) {
|
||||
params.append("tag", filters.tag);
|
||||
}
|
||||
if (filters?.page) {
|
||||
params.append("page", filters.page.toString());
|
||||
}
|
||||
if (filters?.limit) {
|
||||
params.append("limit", filters.limit.toString());
|
||||
}
|
||||
|
||||
const queryString = params.toString();
|
||||
const endpoint = queryString ? `/api/knowledge/entries?${queryString}` : "/api/knowledge/entries";
|
||||
|
||||
const response = await apiGet<EntriesResponse>(endpoint);
|
||||
return response;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch all knowledge tags
|
||||
*/
|
||||
export async function fetchTags(): Promise<KnowledgeTag[]> {
|
||||
const response = await apiGet<ApiResponse<KnowledgeTag[]>>("/api/knowledge/tags");
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Mock entries for development (until backend endpoints are ready)
|
||||
*/
|
||||
export const mockEntries: KnowledgeEntryWithTags[] = [
|
||||
{
|
||||
id: "entry-1",
|
||||
workspaceId: "workspace-1",
|
||||
slug: "getting-started",
|
||||
title: "Getting Started with Mosaic Stack",
|
||||
content: "# Getting Started\n\nWelcome to Mosaic Stack...",
|
||||
contentHtml: "<h1>Getting Started</h1><p>Welcome to Mosaic Stack...</p>",
|
||||
summary: "A comprehensive guide to getting started with the Mosaic Stack platform.",
|
||||
status: EntryStatus.PUBLISHED,
|
||||
visibility: "PUBLIC" as const,
|
||||
createdBy: "user-1",
|
||||
updatedBy: "user-1",
|
||||
createdAt: new Date("2026-01-20"),
|
||||
updatedAt: new Date("2026-01-28"),
|
||||
tags: [
|
||||
{ id: "tag-1", workspaceId: "workspace-1", name: "Tutorial", slug: "tutorial", color: "#3B82F6", createdAt: new Date(), updatedAt: new Date() },
|
||||
{ id: "tag-2", workspaceId: "workspace-1", name: "Onboarding", slug: "onboarding", color: "#10B981", createdAt: new Date(), updatedAt: new Date() },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "entry-2",
|
||||
workspaceId: "workspace-1",
|
||||
slug: "architecture-overview",
|
||||
title: "Architecture Overview",
|
||||
content: "# Architecture\n\nThe Mosaic Stack architecture...",
|
||||
contentHtml: "<h1>Architecture</h1><p>The Mosaic Stack architecture...</p>",
|
||||
summary: "Overview of the system architecture and design patterns used in Mosaic Stack.",
|
||||
status: EntryStatus.PUBLISHED,
|
||||
visibility: "WORKSPACE" as const,
|
||||
createdBy: "user-1",
|
||||
updatedBy: "user-1",
|
||||
createdAt: new Date("2026-01-15"),
|
||||
updatedAt: new Date("2026-01-27"),
|
||||
tags: [
|
||||
{ id: "tag-3", workspaceId: "workspace-1", name: "Architecture", slug: "architecture", color: "#8B5CF6", createdAt: new Date(), updatedAt: new Date() },
|
||||
{ id: "tag-4", workspaceId: "workspace-1", name: "Technical", slug: "technical", color: "#F59E0B", createdAt: new Date(), updatedAt: new Date() },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "entry-3",
|
||||
workspaceId: "workspace-1",
|
||||
slug: "api-documentation-draft",
|
||||
title: "API Documentation (Draft)",
|
||||
content: "# API Docs\n\nWork in progress...",
|
||||
contentHtml: "<h1>API Docs</h1><p>Work in progress...</p>",
|
||||
summary: "Comprehensive API documentation for developers.",
|
||||
status: EntryStatus.DRAFT,
|
||||
visibility: "PRIVATE" as const,
|
||||
createdBy: "user-1",
|
||||
updatedBy: "user-1",
|
||||
createdAt: new Date("2026-01-29"),
|
||||
updatedAt: new Date("2026-01-29"),
|
||||
tags: [
|
||||
{ id: "tag-4", workspaceId: "workspace-1", name: "Technical", slug: "technical", color: "#F59E0B", createdAt: new Date(), updatedAt: new Date() },
|
||||
{ id: "tag-5", workspaceId: "workspace-1", name: "API", slug: "api", color: "#EF4444", createdAt: new Date(), updatedAt: new Date() },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "entry-4",
|
||||
workspaceId: "workspace-1",
|
||||
slug: "deployment-guide",
|
||||
title: "Deployment Guide",
|
||||
content: "# Deployment\n\nHow to deploy Mosaic Stack...",
|
||||
contentHtml: "<h1>Deployment</h1><p>How to deploy Mosaic Stack...</p>",
|
||||
summary: "Step-by-step guide for deploying Mosaic Stack to production.",
|
||||
status: EntryStatus.PUBLISHED,
|
||||
visibility: "WORKSPACE" as const,
|
||||
createdBy: "user-1",
|
||||
updatedBy: "user-1",
|
||||
createdAt: new Date("2026-01-18"),
|
||||
updatedAt: new Date("2026-01-25"),
|
||||
tags: [
|
||||
{ id: "tag-6", workspaceId: "workspace-1", name: "DevOps", slug: "devops", color: "#14B8A6", createdAt: new Date(), updatedAt: new Date() },
|
||||
{ id: "tag-1", workspaceId: "workspace-1", name: "Tutorial", slug: "tutorial", color: "#3B82F6", createdAt: new Date(), updatedAt: new Date() },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "entry-5",
|
||||
workspaceId: "workspace-1",
|
||||
slug: "old-meeting-notes",
|
||||
title: "Q4 2025 Meeting Notes",
|
||||
content: "# Meeting Notes\n\nOld archived notes...",
|
||||
contentHtml: "<h1>Meeting Notes</h1><p>Old archived notes...</p>",
|
||||
summary: "Meeting notes from Q4 2025 - archived for reference.",
|
||||
status: EntryStatus.ARCHIVED,
|
||||
visibility: "PRIVATE" as const,
|
||||
createdBy: "user-1",
|
||||
updatedBy: "user-1",
|
||||
createdAt: new Date("2025-12-15"),
|
||||
updatedAt: new Date("2026-01-05"),
|
||||
tags: [
|
||||
{ id: "tag-7", workspaceId: "workspace-1", name: "Meetings", slug: "meetings", color: "#6B7280", createdAt: new Date(), updatedAt: new Date() },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const mockTags: KnowledgeTag[] = [
|
||||
{ id: "tag-1", workspaceId: "workspace-1", name: "Tutorial", slug: "tutorial", color: "#3B82F6", createdAt: new Date(), updatedAt: new Date() },
|
||||
{ id: "tag-2", workspaceId: "workspace-1", name: "Onboarding", slug: "onboarding", color: "#10B981", createdAt: new Date(), updatedAt: new Date() },
|
||||
{ id: "tag-3", workspaceId: "workspace-1", name: "Architecture", slug: "architecture", color: "#8B5CF6", createdAt: new Date(), updatedAt: new Date() },
|
||||
{ id: "tag-4", workspaceId: "workspace-1", name: "Technical", slug: "technical", color: "#F59E0B", createdAt: new Date(), updatedAt: new Date() },
|
||||
{ id: "tag-5", workspaceId: "workspace-1", name: "API", slug: "api", color: "#EF4444", createdAt: new Date(), updatedAt: new Date() },
|
||||
{ id: "tag-6", workspaceId: "workspace-1", name: "DevOps", slug: "devops", color: "#14B8A6", createdAt: new Date(), updatedAt: new Date() },
|
||||
{ id: "tag-7", workspaceId: "workspace-1", name: "Meetings", slug: "meetings", color: "#6B7280", createdAt: new Date(), updatedAt: new Date() },
|
||||
];
|
||||
Reference in New Issue
Block a user