Refactor UI components for improved consistency and functionality

- Removed unnecessary border styles from various dashboard components including Devices, DeviceDetails, Parental Control, Payments, and Users pages to enhance visual consistency.
- Updated DevicesTable to utilize a new ClickableRow component for better device interaction and management.
- Refactored AddDevicesToCartButton to use a checkbox for selecting devices, improving user experience.
- Enhanced DeviceCard component to streamline device information display and interaction.
- Overall improvements to the layout and responsiveness of the dashboard components.

These changes enhance the user interface and improve the maintainability of the codebase.

components/add-devices-to-cart-button.tsx

@@ -2,32 +2,24 @@
 import { deviceCartAtom } from '@/lib/atoms'
 import type { Device } from '@prisma/client'
 import { useAtomValue, useSetAtom } from 'jotai'
-import { BadgePlus, CheckCheck } from 'lucide-react'
 import React from 'react'
-import { Button } from './ui/button'
 
 export default function AddDevicesToCartButton({ device }: { device: Device }) {
   const setDeviceCart = useSetAtom(deviceCartAtom)
   const devices = useAtomValue(deviceCartAtom)
+
+  const isChecked = devices.some((d) => d.id === device.id);
+
   return (
-    <Button
-      className='w-full mt-2'
-      disabled={devices.some((d) => d.id === device.id)}
-      onClick={() => setDeviceCart((prev) => [...prev, device])}
-    >
-      {devices.some((d) => d.id === device.id) ? (
-        <>
-          Selected
-          <CheckCheck />
-        </>
-      ) : (
-        <>
-          Select device
-          <BadgePlus />
-
-        </>
-
+    <input
+      type="checkbox"
+      className='peer accent-[#f49d1b] size-4'
+      checked={isChecked}
+      onChange={() => setDeviceCart((prev) =>
+        isChecked
+          ? prev.filter((d) => d.id !== device.id)
+          : [...prev, device]
       )}
-    </Button>
+    />
   )
 }