feat(mobile): task management bb-445

apps/mobile/src/libs/components/components.tsx

@@ -38,6 +38,7 @@ export { default as MaskedView } from "@react-native-masked-view/masked-view";
 export {
 	ActivityIndicator,
 	Image,
+	ImageBackground,
 	KeyboardAvoidingView,
 	Pressable,
 	ScrollView,

apps/mobile/src/libs/components/page-switcher/page-switcher.tsx

@@ -9,22 +9,26 @@ import { styles } from "./style";
 
 type PageSwitcherProperties = {
 	activeTab: string;
+	isDisabled?: boolean;
 	onTabChange: (tab: string) => void;
 	style?: StyleProp<ViewStyle>;
 	tabs: string[];
 };
 
 const PageSwitcher: React.FC<PageSwitcherProperties> = ({
 	activeTab,
+	isDisabled = false,
 	onTabChange,
 	style,
 	tabs,
 }) => {
 	const handleTabPress = useCallback(
 		(tab: string): void => {
-			onTabChange(tab);
+			if (!isDisabled) {
+				onTabChange(tab);
+			}
 		},
-		[onTabChange],
+		[onTabChange, isDisabled],
 	);
 
 	const handlePress = (tab: string): (() => void) => {
@@ -46,6 +50,7 @@ const PageSwitcher: React.FC<PageSwitcherProperties> = ({
 					globalStyles.pv8,
 					styles.tab,
 					isActive ? styles.activeTab : styles.inactiveTab,
+					isDisabled && styles.disabledTab,
 				]}
 			>
 				<Text

apps/mobile/src/libs/components/page-switcher/style.ts

@@ -13,6 +13,9 @@ const styles = StyleSheet.create({
 		backgroundColor: BaseColor.EXTRA_LIGHT_GRAY,
 		borderRadius: 30,
 	},
+	disabledTab: {
+		opacity: 0.5,
+	},
 	inactive: {
 		color: BaseColor.GRAY,
 	},

apps/mobile/src/libs/components/task-card/styles.ts

@@ -8,6 +8,7 @@ const styles = StyleSheet.create({
 		borderTopWidth: 1,
 	},
 	container: {
+		backgroundColor: BaseColor.BG_WHITE,
 		borderColor: BaseColor.LIGHT_GRAY,
 		borderRadius: 16,
 		borderWidth: 1,

apps/mobile/src/screens/tasks/styles.ts

@@ -3,9 +3,19 @@ import { StyleSheet } from "react-native";
 import { BaseColor } from "~/libs/enums/enums";
 
 const styles = StyleSheet.create({
+	background: {
+		backgroundColor: "rgba(255, 255, 255, 0.9)",
+	},
+	backgroundContainer: {
+		marginVertical: -10,
+	},
 	container: {
 		backgroundColor: BaseColor.BG_WHITE,
 	},
+	empty: {
+		opacity: 1,
+		textAlign: "center",
+	},
 	switch: {
 		maxWidth: "50%",
 	},

apps/mobile/src/screens/tasks/tasks.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import {
+	ImageBackground,
 	LoaderWrapper,
 	PageSwitcher,
 	ScreenWrapper,
@@ -9,7 +10,7 @@ import {
 	Text,
 	View,
 } from "~/libs/components/components";
-import { DataStatus } from "~/libs/enums/enums";
+import { DataStatus, NumericalValue } from "~/libs/enums/enums";
 import {
 	useAppDispatch,
 	useAppSelector,
@@ -18,7 +19,8 @@ import {
 	useState,
 } from "~/libs/hooks/hooks";
 import { globalStyles } from "~/libs/styles/styles";
-import { type ValueOf } from "~/libs/types/types";
+import { type ImageSourcePropType, type ValueOf } from "~/libs/types/types";
+import { type TaskDto } from "~/packages/tasks/tasks";
 import { type UserDto } from "~/packages/users/users";
 import { actions as taskActions } from "~/slices/task/task";
 import { actions as userActions } from "~/slices/users/users";
@@ -36,6 +38,15 @@ const Tasks: React.FC = () => {
 		TasksMode.CURRENT,
 	);
 
+	const currentTasks: TaskDto[] = tasks.filter(
+		(task) => task.status === TaskStatus.CURRENT,
+	);
+	const pastTasks: TaskDto[] = tasks.filter(
+		(task) => task.status === TaskStatus.COMPLETED,
+	);
+	const isCurrentEmpty = currentTasks.length === NumericalValue.ZERO;
+	const isPastEmpty = pastTasks.length === NumericalValue.ZERO;
+
 	useEffect(() => {
 		void dispatch(
 			userActions.getById({ id: (authenticatedUser as UserDto).id }),
@@ -104,16 +115,50 @@ const Tasks: React.FC = () => {
 						tabs={[TaskTab.ACTIVE, TaskTab.PAST]}
 					/>
 				</View>
-				<ScrollView>
-					{tasks.map((task) => (
-						<TaskCard
-							key={task.id}
-							onComplete={handleComplete}
-							onSkip={handleSkip}
-							task={task}
-						/>
-					))}
-				</ScrollView>
+				<ImageBackground
+					resizeMode="cover"
+					source={
+						require("~/assets/images/background.png") as ImageSourcePropType
+					}
+					style={[globalStyles.flex1, styles.backgroundContainer]}
+				>
+					<View style={[globalStyles.flex1, styles.background]}>
+						{(isCurrentEmpty && mode === TasksMode.CURRENT) ||
+						(isPastEmpty && mode === TasksMode.PAST) ? (
+							<View
+								style={[
+									globalStyles.flex1,
+									globalStyles.alignItemsCenter,
+									globalStyles.justifyContentCenter,
+								]}
+							>
+								<Text
+									preset="subheading"
+									style={[globalStyles.ph32, styles.empty]}
+									weight="bold"
+								>
+									{mode === TasksMode.CURRENT
+										? "You don't have any active tasks"
+										: "You don't have any completed tasks"}
+								</Text>
+							</View>
+						) : (
+							<ScrollView
+								showsVerticalScrollIndicator={false}
+								style={globalStyles.mt8}
+							>
+								{tasks.map((task) => (
+									<TaskCard
+										key={task.id}
+										onComplete={handleComplete}
+										onSkip={handleSkip}
+										task={task}
+									/>
+								))}
+							</ScrollView>
+						)}
+					</View>
+				</ImageBackground>
 			</LoaderWrapper>
 		</ScreenWrapper>
 	);