94 lines
3.5 KiB
TypeScript
94 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import PageHeader from '@/components/PageHeader';
|
|
|
|
export default function EditBenefactorPage({ params }: { params: { id: string } }) {
|
|
const [saving, setSaving] = useState(false);
|
|
const [saved, setSaved] = useState(false);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setSaving(true);
|
|
// Simulate API call
|
|
await new Promise((r) => setTimeout(r, 1000));
|
|
setSaving(false);
|
|
setSaved(true);
|
|
setTimeout(() => setSaved(false), 3000);
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-2xl space-y-6">
|
|
<PageHeader
|
|
title={`Edit Benefactor #${params.id}`}
|
|
description="Update benefactor information"
|
|
/>
|
|
|
|
{saved && (
|
|
<div className="flex items-center gap-2 p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-sm text-green-700 dark:text-green-300">
|
|
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="20 6 9 17 4 12" /></svg>
|
|
Benefactor updated successfully!
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="card">
|
|
<div className="card-body space-y-4">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="form-label">First Name</label>
|
|
<input type="text" className="form-input" defaultValue="Ali" />
|
|
</div>
|
|
<div>
|
|
<label className="form-label">Last Name</label>
|
|
<input type="text" className="form-input" defaultValue="Mohammadi" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="form-label">Phone Number</label>
|
|
<input type="text" className="form-input" defaultValue="09121234567" />
|
|
</div>
|
|
<div>
|
|
<label className="form-label">Email</label>
|
|
<input type="email" className="form-input" defaultValue="ali@example.com" />
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="form-label">Gender</label>
|
|
<select className="form-select" defaultValue="male">
|
|
<option value="male">Male</option>
|
|
<option value="female">Female</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="form-label">Status</label>
|
|
<select className="form-select" defaultValue="active">
|
|
<option value="active">Active</option>
|
|
<option value="inactive">Inactive</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="form-label">Birth Date</label>
|
|
<input type="date" className="form-input" defaultValue="1990-05-15" />
|
|
</div>
|
|
<div>
|
|
<label className="form-label">Description</label>
|
|
<textarea className="form-textarea" rows={3} placeholder="Additional notes..." />
|
|
</div>
|
|
</div>
|
|
<div className="card-footer flex items-center justify-between">
|
|
<Link href="/admin/benefactors" className="btn-outline">Cancel</Link>
|
|
<button type="submit" className="btn-primary" disabled={saving}>
|
|
{saving ? (
|
|
<><span className="spinner-sm" /> Saving...</>
|
|
) : (
|
|
'Save Changes'
|
|
)}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|