feat(webui): shortener UI — links, collections, analytics (B6)

services/webui/.gitignore

@@ -0,0 +1 @@
+*.tsbuildinfo

services/webui/src/client/App.tsx

@@ -10,6 +10,9 @@ import Users from './pages/Users';
 import UserDetail from './pages/UserDetail';
 import Profile from './pages/Profile';
 import Settings from './pages/Settings';
+import Links from './pages/Links';
+import Collections from './pages/Collections';
+import Analytics from './pages/Analytics';
 
 function App() {
   const { isAuthenticated, isLoading, checkAuth } = useAuth();
@@ -81,6 +84,15 @@ function App() {
             </RoleGuard>
           }
         />
+
+        {/* Shortener - Links - all authenticated users */}
+        <Route path="/links" element={<Links />} />
+
+        {/* Shortener - Collections - all authenticated users */}
+        <Route path="/collections" element={<Collections />} />
+
+        {/* Shortener - Analytics - all authenticated users */}
+        <Route path="/analytics" element={<Analytics />} />
       </Route>
 
       {/* Catch all - redirect to dashboard or login */}

services/webui/src/client/components/Sidebar.tsx

@@ -16,6 +16,14 @@ const categories: MenuCategory[] = [
       { name: 'Profile', href: '/profile' },
     ],
   },
+  {
+    header: 'Shortener',
+    items: [
+      { name: 'Links', href: '/links' },
+      { name: 'Collections', href: '/collections' },
+      { name: 'Analytics', href: '/analytics' },
+    ],
+  },
   {
     header: 'Management',
     items: [

services/webui/src/client/hooks/useApi.ts

@@ -1,7 +1,21 @@
 import { useState, useCallback } from 'react';
 import axios from 'axios';
 import api from '../lib/api';
-import type { User, CreateUserData, UpdateUserData, PaginatedResponse } from '../types';
+import type {
+  User,
+  CreateUserData,
+  UpdateUserData,
+  PaginatedResponse,
+  ShortLink,
+  CreateShortLinkData,
+  UpdateShortLinkData,
+  Collection,
+  CreateCollectionData,
+  UpdateCollectionData,
+  AnalyticsSummary,
+  LinkAnalytics,
+  PaginatedShortLinksResponse,
+} from '../types';
 
 // Go backend API client (separate from auth-intercepted api)
 // Express mounts Go proxy at /api/go, so client calls go to /api/go/*
@@ -112,3 +126,81 @@ export const goApi = {
     return response.data;
   },
 };
+
+// Shortener API
+export const shortenerApi = {
+  links: {
+    list: async (params?: {
+      limit?: number;
+      offset?: number;
+      collection_id?: string;
+      is_active?: boolean;
+      search?: string;
+    }): Promise<PaginatedShortLinksResponse> => {
+      const response = await api.get('/urls', { params });
+      return response.data;
+    },
+
+    get: async (id: string): Promise<ShortLink> => {
+      const response = await api.get(`/urls/${id}`);
+      return response.data.data;
+    },
+
+    create: async (data: CreateShortLinkData): Promise<ShortLink> => {
+      const response = await api.post('/urls', data);
+      return response.data.data;
+    },
+
+    update: async (id: string, data: UpdateShortLinkData): Promise<ShortLink> => {
+      const response = await api.put(`/urls/${id}`, data);
+      return response.data.data;
+    },
+
+    delete: async (id: string): Promise<void> => {
+      await api.delete(`/urls/${id}`);
+    },
+
+    getQrCode: async (id: string): Promise<Blob> => {
+      const response = await api.get(`/urls/${id}/qr`, { responseType: 'blob' });
+      return response.data;
+    },
+  },
+
+  collections: {
+    list: async (params?: { parent_id?: string }): Promise<Collection[]> => {
+      const response = await api.get('/collections', { params });
+      return response.data.data;
+    },
+
+    get: async (id: string): Promise<Collection> => {
+      const response = await api.get(`/collections/${id}`);
+      return response.data.data;
+    },
+
+    create: async (data: CreateCollectionData): Promise<Collection> => {
+      const response = await api.post('/collections', data);
+      return response.data.data;
+    },
+
+    update: async (id: string, data: UpdateCollectionData): Promise<Collection> => {
+      const response = await api.put(`/collections/${id}`, data);
+      return response.data.data;
+    },
+
+    delete: async (id: string): Promise<void> => {
+      await api.delete(`/collections/${id}`);
+    },
+  },
+
+  analytics: {
+    summary: async (): Promise<AnalyticsSummary> => {
+      const response = await api.get('/analytics/summary');
+      return response.data.data;
+    },
+
+    link: async (id: string): Promise<LinkAnalytics> => {
+      const response = await api.get(`/analytics/urls/${id}`);
+      return response.data.data;
+    },
+  },
+};