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