mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-07-01 21:28:23 +00:00
Add Agreements page, enhance Devices and Users components with sorting and filtering options, and implement user verification dialogs
- Introduced a new Agreements page for managing agreements in the dashboard. - Enhanced the Devices page by adding sorting and filtering options for better device management. - Updated the Users page to include sorting functionality and improved layout. - Implemented user verification and rejection dialogs for better user management. - Added InputReadOnly component for displaying user information in a read-only format. - Refactored search component to improve usability and visual consistency.
This commit is contained in:
134
components/user/add-device-dialog.tsx
Normal file
134
components/user/add-device-dialog.tsx
Normal file
@ -0,0 +1,134 @@
|
||||
"use client";
|
||||
|
||||
import { AddDevice } from "@/actions/user-actions";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Loader2, Plus } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { type SubmitHandler, useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import { z } from "zod";
|
||||
|
||||
export default function AddDeviceDialogForm({ user_id }: { user_id?: string }) {
|
||||
|
||||
const formSchema = z.object({
|
||||
name: z.string().min(2, { message: "Name is required." }),
|
||||
mac_address: z
|
||||
.string()
|
||||
.min(2, { message: "MAC Address is required." })
|
||||
.regex(
|
||||
/^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/,
|
||||
"Please enter a valid MAC address",
|
||||
),
|
||||
});
|
||||
|
||||
const [disabled, setDisabled] = useState(false);
|
||||
const [open, setOpen] = useState(false);
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
});
|
||||
|
||||
if (!user_id) {
|
||||
return null
|
||||
}
|
||||
|
||||
const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = (data) => {
|
||||
console.log(data);
|
||||
setDisabled(true)
|
||||
toast.promise(AddDevice({ mac_address: data.mac_address, name: data.name, user_id: user_id }), {
|
||||
loading: 'Adding new device...',
|
||||
success: () => {
|
||||
setDisabled(false)
|
||||
setOpen((prev) => !prev)
|
||||
return 'Device successfully added!'
|
||||
},
|
||||
error: (error) => {
|
||||
setDisabled(false)
|
||||
return error || 'Something went wrong.'
|
||||
},
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
className="gap-2 items-center"
|
||||
disabled={disabled}
|
||||
variant="default"
|
||||
>
|
||||
Add Device
|
||||
<Plus size={16} />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>New Device</DialogTitle>
|
||||
<DialogDescription>
|
||||
To add a new device, enter the device name and mac address below. Click save when you are done.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div>
|
||||
<Label htmlFor="device_name" className="text-right">
|
||||
Device Name
|
||||
</Label>
|
||||
<Input
|
||||
placeholder="eg: Iphone X"
|
||||
type="text"
|
||||
{...register("name")}
|
||||
id="device_name"
|
||||
className="col-span-3"
|
||||
/>
|
||||
<span className="text-red-500 text-sm">
|
||||
{errors.name?.message}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="address" className="text-right">
|
||||
Mac Address
|
||||
</Label>
|
||||
<Input
|
||||
placeholder="Mac address of your device"
|
||||
{...register("mac_address")}
|
||||
id="mac_address"
|
||||
className="col-span-3"
|
||||
/>
|
||||
<span className="text-red-500 text-sm">
|
||||
{errors.mac_address?.message}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button disabled={disabled} type="submit">
|
||||
{disabled ? <Loader2 className="animate-spin" /> : "Save"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
111
components/user/user-reject-dialog.tsx
Normal file
111
components/user/user-reject-dialog.tsx
Normal file
@ -0,0 +1,111 @@
|
||||
"use client"
|
||||
|
||||
import { Rejectuser } from "@/actions/user-actions"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import type { User } from "@prisma/client"
|
||||
import { UserX } from "lucide-react"
|
||||
import { useState } from "react"
|
||||
import { type SubmitHandler, useForm } from "react-hook-form"
|
||||
import { toast } from "sonner"
|
||||
import { z } from "zod"
|
||||
import { Textarea } from "../ui/textarea"
|
||||
|
||||
|
||||
|
||||
const validationSchema = z.object({
|
||||
reason: z.string().min(5, { message: "Reason is required" }),
|
||||
})
|
||||
|
||||
export default function UserRejectDialog({ user }: { user: User }) {
|
||||
const [disabled, setDisabled] = useState(false)
|
||||
const [open, setOpen] = useState(false)
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<z.infer<typeof validationSchema>>({
|
||||
resolver: zodResolver(validationSchema),
|
||||
})
|
||||
|
||||
const onSubmit: SubmitHandler<z.infer<typeof validationSchema>> = (data) => {
|
||||
setDisabled(true)
|
||||
console.log(data)
|
||||
toast.promise(Rejectuser({
|
||||
userId: user.id,
|
||||
reason: data.reason,
|
||||
}), {
|
||||
loading: "Rejecting...",
|
||||
success: () => {
|
||||
setDisabled(false)
|
||||
setOpen((prev) => !prev)
|
||||
return "Rejected!"
|
||||
},
|
||||
error: (error) => {
|
||||
setDisabled(false)
|
||||
return error || "Something went wrong"
|
||||
},
|
||||
})
|
||||
setDisabled(false)
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button disabled={disabled} variant="destructive">
|
||||
<UserX />
|
||||
Reject
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Are you sure you want to {" "}
|
||||
<span className="text-red-500">reject</span>{" "}
|
||||
this user?</DialogTitle>
|
||||
<DialogDescription className="py-2">
|
||||
<li>Name: {user.name}</li>
|
||||
<li>ID Card: {user.id_card}</li>
|
||||
<li>Address: {user.address}</li>
|
||||
<li>DOB: {new Date(user.dob ?? "").toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
})}
|
||||
</li>
|
||||
<li>Phone Number: {user.phoneNumber}</li>
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="flex flex-col items-start gap-1">
|
||||
<Label htmlFor="reason" className="text-right">
|
||||
Rejection details
|
||||
</Label>
|
||||
<Textarea rows={10} {...register("reason")} id="reason" className={cn("col-span-5", errors.reason && "ring-2 ring-red-500")} />
|
||||
<span className="text-sm text-red-500">
|
||||
{errors.reason?.message}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant={"destructive"} disabled={disabled} type="submit">
|
||||
Reject
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@ -35,7 +35,18 @@ export function UserVerifyDialog({ user }: { user: User }) {
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Are you sure you want to verify <strong> {user.name}</strong>?
|
||||
Are you sure you want to verify the following user?
|
||||
<span className="inline-block my-4">
|
||||
<li>Name: {user.name}</li>
|
||||
<li>ID Card: {user.id_card}</li>
|
||||
<li>Address: {user.address}</li>
|
||||
<li>DOB: {new Date(user.dob ?? "").toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
})}</li>
|
||||
<li>Phone Number: {user.phoneNumber}</li>
|
||||
</span>
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
|
||||
Reference in New Issue
Block a user