mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-06-29 13:43:58 +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:
7
app/(dashboard)/agreements/page.tsx
Normal file
7
app/(dashboard)/agreements/page.tsx
Normal file
@ -0,0 +1,7 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function Agreements() {
|
||||
return (
|
||||
<div>Agreements</div>
|
||||
)
|
||||
}
|
||||
@ -1,7 +1,25 @@
|
||||
import { DevicesTable } from "@/components/devices-table";
|
||||
import Filter from "@/components/filter";
|
||||
import Search from "@/components/search";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import AddDeviceDialogForm from "@/components/user/add-device-dialog";
|
||||
import { getCurrentUser } from "@/lib/auth-utils";
|
||||
import { AArrowDown, AArrowUp } from "lucide-react";
|
||||
import React, { Suspense } from "react";
|
||||
|
||||
const sortfilterOptions = [
|
||||
{
|
||||
value: 'asc',
|
||||
label: 'Ascending',
|
||||
icon: <AArrowUp size={16} />,
|
||||
},
|
||||
{
|
||||
value: 'desc',
|
||||
label: 'Descending',
|
||||
icon: <AArrowDown size={16} />,
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
export default async function Devices({
|
||||
searchParams,
|
||||
}: {
|
||||
@ -12,14 +30,15 @@ export default async function Devices({
|
||||
status: string;
|
||||
}>;
|
||||
}) {
|
||||
|
||||
const query = (await searchParams)?.query || "";
|
||||
const user = await getCurrentUser()
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center border-b-2 text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4">
|
||||
<h3>
|
||||
My Devices
|
||||
</h3>
|
||||
<Button>Add new device</Button>
|
||||
<AddDeviceDialogForm user_id={user?.id} />
|
||||
</div>
|
||||
|
||||
<div
|
||||
@ -27,9 +46,13 @@ export default async function Devices({
|
||||
className=" border-b-2 pb-4 gap-4 flex items-center justify-start"
|
||||
>
|
||||
<Search />
|
||||
|
||||
<Filter
|
||||
options={sortfilterOptions}
|
||||
defaultOption="asc"
|
||||
queryParamKey="sortBy"
|
||||
/>
|
||||
</div>
|
||||
<Suspense fallback={"loading...."}>
|
||||
<Suspense key={query} fallback={"loading...."}>
|
||||
<DevicesTable searchParams={searchParams} />
|
||||
</Suspense>
|
||||
</div>
|
||||
|
||||
@ -1,54 +1,9 @@
|
||||
import Filter from "@/components/filter";
|
||||
import Search from "@/components/search";
|
||||
import { UsersTable } from "@/components/user-table";
|
||||
import { CheckCheck, Hourglass, Minus } from "lucide-react";
|
||||
import React, { Suspense } from "react";
|
||||
export default async function UserDevcies({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{
|
||||
query: string;
|
||||
page: number;
|
||||
sortBy: string;
|
||||
status: string;
|
||||
}>;
|
||||
}) {
|
||||
|
||||
export default async function UserDevcies() {
|
||||
return (
|
||||
<div>
|
||||
<h3 className="border-b-2 text-2xl font-bold title-bg py-4 px-2 mb-4">
|
||||
My Devices
|
||||
User Devices
|
||||
</h3>
|
||||
<div
|
||||
id="user-filters"
|
||||
className=" border-b-2 pb-4 gap-4 flex items-center justify-start"
|
||||
>
|
||||
<Search />
|
||||
<Filter
|
||||
options={[
|
||||
{
|
||||
value: "all",
|
||||
label: "ALL",
|
||||
icon: <Minus size={14} />,
|
||||
},
|
||||
{
|
||||
value: "unverified",
|
||||
label: "Unverfieid",
|
||||
icon: <CheckCheck size={14} />,
|
||||
},
|
||||
{
|
||||
value: "verified",
|
||||
label: "Verified",
|
||||
icon: <Hourglass size={14} />,
|
||||
},
|
||||
]}
|
||||
defaultOption="all"
|
||||
queryParamKey="status"
|
||||
/>
|
||||
</div>
|
||||
<Suspense fallback={"loading...."}>
|
||||
<UsersTable searchParams={searchParams} />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
68
app/(dashboard)/users/[userId]/verify/page.tsx
Normal file
68
app/(dashboard)/users/[userId]/verify/page.tsx
Normal file
@ -0,0 +1,68 @@
|
||||
import InputReadOnly from '@/components/input-read-only';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import UserRejectDialog from '@/components/user/user-reject-dialog';
|
||||
import { UserVerifyDialog } from '@/components/user/user-verify-dialog';
|
||||
|
||||
import prisma from '@/lib/db';
|
||||
import React from 'react'
|
||||
|
||||
export default async function VerifyUserPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{
|
||||
userId: string;
|
||||
}>;
|
||||
}) {
|
||||
const userId = (await params).userId
|
||||
const dbUser = await prisma.user.findUnique({
|
||||
where: {
|
||||
id: userId,
|
||||
},
|
||||
})
|
||||
return (
|
||||
<div>
|
||||
<div className='flex items-center justify-between border-b-2 text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4'>
|
||||
<h3 className="">
|
||||
Verify user
|
||||
</h3>
|
||||
<div className='flex gap-2'>
|
||||
{dbUser && !dbUser?.verified && <UserVerifyDialog user={dbUser} />}
|
||||
{dbUser && !dbUser?.verified && <UserRejectDialog user={dbUser} />}
|
||||
{dbUser?.verified && <Badge variant={"secondary"} className='bg-lime-500'>Verified</Badge>}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 gap-4 items-start justify-start'>
|
||||
<div id="database-information">
|
||||
<h4 className='p-2 rounded font-semibold'>Database Information</h4>
|
||||
<div className='shadow p-2 rounded-md space-y-1 my-2 grid grid-cols-1 md:grid-cols-2 gap-2'>
|
||||
<InputReadOnly label="Name" value={dbUser?.name ?? ""} />
|
||||
<InputReadOnly label="ID Card" value={dbUser?.id_card ?? ""} />
|
||||
<InputReadOnly label="Address" value={dbUser?.address ?? ""} />
|
||||
<InputReadOnly label="DOB" value={new Date(dbUser?.dob ?? "").toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
})} />
|
||||
<InputReadOnly label="Phone Number" value={dbUser?.phoneNumber ?? ""} />
|
||||
</div>
|
||||
</div>
|
||||
<div id="national-information">
|
||||
<h4 className='p-2 rounded font-semibold'>National Information</h4>
|
||||
<div className='shadow p-2 rounded-md space-y-1 my-2 grid grid-cols-1 md:grid-cols-2 gap-2'>
|
||||
<InputReadOnly label="Name" value={dbUser?.name ?? ""} />
|
||||
<InputReadOnly label="ID Card" value={dbUser?.id_card ?? ""} />
|
||||
<InputReadOnly label="Address" value={dbUser?.address ?? ""} />
|
||||
<InputReadOnly label="DOB" value={new Date(dbUser?.dob ?? "").toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
})} />
|
||||
<InputReadOnly label="Phone Number" value={dbUser?.phoneNumber ?? ""} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -2,8 +2,28 @@ import Filter from "@/components/filter";
|
||||
import Search from "@/components/search";
|
||||
import { UsersTable } from "@/components/user-table";
|
||||
import { AdminAuthGuard } from "@/lib/auth-guard";
|
||||
import { CheckCheck, Hourglass, Minus } from "lucide-react";
|
||||
import {
|
||||
AArrowDown,
|
||||
AArrowUp,
|
||||
CheckCheck,
|
||||
Hourglass,
|
||||
Minus,
|
||||
} from "lucide-react";
|
||||
import React, { Suspense } from "react";
|
||||
|
||||
const sortfilterOptions = [
|
||||
{
|
||||
value: "asc",
|
||||
label: "Ascending",
|
||||
icon: <AArrowUp size={16} />,
|
||||
},
|
||||
{
|
||||
value: "desc",
|
||||
label: "Descending",
|
||||
icon: <AArrowDown size={16} />,
|
||||
},
|
||||
];
|
||||
|
||||
export default async function AdminUsers({
|
||||
searchParams,
|
||||
}: {
|
||||
@ -21,35 +41,39 @@ export default async function AdminUsers({
|
||||
<h3 className="border-b-2 text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4">
|
||||
Users
|
||||
</h3>
|
||||
<div
|
||||
id="user-filters"
|
||||
className=" border-b-2 pb-4 gap-4 flex items-center justify-start"
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row flex-wrap items-start justify-start gap-2">
|
||||
<Search />
|
||||
<Filter
|
||||
options={[
|
||||
{
|
||||
value: "all",
|
||||
label: "ALL",
|
||||
icon: <Minus size={14} />,
|
||||
},
|
||||
{
|
||||
value: "unverified",
|
||||
label: "Unverfieid",
|
||||
icon: <CheckCheck size={14} />,
|
||||
},
|
||||
{
|
||||
value: "verified",
|
||||
label: "Verified",
|
||||
icon: <Hourglass size={14} />,
|
||||
},
|
||||
]}
|
||||
defaultOption="all"
|
||||
queryParamKey="status"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="user-table-filters"
|
||||
className=" pb-4 gap-4 flex items-center justify-start"
|
||||
>
|
||||
<Search />
|
||||
<Filter
|
||||
options={[
|
||||
{
|
||||
value: "all",
|
||||
label: "ALL",
|
||||
icon: <Minus size={14} />,
|
||||
},
|
||||
{
|
||||
value: "unverified",
|
||||
label: "Unverfieid",
|
||||
icon: <CheckCheck size={14} />,
|
||||
},
|
||||
{
|
||||
value: "verified",
|
||||
label: "Verified",
|
||||
icon: <Hourglass size={14} />,
|
||||
},
|
||||
]}
|
||||
defaultOption="all"
|
||||
queryParamKey="status"
|
||||
/>
|
||||
|
||||
<Filter
|
||||
options={sortfilterOptions}
|
||||
defaultOption="asc"
|
||||
queryParamKey="sortBy"
|
||||
/>
|
||||
</div>
|
||||
<Suspense fallback={"loading...."}>
|
||||
<UsersTable searchParams={searchParams} />
|
||||
|
||||
Reference in New Issue
Block a user