107 lines
2.8 KiB
TypeScript
107 lines
2.8 KiB
TypeScript
/**
|
|
* Bulk Status Update Modal
|
|
* Reusable modal for updating status of multiple selected records
|
|
* Used across all table pages (Keywords, Clusters, Ideas, Tasks, etc.)
|
|
*/
|
|
|
|
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 BulkStatusUpdateModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onConfirm: (status: string) => void | Promise<void>;
|
|
title: string;
|
|
message: string;
|
|
confirmText?: string;
|
|
statusOptions: Array<{ value: string; label: string }>;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export default function BulkStatusUpdateModal({
|
|
isOpen,
|
|
onClose,
|
|
onConfirm,
|
|
title,
|
|
message,
|
|
confirmText = 'Update Status',
|
|
statusOptions,
|
|
isLoading = false,
|
|
}: BulkStatusUpdateModalProps) {
|
|
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-brand-50 rounded-xl dark:bg-brand-500/10">
|
|
<InfoIcon className="w-5 h-5 text-brand-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">
|
|
{message}
|
|
</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>
|
|
);
|
|
}
|
|
|