92 lines
3.4 KiB
TypeScript
92 lines
3.4 KiB
TypeScript
import { ArrowLeft, FileText, Mail, Phone, Shield, User } from "lucide-react"
|
|
import { useNavigate } from "react-router-dom"
|
|
import { Button } from "../../components/ui/button"
|
|
import { Card } from "../../components/ui/card"
|
|
import { Input } from "../../components/ui/input"
|
|
import { Textarea } from "../../components/ui/textarea"
|
|
import { Select } from "../../components/ui/select"
|
|
|
|
export function RegisterUserPage() {
|
|
const navigate = useNavigate()
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-4">
|
|
<Button variant="ghost" size="icon" onClick={() => navigate("/users")} className="h-8 w-8">
|
|
<ArrowLeft className="h-4 w-4" />
|
|
</Button>
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-grayScale-600">Register New User</h1>
|
|
<p className="text-sm text-grayScale-400">Add a new user to the system</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Card className="mx-auto max-w-2xl p-6">
|
|
<form className="space-y-5">
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<label className="mb-2 flex items-center gap-1.5 text-sm font-medium text-grayScale-600">
|
|
<User className="h-4 w-4" />
|
|
First Name
|
|
</label>
|
|
<Input placeholder="Enter first name" required />
|
|
</div>
|
|
<div>
|
|
<label className="mb-2 flex items-center gap-1.5 text-sm font-medium text-grayScale-600">
|
|
<User className="h-4 w-4" />
|
|
Last Name
|
|
</label>
|
|
<Input placeholder="Enter last name" required />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-2 flex items-center gap-1.5 text-sm font-medium text-grayScale-600">
|
|
<Mail className="h-4 w-4" />
|
|
Email
|
|
</label>
|
|
<Input type="email" placeholder="Enter email address" required />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-2 flex items-center gap-1.5 text-sm font-medium text-grayScale-600">
|
|
<Phone className="h-4 w-4" />
|
|
Phone
|
|
</label>
|
|
<Input type="tel" placeholder="Enter phone number" required />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-2 flex items-center gap-1.5 text-sm font-medium text-grayScale-600">
|
|
<Shield className="h-4 w-4" />
|
|
Role
|
|
</label>
|
|
<Select required>
|
|
<option value="">Select role</option>
|
|
<option value="admin">Admin</option>
|
|
<option value="user">User</option>
|
|
</Select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-2 flex items-center gap-1.5 text-sm font-medium text-grayScale-600">
|
|
<FileText className="h-4 w-4" />
|
|
Notes
|
|
</label>
|
|
<Textarea placeholder="Enter any additional notes" rows={3} />
|
|
</div>
|
|
|
|
<div className="flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end">
|
|
<Button variant="outline" className="w-full sm:w-auto" onClick={() => navigate("/users")}>
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit" className="w-full bg-brand-500 hover:bg-brand-600 sm:w-auto">
|
|
Register User
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|