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

@@ -53,11 +53,11 @@ export default function DeviceCard({ device, parentalControl }: { device: Device
             </span>
           )}
 
-          {device.blocked && (
+          {(device.blocked && device.blockedBy === "ADMIN") && (
             <div className="p-2 rounded border my-2 w-full">
               <span className='uppercase text-red-500'>Blocked by admin </span>
               <p className="text-neutral-500">
-                blocked because he was watching youtube
+                {device?.reasonForBlocking}
               </p>
             </div>
           )}
@@ -67,7 +67,7 @@ export default function DeviceCard({ device, parentalControl }: { device: Device
           {!parentalControl ? (
             <AddDevicesToCartButton device={device} />
           ) : (
-            <BlockDeviceDialog type={device.blocked ? "unblock" : "block"} device={device} />
+            <BlockDeviceDialog admin={false} type={device.blocked ? "unblock" : "block"} device={device} />
           )}
         </div>
       </div>