login time

components/features/logs/DesktopLogsTable.tsx

@@ -2,9 +2,10 @@ import { DataTable, Text } from "react-native-paper";
 import { View } from "react-native";
 
 import { UserLoginLog } from "@/store/api/usersApi";
-import { formatDate, formatTime } from "@/utils/dateUtils";
+import { formatDate, formatTimeWithSeconds } from "@/utils/dateUtils";
 import { LogsTableHeader } from "@/components/features/logs/LogsTableHeader";
 import { TableSortDirection } from "@/constants/tableSortDirectionEnum";
+import { reasonLabel } from "@/utils/loginUtils";
 
 interface DesktopLogsTableProps {
   logs: UserLoginLog[];
@@ -42,13 +43,21 @@ export const DesktopLogsTable = ({
           <DataTable.Cell>
             <View className="flex-row items-center flex-shrink pr-2">
               <Text numberOfLines={1}>
-                {formatDate(log.lastLoginAt)} {formatTime(log.lastLoginAt)}
+                {formatDate(log.lastLoginAt)} {formatTimeWithSeconds(log.lastLoginAt)}
               </Text>
             </View>
           </DataTable.Cell>
           <DataTable.Cell>
             <View className="flex-row items-center flex-shrink pr-2">
-              <Text numberOfLines={1}>{log.activity}</Text>
+              <Text
+                numberOfLines={1}
+                style={{ color: log.status === "FAILURE" ? "#F83434" : "#22C927" }}
+              >
+                {log.activity}
+                {log.status === "FAILURE" && reasonLabel(log.failureReason)
+                  ? ` - ${reasonLabel(log.failureReason)}`
+                  : ""}
+              </Text>
             </View>
           </DataTable.Cell>
         </DataTable.Row>

components/features/logs/MobileLogsTable.tsx

@@ -1,7 +1,8 @@
 import { ScrollView, Text, View } from "react-native";
 
 import { UserLoginLog } from "@/store/api/usersApi";
-import { formatDate, formatTime } from "@/utils/dateUtils";
+import { formatDate, formatTimeWithSeconds } from "@/utils/dateUtils";
+import { reasonLabel } from "@/utils/loginUtils";
 
 interface MobileLogsTableProps {
   logs: UserLoginLog[];
@@ -21,10 +22,16 @@ export const MobileLogsTable = ({ logs }: MobileLogsTableProps) => {
               <Text className="font-normal text-gray-600">({log.email})</Text>
             </Text>
             <Text className="text-sm text-gray-700 mt-1">
-              Time: {formatDate(log.lastLoginAt)} {formatTime(log.lastLoginAt)}
+              Time: {formatDate(log.lastLoginAt)} {formatTimeWithSeconds(log.lastLoginAt)}
             </Text>
-            <Text className="text-sm text-gray-700 mt-1">
+            <Text
+              className="text-sm mt-1"
+              style={{ color: log.status === "FAILURE" ? "#F83434" : "#22C927" }}
+            >
               Login activity: {log.activity}
+              {log.status === "FAILURE" && reasonLabel(log.failureReason)
+                ? ` - ${reasonLabel(log.failureReason)}`
+                : ""}
             </Text>
           </View>
         ))}