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>
 	);
 }