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/devices-table.tsx

@@ -0,0 +1,133 @@
+import {
+	Table,
+	TableBody,
+	TableCaption,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import prisma from "@/lib/db";
+import Pagination from "./pagination";
+
+export async function DevicesTable({
+	searchParams,
+}: {
+	searchParams: Promise<{
+		query: string;
+		page: number;
+		sortBy: string;
+	}>;
+}) {
+	const query = (await searchParams)?.query || "";
+	const page = (await searchParams)?.page;
+	const sortBy = (await searchParams)?.sortBy || "asc";
+	const totalDevices = await prisma.device.count({
+		where: {
+			OR: [
+				{
+					name: {
+						contains: query || "",
+						mode: "insensitive",
+					},
+				},
+				{
+					mac: {
+						contains: query || "",
+						mode: "insensitive",
+					},
+				},
+
+
+			],
+		},
+	});
+
+	const totalPages = Math.ceil(totalDevices / 10);
+	const limit = 10;
+	const offset = (Number(page) - 1) * limit || 0;
+
+	const devices = await prisma.device.findMany({
+		where: {
+			OR: [
+				{
+					name: {
+						contains: query || "",
+						mode: "insensitive",
+					},
+				},
+				{
+					mac: {
+						contains: query || "",
+						mode: "insensitive",
+					},
+				},
+
+
+			],
+		},
+
+		skip: offset,
+		take: limit,
+		orderBy: {
+			name: `${sortBy}` as "asc" | "desc",
+		},
+	});
+
+
+	return (
+		<div>
+			{devices.length === 0 ? (
+				<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
+					<h3>No devices yet.</h3>
+				</div>
+			) : (
+				<>
+					<Table className="overflow-scroll">
+						<TableCaption>Table of all devices.</TableCaption>
+						<TableHeader>
+							<TableRow>
+								<TableHead>Device Name</TableHead>
+								<TableHead>MAC Address</TableHead>
+								<TableHead>Status</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody className="overflow-scroll">
+							{devices.map((device) => (
+								<TableRow
+
+									key={device.id}
+								>
+									<TableCell className="font-medium">{device.name}</TableCell>
+									<TableCell className="font-medium">{device.mac}</TableCell>
+
+									<TableCell>
+										Hi
+										{/* <UserVerifyDialog user={user} /> */}
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+						<TableFooter>
+							<TableRow>
+								<TableCell colSpan={2}>
+									{query.length > 0 && (
+										<p className="text-sm text-muted-foreground">
+											Showing {devices.length} locations for &quot;{query}
+											&quot;
+										</p>
+									)}
+								</TableCell>
+								<TableCell className="text-muted-foreground">
+									{totalDevices} devices
+								</TableCell>
+							</TableRow>
+						</TableFooter>
+					</Table>
+					<Pagination totalPages={totalPages} currentPage={page} />
+				</>
+			)}
+		</div>
+	);
+}