SuperAdmin changes
This commit is contained in:
@@ -31,30 +31,37 @@ import {
|
||||
} from "@/components/ui/select"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { User } from "@/types"
|
||||
import { toast } from "sonner"
|
||||
|
||||
const userFormSchema = z.object({
|
||||
const createSchema = z.object({
|
||||
name: z.string().min(1, "Name is required"),
|
||||
email: z.string().email("Invalid email address"),
|
||||
password: z.string().min(6, "Password must be at least 6 characters"),
|
||||
role: z.string().min(1, "Role is required"),
|
||||
active: z.boolean(),
|
||||
})
|
||||
|
||||
type UserFormValues = z.infer<typeof userFormSchema>
|
||||
type UserFormValues = z.infer<typeof createSchema>
|
||||
|
||||
|
||||
|
||||
interface UserFormDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
user?: User | null
|
||||
onUserCreated?: () => void
|
||||
}
|
||||
|
||||
export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps) {
|
||||
export function UserFormDialog({ open, onOpenChange, user, onUserCreated }: UserFormDialogProps) {
|
||||
const isEditing = !!user
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
|
||||
const form = useForm<UserFormValues>({
|
||||
resolver: zodResolver(userFormSchema),
|
||||
resolver: zodResolver(createSchema),
|
||||
defaultValues: {
|
||||
name: "",
|
||||
email: "",
|
||||
password: "",
|
||||
role: "sales_user",
|
||||
active: true,
|
||||
},
|
||||
@@ -65,17 +72,36 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
|
||||
form.reset({
|
||||
name: user.name,
|
||||
email: user.email,
|
||||
password: "",
|
||||
role: user.role,
|
||||
active: user.active,
|
||||
})
|
||||
} else {
|
||||
form.reset({ name: "", email: "", role: "sales_user", active: true })
|
||||
form.reset({ name: "", email: "", password: "", role: "sales_user", active: true })
|
||||
}
|
||||
}, [user, form])
|
||||
|
||||
function onSubmit(values: UserFormValues) {
|
||||
console.log(values)
|
||||
onOpenChange(false)
|
||||
async function onSubmit(values: UserFormValues) {
|
||||
setSubmitting(true)
|
||||
try {
|
||||
const res = await fetch("/api/users", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(values),
|
||||
})
|
||||
const data = await res.json()
|
||||
if (!res.ok) {
|
||||
toast.error(data.error || "Failed to create user")
|
||||
return
|
||||
}
|
||||
toast.success("User created")
|
||||
onOpenChange(false)
|
||||
onUserCreated?.()
|
||||
} catch {
|
||||
toast.error("Failed to create user")
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -86,7 +112,7 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
|
||||
<DialogDescription>
|
||||
{isEditing
|
||||
? "Update the user's information and permissions."
|
||||
: "Create a new user account."}
|
||||
: "Create a new user account that can sign in."}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Form {...form}>
|
||||
@@ -111,7 +137,7 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="john@coastalit.com" type="email" {...field} />
|
||||
<Input placeholder="john@coastit.co.za" type="email" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -140,20 +166,19 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{!isEditing && (
|
||||
<FormField
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" placeholder="Enter password" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" placeholder={isEditing ? "Leave blank to keep current" : "Enter password"} {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="active"
|
||||
@@ -178,8 +203,8 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
|
||||
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit">
|
||||
{isEditing ? "Save Changes" : "Create User"}
|
||||
<Button type="submit" disabled={submitting}>
|
||||
{submitting ? "Saving..." : isEditing ? "Save Changes" : "Create User"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
|
||||
@@ -11,17 +11,31 @@ import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { User } from "@/types"
|
||||
import { Pencil, Power, PowerOff } from "lucide-react"
|
||||
import { Pencil, Trash2 } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
interface UsersTableProps {
|
||||
data: User[]
|
||||
loading?: boolean
|
||||
onUserDeleted?: () => void
|
||||
}
|
||||
|
||||
export function UsersTable({ data, loading }: UsersTableProps) {
|
||||
export function UsersTable({ data, loading, onUserDeleted }: UsersTableProps) {
|
||||
const [editingUser, setEditingUser] = useState<User | null>(null)
|
||||
const [editOpen, setEditOpen] = useState(false)
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!confirm("Are you sure you want to delete this user?")) return
|
||||
try {
|
||||
const res = await fetch(`/api/users/${id}`, { method: "DELETE" })
|
||||
if (!res.ok) throw new Error()
|
||||
toast.success("User deleted")
|
||||
onUserDeleted?.()
|
||||
} catch {
|
||||
toast.error("Failed to delete user")
|
||||
}
|
||||
}
|
||||
|
||||
const columns: ColumnDef<User>[] = useMemo(
|
||||
() => [
|
||||
{
|
||||
@@ -76,15 +90,15 @@ export function UsersTable({ data, loading }: UsersTableProps) {
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
const role = row.getValue("role") as string
|
||||
const colors: Record<string, string> = {
|
||||
super_admin: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
|
||||
admin: "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20",
|
||||
sales_user: "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20",
|
||||
developer: "bg-zinc-500/10 text-zinc-600 dark:text-zinc-400 border-zinc-500/20",
|
||||
}
|
||||
return (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={role === "admin"
|
||||
? "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20 capitalize"
|
||||
: "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20 capitalize"
|
||||
}
|
||||
>
|
||||
{role}
|
||||
<Badge variant="outline" className={`capitalize ${colors[role] || ""}`}>
|
||||
{role.replace("_", " ")}
|
||||
</Badge>
|
||||
)
|
||||
},
|
||||
@@ -117,8 +131,9 @@ export function UsersTable({ data, loading }: UsersTableProps) {
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-muted-foreground hover:text-destructive"
|
||||
onClick={() => handleDelete(user.id)}
|
||||
>
|
||||
{user.active ? <PowerOff className="h-4 w-4" /> : <Power className="h-4 w-4" />}
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
@@ -140,6 +155,7 @@ export function UsersTable({ data, loading }: UsersTableProps) {
|
||||
open={editOpen}
|
||||
onOpenChange={setEditOpen}
|
||||
user={editingUser}
|
||||
onUserCreated={onUserDeleted}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user