i701 9021f01ff4 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.
2024-12-01 23:19:31 +05:00

61 lines
1.4 KiB
TypeScript

import { DevicesTable } from "@/components/devices-table";
import Filter from "@/components/filter";
import Search from "@/components/search";
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,
}: {
searchParams: Promise<{
query: string;
page: number;
sortBy: string;
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>
<AddDeviceDialogForm user_id={user?.id} />
</div>
<div
id="user-filters"
className=" border-b-2 pb-4 gap-4 flex items-center justify-start"
>
<Search />
<Filter
options={sortfilterOptions}
defaultOption="asc"
queryParamKey="sortBy"
/>
</div>
<Suspense key={query} fallback={"loading...."}>
<DevicesTable searchParams={searchParams} />
</Suspense>
</div>
);
}