Enhance device management and user experience features

- Updated `package.json` to include the latest version of `@radix-ui/react-separator` and added `moment` for date handling.
- Modified `blockDevice` function in `omada-actions.ts` to include a `blockedBy` parameter, allowing differentiation between admin and parent actions.
- Refactored `payment.ts` to include expiry date handling for devices during payment processing.
- Improved `DevicesTable` and `ClickableRow` components to support admin functionalities and enhance device interaction.
- Updated `BlockDeviceDialog` to accept an `admin` prop, allowing for tailored blocking actions based on user role.
- Enhanced UI components for better consistency and responsiveness across the dashboard.

These changes improve the overall functionality and maintainability of the application, providing a better user experience in device management.

components/clickable-row.tsx

@@ -10,7 +10,7 @@ import { useAtom } from "jotai";
 import Link from 'next/link';
 import AddDevicesToCartButton from "./add-devices-to-cart-button";
 import BlockDeviceDialog from "./block-device-dialog";
-export default function ClickableRow({ device, parentalControl }: { device: Device, parentalControl?: boolean }) {
+export default function ClickableRow({ device, parentalControl, admin = false }: { device: Device, parentalControl?: boolean, admin?: boolean }) {
   const [devices, setDeviceCart] = useAtom(deviceCartAtom)
 
 
@@ -39,13 +39,13 @@ export default function ClickableRow({ device, parentalControl }: { device: Devi
           </Link>
           <span className="text-muted-foreground">
             Active until{" "}
-            {new Date().toLocaleDateString("en-US", {
+            {new Date(device.expiryDate || "").toLocaleDateString("en-US", {
               month: "short",
               day: "2-digit",
               year: "numeric",
             })}
           </span>
-          {(parentalControl && device.blocked) && (
+          {(device.blockedBy === "ADMIN" && device.blocked) && (
             <div className="p-2 rounded border my-2">
               <span>Comment: </span>
               <p className="text-neutral-500">
@@ -60,7 +60,7 @@ export default function ClickableRow({ device, parentalControl }: { device: Devi
         {!parentalControl ? (
           <AddDevicesToCartButton device={device} />
         ) : (
-          <BlockDeviceDialog type={device.blocked ? "unblock" : "block"} device={device} />
+          <BlockDeviceDialog admin={admin} type={device.blocked ? "unblock" : "block"} device={device} />
         )}
       </TableCell>
     </TableRow >