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/device-card.tsx

@@ -1,48 +1,75 @@
+'use client'
+import { deviceCartAtom } from '@/lib/atoms'
+import { cn } from '@/lib/utils'
 import type { Device } from '@prisma/client'
+import { useAtom } from 'jotai'
 import Link from 'next/link'
 import AddDevicesToCartButton from './add-devices-to-cart-button'
 import BlockDeviceDialog from './block-device-dialog'
 import { Badge } from './ui/badge'
 
 export default function DeviceCard({ device, parentalControl }: { device: Device, parentalControl?: boolean }) {
-  return (
-    <div>
-      <div className="flex text-sm shadow flex-col items-start p-2 border rounded border-dashed">
-        <div className="font-semibold flex gap-2 mb-2">
-          <Link
-            className="font-medium hover:underline"
-            href={`/devices/${device.id}`}
-          >
-            {device.name}
-          </Link>
-          <Badge variant={"outline"}>
-            <span className="font-medium">
-              {device.mac}
-            </span>
-          </Badge>
-        </div>
+  const [devices, setDeviceCart] = useAtom(deviceCartAtom)
 
-        <span className="text-muted-foreground">
-          Active until{" "}
-          {new Date().toLocaleDateString("en-US", {
-            month: "short",
-            day: "2-digit",
-            year: "numeric",
-          })}
-        </span>
-        {device.blocked && (
-          <div className="p-2 rounded border my-2 w-full">
-            <span>Comment: </span>
-            <p className="text-neutral-500">
-              blocked because he was watching youtube
-            </p>
+  const isChecked = devices.some((d) => d.id === device.id);
+
+  return (
+    <div
+      onKeyUp={() => { }}
+      onClick={() => {
+        if (parentalControl === true) return
+        setDeviceCart((prev) =>
+          devices.some((d) => d.id === device.id)
+            ? prev.filter((d) => d.id !== device.id)
+            : [...prev, device]
+        )
+      }
+      }
+      className="w-full">
+      <div className={cn("flex text-sm justify-between items-center my-2 p-4 border rounded-md", isChecked ? "bg-accent" : "bg-")}>
+        <div className=''>
+          <div className="font-semibold flex flex-col items-start gap-2 mb-2">
+            <Link
+              className="font-medium hover:underline"
+              href={`/devices/${device.id}`}
+            >
+              {device.name}
+            </Link>
+            <Badge variant={"secondary"}>
+              <span className="font-medium">
+                {device.mac}
+              </span>
+            </Badge>
           </div>
-        )}
-        {!parentalControl ? (
-          <AddDevicesToCartButton device={device} />
-        ) : (
-          <BlockDeviceDialog device={device} />
-        )}
+
+          {device.isActive && (
+            <span className="text-muted-foreground">
+              Active until{" "}
+              {new Date().toLocaleDateString("en-US", {
+                month: "short",
+                day: "2-digit",
+                year: "numeric",
+              })}
+            </span>
+          )}
+
+          {device.blocked && (
+            <div className="p-2 rounded border my-2 w-full">
+              <span>Comment: </span>
+              <p className="text-neutral-500">
+                blocked because he was watching youtube
+              </p>
+            </div>
+          )}
+
+        </div>
+        <div>
+          {!parentalControl ? (
+            <AddDevicesToCartButton device={device} />
+          ) : (
+            <BlockDeviceDialog device={device} />
+          )}
+        </div>
       </div>
     </div>
   )