82a5a388b8
Split 1175-LOC workflow page into _components, _hooks and _types modules. page.tsx now 256 LOC (wire-up only). Behavior preserved. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
'use client'
|
|
|
|
interface ApprovalModalProps {
|
|
mode: 'approve' | 'reject'
|
|
approvalComment: string
|
|
onCommentChange: (comment: string) => void
|
|
onCancel: () => void
|
|
onConfirm: () => void
|
|
saving: boolean
|
|
}
|
|
|
|
export default function ApprovalModal({
|
|
mode,
|
|
approvalComment,
|
|
onCommentChange,
|
|
onCancel,
|
|
onConfirm,
|
|
saving,
|
|
}: ApprovalModalProps) {
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-xl shadow-xl p-6 w-full max-w-md">
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4">
|
|
{mode === 'approve' ? 'Version freigeben' : 'Version ablehnen'}
|
|
</h3>
|
|
<textarea
|
|
value={approvalComment}
|
|
onChange={(e) => onCommentChange(e.target.value)}
|
|
placeholder={mode === 'approve' ? 'Kommentar (optional)...' : 'Ablehnungsgrund...'}
|
|
className="w-full px-3 py-2 border border-slate-300 rounded-lg min-h-[100px] mb-4"
|
|
required={mode === 'reject'}
|
|
/>
|
|
<div className="flex justify-end gap-3">
|
|
<button
|
|
onClick={onCancel}
|
|
className="px-4 py-2 text-slate-600 hover:text-slate-900"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
onClick={onConfirm}
|
|
disabled={saving || (mode === 'reject' && !approvalComment)}
|
|
className={`px-4 py-2 text-white rounded-lg disabled:opacity-50 ${
|
|
mode === 'approve'
|
|
? 'bg-green-600 hover:bg-green-700'
|
|
: 'bg-red-600 hover:bg-red-700'
|
|
}`}
|
|
>
|
|
{saving ? 'Wird verarbeitet...' : mode === 'approve' ? 'Freigeben' : 'Ablehnen'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|