Add routes to front end

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import Layout from './components/Layout';
 import Dashboard from './pages/Dashboard';
 import Articles from './pages/Articles';
 import Feeds from './pages/Feeds';
+import RoutesPage from './pages/Routes';
 import Settings from './pages/Settings';
 import OnboardingWizard from './pages/onboarding/OnboardingWizard';
 
@@ -21,6 +22,7 @@ const App: React.FC = () => {
             <Route path="/dashboard" element={<Dashboard />} />
             <Route path="/articles" element={<Articles />} />
             <Route path="/feeds" element={<Feeds />} />
+            <Route path="/routes" element={<RoutesPage />} />
             <Route path="/settings" element={<Settings />} />
             <Route path="*" element={<Navigate to="/dashboard" replace />} />
           </Routes>

frontend/src/components/Layout.tsx

@@ -5,6 +5,7 @@ import {
   FileText, 
   Rss, 
   Settings as SettingsIcon,
+  Route,
   Menu,
   X
 } from 'lucide-react';
@@ -21,6 +22,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
     { name: 'Dashboard', href: '/dashboard', icon: Home },
     { name: 'Articles', href: '/articles', icon: FileText },
     { name: 'Feeds', href: '/feeds', icon: Rss },
+    { name: 'Routes', href: '/routes', icon: Route },
     { name: 'Settings', href: '/settings', icon: SettingsIcon },
   ];
 

frontend/src/lib/api.ts

