feat: enhance error handling and improve API response management across components

components/ui/app-sidebar.tsx

@@ -64,13 +64,13 @@ export async function AppSidebar({
 			children: [
 				{
 					title: "Devices",
-					link: "/devices",
+					link: "/devices?page=1",
 					perm_identifier: "device",
 					icon: <Smartphone size={16} />,
 				},
 				{
 					title: "Payments",
-					link: "/payments",
+					link: "/payments?page=1",
 					icon: <CreditCard size={16} />,
 					perm_identifier: "payment",
 				},

components/ui/phone-input.tsx

@@ -61,7 +61,7 @@ const InputComponent = React.forwardRef<
 	HTMLInputElement,
 	React.ComponentProps<"input">
 >(({ className, ...props }, ref) => (
-	<Input className={cn("mx-2", className)} {...props} ref={ref} />
+	<Input className={cn("mx-2 bg-white/10", className)} {...props} ref={ref} />
 ));
 InputComponent.displayName = "InputComponent";