Refactor dashboard components and update global styles

- Updated the title and description in layout.tsx to reflect the new application name.
- Replaced the background color in globals.css with a background image for the title section.
- Enhanced the Devices and UserDevices pages by adding search and filter components for improved user interaction.
- Introduced a new DevicesTable component for displaying device data with pagination.
- Updated the Users page to improve layout and added a filter for user status.
- Made various UI adjustments across components for better consistency and usability.

app/(dashboard)/devices/page.tsx

@@ -1,15 +1,37 @@
-import { auth } from "@/lib/auth";
-import { headers } from "next/headers";
-
-export default async function Devices() {
-	const session = await auth.api.getSession({
-		headers: await headers(),
-	});
+import { DevicesTable } from "@/components/devices-table";
+import Search from "@/components/search";
+import { Button } from "@/components/ui/button";
+import React, { Suspense } from "react";
+export default async function Devices({
+	searchParams,
+}: {
+	searchParams: Promise<{
+		query: string;
+		page: number;
+		sortBy: string;
+		status: string;
+	}>;
+}) {
 
 	return (
 		<div>
-			<h2>Server session</h2>
-			<pre>{JSON.stringify(session?.user, null, 2)}</pre>
+			<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>
+			</div>
+
+			<div
+				id="user-filters"
+				className=" border-b-2 pb-4 gap-4 flex items-center justify-start"
+			>
+				<Search />
+
+			</div>
+			<Suspense fallback={"loading...."}>
+				<DevicesTable searchParams={searchParams} />
+			</Suspense>
 		</div>
 	);
 }

app/(dashboard)/user-devices/page.tsx

@@ -1,5 +1,54 @@
-import React from "react";
+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 function UserDevices() {
-	return <div>UserDevices</div>;
+	return (
+		<div>
+			<h3 className="border-b-2 text-2xl font-bold title-bg py-4 px-2 mb-4">
+				My 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>
+	);
 }

app/(dashboard)/users/page.tsx

@@ -18,35 +18,38 @@ export default async function AdminUsers({
 
 	return (
 		<div>
-			<h3 className="border-b-2 text-2xl font-bold title-bg py-4 px-2 mb-4">
+			<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"
 			>
-				<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 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>
 			<Suspense fallback={"loading...."}>
 				<UsersTable searchParams={searchParams} />

app/globals.css

@@ -89,6 +89,5 @@ body {
 
 
 .title-bg {
-  background-color: #fefefe;
   background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c1d3c8' fill-opacity='0.21' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
 }

app/layout.tsx

@@ -13,8 +13,8 @@ const barlow = Barlow({
 });
 
 export const metadata: Metadata = {
-	title: "Create Next App",
-	description: "Generated by create next app",
+	title: "SAR Link Portal",
+	description: "Sarlink Portal",
 };
 
 export default function RootLayout({