@@ -190,6 +190,7 @@ export interface ChannelRequest {
 }
 
 export interface Route {
+  id?: number;
   feed_id: number;
   platform_channel_id: number;
   is_active: boolean;
@@ -334,6 +335,31 @@ class ApiClient {
   async refreshArticles(): Promise<void> {
     await axios.post('/articles/refresh');
   }
+
+  // Routes endpoints
+  async getRoutes(): Promise<Route[]> {
+    const response = await axios.get<ApiResponse<Route[]>>('/routing');
+    return response.data.data;
+  }
+
+  async createRoute(data: RouteRequest): Promise<Route> {
+    const response = await axios.post<ApiResponse<Route>>('/routing', data);
+    return response.data.data;
+  }
+
+  async updateRoute(feedId: number, channelId: number, data: Partial<RouteRequest>): Promise<Route> {
+    const response = await axios.put<ApiResponse<Route>>(`/routing/${feedId}/${channelId}`, data);
+    return response.data.data;
+  }
+
+  async deleteRoute(feedId: number, channelId: number): Promise<void> {
+    await axios.delete(`/routing/${feedId}/${channelId}`);
+  }
+
+  async toggleRoute(feedId: number, channelId: number): Promise<Route> {
+    const response = await axios.post<ApiResponse<Route>>(`/routing/${feedId}/${channelId}/toggle`);
+    return response.data.data;
+  }
 }
 
 export const apiClient = new ApiClient();

frontend/src/pages/Routes.tsx

@@ -0,0 +1,405 @@
+import React, { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Plus, Edit2, Trash2, ToggleLeft, ToggleRight, ExternalLink, CheckCircle, XCircle } from 'lucide-react';
+import { apiClient, type Route, type RouteRequest, type Feed, type PlatformChannel } from '../lib/api';
+
+const Routes: React.FC = () => {
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [editingRoute, setEditingRoute] = useState<Route | null>(null);
+  const queryClient = useQueryClient();
+
+  const { data: routes, isLoading, error } = useQuery({
+    queryKey: ['routes'],
+    queryFn: () => apiClient.getRoutes(),
+  });
+
+  const { data: feeds } = useQuery({
+    queryKey: ['feeds'],
+    queryFn: () => apiClient.getFeeds(),
+  });
+
+  const { data: onboardingOptions } = useQuery({
+    queryKey: ['onboarding-options'],
+    queryFn: () => apiClient.getOnboardingOptions(),
+  });
+
+  const toggleMutation = useMutation({
+    mutationFn: ({ feedId, channelId }: { feedId: number; channelId: number }) =>
+      apiClient.toggleRoute(feedId, channelId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['routes'] });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: ({ feedId, channelId }: { feedId: number; channelId: number }) =>
+      apiClient.deleteRoute(feedId, channelId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['routes'] });
+    },
+  });
+
+  const createMutation = useMutation({
+    mutationFn: (data: RouteRequest) => apiClient.createRoute(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['routes'] });
+      setShowCreateModal(false);
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({ feedId, channelId, data }: { feedId: number; channelId: number; data: Partial<RouteRequest> }) =>
+      apiClient.updateRoute(feedId, channelId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['routes'] });
+      setEditingRoute(null);
+    },
+  });
+
+  const handleToggle = (route: Route) => {
+    toggleMutation.mutate({ feedId: route.feed_id, channelId: route.platform_channel_id });
+  };
+
+  const handleDelete = (route: Route) => {
+    if (confirm('Are you sure you want to delete this route?')) {
+      deleteMutation.mutate({ feedId: route.feed_id, channelId: route.platform_channel_id });
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="p-6">
+        <div className="animate-pulse">
+          <div className="h-8 bg-gray-200 rounded w-1/4 mb-6"></div>
+          <div className="space-y-4">
+            {[...Array(3)].map((_, i) => (
+              <div key={i} className="bg-white p-6 rounded-lg shadow">
+                <div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
+                <div className="h-3 bg-gray-200 rounded w-1/2"></div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-6">
+        <div className="bg-red-50 border border-red-200 rounded-md p-4">
+          <p className="text-red-600">Failed to load routes</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <div className="mb-8 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Routes</h1>
+          <p className="mt-1 text-sm text-gray-500">
+            Manage connections between your feeds and channels
+          </p>
+        </div>
+        <button
+          onClick={() => setShowCreateModal(true)}
+          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+        >
+          <Plus className="h-4 w-4 mr-2" />
+          Create Route
+        </button>
+      </div>
+
+      <div className="space-y-6">
+        {routes && routes.length > 0 ? (
+          routes.map((route: Route) => (
+            <div key={`${route.feed_id}-${route.platform_channel_id}`} className="bg-white rounded-lg shadow p-6">
+              <div className="flex items-start justify-between">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center space-x-3 mb-2">
+                    <h3 className="text-lg font-medium text-gray-900">
+                      {route.feed?.name} → {route.platform_channel?.display_name || route.platform_channel?.name}
+                    </h3>
+                    {route.is_active ? (
+                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                        <CheckCircle className="h-3 w-3 mr-1" />
+                        Active
+                      </span>
+                    ) : (
+                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
+                        <XCircle className="h-3 w-3 mr-1" />
+                        Inactive
+                      </span>
+                    )}
+                  </div>
+                  <div className="flex items-center space-x-4 text-sm text-gray-600">
+                    <span>Priority: {route.priority}</span>
+                    <span>•</span>
+                    <span>Feed: {route.feed?.name}</span>
+                    <span>•</span>
+                    <span>Channel: {route.platform_channel?.display_name || route.platform_channel?.name}</span>
+                    <span>•</span>
+                    <span>Created: {new Date(route.created_at).toLocaleDateString()}</span>
+                  </div>
+                  {route.platform_channel?.description && (
+                    <p className="mt-2 text-sm text-gray-500">
+                      {route.platform_channel.description}
+                    </p>
+                  )}
+                </div>
+                <div className="flex items-center space-x-2 ml-4">
+                  <button
+                    onClick={() => setEditingRoute(route)}
+                    className="p-2 text-gray-400 hover:text-gray-600 rounded-md"
+                    title="Edit route"
+                  >
+                    <Edit2 className="h-4 w-4" />
+                  </button>
+                  <button
+                    onClick={() => handleToggle(route)}
+                    disabled={toggleMutation.isPending}
+                    className="p-2 text-gray-400 hover:text-gray-600 rounded-md"
+                    title={route.is_active ? 'Deactivate route' : 'Activate route'}
+                  >
+                    {route.is_active ? (
+                      <ToggleRight className="h-4 w-4 text-green-600" />
+                    ) : (
+                      <ToggleLeft className="h-4 w-4" />
+                    )}
+                  </button>
+                  <button
+                    onClick={() => handleDelete(route)}
+                    disabled={deleteMutation.isPending}
+                    className="p-2 text-gray-400 hover:text-red-600 rounded-md"
+                    title="Delete route"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))
+        ) : (
+          <div className="text-center py-12">
+            <div className="mx-auto h-12 w-12 text-gray-400">
+              <ExternalLink className="h-12 w-12" />
+            </div>
+            <h3 className="mt-2 text-sm font-medium text-gray-900">No routes</h3>
+            <p className="mt-1 text-sm text-gray-500">
+              Get started by creating a new route to connect feeds with channels.
+            </p>
+            <div className="mt-6">
+              <button
+                onClick={() => setShowCreateModal(true)}
+                className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              >
+                <Plus className="h-4 w-4 mr-2" />
+                Create Route
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Create Route Modal */}
+      {showCreateModal && (
+        <CreateRouteModal
+          feeds={feeds || []}
+          channels={onboardingOptions?.platform_channels || []}
+          onClose={() => setShowCreateModal(false)}
+          onSubmit={(data) => createMutation.mutate(data)}
+          isLoading={createMutation.isPending}
+        />
+      )}
+
+      {/* Edit Route Modal */}
+      {editingRoute && (
+        <EditRouteModal
+          route={editingRoute}
+          onClose={() => setEditingRoute(null)}
+          onSubmit={(data) => updateMutation.mutate({
+            feedId: editingRoute.feed_id,
+            channelId: editingRoute.platform_channel_id,
+            data
+          })}
+          isLoading={updateMutation.isPending}
+        />
+      )}
+    </div>
+  );
+};
+
+interface CreateRouteModalProps {
+  feeds: Feed[];
+  channels: PlatformChannel[];
+  onClose: () => void;
+  onSubmit: (data: RouteRequest) => void;
+  isLoading: boolean;
+}
+
+const CreateRouteModal: React.FC<CreateRouteModalProps> = ({ feeds, channels, onClose, onSubmit, isLoading }) => {
+  const [formData, setFormData] = useState<RouteRequest>({
+    feed_id: 0,
+    platform_channel_id: 0,
+    priority: 50,
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit(formData);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
+      <div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+        <div className="mt-3">
+          <h3 className="text-lg font-medium text-gray-900 mb-4">Create New Route</h3>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="feed_id" className="block text-sm font-medium text-gray-700 mb-1">
+                Feed
+              </label>
+              <select
+                id="feed_id"
+                value={formData.feed_id || ''}
+                onChange={(e) => setFormData(prev => ({ ...prev, feed_id: parseInt(e.target.value) }))}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                required
+              >
+                <option value="">Select a feed</option>
+                {feeds.map((feed) => (
+                  <option key={feed.id} value={feed.id}>
+                    {feed.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div>
+              <label htmlFor="platform_channel_id" className="block text-sm font-medium text-gray-700 mb-1">
+                Channel
+              </label>
+              <select
+                id="platform_channel_id"
+                value={formData.platform_channel_id || ''}
+                onChange={(e) => setFormData(prev => ({ ...prev, platform_channel_id: parseInt(e.target.value) }))}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                required
+              >
+                <option value="">Select a channel</option>
+                {channels.map((channel) => (
+                  <option key={channel.id} value={channel.id}>
+                    {channel.display_name || channel.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div>
+              <label htmlFor="priority" className="block text-sm font-medium text-gray-700 mb-1">
+                Priority
+              </label>
+              <input
+                type="number"
+                id="priority"
+                min="0"
+                value={formData.priority || 50}
+                onChange={(e) => setFormData(prev => ({ ...prev, priority: parseInt(e.target.value) }))}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+              <p className="text-sm text-gray-500 mt-1">Higher priority routes are processed first</p>
+            </div>
+
+            <div className="flex justify-end space-x-3 pt-4">
+              <button
+                type="button"
+                onClick={onClose}
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                disabled={isLoading}
+                className="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
+              >
+                {isLoading ? 'Creating...' : 'Create Route'}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface EditRouteModalProps {
+  route: Route;
+  onClose: () => void;
+  onSubmit: (data: Partial<RouteRequest>) => void;
+  isLoading: boolean;
+}
+
+const EditRouteModal: React.FC<EditRouteModalProps> = ({ route, onClose, onSubmit, isLoading }) => {
+  const [priority, setPriority] = useState(route.priority || 50);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit({ priority });
+  };
+
+  return (
+    <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
+      <div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+        <div className="mt-3">
+          <h3 className="text-lg font-medium text-gray-900 mb-4">Edit Route</h3>
+          <div className="mb-4 p-3 bg-gray-50 rounded-md">
+            <p className="text-sm text-gray-600">
+              <strong>Feed:</strong> {route.feed?.name}
+            </p>
+            <p className="text-sm text-gray-600">
+              <strong>Channel:</strong> {route.platform_channel?.display_name || route.platform_channel?.name}
+            </p>
+          </div>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="priority" className="block text-sm font-medium text-gray-700 mb-1">
+                Priority
+              </label>
+              <input
+                type="number"
+                id="priority"
+                min="0"
+                value={priority}
+                onChange={(e) => setPriority(parseInt(e.target.value))}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+              <p className="text-sm text-gray-500 mt-1">Higher priority routes are processed first</p>
+            </div>
+
+            <div className="flex justify-end space-x-3 pt-4">
+              <button
+                type="button"
+                onClick={onClose}
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                disabled={isLoading}
+                className="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
+              >
+                {isLoading ? 'Updating...' : 'Update Route'}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Routes;