Bulk Operations Execute bulk actions on multiple items. Assign roles, send emails, export data, or manage user status. {/* Operation Type Selection */} {operations.map((op) => { const Icon = op.icon; const isSelected = operationType === op.value; return ( setOperationType(op.value as OperationType)} className={`p-6 border-2 transition-all text-left ${ isSelected ? 'bg-primary border-primary text-primary-foreground' : 'bg-background border-primary/20 hover:border-primary' }`} > {op.label} {op.description} ); })} {/* Operation Configuration */} Configure Operation {operationType === 'role-assign' && ( Select Role to Assign {roles.map(role => ( {role.roleName} ))} )} {operationType === 'email' && ( Email Message setEmailMessage(e.target.value)} className="font-paragraph border-primary/30 focus:border-primary min-h-[150px]" placeholder="Enter your message to send to selected users…" /> Note: Email functionality is simulated in this demo environment. )} {operationType === 'export' && ( Selected courses will be exported to CSV format including all details: name, category, price, duration, instructor, and status. )} {operationType === 'suspend' && ( Warning: This action will suspend the selected user accounts. This operation is simulated in the demo. )} {/* Status Message */} {operationStatus && ( {operationStatus.type === 'success' ? ( ) : ( )} {operationStatus.message} )} {/* Items Selection */} Select Items ({selectedCourses.length} selected) {selectedCourses.length === courses.length ? 'Deselect All' : 'Select All'} {isLoading ? null : courses.length > 0 ? ( {courses.map((course) => ( toggleCourseSelection(course._id)} className="border-2 border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground" />