[rewrite] Updated frontend structure and played with custom routes

2025-02-21 14:51:17 +01:00
1 parent 43063dcf4e
commit 073f01d070
@@ -0,0 +1,151 @@
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { IconMailPlus, IconSend } from "@tabler/icons-react";
+import { toast } from "@/hooks/use-toast";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { SelectDropdown } from "@/components/select-dropdown";
+import { userTypes } from "../data/data";
+
+const formSchema = z.object({
+	email: z
+		.string()
+		.min(1, { message: "Email is required." })
+		.email({ message: "Email is invalid." }),
+	role: z.string().min(1, { message: "Role is required." }),
+	desc: z.string().optional()
+});
+type UserInviteForm = z.infer<typeof formSchema>;
+
+interface Props {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+}
+
+export function UsersInviteDialog({ open, onOpenChange }: Props) {
+	const form = useForm<UserInviteForm>({
+		resolver: zodResolver(formSchema),
+		defaultValues: { email: "", role: "", desc: "" }
+	});
+
+	const onSubmit = (values: UserInviteForm) => {
+		form.reset();
+		toast({
+			title: "You submitted the following values:",
+			description: (
+				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+					<code className="text-white">{JSON.stringify(values, null, 2)}</code>
+				</pre>
+			)
+		});
+		onOpenChange(false);
+	};
+
+	return (
+		<Dialog
+			open={open}
+			onOpenChange={(state) => {
+				form.reset();
+				onOpenChange(state);
+			}}>
+			<DialogContent className="sm:max-w-md">
+				<DialogHeader className="text-left">
+					<DialogTitle className="flex items-center gap-2">
+						<IconMailPlus /> Invite User
+					</DialogTitle>
+					<DialogDescription>
+						Invite new user to join your team by sending them an email
+						invitation. Assign a role to define their access level.
+					</DialogDescription>
+				</DialogHeader>
+				<Form {...form}>
+					<form
+						id="user-invite-form"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="space-y-4">
+						<FormField
+							control={form.control}
+							name="email"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Email</FormLabel>
+									<FormControl>
+										<Input
+											type="email"
+											placeholder="eg: john.doe@gmail.com"
+											{...field}
+										/>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="role"
+							render={({ field }) => (
+								<FormItem className="space-y-1">
+									<FormLabel>Role</FormLabel>
+									<SelectDropdown
+										defaultValue={field.value}
+										onValueChange={field.onChange}
+										placeholder="Select a role"
+										items={userTypes.map(({ label, value }) => ({
+											label,
+											value
+										}))}
+									/>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="desc"
+							render={({ field }) => (
+								<FormItem className="">
+									<FormLabel>Description (optional)</FormLabel>
+									<FormControl>
+										<Textarea
+											className="resize-none"
+											placeholder="Add a personal note to your invitation (optional)"
+											{...field}
+										/>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</form>
+				</Form>
+				<DialogFooter className="gap-y-2">
+					<DialogClose asChild>
+						<Button variant="outline">Cancel</Button>
+					</DialogClose>
+					<Button type="submit" form="user-invite-form">
+						Invite <IconSend />
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}