delete/archive implemented

frontend/src/components/routes/AdminDashboardComponent.tsx

@@ -1,5 +1,7 @@
+import { useState } from 'react';
 import { useLiveBlogs } from '@/queries/live-blogs';
-import { useArticles } from '@/queries/articles';
+import { useArticles, useDeleteArticle, useArchiveArticle, usePublishArticle } from '@/queries/articles';
+import { useDeleteLiveBlog, useArchiveLiveBlog, usePublishLiveBlog } from '@/queries/live-blogs';
 import { Link } from '@tanstack/react-router';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -8,11 +10,97 @@ import { format } from 'date-fns';
 import { mk } from 'date-fns/locale';
 
 export function AdminDashboardComponent() {
-  const { data: liveBlogsData, isLoading: loadingLiveBlogs } = useLiveBlogs({ limit: 50 });
-  const { data: articlesData, isLoading: loadingArticles } = useArticles({ limit: 50 });
+  // State for confirmation dialog and filters
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const [dialogType, setDialogType] = useState<'delete' | 'archive'>('delete');
+  const [itemToDelete, setItemToDelete] = useState<{
+    type: 'article' | 'liveBlog';
+    id: string;
+    title: string;
+  } | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [showArchived, setShowArchived] = useState(false);
+  
+  const { data: liveBlogsData, isLoading: loadingLiveBlogs } = useLiveBlogs({ 
+    limit: 50,
+    status: showArchived ? 'archived' : 'draft,live,ended'
+  });
+  const { data: articlesData, isLoading: loadingArticles } = useArticles({ 
+    limit: 50,
+    status: showArchived ? 'archived' : 'draft,published'
+  });
+  const deleteArticleMutation = useDeleteArticle();
+  const deleteLiveBlogMutation = useDeleteLiveBlog();
+  const archiveArticleMutation = useArchiveArticle();
+  const archiveLiveBlogMutation = useArchiveLiveBlog();
+  const publishArticleMutation = usePublishArticle();
+  const publishLiveBlogMutation = usePublishLiveBlog();
   
   const liveBlogs = liveBlogsData?.data || [];
   const articles = articlesData?.data || [];
+  
+  // No need to filter items - API already filters based on showArchived state
+  const filteredLiveBlogs = liveBlogs;
+  const filteredArticles = articles;
+
+  const handleDeleteClick = (type: 'article' | 'liveBlog', id: string, title: string) => {
+    setItemToDelete({ type, id, title });
+    setDialogType('delete');
+    setShowConfirmDialog(true);
+  };
+
+  const handleArchiveClick = (type: 'article' | 'liveBlog', id: string, title: string) => {
+    setItemToDelete({ type, id, title });
+    setDialogType('archive');
+    setShowConfirmDialog(true);
+  };
+
+  const handlePublishClick = async (type: 'article' | 'liveBlog', id: string) => {
+    setIsProcessing(true);
+    try {
+      if (type === 'article') {
+        await publishArticleMutation.mutateAsync({ id, status: 'published' });
+      } else {
+        await publishLiveBlogMutation.mutateAsync({ id, status: 'draft' });
+      }
+    } catch (error) {
+      console.error('Failed to publish:', error);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const handleConfirmAction = async () => {
+    if (!itemToDelete) return;
+    
+    setIsProcessing(true);
+    try {
+      if (dialogType === 'delete') {
+        if (itemToDelete.type === 'article') {
+          await deleteArticleMutation.mutateAsync(itemToDelete.id);
+        } else {
+          await deleteLiveBlogMutation.mutateAsync(itemToDelete.id);
+        }
+      } else { // archive
+        if (itemToDelete.type === 'article') {
+          await archiveArticleMutation.mutateAsync(itemToDelete.id);
+        } else {
+          await archiveLiveBlogMutation.mutateAsync(itemToDelete.id);
+        }
+      }
+      setShowConfirmDialog(false);
+      setItemToDelete(null);
+    } catch (error) {
+      console.error(`Failed to ${dialogType}:`, error);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const handleCancelAction = () => {
+    setShowConfirmDialog(false);
+    setItemToDelete(null);
+  };
 
   const getStatusColor = (status: string) => {
     switch (status) {
@@ -49,14 +137,20 @@ export function AdminDashboardComponent() {
             Управување со сите написи и live блогови
           </p>
         </div>
-        <div className="flex gap-2">
-          <Button asChild variant="outline">
-            <Link to="/admin/live-blogs/create">+ Нов Live блог</Link>
-          </Button>
-          <Button asChild>
-            <Link to="/">Назад кон сајтот</Link>
-          </Button>
-        </div>
+         <div className="flex gap-2">
+           <Button 
+             variant={showArchived ? "default" : "outline"}
+             onClick={() => setShowArchived(!showArchived)}
+           >
+             {showArchived ? 'Прикажи активни' : 'Прикажи архивирани'}
+           </Button>
+           <Button asChild variant="outline">
+             <Link to="/admin/live-blogs/create">+ Нов Live блог</Link>
+           </Button>
+           <Button asChild>
+             <Link to="/">Назад кон сајтот</Link>
+           </Button>
+         </div>
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
@@ -64,10 +158,10 @@ export function AdminDashboardComponent() {
         <Card>
           <CardHeader>
             <CardTitle className="flex items-center justify-between">
-              <span>Live блогови</span>
-                <Badge variant="outline" className="ml-2">
-                {liveBlogs.length || 0}
-              </Badge>
+               <span>{showArchived ? 'Архивирани Live блогови' : 'Live блогови'}</span>
+                 <Badge variant="outline" className="ml-2">
+                 {filteredLiveBlogs.length || 0}
+               </Badge>
             </CardTitle>
             <CardDescription>
               Сите live блогови со статус и датум на креирање
@@ -79,16 +173,20 @@ export function AdminDashboardComponent() {
                 <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
                 <p className="mt-2 text-sm text-muted-foreground">Вчитување...</p>
               </div>
-            ) : liveBlogs.length === 0 ? (
-              <div className="text-center py-8 border rounded-lg">
-                <p className="text-muted-foreground">Нема live блогови</p>
-                <Button asChild variant="outline" className="mt-4">
-                  <Link to="/admin/live-blogs/create">Креирај нов live блог</Link>
-                </Button>
-              </div>
-            ) : (
-              <div className="space-y-4">
-                {liveBlogs.map((blog) => (
+             ) : filteredLiveBlogs.length === 0 ? (
+               <div className="text-center py-8 border rounded-lg">
+                 <p className="text-muted-foreground">
+                   {showArchived ? 'Нема архивирани live блогови' : 'Нема live блогови'}
+                 </p>
+                 {!showArchived && (
+                   <Button asChild variant="outline" className="mt-4">
+                     <Link to="/admin/live-blogs/create">Креирај нов live блог</Link>
+                   </Button>
+                 )}
+               </div>
+             ) : (
+               <div className="space-y-4">
+                 {filteredLiveBlogs.map((blog) => (
                   <div
                     key={blog.id}
                     className="p-4 border rounded-lg hover:bg-accent/50 transition-colors"
@@ -96,8 +194,9 @@ export function AdminDashboardComponent() {
                     <div className="flex items-start justify-between">
                       <div className="flex-1">
                         <div className="flex items-center gap-2 mb-1">
-                          <Link
-                            to={`/admin/live-blogs/${blog.slug}` as any}
+                           <Link
+                            to="/admin/live-blogs/$slug"
+                            params={{ slug: blog.slug }}
                             className="font-medium hover:text-primary hover:underline"
                           >
                             {blog.title}
@@ -123,13 +222,40 @@ export function AdminDashboardComponent() {
                       </div>
                       <div className="flex gap-2 ml-4">
                         <Button asChild size="sm" variant="outline">
-                          <Link to={`/admin/live-blogs/${blog.slug}` as any}>Уреди</Link>
+                          <Link to="/admin/live-blogs/$slug" params={{ slug: blog.slug }}>Уреди</Link>
                         </Button>
                         <Button asChild size="sm" variant="ghost">
-                          <Link to={`/live-blogs/${blog.slug}` as any} target="_blank">
+                          <Link to="/live-blogs/$slug" params={{ slug: blog.slug }} target="_blank">
                             Преглед
                           </Link>
                         </Button>
+                        {showArchived ? (
+                          <Button 
+                            size="sm" 
+                            variant="outline"
+                            onClick={() => handlePublishClick('liveBlog', blog.id)}
+                            disabled={isProcessing}
+                          >
+                            Објави
+                          </Button>
+                        ) : (
+                          <Button 
+                            size="sm" 
+                            variant="outline"
+                            onClick={() => handleArchiveClick('liveBlog', blog.id, blog.title)}
+                            disabled={isProcessing}
+                          >
+                            Архивирај
+                          </Button>
+                        )}
+                        <Button 
+                          size="sm" 
+                          variant="destructive"
+                          onClick={() => handleDeleteClick('liveBlog', blog.id, blog.title)}
+                          disabled={isProcessing}
+                        >
+                          Избриши
+                        </Button>
                       </div>
                     </div>
                   </div>
@@ -143,10 +269,10 @@ export function AdminDashboardComponent() {
         <Card>
           <CardHeader>
             <CardTitle className="flex items-center justify-between">
-              <span>Написи</span>
-                <Badge variant="outline" className="ml-2">
-                {articles.length || 0}
-              </Badge>
+               <span>{showArchived ? 'Архивирани написи' : 'Написи'}</span>
+                 <Badge variant="outline" className="ml-2">
+                 {filteredArticles.length || 0}
+               </Badge>
             </CardTitle>
             <CardDescription>
               Сите написи со статус и датум на креирање
@@ -158,16 +284,20 @@ export function AdminDashboardComponent() {
                 <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
                 <p className="mt-2 text-sm text-muted-foreground">Вчитување...</p>
               </div>
-            ) : articles.length === 0 ? (
-              <div className="text-center py-8 border rounded-lg">
-                <p className="text-muted-foreground">Нема написи</p>
-                <Button asChild variant="outline" className="mt-4">
-                  <Link to="/">Креирај нов напис</Link>
-                </Button>
-              </div>
-            ) : (
-              <div className="space-y-4">
-                {articles.map((article) => (
+             ) : filteredArticles.length === 0 ? (
+               <div className="text-center py-8 border rounded-lg">
+                 <p className="text-muted-foreground">
+                   {showArchived ? 'Нема архивирани написи' : 'Нема написи'}
+                 </p>
+                 {!showArchived && (
+                   <Button asChild variant="outline" className="mt-4">
+                     <Link to="/">Креирај нов напис</Link>
+                   </Button>
+                 )}
+               </div>
+             ) : (
+               <div className="space-y-4">
+                 {filteredArticles.map((article) => (
                   <div
                     key={article.id}
                     className="p-4 border rounded-lg hover:bg-accent/50 transition-colors"
@@ -175,8 +305,9 @@ export function AdminDashboardComponent() {
                     <div className="flex items-start justify-between">
                       <div className="flex-1">
                         <div className="flex items-center gap-2 mb-1">
-                          <Link
-                            to={`/articles/${article.id}` as any}
+                           <Link
+                            to="/articles/$id"
+                            params={{ id: article.id }}
                             className="font-medium hover:text-primary hover:underline"
                           >
                             {article.title}
@@ -201,14 +332,41 @@ export function AdminDashboardComponent() {
                         )}
                       </div>
                       <div className="flex gap-2 ml-4">
-                        <Button asChild size="sm" variant="outline">
-                          <Link to={`/articles/${article.id}` as any}>Уреди</Link>
+                         <Button asChild size="sm" variant="outline">
+                          <Link to="/articles/$id" params={{ id: article.id }}>Уреди</Link>
                         </Button>
                         <Button asChild size="sm" variant="ghost">
-                          <Link to={`/articles/${article.id}` as any} target="_blank">
+                          <Link to="/articles/$id" params={{ id: article.id }} target="_blank">
                             Преглед
                           </Link>
                         </Button>
+                        {showArchived ? (
+                          <Button 
+                            size="sm" 
+                            variant="outline"
+                            onClick={() => handlePublishClick('article', article.id)}
+                            disabled={isProcessing}
+                          >
+                            Објави
+                          </Button>
+                        ) : (
+                          <Button 
+                            size="sm" 
+                            variant="outline"
+                            onClick={() => handleArchiveClick('article', article.id, article.title)}
+                            disabled={isProcessing}
+                          >
+                            Архивирај
+                          </Button>
+                        )}
+                        <Button 
+                          size="sm" 
+                          variant="destructive"
+                          onClick={() => handleDeleteClick('article', article.id, article.title)}
+                          disabled={isProcessing}
+                        >
+                          Избриши
+                        </Button>
                       </div>
                     </div>
                   </div>
@@ -219,42 +377,74 @@ export function AdminDashboardComponent() {
         </Card>
       </div>
 
-      {/* Quick Stats */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <Card>
-          <CardContent className="pt-6">
-            <div className="text-2xl font-bold">
-              {liveBlogs.filter(b => b.status === 'live').length || 0}
-            </div>
-            <p className="text-sm text-muted-foreground">Активни live блогови</p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="pt-6">
-            <div className="text-2xl font-bold">
-              {articles.filter(a => a.status === 'published').length || 0}
-            </div>
-            <p className="text-sm text-muted-foreground">Објавени написи</p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="pt-6">
-            <div className="text-2xl font-bold">
-              {liveBlogs.filter(b => b.isPinned).length || 0}
-            </div>
-            <p className="text-sm text-muted-foreground">Закачени live блогови</p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="pt-6">
-            <div className="text-2xl font-bold">
-              {(liveBlogs.reduce((sum, b) => sum + b.viewCount, 0) || 0) + 
-               (articles.reduce((sum, a) => sum + a.views, 0) || 0)}
-            </div>
-            <p className="text-sm text-muted-foreground">Вкупно прегледи</p>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}
+       {/* Quick Stats - Only show when not viewing archived items */}
+       {!showArchived && (
+         <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+           <Card>
+             <CardContent className="pt-6">
+               <div className="text-2xl font-bold">
+                 {liveBlogs.filter(b => b.status === 'live').length || 0}
+               </div>
+               <p className="text-sm text-muted-foreground">Активни live блогови</p>
+             </CardContent>
+           </Card>
+           <Card>
+             <CardContent className="pt-6">
+               <div className="text-2xl font-bold">
+                 {articles.filter(a => a.status === 'published').length || 0}
+               </div>
+               <p className="text-sm text-muted-foreground">Објавени написи</p>
+             </CardContent>
+           </Card>
+           <Card>
+             <CardContent className="pt-6">
+               <div className="text-2xl font-bold">
+                 {liveBlogs.filter(b => b.isPinned).length || 0}
+               </div>
+               <p className="text-sm text-muted-foreground">Закачени live блогови</p>
+             </CardContent>
+           </Card>
+           <Card>
+             <CardContent className="pt-6">
+               <div className="text-2xl font-bold">
+                 {(liveBlogs.reduce((sum, b) => sum + b.viewCount, 0) || 0) + 
+                  (articles.reduce((sum, a) => sum + a.views, 0) || 0)}
+               </div>
+               <p className="text-sm text-muted-foreground">Вкупно прегледи</p>
+             </CardContent>
+           </Card>
+         </div>
+       )}
+
+       {/* Confirmation Dialog */}
+       {showConfirmDialog && itemToDelete && (
+         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+           <div className="bg-white p-6 rounded-lg max-w-md w-full mx-4">
+             <h3 className="text-lg font-semibold mb-2">
+               {dialogType === 'delete' ? 'Потврди бришење' : 'Потврди архивирање'}
+             </h3>
+             <p className="text-muted-foreground mb-4">
+               {dialogType === 'delete' 
+                 ? `Дали сте сигурни дека сакате да го избришете "${itemToDelete.title}"?`
+                 : `Дали сте сигурни дека сакате да го архивирате "${itemToDelete.title}"?`}
+             </p>
+             <div className="flex justify-end gap-2">
+               <Button variant="outline" onClick={handleCancelAction} disabled={isProcessing}>
+                 Откажи
+               </Button>
+               <Button 
+                 variant={dialogType === 'delete' ? 'destructive' : 'default'}
+                 onClick={handleConfirmAction} 
+                 disabled={isProcessing}
+               >
+                 {isProcessing 
+                   ? (dialogType === 'delete' ? 'Бришење...' : 'Архивирање...')
+                   : (dialogType === 'delete' ? 'Избриши' : 'Архивирај')}
+               </Button>
+             </div>
+           </div>
+         </div>
+       )}
+     </div>
+   );
+ }

frontend/src/lib/api.ts

@@ -50,12 +50,48 @@ export interface FindArticlesParams {
   category?: string;
   author?: string;
   tag?: string;
-  status?: 'draft' | 'published' | 'archived';
+  status?: string;
   search?: string;
   page?: number;
   limit?: number;
 }
 
+export interface CreateArticleDto {
+  title: string;
+  content: string;
+  excerpt?: string;
+  slug?: string;
+  featuredImage?: string;
+  tags?: string[];
+  status?: 'draft' | 'published' | 'archived';
+  strapiId?: string;
+  authorId?: string;
+  categoryId?: string;
+  imagePosition?: 'top' | 'left' | 'right' | 'none';
+  imageSize?: 'small' | 'medium' | 'large';
+  videoUrl?: string;
+  videoPosition?: 'top' | 'inline' | 'bottom' | 'none';
+  videoCaption?: string;
+}
+
+export interface UpdateArticleDto {
+  title?: string;
+  content?: string;
+  excerpt?: string;
+  slug?: string;
+  featuredImage?: string;
+  tags?: string[];
+  status?: 'draft' | 'published' | 'archived';
+  strapiId?: string;
+  authorId?: string;
+  categoryId?: string;
+  imagePosition?: 'top' | 'left' | 'right' | 'none';
+  imageSize?: 'small' | 'medium' | 'large';
+  videoUrl?: string;
+  videoPosition?: 'top' | 'inline' | 'bottom' | 'none';
+  videoCaption?: string;
+}
+
 export async function fetchArticles(params: FindArticlesParams = {}): Promise<ArticlesResponse> {
   console.log('fetchArticles called with params:', params, 'API_BASE_URL:', API_BASE_URL);
   const searchParams = new URLSearchParams();
@@ -102,6 +138,63 @@ export async function fetchArticleById(id: string): Promise<Article> {
   return response.json();
 }
 
+export async function createArticle(dto: CreateArticleDto): Promise<Article> {
+  const response = await fetch(`${API_BASE_URL}/articles`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(dto),
+  });
+  if (!response.ok) {
+    throw new Error('Failed to create article');
+  }
+  return response.json();
+}
+
+export async function updateArticle(id: string, dto: UpdateArticleDto): Promise<Article> {
+  const response = await fetch(`${API_BASE_URL}/articles/${id}`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(dto),
+  });
+  if (!response.ok) {
+    throw new Error('Failed to update article');
+  }
+  return response.json();
+}
+
+export async function deleteArticle(id: string): Promise<void> {
+  const response = await fetch(`${API_BASE_URL}/articles/${id}`, {
+    method: 'DELETE',
+  });
+  if (!response.ok) {
+    throw new Error('Failed to delete article');
+  }
+}
+
+export async function archiveArticle(id: string): Promise<Article> {
+  const response = await fetch(`${API_BASE_URL}/articles/${id}/archive`, {
+    method: 'PATCH',
+  });
+  if (!response.ok) {
+    throw new Error('Failed to archive article');
+  }
+  return response.json();
+}
+
+export async function publishArticle(id: string, status: 'draft' | 'published' = 'published'): Promise<Article> {
+  const response = await fetch(`${API_BASE_URL}/articles/${id}/publish?status=${status}`, {
+    method: 'PATCH',
+  });
+  if (!response.ok) {
+    throw new Error('Failed to publish article');
+  }
+  return response.json();
+}
+
 // Live Blog Types
 export interface LiveBlogUpdate {
   id: string;
@@ -173,7 +266,7 @@ export interface LiveBlogUpdatesResponse {
 export interface FindLiveBlogsParams {
   category?: string;
   author?: string;
-  status?: 'draft' | 'live' | 'ended' | 'archived';
+  status?: string;
   search?: string;
   page?: number;
   limit?: number;
@@ -372,3 +465,23 @@ export async function deleteLiveBlog(id: string): Promise<void> {
     throw new Error('Failed to delete live blog');
   }
 }
+
+export async function archiveLiveBlog(id: string): Promise<LiveBlog> {
+  const response = await fetch(`${API_BASE_URL}/live-blogs/${id}/archive`, {
+    method: 'PATCH',
+  });
+  if (!response.ok) {
+    throw new Error('Failed to archive live blog');
+  }
+  return response.json();
+}
+
+export async function publishLiveBlog(id: string, status: 'draft' | 'live' | 'ended' = 'draft'): Promise<LiveBlog> {
+  const response = await fetch(`${API_BASE_URL}/live-blogs/${id}/publish?status=${status}`, {
+    method: 'PATCH',
+  });
+  if (!response.ok) {
+    throw new Error('Failed to publish live blog');
+  }
+  return response.json();
+}

frontend/src/queries/articles.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import * as api from '../lib/api';
 
 export function useArticles(params: api.FindArticlesParams = {}) {
@@ -23,3 +23,68 @@ export function useArticleById(id: string) {
     enabled: !!id,
   });
 }
+
+export function useCreateArticle() {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: api.createArticle,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['articles'] });
+    },
+  });
+}
+
+export function useUpdateArticle() {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: ({ id, dto }: { id: string; dto: api.UpdateArticleDto }) => 
+      api.updateArticle(id, dto),
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['articles'] });
+      queryClient.invalidateQueries({ queryKey: ['article', variables.id] });
+      queryClient.invalidateQueries({ queryKey: ['article', data.slug] });
+    },
+  });
+}
+
+export function useDeleteArticle() {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: api.deleteArticle,
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['articles'] });
+      // Also invalidate any specific article queries
+      queryClient.removeQueries({ queryKey: ['article', variables] });
+    },
+  });
+}
+
+export function useArchiveArticle() {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: api.archiveArticle,
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['articles'] });
+      queryClient.invalidateQueries({ queryKey: ['article', variables] });
+      queryClient.invalidateQueries({ queryKey: ['article', data.slug] });
+    },
+  });
+}
+
+export function usePublishArticle() {
+  const queryClient = useQueryClient();
+  
+  return useMutation({
+    mutationFn: ({ id, status = 'published' }: { id: string; status?: 'draft' | 'published' }) => 
+      api.publishArticle(id, status),
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['articles'] });
+      queryClient.invalidateQueries({ queryKey: ['article', variables.id] });
+      queryClient.invalidateQueries({ queryKey: ['article', data.slug] });
+    },
+  });
+}

frontend/src/queries/live-blogs.ts

@@ -155,4 +155,31 @@ export function useDeleteLiveBlog() {
       queryClient.invalidateQueries({ queryKey: ['recentLiveBlogs'] });
     },
   });
+}
+
+export function useArchiveLiveBlog() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: string) => api.archiveLiveBlog(id),
+    onSuccess: () => {
+      // Invalidate all live blogs queries
+      queryClient.invalidateQueries({ queryKey: ['liveBlogs'] });
+      queryClient.invalidateQueries({ queryKey: ['recentLiveBlogs'] });
+    },
+  });
+}
+
+export function usePublishLiveBlog() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, status = 'draft' }: { id: string; status?: 'draft' | 'live' | 'ended' }) => 
+      api.publishLiveBlog(id, status),
+    onSuccess: () => {
+      // Invalidate all live blogs queries
+      queryClient.invalidateQueries({ queryKey: ['liveBlogs'] });
+      queryClient.invalidateQueries({ queryKey: ['recentLiveBlogs'] });
+    },
+  });
 }