feat: added last login time

frontend/src/components/organization/LastLoginSection/LastLoginSection.tsx

@@ -1,22 +1,33 @@
-import { faShield } from "@fortawesome/free-solid-svg-icons";
+import { faShield, faClock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
 
 type Props = {
-  lastLoggedInAuthMethod: string;
+  lastLoginAuthMethod: string;
+  lastLoginTime: string;
 };
 
-export const LastLoginSection = ({ lastLoggedInAuthMethod }: Props) => (
+export const LastLoginSection = ({ lastLoginTime, lastLoginAuthMethod }: Props) => (
   <div>
     <div className="mb-2 flex items-center gap-2 border-b border-mineshaft-600 pb-1">
-      <div className="font-medium">Last Login Details</div>
+      <div className="font-medium">Last Login</div>
     </div>
-    <div className="flex items-center gap-2 text-sm">
+    <div className="mb-2 flex items-center gap-2 text-sm">
       <div className="rounded bg-mineshaft-700 p-1 px-2">
         <FontAwesomeIcon icon={faShield} />
       </div>
       <div className="flex flex-col">
         <div className="text-sm font-medium">Authentication Method</div>
-        <div className="text-sm">{lastLoggedInAuthMethod}</div>
+        <div className="text-sm">{lastLoginAuthMethod}</div>
+      </div>
+    </div>
+    <div className="flex items-center gap-2 text-sm">
+      <div className="rounded bg-mineshaft-700 p-1 px-2">
+        <FontAwesomeIcon icon={faClock} />
+      </div>
+      <div className="flex flex-col">
+        <div className="text-sm font-medium">Time</div>
+        <div className="text-sm">{format(lastLoginTime, "PPpp")} </div>
       </div>
     </div>
   </div>

frontend/src/hooks/api/identities/types.ts

@@ -41,7 +41,8 @@ export type IdentityMembershipOrg = {
   id: string;
   identity: Identity;
   organization: string;
-  lastLoggedInAuthMethod?: IdentityAuthMethod;
+  lastLoginAuthMethod?: IdentityAuthMethod;
+  lastLoginTime?: string;
   metadata: { key: string; value: string; id: string }[];
   role: "admin" | "member" | "viewer" | "no-access" | "custom";
   customRole?: TOrgRole;

frontend/src/hooks/api/users/types.ts

@@ -68,7 +68,8 @@ export type OrgUser = {
   deniedPermissions: any[];
   roleId: string;
   isActive: boolean;
-  lastLoggedInAuthMethod?: AuthMethod;
+  lastLoginAuthMethod?: AuthMethod;
+  lastLoginTime?: string;
 };
 
 export type TProjectMembership = {

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx

@@ -293,7 +293,13 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
             {isPending && <TableSkeleton columns={3} innerKey="org-identities" />}
             {!isPending &&
               data?.identities?.map(
-                ({ identity: { id, name }, role, customRole, lastLoggedInAuthMethod }) => {
+                ({
+                  identity: { id, name },
+                  role,
+                  customRole,
+                  lastLoginAuthMethod,
+                  lastLoginTime
+                }) => {
                   return (
                     <Tr
                       className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
@@ -309,14 +315,13 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                     >
                       <Td className="group">
                         {name}
-                        {lastLoggedInAuthMethod && (
+                        {lastLoginAuthMethod && lastLoginTime && (
                           <Tooltip
                             className="min-w-52 max-w-96"
                             content={
                               <LastLoginSection
-                                lastLoggedInAuthMethod={
-                                  identityAuthToNameMap[lastLoggedInAuthMethod]
-                                }
+                                lastLoginAuthMethod={identityAuthToNameMap[lastLoginAuthMethod]}
+                                lastLoginTime={lastLoginTime}
                               />
                             }
                           >

frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx

@@ -481,7 +481,8 @@ export const OrgMembersTable = ({
                   id: orgMembershipId,
                   status,
                   isActive,
-                  lastLoggedInAuthMethod
+                  lastLoginAuthMethod,
+                  lastLoginTime
                 }) => {
                   const name =
                     u && u.firstName ? `${u.firstName} ${u.lastName ?? ""}`.trim() : null;
@@ -530,11 +531,14 @@ export const OrgMembersTable = ({
                               </Tooltip>
                             </Badge>
                           )}
-                          {lastLoggedInAuthMethod && (
+                          {lastLoginAuthMethod && lastLoginTime && (
                             <Tooltip
                               className="min-w-52 max-w-96"
                               content={
-                                <LastLoginSection lastLoggedInAuthMethod={lastLoggedInAuthMethod} />
+                                <LastLoginSection
+                                  lastLoginAuthMethod={lastLoginAuthMethod}
+                                  lastLoginTime={lastLoginTime}
+                                />
                               }
                             >
                               <FontAwesomeIcon

frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityDetailsSection.tsx

@@ -24,6 +24,7 @@ import { OrgPermissionIdentityActions, OrgPermissionSubjects } from "@app/contex
 import { useTimedReset } from "@app/hooks";
 import { identityAuthToNameMap, useGetIdentityById } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
+import { format } from "date-fns";
 
 type Props = {
   identityId: string;
@@ -141,7 +142,13 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
         <div className="mb-4">
           <p className="text-sm font-semibold text-mineshaft-300">Last Login Auth Method</p>
           <p className="text-sm text-mineshaft-300">
-            {data.lastLoggedInAuthMethod ? identityAuthToNameMap[data.lastLoggedInAuthMethod] : "-"}
+            {data.lastLoginAuthMethod ? identityAuthToNameMap[data.lastLoginAuthMethod] : "-"}
+          </p>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Last Login Time</p>
+          <p className="text-sm text-mineshaft-300">
+            {data.lastLoginTime ? format(data.lastLoginTime, "PPpp") : "-"}
           </p>
         </div>
         <div className="mb-4">

frontend/src/pages/organization/UserDetailsByIDPage/components/UserDetailsSection.tsx

@@ -22,6 +22,7 @@ import { useFetchServerStatus, useGetOrgMembership, useGetOrgRoles } from "@app/
 import { OrgUser } from "@app/hooks/api/types";
 import { useResendOrgMemberInvitation } from "@app/hooks/api/users/mutation";
 import { UsePopUpState } from "@app/hooks/usePopUp";
+import { format } from "date-fns";
 
 type Props = {
   membershipId: string;
@@ -163,7 +164,15 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
           <p className="text-sm font-semibold text-mineshaft-300">Last Login Auth Method</p>
           <div className="group flex align-top">
             <p className="break-all text-sm text-mineshaft-300">
-              {membership.lastLoggedInAuthMethod || "-"}
+              {membership.lastLoginAuthMethod || "-"}
+            </p>
+          </div>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Last Login Time</p>
+          <div className="group flex align-top">
+            <p className="break-all text-sm text-mineshaft-300">
+              {membership.lastLoginTime ? format(membership.lastLoginTime, "PPpp") : "-"}
             </p>
           </div>
         </div>