mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-07-01 09:13:57 +00:00
Refactor authentication and dashboard components
- Updated login and signup pages to include session checks and redirection based on user authentication status. - Introduced QueryProvider for managing server state in the application. - Enhanced user experience by integrating session management in the devices and payments dashboard. - Added new user management features with role-based access control in the sidebar. - Created new components for user devices and payments, improving the overall structure and maintainability of the dashboard. - Implemented a table component for better data presentation in user-related views.
This commit is contained in:
@ -8,234 +8,244 @@ import { cn } from "@/lib/utils";
|
||||
import { Loader } from "lucide-react";
|
||||
import { useActionState } from "react";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { Atoll, Island, Prisma } from "@prisma/client";
|
||||
import * as React from "react"
|
||||
import type { Island, Prisma } from "@prisma/client";
|
||||
import * as React from "react";
|
||||
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
type AtollWithIslands = Prisma.AtollGetPayload<{
|
||||
include: {
|
||||
islands: true;
|
||||
}
|
||||
}>
|
||||
include: {
|
||||
islands: true;
|
||||
};
|
||||
}>;
|
||||
|
||||
export default function SignUpForm({ atolls }: { atolls: AtollWithIslands[] }) {
|
||||
const [atoll, setAtoll] = React.useState<AtollWithIslands>()
|
||||
const [island, setIsland] = React.useState<string>()
|
||||
const [atoll, setAtoll] = React.useState<AtollWithIslands>();
|
||||
const [islands, setIslands] = React.useState<Island[]>();
|
||||
|
||||
React.useEffect(() => {
|
||||
setIslands(atoll?.islands);
|
||||
}, [atoll]);
|
||||
|
||||
const [actionState, action, isPending] = useActionState(signup, {
|
||||
message: "",
|
||||
});
|
||||
const params = useSearchParams();
|
||||
const phoneNumberFromUrl = params.get("phone_number");
|
||||
const NUMBER_WITHOUT_DASH = phoneNumberFromUrl?.split("-").join("");
|
||||
|
||||
const [actionState, action, isPending] = useActionState(signup, {
|
||||
message: "",
|
||||
});
|
||||
const params = useSearchParams();
|
||||
const phoneNumberFromUrl = params.get("phone_number");
|
||||
const NUMBER_WITHOUT_DASH = phoneNumberFromUrl?.split("-").join("")
|
||||
return (
|
||||
<form
|
||||
action={action}
|
||||
className="max-w-xs mt-4 w-full bg-white dark:bg-transparent dark:border-2 shadow rounded-lg mx-auto"
|
||||
>
|
||||
<div className="py-2 px-4 my-2 space-y-2">
|
||||
<div>
|
||||
<label htmlFor="name" className="text-sm">
|
||||
Name
|
||||
</label>
|
||||
|
||||
<Input
|
||||
className={cn(
|
||||
"text-base",
|
||||
actionState.errors?.fieldErrors.name && "border-2 border-red-500",
|
||||
)}
|
||||
name="name"
|
||||
type="text"
|
||||
disabled={isPending}
|
||||
defaultValue={(actionState.payload?.get("name") || "") as string}
|
||||
placeholder="Full Name"
|
||||
/>
|
||||
{actionState.errors?.fieldErrors.name && (
|
||||
<span className="text-sm inline-block text-red-500">
|
||||
{actionState.errors?.fieldErrors.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="id_card" className="text-sm">
|
||||
ID Card
|
||||
</label>
|
||||
<Input
|
||||
name="id_card"
|
||||
type="text"
|
||||
maxLength={7}
|
||||
disabled={isPending}
|
||||
defaultValue={(actionState.payload?.get("id_card") || "") as string}
|
||||
className={cn(
|
||||
"text-base",
|
||||
actionState.errors?.fieldErrors?.id_card &&
|
||||
"border-2 border-red-500",
|
||||
)}
|
||||
placeholder="ID Card"
|
||||
/>
|
||||
{actionState?.errors?.fieldErrors?.id_card?.[0] && (
|
||||
<span className="text-sm inline-block text-red-500">
|
||||
{actionState.errors.fieldErrors.id_card[0]}
|
||||
</span>
|
||||
)}
|
||||
{actionState.db_error === "id_card" && (
|
||||
<span className="text-sm inline-block text-red-500">
|
||||
{actionState.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<label htmlFor="atoll" className="text-sm">
|
||||
Atoll
|
||||
</label>
|
||||
<Select
|
||||
disabled={isPending}
|
||||
onValueChange={(v) => {
|
||||
setAtoll(atolls.find((atoll) => atoll.id === v));
|
||||
setIslands([]);
|
||||
}}
|
||||
name="atoll_id"
|
||||
value={atoll?.id}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select atoll" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Atolls</SelectLabel>
|
||||
{atolls.map((atoll) => (
|
||||
<SelectItem key={atoll.id} value={atoll.id}>
|
||||
{atoll.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
{actionState.errors?.fieldErrors?.atoll_id && (
|
||||
<span className="text-sm inline-block text-red-500">
|
||||
{actionState.errors?.fieldErrors?.atoll_id}
|
||||
</span>
|
||||
)}
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="island" className="text-sm">
|
||||
Island
|
||||
</label>
|
||||
<Select disabled={isPending} name="island_id">
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select island" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Islands</SelectLabel>
|
||||
{islands?.map((island) => (
|
||||
<SelectItem key={island.id} value={island.id}>
|
||||
{island.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
{actionState.errors?.fieldErrors?.island_id && (
|
||||
<span className="text-sm inline-block text-red-500">
|
||||
{actionState.errors?.fieldErrors?.island_id}
|
||||
</span>
|
||||
)}
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<form
|
||||
action={action}
|
||||
className="max-w-xs mt-4 w-full bg-white dark:bg-transparent dark:border-2 shadow rounded-lg mx-auto"
|
||||
>
|
||||
<div className="py-2 px-4 my-2 space-y-2">
|
||||
<div>
|
||||
<label htmlFor="name" className="text-sm">Name</label>
|
||||
<div>
|
||||
<label htmlFor="house_name" className="text-sm">
|
||||
House Name
|
||||
</label>
|
||||
<Input
|
||||
className={cn(
|
||||
"text-base",
|
||||
actionState.errors?.fieldErrors?.house_name &&
|
||||
"border-2 border-red-500",
|
||||
)}
|
||||
disabled={isPending}
|
||||
name="house_name"
|
||||
defaultValue={
|
||||
(actionState.payload?.get("house_name") || "") as string
|
||||
}
|
||||
type="text"
|
||||
placeholder="House Name"
|
||||
/>
|
||||
{actionState.errors?.fieldErrors?.house_name && (
|
||||
<span className="text-sm inline-block text-red-500">
|
||||
{actionState.errors?.fieldErrors?.house_name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Input
|
||||
className={cn(
|
||||
'text-base',
|
||||
actionState.errors?.fieldErrors.name && 'border-2 border-red-500',
|
||||
)}
|
||||
name="name"
|
||||
type="text"
|
||||
defaultValue={(actionState.payload?.get("name") || "") as string}
|
||||
placeholder="Full Name"
|
||||
/>
|
||||
{actionState.errors?.fieldErrors.name && (
|
||||
<span className="text-sm inline-block text-red-500">
|
||||
{actionState.errors?.fieldErrors.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="id_card" className="text-sm">ID Card</label>
|
||||
<Input
|
||||
name="id_card"
|
||||
type="text"
|
||||
maxLength={7}
|
||||
defaultValue={(actionState.payload?.get("id_card") || "") as string}
|
||||
className={cn(
|
||||
'text-base',
|
||||
actionState.errors?.fieldErrors?.id_card && 'border-2 border-red-500',
|
||||
)}
|
||||
placeholder="ID Card"
|
||||
/>
|
||||
{actionState?.errors?.fieldErrors?.id_card?.[0] && (
|
||||
<span className="text-sm inline-block text-red-500">
|
||||
{actionState.errors.fieldErrors.id_card[0]}
|
||||
</span>
|
||||
)}
|
||||
{actionState.db_error === "id_card" && (
|
||||
<span className="text-sm inline-block text-red-500">
|
||||
{actionState.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
{/* <label htmlFor="island_name" className="text-sm">Island Name</label>
|
||||
<Input
|
||||
name="island_name"
|
||||
type="text"
|
||||
defaultValue={"F.Dharaboondhoo"}
|
||||
className={cn(
|
||||
'text-base cursor-not-allowed',
|
||||
actionState.errors?.fieldErrors?.island_name && 'border-2 border-red-500',
|
||||
)}
|
||||
readOnly
|
||||
/>
|
||||
{actionState?.errors?.fieldErrors.island_name && (
|
||||
<span className="text-sm inline-block text-red-500">
|
||||
{actionState?.errors?.fieldErrors.island_name}
|
||||
</span>
|
||||
)} */}
|
||||
<div>
|
||||
<label htmlFor="dob" className="text-sm">
|
||||
Date of Birth
|
||||
</label>
|
||||
<Input
|
||||
className={cn(
|
||||
"text-base",
|
||||
actionState.errors?.fieldErrors?.dob && "border-2 border-red-500",
|
||||
)}
|
||||
name="dob"
|
||||
disabled={isPending}
|
||||
defaultValue={(actionState.payload?.get("dob") || "") as string}
|
||||
type="date"
|
||||
placeholder="Date of birth"
|
||||
/>
|
||||
{actionState.errors?.fieldErrors?.dob && (
|
||||
<span className="text-sm inline-block text-red-500">
|
||||
{actionState.errors?.fieldErrors?.dob}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="atoll" className="text-sm">Atoll</label>
|
||||
<Select onValueChange={(v) => {
|
||||
setAtoll(atolls.find((atoll) => atoll.id === v))
|
||||
setIsland("")
|
||||
}} name="atoll_id" value={atoll?.id}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select atoll" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Atolls</SelectLabel>
|
||||
{atolls.map((atoll) => (
|
||||
<SelectItem key={atoll.id} value={atoll.id}>
|
||||
{atoll.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
{actionState.errors?.fieldErrors?.atoll_id && (
|
||||
<span className="text-sm inline-block text-red-500">
|
||||
{actionState.errors?.fieldErrors?.atoll_id}
|
||||
</span>
|
||||
)}
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="island" className="text-sm">Island</label>
|
||||
<Select
|
||||
name="island_id">
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select island" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Islands</SelectLabel>
|
||||
{atoll?.islands.map((island) => (
|
||||
<SelectItem key={island.id} value={island.id}>
|
||||
{island.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
{actionState.errors?.fieldErrors?.island_id && (
|
||||
<span className="text-sm inline-block text-red-500">
|
||||
{actionState.errors?.fieldErrors?.island_id}
|
||||
</span>
|
||||
)}
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="phone_number" className="text-sm">
|
||||
Phone Number
|
||||
</label>
|
||||
<Input
|
||||
id="phone-number"
|
||||
name="phone_number"
|
||||
maxLength={8}
|
||||
disabled={isPending}
|
||||
className={cn(
|
||||
!phoneNumberFromUrl &&
|
||||
actionState.errors?.fieldErrors?.phone_number &&
|
||||
"border-2 border-red-500 rounded-md",
|
||||
)}
|
||||
defaultValue={NUMBER_WITHOUT_DASH ?? ""}
|
||||
readOnly={Boolean(phoneNumberFromUrl)}
|
||||
placeholder={phoneNumberFromUrl ?? "Phone number"}
|
||||
/>
|
||||
</div>
|
||||
{actionState?.errors?.fieldErrors?.phone_number?.[0] && (
|
||||
<span className="text-sm inline-block text-red-500">
|
||||
{actionState.errors.fieldErrors.phone_number[0]}
|
||||
</span>
|
||||
)}
|
||||
{actionState.db_error === "phone_number" && (
|
||||
<span className="text-sm inline-block text-red-500">
|
||||
{actionState.message}
|
||||
</span>
|
||||
)}
|
||||
<Button disabled={isPending} className="mt-4 w-full" type="submit">
|
||||
{isPending ? <Loader className="animate-spin" /> : "Submit"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="house_name" className="text-sm">House Name</label>
|
||||
<Input
|
||||
className={cn(
|
||||
'text-base',
|
||||
actionState.errors?.fieldErrors?.house_name && 'border-2 border-red-500',
|
||||
)}
|
||||
name="house_name"
|
||||
defaultValue={(actionState.payload?.get("house_name") || "") as string}
|
||||
type="text"
|
||||
placeholder="House Name"
|
||||
/>
|
||||
{actionState.errors?.fieldErrors?.house_name && (
|
||||
<span className="text-sm inline-block text-red-500">
|
||||
{actionState.errors?.fieldErrors?.house_name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="dob" className="text-sm">Date of Birth</label>
|
||||
<Input
|
||||
className={cn(
|
||||
'text-base',
|
||||
actionState.errors?.fieldErrors?.dob && 'border-2 border-red-500',
|
||||
)}
|
||||
name="dob"
|
||||
defaultValue={(actionState.payload?.get("dob") || "") as string}
|
||||
type="date"
|
||||
placeholder="Date of birth"
|
||||
/>
|
||||
{actionState.errors?.fieldErrors?.dob && (
|
||||
<span className="text-sm inline-block text-red-500">
|
||||
{actionState.errors?.fieldErrors?.dob}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="phone_number" className="text-sm">Phone Number</label>
|
||||
<Input
|
||||
id="phone-number"
|
||||
name="phone_number"
|
||||
maxLength={8}
|
||||
className={cn(!phoneNumberFromUrl && actionState.errors?.fieldErrors?.phone_number && "border-2 border-red-500 rounded-md",)}
|
||||
defaultValue={NUMBER_WITHOUT_DASH ?? ""}
|
||||
readOnly={Boolean(phoneNumberFromUrl)}
|
||||
placeholder={phoneNumberFromUrl ?? "Phone number"}
|
||||
/>
|
||||
</div>
|
||||
{actionState?.errors?.fieldErrors?.phone_number?.[0] && (
|
||||
<span className="text-sm inline-block text-red-500">
|
||||
{actionState.errors.fieldErrors.phone_number[0]}
|
||||
</span>
|
||||
)}
|
||||
<Button disabled={isPending} className="mt-4 w-full" type="submit">
|
||||
{isPending ? <Loader className="animate-spin" /> : "Submit"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 text-center text-sm">
|
||||
Already have an account?{" "}
|
||||
<Link href="login" className="underline">
|
||||
login
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
);
|
||||
<div className="mb-4 text-center text-sm">
|
||||
Already have an account?{" "}
|
||||
<Link href="login" className="underline">
|
||||
login
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user