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.

components/search.tsx

@@ -1,11 +1,10 @@
 "use client";
 
 import { Input } from "@/components/ui/input";
-import { cn } from "@/lib/utils";
+import { Loader } from "lucide-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useRef, useTransition } from "react";
 import { Button } from "./ui/button";
-import { Loader } from "lucide-react";
 
 export default function Search({ disabled }: { disabled?: boolean }) {
 	const inputRef = useRef<HTMLInputElement>(null);
@@ -32,12 +31,12 @@ export default function Search({ disabled }: { disabled?: boolean }) {
 	}
 
 	return (
-		<div className="flex gap-2 items-center justify-end">
+		<div className="flex w-full gap-2 items-center justify-between">
 			<Input
 				ref={inputRef}
 				placeholder="Search..."
-				className={cn("bg-white")}
 				type="text"
+				className="w-full"
 				name="search"
 				id="search"
 				defaultValue={searchQuery ? searchQuery : ""}