109 lines
4.1 KiB
TypeScript
109 lines
4.1 KiB
TypeScript
import { useState } from "react"
|
|
import { Plus } from "lucide-react"
|
|
import { Button } from "../../components/ui/button"
|
|
import { Card } from "../../components/ui/card"
|
|
import { Avatar, AvatarFallback, AvatarImage } from "../../components/ui/avatar"
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "../../components/ui/dialog"
|
|
import { Input } from "../../components/ui/input"
|
|
|
|
const mockMembers = [
|
|
{ id: "1", name: "John", avatar: "" },
|
|
{ id: "2", name: "Jane", avatar: "" },
|
|
{ id: "3", name: "Mike", avatar: "" },
|
|
{ id: "4", name: "Sarah", avatar: "" },
|
|
{ id: "5", name: "David", avatar: "" },
|
|
{ id: "6", name: "Emily", avatar: "" },
|
|
]
|
|
|
|
export function PracticeMembersPage() {
|
|
const [isModalOpen, setIsModalOpen] = useState(false)
|
|
const [memberName, setMemberName] = useState("")
|
|
const [memberRole, setMemberRole] = useState("")
|
|
|
|
const handleAddMember = () => {
|
|
console.log("Add member:", { memberName, memberRole })
|
|
setIsModalOpen(false)
|
|
setMemberName("")
|
|
setMemberRole("")
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
{/* Page Header */}
|
|
<div>
|
|
<h1 className="text-2xl font-bold tracking-tight text-grayScale-600">Practice Management</h1>
|
|
<p className="mt-1 text-sm text-grayScale-400">View and manage your practice members</p>
|
|
</div>
|
|
|
|
<Card className="border-grayScale-200 p-6 shadow-sm sm:p-8">
|
|
<div className="mb-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
|
<h2 className="text-lg font-semibold tracking-tight text-grayScale-600">Current Members</h2>
|
|
<Button
|
|
onClick={() => setIsModalOpen(true)}
|
|
className="bg-brand-500 shadow-sm hover:bg-brand-600 transition-colors w-full sm:w-auto"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
Add Members
|
|
</Button>
|
|
</div>
|
|
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-6">
|
|
{mockMembers.map((member) => (
|
|
<div
|
|
key={member.id}
|
|
className="group flex flex-col items-center"
|
|
>
|
|
<Avatar className="h-16 w-16 border-2 border-grayScale-200 transition-all duration-200 group-hover:border-brand-400 group-hover:shadow-md group-hover:scale-105">
|
|
<AvatarImage src={member.avatar} />
|
|
<AvatarFallback className="bg-brand-100 text-brand-600 font-medium">
|
|
{member.name[0]}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<span className="mt-2.5 text-sm font-medium text-grayScale-500 transition-colors group-hover:text-grayScale-600">
|
|
{member.name}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
|
|
<Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
|
|
<DialogContent className="sm:rounded-xl">
|
|
<DialogHeader>
|
|
<DialogTitle>Add New Member</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-5 py-2">
|
|
<div>
|
|
<label className="mb-1.5 block text-sm font-medium text-grayScale-500">
|
|
Member Name
|
|
</label>
|
|
<Input
|
|
value={memberName}
|
|
onChange={(e) => setMemberName(e.target.value)}
|
|
placeholder="Enter member name"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="mb-1.5 block text-sm font-medium text-grayScale-500">
|
|
Member Role
|
|
</label>
|
|
<Input
|
|
value={memberRole}
|
|
onChange={(e) => setMemberRole(e.target.value)}
|
|
placeholder="Enter member role"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setIsModalOpen(false)}>
|
|
Cancel
|
|
</Button>
|
|
<Button onClick={handleAddMember} className="bg-brand-500 shadow-sm hover:bg-brand-600 transition-colors">
|
|
Add Member
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
)
|
|
}
|