ui improvements

frontend/src/pages/Writer/Review.tsx

@@ -243,6 +243,52 @@ export default function Review() {
     }
   }, [loadContent, toast]);
 
+  // Approve content - single item (changes status from 'review' to 'approved')
+  const handleApproveSingle = useCallback(async (row: Content) => {
+    try {
+      await fetchAPI(`/v1/writer/content/${row.id}/`, {
+        method: 'PATCH',
+        body: JSON.stringify({ status: 'approved' })
+      });
+      toast.success(`Approved "${row.title}"`);
+      loadContent();
+    } catch (error: any) {
+      toast.error(`Failed to approve: ${error.message || 'Network error'}`);
+    }
+  }, [loadContent, toast]);
+
+  // Approve content - bulk (changes status from 'review' to 'approved')
+  const handleApproveBulk = useCallback(async (ids: string[]) => {
+    try {
+      let successCount = 0;
+      let failedCount = 0;
+      
+      for (const id of ids) {
+        try {
+          await fetchAPI(`/v1/writer/content/${id}/`, {
+            method: 'PATCH',
+            body: JSON.stringify({ status: 'approved' })
+          });
+          successCount++;
+        } catch (error) {
+          failedCount++;
+          console.error(`Error approving content ${id}:`, error);
+        }
+      }
+      
+      if (successCount > 0) {
+        toast.success(`Successfully approved ${successCount} item(s)`);
+      }
+      if (failedCount > 0) {
+        toast.warning(`${failedCount} item(s) failed to approve`);
+      }
+      
+      loadContent();
+    } catch (error: any) {
+      toast.error(`Failed to approve: ${error.message || 'Network error'}`);
+    }
+  }, [loadContent, toast]);
+
   // Publish to WordPress - bulk
   const handlePublishBulk = useCallback(async (ids: string[]) => {
     try {
@@ -291,21 +337,25 @@ export default function Review() {
 
   // Bulk action handler
   const handleBulkAction = useCallback(async (action: string, ids: string[]) => {
-    if (action === 'bulk_publish_wordpress') {
+    if (action === 'bulk_approve') {
+      await handleApproveBulk(ids);
+    } else if (action === 'bulk_publish_wordpress') {
       await handlePublishBulk(ids);
     } else {
       toast.info(`Bulk action "${action}" for ${ids.length} items`);
     }
-  }, [handlePublishBulk, toast]);
+  }, [handleApproveBulk, handlePublishBulk, toast]);
 
   // Row action handler
   const handleRowAction = useCallback(async (action: string, row: Content) => {
-    if (action === 'publish_wordpress') {
+    if (action === 'approve') {
+      await handleApproveSingle(row);
+    } else if (action === 'publish_wordpress') {
       await handlePublishSingle(row);
     } else if (action === 'view') {
       navigate(`/writer/content/${row.id}`);
     }
-  }, [handlePublishSingle, navigate]);
+  }, [handleApproveSingle, handlePublishSingle, navigate]);
 
   // Delete handler (single)
   const handleDelete = useCallback(async (id: string) => {
@@ -360,15 +410,13 @@ export default function Review() {
         filterValues={{
           search: searchTerm,
         }}
-        nextAction={selectedIds.length > 0 ? {
-          label: 'Publish Selected',
-          message: `${selectedIds.length} selected`,
-          onClick: () => handleBulkAction('publish', selectedIds),
-        } : content.filter(c => c.status === 'review').length > 0 ? {
-          label: 'View Published',
-          href: '/writer/published',
-          message: `${content.filter(c => c.status === 'review').length} in review`,
-        } : undefined}
+        primaryAction={{
+          label: 'Approve Selected',
+          icon: <CheckCircleIcon className="w-4 h-4" />,
+          onClick: () => handleBulkAction('bulk_approve', selectedIds),
+          variant: 'success',
+        }}
+        getRowClassName={(row) => row.status === 'approved' ? 'bg-success-50 dark:bg-success-500/10' : ''}
         onFilterChange={(key, value) => {
           const stringValue = value === null || value === undefined ? '' : String(value);
           if (key === 'search') {