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

@@ -9,8 +9,8 @@ import {
 	TableRow,
 } from "@/components/ui/table";
 import prisma from "@/lib/db";
-import { Badge } from "./ui/badge";
 import Pagination from "./pagination";
+import { Badge } from "./ui/badge";
 import { UserVerifyDialog } from "./user/user-verify-dialog";
 
 export async function UsersTable({
@@ -139,7 +139,7 @@ export async function UsersTable({
 						<TableBody className="overflow-scroll">
 							{users.map((user) => (
 								<TableRow
-									className={`${user.verified && "title-bg"}`}
+									className={`${user.verified && "title-bg dark:bg-black"}`}
 									key={user.id}
 								>
 									<TableCell className="font-medium">{user.name}</TableCell>