Allow administrators to edit media outlet descriptions

Adds functionality for admins to update media outlet descriptions via an API endpoint and UI modal, including an option to use a predefined alternative description.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/UXwUwik

client/src/pages/MediaOutlet.tsx

@@ -1,14 +1,16 @@
 import { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useMutation } from "@tanstack/react-query";
 import { useRoute, useLocation } from "wouter";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { Gavel, Clock, TrendingUp, Search, Settings, User, LogOut, Grid, List } from "lucide-react";
+import { Textarea } from "@/components/ui/textarea";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { Gavel, Clock, TrendingUp, Search, Settings, User, LogOut, Grid, List, Edit } from "lucide-react";
 import { useAuth } from "@/hooks/useAuth";
 import { useToast } from "@/hooks/use-toast";
-import { queryClient } from "@/lib/queryClient";
+import { queryClient, apiRequest } from "@/lib/queryClient";
 import ArticleCard from "@/components/ArticleCard";
 import Footer from "@/components/Footer";
 import LoginModal from "@/components/LoginModal";
@@ -21,6 +23,9 @@ export default function MediaOutlet() {
   const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
   const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
+  const [isEditDescModalOpen, setIsEditDescModalOpen] = useState(false);
+  const [newDescription, setNewDescription] = useState("");
+  const [alternativeDescription, setAlternativeDescription] = useState("Partner at Type3 Capital and Non-Executive Director at TrueFi DAO with a strong background in fund management, venture capital, and digital assets");
   const { user, isAuthenticated } = useAuth();
   const { toast } = useToast();
   
@@ -67,6 +72,37 @@ export default function MediaOutlet() {
     setLocation("/admin");
   };
 
+  const updateDescriptionMutation = useMutation({
+    mutationFn: async (description: string) => {
+      await apiRequest("PATCH", `/api/media-outlets/${params?.slug}`, { description });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/media-outlets", params?.slug] });
+      toast({
+        title: "Success",
+        description: "Description updated successfully",
+      });
+      setIsEditDescModalOpen(false);
+    },
+    onError: () => {
+      toast({
+        title: "Error",
+        description: "Failed to update description",
+        variant: "destructive",
+      });
+    },
+  });
+
+  const handleEditDescription = () => {
+    setNewDescription(outlet?.description || "");
+    setIsEditDescModalOpen(true);
+  };
+
+  const handleSaveDescription = (useAlternative: boolean = false) => {
+    const descToSave = useAlternative ? alternativeDescription : newDescription;
+    updateDescriptionMutation.mutate(descToSave);
+  };
+
   const formatCurrency = (amount: string | null) => {
     if (!amount) return "$0";
     return new Intl.NumberFormat('en-US', {
@@ -327,7 +363,19 @@ export default function MediaOutlet() {
                   {outlet.category}
                 </Badge>
               </div>
-              <p className="text-gray-600 mb-2">{outlet.description}</p>
+              <div className="flex items-center space-x-2 mb-2">
+                <p className="text-gray-600">{outlet.description}</p>
+                {user && (user.role === 'admin' || user.role === 'superadmin') && (
+                  <Button 
+                    variant="ghost" 
+                    size="sm"
+                    onClick={handleEditDescription}
+                    data-testid="button-edit-description"
+                  >
+                    <Edit className="h-3 w-3" />
+                  </Button>
+                )}
+              </div>
               {outlet.tags && outlet.tags.length > 0 && (
                 <div className="flex items-center space-x-2 mb-2">
                   {outlet.tags.map((tag) => (
@@ -477,6 +525,63 @@ export default function MediaOutlet() {
         isOpen={isSearchModalOpen}
         onClose={() => setIsSearchModalOpen(false)}
       />
+
+      {/* Edit Description Modal */}
+      <Dialog open={isEditDescModalOpen} onOpenChange={setIsEditDescModalOpen}>
+        <DialogContent data-testid="modal-edit-description">
+          <DialogHeader>
+            <DialogTitle>Edit Description</DialogTitle>
+            <DialogDescription>
+              Update the description for {outlet?.name}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <label className="text-sm font-medium">Current Description</label>
+              <Textarea
+                value={newDescription}
+                onChange={(e) => setNewDescription(e.target.value)}
+                rows={3}
+                className="mt-1"
+                data-testid="textarea-description"
+              />
+            </div>
+            
+            {outlet?.slug === 'krysh-parker' && (
+              <div className="p-3 bg-blue-50 rounded-lg border border-blue-200">
+                <p className="text-sm font-medium text-blue-900 mb-2">Alternative Description</p>
+                <p className="text-sm text-blue-700 mb-3">{alternativeDescription}</p>
+                <Button 
+                  variant="outline" 
+                  size="sm"
+                  onClick={() => handleSaveDescription(true)}
+                  disabled={updateDescriptionMutation.isPending}
+                  data-testid="button-use-alternative"
+                >
+                  Use This Description
+                </Button>
+              </div>
+            )}
+            
+            <div className="flex space-x-2">
+              <Button 
+                onClick={() => handleSaveDescription(false)}
+                disabled={updateDescriptionMutation.isPending}
+                data-testid="button-save-description"
+              >
+                {updateDescriptionMutation.isPending ? "Saving..." : "Save Changes"}
+              </Button>
+              <Button 
+                variant="outline" 
+                onClick={() => setIsEditDescModalOpen(false)}
+                data-testid="button-cancel-edit"
+              >
+                Cancel
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }