Working on bugs, add delete restore. Review the auth style. working on the RBAC.

src/components/wrappers/common/cards-with-pagination.tsx

@@ -48,7 +48,7 @@ export function CardsWithPagination<T>(props: CardsWithPaginationProps<T>) {
                 ))}
             </div>
             <PaginationNavigation
-                className="justify-end"
+                className="justify-end mt-4"
                 totalPages={totalPages}
                 currentPage={currentPage}
                 goToPage={goToPage}

src/components/wrappers/common/connection-circle.tsx

@@ -7,11 +7,13 @@ export type ConnectionCircleProps = {
 export const ConnectionCircle = ({ date }: ConnectionCircleProps) => {
     let style = "bg-gray-300 border-gray-400";
 
-    if (date) {
+    if (date instanceof Date && !isNaN(date.getTime())) {
         const now = Date.now();
-        const timestamp = new Date(date).getTime();
+        const timestamp = date.getTime();
         const interval = now - timestamp;
 
+        console.log({ now, timestamp, interval });
+
         if (interval < 10000) {
             style = "bg-green-400 border-green-600";
         } else if (interval <= 20000) {
@@ -19,7 +21,11 @@ export const ConnectionCircle = ({ date }: ConnectionCircleProps) => {
         } else {
             style = "bg-red-400 border-red-600";
         }
+    } else {
+        console.warn("Invalid date passed to ConnectionCircle:", date);
     }
 
+    console.log(style);
+
     return <div className={cn("w-5 h-5 rounded-full border-4", style)} />;
 };