Add bulk update functionality for image status

- Introduced a new endpoint in the backend to handle bulk updates of image statuses by content ID or image IDs.
- Updated the frontend to include a new row action for updating image status and integrated a modal for status confirmation.
- Enhanced the API service to support bulk status updates and updated the images page to manage status updates effectively.

frontend/src/components/common/SingleRecordStatusUpdateModal.tsx

@@ -0,0 +1,106 @@
+/**
+ * Single Record Status Update Modal
+ * Modal for updating status of all images in a single content record
+ * Similar to BulkStatusUpdateModal but for single records
+ */
+
+import { useState } from 'react';
+import { Modal } from '../ui/modal';
+import Button from '../ui/button/Button';
+import SelectDropdown from '../form/SelectDropdown';
+import Label from '../form/Label';
+import { InfoIcon } from '../../icons';
+
+interface SingleRecordStatusUpdateModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: (status: string) => void | Promise<void>;
+  title: string;
+  recordName: string;
+  confirmText?: string;
+  statusOptions: Array<{ value: string; label: string }>;
+  isLoading?: boolean;
+}
+
+export default function SingleRecordStatusUpdateModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  recordName,
+  confirmText = 'Update Status',
+  statusOptions,
+  isLoading = false,
+}: SingleRecordStatusUpdateModalProps) {
+  const [selectedStatus, setSelectedStatus] = useState<string>('');
+
+  const handleConfirm = async () => {
+    if (!selectedStatus) return;
+    await onConfirm(selectedStatus);
+    // Reset on success (onClose will be called by parent)
+    setSelectedStatus('');
+  };
+
+  const handleClose = () => {
+    setSelectedStatus('');
+    onClose();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      className="max-w-md"
+    >
+      <div className="p-6">
+        {/* Header with icon */}
+        <div className="flex items-center gap-3 mb-4">
+          <div className="flex items-center justify-center w-10 h-10 bg-blue-50 rounded-xl dark:bg-blue-500/10">
+            <InfoIcon className="w-5 h-5 text-blue-500" />
+          </div>
+          <h2 className="text-xl font-bold text-gray-800 dark:text-white">
+            {title}
+          </h2>
+        </div>
+
+        {/* Message */}
+        <p className="text-gray-600 dark:text-gray-400 mb-4">
+          Update status for all images in <span className="font-semibold text-gray-900 dark:text-white">{recordName}</span>
+        </p>
+
+        {/* Status Selector */}
+        <div className="mb-6">
+          <Label className="mb-2">
+            New Status
+          </Label>
+          <SelectDropdown
+            options={statusOptions}
+            placeholder="Select status"
+            value={selectedStatus}
+            onChange={(value) => setSelectedStatus(value || '')}
+            className="w-full"
+          />
+        </div>
+
+        {/* Actions */}
+        <div className="flex justify-end gap-4">
+          <Button
+            variant="outline"
+            onClick={handleClose}
+            disabled={isLoading}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="primary"
+            onClick={handleConfirm}
+            disabled={isLoading || !selectedStatus}
+          >
+            {isLoading ? 'Updating...' : confirmText}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+