CRM_ENVIROMENT/CRM_ENVR
7
0
Fork 0
mirror of https://git.coastit.co.za/caitlin/CRM_ENVR.git synced 2026-07-11 03:27:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

I Fixed the notifications

Browse Source
This commit is contained in:
caitlin
2026-06-18 16:52:30 +02:00
parent 6fe41b6c96 e7e4d371c2
commit 02ef2b9f1f
18 changed files with 1000 additions and 581 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/users/user-form-dialog.tsx
+107 -51
View File
@@ -1,9 +1,9 @@
"use client"
"use client";
import { useState, useEffect } from "react"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import {
Dialog,
DialogContent,
@@ -11,8 +11,8 @@ import {
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
@@ -20,62 +20,97 @@ import {
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { User } from "@/types"
} 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
open: boolean;
onOpenChange: (open: boolean) => void;
user?: User | null;
onUserCreated?: () => void;
}
export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps) {
const isEditing = !!user
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: "",
role: "sales",
password: "",
role: "sales_user",
active: true,
},
})
});
useEffect(() => {
if (user) {
form.reset({
name: user.name,
email: user.email,
password: "",
role: user.role,
active: user.active,
})
});
} else {
form.reset({ name: "", email: "", role: "sales", active: true })
form.reset({
name: "",
email: "",
password: "",
role: "sales_user",
active: true,
});
}
}, [user, form])
}, [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 +121,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 +146,11 @@ 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>
@@ -123,7 +162,10 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
render={({ field }) => (
<FormItem>
<FormLabel>Role</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<Select
onValueChange={field.onChange}
defaultValue={field.value}
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select role" />
@@ -132,7 +174,6 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
<SelectContent>
<SelectItem value="super_admin">Super Admin</SelectItem>
<SelectItem value="admin">Admin</SelectItem>
<SelectItem value="developer">Developer</SelectItem>
<SelectItem value="sales">Sales</SelectItem>
</SelectContent>
</Select>
@@ -140,20 +181,27 @@ 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"
@@ -175,16 +223,24 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
)}
/>
<DialogFooter>
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
<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>
</Form>
</DialogContent>
</Dialog>
)
);
}
src/components/users/users-table.tsx
+27 -11
View File
@@ -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}
/>
</>
)