132 lines
4.5 KiB
TypeScript
132 lines
4.5 KiB
TypeScript
import { Text, View, Pressable, ScrollView } from "react-native";
|
|
import { router } from "expo-router";
|
|
|
|
import { useAuthContext } from "@/auth/AuthContext";
|
|
import { ToDoList } from "@/components/features/dashboard/todo/ToDoList";
|
|
import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
|
|
import { RiskScoreIndicator } from "@/components/ui/RiskScoreIndicator";
|
|
import { useGetTodosQuery } from "@/store/api/todosApi";
|
|
import { useAppSelector } from "@/store/hooks";
|
|
import { selectIsMobile } from "@/store/screen/screenSizeSlice";
|
|
import { RoleEnum } from "@/constants/roleEnum";
|
|
import { NoData } from "@/components/ui/NoData";
|
|
|
|
const Dashboard = () => {
|
|
const { user } = useAuthContext();
|
|
const isMobile = useAppSelector(selectIsMobile);
|
|
const isManager = user?.role === RoleEnum.MANAGER;
|
|
|
|
const queryArgs = isManager ? undefined : { assigneeUserId: user?.id };
|
|
|
|
const { data, error, refetch, isLoading, isFetching } =
|
|
useGetTodosQuery(queryArgs);
|
|
|
|
const allTodos = data?.items ?? [];
|
|
const teamTodos = isManager ? allTodos : [];
|
|
const myTodos = isManager
|
|
? allTodos.filter((t) => t.assignees?.some((a) => a.id === user?.id))
|
|
: allTodos;
|
|
return (
|
|
<View
|
|
className={`flex-1 bg-primaryPurpleLight ${isMobile ? "p-1" : "p-5"}`}
|
|
>
|
|
<View className="p-0">
|
|
<Text
|
|
className={`text-2xl font-bold ${
|
|
isMobile ? "mb-1" : "mb-4"
|
|
} text-white`}
|
|
>
|
|
User dashboard
|
|
</Text>
|
|
</View>
|
|
|
|
<ScrollView>
|
|
<View className="flex flex-col lg:flex-row flex-1">
|
|
<View className="w-full lg:w-1/2 lg:pr-2 mb-4 lg:mb-0">
|
|
<View className="bg-lightGray rounded-lg p-4 mb-4">
|
|
<Text className="text-xl font-bold mb-4 text-black">
|
|
Risk Score Indicators
|
|
</Text>
|
|
<View className="flex flex-row flex-wrap justify-around gap-4">
|
|
<RiskScoreIndicator
|
|
value={100}
|
|
subtitle="MFA setup"
|
|
size={110}
|
|
/>
|
|
<RiskScoreIndicator
|
|
value={50}
|
|
subtitle="Fishing emails"
|
|
size={110}
|
|
/>
|
|
<RiskScoreIndicator
|
|
value={25}
|
|
subtitle="Login location change"
|
|
size={110}
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
<View className="bg-lightGray rounded-lg p-4 mb-4">
|
|
<Text className="text-xl font-bold mb-4 text-black">
|
|
User Report (High Risk)
|
|
</Text>
|
|
<Text className="font-normal text-black">Some high risk</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View className="w-full lg:w-1/2 lg:pl-2 flex-1">
|
|
{isLoading ? (
|
|
<View className="bg-lightGray rounded-lg p-4 flex-1 items-center justify-center">
|
|
<LoadingSpinner />
|
|
</View>
|
|
) : error ? (
|
|
<View className="bg-lightGray rounded-lg p-4">
|
|
<NoData
|
|
onRetry={refetch}
|
|
message="No todos found"
|
|
isRetrying={isFetching}
|
|
/>
|
|
</View>
|
|
) : (
|
|
<View>
|
|
<View className="bg-lightGray rounded-lg p-4 mb-4">
|
|
<Pressable
|
|
onPress={() => router.push("/(tabs)/accounts/todos")}
|
|
>
|
|
<Text className="text-xl font-bold mb-4 text-black">
|
|
Your To-Do List
|
|
</Text>
|
|
</Pressable>
|
|
<ToDoList
|
|
todos={myTodos}
|
|
emptyMessage="No tasks assigned to you"
|
|
/>
|
|
</View>
|
|
|
|
{user?.role === RoleEnum.MANAGER && (
|
|
<View className="bg-lightGray rounded-lg p-4 mb-4">
|
|
<Pressable
|
|
onPress={() => router.push("/(tabs)/accounts/todos")}
|
|
>
|
|
<Text className="text-xl font-bold mb-4 text-black">
|
|
Your Team To-Do List
|
|
</Text>
|
|
</Pressable>
|
|
|
|
<ToDoList
|
|
todos={teamTodos}
|
|
emptyMessage="No tasks assigned to your team"
|
|
/>
|
|
</View>
|
|
)}
|
|
</View>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default Dashboard;
|