UI Updates and Bug Fixes
This commit is contained in:
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* This file is a central export point for all assets (images, icons, etc.)
|
||||
* Example:
|
||||
* export const Logo = require('./images/logo.png');
|
||||
* export const Icons = { home: require('./icons/home.png') };
|
||||
*/
|
||||
|
||||
export {};
|
||||
@@ -0,0 +1,105 @@
|
||||
import React from 'react';
|
||||
import { TouchableOpacity, TouchableOpacityProps, ActivityIndicator, GestureResponderEvent, StyleProp, ViewStyle, StyleSheet } from 'react-native';
|
||||
import { Typography } from './Typography';
|
||||
|
||||
interface ButtonProps extends TouchableOpacityProps {
|
||||
variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
|
||||
title: string;
|
||||
loading?: boolean;
|
||||
onPress?: (event: GestureResponderEvent) => void;
|
||||
disabled?: boolean;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
}
|
||||
|
||||
export const Button: React.FC<ButtonProps> = ({
|
||||
variant = 'primary',
|
||||
title,
|
||||
loading = false,
|
||||
disabled,
|
||||
style,
|
||||
...props
|
||||
}) => {
|
||||
const getBackgroundStyle = () => {
|
||||
if (disabled) return styles.bgDisabled;
|
||||
switch (variant) {
|
||||
case 'primary':
|
||||
return styles.bgPrimary;
|
||||
case 'secondary':
|
||||
return styles.bgSecondary;
|
||||
case 'outline':
|
||||
return styles.bgOutline;
|
||||
case 'ghost':
|
||||
return styles.bgGhost;
|
||||
default:
|
||||
return styles.bgPrimary;
|
||||
}
|
||||
};
|
||||
|
||||
const getTextStyle = () => {
|
||||
if (disabled) return styles.textDisabled;
|
||||
switch (variant) {
|
||||
case 'primary':
|
||||
case 'secondary':
|
||||
return styles.textWhite;
|
||||
case 'outline':
|
||||
case 'ghost':
|
||||
return styles.textPrimary;
|
||||
default:
|
||||
return styles.textWhite;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[styles.container, getBackgroundStyle(), style]}
|
||||
disabled={disabled || loading}
|
||||
activeOpacity={0.8}
|
||||
{...props}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator color={variant === 'outline' || variant === 'ghost' ? '#4F46E5' : '#FFFFFF'} />
|
||||
) : (
|
||||
<Typography weight="medium" style={getTextStyle()}>
|
||||
{title}
|
||||
</Typography>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 24,
|
||||
borderRadius: 12,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
bgDisabled: {
|
||||
backgroundColor: '#D1D5DB',
|
||||
},
|
||||
bgPrimary: {
|
||||
backgroundColor: '#4F46E5',
|
||||
},
|
||||
bgSecondary: {
|
||||
backgroundColor: '#10B981',
|
||||
},
|
||||
bgOutline: {
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: '#4F46E5',
|
||||
borderWidth: 2,
|
||||
},
|
||||
bgGhost: {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
textDisabled: {
|
||||
color: '#6B7280',
|
||||
},
|
||||
textWhite: {
|
||||
color: '#FFFFFF',
|
||||
},
|
||||
textPrimary: {
|
||||
color: '#4F46E5',
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import { View, ViewProps, StyleProp, ViewStyle, StyleSheet } from 'react-native';
|
||||
|
||||
interface CardProps extends ViewProps {
|
||||
children: React.ReactNode;
|
||||
noPadding?: boolean;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
}
|
||||
|
||||
export const Card: React.FC<CardProps> = ({
|
||||
children,
|
||||
noPadding = false,
|
||||
style,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
styles.card,
|
||||
noPadding ? null : styles.padding,
|
||||
style
|
||||
]}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: '#F3F4F6', // gray-100
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 15,
|
||||
elevation: 2,
|
||||
},
|
||||
padding: {
|
||||
padding: 16, // p-4
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,72 @@
|
||||
import React from 'react';
|
||||
import { View, TouchableOpacity, StyleSheet } from 'react-native';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
import { ChevronLeft } from 'lucide-react-native';
|
||||
import { Typography } from './Typography';
|
||||
import { useResponsiveLayout } from '../../hooks/useResponsiveLayout';
|
||||
import { THEME } from '../../constants/theme';
|
||||
|
||||
interface HeaderProps {
|
||||
title: string;
|
||||
showBack?: boolean;
|
||||
rightComponent?: React.ReactNode;
|
||||
}
|
||||
|
||||
export const Header: React.FC<HeaderProps> = ({ title, showBack = false, rightComponent }) => {
|
||||
const navigation = useNavigation();
|
||||
const { screenPadding } = useResponsiveLayout();
|
||||
|
||||
return (
|
||||
<View style={[styles.header, { paddingHorizontal: screenPadding }]}>
|
||||
<View style={styles.leftContainer}>
|
||||
{showBack && (
|
||||
<TouchableOpacity
|
||||
onPress={() => navigation.goBack()}
|
||||
style={styles.backButton}
|
||||
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
||||
>
|
||||
<ChevronLeft color="#FFF" size={26} strokeWidth={2.5} />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
<Typography variant="h3" weight="bold" style={styles.title}>
|
||||
{title}
|
||||
</Typography>
|
||||
</View>
|
||||
{rightComponent && (
|
||||
<View style={styles.rightContainer}>
|
||||
{rightComponent}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
header: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 16,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: THEME.colors.primary, // Primary brand color
|
||||
},
|
||||
leftContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
rightContainer: {
|
||||
justifyContent: 'center',
|
||||
},
|
||||
backButton: {
|
||||
marginRight: 12,
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: 'rgba(255,255,255,0.2)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
title: {
|
||||
color: '#FFFFFF',
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,70 @@
|
||||
import React from 'react';
|
||||
import { TextInput, TextInputProps, View, StyleSheet } from 'react-native';
|
||||
import { Typography } from './Typography';
|
||||
|
||||
export interface InputProps extends TextInputProps {
|
||||
label?: string;
|
||||
error?: string;
|
||||
placeholder?: string;
|
||||
keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad';
|
||||
autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
|
||||
secureTextEntry?: boolean;
|
||||
value?: string;
|
||||
onChangeText?: (text: string) => void;
|
||||
style?: any;
|
||||
labelStyle?: any;
|
||||
}
|
||||
|
||||
export function Input({ label, error, style, labelStyle, ...props }: InputProps) {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{label && (
|
||||
<Typography variant="caption" weight="medium" style={[styles.label, labelStyle]}>
|
||||
{label}
|
||||
</Typography>
|
||||
)}
|
||||
<TextInput
|
||||
style={[
|
||||
styles.input,
|
||||
error ? styles.inputError : null,
|
||||
style,
|
||||
]}
|
||||
placeholderTextColor="#9CA3AF"
|
||||
{...props}
|
||||
/>
|
||||
{error && (
|
||||
<Typography variant="caption" style={styles.errorText}>
|
||||
{error}
|
||||
</Typography>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
marginBottom: 16,
|
||||
width: '100%',
|
||||
},
|
||||
label: {
|
||||
marginBottom: 6,
|
||||
color: '#374151', // gray-700
|
||||
},
|
||||
input: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderWidth: 1,
|
||||
borderColor: '#D1D5DB', // gray-300
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 14,
|
||||
fontSize: 16,
|
||||
color: '#111827', // gray-900
|
||||
},
|
||||
inputError: {
|
||||
borderColor: '#EF4444', // red-500
|
||||
},
|
||||
errorText: {
|
||||
color: '#EF4444',
|
||||
marginTop: 4,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,92 @@
|
||||
import React from 'react';
|
||||
import { Text, TextProps, StyleProp, TextStyle, StyleSheet } from 'react-native';
|
||||
import { useResponsiveLayout } from '../../hooks/useResponsiveLayout';
|
||||
|
||||
interface TypographyProps extends TextProps {
|
||||
variant?: 'h1' | 'h2' | 'h3' | 'body' | 'caption';
|
||||
weight?: 'normal' | 'medium' | 'bold';
|
||||
children: React.ReactNode;
|
||||
style?: StyleProp<TextStyle>;
|
||||
}
|
||||
|
||||
export const Typography: React.FC<TypographyProps> = ({
|
||||
variant = 'body',
|
||||
weight = 'normal',
|
||||
children,
|
||||
style,
|
||||
...props
|
||||
}) => {
|
||||
const { scale } = useResponsiveLayout();
|
||||
|
||||
const getVariantStyles = () => {
|
||||
switch (variant) {
|
||||
case 'h1': return styles.h1;
|
||||
case 'h2': return styles.h2;
|
||||
case 'h3': return styles.h3;
|
||||
case 'caption': return styles.caption;
|
||||
case 'body':
|
||||
default: return styles.body;
|
||||
}
|
||||
};
|
||||
|
||||
const getWeightStyles = () => {
|
||||
switch (weight) {
|
||||
case 'bold': return styles.bold;
|
||||
case 'medium': return styles.medium;
|
||||
case 'normal':
|
||||
default: return styles.normal;
|
||||
}
|
||||
};
|
||||
|
||||
const variantStyle = StyleSheet.flatten(getVariantStyles());
|
||||
const scaledStyle = {
|
||||
fontSize: scale(variantStyle.fontSize as number),
|
||||
lineHeight: scale(variantStyle.lineHeight as number),
|
||||
};
|
||||
|
||||
return (
|
||||
<Text
|
||||
style={[variantStyle, scaledStyle, getWeightStyles(), style]}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
h1: {
|
||||
fontSize: 30,
|
||||
lineHeight: 36,
|
||||
color: '#111827', // text-gray-900
|
||||
},
|
||||
h2: {
|
||||
fontSize: 24,
|
||||
lineHeight: 32,
|
||||
color: '#111827', // text-gray-900
|
||||
},
|
||||
h3: {
|
||||
fontSize: 20,
|
||||
lineHeight: 28,
|
||||
color: '#111827', // text-gray-900
|
||||
},
|
||||
body: {
|
||||
fontSize: 16,
|
||||
lineHeight: 24,
|
||||
color: '#111827', // text-gray-900
|
||||
},
|
||||
caption: {
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
color: '#6B7280', // text-gray-500
|
||||
},
|
||||
bold: {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
medium: {
|
||||
fontWeight: '500',
|
||||
},
|
||||
normal: {
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
import { API_BASE_URL as ENV_API_BASE_URL, X_API_KEY as ENV_X_API_KEY } from '@env';
|
||||
|
||||
export const ENV = {
|
||||
API_BASE_URL: ENV_API_BASE_URL || 'http://localhost:8000',
|
||||
X_API_KEY: ENV_X_API_KEY || '',
|
||||
};
|
||||
@@ -0,0 +1,46 @@
|
||||
import { Caregiver } from '../types';
|
||||
|
||||
export const CAREGIVERS: Caregiver[] = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Sarah Jenkins',
|
||||
role: 'Registered Nurse',
|
||||
rating: 4.8,
|
||||
reviews: 124,
|
||||
experienceYears: 5,
|
||||
about: 'Sarah is a dedicated and compassionate Registered Nurse with over 5 years of experience in providing specialized elder care. She is certified in CPR and First Aid.',
|
||||
specialties: ['Physical Therapy', 'Dementia Care', 'Medication Management'],
|
||||
availability: {
|
||||
weekdays: '8:00 AM - 6:00 PM',
|
||||
weekends: 'Upon request',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Michael Chen',
|
||||
role: 'Elder Care Specialist',
|
||||
rating: 4.9,
|
||||
reviews: 89,
|
||||
experienceYears: 8,
|
||||
about: 'Michael has a deep understanding of geriatric care and specializes in creating engaging daily routines for seniors. He speaks fluent Mandarin and English.',
|
||||
specialties: ['Mobility Assistance', 'Meal Preparation', 'Companionship'],
|
||||
availability: {
|
||||
weekdays: '9:00 AM - 5:00 PM',
|
||||
weekends: 'Available',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Emma Davis',
|
||||
role: 'Physical Therapist',
|
||||
rating: 4.7,
|
||||
reviews: 156,
|
||||
experienceYears: 3,
|
||||
about: 'Emma is a certified Physical Therapist focusing on post-surgery recovery and mobility improvement for elderly patients.',
|
||||
specialties: ['Post-surgery Care', 'Physical Therapy', 'Pain Management'],
|
||||
availability: {
|
||||
weekdays: 'Flexible',
|
||||
weekends: 'Not available',
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,23 @@
|
||||
export const THEME = {
|
||||
colors: {
|
||||
primary: 'navy',
|
||||
primaryLight: '#E0E7FF',
|
||||
primaryLighter: '#EEF2FF',
|
||||
background: '#F9FAFB',
|
||||
surface: '#FFFFFF',
|
||||
text: {
|
||||
primary: '#111827',
|
||||
secondary: '#6B7280',
|
||||
muted: '#9CA3AF',
|
||||
},
|
||||
border: '#F3F4F6',
|
||||
warning: '#EAB308',
|
||||
},
|
||||
spacing: {
|
||||
xs: 4,
|
||||
sm: 8,
|
||||
md: 16,
|
||||
lg: 24,
|
||||
xl: 32,
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,23 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Caregiver } from '../types';
|
||||
import { CAREGIVERS } from '../constants/mockData';
|
||||
|
||||
export const useCaregivers = () => {
|
||||
const [caregivers, setCaregivers] = useState<Caregiver[]>(CAREGIVERS);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
return { caregivers, isLoading };
|
||||
};
|
||||
|
||||
export const useCaregiver = (id: string) => {
|
||||
const [caregiver, setCaregiver] = useState<Caregiver | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const found = CAREGIVERS.find((c) => c.id === id) || null;
|
||||
setCaregiver(found);
|
||||
setIsLoading(false);
|
||||
}, [id]);
|
||||
|
||||
return { caregiver, isLoading };
|
||||
};
|
||||
@@ -0,0 +1,47 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
|
||||
interface UseFetchResult<T> {
|
||||
data: T | null;
|
||||
isLoading: boolean;
|
||||
error: Error | null;
|
||||
refetch: () => Promise<void>;
|
||||
}
|
||||
|
||||
/**
|
||||
* A generic hook for making API calls.
|
||||
*
|
||||
* @param url The API endpoint to fetch
|
||||
* @param options Optional fetch configuration (headers, method, etc.)
|
||||
* @returns { data, isLoading, error, refetch }
|
||||
*/
|
||||
export function useFetch<T = any>(url: string, options?: RequestInit): UseFetchResult<T> {
|
||||
const [data, setData] = useState<T | null>(null);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const response = await fetch(url, options);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const json = await response.json();
|
||||
setData(json as T);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e : new Error('An unknown error occurred'));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [url, options]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
return { data, isLoading, error, refetch: fetchData };
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { useWindowDimensions, Platform } from 'react-native';
|
||||
|
||||
export const useResponsiveLayout = () => {
|
||||
const { width, height } = useWindowDimensions();
|
||||
|
||||
// iPads and large Android tablets are typically 768px or wider
|
||||
const isTablet = width >= 768;
|
||||
const isLandscape = width > height;
|
||||
|
||||
// Responsive padding based on device type
|
||||
const screenPadding = isTablet ? 32 : 16;
|
||||
|
||||
// Function to slightly scale sizes on tablet
|
||||
const scale = (size: number) => (isTablet ? size * 1.25 : size);
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
isTablet,
|
||||
isLandscape,
|
||||
screenPadding,
|
||||
scale,
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,123 @@
|
||||
import React from 'react';
|
||||
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
||||
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
||||
import { Home, Calendar, Settings } from 'lucide-react-native';
|
||||
|
||||
import { HomeScreen } from '../screens/HomeScreen';
|
||||
import { ProfileScreen } from '../screens/ProfileScreen';
|
||||
import { AppointmentsScreen } from '../screens/AppointmentsScreen';
|
||||
import { SettingsScreen } from '../screens/SettingsScreen';
|
||||
import { LoginScreen } from '../screens/LoginScreen';
|
||||
import { PersonalInformationScreen } from '../screens/PersonalInformationScreen';
|
||||
import { ManageSkillsScreen } from '../screens/ManageSkillsScreen';
|
||||
import { AddSkillScreen } from '../screens/AddSkillScreen';
|
||||
import { AvailabilityListScreen } from '../screens/AvailabilityListScreen';
|
||||
import { AddAvailabilityScreen } from '../screens/AddAvailabilityScreen';
|
||||
import { EditAvailabilityScreen } from '../screens/EditAvailabilityScreen';
|
||||
|
||||
export type RootStackParamList = {
|
||||
Login: undefined;
|
||||
MainTabs: undefined;
|
||||
Profile: { caregiverId: string };
|
||||
PersonalInformation: undefined;
|
||||
ManageSkills: undefined;
|
||||
AddSkill: undefined;
|
||||
AvailabilityList: undefined;
|
||||
AddAvailability: undefined;
|
||||
EditAvailability: {
|
||||
day_of_week: string;
|
||||
start_time: string;
|
||||
end_time: string;
|
||||
};
|
||||
};
|
||||
|
||||
export type TabParamList = {
|
||||
HomeTab: undefined;
|
||||
Appointments: undefined;
|
||||
Settings: undefined;
|
||||
};
|
||||
|
||||
const Stack = createNativeStackNavigator<RootStackParamList>();
|
||||
const Tab = createBottomTabNavigator<TabParamList>();
|
||||
|
||||
function MainTabs() {
|
||||
return (
|
||||
<Tab.Navigator
|
||||
id={undefined}
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
tabBarStyle: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderTopWidth: 0,
|
||||
elevation: 0,
|
||||
shadowOpacity: 0,
|
||||
height: 60,
|
||||
paddingBottom: 8,
|
||||
paddingTop: 8,
|
||||
},
|
||||
tabBarActiveTintColor: 'navy', // Primary color
|
||||
tabBarInactiveTintColor: '#9CA3AF',
|
||||
}}
|
||||
>
|
||||
<Tab.Screen
|
||||
name="HomeTab"
|
||||
component={HomeScreen}
|
||||
options={{
|
||||
tabBarLabel: 'Home',
|
||||
tabBarIcon: ({ color, size }) => <Home color={color} size={size} />,
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="Appointments"
|
||||
component={AppointmentsScreen}
|
||||
options={{
|
||||
tabBarLabel: 'Appointments',
|
||||
tabBarIcon: ({ color, size }) => <Calendar color={color} size={size} />,
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="Settings"
|
||||
component={SettingsScreen}
|
||||
options={{
|
||||
tabBarLabel: 'Settings',
|
||||
tabBarIcon: ({ color, size }) => <Settings color={color} size={size} />,
|
||||
}}
|
||||
/>
|
||||
</Tab.Navigator>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const MyTheme = {
|
||||
...DefaultTheme,
|
||||
colors: {
|
||||
...DefaultTheme.colors,
|
||||
background: '#F9FAFB',
|
||||
},
|
||||
};
|
||||
|
||||
export const AppNavigator = () => {
|
||||
return (
|
||||
<NavigationContainer theme={MyTheme}>
|
||||
<Stack.Navigator
|
||||
id={undefined}
|
||||
initialRouteName="Login"
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
contentStyle: { backgroundColor: '#F9FAFB' }
|
||||
}}
|
||||
>
|
||||
<Stack.Screen name="Login" component={LoginScreen} />
|
||||
<Stack.Screen name="MainTabs" component={MainTabs} />
|
||||
<Stack.Screen name="Profile" component={ProfileScreen} />
|
||||
<Stack.Screen name="PersonalInformation" component={PersonalInformationScreen} />
|
||||
<Stack.Screen name="ManageSkills" component={ManageSkillsScreen} />
|
||||
<Stack.Screen name="AddSkill" component={AddSkillScreen} />
|
||||
<Stack.Screen name="AvailabilityList" component={AvailabilityListScreen} />
|
||||
<Stack.Screen name="AddAvailability" component={AddAvailabilityScreen} />
|
||||
<Stack.Screen name="EditAvailability" component={EditAvailabilityScreen} />
|
||||
</Stack.Navigator>
|
||||
</NavigationContainer>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,271 @@
|
||||
import React, { useState } from 'react';
|
||||
import { View, StyleSheet, TouchableOpacity, Alert, Platform } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
import DateTimePicker from '@react-native-community/datetimepicker';
|
||||
import { Typography } from '../components/ui/Typography';
|
||||
import { Header } from '../components/ui/Header';
|
||||
import { profileService } from '../services/profileService';
|
||||
import { THEME } from '../constants/theme';
|
||||
import { Clock, Calendar, Check } from 'lucide-react-native';
|
||||
|
||||
const DAYS_OF_WEEK = [
|
||||
{ label: 'Monday', value: 'monday' },
|
||||
{ label: 'Tuesday', value: 'tuesday' },
|
||||
{ label: 'Wednesday', value: 'wednesday' },
|
||||
{ label: 'Thursday', value: 'thursday' },
|
||||
{ label: 'Friday', value: 'friday' },
|
||||
{ label: 'Saturday', value: 'saturday' },
|
||||
{ label: 'Sunday', value: 'sunday' },
|
||||
];
|
||||
|
||||
export const AddAvailabilityScreen = () => {
|
||||
const navigation = useNavigation();
|
||||
|
||||
const [selectedDay, setSelectedDay] = useState('monday');
|
||||
const [showDayPicker, setShowDayPicker] = useState(false);
|
||||
|
||||
const [startTime, setStartTime] = useState(new Date(new Date().setHours(9, 0, 0, 0)));
|
||||
const [endTime, setEndTime] = useState(new Date(new Date().setHours(17, 0, 0, 0)));
|
||||
|
||||
const [showPicker, setShowPicker] = useState(false);
|
||||
const [pickerType, setPickerType] = useState<'start' | 'end'>('start');
|
||||
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const openTimePicker = (type: 'start' | 'end') => {
|
||||
setPickerType(type);
|
||||
setShowPicker(true);
|
||||
};
|
||||
|
||||
const handleTimeChange = (event: any, selectedDate?: Date) => {
|
||||
if (Platform.OS === 'android') {
|
||||
setShowPicker(false);
|
||||
}
|
||||
|
||||
if (event.type === 'dismissed' || !selectedDate) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (pickerType === 'start') {
|
||||
setStartTime(selectedDate);
|
||||
} else {
|
||||
setEndTime(selectedDate);
|
||||
}
|
||||
};
|
||||
|
||||
const formatTime = (date: Date) => {
|
||||
const hours = date.getHours().toString().padStart(2, '0');
|
||||
const minutes = date.getMinutes().toString().padStart(2, '0');
|
||||
return `${hours}:${minutes}`;
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
const payload = {
|
||||
day_of_week: selectedDay,
|
||||
start_time: formatTime(startTime),
|
||||
end_time: formatTime(endTime),
|
||||
is_available: 1
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
await profileService.addDayAvailability(payload);
|
||||
Alert.alert('Success', 'Availability added successfully.', [
|
||||
{ text: 'OK', onPress: () => navigation.goBack() }
|
||||
]);
|
||||
} catch (e: any) {
|
||||
Alert.alert('Error', e.response?.data?.message || 'Failed to add availability.');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
// @ts-ignore
|
||||
<SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
|
||||
<Header title="Add Availability" showBack />
|
||||
|
||||
<View style={styles.content}>
|
||||
<View style={styles.card}>
|
||||
<Typography variant="caption" style={styles.label}>Select Day</Typography>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.inputBox}
|
||||
onPress={() => setShowDayPicker(!showDayPicker)}
|
||||
>
|
||||
<Calendar color="#6B7280" size={20} />
|
||||
<Typography variant="body" style={styles.inputText}>
|
||||
{DAYS_OF_WEEK.find(d => d.value === selectedDay)?.label}
|
||||
</Typography>
|
||||
</TouchableOpacity>
|
||||
|
||||
{showDayPicker && (
|
||||
<View style={styles.dayPickerDropdown}>
|
||||
{DAYS_OF_WEEK.map(day => (
|
||||
<TouchableOpacity
|
||||
key={day.value}
|
||||
style={[styles.dayOption, selectedDay === day.value && styles.dayOptionSelected]}
|
||||
onPress={() => {
|
||||
setSelectedDay(day.value);
|
||||
setShowDayPicker(false);
|
||||
}}
|
||||
>
|
||||
<Typography variant="body" style={selectedDay === day.value ? styles.dayOptionTextSelected : styles.dayOptionText}>
|
||||
{day.label}
|
||||
</Typography>
|
||||
{selectedDay === day.value && <Check color={THEME.colors.primary} size={16} />}
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View style={styles.timeRow}>
|
||||
<View style={styles.timeColumn}>
|
||||
<Typography variant="caption" style={styles.label}>Start Time</Typography>
|
||||
<TouchableOpacity
|
||||
style={styles.inputBox}
|
||||
onPress={() => openTimePicker('start')}
|
||||
>
|
||||
<Clock color="#6B7280" size={20} />
|
||||
<Typography variant="body" style={styles.inputText}>
|
||||
{formatTime(startTime)}
|
||||
</Typography>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.timeSpacer} />
|
||||
|
||||
<View style={styles.timeColumn}>
|
||||
<Typography variant="caption" style={styles.label}>End Time</Typography>
|
||||
<TouchableOpacity
|
||||
style={styles.inputBox}
|
||||
onPress={() => openTimePicker('end')}
|
||||
>
|
||||
<Clock color="#6B7280" size={20} />
|
||||
<Typography variant="body" style={styles.inputText}>
|
||||
{formatTime(endTime)}
|
||||
</Typography>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.footer}>
|
||||
<TouchableOpacity
|
||||
style={styles.saveButton}
|
||||
onPress={handleSave}
|
||||
disabled={saving}
|
||||
>
|
||||
<Typography variant="h3" weight="bold" style={styles.saveButtonText}>
|
||||
{saving ? 'Saving...' : 'Add Day'}
|
||||
</Typography>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{showPicker && (
|
||||
<DateTimePicker
|
||||
value={pickerType === 'start' ? startTime : endTime}
|
||||
mode="time"
|
||||
is24Hour={true}
|
||||
display="default"
|
||||
onChange={handleTimeChange}
|
||||
/>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F9FAFB',
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
padding: 16,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: '#FFF',
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
},
|
||||
label: {
|
||||
color: '#6B7280',
|
||||
marginBottom: 8,
|
||||
fontWeight: 'bold',
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
inputBox: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderWidth: 1,
|
||||
borderColor: '#D1D5DB',
|
||||
borderRadius: 8,
|
||||
height: 50,
|
||||
paddingHorizontal: 12,
|
||||
backgroundColor: '#F9FAFB',
|
||||
marginBottom: 20,
|
||||
},
|
||||
inputText: {
|
||||
marginLeft: 12,
|
||||
color: '#111827',
|
||||
fontSize: 16,
|
||||
},
|
||||
dayPickerDropdown: {
|
||||
backgroundColor: '#FFF',
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
borderRadius: 8,
|
||||
marginTop: -16,
|
||||
marginBottom: 20,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
dayOption: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
padding: 14,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#F3F4F6',
|
||||
},
|
||||
dayOptionSelected: {
|
||||
backgroundColor: '#EEF2FF',
|
||||
},
|
||||
dayOptionText: {
|
||||
color: '#374151',
|
||||
},
|
||||
dayOptionTextSelected: {
|
||||
color: THEME.colors.primary,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
timeRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
timeColumn: {
|
||||
flex: 1,
|
||||
},
|
||||
timeSpacer: {
|
||||
width: 16,
|
||||
},
|
||||
footer: {
|
||||
padding: 16,
|
||||
backgroundColor: '#FFF',
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#E5E7EB',
|
||||
},
|
||||
saveButton: {
|
||||
backgroundColor: THEME.colors.primary,
|
||||
height: 50,
|
||||
borderRadius: 8,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
saveButtonText: {
|
||||
color: '#FFF',
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,358 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { View, StyleSheet, ScrollView, ActivityIndicator, TouchableOpacity, Alert } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
import { Typography } from '../components/ui/Typography';
|
||||
import { Header } from '../components/ui/Header';
|
||||
import { profileService } from '../services/profileService';
|
||||
import { THEME } from '../constants/theme';
|
||||
import { Check, Info } from 'lucide-react-native';
|
||||
|
||||
export const AddSkillScreen = () => {
|
||||
const navigation = useNavigation();
|
||||
const [ownSkills, setOwnSkills] = useState<any[]>([]);
|
||||
const [careTypes, setCareTypes] = useState<any[]>([]);
|
||||
const [subTypes, setSubTypes] = useState<any[]>([]);
|
||||
|
||||
const [selectedCareType, setSelectedCareType] = useState<string | null>(null);
|
||||
const [selectedSubTypes, setSelectedSubTypes] = useState<string[]>([]);
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loadingSubTypes, setLoadingSubTypes] = useState(false);
|
||||
const [isAdding, setIsAdding] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchInitialData = async () => {
|
||||
try {
|
||||
const [skillsData, typesData] = await Promise.all([
|
||||
profileService.getOwnSkills(),
|
||||
profileService.getCareTypes()
|
||||
]);
|
||||
setOwnSkills(skillsData || []);
|
||||
setCareTypes(typesData || []);
|
||||
} catch (err) {
|
||||
console.error('Failed to load data', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchInitialData();
|
||||
}, []);
|
||||
|
||||
const handleSelectCareType = async (slug: string) => {
|
||||
if (selectedCareType === slug) return;
|
||||
|
||||
setSelectedCareType(slug);
|
||||
setSelectedSubTypes([]);
|
||||
setLoadingSubTypes(true);
|
||||
|
||||
try {
|
||||
const data = await profileService.getCareSubTypes(slug);
|
||||
setSubTypes(data || []);
|
||||
} catch (err) {
|
||||
console.error('Failed to load sub types', err);
|
||||
Alert.alert('Error', 'Failed to load sub skills.');
|
||||
} finally {
|
||||
setLoadingSubTypes(false);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleSubType = (slug: string) => {
|
||||
setSelectedSubTypes(prev => {
|
||||
if (prev.includes(slug)) {
|
||||
return prev.filter(s => s !== slug);
|
||||
} else {
|
||||
return [...prev, slug];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddSkills = async () => {
|
||||
if (selectedSubTypes.length === 0) return;
|
||||
setIsAdding(true);
|
||||
try {
|
||||
await profileService.addSkills(selectedSubTypes);
|
||||
Alert.alert('Success', 'Skills added successfully!', [
|
||||
{ text: 'OK', onPress: () => navigation.goBack() }
|
||||
]);
|
||||
} catch (e: any) {
|
||||
Alert.alert('Error', e.response?.data?.message || 'Failed to add skills.');
|
||||
} finally {
|
||||
setIsAdding(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
// @ts-ignore
|
||||
<SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
|
||||
<Header title="Add New Skills" showBack />
|
||||
|
||||
{loading ? (
|
||||
<View style={styles.centerContent}>
|
||||
<ActivityIndicator size="large" color={THEME.colors.primary} />
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.content}>
|
||||
<ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
|
||||
|
||||
<View style={styles.infoBanner}>
|
||||
<Info color="#1D4ED8" size={20} />
|
||||
<Typography variant="caption" style={styles.infoText}>
|
||||
First select a Care Type category, then tap to select one or multiple Sub Skills.
|
||||
</Typography>
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<Typography variant="caption" style={styles.label}>1. Select Care Type</Typography>
|
||||
<ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.horizontalScroll}>
|
||||
{careTypes.map(type => (
|
||||
<TouchableOpacity
|
||||
key={type.slug}
|
||||
style={[styles.chip, selectedCareType === type.slug && styles.chipSelected]}
|
||||
onPress={() => handleSelectCareType(type.slug)}
|
||||
>
|
||||
<Typography
|
||||
variant="body"
|
||||
style={selectedCareType === type.slug ? styles.chipTextSelected : styles.chipText}
|
||||
>
|
||||
{type.name}
|
||||
</Typography>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
{selectedCareType && (
|
||||
<View style={styles.section}>
|
||||
<Typography variant="caption" style={styles.label}>2. Select Sub Skills</Typography>
|
||||
|
||||
{loadingSubTypes ? (
|
||||
<View style={styles.subTypeLoader}>
|
||||
<ActivityIndicator size="large" color={THEME.colors.primary} />
|
||||
</View>
|
||||
) : subTypes.length === 0 ? (
|
||||
<View style={styles.emptyState}>
|
||||
<Typography variant="body" style={styles.emptyText}>
|
||||
No sub-skills found for this category.
|
||||
</Typography>
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.subTypeGrid}>
|
||||
{subTypes.map(subType => {
|
||||
const isSelected = selectedSubTypes.includes(subType.slug);
|
||||
const isOwned = ownSkills.some(own => own.slug === subType.slug);
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={subType.slug}
|
||||
disabled={isOwned}
|
||||
style={[
|
||||
styles.subTypeCard,
|
||||
isSelected && styles.subTypeCardSelected,
|
||||
isOwned && styles.subTypeCardDisabled
|
||||
]}
|
||||
onPress={() => toggleSubType(subType.slug)}
|
||||
>
|
||||
<View style={[styles.checkbox, isSelected && styles.checkboxSelected, isOwned && styles.checkboxDisabled]}>
|
||||
{(isSelected || isOwned) && <Check color="#FFF" size={14} />}
|
||||
</View>
|
||||
<Typography
|
||||
variant="caption"
|
||||
style={[
|
||||
styles.subTypeText,
|
||||
isSelected && styles.subTypeTextSelected,
|
||||
isOwned && styles.subTypeTextDisabled
|
||||
]}
|
||||
>
|
||||
{subType.name}
|
||||
</Typography>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
<View style={styles.bottomSpacer} />
|
||||
</ScrollView>
|
||||
|
||||
<View style={styles.footer}>
|
||||
<TouchableOpacity
|
||||
style={[styles.addButton, selectedSubTypes.length === 0 && styles.addButtonDisabled]}
|
||||
onPress={handleAddSkills}
|
||||
disabled={selectedSubTypes.length === 0 || isAdding}
|
||||
>
|
||||
{isAdding ? (
|
||||
<ActivityIndicator size="small" color="#FFF" />
|
||||
) : (
|
||||
<Typography variant="h3" weight="bold" style={styles.addButtonText}>
|
||||
Add {selectedSubTypes.length > 0 ? selectedSubTypes.length : ''} Skill{selectedSubTypes.length !== 1 ? 's' : ''}
|
||||
</Typography>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F3F4F6',
|
||||
},
|
||||
centerContent: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
infoBanner: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#EFF6FF',
|
||||
padding: 16,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#DBEAFE',
|
||||
},
|
||||
infoText: {
|
||||
marginLeft: 12,
|
||||
color: '#1D4ED8',
|
||||
flex: 1,
|
||||
},
|
||||
section: {
|
||||
padding: 16,
|
||||
backgroundColor: '#FFF',
|
||||
marginBottom: 8,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#E5E7EB',
|
||||
},
|
||||
label: {
|
||||
color: '#6B7280',
|
||||
fontWeight: 'bold',
|
||||
textTransform: 'uppercase',
|
||||
marginBottom: 16,
|
||||
},
|
||||
horizontalScroll: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
chip: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
backgroundColor: '#F3F4F6',
|
||||
borderRadius: 24,
|
||||
marginRight: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
},
|
||||
chipSelected: {
|
||||
backgroundColor: THEME.colors.primary,
|
||||
borderColor: THEME.colors.primary,
|
||||
},
|
||||
chipText: {
|
||||
color: '#374151',
|
||||
fontWeight: '500',
|
||||
},
|
||||
chipTextSelected: {
|
||||
color: '#FFF',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
subTypeLoader: {
|
||||
padding: 40,
|
||||
alignItems: 'center',
|
||||
},
|
||||
emptyState: {
|
||||
padding: 24,
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#F9FAFB',
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
borderStyle: 'dashed',
|
||||
},
|
||||
emptyText: {
|
||||
color: '#6B7280',
|
||||
textAlign: 'center',
|
||||
},
|
||||
subTypeGrid: {
|
||||
flexDirection: 'column',
|
||||
},
|
||||
subTypeCard: {
|
||||
backgroundColor: '#F9FAFB',
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
marginBottom: 12,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
subTypeCardSelected: {
|
||||
backgroundColor: '#EEF2FF',
|
||||
borderColor: THEME.colors.primary,
|
||||
},
|
||||
subTypeCardDisabled: {
|
||||
opacity: 0.6,
|
||||
backgroundColor: '#F3F4F6',
|
||||
},
|
||||
checkbox: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 6,
|
||||
borderWidth: 2,
|
||||
borderColor: '#D1D5DB',
|
||||
backgroundColor: '#FFF',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 16,
|
||||
},
|
||||
checkboxSelected: {
|
||||
backgroundColor: THEME.colors.primary,
|
||||
borderColor: THEME.colors.primary,
|
||||
},
|
||||
checkboxDisabled: {
|
||||
backgroundColor: '#9CA3AF',
|
||||
borderColor: '#9CA3AF',
|
||||
},
|
||||
subTypeText: {
|
||||
flex: 1,
|
||||
color: '#374151',
|
||||
fontSize: 15,
|
||||
lineHeight: 22,
|
||||
},
|
||||
subTypeTextSelected: {
|
||||
color: THEME.colors.primary,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
subTypeTextDisabled: {
|
||||
color: '#9CA3AF',
|
||||
},
|
||||
bottomSpacer: {
|
||||
height: 20,
|
||||
},
|
||||
footer: {
|
||||
padding: 16,
|
||||
backgroundColor: '#FFF',
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#E5E7EB',
|
||||
},
|
||||
addButton: {
|
||||
backgroundColor: THEME.colors.primary,
|
||||
height: 54,
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
addButtonDisabled: {
|
||||
backgroundColor: '#9CA3AF',
|
||||
},
|
||||
addButtonText: {
|
||||
color: '#FFF',
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
import { View, StatusBar, StyleSheet } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { Typography } from '../components/ui/Typography';
|
||||
import { Header } from '../components/ui/Header';
|
||||
|
||||
export const AppointmentsScreen = () => {
|
||||
return (
|
||||
// @ts-ignore - TS types for SafeAreaView in this version incorrectly omit the style prop
|
||||
<SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
|
||||
<Header title="Appointments" showBack />
|
||||
<View style={styles.content}>
|
||||
<Typography variant="body" style={styles.subtitle}>
|
||||
Your upcoming appointments will appear here.
|
||||
</Typography>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F9FAFB',
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 16,
|
||||
},
|
||||
subtitle: {
|
||||
marginTop: 8,
|
||||
textAlign: 'center',
|
||||
color: '#6B7280',
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,243 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { View, StyleSheet, ScrollView, ActivityIndicator, TouchableOpacity } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { useFocusEffect, useNavigation } from '@react-navigation/native';
|
||||
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
||||
import { Typography } from '../components/ui/Typography';
|
||||
import { Header } from '../components/ui/Header';
|
||||
import { profileService, CaregiverAvailability } from '../services/profileService';
|
||||
import { THEME } from '../constants/theme';
|
||||
import { RootStackParamList } from '../navigation/AppNavigator';
|
||||
import { Plus, ChevronRight, Calendar } from 'lucide-react-native';
|
||||
|
||||
type NavigationProp = NativeStackNavigationProp<RootStackParamList, 'AvailabilityList'>;
|
||||
|
||||
export const AvailabilityListScreen = () => {
|
||||
const navigation = useNavigation<NavigationProp>();
|
||||
const [availability, setAvailability] = useState<CaregiverAvailability[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const fetchAvailability = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await profileService.getAvailability();
|
||||
// Only show days that are available (is_available === 1)
|
||||
const activeDays = data.filter((d: CaregiverAvailability) => d.is_available === 1);
|
||||
|
||||
// Sort by day of week
|
||||
const dayOrder = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
|
||||
activeDays.sort((a: CaregiverAvailability, b: CaregiverAvailability) => {
|
||||
return dayOrder.indexOf(a.day_of_week) - dayOrder.indexOf(b.day_of_week);
|
||||
});
|
||||
|
||||
setAvailability(activeDays);
|
||||
} catch (err) {
|
||||
console.error('Failed to load availability', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
fetchAvailability();
|
||||
}, [])
|
||||
);
|
||||
|
||||
return (
|
||||
// @ts-ignore
|
||||
<SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
|
||||
<Header title="My Schedule" showBack />
|
||||
|
||||
{loading ? (
|
||||
<View style={styles.centerContent}>
|
||||
<ActivityIndicator size="large" color={THEME.colors.primary} />
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.content}>
|
||||
<ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
|
||||
|
||||
<View style={styles.summaryCard}>
|
||||
<View style={styles.summaryIconContainer}>
|
||||
<Calendar color={THEME.colors.primary} size={28} />
|
||||
</View>
|
||||
<View style={styles.summaryTextContainer}>
|
||||
<Typography variant="h3" weight="bold" style={styles.summaryTitle}>
|
||||
{availability.length} Active Days
|
||||
</Typography>
|
||||
<Typography variant="body" style={styles.summarySubtitle}>
|
||||
Keep your schedule up to date to receive matched visit requests.
|
||||
</Typography>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.listContainer}>
|
||||
<Typography variant="h3" weight="bold" style={styles.sectionTitle}>
|
||||
Available Days
|
||||
</Typography>
|
||||
|
||||
{availability.length === 0 ? (
|
||||
<View style={styles.emptyState}>
|
||||
<Typography variant="body" style={styles.emptyText}>
|
||||
You haven't set any available days yet.
|
||||
</Typography>
|
||||
</View>
|
||||
) : (
|
||||
availability.map((item) => (
|
||||
<TouchableOpacity
|
||||
key={item.id || item.day_of_week}
|
||||
style={styles.dayCard}
|
||||
onPress={() => navigation.navigate('EditAvailability', {
|
||||
day_of_week: item.day_of_week,
|
||||
start_time: item.start_time,
|
||||
end_time: item.end_time
|
||||
})}
|
||||
>
|
||||
<View>
|
||||
<Typography variant="body" weight="bold" style={styles.dayName}>
|
||||
{item.day_of_week.charAt(0).toUpperCase() + item.day_of_week.slice(1)}
|
||||
</Typography>
|
||||
<Typography variant="caption" style={styles.timeRange}>
|
||||
{item.start_time.substring(0, 5)} - {item.end_time.substring(0, 5)}
|
||||
</Typography>
|
||||
</View>
|
||||
<ChevronRight color="#9CA3AF" size={20} />
|
||||
</TouchableOpacity>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
<View style={styles.bottomSpacer} />
|
||||
</ScrollView>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.fab}
|
||||
onPress={() => navigation.navigate('AddAvailability')}
|
||||
>
|
||||
<Plus color="#FFF" size={24} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F3F4F6',
|
||||
},
|
||||
centerContent: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
summaryCard: {
|
||||
margin: 16,
|
||||
backgroundColor: '#EEF2FF',
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderWidth: 1,
|
||||
borderColor: '#E0E7FF',
|
||||
},
|
||||
summaryIconContainer: {
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 28,
|
||||
backgroundColor: '#FFFFFF',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
shadowColor: THEME.colors.primary,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 8,
|
||||
elevation: 3,
|
||||
},
|
||||
summaryTextContainer: {
|
||||
flex: 1,
|
||||
marginLeft: 16,
|
||||
},
|
||||
summaryTitle: {
|
||||
color: '#3730A3',
|
||||
marginBottom: 4,
|
||||
fontSize: 20,
|
||||
},
|
||||
summarySubtitle: {
|
||||
color: '#4338CA',
|
||||
opacity: 0.8,
|
||||
fontSize: 13,
|
||||
lineHeight: 18,
|
||||
},
|
||||
listContainer: {
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
sectionTitle: {
|
||||
color: '#111827',
|
||||
marginBottom: 12,
|
||||
marginLeft: 4,
|
||||
},
|
||||
emptyState: {
|
||||
padding: 24,
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#FFF',
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
borderStyle: 'dashed',
|
||||
},
|
||||
emptyText: {
|
||||
color: '#6B7280',
|
||||
textAlign: 'center',
|
||||
},
|
||||
dayCard: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: '#FFF',
|
||||
padding: 16,
|
||||
borderRadius: 12,
|
||||
marginBottom: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 2,
|
||||
elevation: 2,
|
||||
},
|
||||
dayName: {
|
||||
color: '#111827',
|
||||
fontSize: 16,
|
||||
marginBottom: 4,
|
||||
},
|
||||
timeRange: {
|
||||
color: '#6B7280',
|
||||
fontSize: 14,
|
||||
},
|
||||
bottomSpacer: {
|
||||
height: 100,
|
||||
},
|
||||
fab: {
|
||||
position: 'absolute',
|
||||
bottom: 24,
|
||||
right: 24,
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: 30,
|
||||
backgroundColor: THEME.colors.primary,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 4,
|
||||
elevation: 6,
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,290 @@
|
||||
import React, { useState } from 'react';
|
||||
import { View, StyleSheet, TouchableOpacity, Alert, Platform } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
|
||||
import DateTimePicker from '@react-native-community/datetimepicker';
|
||||
import { Typography } from '../components/ui/Typography';
|
||||
import { Header } from '../components/ui/Header';
|
||||
import { profileService } from '../services/profileService';
|
||||
import { THEME } from '../constants/theme';
|
||||
import { Clock, Calendar, Trash2 } from 'lucide-react-native';
|
||||
import { RootStackParamList } from '../navigation/AppNavigator';
|
||||
|
||||
type EditAvailabilityRouteProp = RouteProp<RootStackParamList, 'EditAvailability'>;
|
||||
|
||||
export const EditAvailabilityScreen = () => {
|
||||
const navigation = useNavigation();
|
||||
const route = useRoute<EditAvailabilityRouteProp>();
|
||||
|
||||
const { day_of_week, start_time, end_time } = route.params;
|
||||
|
||||
// Parse strings to dates
|
||||
const parseTime = (timeStr: string) => {
|
||||
const [hours, minutes] = timeStr.split(':').map(Number);
|
||||
const date = new Date();
|
||||
date.setHours(hours || 9, minutes || 0, 0, 0);
|
||||
return date;
|
||||
};
|
||||
|
||||
const [startTime, setStartTime] = useState(parseTime(start_time));
|
||||
const [endTime, setEndTime] = useState(parseTime(end_time));
|
||||
|
||||
const [showPicker, setShowPicker] = useState(false);
|
||||
const [pickerType, setPickerType] = useState<'start' | 'end'>('start');
|
||||
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
|
||||
const openTimePicker = (type: 'start' | 'end') => {
|
||||
setPickerType(type);
|
||||
setShowPicker(true);
|
||||
};
|
||||
|
||||
const handleTimeChange = (event: any, selectedDate?: Date) => {
|
||||
if (Platform.OS === 'android') {
|
||||
setShowPicker(false);
|
||||
}
|
||||
|
||||
if (event.type === 'dismissed' || !selectedDate) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (pickerType === 'start') {
|
||||
setStartTime(selectedDate);
|
||||
} else {
|
||||
setEndTime(selectedDate);
|
||||
}
|
||||
};
|
||||
|
||||
const formatTime = (date: Date) => {
|
||||
const hours = date.getHours().toString().padStart(2, '0');
|
||||
const minutes = date.getMinutes().toString().padStart(2, '0');
|
||||
return `${hours}:${minutes}`;
|
||||
};
|
||||
|
||||
const handleUpdate = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
const payload = {
|
||||
day_of_week,
|
||||
start_time: formatTime(startTime),
|
||||
end_time: formatTime(endTime),
|
||||
is_available: 1 // Since they are editing, it must be available
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
await profileService.updateDayAvailability(payload);
|
||||
Alert.alert('Success', 'Availability updated successfully.', [
|
||||
{ text: 'OK', onPress: () => navigation.goBack() }
|
||||
]);
|
||||
} catch (e: any) {
|
||||
Alert.alert('Error', e.response?.data?.message || 'Failed to update availability.');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
Alert.alert(
|
||||
'Remove Availability',
|
||||
`Are you sure you want to completely remove your availability for ${day_of_week}?`,
|
||||
[
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{
|
||||
text: 'Remove',
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
setDeleting(true);
|
||||
try {
|
||||
await profileService.deleteDayAvailability(day_of_week);
|
||||
navigation.goBack();
|
||||
} catch (e: any) {
|
||||
Alert.alert('Error', e.response?.data?.message || 'Failed to remove availability.');
|
||||
setDeleting(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
// @ts-ignore
|
||||
<SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
|
||||
<Header title="Edit Availability" showBack />
|
||||
|
||||
<View style={styles.content}>
|
||||
<View style={styles.card}>
|
||||
<Typography variant="caption" style={styles.label}>Day</Typography>
|
||||
|
||||
<View style={styles.disabledBox}>
|
||||
<Calendar color="#9CA3AF" size={20} />
|
||||
<Typography variant="body" weight="bold" style={styles.disabledText}>
|
||||
{day_of_week.charAt(0).toUpperCase() + day_of_week.slice(1)}
|
||||
</Typography>
|
||||
</View>
|
||||
|
||||
<View style={styles.timeRow}>
|
||||
<View style={styles.timeColumn}>
|
||||
<Typography variant="caption" style={styles.label}>Start Time</Typography>
|
||||
<TouchableOpacity
|
||||
style={styles.inputBox}
|
||||
onPress={() => openTimePicker('start')}
|
||||
>
|
||||
<Clock color="#6B7280" size={20} />
|
||||
<Typography variant="body" style={styles.inputText}>
|
||||
{formatTime(startTime)}
|
||||
</Typography>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.timeSpacer} />
|
||||
|
||||
<View style={styles.timeColumn}>
|
||||
<Typography variant="caption" style={styles.label}>End Time</Typography>
|
||||
<TouchableOpacity
|
||||
style={styles.inputBox}
|
||||
onPress={() => openTimePicker('end')}
|
||||
>
|
||||
<Clock color="#6B7280" size={20} />
|
||||
<Typography variant="body" style={styles.inputText}>
|
||||
{formatTime(endTime)}
|
||||
</Typography>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.deleteButton}
|
||||
onPress={handleDelete}
|
||||
disabled={deleting}
|
||||
>
|
||||
<Trash2 color="#EF4444" size={20} />
|
||||
<Typography variant="body" weight="bold" style={styles.deleteButtonText}>
|
||||
{deleting ? 'Removing...' : 'Remove Availability'}
|
||||
</Typography>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.footer}>
|
||||
<TouchableOpacity
|
||||
style={styles.saveButton}
|
||||
onPress={handleUpdate}
|
||||
disabled={saving || deleting}
|
||||
>
|
||||
<Typography variant="h3" weight="bold" style={styles.saveButtonText}>
|
||||
{saving ? 'Saving...' : 'Update Day'}
|
||||
</Typography>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{showPicker && (
|
||||
<DateTimePicker
|
||||
value={pickerType === 'start' ? startTime : endTime}
|
||||
mode="time"
|
||||
is24Hour={true}
|
||||
display="default"
|
||||
onChange={handleTimeChange}
|
||||
/>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F9FAFB',
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
padding: 16,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: '#FFF',
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
},
|
||||
label: {
|
||||
color: '#6B7280',
|
||||
marginBottom: 8,
|
||||
fontWeight: 'bold',
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
disabledBox: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
borderRadius: 8,
|
||||
height: 50,
|
||||
paddingHorizontal: 12,
|
||||
backgroundColor: '#F3F4F6',
|
||||
marginBottom: 20,
|
||||
},
|
||||
disabledText: {
|
||||
marginLeft: 12,
|
||||
color: '#9CA3AF',
|
||||
fontSize: 16,
|
||||
},
|
||||
inputBox: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderWidth: 1,
|
||||
borderColor: '#D1D5DB',
|
||||
borderRadius: 8,
|
||||
height: 50,
|
||||
paddingHorizontal: 12,
|
||||
backgroundColor: '#F9FAFB',
|
||||
marginBottom: 20,
|
||||
},
|
||||
inputText: {
|
||||
marginLeft: 12,
|
||||
color: '#111827',
|
||||
fontSize: 16,
|
||||
},
|
||||
timeRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
timeColumn: {
|
||||
flex: 1,
|
||||
},
|
||||
timeSpacer: {
|
||||
width: 16,
|
||||
},
|
||||
deleteButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginTop: 24,
|
||||
padding: 16,
|
||||
backgroundColor: '#FEF2F2',
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: '#FEE2E2',
|
||||
},
|
||||
deleteButtonText: {
|
||||
color: '#EF4444',
|
||||
marginLeft: 8,
|
||||
},
|
||||
footer: {
|
||||
padding: 16,
|
||||
backgroundColor: '#FFF',
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#E5E7EB',
|
||||
},
|
||||
saveButton: {
|
||||
backgroundColor: THEME.colors.primary,
|
||||
height: 50,
|
||||
borderRadius: 8,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
saveButtonText: {
|
||||
color: '#FFF',
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,314 @@
|
||||
import React from 'react';
|
||||
import { View, ScrollView, TouchableOpacity, StatusBar, ActivityIndicator, StyleSheet, Image } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
||||
import { CompositeNavigationProp } from '@react-navigation/native';
|
||||
import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
|
||||
import { TabParamList, RootStackParamList } from '../navigation/AppNavigator';
|
||||
import { Typography } from '../components/ui/Typography';
|
||||
import { Card } from '../components/ui/Card';
|
||||
import { Button } from '../components/ui/Button';
|
||||
import { useCaregivers } from '../hooks/useCaregivers';
|
||||
import { formatRating, getInitials, getImageUrl } from '../utils/formatters';
|
||||
import { useResponsiveLayout } from '../hooks/useResponsiveLayout';
|
||||
import { User, Award, Calendar } from 'lucide-react-native';
|
||||
import { profileService, CaregiverProfileResponse } from '../services/profileService';
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
type HomeScreenNavigationProp = CompositeNavigationProp<
|
||||
BottomTabNavigationProp<TabParamList, 'HomeTab'>,
|
||||
NativeStackNavigationProp<RootStackParamList>
|
||||
>;
|
||||
|
||||
interface HomeScreenProps {
|
||||
navigation: HomeScreenNavigationProp;
|
||||
}
|
||||
|
||||
export const HomeScreen: React.FC<HomeScreenProps> = ({ navigation }) => {
|
||||
const { caregivers, isLoading } = useCaregivers();
|
||||
const { isTablet, screenPadding } = useResponsiveLayout();
|
||||
const [profile, setProfile] = useState<CaregiverProfileResponse['data'] | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchProfile = async () => {
|
||||
try {
|
||||
const response = await profileService.getProfile();
|
||||
setProfile(response.data);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch profile', err);
|
||||
}
|
||||
};
|
||||
fetchProfile();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
// @ts-ignore - TS types for SafeAreaView in this version incorrectly omit the style prop
|
||||
<SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
|
||||
<ScrollView style={[styles.scrollView, { paddingHorizontal: screenPadding }]} scrollsToTop={false}>
|
||||
<View style={styles.header}>
|
||||
<TouchableOpacity style={styles.userProfileBtn}>
|
||||
<Image
|
||||
source={{ uri: getImageUrl(profile?.user?.profile_image) || 'https://i.pravatar.cc/150?img=11' }}
|
||||
style={styles.profileImage}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
<View style={styles.headerTextContainer}>
|
||||
<Typography variant="h1" weight="bold" style={styles.headerTitle}>
|
||||
{profile?.user?.first_name ? `Good Morning, ${profile.user.first_name}` : 'Good Morning'}
|
||||
</Typography>
|
||||
<Typography variant="body" style={styles.headerSubtitle}>
|
||||
Find the perfect care for your loved ones.
|
||||
</Typography>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.actionRow}>
|
||||
<TouchableOpacity
|
||||
style={styles.actionColumnCard}
|
||||
onPress={() => navigation.navigate('ManageSkills')}
|
||||
>
|
||||
<View style={{flexDirection: 'row', alignItems: 'center', marginBottom: 4}}>
|
||||
<Award color="#4F46E5" size={20} style={{ marginRight: 6 }} />
|
||||
<Typography variant="h3" weight="bold" style={styles.skillsActionTitle}>
|
||||
Skills
|
||||
</Typography>
|
||||
</View>
|
||||
<Typography variant="caption" style={styles.skillsActionSubtitle}>
|
||||
Update skills
|
||||
</Typography>
|
||||
<View style={{ marginTop: 16, width: '100%' }}>
|
||||
<Button
|
||||
title="Manage"
|
||||
onPress={() => navigation.navigate('ManageSkills')}
|
||||
variant="secondary"
|
||||
/>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.actionColumnCard}
|
||||
onPress={() => navigation.navigate('AvailabilityList')}
|
||||
>
|
||||
<View style={{flexDirection: 'row', alignItems: 'center', marginBottom: 4}}>
|
||||
<Calendar color="#4F46E5" size={20} style={{ marginRight: 6 }} />
|
||||
<Typography variant="h3" weight="bold" style={styles.skillsActionTitle}>
|
||||
Availability
|
||||
</Typography>
|
||||
</View>
|
||||
<Typography variant="caption" style={styles.skillsActionSubtitle}>
|
||||
Set schedule
|
||||
</Typography>
|
||||
<View style={{ marginTop: 16, width: '100%' }}>
|
||||
<Button
|
||||
title="Update"
|
||||
onPress={() => navigation.navigate('AvailabilityList')}
|
||||
variant="secondary"
|
||||
/>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.sectionHeader}>
|
||||
<Typography variant="h3" weight="bold">
|
||||
Featured Caregivers
|
||||
</Typography>
|
||||
<TouchableOpacity>
|
||||
<Typography variant="caption" weight="medium" style={styles.seeAllText}>
|
||||
See All
|
||||
</Typography>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{isLoading ? (
|
||||
<View style={styles.loaderContainer}>
|
||||
<ActivityIndicator size="large" color="#4F46E5" />
|
||||
</View>
|
||||
) : (
|
||||
<View style={isTablet ? styles.tabletGrid : undefined}>
|
||||
{caregivers.map((caregiver) => (
|
||||
<TouchableOpacity
|
||||
key={caregiver.id}
|
||||
activeOpacity={0.7}
|
||||
onPress={() => navigation.navigate('Profile', { caregiverId: caregiver.id })}
|
||||
style={isTablet ? styles.tabletGridItem : undefined}
|
||||
>
|
||||
<Card style={styles.caregiverCard}>
|
||||
<View style={styles.avatar}>
|
||||
<Typography variant="h2" style={styles.avatarText}>
|
||||
{getInitials(caregiver.name)}
|
||||
</Typography>
|
||||
</View>
|
||||
<View style={styles.caregiverInfo}>
|
||||
<Typography variant="body" weight="bold" style={styles.caregiverName}>
|
||||
{caregiver.name}
|
||||
</Typography>
|
||||
<Typography variant="caption" style={styles.caregiverRole}>
|
||||
{caregiver.role}
|
||||
</Typography>
|
||||
<View style={styles.ratingContainer}>
|
||||
<Typography variant="caption" style={styles.starIcon}>
|
||||
★
|
||||
</Typography>
|
||||
<Typography variant="caption" weight="medium">
|
||||
{formatRating(caregiver.rating)}
|
||||
</Typography>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.viewBadge}>
|
||||
<Typography variant="caption" style={styles.viewBadgeText}>
|
||||
View
|
||||
</Typography>
|
||||
</View>
|
||||
</Card>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View style={styles.bottomSpacer} />
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F9FAFB',
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
header: {
|
||||
marginBottom: 24,
|
||||
marginTop: 16,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
},
|
||||
userProfileBtn: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: 30,
|
||||
backgroundColor: '#EEF2FF',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderWidth: 2,
|
||||
borderColor: '#E0E7FF',
|
||||
marginRight: 16,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
profileImage: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
headerTextContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
headerTitle: {
|
||||
marginBottom: 4,
|
||||
},
|
||||
headerSubtitle: {
|
||||
color: '#6B7280',
|
||||
},
|
||||
sectionHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 16,
|
||||
},
|
||||
priceText: {
|
||||
color: '#059669', // emerald-600
|
||||
},
|
||||
actionRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 24,
|
||||
},
|
||||
actionColumnCard: {
|
||||
backgroundColor: '#EEF2FF',
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E0E7FF',
|
||||
width: '48%',
|
||||
flexDirection: 'column',
|
||||
minHeight: 140,
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
skillsActionTitle: {
|
||||
color: '#3730A3',
|
||||
fontSize: 16,
|
||||
},
|
||||
skillsActionSubtitle: {
|
||||
color: '#4338CA',
|
||||
opacity: 0.8,
|
||||
},
|
||||
seeAllText: {
|
||||
color: '#4F46E5',
|
||||
},
|
||||
loaderContainer: {
|
||||
paddingVertical: 32,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
caregiverCard: {
|
||||
marginBottom: 16,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: 16,
|
||||
},
|
||||
avatar: {
|
||||
height: 64,
|
||||
width: 64,
|
||||
borderRadius: 32,
|
||||
backgroundColor: '#E5E7EB',
|
||||
marginRight: 16,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
avatarText: {
|
||||
color: '#6B7280',
|
||||
},
|
||||
caregiverInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
caregiverName: {
|
||||
marginBottom: 4,
|
||||
},
|
||||
caregiverRole: {
|
||||
marginBottom: 8,
|
||||
color: '#6B7280',
|
||||
},
|
||||
ratingContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
starIcon: {
|
||||
color: '#EAB308',
|
||||
fontWeight: 'bold',
|
||||
marginRight: 4,
|
||||
},
|
||||
viewBadge: {
|
||||
backgroundColor: '#EEF2FF',
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 9999,
|
||||
},
|
||||
viewBadgeText: {
|
||||
color: '#4F46E5',
|
||||
fontWeight: '500',
|
||||
},
|
||||
bottomSpacer: {
|
||||
height: 40,
|
||||
},
|
||||
tabletGrid: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
tabletGridItem: {
|
||||
width: '48%', // Leaves some space for margins between the two columns
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,229 @@
|
||||
import React, { useState } from 'react';
|
||||
import { View, StyleSheet, KeyboardAvoidingView, Platform, ScrollView, TouchableOpacity } from 'react-native';
|
||||
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
||||
import { RootStackParamList } from '../navigation/AppNavigator';
|
||||
import { Typography } from '../components/ui/Typography';
|
||||
import { Input } from '../components/ui/Input';
|
||||
import { Button } from '../components/ui/Button';
|
||||
import { authService } from '../services/authService';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import { HeartHandshake } from 'lucide-react-native';
|
||||
|
||||
type LoginScreenNavigationProp = NativeStackNavigationProp<RootStackParamList, 'Login'>;
|
||||
|
||||
interface LoginScreenProps {
|
||||
navigation: LoginScreenNavigationProp;
|
||||
}
|
||||
|
||||
export const LoginScreen: React.FC<LoginScreenProps> = ({ navigation }) => {
|
||||
const [phone, setPhone] = useState('+91');
|
||||
const [otp, setOtp] = useState('');
|
||||
const [step, setStep] = useState<'PHONE' | 'OTP'>('PHONE');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (step === 'PHONE') {
|
||||
if (!phone || phone.length < 10) {
|
||||
setError('Please enter a valid phone number');
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const response = await authService.login(phone);
|
||||
console.log('OTP sent:', response);
|
||||
setStep('OTP');
|
||||
} catch (err: any) {
|
||||
console.error('Login failed:', err);
|
||||
setError('Failed to send OTP. Please check your number and try again.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
} else {
|
||||
if (!otp || otp.length < 4) {
|
||||
setError('Please enter a valid OTP');
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const response = await authService.verifyOtp(phone, otp);
|
||||
console.log('OTP verified successfully:', response);
|
||||
// Save the token
|
||||
if (response.data && response.data.accessToken) {
|
||||
await AsyncStorage.setItem('token', response.data.accessToken);
|
||||
} else if (response.token) {
|
||||
await AsyncStorage.setItem('token', response.token);
|
||||
}
|
||||
navigation.replace('MainTabs');
|
||||
} catch (err: any) {
|
||||
console.error('OTP verification failed:', err);
|
||||
setError('Invalid OTP. Please try again.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={styles.container}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
||||
>
|
||||
<ScrollView contentContainerStyle={styles.scrollContent} keyboardShouldPersistTaps="handled">
|
||||
|
||||
<View style={styles.formContainer}>
|
||||
<View style={styles.card}>
|
||||
<View style={styles.logoContainer}>
|
||||
<View style={styles.iconWrapper}>
|
||||
<HeartHandshake color="#4F46E5" size={40} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.header}>
|
||||
<Typography variant="h1" weight="bold" style={styles.title}>
|
||||
Caregiver Portal
|
||||
</Typography>
|
||||
<Typography variant="body" style={styles.subtitle}>
|
||||
Sign in to view your schedule, manage patient care, and stay connected.
|
||||
</Typography>
|
||||
</View>
|
||||
|
||||
<View style={styles.form}>
|
||||
{error ? (
|
||||
<Typography variant="caption" style={styles.errorText}>
|
||||
{error}
|
||||
</Typography>
|
||||
) : null}
|
||||
|
||||
{step === 'PHONE' ? (
|
||||
<Input
|
||||
label="Phone Number"
|
||||
labelStyle={{ fontWeight: 'bold', fontSize: 16 }}
|
||||
placeholder="+917540032060"
|
||||
keyboardType="phone-pad"
|
||||
autoCapitalize="none"
|
||||
value={phone}
|
||||
onChangeText={setPhone}
|
||||
/>
|
||||
) : (
|
||||
<Input
|
||||
label="Enter OTP"
|
||||
labelStyle={{ fontWeight: 'bold', fontSize: 16 }}
|
||||
placeholder="e.g. 881433"
|
||||
keyboardType="numeric"
|
||||
autoCapitalize="none"
|
||||
value={otp}
|
||||
onChangeText={setOtp}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Button
|
||||
title={step === 'PHONE' ? "Get OTP" : "Verify & Log In"}
|
||||
onPress={handleLogin}
|
||||
loading={isLoading}
|
||||
style={styles.loginButton}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.footer}>
|
||||
<Typography variant="body" style={styles.footerText}>
|
||||
Don't have an account?{' '}
|
||||
</Typography>
|
||||
<TouchableOpacity>
|
||||
<Typography variant="body" weight="bold" style={styles.signupText}>
|
||||
Sign Up
|
||||
</Typography>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#EEF2FF', // Beautiful light indigo background
|
||||
},
|
||||
scrollContent: {
|
||||
flexGrow: 1,
|
||||
paddingHorizontal: 24,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
formContainer: {
|
||||
width: '100%',
|
||||
maxWidth: 480,
|
||||
alignSelf: 'center',
|
||||
paddingVertical: 40,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: 32,
|
||||
padding: 32,
|
||||
shadowColor: '#4F46E5',
|
||||
shadowOffset: { width: 0, height: 12 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 32,
|
||||
elevation: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E0E7FF',
|
||||
marginBottom: 32,
|
||||
},
|
||||
logoContainer: {
|
||||
alignItems: 'center',
|
||||
marginBottom: 24,
|
||||
},
|
||||
iconWrapper: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 40,
|
||||
backgroundColor: '#EEF2FF',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderWidth: 2,
|
||||
borderColor: '#C7D2FE',
|
||||
},
|
||||
header: {
|
||||
marginBottom: 32,
|
||||
alignItems: 'center',
|
||||
},
|
||||
title: {
|
||||
marginBottom: 8,
|
||||
color: '#111827',
|
||||
textAlign: 'center',
|
||||
},
|
||||
subtitle: {
|
||||
color: '#6B7280',
|
||||
lineHeight: 24,
|
||||
textAlign: 'center',
|
||||
},
|
||||
form: {
|
||||
marginBottom: 8,
|
||||
},
|
||||
errorText: {
|
||||
color: '#DC2626', // Red
|
||||
marginBottom: 16,
|
||||
textAlign: 'center',
|
||||
},
|
||||
loginButton: {
|
||||
width: '100%',
|
||||
backgroundColor: '#1E3A8A', // Navy blue
|
||||
},
|
||||
footer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginBottom: 40,
|
||||
},
|
||||
footerText: {
|
||||
color: '#6B7280',
|
||||
},
|
||||
signupText: {
|
||||
color: '#1E3A8A', // Navy blue
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,253 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { View, StyleSheet, ScrollView, ActivityIndicator, TouchableOpacity, Text } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { useFocusEffect, useNavigation } from '@react-navigation/native';
|
||||
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
||||
import { Typography } from '../components/ui/Typography';
|
||||
import { Header } from '../components/ui/Header';
|
||||
import { profileService } from '../services/profileService';
|
||||
import { THEME } from '../constants/theme';
|
||||
import { RootStackParamList } from '../navigation/AppNavigator';
|
||||
import { Plus, Award } from 'lucide-react-native';
|
||||
|
||||
type NavigationProp = NativeStackNavigationProp<RootStackParamList, 'ManageSkills'>;
|
||||
|
||||
export const ManageSkillsScreen = () => {
|
||||
const navigation = useNavigation<NavigationProp>();
|
||||
const [ownSkills, setOwnSkills] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const fetchSkills = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const skillsData = await profileService.getOwnSkills();
|
||||
setOwnSkills(skillsData || []);
|
||||
} catch (err) {
|
||||
console.error('Failed to load skills', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
fetchSkills();
|
||||
}, [])
|
||||
);
|
||||
|
||||
return (
|
||||
// @ts-ignore
|
||||
<SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
|
||||
<Header title="My Skills" showBack />
|
||||
|
||||
{loading ? (
|
||||
<View style={styles.centerContent}>
|
||||
<ActivityIndicator size="large" color={THEME.colors.primary} />
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.content}>
|
||||
<ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
|
||||
|
||||
<View style={styles.summaryCard}>
|
||||
<View style={styles.summaryIconContainer}>
|
||||
<Award color={THEME.colors.primary} size={28} />
|
||||
</View>
|
||||
<View style={styles.summaryTextContainer}>
|
||||
<Typography variant="h3" weight="bold" style={styles.summaryTitle}>
|
||||
{ownSkills.length} Active Skills
|
||||
</Typography>
|
||||
<Typography variant="body" style={styles.summarySubtitle}>
|
||||
Add more skills to get matched with a wider variety of care visits.
|
||||
</Typography>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.listContainer}>
|
||||
<Typography variant="h3" weight="bold" style={styles.sectionTitle}>
|
||||
Your Skills
|
||||
</Typography>
|
||||
|
||||
{ownSkills.length === 0 ? (
|
||||
<View style={styles.emptyState}>
|
||||
<Typography variant="body" style={styles.emptyText}>
|
||||
You haven't added any skills yet.
|
||||
</Typography>
|
||||
</View>
|
||||
) : (
|
||||
ownSkills.map(skill => (
|
||||
<View key={skill.id || skill.slug} style={styles.skillCard}>
|
||||
<View style={styles.skillIconPlaceholder}>
|
||||
<Text style={styles.skillIconText}>{skill.name.charAt(0)}</Text>
|
||||
</View>
|
||||
<View style={styles.skillInfo}>
|
||||
<Typography variant="body" weight="bold" style={styles.skillName}>
|
||||
{skill.name}
|
||||
</Typography>
|
||||
<View style={styles.skillTypeBadge}>
|
||||
<Typography variant="caption" style={styles.skillType}>
|
||||
{skill.master_type_slug}
|
||||
</Typography>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
<View style={styles.bottomSpacer} />
|
||||
</ScrollView>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.fab}
|
||||
onPress={() => navigation.navigate('AddSkill')}
|
||||
>
|
||||
<Plus color="#FFF" size={24} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F3F4F6',
|
||||
},
|
||||
centerContent: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
summaryCard: {
|
||||
margin: 16,
|
||||
backgroundColor: '#EEF2FF',
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderWidth: 1,
|
||||
borderColor: '#E0E7FF',
|
||||
},
|
||||
summaryIconContainer: {
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 28,
|
||||
backgroundColor: '#FFFFFF',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
shadowColor: THEME.colors.primary,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 8,
|
||||
elevation: 3,
|
||||
},
|
||||
summaryTextContainer: {
|
||||
flex: 1,
|
||||
marginLeft: 16,
|
||||
},
|
||||
summaryTitle: {
|
||||
color: '#3730A3',
|
||||
marginBottom: 4,
|
||||
fontSize: 20,
|
||||
},
|
||||
summarySubtitle: {
|
||||
color: '#4338CA',
|
||||
opacity: 0.8,
|
||||
fontSize: 13,
|
||||
lineHeight: 18,
|
||||
},
|
||||
listContainer: {
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
sectionTitle: {
|
||||
color: '#111827',
|
||||
marginBottom: 12,
|
||||
marginLeft: 4,
|
||||
},
|
||||
emptyState: {
|
||||
padding: 24,
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#FFF',
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
borderStyle: 'dashed',
|
||||
},
|
||||
emptyText: {
|
||||
color: '#6B7280',
|
||||
textAlign: 'center',
|
||||
},
|
||||
skillCard: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#FFF',
|
||||
padding: 16,
|
||||
borderRadius: 12,
|
||||
marginBottom: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 2,
|
||||
elevation: 2,
|
||||
},
|
||||
skillIconPlaceholder: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 24,
|
||||
backgroundColor: '#F3F4F6',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 16,
|
||||
},
|
||||
skillIconText: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
color: THEME.colors.primary,
|
||||
},
|
||||
skillInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
skillName: {
|
||||
color: '#111827',
|
||||
fontSize: 16,
|
||||
marginBottom: 4,
|
||||
},
|
||||
skillTypeBadge: {
|
||||
alignSelf: 'flex-start',
|
||||
backgroundColor: '#EEF2FF',
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 6,
|
||||
},
|
||||
skillType: {
|
||||
color: THEME.colors.primary,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
bottomSpacer: {
|
||||
height: 100,
|
||||
},
|
||||
fab: {
|
||||
position: 'absolute',
|
||||
bottom: 24,
|
||||
right: 24,
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: 30,
|
||||
backgroundColor: THEME.colors.primary,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 4,
|
||||
elevation: 6,
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,346 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { View, StyleSheet, ScrollView, ActivityIndicator, TouchableOpacity, TextInput, Image } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { Typography } from '../components/ui/Typography';
|
||||
import { Header } from '../components/ui/Header';
|
||||
import { Card } from '../components/ui/Card';
|
||||
import { profileService, CaregiverProfileResponse } from '../services/profileService';
|
||||
import { getImageUrl } from '../utils/formatters';
|
||||
import { launchImageLibrary } from 'react-native-image-picker';
|
||||
import { Edit2, Camera } from 'lucide-react-native';
|
||||
|
||||
export const PersonalInformationScreen = () => {
|
||||
const [profile, setProfile] = useState<CaregiverProfileResponse['data'] | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
// Form State
|
||||
const [formData, setFormData] = useState({
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
email: '',
|
||||
mobile: '',
|
||||
gender: '',
|
||||
dob: '',
|
||||
blood_group: '',
|
||||
experience_years: '',
|
||||
employment_type: '',
|
||||
hourly_rate: '',
|
||||
address_street: '',
|
||||
address_city: '',
|
||||
address_zip: '',
|
||||
country_iso: '',
|
||||
});
|
||||
|
||||
const [profileImage, setProfileImage] = useState<string | null>(null);
|
||||
const [selectedImage, setSelectedImage] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProfile();
|
||||
}, []);
|
||||
|
||||
const fetchProfile = async () => {
|
||||
try {
|
||||
const response = await profileService.getProfile();
|
||||
setProfile(response.data);
|
||||
setFormData({
|
||||
first_name: response.data.user.first_name || '',
|
||||
last_name: response.data.user.last_name || '',
|
||||
email: response.data.user.email || '',
|
||||
mobile: response.data.user.mobile || '',
|
||||
gender: response.data.user.gender || '',
|
||||
dob: response.data.user.dob || '',
|
||||
blood_group: response.data.user.blood_group || '',
|
||||
experience_years: response.data.experienceYears?.toString() || '',
|
||||
employment_type: response.data.employmentType || '',
|
||||
hourly_rate: response.data.hourlyRate?.toString() || '',
|
||||
address_street: response.data.user.address?.street || '',
|
||||
address_city: response.data.user.address?.city || '',
|
||||
address_zip: response.data.user.address?.zip || '',
|
||||
country_iso: response.data.user.country_iso || '',
|
||||
});
|
||||
setProfileImage(response.data.photoUrl);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch profile in PersonalInformation', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectImage = async () => {
|
||||
if (!isEditing) return;
|
||||
const result = await launchImageLibrary({ mediaType: 'photo', quality: 0.8 });
|
||||
if (result.assets && result.assets.length > 0) {
|
||||
const asset = result.assets[0];
|
||||
setSelectedImage(asset);
|
||||
setProfileImage(asset.uri || null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
if (selectedImage) {
|
||||
await profileService.uploadAvatar(selectedImage.uri, selectedImage.type || 'image/jpeg', selectedImage.fileName || 'profile.jpg');
|
||||
}
|
||||
|
||||
const payload = {
|
||||
user: {
|
||||
first_name: formData.first_name,
|
||||
last_name: formData.last_name,
|
||||
email: formData.email,
|
||||
mobile: formData.mobile,
|
||||
gender: formData.gender,
|
||||
dob: formData.dob,
|
||||
blood_group: formData.blood_group,
|
||||
country_iso: formData.country_iso,
|
||||
address: JSON.stringify({
|
||||
street: formData.address_street,
|
||||
city: formData.address_city,
|
||||
zip: formData.address_zip
|
||||
})
|
||||
},
|
||||
experience_years: formData.experience_years,
|
||||
employment_type: formData.employment_type,
|
||||
hourly_rate: formData.hourly_rate
|
||||
};
|
||||
|
||||
await profileService.updateProfile(payload);
|
||||
await fetchProfile();
|
||||
setIsEditing(false);
|
||||
} catch (err) {
|
||||
console.error('Failed to save profile', err);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const EditButton = () => {
|
||||
if (isEditing) {
|
||||
return (
|
||||
<TouchableOpacity onPress={handleSave} disabled={saving} style={styles.headerButton}>
|
||||
{saving ? <ActivityIndicator size="small" color="#4F46E5" /> : <Typography variant="body" weight="bold" style={styles.headerButtonText}>Save</Typography>}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<TouchableOpacity onPress={() => setIsEditing(true)} style={styles.headerButton}>
|
||||
<Edit2 color="#4F46E5" size={20} />
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
const InfoRow = ({ label, value, field }: { label: string; value: string | undefined; field?: keyof typeof formData }) => {
|
||||
if (isEditing && field) {
|
||||
return (
|
||||
<View style={styles.formFieldContainer}>
|
||||
<Typography variant="caption" weight="bold" style={styles.formLabel}>
|
||||
{label}
|
||||
</Typography>
|
||||
<TextInput
|
||||
style={styles.formInput}
|
||||
value={formData[field]}
|
||||
onChangeText={(text) => setFormData(prev => ({ ...prev, [field]: text }))}
|
||||
placeholder={`Enter ${label}`}
|
||||
placeholderTextColor="#9CA3AF"
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.infoRow}>
|
||||
<Typography variant="body" weight="medium" style={styles.label}>
|
||||
{label}
|
||||
</Typography>
|
||||
<Typography variant="body" style={styles.value}>
|
||||
{value || 'Not provided'}
|
||||
</Typography>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
// @ts-ignore
|
||||
<SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
|
||||
<Header title="Personal Information" showBack rightComponent={<EditButton />} />
|
||||
|
||||
{loading ? (
|
||||
<View style={styles.centerContent}>
|
||||
<ActivityIndicator size="large" color="#4F46E5" />
|
||||
</View>
|
||||
) : profile ? (
|
||||
<ScrollView style={styles.scrollView}>
|
||||
<View style={styles.avatarContainer}>
|
||||
<TouchableOpacity onPress={handleSelectImage} disabled={!isEditing}>
|
||||
<View style={styles.avatarWrapper}>
|
||||
<Image
|
||||
source={{ uri: getImageUrl(profileImage) || 'https://via.placeholder.com/150' }}
|
||||
style={styles.avatar}
|
||||
/>
|
||||
{isEditing && (
|
||||
<View style={styles.cameraOverlay}>
|
||||
<Camera color="#FFFFFF" size={20} />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<Card style={styles.card}>
|
||||
<InfoRow label="First Name" value={profile.user.first_name} field="first_name" />
|
||||
{!isEditing && <View style={styles.divider} />}
|
||||
<InfoRow label="Last Name" value={profile.user.last_name} field="last_name" />
|
||||
{!isEditing && <View style={styles.divider} />}
|
||||
<InfoRow label="Email Address" value={profile.user.email} field="email" />
|
||||
{!isEditing && <View style={styles.divider} />}
|
||||
<InfoRow label="Phone Number" value={profile.user.mobile} field="mobile" />
|
||||
{!isEditing && <View style={styles.divider} />}
|
||||
<InfoRow label="Gender" value={profile.user.gender} field="gender" />
|
||||
{!isEditing && <View style={styles.divider} />}
|
||||
<InfoRow label="Date of Birth" value={profile.user.dob} field="dob" />
|
||||
{!isEditing && <View style={styles.divider} />}
|
||||
<InfoRow label="Blood Group" value={profile.user.blood_group} field="blood_group" />
|
||||
</Card>
|
||||
|
||||
<Typography variant="h3" weight="bold" style={styles.sectionTitle}>
|
||||
Professional Details
|
||||
</Typography>
|
||||
<Card style={styles.card}>
|
||||
<InfoRow label="Experience" value={`${profile.experienceYears} Years`} field="experience_years" />
|
||||
{!isEditing && <View style={styles.divider} />}
|
||||
<InfoRow label="Employment Type" value={profile.employmentType} field="employment_type" />
|
||||
{!isEditing && <View style={styles.divider} />}
|
||||
<InfoRow label="Hourly Rate" value={profile.hourlyRate ? `$${profile.hourlyRate}/hr` : undefined} field="hourly_rate" />
|
||||
{!isEditing && <View style={styles.divider} />}
|
||||
{/* Languages and Care Types are typically selected from a list or master data, so we don't map them to simple TextInputs here to prevent incorrect data entry */}
|
||||
<InfoRow label="Languages" value={profile.languages?.join(', ')} />
|
||||
{!isEditing && <View style={styles.divider} />}
|
||||
<InfoRow label="Care Types" value={profile.careTypes?.join(', ')} />
|
||||
</Card>
|
||||
|
||||
<Typography variant="h3" weight="bold" style={styles.sectionTitle}>
|
||||
Address
|
||||
</Typography>
|
||||
<Card style={styles.card}>
|
||||
<InfoRow label="Street" value={profile.user.address?.street} field="address_street" />
|
||||
{!isEditing && <View style={styles.divider} />}
|
||||
<InfoRow label="City" value={profile.user.address?.city} field="address_city" />
|
||||
{!isEditing && <View style={styles.divider} />}
|
||||
<InfoRow label="Zip Code" value={profile.user.address?.zip} field="address_zip" />
|
||||
{!isEditing && <View style={styles.divider} />}
|
||||
<InfoRow label="Country" value={profile.user.country_iso} field="country_iso" />
|
||||
</Card>
|
||||
|
||||
<View style={styles.bottomSpacer} />
|
||||
</ScrollView>
|
||||
) : (
|
||||
<View style={styles.centerContent}>
|
||||
<Typography variant="body">Failed to load profile data.</Typography>
|
||||
</View>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F9FAFB',
|
||||
},
|
||||
centerContent: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
padding: 16,
|
||||
},
|
||||
avatarContainer: {
|
||||
alignItems: 'center',
|
||||
marginBottom: 24,
|
||||
marginTop: 8,
|
||||
},
|
||||
avatarWrapper: {
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: 50,
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
backgroundColor: '#E5E7EB',
|
||||
},
|
||||
avatar: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
cameraOverlay: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||
height: 30,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
headerButton: {
|
||||
padding: 8,
|
||||
},
|
||||
headerButtonText: {
|
||||
color: '#4F46E5',
|
||||
},
|
||||
card: {
|
||||
padding: 0,
|
||||
marginBottom: 24,
|
||||
},
|
||||
infoRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
label: {
|
||||
color: '#6B7280',
|
||||
flex: 1,
|
||||
},
|
||||
value: {
|
||||
color: '#111827',
|
||||
flex: 2,
|
||||
textAlign: 'right',
|
||||
},
|
||||
formFieldContainer: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
},
|
||||
formLabel: {
|
||||
color: '#6B7280',
|
||||
marginBottom: 6,
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
formInput: {
|
||||
backgroundColor: '#F3F4F6',
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
color: '#111827',
|
||||
fontSize: 16,
|
||||
fontFamily: 'Inter-Regular',
|
||||
},
|
||||
divider: {
|
||||
height: 1,
|
||||
backgroundColor: '#E5E7EB',
|
||||
marginHorizontal: 16,
|
||||
},
|
||||
sectionTitle: {
|
||||
marginBottom: 12,
|
||||
color: '#111827',
|
||||
},
|
||||
bottomSpacer: {
|
||||
height: 40,
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,247 @@
|
||||
import React from 'react';
|
||||
import { View, ScrollView, TouchableOpacity, StatusBar, ActivityIndicator, StyleSheet } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
||||
import { RouteProp } from '@react-navigation/native';
|
||||
import { RootStackParamList } from '../navigation/AppNavigator';
|
||||
import { Typography } from '../components/ui/Typography';
|
||||
import { Button } from '../components/ui/Button';
|
||||
import { Header } from '../components/ui/Header';
|
||||
import { useCaregiver } from '../hooks/useCaregivers';
|
||||
import { formatRating, getInitials } from '../utils/formatters';
|
||||
import { useResponsiveLayout } from '../hooks/useResponsiveLayout';
|
||||
|
||||
type ProfileScreenNavigationProp = NativeStackNavigationProp<RootStackParamList, 'Profile'>;
|
||||
type ProfileScreenRouteProp = RouteProp<RootStackParamList, 'Profile'>;
|
||||
|
||||
interface ProfileScreenProps {
|
||||
navigation: ProfileScreenNavigationProp;
|
||||
route: ProfileScreenRouteProp;
|
||||
}
|
||||
|
||||
export const ProfileScreen: React.FC<ProfileScreenProps> = ({ navigation, route }) => {
|
||||
const { caregiverId } = route.params;
|
||||
const { caregiver, isLoading } = useCaregiver(caregiverId);
|
||||
const { isTablet } = useResponsiveLayout();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<View style={styles.centerContainer}>
|
||||
<ActivityIndicator size="large" color="#4F46E5" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (!caregiver) {
|
||||
return (
|
||||
<View style={styles.centerContainer}>
|
||||
<Typography variant="h3">Caregiver not found</Typography>
|
||||
<Button title="Go Back" onPress={() => navigation.goBack()} variant="primary" style={{ marginTop: 16 }} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
// @ts-ignore - TS types for SafeAreaView in this version incorrectly omit the style prop
|
||||
<SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
|
||||
<Header title="Caregiver Profile" showBack />
|
||||
|
||||
<ScrollView style={styles.scrollView} scrollsToTop={false}>
|
||||
<View style={isTablet ? styles.tabletContainer : undefined}>
|
||||
<View style={[styles.profileHeader, isTablet ? styles.tabletProfileHeader : undefined]}>
|
||||
<View style={styles.avatar}>
|
||||
<Typography variant="h1" style={styles.avatarText}>
|
||||
{getInitials(caregiver.name)}
|
||||
</Typography>
|
||||
</View>
|
||||
<Typography variant="h2" weight="bold" style={styles.name}>
|
||||
{caregiver.name}
|
||||
</Typography>
|
||||
<Typography variant="body" style={styles.role}>
|
||||
{caregiver.role} • {caregiver.experienceYears} years exp.
|
||||
</Typography>
|
||||
<View style={styles.ratingContainer}>
|
||||
<Typography variant="body" style={styles.starIcon}>
|
||||
★
|
||||
</Typography>
|
||||
<Typography variant="body" weight="medium">
|
||||
{formatRating(caregiver.rating)} ({caregiver.reviews} reviews)
|
||||
</Typography>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={[styles.content, isTablet ? styles.tabletContent : undefined]}>
|
||||
<Typography variant="h3" weight="bold" style={styles.sectionTitle}>
|
||||
About
|
||||
</Typography>
|
||||
<Typography variant="body" style={styles.aboutText}>
|
||||
{caregiver.about}
|
||||
</Typography>
|
||||
|
||||
<Typography variant="h3" weight="bold" style={styles.sectionTitle}>
|
||||
Specialties
|
||||
</Typography>
|
||||
<View style={styles.specialtiesContainer}>
|
||||
{caregiver.specialties.map((skill, i) => (
|
||||
<View key={i} style={styles.specialtyBadge}>
|
||||
<Typography variant="caption" style={styles.specialtyText}>
|
||||
{skill}
|
||||
</Typography>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<Typography variant="h3" weight="bold" style={styles.sectionTitle}>
|
||||
Availability
|
||||
</Typography>
|
||||
<View style={styles.availabilityContainer}>
|
||||
<View>
|
||||
<Typography variant="caption" style={styles.availabilityLabel}>Weekdays</Typography>
|
||||
<Typography variant="body" weight="medium">{caregiver.availability.weekdays}</Typography>
|
||||
</View>
|
||||
<View>
|
||||
<Typography variant="caption" style={styles.availabilityLabel}>Weekends</Typography>
|
||||
<Typography variant="body" weight="medium">{caregiver.availability.weekends}</Typography>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Button
|
||||
title="Request Booking"
|
||||
variant="primary"
|
||||
onPress={() => {}}
|
||||
style={styles.bookButton}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F9FAFB',
|
||||
},
|
||||
centerContainer: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F9FAFB',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
header: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 16,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#E5E7EB',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
backButton: {
|
||||
marginRight: 16,
|
||||
},
|
||||
backButtonText: {
|
||||
color: '#4F46E5',
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
profileHeader: {
|
||||
alignItems: 'center',
|
||||
paddingVertical: 32,
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#F3F4F6',
|
||||
},
|
||||
avatar: {
|
||||
height: 96,
|
||||
width: 96,
|
||||
borderRadius: 48,
|
||||
backgroundColor: '#E5E7EB',
|
||||
marginBottom: 16,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
avatarText: {
|
||||
color: '#6B7280',
|
||||
},
|
||||
name: {
|
||||
marginBottom: 4,
|
||||
},
|
||||
role: {
|
||||
color: '#6B7280',
|
||||
marginBottom: 8,
|
||||
},
|
||||
ratingContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
starIcon: {
|
||||
color: '#EAB308',
|
||||
fontWeight: 'bold',
|
||||
marginRight: 4,
|
||||
},
|
||||
content: {
|
||||
padding: 24,
|
||||
},
|
||||
sectionTitle: {
|
||||
marginBottom: 12,
|
||||
},
|
||||
aboutText: {
|
||||
color: '#4B5563',
|
||||
lineHeight: 24,
|
||||
marginBottom: 24,
|
||||
},
|
||||
specialtiesContainer: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
marginBottom: 24,
|
||||
},
|
||||
specialtyBadge: {
|
||||
backgroundColor: '#EEF2FF',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 9999,
|
||||
marginRight: 8,
|
||||
marginBottom: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E0E7FF',
|
||||
},
|
||||
specialtyText: {
|
||||
color: '#4F46E5',
|
||||
fontWeight: '500',
|
||||
},
|
||||
availabilityContainer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: '#FFFFFF',
|
||||
padding: 16,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: '#F3F4F6',
|
||||
marginBottom: 32,
|
||||
},
|
||||
availabilityLabel: {
|
||||
color: '#6B7280',
|
||||
marginBottom: 4,
|
||||
},
|
||||
bookButton: {
|
||||
width: '100%',
|
||||
},
|
||||
tabletContainer: {
|
||||
flexDirection: 'row',
|
||||
padding: 24,
|
||||
},
|
||||
tabletProfileHeader: {
|
||||
flex: 1,
|
||||
borderBottomWidth: 0,
|
||||
borderRightWidth: 1,
|
||||
borderRightColor: '#F3F4F6',
|
||||
marginRight: 24,
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
tabletContent: {
|
||||
flex: 2,
|
||||
padding: 0,
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,86 @@
|
||||
import React from 'react';
|
||||
import { View, StyleSheet, TouchableOpacity } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { Typography } from '../components/ui/Typography';
|
||||
import { Header } from '../components/ui/Header';
|
||||
import { Card } from '../components/ui/Card';
|
||||
import { User, ChevronRight } from 'lucide-react-native';
|
||||
import { CompositeNavigationProp } from '@react-navigation/native';
|
||||
import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
|
||||
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
||||
import { TabParamList, RootStackParamList } from '../navigation/AppNavigator';
|
||||
|
||||
type SettingsScreenNavigationProp = CompositeNavigationProp<
|
||||
BottomTabNavigationProp<TabParamList, 'Settings'>,
|
||||
NativeStackNavigationProp<RootStackParamList>
|
||||
>;
|
||||
|
||||
interface SettingsScreenProps {
|
||||
navigation: SettingsScreenNavigationProp;
|
||||
}
|
||||
|
||||
export const SettingsScreen: React.FC<SettingsScreenProps> = ({ navigation }) => {
|
||||
return (
|
||||
// @ts-ignore
|
||||
<SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
|
||||
<Header title="Settings" />
|
||||
<View style={styles.content}>
|
||||
|
||||
<TouchableOpacity onPress={() => navigation.navigate('PersonalInformation')}>
|
||||
<Card noPadding style={styles.menuItem}>
|
||||
<View style={styles.menuIconContainer}>
|
||||
<User color="#4F46E5" size={24} />
|
||||
</View>
|
||||
<View style={styles.menuTextContainer}>
|
||||
<Typography variant="body" weight="bold" style={styles.menuTitle}>
|
||||
Personal Information
|
||||
</Typography>
|
||||
<Typography variant="caption" style={styles.menuSubtitle}>
|
||||
View your profile details
|
||||
</Typography>
|
||||
</View>
|
||||
<ChevronRight color="#9CA3AF" size={20} />
|
||||
</Card>
|
||||
</TouchableOpacity>
|
||||
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F9FAFB',
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
padding: 16,
|
||||
},
|
||||
menuItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 24,
|
||||
marginBottom: 12,
|
||||
},
|
||||
menuIconContainer: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#EEF2FF',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginRight: 16,
|
||||
},
|
||||
menuTextContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
menuTitle: {
|
||||
color: '#111827',
|
||||
marginBottom: 2,
|
||||
},
|
||||
menuSubtitle: {
|
||||
color: '#6B7280',
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,97 @@
|
||||
import axios from 'axios';
|
||||
import { ENV } from '../config/env';
|
||||
|
||||
// Create a configured axios instance
|
||||
export const apiClient = axios.create({
|
||||
baseURL: ENV.API_BASE_URL,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'x-api-key': ENV.X_API_KEY,
|
||||
},
|
||||
timeout: 10000,
|
||||
});
|
||||
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
|
||||
// Optionally, we can add interceptors here later to inject Bearer tokens
|
||||
apiClient.interceptors.request.use(
|
||||
async (config) => {
|
||||
try {
|
||||
const token = await AsyncStorage.getItem('token');
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error fetching token from storage', e);
|
||||
}
|
||||
return config;
|
||||
},
|
||||
(error) => Promise.reject(error)
|
||||
);
|
||||
|
||||
// Add response interceptor to handle 401 Token Expired
|
||||
apiClient.interceptors.response.use(
|
||||
(response) => response,
|
||||
async (error) => {
|
||||
const originalRequest = error.config;
|
||||
|
||||
// Check if error is 401 and we have not already retried
|
||||
if (
|
||||
error.response?.status === 401 &&
|
||||
error.response?.data?.errors?.code === 'TOKEN_EXPIRED' &&
|
||||
!originalRequest._retry
|
||||
) {
|
||||
originalRequest._retry = true; // Mark as retried to prevent infinite loops
|
||||
|
||||
try {
|
||||
const refreshToken = await AsyncStorage.getItem('refresh_token');
|
||||
|
||||
if (!refreshToken) {
|
||||
throw new Error('No refresh token available');
|
||||
}
|
||||
|
||||
// Call your refresh endpoint
|
||||
const refreshResponse = await axios.post(`${ENV.API_BASE_URL}/v1/caregiver/auth/refresh`, {
|
||||
refresh_token: refreshToken,
|
||||
}, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'x-api-key': ENV.X_API_KEY,
|
||||
}
|
||||
});
|
||||
|
||||
// The exact path depends on your backend response structure
|
||||
// Usually it's refreshResponse.data.data.access_token
|
||||
const newAccessToken = refreshResponse.data?.data?.access_token || refreshResponse.data?.access_token;
|
||||
const newRefreshToken = refreshResponse.data?.data?.refresh_token || refreshResponse.data?.refresh_token;
|
||||
|
||||
if (newAccessToken) {
|
||||
await AsyncStorage.setItem('token', newAccessToken); // Ensure 'token' key matches what you use
|
||||
if (newRefreshToken) {
|
||||
await AsyncStorage.setItem('refresh_token', newRefreshToken);
|
||||
}
|
||||
|
||||
// Update the original request's Authorization header
|
||||
originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
|
||||
|
||||
// Retry the original failed request with the new token
|
||||
return apiClient(originalRequest);
|
||||
} else {
|
||||
throw new Error('Refresh failed, no access token in response');
|
||||
}
|
||||
|
||||
} catch (refreshError) {
|
||||
console.error('Failed to refresh token', refreshError);
|
||||
// Force user to log out by clearing tokens
|
||||
await AsyncStorage.removeItem('token');
|
||||
await AsyncStorage.removeItem('refresh_token');
|
||||
// If you are using Context or Redux, you may need to dispatch a logout action here
|
||||
}
|
||||
}
|
||||
|
||||
// Return the error if it wasn't a 401 or refresh failed
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
@@ -0,0 +1,53 @@
|
||||
import { apiClient } from './apiClient';
|
||||
|
||||
export interface LoginResponse {
|
||||
// Define expected response based on your backend
|
||||
// Typically includes token, user details, etc.
|
||||
success?: boolean;
|
||||
token?: string;
|
||||
message?: string;
|
||||
data?: any;
|
||||
}
|
||||
|
||||
import { ENV } from '../config/env';
|
||||
|
||||
export const authService = {
|
||||
login: async (phone: string): Promise<LoginResponse> => {
|
||||
try {
|
||||
const fullUrl = `${ENV.API_BASE_URL}/v1/caregiver/auth/login`;
|
||||
console.log('----------------------------------------');
|
||||
console.log('ATTEMPTING LOGIN API CALL:');
|
||||
console.log('URL:', fullUrl);
|
||||
console.log('Body:', { phone });
|
||||
console.log('----------------------------------------');
|
||||
|
||||
const response = await apiClient.post<LoginResponse>('/v1/caregiver/auth/login', {
|
||||
phone,
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Login Error:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
verifyOtp: async (phone: string, otp: string): Promise<LoginResponse> => {
|
||||
try {
|
||||
const fullUrl = `${ENV.API_BASE_URL}/v1/caregiver/auth/verify-otp`;
|
||||
console.log('----------------------------------------');
|
||||
console.log('ATTEMPTING OTP VERIFY API CALL:');
|
||||
console.log('URL:', fullUrl);
|
||||
console.log('Body:', { phone, otp });
|
||||
console.log('----------------------------------------');
|
||||
|
||||
const response = await apiClient.post<LoginResponse>('/v1/caregiver/auth/verify-otp', {
|
||||
phone,
|
||||
otp,
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Verify OTP Error:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,176 @@
|
||||
import { apiClient } from './apiClient';
|
||||
|
||||
export interface CaregiverProfileResponse {
|
||||
success: boolean;
|
||||
status: number;
|
||||
message: string;
|
||||
data: {
|
||||
id: string;
|
||||
photoUrl: string;
|
||||
rating: number;
|
||||
reviewCount: number;
|
||||
careTypes: string[];
|
||||
languages: string[];
|
||||
experienceYears: number;
|
||||
employmentType: string;
|
||||
distanceKm: number | null;
|
||||
isVerified: boolean;
|
||||
hourlyRate: number;
|
||||
user: {
|
||||
name: string;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
email: string;
|
||||
mobile: string;
|
||||
isd_code: string;
|
||||
gender: string;
|
||||
dob: string;
|
||||
blood_group: string;
|
||||
timezone_id: number;
|
||||
address: {
|
||||
street?: string;
|
||||
city?: string;
|
||||
zip?: string;
|
||||
};
|
||||
country_iso: string;
|
||||
emergency_contact_info: any;
|
||||
profile_image: string;
|
||||
isActive: boolean;
|
||||
};
|
||||
};
|
||||
errors: any;
|
||||
meta: any;
|
||||
}
|
||||
|
||||
export interface CaregiverAvailability {
|
||||
id?: number;
|
||||
caregiver_profile_id?: number;
|
||||
day_of_week: string;
|
||||
start_time: string;
|
||||
end_time: string;
|
||||
is_available: number;
|
||||
}
|
||||
|
||||
export const profileService = {
|
||||
getProfile: async (): Promise<CaregiverProfileResponse> => {
|
||||
try {
|
||||
const response = await apiClient.get<CaregiverProfileResponse>('/v1/resource/caregiver/profile');
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error fetching profile:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
updateProfile: async (data: any): Promise<CaregiverProfileResponse> => {
|
||||
try {
|
||||
const response = await apiClient.patch<CaregiverProfileResponse>('/v1/resource/caregiver/profile', data);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error updating profile:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
uploadAvatar: async (imageUri: string, type: string, fileName: string): Promise<any> => {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('file', {
|
||||
uri: imageUri,
|
||||
type: type,
|
||||
name: fileName,
|
||||
} as any);
|
||||
|
||||
const response = await apiClient.post('/v1/users/uploadAvatar', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error fetching availability:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
getOwnSkills: async (): Promise<any[]> => {
|
||||
try {
|
||||
const response = await apiClient.get('/v1/resource/caregiver/skills');
|
||||
return response.data?.data || [];
|
||||
} catch (error) {
|
||||
console.error('Error fetching own skills:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
getCareTypes: async (): Promise<any> => {
|
||||
try {
|
||||
const response = await apiClient.get('/v1/resource/masters/list?master_type=care_type');
|
||||
return response.data?.data?.care_type || [];
|
||||
} catch (error) {
|
||||
console.error('Error fetching care types:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
getCareSubTypes: async (attr_slug: string): Promise<any> => {
|
||||
try {
|
||||
const response = await apiClient.get(`/v1/resource/masters/list?master_type=care_sub_type&attr_slug=${attr_slug}`);
|
||||
return response.data?.data?.care_sub_type || [];
|
||||
} catch (error) {
|
||||
console.error('Error fetching care sub types:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
addSkills: async (skills: string[]): Promise<any> => {
|
||||
try {
|
||||
const response = await apiClient.post('/v1/resource/caregiver/skills/add', { skills });
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error adding skills:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
getAvailability: async (): Promise<CaregiverAvailability[]> => {
|
||||
try {
|
||||
const response = await apiClient.get('/v1/resource/caregiver/availability');
|
||||
return response.data?.data || [];
|
||||
} catch (error) {
|
||||
console.error('Error fetching availability:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
addDayAvailability: async (dayData: CaregiverAvailability): Promise<any> => {
|
||||
try {
|
||||
const payload = { schedule: [dayData] };
|
||||
const response = await apiClient.post('/v1/resource/caregiver/availability', payload);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error adding day availability:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
updateDayAvailability: async (dayData: CaregiverAvailability): Promise<any> => {
|
||||
try {
|
||||
const response = await apiClient.patch('/v1/resource/caregiver/availability', dayData);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error updating day availability:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
deleteDayAvailability: async (dayOfWeek: string): Promise<any> => {
|
||||
try {
|
||||
const response = await apiClient.delete(`/v1/resource/caregiver/availability/${dayOfWeek}`);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error deleting day availability:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
};
|
||||
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
declare module '@env' {
|
||||
export const API_BASE_URL: string;
|
||||
export const X_API_KEY: string;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
export interface Caregiver {
|
||||
id: string;
|
||||
name: string;
|
||||
role: string;
|
||||
rating: number;
|
||||
reviews: number;
|
||||
experienceYears: number;
|
||||
about: string;
|
||||
specialties: string[];
|
||||
availability: {
|
||||
weekdays: string;
|
||||
weekends: string;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* Formats a rating number to a string with one decimal place.
|
||||
* Example: 4.8123 -> "4.8"
|
||||
*/
|
||||
export const formatRating = (rating: number): string => {
|
||||
return rating.toFixed(1);
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns initials from a full name.
|
||||
* Example: "Sarah Jenkins" -> "S"
|
||||
*/
|
||||
export const getInitials = (name: string): string => {
|
||||
return name.charAt(0).toUpperCase();
|
||||
};
|
||||
|
||||
import { ENV } from '../config/env';
|
||||
|
||||
/**
|
||||
* Returns a full URL for an image path.
|
||||
*/
|
||||
export const getImageUrl = (path?: string | null): string | undefined => {
|
||||
if (!path) return undefined;
|
||||
if (path.startsWith('http://') || path.startsWith('https://') || path.startsWith('file://') || path.startsWith('content://') || path.startsWith('data:')) {
|
||||
return path;
|
||||
}
|
||||
const baseUrl = ENV.API_BASE_URL.endsWith('/') ? ENV.API_BASE_URL.slice(0, -1) : ENV.API_BASE_URL;
|
||||
const imagePath = path.startsWith('/') ? path : `/${path}`;
|
||||
return `${baseUrl}${imagePath}`;
|
||||
};
|
||||
Reference in New Issue
Block a user