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/ui/app-sidebar.tsx

@@ -30,10 +30,18 @@ const data = {
 					title: "Devices",
 					url: "/devices",
 				},
+				{
+					title: "Parental Controls",
+					url: "/parental-controls",
+				},
 				{
 					title: "Payments",
 					url: "/payments",
 				},
+				{
+					title: "Agreements",
+					url: "/agreements",
+				},
 			],
 		},
 		{
@@ -65,7 +73,7 @@ export function AppSidebar({
 	return (
 		<Sidebar {...props} className="z-50">
 			<SidebarHeader>
-				<h4 className="bg-gray-200 p-2 rounded shadow text-center uppercase dark:bg-gray-800">
+				<h4 className="p-2 rounded shadow text-center uppercase ">
 					Sar Link Portal
 				</h4>
 			</SidebarHeader>