Construction Project Management App UI Design in Expo

import {
  PlusJakartaSans_400Regular,
  PlusJakartaSans_500Medium,
  PlusJakartaSans_600SemiBold,
  PlusJakartaSans_700Bold,
} from '@expo-google-fonts/plus-jakarta-sans';
import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';

export default function RootLayout() {
  const [fontsLoaded] = useFonts({
    PlusJakartaSans_400Regular,
    PlusJakartaSans_500Medium,
    PlusJakartaSans_600SemiBold,
    PlusJakartaSans_700Bold,
  });

  if (!fontsLoaded) return null;

  return <Stack screenOptions={{ headerShown: false }} />;
}

import { BlurView } from 'expo-blur';
import { Image } from 'expo-image';
import { LinearGradient } from 'expo-linear-gradient';
import { router } from 'expo-router';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import Svg, { Circle, Path, Rect } from 'react-native-svg';

import { Screen } from '@/components/screen';
import { asset } from '@/lib/assets';

const accent = '#F26A2E';

export default function MainScreen() {
  return (
    <Screen background="#F3F3F3" statusBar="dark">
      <View style={{ paddingTop: 56, paddingBottom: 0, paddingHorizontal: 20, flex: 1 }}>
        <View
          style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row' }}>
          <View
            accessibilityRole="image"
            accessibilityLabel="App logo"
            style={{
              width: 48,
              height: 48,
              borderRadius: '50%',
              backgroundColor: accent,
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#FFFFFF"
              strokeWidth="1.8"
              strokeLinecap="round"
              strokeLinejoin="round">
              <Path d="M12 3v18" />
              <Path d="M8 21V9l4-6 4 6v12" />
              <Path d="M5 21h14" />
              <Path d="M10 12h4" />
              <Path d="M10 16h4" />
            </Svg>
          </View>
          <View style={{ gap: 10, alignItems: 'center', flexShrink: 1, flexDirection: 'row' }}>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Notifications"
              style={{
                width: 48,
                height: 48,
                borderRadius: '50%',
                borderWidth: 0,
                backgroundColor: '#FFFFFF',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#1A1A1A"
                strokeWidth="1.8"
                strokeLinecap="round"
                strokeLinejoin="round">
                <Path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
                <Path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
              </Svg>
            </Pressable>
            <Image
              source={{ uri: asset('50bb5fb797.png') }}
              contentFit="cover"
              accessibilityLabel="Rubel, profile photo"
              style={{ width: 48, height: 48, borderRadius: '50%' }}
            />
          </View>
        </View>
        <Text
          style={{
            marginTop: 22,
            marginBottom: 0,
            marginHorizontal: 0,
            fontFamily: 'PlusJakartaSans_700Bold',
            fontSize: 30,
            color: '#1A1A1A',
            letterSpacing: -0.6,
            lineHeight: 35.4,
          }}>
          Hey Rubel,{'\n'}
          <Text style={{ fontFamily: 'PlusJakartaSans_600SemiBold', color: '#9A9A9A' }}>
            {'Here’s your '}
          </Text>
          <Text style={{ color: accent }}>project update.</Text>
        </Text>
        <View
          style={{
            marginTop: 18,
            backgroundColor: '#FFFFFF',
            borderRadius: 26,
            paddingTop: 16,
            paddingBottom: 0,
            paddingHorizontal: 16,
            height: 168,
            overflow: 'hidden',
          }}>
          <View
            style={{ justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row' }}>
            <Text
              style={{
                margin: 0,
                flexShrink: 1,
                fontFamily: 'PlusJakartaSans_600SemiBold',
                fontSize: 14,
                color: '#1A1A1A',
              }}>
              Project Snapshot
            </Text>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="More options"
              style={{
                width: 32,
                height: 32,
                borderRadius: '50%',
                borderWidth: 0,
                backgroundColor: '#F1F1F1',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg width="16" height="16" viewBox="0 0 24 24" fill="#1A1A1A">
                <Circle cx="5" cy="12" r="2" />
                <Circle cx="12" cy="12" r="2" />
                <Circle cx="19" cy="12" r="2" />
              </Svg>
            </Pressable>
          </View>
          <Text
            style={{
              marginTop: 10,
              marginBottom: 0,
              marginHorizontal: 0,
              fontFamily: 'PlusJakartaSans_700Bold',
              fontSize: 46,
              color: '#1A1A1A',
              letterSpacing: -1.5,
              lineHeight: 46,
            }}>
            72<Text style={{ fontSize: 22, letterSpacing: 0, lineHeight: 22 }}>%</Text>
          </Text>
          <Text
            style={{
              marginTop: 6,
              marginBottom: 0,
              marginHorizontal: 0,
              fontFamily: 'PlusJakartaSans_400Regular',
              fontSize: 12,
              color: '#767676',
            }}>
            Project completion
          </Text>
          <View
            style={{
              marginTop: 10,
              marginBottom: 0,
              marginHorizontal: 0,
              alignItems: 'center',
              gap: 6,
              backgroundColor: '#F1F1F1',
              borderRadius: 999,
              paddingVertical: 6,
              paddingHorizontal: 10,
              flexDirection: 'row',
            }}>
            <View
              style={{ width: 7, height: 7, borderRadius: '50%', backgroundColor: '#16A34A' }}
            />
            <Text
              style={{
                fontFamily: 'PlusJakartaSans_600SemiBold',
                fontSize: 11,
                color: '#1A1A1A',
                flexShrink: 1,
              }}>
              On Track
            </Text>
          </View>
          <View
            style={{
              position: 'absolute',
              right: 16,
              bottom: 0,
              alignItems: 'flex-end',
              gap: 0,
              height: 110,
              flexDirection: 'row',
            }}>
            <View style={{ width: 26, height: 30 }}>
              <LinearGradient
                colors={['#F7B08C', '#FDEBE1']}
                locations={[0, 1]}
                start={{ x: 0.5, y: 0 }}
                end={{ x: 0.5, y: 1 }}
                style={StyleSheet.absoluteFill}
              />
            </View>
            <View style={{ width: 26, height: 54 }}>
              <LinearGradient
                colors={['#F59D72', '#FDEBE1']}
                locations={[0, 1]}
                start={{ x: 0.5, y: 0 }}
                end={{ x: 0.5, y: 1 }}
                style={StyleSheet.absoluteFill}
              />
            </View>
            <View style={{ width: 26, height: 42 }}>
              <LinearGradient
                colors={['#F7B08C', '#FDEBE1']}
                locations={[0, 1]}
                start={{ x: 0.5, y: 0 }}
                end={{ x: 0.5, y: 1 }}
                style={StyleSheet.absoluteFill}
              />
            </View>
            <View style={{ width: 26, height: 96 }}>
              <LinearGradient
                colors={['#F4895A', '#FDEBE1']}
                locations={[0, 1]}
                start={{ x: 0.5, y: 0 }}
                end={{ x: 0.5, y: 1 }}
                style={StyleSheet.absoluteFill}
              />
            </View>
            <View style={{ width: 26, height: 70 }}>
              <LinearGradient
                colors={['#F59D72', '#FDEBE1']}
                locations={[0, 1]}
                start={{ x: 0.5, y: 0 }}
                end={{ x: 0.5, y: 1 }}
                style={StyleSheet.absoluteFill}
              />
            </View>
            <View style={{ width: 26, height: 50 }}>
              <LinearGradient
                colors={['#F7B08C', '#FDEBE1']}
                locations={[0, 1]}
                start={{ x: 0.5, y: 0 }}
                end={{ x: 0.5, y: 1 }}
                style={StyleSheet.absoluteFill}
              />
            </View>
          </View>
        </View>
        <View style={{ marginTop: 12, flexDirection: 'row', gap: 12 }}>
          <View
            style={{
              backgroundColor: '#FFFFFF',
              borderRadius: 22,
              padding: 12,
              height: 140,
              flex: 1,
            }}>
            <View style={{ gap: 8, alignItems: 'center', flexDirection: 'row' }}>
              <View
                style={{
                  width: 32,
                  height: 32,
                  borderRadius: '50%',
                  borderWidth: 1,
                  borderColor: '#E2E2E2',
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                }}>
                <Svg
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#1A1A1A"
                  strokeWidth="1.8"
                  strokeLinecap="round">
                  <Circle cx="12" cy="12" r="9" />
                  <Path d="M14.5 9.5c-.5-1-1.5-1.5-2.5-1.5-1.5 0-2.5.8-2.5 2s1 1.7 2.5 2 2.5.8 2.5 2-1 2-2.5 2c-1 0-2-.5-2.5-1.5" />
                  <Path d="M12 6.5v11" />
                </Svg>
              </View>
              <View style={{ flexShrink: 1 }}>
                <Text
                  style={{
                    margin: 0,
                    fontFamily: 'PlusJakartaSans_400Regular',
                    fontSize: 10,
                    color: '#767676',
                  }}>
                  Budget
                </Text>
                <Text
                  style={{
                    margin: 0,
                    fontFamily: 'PlusJakartaSans_700Bold',
                    fontSize: 13,
                    color: '#1A1A1A',
                  }}>
                  $120,000
                </Text>
              </View>
            </View>
            <View
              style={{
                marginTop: 'auto',
                backgroundColor: '#EFEFEF',
                borderRadius: 12,
                height: 72,
                alignItems: 'flex-end',
                justifyContent: 'center',
                overflow: 'hidden',
                flexDirection: 'row',
              }}>
              <View style={{ width: 18, height: 20 }}>
                <LinearGradient
                  colors={['#F7B08C', '#FDEBE1']}
                  locations={[0, 1]}
                  start={{ x: 0.5, y: 0 }}
                  end={{ x: 0.5, y: 1 }}
                  style={StyleSheet.absoluteFill}
                />
              </View>
              <View style={{ width: 18, height: 34 }}>
                <LinearGradient
                  colors={['#F59D72', '#FDEBE1']}
                  locations={[0, 1]}
                  start={{ x: 0.5, y: 0 }}
                  end={{ x: 0.5, y: 1 }}
                  style={StyleSheet.absoluteFill}
                />
              </View>
              <View style={{ width: 18, height: 56 }}>
                <LinearGradient
                  colors={['#F4895A', '#FDEBE1']}
                  locations={[0, 1]}
                  start={{ x: 0.5, y: 0 }}
                  end={{ x: 0.5, y: 1 }}
                  style={StyleSheet.absoluteFill}
                />
              </View>
              <View style={{ width: 18, height: 40 }}>
                <LinearGradient
                  colors={['#F59D72', '#FDEBE1']}
                  locations={[0, 1]}
                  start={{ x: 0.5, y: 0 }}
                  end={{ x: 0.5, y: 1 }}
                  style={StyleSheet.absoluteFill}
                />
              </View>
              <View style={{ width: 18, height: 26 }}>
                <LinearGradient
                  colors={['#F7B08C', '#FDEBE1']}
                  locations={[0, 1]}
                  start={{ x: 0.5, y: 0 }}
                  end={{ x: 0.5, y: 1 }}
                  style={StyleSheet.absoluteFill}
                />
              </View>
              <View style={{ width: 18, height: 46 }}>
                <LinearGradient
                  colors={['#F59D72', '#FDEBE1']}
                  locations={[0, 1]}
                  start={{ x: 0.5, y: 0 }}
                  end={{ x: 0.5, y: 1 }}
                  style={StyleSheet.absoluteFill}
                />
              </View>
              <View style={{ width: 18, height: 22 }}>
                <LinearGradient
                  colors={['#F7B08C', '#FDEBE1']}
                  locations={[0, 1]}
                  start={{ x: 0.5, y: 0 }}
                  end={{ x: 0.5, y: 1 }}
                  style={StyleSheet.absoluteFill}
                />
              </View>
            </View>
          </View>
          <View
            style={{
              backgroundColor: '#FFFFFF',
              borderRadius: 22,
              padding: 12,
              height: 140,
              flex: 1,
            }}>
            <View style={{ gap: 8, alignItems: 'center', flexDirection: 'row' }}>
              <View
                style={{
                  width: 32,
                  height: 32,
                  borderRadius: '50%',
                  borderWidth: 1,
                  borderColor: '#E2E2E2',
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                }}>
                <Svg
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#1A1A1A"
                  strokeWidth="1.8"
                  strokeLinecap="round"
                  strokeLinejoin="round">
                  <Path d="M3 12h4l3-8 4 16 3-8h4" />
                </Svg>
              </View>
              <View style={{ flexShrink: 1 }}>
                <Text
                  style={{
                    margin: 0,
                    fontFamily: 'PlusJakartaSans_400Regular',
                    fontSize: 10,
                    color: '#767676',
                  }}>
                  Spent
                </Text>
                <Text
                  style={{
                    margin: 0,
                    fontFamily: 'PlusJakartaSans_700Bold',
                    fontSize: 13,
                    color: '#1A1A1A',
                  }}>
                  40% Total
                </Text>
              </View>
            </View>
            <View
              style={{
                marginTop: 'auto',
                backgroundColor: '#EFEFEF',
                borderRadius: 12,
                height: 72,
                overflow: 'hidden',
              }}>
              <View style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 30 }}>
                <LinearGradient
                  colors={['#F8B796', '#FDEBE1']}
                  locations={[0, 1]}
                  start={{ x: 0.5, y: 0 }}
                  end={{ x: 0.5, y: 1 }}
                  style={StyleSheet.absoluteFill}
                />
              </View>
              <View
                style={{
                  position: 'absolute',
                  left: 30,
                  top: 22,
                  width: 13,
                  height: 13,
                  borderRadius: '50%',
                  borderWidth: 2,
                  borderColor: '#F26A2E',
                  backgroundColor: '#FFFFFF',
                }}
              />
              <View
                style={{
                  position: 'absolute',
                  right: 6,
                  top: 14,
                  backgroundColor: '#FFFFFF',
                  borderRadius: 8,
                  paddingVertical: 4,
                  paddingHorizontal: 7,
                }}>
                <Text
                  style={{
                    margin: 0,
                    fontFamily: 'PlusJakartaSans_700Bold',
                    fontSize: 10,
                    color: '#1A1A1A',
                  }}>
                  $80,000
                </Text>
                <Text
                  style={{
                    margin: 0,
                    fontFamily: 'PlusJakartaSans_400Regular',
                    fontSize: 8,
                    color: '#767676',
                  }}>
                  Total Spent
                </Text>
              </View>
            </View>
          </View>
        </View>
        <View
          style={{
            marginTop: 20,
            justifyContent: 'space-between',
            alignItems: 'center',
            flexDirection: 'row',
          }}>
          <Text
            style={{
              margin: 0,
              flexShrink: 1,
              fontFamily: 'PlusJakartaSans_700Bold',
              fontSize: 16,
              color: '#1A1A1A',
            }}>
            Today’s Tasks
          </Text>
          <Pressable
            accessibilityRole="link"
            onPress={() => router.navigate('/tasks')}
            style={{ flexShrink: 1 }}>
            <Text
              style={{ fontFamily: 'PlusJakartaSans_400Regular', fontSize: 12, color: '#6B6B6B' }}>
              View All
            </Text>
          </Pressable>
        </View>
        <View style={{ marginTop: 12, marginBottom: 0, marginHorizontal: 0, padding: 0, gap: 10 }}>
          <View
            style={{
              backgroundColor: '#FFFFFF',
              borderRadius: 22,
              padding: 12,
              alignItems: 'center',
              gap: 12,
              flexDirection: 'row',
            }}>
            <View
              style={{
                width: 40,
                height: 40,
                borderRadius: '50%',
                backgroundColor: '#F3F3F3',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#1A1A1A"
                strokeWidth="1.8"
                strokeLinecap="round">
                <Path d="M3 7h18" />
                <Path d="M3 17h18" />
                <Path d="M6 7l4 10" />
                <Path d="M14 7l4 10" />
                <Path d="M18 7l-4 10" />
              </Svg>
            </View>
            <View style={{ flex: 1, minWidth: 0 }}>
              <Text
                style={{
                  margin: 0,
                  fontFamily: 'PlusJakartaSans_600SemiBold',
                  fontSize: 14,
                  color: '#1A1A1A',
                }}>
                Install Steel Frame
              </Text>
              <Text
                style={{
                  marginTop: 2,
                  marginBottom: 0,
                  marginHorizontal: 0,
                  fontFamily: 'PlusJakartaSans_400Regular',
                  fontSize: 11,
                  color: '#767676',
                }}>
                Building B · Level 2
              </Text>
            </View>
            <Text
              style={{
                borderWidth: 1,
                borderColor: '#F8C4A8',
                borderRadius: 999,
                paddingVertical: 4,
                paddingHorizontal: 9,
                flexShrink: 1,
                fontFamily: 'PlusJakartaSans_600SemiBold',
                fontSize: 10,
                color: '#C2410C',
              }}>
              In progress
            </Text>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Open task"
              style={{
                width: 34,
                height: 34,
                borderRadius: '50%',
                borderWidth: 1,
                borderColor: '#E2E2E2',
                backgroundColor: '#FFFFFF',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#1A1A1A"
                strokeWidth="2"
                strokeLinecap="round">
                <Path d="M9 6l6 6-6 6" />
              </Svg>
            </Pressable>
          </View>
          <View
            style={{
              backgroundColor: '#FFFFFF',
              borderRadius: 22,
              padding: 12,
              alignItems: 'center',
              gap: 12,
              flexDirection: 'row',
            }}>
            <View
              style={{
                width: 40,
                height: 40,
                borderRadius: '50%',
                backgroundColor: '#F3F3F3',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#1A1A1A"
                strokeWidth="1.8"
                strokeLinecap="round">
                <Rect x="5" y="4" width="14" height="17" rx="2" />
                <Path d="M9 4V3h6v1" />
                <Path d="M9 11h6" />
                <Path d="M9 15h4" />
              </Svg>
            </View>
            <View style={{ flex: 1, minWidth: 0 }}>
              <Text
                style={{
                  margin: 0,
                  fontFamily: 'PlusJakartaSans_600SemiBold',
                  fontSize: 14,
                  color: '#1A1A1A',
                }}>
                Site Safety Inspection
              </Text>
              <Text
                style={{
                  marginTop: 2,
                  marginBottom: 0,
                  marginHorizontal: 0,
                  fontFamily: 'PlusJakartaSans_400Regular',
                  fontSize: 11,
                  color: '#767676',
                }}>
                Building A
              </Text>
            </View>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Open task"
              style={{
                width: 34,
                height: 34,
                borderRadius: '50%',
                borderWidth: 1,
                borderColor: '#E2E2E2',
                backgroundColor: '#FFFFFF',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#1A1A1A"
                strokeWidth="2"
                strokeLinecap="round">
                <Path d="M9 6l6 6-6 6" />
              </Svg>
            </Pressable>
          </View>
        </View>
        <View
          style={{
            position: 'absolute',
            left: '50%',
            bottom: 28,
            transform: [{ translateX: '-50%' }],
            gap: 6,
            alignItems: 'center',
            backgroundColor: 'rgba(214,214,214,0.82)',
            borderRadius: 999,
            padding: 6,
            overflow: 'hidden',
            flexDirection: 'row',
          }}>
          <BlurView intensity={28} tint="default" style={StyleSheet.absoluteFill} />
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Home"
            onPress={() => router.navigate('/')}
            style={{
              width: 50,
              height: 50,
              borderRadius: '50%',
              backgroundColor: '#111111',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#FFFFFF"
              strokeWidth="1.8"
              strokeLinejoin="round">
              <Path d="M4 10l8-6 8 6v10H4z" />
              <Path d="M10 20v-5h4v5" />
            </Svg>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Tasks"
            onPress={() => router.navigate('/tasks')}
            style={{
              width: 50,
              height: 50,
              borderRadius: '50%',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1A1A1A"
              strokeWidth="1.8"
              strokeLinecap="round">
              <Rect x="5" y="4" width="14" height="17" rx="2" />
              <Path d="M9 4V3h6v1" />
              <Path d="M9 11h6" />
              <Path d="M9 15h4" />
            </Svg>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Reports"
            onPress={() => router.navigate('/progress')}
            style={{
              width: 50,
              height: 50,
              borderRadius: '50%',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1A1A1A"
              strokeWidth="1.8"
              strokeLinecap="round"
              strokeLinejoin="round">
              <Path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" />
              <Path d="M14 3v5h5" />
              <Path d="M9 14h6" />
              <Path d="M9 17h4" />
            </Svg>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="More"
            style={{
              width: 50,
              height: 50,
              borderRadius: '50%',
              borderWidth: 0,
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg width="18" height="18" viewBox="0 0 24 24" fill="#1A1A1A">
              <Circle cx="5" cy="12" r="2" />
              <Circle cx="12" cy="12" r="2" />
              <Circle cx="19" cy="12" r="2" />
            </Svg>
          </Pressable>
        </View>
      </View>
    </Screen>
  );
}

import { BlurView } from 'expo-blur';
import { LinearGradient } from 'expo-linear-gradient';
import { router } from 'expo-router';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import Svg, { Circle, Path, Rect } from 'react-native-svg';

import { Screen } from '@/components/screen';

export default function ProgressScreen() {
  return (
    <Screen background="#F3F3F3" statusBar="dark">
      <View style={{ paddingTop: 56, paddingBottom: 0, paddingHorizontal: 20, flex: 1 }}>
        <View style={{ alignItems: 'center', gap: 10, flexDirection: 'row' }}>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Back"
            onPress={() => router.navigate('/tasks')}
            style={{
              width: 46,
              height: 46,
              borderRadius: '50%',
              backgroundColor: '#FFFFFF',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1A1A1A"
              strokeWidth="2"
              strokeLinecap="round">
              <Path d="M15 6l-6 6 6 6" />
            </Svg>
          </Pressable>
          <Text
            style={{
              marginVertical: 0,
              marginLeft: 6,
              marginRight: 0,
              flex: 1,
              fontFamily: 'PlusJakartaSans_700Bold',
              fontSize: 18,
              color: '#1A1A1A',
              flexShrink: 1,
            }}>
            Tasks
          </Text>
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="Add task"
            style={{
              width: 46,
              height: 46,
              borderRadius: '50%',
              borderWidth: 0,
              backgroundColor: '#FFFFFF',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1A1A1A"
              strokeWidth="2"
              strokeLinecap="round">
              <Path d="M12 5v14" />
              <Path d="M5 12h14" />
            </Svg>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="Sites"
            style={{
              width: 46,
              height: 46,
              borderRadius: '50%',
              borderWidth: 0,
              backgroundColor: '#FFFFFF',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1A1A1A"
              strokeWidth="1.8"
              strokeLinejoin="round">
              <Path d="M4 10l8-6 8 6v10H4z" />
              <Path d="M9 14c1 1 5 1 6 0" />
            </Svg>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="More options"
            style={{
              width: 46,
              height: 46,
              borderRadius: '50%',
              borderWidth: 0,
              backgroundColor: '#FFFFFF',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg width="16" height="16" viewBox="0 0 24 24" fill="#1A1A1A">
              <Circle cx="5" cy="12" r="2" />
              <Circle cx="12" cy="12" r="2" />
              <Circle cx="19" cy="12" r="2" />
            </Svg>
          </Pressable>
        </View>
        <View style={{ marginTop: 20, backgroundColor: '#FFFFFF', borderRadius: 26, padding: 10 }}>
          <View
            style={{
              backgroundColor: '#F3F3F3',
              borderRadius: 999,
              padding: 0,
              flexDirection: 'row',
            }}>
            <Pressable
              accessibilityRole="button"
              style={{
                flex: 1,
                height: 44,
                borderRadius: 999,
                borderWidth: 0,
                backgroundColor: '#111111',
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <Text
                style={{
                  fontFamily: 'PlusJakartaSans_600SemiBold',
                  fontSize: 13,
                  color: '#FFFFFF',
                  textAlign: 'center',
                }}>
                Progress
              </Text>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              style={{
                flex: 1,
                height: 44,
                borderRadius: 999,
                borderWidth: 0,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <Text
                style={{
                  fontFamily: 'PlusJakartaSans_500Medium',
                  fontSize: 13,
                  color: '#1A1A1A',
                  textAlign: 'center',
                }}>
                Timeline
              </Text>
            </Pressable>
          </View>
          <View style={{ marginTop: 10, gap: 8, flexDirection: 'row' }}>
            <Pressable
              accessibilityRole="button"
              style={{
                flex: 1,
                height: 44,
                borderRadius: 999,
                borderWidth: 1,
                borderColor: '#E6E6E6',
                backgroundColor: '#FFFFFF',
                gap: 8,
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#1A1A1A"
                strokeWidth="1.8"
                strokeLinecap="round">
                <Path d="M4 20h16" />
                <Path d="M4 16l5-5 4 3 7-7" />
              </Svg>
              <Text
                style={{
                  fontFamily: 'PlusJakartaSans_400Regular',
                  fontSize: 12,
                  color: '#1A1A1A',
                  flexShrink: 1,
                }}>
                Daily Progress chart
              </Text>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              style={{
                flexGrow: 0.8,
                height: 44,
                borderRadius: 999,
                borderWidth: 1,
                borderColor: '#E6E6E6',
                backgroundColor: '#FFFFFF',
                gap: 8,
                alignItems: 'center',
                justifyContent: 'center',
                flexShrink: 1,
                flexDirection: 'row',
              }}>
              <Svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#1A1A1A"
                strokeWidth="1.8">
                <Rect x="4" y="4" width="7" height="7" rx="1.5" />
                <Rect x="13" y="4" width="7" height="7" rx="1.5" />
                <Rect x="4" y="13" width="7" height="7" rx="1.5" />
                <Rect x="13" y="13" width="7" height="7" rx="1.5" />
              </Svg>
              <Text
                style={{
                  fontFamily: 'PlusJakartaSans_400Regular',
                  fontSize: 12,
                  color: '#1A1A1A',
                  flexShrink: 1,
                }}>
                Work Areas
              </Text>
            </Pressable>
          </View>
        </View>
        <View
          style={{
            marginTop: 12,
            backgroundColor: '#FFFFFF',
            borderRadius: 26,
            paddingTop: 16,
            paddingBottom: 0,
            paddingHorizontal: 16,
            height: 166,
            overflow: 'hidden',
          }}>
          <View
            style={{ justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row' }}>
            <Text
              style={{
                margin: 0,
                flexShrink: 1,
                fontFamily: 'PlusJakartaSans_600SemiBold',
                fontSize: 14,
                color: '#1A1A1A',
              }}>
              Overall Completion
            </Text>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="More options"
              style={{
                width: 32,
                height: 32,
                borderRadius: '50%',
                borderWidth: 0,
                backgroundColor: '#F1F1F1',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg width="16" height="16" viewBox="0 0 24 24" fill="#1A1A1A">
                <Circle cx="5" cy="12" r="2" />
                <Circle cx="12" cy="12" r="2" />
                <Circle cx="19" cy="12" r="2" />
              </Svg>
            </Pressable>
          </View>
          <Text
            style={{
              marginTop: 10,
              marginBottom: 0,
              marginHorizontal: 0,
              fontFamily: 'PlusJakartaSans_700Bold',
              fontSize: 44,
              color: '#1A1A1A',
              letterSpacing: -1.5,
              lineHeight: 44,
            }}>
            66<Text style={{ fontSize: 22, letterSpacing: 0, lineHeight: 22 }}>%</Text>
          </Text>
          <Text
            style={{
              marginTop: 6,
              marginBottom: 0,
              marginHorizontal: 0,
              fontFamily: 'PlusJakartaSans_400Regular',
              fontSize: 12,
              color: '#767676',
            }}>
            Project completion
          </Text>
          <View
            style={{
              marginTop: 10,
              marginBottom: 0,
              marginHorizontal: 0,
              alignItems: 'center',
              gap: 6,
              backgroundColor: '#F1F1F1',
              borderRadius: 999,
              paddingVertical: 6,
              paddingHorizontal: 10,
              flexDirection: 'row',
            }}>
            <View
              style={{ width: 7, height: 7, borderRadius: '50%', backgroundColor: '#16A34A' }}
            />
            <Text
              style={{
                fontFamily: 'PlusJakartaSans_600SemiBold',
                fontSize: 11,
                color: '#1A1A1A',
                flexShrink: 1,
              }}>
              On Track
            </Text>
          </View>
          <View
            style={{
              position: 'absolute',
              right: 16,
              bottom: 0,
              alignItems: 'flex-end',
              height: 112,
              flexDirection: 'row',
            }}>
            <View style={{ width: 24, height: 36 }}>
              <LinearGradient
                colors={['#F7B08C', '#FDEBE1']}
                locations={[0, 1]}
                start={{ x: 0.5, y: 0 }}
                end={{ x: 0.5, y: 1 }}
                style={StyleSheet.absoluteFill}
              />
            </View>
            <View style={{ width: 24, height: 62 }}>
              <LinearGradient
                colors={['#F59D72', '#FDEBE1']}
                locations={[0, 1]}
                start={{ x: 0.5, y: 0 }}
                end={{ x: 0.5, y: 1 }}
                style={StyleSheet.absoluteFill}
              />
            </View>
            <View style={{ width: 24, height: 106 }}>
              <LinearGradient
                colors={['#F4895A', '#FDEBE1']}
                locations={[0, 1]}
                start={{ x: 0.5, y: 0 }}
                end={{ x: 0.5, y: 1 }}
                style={StyleSheet.absoluteFill}
              />
            </View>
            <View style={{ width: 24, height: 80 }}>
              <LinearGradient
                colors={['#F59D72', '#FDEBE1']}
                locations={[0, 1]}
                start={{ x: 0.5, y: 0 }}
                end={{ x: 0.5, y: 1 }}
                style={StyleSheet.absoluteFill}
              />
            </View>
            <View style={{ width: 24, height: 52 }}>
              <LinearGradient
                colors={['#F7B08C', '#FDEBE1']}
                locations={[0, 1]}
                start={{ x: 0.5, y: 0 }}
                end={{ x: 0.5, y: 1 }}
                style={StyleSheet.absoluteFill}
              />
            </View>
            <View style={{ width: 24, height: 72 }}>
              <LinearGradient
                colors={['#F59D72', '#FDEBE1']}
                locations={[0, 1]}
                start={{ x: 0.5, y: 0 }}
                end={{ x: 0.5, y: 1 }}
                style={StyleSheet.absoluteFill}
              />
            </View>
          </View>
        </View>
        <View
          style={{
            marginTop: 12,
            backgroundColor: '#FFFFFF',
            borderRadius: 26,
            padding: 16,
            height: 330,
            overflow: 'hidden',
          }}>
          <View
            style={{
              justifyContent: 'space-between',
              alignItems: 'flex-start',
              flexDirection: 'row',
            }}>
            <View style={{ flexShrink: 1 }}>
              <Text
                style={{
                  margin: 0,
                  fontFamily: 'PlusJakartaSans_600SemiBold',
                  fontSize: 14,
                  color: '#1A1A1A',
                }}>
                Progress forecast
              </Text>
              <Text
                style={{
                  marginTop: 3,
                  marginBottom: 0,
                  marginHorizontal: 0,
                  fontFamily: 'PlusJakartaSans_400Regular',
                  fontSize: 11,
                  color: '#767676',
                }}>
                Progress is 75% ahead of planned schedule
              </Text>
            </View>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="More options"
              style={{
                width: 32,
                height: 32,
                borderRadius: '50%',
                borderWidth: 0,
                backgroundColor: '#F1F1F1',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg width="16" height="16" viewBox="0 0 24 24" fill="#1A1A1A">
                <Circle cx="5" cy="12" r="2" />
                <Circle cx="12" cy="12" r="2" />
                <Circle cx="19" cy="12" r="2" />
              </Svg>
            </Pressable>
          </View>
          <View
            style={{
              marginTop: 12,
              alignItems: 'center',
              justifyContent: 'space-between',
              flexDirection: 'row',
            }}>
            <View style={{ alignItems: 'baseline', gap: 8, flexShrink: 1, flexDirection: 'row' }}>
              <Text
                style={{
                  margin: 0,
                  flexShrink: 1,
                  fontFamily: 'PlusJakartaSans_700Bold',
                  fontSize: 34,
                  color: '#1A1A1A',
                  letterSpacing: -1,
                  lineHeight: 34,
                }}>
                75<Text style={{ fontSize: 18, letterSpacing: 0, lineHeight: 18 }}>%</Text>
              </Text>
              <View
                style={{
                  margin: 0,
                  alignItems: 'center',
                  gap: 3,
                  flexShrink: 1,
                  flexDirection: 'row',
                }}>
                <Svg width="10" height="10" viewBox="0 0 10 10">
                  <Path d="M5 1l4 7H1z" fill="#16A34A" />
                </Svg>
                <Text
                  style={{
                    fontFamily: 'PlusJakartaSans_600SemiBold',
                    fontSize: 10,
                    color: '#1A1A1A',
                    flexShrink: 1,
                  }}>
                  Ahead of plan
                </Text>
              </View>
            </View>
            <View
              style={{
                backgroundColor: '#F3F3F3',
                borderRadius: 999,
                padding: 3,
                flexShrink: 1,
                flexDirection: 'row',
              }}>
              <Pressable
                accessibilityRole="button"
                style={{
                  height: 28,
                  borderRadius: 999,
                  borderWidth: 0,
                  paddingVertical: 0,
                  paddingHorizontal: 10,
                  flexShrink: 1,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <Text
                  style={{
                    fontFamily: 'PlusJakartaSans_400Regular',
                    fontSize: 10,
                    color: '#1A1A1A',
                    textAlign: 'center',
                  }}>
                  Planned
                </Text>
              </Pressable>
              <Pressable
                accessibilityRole="button"
                style={{
                  height: 28,
                  borderRadius: 999,
                  borderWidth: 0,
                  backgroundColor: '#111111',
                  paddingVertical: 0,
                  paddingHorizontal: 10,
                  flexShrink: 1,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <Text
                  style={{
                    fontFamily: 'PlusJakartaSans_400Regular',
                    fontSize: 10,
                    color: '#FFFFFF',
                    textAlign: 'center',
                  }}>
                  Actual
                </Text>
              </Pressable>
            </View>
          </View>
          <View style={{ marginTop: 16, height: 170, paddingLeft: 34 }}>
            <View
              style={{
                position: 'absolute',
                left: 0,
                top: 0,
                bottom: 18,
                justifyContent: 'space-between',
              }}>
              <Text
                style={{
                  fontFamily: 'PlusJakartaSans_400Regular',
                  fontSize: 10,
                  color: '#767676',
                }}>
                100%
              </Text>
              <Text
                style={{
                  fontFamily: 'PlusJakartaSans_400Regular',
                  fontSize: 10,
                  color: '#767676',
                }}>
                75%
              </Text>
              <Text
                style={{
                  fontFamily: 'PlusJakartaSans_400Regular',
                  fontSize: 10,
                  color: '#767676',
                }}>
                50%
              </Text>
              <Text
                style={{
                  fontFamily: 'PlusJakartaSans_400Regular',
                  fontSize: 10,
                  color: '#767676',
                }}>
                25%
              </Text>
              <Text
                style={{
                  fontFamily: 'PlusJakartaSans_400Regular',
                  fontSize: 10,
                  color: '#767676',
                }}>
                0%
              </Text>
            </View>
            <View
              style={{
                position: 'absolute',
                left: 34,
                right: 0,
                bottom: 18,
                height: 152,
                alignItems: 'flex-end',
                flexDirection: 'row',
              }}>
              <View style={{ flex: 1, height: 38 }}>
                <LinearGradient
                  colors={['#F7B08C', '#FDEBE1']}
                  locations={[0, 1]}
                  start={{ x: 0.5, y: 0 }}
                  end={{ x: 0.5, y: 1 }}
                  style={StyleSheet.absoluteFill}
                />
              </View>
              <View style={{ flex: 1, height: 70 }}>
                <LinearGradient
                  colors={['#F59D72', '#FDEBE1']}
                  locations={[0, 1]}
                  start={{ x: 0.5, y: 0 }}
                  end={{ x: 0.5, y: 1 }}
                  style={StyleSheet.absoluteFill}
                />
              </View>
              <View style={{ flex: 1, height: 98 }}>
                <LinearGradient
                  colors={['#F4895A', '#FDEBE1']}
                  locations={[0, 1]}
                  start={{ x: 0.5, y: 0 }}
                  end={{ x: 0.5, y: 1 }}
                  style={StyleSheet.absoluteFill}
                />
              </View>
              <View style={{ flex: 1, height: 62 }}>
                <LinearGradient
                  colors={['#F59D72', '#FDEBE1']}
                  locations={[0, 1]}
                  start={{ x: 0.5, y: 0 }}
                  end={{ x: 0.5, y: 1 }}
                  style={StyleSheet.absoluteFill}
                />
              </View>
              <View style={{ flex: 1, height: 120 }}>
                <LinearGradient
                  colors={['#F4895A', '#FDEBE1']}
                  locations={[0, 1]}
                  start={{ x: 0.5, y: 0 }}
                  end={{ x: 0.5, y: 1 }}
                  style={StyleSheet.absoluteFill}
                />
              </View>
              <View style={{ flex: 1, height: 84 }}>
                <LinearGradient
                  colors={['#F59D72', '#FDEBE1']}
                  locations={[0, 1]}
                  start={{ x: 0.5, y: 0 }}
                  end={{ x: 0.5, y: 1 }}
                  style={StyleSheet.absoluteFill}
                />
              </View>
              <View style={{ flex: 1, height: 52 }}>
                <LinearGradient
                  colors={['#F7B08C', '#FDEBE1']}
                  locations={[0, 1]}
                  start={{ x: 0.5, y: 0 }}
                  end={{ x: 0.5, y: 1 }}
                  style={StyleSheet.absoluteFill}
                />
              </View>
            </View>
            <View
              style={{
                position: 'absolute',
                left: 82,
                top: 40,
                width: 104,
                height: 2,
                borderTopWidth: 1,
                borderTopColor: '#F26A2E',
                borderStyle: 'dashed',
              }}
            />
            <View
              style={{
                position: 'absolute',
                left: 76,
                top: 34,
                width: 14,
                height: 14,
                borderRadius: '50%',
                backgroundColor: '#FFFFFF',
                borderWidth: 2,
                borderColor: '#F26A2E',
              }}
            />
            <View
              style={{
                position: 'absolute',
                left: 150,
                top: 6,
                backgroundColor: '#FFFFFF',
                borderRadius: 12,
                paddingVertical: 8,
                paddingHorizontal: 12,
                boxShadow: '0 6px 20px rgba(0,0,0,0.08)',
              }}>
              <Text
                style={{
                  margin: 0,
                  fontFamily: 'PlusJakartaSans_700Bold',
                  fontSize: 14,
                  color: '#C2410C',
                }}>
                12,279
              </Text>
              <Text
                style={{
                  marginTop: 1,
                  marginBottom: 0,
                  marginHorizontal: 0,
                  fontFamily: 'PlusJakartaSans_600SemiBold',
                  fontSize: 11,
                  color: '#1A1A1A',
                }}>
                cu yd completed
              </Text>
              <Text
                style={{
                  marginTop: 1,
                  marginBottom: 0,
                  marginHorizontal: 0,
                  fontFamily: 'PlusJakartaSans_400Regular',
                  fontSize: 9,
                  color: '#767676',
                }}>
                This Week
              </Text>
            </View>
            <Text
              style={{
                position: 'absolute',
                right: 0,
                bottom: 0,
                fontFamily: 'PlusJakartaSans_400Regular',
                fontSize: 10,
                color: '#767676',
              }}>
              July
            </Text>
          </View>
        </View>
        <View
          style={{
            position: 'absolute',
            left: '50%',
            bottom: 28,
            transform: [{ translateX: '-50%' }],
            gap: 6,
            alignItems: 'center',
            backgroundColor: 'rgba(214,214,214,0.82)',
            borderRadius: 999,
            padding: 6,
            overflow: 'hidden',
            flexDirection: 'row',
          }}>
          <BlurView intensity={28} tint="default" style={StyleSheet.absoluteFill} />
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Home"
            onPress={() => router.navigate('/')}
            style={{
              width: 50,
              height: 50,
              borderRadius: '50%',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1A1A1A"
              strokeWidth="1.8"
              strokeLinejoin="round">
              <Path d="M4 10l8-6 8 6v10H4z" />
              <Path d="M10 20v-5h4v5" />
            </Svg>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Tasks"
            onPress={() => router.navigate('/tasks')}
            style={{
              width: 50,
              height: 50,
              borderRadius: '50%',
              backgroundColor: '#111111',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#FFFFFF"
              strokeWidth="1.8"
              strokeLinecap="round">
              <Rect x="5" y="4" width="14" height="17" rx="2" />
              <Path d="M9 4V3h6v1" />
              <Path d="M9 11h6" />
              <Path d="M9 15h4" />
            </Svg>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Reports"
            onPress={() => router.navigate('/progress')}
            style={{
              width: 50,
              height: 50,
              borderRadius: '50%',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1A1A1A"
              strokeWidth="1.8"
              strokeLinecap="round"
              strokeLinejoin="round">
              <Path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" />
              <Path d="M14 3v5h5" />
              <Path d="M9 14h6" />
              <Path d="M9 17h4" />
            </Svg>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="More"
            style={{
              width: 50,
              height: 50,
              borderRadius: '50%',
              borderWidth: 0,
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg width="18" height="18" viewBox="0 0 24 24" fill="#1A1A1A">
              <Circle cx="5" cy="12" r="2" />
              <Circle cx="12" cy="12" r="2" />
              <Circle cx="19" cy="12" r="2" />
            </Svg>
          </Pressable>
        </View>
      </View>
    </Screen>
  );
}

import { BlurView } from 'expo-blur';
import { Image } from 'expo-image';
import { router } from 'expo-router';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import Svg, { Circle, Path, Rect } from 'react-native-svg';

import { Screen } from '@/components/screen';
import { asset } from '@/lib/assets';

const tasks = [
  {
    title: 'Concrete Pouring',
    place: 'Level 3 · Zone B',
    status: 'In progress',
    tone: 'progress',
    date: 'May 5, 2025 · 9:00 AM',
    pct: 60,
    a1: 'b26cb59928.png',
    a2: '91feabbcba.png',
    more: '2+',
    icon: 'M4 18h16M6 18l3-9h6l3 9M10 9V5h4v4',
    color: '#F26A2E',
    text: '#C2410C',
    soft: '#FFFFFF',
    line: '#F8C4A8',
    width: '60%',
    knob: '60%',
  },
  {
    title: 'Steel Structure',
    place: 'Level 2 · Zone A',
    status: 'Completed',
    tone: 'done',
    date: 'Apr 30, 2025 · 10:00 AM',
    pct: 100,
    a1: '2c12743178.png',
    a2: 'b26cb59928.png',
    more: '3+',
    icon: 'M5 9h14M5 15h14M9 5v14M15 5v14',
    color: '#16A34A',
    text: '#15803D',
    soft: '#EAF7EE',
    line: '#B7E4C4',
    width: '100%',
    knob: '100%',
  },
  {
    title: 'Electrical Rough-In',
    place: 'Level 4 · Zone C',
    status: 'Delayed',
    tone: 'late',
    date: 'May 6, 2026 · 1:00 PM',
    pct: 25,
    a1: '91feabbcba.png',
    a2: '2c12743178.png',
    more: '1+',
    icon: 'M13 3L5 13h6l-1 8 8-10h-6z',
    color: '#E5484D',
    text: '#C42B30',
    soft: '#FFFFFF',
    line: '#F5B8BA',
    width: '25%',
    knob: '25%',
  },
  {
    title: 'Plumbing Install',
    place: 'Level 1 · Zone D',
    status: 'In progress',
    tone: 'progress',
    date: 'May 9, 2025 · 11:00 AM',
    pct: 40,
    a1: 'b26cb59928.png',
    a2: '2c12743178.png',
    more: '2+',
    icon: 'M5 8h8a3 3 0 0 1 3 3v8M16 19h3M5 5v6',
    color: '#F26A2E',
    text: '#C2410C',
    soft: '#FFFFFF',
    line: '#F8C4A8',
    width: '40%',
    knob: '40%',
  },
];

export default function TasksScreen() {
  return (
    <Screen background="#F3F3F3" statusBar="dark">
      <View style={{ paddingTop: 56, paddingBottom: 0, paddingHorizontal: 20, flex: 1 }}>
        <View
          style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row' }}>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Back"
            onPress={() => router.navigate('/')}
            style={{
              width: 46,
              height: 46,
              borderRadius: '50%',
              backgroundColor: '#FFFFFF',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1A1A1A"
              strokeWidth="2"
              strokeLinecap="round">
              <Path d="M15 6l-6 6 6 6" />
            </Svg>
          </Pressable>
          <Text
            style={{
              margin: 0,
              flexShrink: 1,
              fontFamily: 'PlusJakartaSans_700Bold',
              fontSize: 18,
              color: '#1A1A1A',
            }}>
            Tasks
          </Text>
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="Filters"
            style={{
              width: 46,
              height: 46,
              borderRadius: '50%',
              borderWidth: 0,
              backgroundColor: '#FFFFFF',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1A1A1A"
              strokeWidth="1.8"
              strokeLinecap="round">
              <Path d="M4 7h10" />
              <Path d="M18 7h2" />
              <Circle cx="16" cy="7" r="2" />
              <Path d="M4 17h2" />
              <Path d="M10 17h10" />
              <Circle cx="8" cy="17" r="2" />
            </Svg>
          </Pressable>
        </View>
        <View style={{ marginTop: 22, gap: 8, flexDirection: 'row' }}>
          <Pressable
            accessibilityRole="button"
            style={{
              flex: 1,
              height: 44,
              borderRadius: 999,
              borderWidth: 0,
              backgroundColor: '#111111',
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontFamily: 'PlusJakartaSans_600SemiBold',
                fontSize: 12,
                color: '#FFFFFF',
                textAlign: 'center',
              }}>
              All (24)
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            style={{
              flexGrow: 1.2,
              height: 44,
              borderRadius: 999,
              borderWidth: 0,
              backgroundColor: '#FFFFFF',
              flexShrink: 1,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontFamily: 'PlusJakartaSans_500Medium',
                fontSize: 12,
                color: '#1A1A1A',
                textAlign: 'center',
              }}>
              In Progress (6)
            </Text>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            style={{
              flexGrow: 1.2,
              height: 44,
              borderRadius: 999,
              borderWidth: 0,
              backgroundColor: '#FFFFFF',
              flexShrink: 1,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontFamily: 'PlusJakartaSans_500Medium',
                fontSize: 12,
                color: '#1A1A1A',
                textAlign: 'center',
              }}>
              Completed (12)
            </Text>
          </Pressable>
        </View>
        <View
          style={{
            marginTop: 14,
            justifyContent: 'space-between',
            alignItems: 'center',
            flexDirection: 'row',
          }}>
          <Pressable
            accessibilityRole="button"
            style={{
              height: 38,
              borderRadius: 999,
              borderWidth: 0,
              backgroundColor: '#FFFFFF',
              paddingVertical: 0,
              paddingHorizontal: 14,
              gap: 6,
              alignItems: 'center',
              flexShrink: 1,
              flexDirection: 'row',
            }}>
            <Text
              style={{
                fontFamily: 'PlusJakartaSans_400Regular',
                fontSize: 12,
                color: '#6B6B6B',
                flexShrink: 1,
              }}>
              Sort by:
            </Text>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'PlusJakartaSans_600SemiBold',
                fontSize: 12,
                color: '#1A1A1A',
              }}>
              Due Date
            </Text>
            <Svg
              width="12"
              height="12"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1A1A1A"
              strokeWidth="2"
              strokeLinecap="round">
              <Path d="M6 9l6 6 6-6" />
            </Svg>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="List view"
            style={{
              width: 44,
              height: 44,
              borderRadius: '50%',
              borderWidth: 0,
              backgroundColor: '#FFFFFF',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1A1A1A"
              strokeWidth="1.8"
              strokeLinecap="round">
              <Path d="M9 6h11" />
              <Path d="M9 12h11" />
              <Path d="M9 18h11" />
              <Path d="M4 6h1" />
              <Path d="M4 12h1" />
              <Path d="M4 18h1" />
            </Svg>
          </Pressable>
        </View>
        <View style={{ marginTop: 16, paddingLeft: 26 }}>
          <View
            style={{
              position: 'absolute',
              left: 7,
              top: 8,
              bottom: -200,
              width: 2,
              backgroundColor: '#E2E2E2',
              zIndex: 1,
            }}
          />
          <View style={{ margin: 0, padding: 0, gap: 12 }}>
            {tasks.map((t, index) => (
              <View key={index}>
                <View
                  style={{
                    position: 'absolute',
                    left: -26,
                    top: 4,
                    width: 16,
                    height: 16,
                    borderRadius: '50%',
                    backgroundColor: '#FFFFFF',
                    borderWidth: 4,
                    borderColor: '}}',
                    zIndex: 1,
                  }}
                />
                <View style={{ backgroundColor: '#FFFFFF', borderRadius: 22, padding: 14 }}>
                  <View style={{ gap: 10, alignItems: 'flex-start', flexDirection: 'row' }}>
                    <View
                      style={{
                        width: 34,
                        height: 34,
                        borderRadius: '50%',
                        backgroundColor: t.color,
                        alignItems: 'center',
                        justifyContent: 'center',
                        flexShrink: 0,
                        flexDirection: 'row',
                      }}>
                      <Svg
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="#FFFFFF"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round">
                        <Path d={t.icon} />
                      </Svg>
                    </View>
                    <View style={{ flex: 1, minWidth: 0 }}>
                      <Text
                        style={{
                          margin: 0,
                          fontFamily: 'PlusJakartaSans_700Bold',
                          fontSize: 14,
                          color: '#1A1A1A',
                        }}>
                        {t.title}
                      </Text>
                      <Text
                        style={{
                          marginTop: 2,
                          marginBottom: 0,
                          marginHorizontal: 0,
                          fontFamily: 'PlusJakartaSans_400Regular',
                          fontSize: 11,
                          color: '#767676',
                        }}>
                        {t.place}
                      </Text>
                    </View>
                    <Text
                      style={{
                        backgroundColor: t.soft,
                        borderWidth: 1,
                        borderColor: '}}',
                        borderRadius: 999,
                        paddingVertical: 4,
                        paddingHorizontal: 9,
                        flexShrink: 1,
                        fontFamily: 'PlusJakartaSans_600SemiBold',
                        fontSize: 10,
                        color: t.text,
                      }}>
                      {t.status}
                    </Text>
                  </View>
                  <View
                    style={{
                      marginTop: 12,
                      alignItems: 'center',
                      justifyContent: 'space-between',
                      flexDirection: 'row',
                    }}>
                    <View
                      style={{
                        margin: 0,
                        alignItems: 'center',
                        gap: 6,
                        flexShrink: 1,
                        flexDirection: 'row',
                      }}>
                      <Svg
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="#555555"
                        strokeWidth="1.8"
                        strokeLinecap="round">
                        <Rect x="4" y="5" width="16" height="16" rx="2" />
                        <Path d="M8 3v4" />
                        <Path d="M16 3v4" />
                        <Path d="M4 10h16" />
                      </Svg>
                      <Text
                        style={{
                          fontFamily: 'PlusJakartaSans_400Regular',
                          fontSize: 11,
                          color: '#555555',
                          flexShrink: 1,
                        }}>
                        {t.date}
                      </Text>
                    </View>
                    <View style={{ alignItems: 'center', flexShrink: 1, flexDirection: 'row' }}>
                      <Image
                        source={{ uri: asset(t.a1) }}
                        contentFit="cover"
                        accessibilityLabel="Assignee"
                        style={{
                          width: 28,
                          height: 28,
                          borderRadius: '50%',
                          borderWidth: 2,
                          borderColor: '#FFFFFF',
                        }}
                      />
                      <Image
                        source={{ uri: asset(t.a2) }}
                        contentFit="cover"
                        accessibilityLabel="Assignee"
                        style={{
                          width: 28,
                          height: 28,
                          borderRadius: '50%',
                          borderWidth: 2,
                          borderColor: '#FFFFFF',
                          marginLeft: -8,
                        }}
                      />
                      <View
                        style={{
                          marginLeft: 4,
                          width: 24,
                          height: 24,
                          borderRadius: '50%',
                          backgroundColor: '#F1F1F1',
                          alignItems: 'center',
                          justifyContent: 'center',
                          flexDirection: 'row',
                        }}>
                        <Text
                          style={{
                            fontFamily: 'PlusJakartaSans_600SemiBold',
                            fontSize: 9,
                            color: '#1A1A1A',
                            flexShrink: 1,
                          }}>
                          {t.more}
                        </Text>
                      </View>
                    </View>
                  </View>
                  <View
                    style={{ marginTop: 12, alignItems: 'center', gap: 10, flexDirection: 'row' }}>
                    <View
                      style={{ flex: 1, height: 6, borderRadius: 999, backgroundColor: '#EDEDED' }}>
                      <View
                        style={{
                          width: t.width,
                          height: 6,
                          borderRadius: 999,
                          backgroundColor: t.color,
                        }}
                      />
                      <View
                        style={{
                          position: 'absolute',
                          left: t.knob,
                          marginLeft: -8,
                          top: -5,
                          width: 16,
                          height: 16,
                          borderRadius: '50%',
                          backgroundColor: '#FFFFFF',
                          borderWidth: 2,
                          borderColor: '}}',
                        }}
                      />
                    </View>
                    <Text
                      style={{
                        minWidth: 32,
                        flexShrink: 1,
                        fontFamily: 'PlusJakartaSans_700Bold',
                        fontSize: 11,
                        color: '#1A1A1A',
                        textAlign: 'right',
                      }}>
                      {t.pct}%
                    </Text>
                  </View>
                </View>
              </View>
            ))}
          </View>
        </View>
        <View
          style={{
            position: 'absolute',
            left: '50%',
            bottom: 28,
            transform: [{ translateX: '-50%' }],
            gap: 6,
            alignItems: 'center',
            backgroundColor: 'rgba(214,214,214,0.82)',
            borderRadius: 999,
            padding: 6,
            overflow: 'hidden',
            flexDirection: 'row',
          }}>
          <BlurView intensity={28} tint="default" style={StyleSheet.absoluteFill} />
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Home"
            onPress={() => router.navigate('/')}
            style={{
              width: 50,
              height: 50,
              borderRadius: '50%',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1A1A1A"
              strokeWidth="1.8"
              strokeLinejoin="round">
              <Path d="M4 10l8-6 8 6v10H4z" />
              <Path d="M10 20v-5h4v5" />
            </Svg>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Tasks"
            onPress={() => router.navigate('/tasks')}
            style={{
              width: 50,
              height: 50,
              borderRadius: '50%',
              backgroundColor: '#111111',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#FFFFFF"
              strokeWidth="1.8"
              strokeLinecap="round">
              <Rect x="5" y="4" width="14" height="17" rx="2" />
              <Path d="M9 4V3h6v1" />
              <Path d="M9 11h6" />
              <Path d="M9 15h4" />
            </Svg>
          </Pressable>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Reports"
            onPress={() => router.navigate('/progress')}
            style={{
              width: 50,
              height: 50,
              borderRadius: '50%',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#1A1A1A"
              strokeWidth="1.8"
              strokeLinecap="round"
              strokeLinejoin="round">
              <Path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" />
              <Path d="M14 3v5h5" />
              <Path d="M9 14h6" />
              <Path d="M9 17h4" />
            </Svg>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="More"
            style={{
              width: 50,
              height: 50,
              borderRadius: '50%',
              borderWidth: 0,
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg width="18" height="18" viewBox="0 0 24 24" fill="#1A1A1A">
              <Circle cx="5" cy="12" r="2" />
              <Circle cx="12" cy="12" r="2" />
              <Circle cx="19" cy="12" r="2" />
            </Svg>
          </Pressable>
        </View>
      </View>
    </Screen>
  );
}

import { StatusBar } from 'expo-status-bar';
import type { ReactNode } from 'react';
import { ScrollView, useWindowDimensions, View } from 'react-native';

// Every screen is drawn on a 390 wide artboard, then scaled to the device width.
const ARTBOARD_WIDTH = 390;

type Props = {
  background: string;
  statusBar: 'light' | 'dark';
  height?: number;
  children: ReactNode;
};

export function Screen({ background, statusBar, height: artboardHeight = 844, children }: Props) {
  const { width, height } = useWindowDimensions();
  const scale = width / ARTBOARD_WIDTH;

  return (
    <ScrollView
      bounces={false}
      showsVerticalScrollIndicator={false}
      style={{ flex: 1, backgroundColor: background }}
      contentContainerStyle={{ height: Math.max(artboardHeight * scale, height) }}>
      <StatusBar style={statusBar} />
      <View
        style={{
          width: ARTBOARD_WIDTH,
          height: artboardHeight,
          overflow: 'hidden',
          transformOrigin: 'left top',
          transform: [{ scale }],
        }}>
        {children}
      </View>
    </ScrollView>
  );
}

// Demo images are hosted by DeveloperMill. Point this at your own CDN, or swap to require().
const ASSET_BASE = 'https://developermill.com/app-designs/construction-management-app-ui-design/assets';

export const asset = (name: string) => `${ASSET_BASE}/${name}`;