141 lines
4.1 KiB
TypeScript
141 lines
4.1 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from 'react'
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Textarea } from '@/components/ui/textarea'
|
|
import { Label } from '@/components/ui/label'
|
|
import { Alert, AlertDescription } from '@/components/ui/alert'
|
|
import { Loader2, XCircle, AlertTriangle } from 'lucide-react'
|
|
|
|
interface RejectDialogProps {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
onReject: (adminNotes: string) => Promise<void>
|
|
title: string
|
|
itemName: string
|
|
itemType: 'feature' | 'template'
|
|
}
|
|
|
|
export function RejectDialog({
|
|
open,
|
|
onOpenChange,
|
|
onReject,
|
|
title,
|
|
itemName,
|
|
itemType
|
|
}: RejectDialogProps) {
|
|
const [adminNotes, setAdminNotes] = useState('')
|
|
const [loading, setLoading] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
|
|
if (!adminNotes.trim()) {
|
|
setError('Please provide a reason for rejection')
|
|
return
|
|
}
|
|
|
|
try {
|
|
setLoading(true)
|
|
setError(null)
|
|
|
|
await onReject(adminNotes.trim())
|
|
|
|
// Reset form and close dialog
|
|
setAdminNotes('')
|
|
onOpenChange(false)
|
|
} catch (error) {
|
|
setError(error instanceof Error ? error.message : `Failed to reject ${itemType}`)
|
|
console.error(`Error rejecting ${itemType}:`, error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleCancel = () => {
|
|
setAdminNotes('')
|
|
setError(null)
|
|
onOpenChange(false)
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center text-red-600">
|
|
<XCircle className="h-5 w-5 mr-2" />
|
|
{title}
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4">
|
|
<div className="p-3 bg-red-50 border border-red-200 rounded-lg">
|
|
<p className="text-sm text-red-800">
|
|
You are about to reject: <strong>{itemName}</strong>
|
|
</p>
|
|
<p className="text-xs text-red-600 mt-1">
|
|
This action will mark the {itemType} as rejected and notify the submitter.
|
|
</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="adminNotes">Reason for Rejection *</Label>
|
|
<Textarea
|
|
id="adminNotes"
|
|
value={adminNotes}
|
|
onChange={(e) => setAdminNotes(e.target.value)}
|
|
placeholder={`Explain why this ${itemType} is being rejected...`}
|
|
rows={4}
|
|
required
|
|
/>
|
|
<p className="text-xs text-gray-500">
|
|
This message will be visible to the submitter
|
|
</p>
|
|
</div>
|
|
|
|
{/* Error Display */}
|
|
{error && (
|
|
<Alert>
|
|
<AlertTriangle className="h-4 w-4" />
|
|
<AlertDescription>{error}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex justify-end space-x-2 pt-2">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={handleCancel}
|
|
disabled={loading}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
variant="destructive"
|
|
disabled={loading || !adminNotes.trim()}
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
|
Rejecting...
|
|
</>
|
|
) : (
|
|
<>
|
|
<XCircle className="h-4 w-4 mr-2" />
|
|
Reject {itemType === 'feature' ? 'Feature' : 'Template'}
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|