User app beta v1 complete

.gitignore

@@ -3,4 +3,19 @@
 *.pyc
 *.jpg
 *.png
-requestly/CityTrack/*
+requestly/CityTrack/*
+User/.env
+User/.env.*
+
+User/.expo/
+User/.metro-cache/
+User/.cache/
+
+User/android/.gradle/
+User/android/build/
+User/android/app/build/
+User/android/local.properties
+User/android/app/release/
+User/android/app/debug/
+
+.vscode

Dockerfile

@@ -1,7 +1,5 @@
 FROM python:3.11-slim
 
-LABEL org.opencontainers.image.source=https://github.com/0xarchit/citytrack
-
 WORKDIR /app
 
 RUN apt-get update && apt-get install -y \
@@ -28,3 +26,5 @@ ENV PYTHONUNBUFFERED=1
 EXPOSE 7860
 
 CMD ["python", "-m", "uvicorn", "Backend.api:app", "--host", "0.0.0.0", "--port", "7860", "--forwarded-allow-ips", "*"]
+
+LABEL org.opencontainers.image.source=https://github.com/0xarchit/CityTrack

User/.gitignore

@@ -0,0 +1,41 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+# generated native folders
+/ios
+/android

User/App.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StatusBar } from 'expo-status-bar';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { StyleSheet } from 'react-native';
+
+import { AuthProvider } from './src/context/AuthContext';
+import { AppNavigator } from './src/navigation/AppNavigator';
+
+export default function App() {
+  return (
+    <GestureHandlerRootView style={styles.container}>
+      <AuthProvider>
+        <StatusBar style="light" />
+        <AppNavigator />
+      </AuthProvider>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

User/README.md

@@ -0,0 +1,162 @@
+# City Issue Reporter - Mobile App
+
+A React Native + Expo mobile application for citizens to report city infrastructure issues with AI-powered classification and real-time tracking.
+
+## Features
+
+### Authentication
+- **Google OAuth only** via Supabase Auth
+- Secure session management with auto-refresh
+- No anonymous reporting (prevents spam)
+
+### Anti-Fraud Protection
+- **Mandatory GPS**: Camera access blocked until GPS is enabled on device
+- **GPS Precision Lock**: Captures blocked until GPS accuracy < 10 meters
+- **Live Camera Only**: No gallery access - photos must be captured in real-time
+- **Location Verification**: Continuous GPS monitoring during capture session
+
+### Issue Reporting
+- Live camera capture with frame guides
+- Real-time GPS accuracy indicator
+- AI-powered classification visualization
+- Status: VisionAgent → GeoAgent → PriorityAgent → RoutingAgent → NotificationAgent
+
+### Issue Tracking
+- View all your reported issues
+- Filter by status (Reported, In Progress, Resolved)
+- Detailed issue view with:
+  - Original vs AI-annotated image toggle
+  - Priority and status badges
+  - Confidence score visualization
+  - Location details
+  - Status timeline
+
+### Profile & Gamification
+- Civic badges and contribution stats
+- Report history stats
+- Settings management
+
+## Tech Stack
+
+- **Framework**: React Native + Expo (SDK 54)
+- **Language**: TypeScript
+- **Auth**: Supabase + Google OAuth
+- **Camera**: expo-camera
+- **Location**: expo-location
+- **Navigation**: @react-navigation/native
+- **Styling**: Custom dark theme with glassmorphism
+
+## Prerequisites
+
+- Node.js 18+
+- npm or yarn
+- Expo CLI
+- Expo Go app on your device (for testing)
+- Google OAuth configured in Supabase
+
+## Installation
+
+```bash
+cd User
+npm install
+```
+
+## Configuration
+
+1. Update Supabase credentials in `src/config/supabase.ts`:
+   - `SUPABASE_URL`: Your Supabase project URL
+   - `SUPABASE_ANON_KEY`: Your Supabase anon key
+
+2. Configure Google OAuth in Supabase Dashboard:
+   - Enable Google provider
+   - Add your OAuth client credentials
+
+3. Update `app.json` with your bundle identifiers if needed
+
+## Running the App
+
+### Development
+```bash
+npx expo start
+```
+
+### iOS Simulator
+```bash
+npx expo start --ios
+```
+
+### Android Emulator
+```bash
+npx expo start --android
+```
+
+### Physical Device
+Scan the QR code with Expo Go app
+
+## Project Structure
+
+```
+src/
+├── components/
+│   ├── ui/
+│   │   ├── Button.tsx       # Gradient button with variants
+│   │   └── Card.tsx         # Glass/gradient card component
+│   └── issues/
+│       └── IssueCard.tsx    # Issue list item component
+├── config/
+│   └── supabase.ts          # Supabase client configuration
+├── context/
+│   └── AuthContext.tsx      # Auth state management
+├── navigation/
+│   └── AppNavigator.tsx     # Navigation structure
+├── screens/
+│   ├── auth/
+│   │   └── LoginScreen.tsx  # Google OAuth login
+│   ├── capture/
+│   │   ├── CaptureScreen.tsx    # Camera with GPS enforcement
+│   │   └── ProcessingScreen.tsx # AI agent progress
+│   ├── home/
+│   │   └── HomeScreen.tsx   # Dashboard
+│   ├── issues/
+│   │   ├── MyIssuesScreen.tsx   # Issue list
+│   │   └── IssueDetailScreen.tsx # Issue details
+│   └── profile/
+│       └── ProfileScreen.tsx # User profile
+├── services/
+│   ├── issueService.ts      # API communication
+│   └── locationService.ts   # GPS utilities
+├── theme/
+│   └── index.ts             # Colors, typography, spacing
+└── types/
+    └── index.ts             # TypeScript interfaces
+```
+
+## API Integration
+
+The app connects to the Backend API at:
+- Development: `http://10.0.2.2:8000` (Android emulator)
+- Update `API_BASE_URL` in `src/config/supabase.ts` for other environments
+
+## Backend Endpoints Used
+
+- `POST /issues/stream` - Create issue with background processing
+- `GET /issues` - List issues with pagination
+- `GET /issues/{id}` - Get issue details
+- `GET /flow/flow/{id}` - SSE stream for agent progress
+
+## Building for Production
+
+### EAS Build (Recommended)
+```bash
+npx eas build --platform all
+```
+
+### Local Build
+```bash
+npx expo run:android
+npx expo run:ios
+```
+
+## License
+
+Part of the Autonomous City Issue Resolution Agent project.

User/app.json

@@ -0,0 +1,71 @@
+{
+  "expo": {
+    "name": "City Issue Reporter",
+    "slug": "city-issue-reporter",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "dark",
+    "scheme": "cityissue",
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#0F172A"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.cityissue.reporter",
+      "infoPlist": {
+        "NSCameraUsageDescription": "We need camera access to capture photos of city issues for reporting",
+        "NSLocationWhenInUseUsageDescription": "We need your location to accurately pinpoint reported issues",
+        "NSLocationAlwaysUsageDescription": "We need your location to accurately pinpoint reported issues"
+      }
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#0F172A"
+      },
+      "package": "com.cityissue.reporter",
+      "usesCleartextTraffic": true,
+      "permissions": [
+        "android.permission.CAMERA",
+        "android.permission.ACCESS_FINE_LOCATION",
+        "android.permission.ACCESS_COARSE_LOCATION",
+        "android.permission.INTERNET"
+      ]
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "plugins": [
+      [
+        "expo-camera",
+        {
+          "cameraPermission": "Allow City Issue Reporter to access your camera to capture photos of issues."
+        }
+      ],
+      [
+        "expo-location",
+        {
+          "locationAlwaysAndWhenInUsePermission": "Allow City Issue Reporter to use your location to accurately report issues."
+        }
+      ],
+      "expo-secure-store",
+      "@react-native-google-signin/google-signin",
+      "expo-web-browser"
+    ],
+    "extra": {
+      "eas": {
+        "projectId": "your-project-id"
+      },
+      "EXPO_PUBLIC_API_BASE_URL": "https://0xarchit-citytrack.hf.space",
+      "EXPO_PUBLIC_GOOGLE_CLIENT_ID": "524731582218-km42fbhaf8ef52lc5lf3vsmef0832rfk.apps.googleusercontent.com",
+      "EXPO_PUBLIC_SUPABASE_URL": "https://mqjshnnpnwrwkqxmgysh.supabase.co",
+      "EXPO_PUBLIC_SUPABASE_ANON_KEY": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im1xanNobm5wbndyd2txeG1neXNoIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjgxMjY1MDEsImV4cCI6MjA4MzcwMjUwMX0.BU2aiiBnHxzgEO6hFTv63JUH07sjQ6BzqhBkYA2CChs"
+    }
+  }
+}

User/eas.json

@@ -0,0 +1,26 @@
+{
+  "cli": {
+    "version": ">= 3.0.0"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {
+      "android": {
+        "buildType": "apk",
+        "gradleCommand": ":app:assembleRelease",
+        "env": {
+          "EXPO_PUBLIC_API_BASE_URL": "https://0xarchit-citytrack.hf.space"
+        }
+      }
+    }
+  },
+  "submit": {
+    "production": {}
+  }
+}

User/index.ts

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+
+
+
+registerRootComponent(App);

User/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "user",
+  "version": "1.0.0",
+  "main": "index.ts",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^15.0.3",
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-native-google-signin/google-signin": "^16.1.1",
+    "@react-navigation/bottom-tabs": "^7.9.1",
+    "@react-navigation/native": "^7.1.27",
+    "@react-navigation/native-stack": "^7.9.1",
+    "@supabase/supabase-js": "^2.90.1",
+    "expo": "~54.0.33",
+    "expo-auth-session": "~7.0.10",
+    "expo-camera": "~17.0.10",
+    "expo-constants": "~18.0.13",
+    "expo-crypto": "~15.0.8",
+    "expo-device": "~8.0.10",
+    "expo-image-picker": "~17.0.10",
+    "expo-linear-gradient": "~15.0.8",
+    "expo-location": "~19.0.8",
+    "expo-secure-store": "~15.0.8",
+    "expo-status-bar": "~3.0.9",
+    "expo-web-browser": "~15.0.10",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-sse": "^1.2.1"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.0",
+    "typescript": "~5.9.2"
+  },
+  "private": true
+}

User/src/components/index.ts

@@ -0,0 +1,3 @@
+export { Button } from './ui/Button';
+export { Card } from './ui/Card';
+export { IssueCard } from './issues/IssueCard';

User/src/components/issues/IssueCard.tsx

@@ -0,0 +1,189 @@
+import React from 'react';
+import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { Card } from '../ui/Card';
+import { colors, spacing, typography, borderRadius } from '../../theme';
+import { Issue } from '../../types';
+
+interface IssueCardProps {
+  issue: Issue;
+  onPress?: () => void;
+}
+
+const priorityColors: Record<number, string> = {
+  1: colors.priority.critical,
+  2: colors.priority.high,
+  3: colors.priority.medium,
+  4: colors.priority.low,
+};
+
+const priorityLabels: Record<number, string> = {
+  1: 'CRITICAL',
+  2: 'HIGH',
+  3: 'MEDIUM',
+  4: 'LOW',
+};
+
+const stateColors: Record<string, string> = {
+  reported: colors.status.info,
+  validated: colors.accent.purple,
+  assigned: colors.accent.cyan,
+  in_progress: colors.status.warning,
+  resolved: colors.status.success,
+  closed: colors.text.tertiary,
+  rejected: colors.status.error,
+};
+
+export function IssueCard({ issue, onPress }: IssueCardProps) {
+  const priorityColor = issue.priority ? priorityColors[issue.priority] : colors.text.tertiary;
+  const priorityLabel = issue.priority ? priorityLabels[issue.priority] : 'N/A';
+  const stateColor = stateColors[issue.state] || colors.text.tertiary;
+
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr);
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  return (
+    <TouchableOpacity onPress={onPress} activeOpacity={0.8}>
+      <Card variant="glass" style={styles.container}>
+        <View style={styles.header}>
+          {issue.annotated_urls[0] ? (
+            <Image source={{ uri: issue.annotated_urls[0] }} style={styles.thumbnail} />
+          ) : issue.image_urls[0] ? (
+            <Image source={{ uri: issue.image_urls[0] }} style={styles.thumbnail} />
+          ) : (
+            <View style={[styles.thumbnail, styles.placeholderImage]}>
+              <Ionicons name="camera" size={24} color={colors.text.tertiary} />
+            </View>
+          )}
+          
+          <View style={styles.info}>
+            <View style={styles.badges}>
+              <View style={[styles.badge, { backgroundColor: priorityColor }]}>
+                <Text style={styles.badgeText}>{priorityLabel}</Text>
+              </View>
+              <View style={[styles.badge, styles.stateBadge, { borderColor: stateColor }]}>
+                <Text style={[styles.badgeText, { color: stateColor }]}>
+                  {issue.state.toUpperCase().replace('_', ' ')}
+                </Text>
+              </View>
+            </View>
+            
+            {issue.category ? (
+              <Text style={styles.category}>{issue.category}</Text>
+            ) : null}
+            
+            {issue.confidence !== undefined && issue.confidence !== null ? (
+              <Text style={styles.confidence}>
+                Confidence: {(issue.confidence * 100).toFixed(0)}%
+              </Text>
+            ) : null}
+          </View>
+        </View>
+        
+        {issue.description ? (
+          <Text style={styles.description} numberOfLines={2}>
+            {issue.description}
+          </Text>
+        ) : null}
+        
+        <View style={styles.footer}>
+          <Text style={styles.date}>{formatDate(issue.created_at)}</Text>
+          {issue.is_duplicate ? (
+            <View style={styles.duplicateBadge}>
+              <Text style={styles.duplicateText}>DUPLICATE</Text>
+            </View>
+          ) : null}
+        </View>
+      </Card>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: spacing.md,
+  },
+  header: {
+    flexDirection: 'row',
+  },
+  thumbnail: {
+    width: 80,
+    height: 80,
+    borderRadius: borderRadius.md,
+  },
+  placeholderImage: {
+    backgroundColor: colors.background.tertiary,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  info: {
+    flex: 1,
+    marginLeft: spacing.md,
+  },
+  badges: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: spacing.xs,
+  },
+  badge: {
+    paddingHorizontal: spacing.sm,
+    paddingVertical: spacing.xs,
+    borderRadius: borderRadius.sm,
+  },
+  stateBadge: {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+  },
+  badgeText: {
+    color: colors.text.primary,
+    fontSize: 10,
+    fontWeight: '600',
+  },
+  category: {
+    color: colors.text.primary,
+    fontSize: typography.body.fontSize,
+    fontWeight: '600',
+    marginTop: spacing.sm,
+  },
+  confidence: {
+    color: colors.text.secondary,
+    fontSize: typography.caption.fontSize,
+    marginTop: spacing.xs,
+  },
+  description: {
+    color: colors.text.secondary,
+    fontSize: typography.bodySmall.fontSize,
+    marginTop: spacing.md,
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: spacing.md,
+    paddingTop: spacing.md,
+    borderTopWidth: 1,
+    borderTopColor: colors.border.light,
+  },
+  date: {
+    color: colors.text.tertiary,
+    fontSize: typography.caption.fontSize,
+  },
+  duplicateBadge: {
+    backgroundColor: colors.status.warning,
+    paddingHorizontal: spacing.sm,
+    paddingVertical: spacing.xs,
+    borderRadius: borderRadius.sm,
+  },
+  duplicateText: {
+    color: colors.text.inverse,
+    fontSize: 10,
+    fontWeight: '600',
+  },
+});

User/src/components/ui/Button.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet, ActivityIndicator, ViewStyle, TextStyle } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { colors, borderRadius, typography, shadows, spacing } from '../../theme';
+
+interface ButtonProps {
+  title: string;
+  onPress: () => void;
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+  loading?: boolean;
+  icon?: React.ReactNode;
+  fullWidth?: boolean;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+}
+
+export function Button({
+  title,
+  onPress,
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  loading = false,
+  icon,
+  fullWidth = false,
+  style,
+  textStyle,
+}: ButtonProps) {
+  const sizeStyles = {
+    sm: { paddingVertical: spacing.sm, paddingHorizontal: spacing.md },
+    md: { paddingVertical: spacing.md, paddingHorizontal: spacing.lg },
+    lg: { paddingVertical: spacing.lg, paddingHorizontal: spacing.xl },
+  };
+
+  const textSizeStyles = {
+    sm: { fontSize: 14 },
+    md: { fontSize: 16 },
+    lg: { fontSize: 18 },
+  };
+
+  const isDisabled = disabled || loading;
+
+  const renderContent = () => (
+    <>
+      {loading ? (
+        <ActivityIndicator color={variant === 'outline' ? colors.primary.main : colors.primary.contrast} />
+      ) : (
+        <>
+          {icon}
+          <Text
+            style={[
+              styles.text,
+              textSizeStyles[size],
+              variant === 'outline' && styles.outlineText,
+              variant === 'ghost' && styles.ghostText,
+              icon ? styles.textWithIcon : undefined,
+              textStyle,
+            ]}
+          >
+            {title}
+          </Text>
+        </>
+      )}
+    </>
+  );
+
+  if (variant === 'primary') {
+    return (
+      <TouchableOpacity
+        onPress={onPress}
+        disabled={isDisabled}
+        style={[fullWidth && styles.fullWidth, style]}
+        activeOpacity={0.8}
+      >
+        <LinearGradient
+          colors={isDisabled ? ['#475569', '#334155'] : [colors.primary.light, colors.primary.dark]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 1 }}
+          style={[
+            styles.container,
+            sizeStyles[size],
+            shadows.md,
+            isDisabled && styles.disabled,
+          ]}
+        >
+          {renderContent()}
+        </LinearGradient>
+      </TouchableOpacity>
+    );
+  }
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={isDisabled}
+      activeOpacity={0.7}
+      style={[
+        styles.container,
+        sizeStyles[size],
+        variant === 'secondary' && styles.secondary,
+        variant === 'outline' && styles.outline,
+        variant === 'ghost' && styles.ghost,
+        isDisabled && styles.disabled,
+        fullWidth && styles.fullWidth,
+        style,
+      ]}
+    >
+      {renderContent()}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: borderRadius.lg,
+  },
+  text: {
+    color: colors.primary.contrast,
+    fontWeight: typography.button.fontWeight,
+  },
+  textWithIcon: {
+    marginLeft: spacing.sm,
+  },
+  secondary: {
+    backgroundColor: colors.secondary.main,
+  },
+  outline: {
+    backgroundColor: 'transparent',
+    borderWidth: 2,
+    borderColor: colors.primary.main,
+  },
+  outlineText: {
+    color: colors.primary.main,
+  },
+  ghost: {
+    backgroundColor: 'transparent',
+  },
+  ghostText: {
+    color: colors.text.primary,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  fullWidth: {
+    width: '100%',
+  },
+});

User/src/components/ui/Card.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { View, StyleSheet, ViewStyle } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { colors, borderRadius, shadows } from '../../theme';
+
+interface CardProps {
+  children: React.ReactNode;
+  variant?: 'default' | 'glass' | 'gradient';
+  style?: ViewStyle;
+}
+
+export function Card({ children, variant = 'default', style }: CardProps) {
+  if (variant === 'gradient') {
+    return (
+      <LinearGradient
+        colors={[colors.background.secondary, colors.background.tertiary]}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 1 }}
+        style={[styles.container, styles.gradient, shadows.md, style]}
+      >
+        {children}
+      </LinearGradient>
+    );
+  }
+
+  if (variant === 'glass') {
+    return (
+      <View style={[styles.container, styles.glass, style]}>
+        {children}
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.container, styles.default, shadows.sm, style]}>
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: borderRadius.lg,
+    padding: 16,
+  },
+  default: {
+    backgroundColor: colors.background.card,
+    borderWidth: 1,
+    borderColor: colors.border.light,
+  },
+  glass: {
+    backgroundColor: colors.glass.background,
+    borderWidth: 1,
+    borderColor: colors.glass.border,
+  },
+  gradient: {
+    borderWidth: 1,
+    borderColor: colors.border.accent,
+  },
+});

User/src/components/ui/Loader.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { View, ActivityIndicator, StyleSheet, ViewStyle } from 'react-native';
+import { colors } from '../../theme';
+
+interface LoaderProps {
+  size?: 'small' | 'large';
+  color?: string;
+  style?: ViewStyle;
+  fullScreen?: boolean;
+}
+
+export const Loader: React.FC<LoaderProps> = ({ 
+  size = 'small', 
+  color = colors.primary.main, 
+  style,
+  fullScreen = false
+}) => {
+  if (fullScreen) {
+    return (
+      <View style={[styles.fullScreen, style]}>
+        <ActivityIndicator size={size} color={color} />
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      <ActivityIndicator size={size} color={color} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 10,
+  },
+  fullScreen: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(255,255,255,0.8)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 999,
+  },
+});

User/src/components/ui/Skeleton.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet, ViewStyle, DimensionValue } from 'react-native';
+import Animated, { 
+  useSharedValue, 
+  useAnimatedStyle, 
+  withRepeat, 
+  withTiming, 
+  withSequence 
+} from 'react-native-reanimated';
+
+interface SkeletonProps {
+  width?: DimensionValue;
+  height?: DimensionValue;
+  style?: ViewStyle;
+  borderRadius?: number;
+}
+
+export const Skeleton: React.FC<SkeletonProps> = ({ 
+  width = '100%', 
+  height = 20, 
+  style,
+  borderRadius = 4 
+}) => {
+  const opacity = useSharedValue(0.3);
+
+  useEffect(() => {
+    opacity.value = withRepeat(
+      withSequence(
+        withTiming(0.3, { duration: 1000 }),
+        withTiming(0.7, { duration: 1000 })
+      ),
+      -1,
+      true
+    );
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  return (
+    <Animated.View
+      style={[
+        styles.skeleton,
+        { width, height, borderRadius },
+        style,
+        animatedStyle,
+      ]}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  skeleton: {
+    backgroundColor: '#E1E9EE',
+  },
+});

User/src/config/env.ts

@@ -0,0 +1,17 @@
+import Constants from "expo-constants";
+
+const extra = Constants.expoConfig?.extra ?? {};
+
+export const config = {
+  API_BASE_URL:
+    extra.API_BASE_URL ||
+    process.env.EXPO_PUBLIC_API_BASE_URL ||
+    "https://0xarchit-citytrack.hf.space",
+  SUPABASE_URL: extra.SUPABASE_URL || process.env.EXPO_PUBLIC_SUPABASE_URL,
+  SUPABASE_ANON_KEY:
+    extra.SUPABASE_ANON_KEY || process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY,
+  GOOGLE_CLIENT_ID:
+    extra.EXPO_PUBLIC_GOOGLE_CLIENT_ID ||
+    process.env.EXPO_PUBLIC_GOOGLE_CLIENT_ID ||
+    "",
+};

User/src/config/supabase.ts

@@ -0,0 +1,47 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { createClient } from "@supabase/supabase-js";
+import Constants from "expo-constants";
+
+type ExtraConfig = Record<string, unknown> | undefined;
+
+const extra =
+  (Constants.expoConfig?.extra as ExtraConfig) ??
+  ((Constants as any).manifest?.extra as ExtraConfig);
+
+const pickString = (value: unknown): string =>
+  typeof value === "string" ? value : "";
+
+const SUPABASE_URL =
+  process.env.EXPO_PUBLIC_SUPABASE_URL ??
+  pickString(extra?.EXPO_PUBLIC_SUPABASE_URL) ??
+  pickString(extra?.SUPABASE_URL);
+
+const SUPABASE_ANON_KEY =
+  process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY ??
+  pickString(extra?.EXPO_PUBLIC_SUPABASE_ANON_KEY) ??
+  pickString(extra?.SUPABASE_ANON_KEY);
+
+export const API_BASE_URL =
+  process.env.EXPO_PUBLIC_API_BASE_URL ??
+  process.env.EXPO_PUBLIC_API_URL ??
+  pickString(extra?.EXPO_PUBLIC_API_BASE_URL) ??
+  pickString(extra?.EXPO_PUBLIC_API_URL) ??
+  pickString(extra?.API_BASE_URL);
+
+export const CONFIG_ERROR =
+  !SUPABASE_URL || !SUPABASE_ANON_KEY
+    ? "Missing Supabase configuration"
+    : !API_BASE_URL
+      ? "Missing API base URL configuration"
+      : null;
+
+export const supabase = CONFIG_ERROR
+  ? null
+  : createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
+      auth: {
+        storage: AsyncStorage,
+        autoRefreshToken: true,
+        persistSession: true,
+        detectSessionInUrl: false,
+      },
+    });

User/src/context/AuthContext.tsx

@@ -0,0 +1,217 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  ReactNode,
+} from "react";
+import { Session, User } from "@supabase/supabase-js";
+import { CONFIG_ERROR, supabase } from "../config/supabase";
+import { config } from "../config/env";
+import {
+  GoogleSignin,
+  statusCodes,
+  isErrorWithCode,
+} from "../lib/googleAuthSafe";
+import { Alert } from "react-native";
+
+interface AuthContextType {
+  user: User | null;
+  session: Session | null;
+  loading: boolean;
+  isDevMode: boolean;
+  configError: string | null;
+  signInWithGoogle: () => Promise<void>;
+  continueWithDevMode: () => void;
+  signOut: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+export function AuthProvider({ children }: AuthProviderProps) {
+  const [user, setUser] = useState<User | null>(null);
+  const [session, setSession] = useState<Session | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [isDevMode, setIsDevMode] = useState(false);
+  const [configError] = useState<string | null>(CONFIG_ERROR);
+
+  useEffect(() => {
+    if (!supabase) {
+      setLoading(false);
+      return;
+    }
+
+    try {
+      GoogleSignin.configure({
+        webClientId: config.GOOGLE_CLIENT_ID,
+        scopes: ["email", "profile"],
+        offlineAccess: true,
+      });
+    } catch (e: any) {
+      if (e.message?.includes("RNGoogleSignin")) {
+        console.warn(
+          "Google Sign-In not supported in Expo Go. Use a development build or 'Dev Mode'.",
+        );
+      } else {
+        console.error("Google Sign-In config error:", e);
+      }
+    }
+
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setSession(session);
+      setUser(session?.user ?? null);
+      setLoading(false);
+    });
+
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event, session) => {
+      setSession(session);
+      setUser(session?.user ?? null);
+      setLoading(false);
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, []);
+
+  const signInWithGoogle = async () => {
+    try {
+      if (!supabase) {
+        Alert.alert("Configuration Error", "Supabase is not configured.");
+        return;
+      }
+
+      setLoading(true);
+
+      // 1. Check Play Services (Android)
+      try {
+        await GoogleSignin.hasPlayServices();
+      } catch (e: any) {
+        if (e.message?.includes("RNGoogleSignin")) {
+          Alert.alert(
+            "Expo Go Detected",
+            "Native Google Sign-In is not supported in Expo Go. Please use 'Dev Mode' or build a development client.",
+          );
+          setLoading(false);
+          return;
+        }
+        throw e;
+      }
+
+      // 2. Native Sign In
+      const userInfo = await GoogleSignin.signIn();
+
+      // 3. Get ID Token
+      if (userInfo.data?.idToken) {
+        const { data, error } = await supabase.auth.signInWithIdToken({
+          provider: "google",
+          token: userInfo.data.idToken,
+        });
+
+        if (error) throw error;
+
+        // Critical: Update state immediately to trigger UI refresh
+        if (data.session) {
+          setSession(data.session);
+          setUser(data.session.user);
+        }
+      } else {
+        throw new Error("No ID token returned from Google Sign-In");
+      }
+    } catch (error: any) {
+      if (isErrorWithCode(error)) {
+        switch (error.code) {
+          case statusCodes.SIGN_IN_CANCELLED:
+            console.log("User cancelled the login flow");
+            break;
+          case statusCodes.IN_PROGRESS:
+            console.log("Sign in is in progress");
+            break;
+          case statusCodes.PLAY_SERVICES_NOT_AVAILABLE:
+            Alert.alert(
+              "Error",
+              "Google Play Services not available or outdated.",
+            );
+            break;
+          default:
+            console.error("Google Sign-In Error:", error);
+            Alert.alert("Google Sign-In Error", error.message);
+        }
+      } else {
+        console.error("An error occurred:", error);
+        Alert.alert("Sign-In Failed", error.message || "Unknown error");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const continueWithDevMode = () => {
+    const devUser: User = {
+      id: "dev-user-123",
+      email: "dev@citytracker.local",
+      app_metadata: {},
+      user_metadata: { full_name: "Dev User" },
+      aud: "authenticated",
+      created_at: new Date().toISOString(),
+    };
+    setUser(devUser);
+    setIsDevMode(true);
+    setLoading(false);
+  };
+
+  const signOut = async () => {
+    try {
+      setLoading(true);
+
+      // Sign out from Google Native SDK first
+      try {
+        await GoogleSignin.signOut();
+      } catch (e) {
+        console.warn("Google Sign-Out error (ignoring):", e);
+      }
+
+      if (!isDevMode && supabase) {
+        await supabase.auth.signOut();
+      }
+      setUser(null);
+      setSession(null);
+      setIsDevMode(false);
+    } catch (error) {
+      console.error("Sign out error:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        session,
+        loading,
+        isDevMode,
+        configError,
+        signInWithGoogle,
+        continueWithDevMode,
+        signOut,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}

User/src/lib/googleAuthSafe.ts

@@ -0,0 +1,52 @@
+import { Alert } from "react-native";
+
+// Mock objects for when the module is missing
+const mockGoogleSignin = {
+  configure: (config?: any) => {
+    console.warn("Google Sign-In: Mock configure called (Module not found)");
+  },
+  hasPlayServices: async () => {
+    console.warn("Google Sign-In: Mock hasPlayServices called");
+    return Promise.resolve(true);
+  },
+  signIn: async () => {
+    Alert.alert(
+      "Not Supported in Expo Go", 
+      "Native Google Sign-In requires a Development Build. Please use 'Dev Mode' or build a custom client."
+    );
+    throw new Error("RNGoogleSignin not found");
+  },
+  signOut: async () => {
+    console.warn("Google Sign-In: Mock signOut called");
+    return Promise.resolve();
+  },
+  getTokens: async () => {
+     return Promise.reject(new Error("RNGoogleSignin not found"));
+  }
+};
+
+const mockStatusCodes = {
+  SIGN_IN_CANCELLED: 'SIGN_IN_CANCELLED',
+  IN_PROGRESS: 'IN_PROGRESS',
+  PLAY_SERVICES_NOT_AVAILABLE: 'PLAY_SERVICES_NOT_AVAILABLE',
+  SIGN_IN_REQUIRED: 'SIGN_IN_REQUIRED',
+};
+
+// Safe implementation
+let GoogleSignin: any = mockGoogleSignin;
+let statusCodes = mockStatusCodes;
+let isErrorWithCode = (error: any): boolean => false;
+
+try {
+  // Try to require the native module
+  const nativeModule = require("@react-native-google-signin/google-signin");
+  
+  // If successful, export the real implementations
+  GoogleSignin = nativeModule.GoogleSignin;
+  statusCodes = nativeModule.statusCodes;
+  isErrorWithCode = nativeModule.isErrorWithCode;
+} catch (error) {
+  console.log("SafeGoogleAuth: Native Google Sign-In module not found (running in Expo Go?)");
+}
+
+export { GoogleSignin, statusCodes, isErrorWithCode };

User/src/navigation/AppNavigator.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+
+import { useAuth } from '../context/AuthContext';
+import { colors, borderRadius } from '../theme';
+
+import { LoginScreen } from '../screens/auth/LoginScreen';
+import { HomeScreen } from '../screens/home/HomeScreen';
+import { CaptureScreen } from '../screens/capture/CaptureScreen';
+import { ProcessingScreen } from '../screens/capture/ProcessingScreen';
+import { MyIssuesScreen } from '../screens/issues/MyIssuesScreen';
+import { IssueDetailScreen } from '../screens/issues/IssueDetailScreen';
+import { ProfileScreen } from '../screens/profile/ProfileScreen';
+
+const Stack = createNativeStackNavigator();
+const Tab = createBottomTabNavigator();
+
+function MainTabs() {
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        headerShown: false,
+        tabBarStyle: styles.tabBar,
+        tabBarActiveTintColor: colors.primary.main,
+        tabBarInactiveTintColor: colors.text.tertiary,
+        tabBarLabelStyle: styles.tabBarLabel,
+      }}
+    >
+      <Tab.Screen
+        name="Home"
+        component={HomeScreen}
+        options={{
+          tabBarIcon: ({ focused, color }) => (
+            <Ionicons 
+              name={focused ? 'home' : 'home-outline'} 
+              size={24} 
+              color={color} 
+            />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="MyIssues"
+        component={MyIssuesScreen}
+        options={{
+          title: 'Reports',
+          tabBarIcon: ({ focused, color }) => (
+            <Ionicons 
+              name={focused ? 'documents' : 'documents-outline'} 
+              size={24} 
+              color={color} 
+            />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Profile"
+        component={ProfileScreen}
+        options={{
+          tabBarIcon: ({ focused, color }) => (
+            <Ionicons 
+              name={focused ? 'person' : 'person-outline'} 
+              size={24} 
+              color={color} 
+            />
+          ),
+        }}
+      />
+    </Tab.Navigator>
+  );
+}
+
+function AuthStack() {
+  return (
+    <Stack.Navigator screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="Login" component={LoginScreen} />
+    </Stack.Navigator>
+  );
+}
+
+function AppStack() {
+  return (
+    <Stack.Navigator screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="MainTabs" component={MainTabs} />
+      <Stack.Screen 
+        name="Capture" 
+        component={CaptureScreen}
+        options={{ animation: 'slide_from_bottom' }}
+      />
+      <Stack.Screen 
+        name="Processing" 
+        component={ProcessingScreen}
+        options={{ animation: 'fade' }}
+      />
+      <Stack.Screen 
+        name="IssueDetail" 
+        component={IssueDetailScreen}
+        options={{ animation: 'slide_from_right' }}
+      />
+    </Stack.Navigator>
+  );
+}
+
+export function AppNavigator() {
+  const { user, loading } = useAuth();
+
+  if (loading) {
+    return (
+      <View style={styles.loadingContainer}>
+        <Ionicons name="business" size={64} color={colors.primary.main} />
+        <ActivityIndicator size="large" color={colors.primary.main} style={styles.spinner} />
+        <Text style={styles.loadingText}>Loading...</Text>
+      </View>
+    );
+  }
+
+  return (
+    <NavigationContainer>
+      {user ? <AppStack /> : <AuthStack />}
+    </NavigationContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  loadingContainer: {
+    flex: 1,
+    backgroundColor: colors.background.primary,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  spinner: {
+    marginTop: 24,
+  },
+  loadingText: {
+    color: colors.text.secondary,
+    fontSize: 16,
+    marginTop: 16,
+  },
+  tabBar: {
+    backgroundColor: colors.background.secondary,
+    borderTopWidth: 1,
+    borderTopColor: colors.border.light,
+    height: 80,
+    paddingTop: 8,
+    paddingBottom: 20,
+  },
+  tabBarLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    marginTop: 4,
+  },
+});

User/src/screens/auth/LoginScreen.tsx

@@ -0,0 +1,253 @@
+import React from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  Dimensions,
+  StatusBar,
+  Platform,
+} from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import { Ionicons } from "@expo/vector-icons";
+import { Button } from "../../components/ui/Button";
+import { useAuth } from "../../context/AuthContext";
+import { colors, spacing, typography, borderRadius } from "../../theme";
+
+const { width, height } = Dimensions.get("window");
+
+export function LoginScreen() {
+  const { signInWithGoogle, continueWithDevMode, loading, configError } =
+    useAuth();
+
+  return (
+    <LinearGradient
+      colors={[
+        colors.background.primary, // #F8FAFC
+        "#F1F5F9", // Slate-100
+        colors.background.secondary, // #E2E8F0
+      ]}
+      style={styles.container}
+    >
+      <StatusBar barStyle="dark-content" />
+
+      {/* Decorative Blur Circles */}
+      <View
+        style={[
+          styles.decorCircle,
+          {
+            top: -100,
+            right: -100,
+            backgroundColor: colors.primary.main + "08",
+            width: 400,
+            height: 400,
+            borderRadius: 200,
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.decorCircle,
+          {
+            bottom: 0,
+            left: -50,
+            backgroundColor: colors.secondary.main + "08",
+            width: 300,
+            height: 300,
+            borderRadius: 150,
+          },
+        ]}
+      />
+
+      <View style={styles.content}>
+        <View style={styles.headerSection}>
+          <View style={styles.logoContainer}>
+            <LinearGradient
+              colors={[colors.primary.main, colors.primary.dark]}
+              style={styles.logoBadge}
+            >
+              <Text style={styles.logoText}>U</Text>
+            </LinearGradient>
+            <View>
+              <Text style={styles.brandTitle}>
+                City<Text style={{ color: colors.primary.main }}>Tracker</Text>
+              </Text>
+              <Text style={styles.brandSubtitle}>City Issue Reporter</Text>
+            </View>
+          </View>
+
+          <Text style={styles.heroText}>
+            Building a Better City,{"\n"}
+            <Text style={{ color: colors.primary.main }}>Together.</Text>
+          </Text>
+        </View>
+
+        <View style={styles.features}>
+          <FeatureItem
+            icon="camera"
+            color={colors.primary.main}
+            title="Snap & Report"
+            desc="Take a photo, AI handles the details"
+          />
+          <FeatureItem
+            icon="flash"
+            color="#F59E0B"
+            title="Instant Routing"
+            desc="Auto-assigned to the right team"
+          />
+          <FeatureItem
+            icon="shield-checkmark"
+            color="#10B981"
+            title="Verified Resolution"
+            desc="Track progress in real-time"
+          />
+        </View>
+      </View>
+
+      <View style={styles.footer}>
+        <Button
+          title="Continue with Google"
+          onPress={signInWithGoogle}
+          loading={loading}
+          disabled={!!configError}
+          fullWidth
+          size="lg"
+          variant="primary"
+          style={styles.googleButton}
+          icon={<Ionicons name="logo-google" size={20} color="#FFF" />}
+        />
+
+        <Button
+          title="Continue with Dev Mode"
+          variant="ghost"
+          onPress={continueWithDevMode}
+          fullWidth
+          size="sm"
+          style={{ marginTop: spacing.md }}
+          textStyle={{ color: colors.text.tertiary }}
+        />
+
+        <Text style={styles.versionText}>v1.2.0 • CityTracker Public Beta</Text>
+      </View>
+    </LinearGradient>
+  );
+}
+
+const FeatureItem = ({ icon, color, title, desc }: any) => (
+  <View style={styles.feature}>
+    <View style={[styles.featureIcon, { backgroundColor: color + "15" }]}>
+      <Ionicons name={icon as any} size={24} color={color} />
+    </View>
+    <View style={styles.featureText}>
+      <Text style={styles.featureTitle}>{title}</Text>
+      <Text style={styles.featureDesc}>{desc}</Text>
+    </View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  decorCircle: {
+    position: "absolute",
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: spacing.xl,
+    paddingTop: 80, // Increased top padding
+  },
+  headerSection: {
+    marginBottom: spacing.xxl,
+  },
+  logoContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: spacing.xl,
+    gap: spacing.md,
+  },
+  logoBadge: {
+    width: 48,
+    height: 48,
+    borderRadius: 14,
+    alignItems: "center",
+    justifyContent: "center",
+    shadowColor: colors.primary.main,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 6,
+  },
+  logoText: {
+    fontSize: 28,
+    fontWeight: "900",
+    color: "#FFF",
+    fontFamily: Platform.OS === "ios" ? "System" : "Roboto",
+  },
+  brandTitle: {
+    fontSize: 24,
+    fontWeight: "800",
+    color: colors.text.primary,
+    lineHeight: 28,
+    letterSpacing: -0.5,
+  },
+  brandSubtitle: {
+    fontSize: 13,
+    color: colors.text.secondary,
+    fontWeight: "500",
+  },
+  heroText: {
+    fontSize: 34,
+    fontWeight: "800",
+    color: colors.text.primary,
+    lineHeight: 40,
+    letterSpacing: -1,
+  },
+  features: {
+    gap: spacing.lg,
+  },
+  feature: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: spacing.md,
+  },
+  featureIcon: {
+    width: 44,
+    height: 44,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  featureText: {
+    marginLeft: spacing.md,
+    flex: 1,
+  },
+  featureTitle: {
+    fontSize: 16,
+    fontWeight: "700",
+    color: colors.text.primary,
+    marginBottom: 2,
+  },
+  featureDesc: {
+    fontSize: 13,
+    color: colors.text.secondary,
+    lineHeight: 18,
+  },
+  footer: {
+    paddingHorizontal: spacing.xl,
+    paddingBottom: spacing.xxl,
+    paddingTop: spacing.xl,
+  },
+  googleButton: {
+    shadowColor: colors.primary.main,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 12,
+    elevation: 4,
+  },
+  versionText: {
+    fontSize: 11,
+    color: colors.text.tertiary,
+    textAlign: "center",
+    marginTop: spacing.xl,
+  },
+});

User/src/screens/capture/CaptureScreen.tsx

@@ -0,0 +1,677 @@
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+  Alert,
+  Animated,
+  Dimensions,
+  ActivityIndicator,
+  Linking,
+  Platform,
+  TextInput,
+  KeyboardAvoidingView,
+  ScrollView,
+} from 'react-native';
+import { CameraView, useCameraPermissions } from 'expo-camera';
+import * as Location from 'expo-location';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useNavigation } from '@react-navigation/native';
+import { Ionicons } from '@expo/vector-icons';
+import { Button } from '../../components/ui/Button';
+import { Card } from '../../components/ui/Card';
+import { colors, spacing, borderRadius, typography } from '../../theme';
+import { LocationData } from '../../types';
+import { 
+  isLocationAccurate, 
+  checkLocationServicesEnabled,
+  watchLocationWithGpsCheck,
+} from '../../services/locationService';
+
+const { width, height } = Dimensions.get('window');
+
+type CaptureScreenState = 'gps_check' | 'camera' | 'preview' | 'submitting';
+
+export function CaptureScreen() {
+  const navigation = useNavigation<any>();
+  const cameraRef = useRef<CameraView>(null);
+  
+  const [permission, requestPermission] = useCameraPermissions();
+  const [locationPermission, setLocationPermission] = useState<boolean>(false);
+  
+  const [screenState, setScreenState] = useState<CaptureScreenState>('gps_check');
+  const [capturedImage, setCapturedImage] = useState<string | null>(null);
+  const [location, setLocation] = useState<LocationData | null>(null);
+  const [gpsAccuracy, setGpsAccuracy] = useState<number | null>(null);
+  const [isGpsEnabled, setIsGpsEnabled] = useState<boolean | null>(null);
+  const [isGpsReady, setIsGpsReady] = useState(false);
+  const [description, setDescription] = useState('');
+  
+  const pulseAnim = useRef(new Animated.Value(1)).current;
+  const shutterAnim = useRef(new Animated.Value(1)).current;
+  const cleanupRef = useRef<(() => void) | null>(null);
+
+  useEffect(() => {
+    initializeLocation();
+    
+    return () => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+      }
+    };
+  }, []);
+
+  const initializeLocation = async () => {
+    const gpsEnabled = await checkLocationServicesEnabled();
+    setIsGpsEnabled(gpsEnabled);
+    
+    if (!gpsEnabled) {
+      setScreenState('gps_check');
+      return;
+    }
+    
+    const { status } = await Location.requestForegroundPermissionsAsync();
+    setLocationPermission(status === 'granted');
+    
+    if (status === 'granted') {
+      startLocationTracking();
+      setScreenState('camera');
+    }
+  };
+
+  const startLocationTracking = async () => {
+    cleanupRef.current = await watchLocationWithGpsCheck(
+      (newLocation) => {
+        setGpsAccuracy(newLocation.accuracy);
+        
+        if (isLocationAccurate(newLocation.accuracy, 15)) {
+          setIsGpsReady(true);
+          setLocation(newLocation);
+        } else {
+          setIsGpsReady(false);
+        }
+      },
+      (enabled) => {
+        setIsGpsEnabled(enabled);
+        if (!enabled) {
+          setScreenState('gps_check');
+          setIsGpsReady(false);
+        }
+      },
+      15
+    );
+  };
+
+  useEffect(() => {
+    if (screenState === 'camera' && !isGpsReady) {
+      Animated.loop(
+        Animated.sequence([
+          Animated.timing(pulseAnim, {
+            toValue: 1.2,
+            duration: 1000,
+            useNativeDriver: true,
+          }),
+          Animated.timing(pulseAnim, {
+            toValue: 1,
+            duration: 1000,
+            useNativeDriver: true,
+          }),
+        ])
+      ).start();
+    } else {
+      pulseAnim.stopAnimation();
+    }
+  }, [isGpsReady, screenState]);
+
+  const handleOpenSettings = () => {
+    if (Platform.OS === 'ios') {
+      Linking.openURL('app-settings:');
+    } else {
+      Linking.openSettings();
+    }
+  };
+
+  const handleRetryGps = async () => {
+    const enabled = await checkLocationServicesEnabled();
+    setIsGpsEnabled(enabled);
+    
+    if (enabled) {
+      const { status } = await Location.requestForegroundPermissionsAsync();
+      if (status === 'granted') {
+        startLocationTracking();
+        setScreenState('camera');
+      }
+    }
+  };
+
+  const handleCapture = async () => {
+    if (!cameraRef.current || !isGpsReady || !location) {
+      Alert.alert(
+        'GPS Not Ready',
+        'Please wait for GPS to lock (accuracy < 15m) before capturing. This is required to ensure accurate issue reporting.',
+        [{ text: 'OK' }]
+      );
+      return;
+    }
+
+    Animated.sequence([
+      Animated.timing(shutterAnim, {
+        toValue: 0.8,
+        duration: 50,
+        useNativeDriver: true,
+      }),
+      Animated.timing(shutterAnim, {
+        toValue: 1,
+        duration: 50,
+        useNativeDriver: true,
+      }),
+    ]).start();
+
+    try {
+      const photo = await cameraRef.current.takePictureAsync({
+        quality: 0.8,
+        base64: false,
+      });
+      
+      if (photo) {
+        setCapturedImage(photo.uri);
+        setScreenState('preview');
+      }
+    } catch (error) {
+      console.error('Camera capture error:', error);
+      Alert.alert('Error', 'Failed to capture image');
+    }
+  };
+
+  const handleRetake = () => {
+    setCapturedImage(null);
+    setDescription('');
+    setScreenState('camera');
+  };
+
+  const handleSubmit = () => {
+    if (!capturedImage || !location) return;
+    
+    navigation.navigate('Processing', {
+      imageUri: capturedImage,
+      location: location,
+      description: description.trim() || undefined,
+    });
+  };
+
+  if (screenState === 'gps_check' || isGpsEnabled === false) {
+    return (
+      <LinearGradient
+        colors={[colors.background.primary, colors.background.secondary]}
+        style={styles.container}
+      >
+        <View style={styles.gpsCheckContainer}>
+          <Card variant="glass" style={styles.gpsCheckCard}>
+            <View style={styles.gpsCheckIcon}>
+              <Ionicons name="location" size={48} color={colors.status.warning} />
+            </View>
+            
+            <Text style={styles.gpsCheckTitle}>GPS Required</Text>
+            <Text style={styles.gpsCheckText}>
+              Location services must be enabled to report issues. This ensures accurate location data and prevents fraudulent reports.
+            </Text>
+            
+            <View style={styles.requirementList}>
+              <View style={styles.requirementItem}>
+                <Ionicons name="checkmark-circle" size={20} color={colors.secondary.main} />
+                <Text style={styles.requirementText}>Precise location tracking</Text>
+              </View>
+              <View style={styles.requirementItem}>
+                <Ionicons name="checkmark-circle" size={20} color={colors.secondary.main} />
+                <Text style={styles.requirementText}>Anti-fraud protection</Text>
+              </View>
+              <View style={styles.requirementItem}>
+                <Ionicons name="checkmark-circle" size={20} color={colors.secondary.main} />
+                <Text style={styles.requirementText}>Accurate issue mapping</Text>
+              </View>
+            </View>
+            
+            <Button
+              title="Enable GPS"
+              onPress={handleOpenSettings}
+              fullWidth
+              size="lg"
+            />
+            
+            <Button
+              title="Checker Again"
+              variant="ghost"
+              onPress={handleRetryGps}
+              fullWidth
+              size="sm"
+              style={{ marginTop: spacing.md }}
+            />
+          </Card>
+            
+          <TouchableOpacity
+            style={styles.backLink}
+            onPress={() => navigation.goBack()}
+          >
+            <Ionicons name="arrow-back" size={20} color={colors.text.secondary} />
+            <Text style={styles.backLinkText}>Go Back</Text>
+          </TouchableOpacity>
+        </View>
+      </LinearGradient>
+    );
+  }
+// ... (Camera Permission block remains similar, skipping for brevity if unchanged)
+
+  if (screenState === 'preview' && capturedImage) {
+    return (
+      <View style={styles.previewContainer}>
+        <ScrollView contentContainerStyle={styles.previewContent}>
+          <View style={styles.previewImageWrapper}>
+            <Image source={{ uri: capturedImage }} style={styles.previewImageSmall} />
+            <TouchableOpacity style={styles.retakeOverlay} onPress={handleRetake}>
+              <Ionicons name="camera-reverse" size={16} color={colors.text.primary} />
+              <Text style={styles.retakeText}>Retake</Text>
+            </TouchableOpacity>
+          </View>
+          
+          <View style={styles.previewForm}>
+            <Text style={styles.previewTitle}>Add Details</Text>
+            <TextInput
+              style={styles.descriptionInput}
+              placeholder="Describe the issue... (optional)"
+              placeholderTextColor={colors.text.tertiary}
+              multiline
+              value={description}
+              onChangeText={setDescription}
+            />
+            
+            <View style={styles.locationCard}>
+               <View style={styles.locationInfo}>
+                 <Ionicons name="location" size={20} color={colors.primary.main} />
+                 <Text style={styles.locationText}>
+                   Lat: {location?.latitude.toFixed(4)}, Long: {location?.longitude.toFixed(4)}
+                 </Text>
+               </View>
+               <View style={styles.accuracyBadge}>
+                 <Text style={styles.accuracyText}>±{gpsAccuracy?.toFixed(0)}m</Text>
+               </View>
+            </View>
+          </View>
+
+          <View style={styles.previewActions}>
+            <Button
+              title="Submit Report"
+              onPress={handleSubmit}
+              size="lg"
+              fullWidth
+              icon={<Ionicons name="send" size={12} color="#FFF" />}
+            />
+            <Button
+              title="Cancel"
+              variant="ghost"
+              onPress={() => navigation.goBack()}
+              fullWidth
+              size="sm"
+              style={{ marginTop: spacing.md }}
+            />
+          </View>
+        </ScrollView>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <CameraView
+        ref={cameraRef}
+        style={styles.camera}
+        facing="back"
+      />
+      
+      <View style={styles.cameraOverlay}>
+        <LinearGradient
+           colors={['rgba(0,0,0,0.7)', 'transparent']}
+           style={styles.topBar}
+        >
+          <TouchableOpacity
+            style={styles.backButton}
+            onPress={() => navigation.goBack()}
+          >
+            <Ionicons name="arrow-back" size={24} color="#FFF" />
+          </TouchableOpacity>
+          
+          <View style={[
+            styles.gpsIndicator,
+            isGpsReady ? styles.gpsReady : styles.gpsWaiting
+          ]}>
+             <Ionicons 
+                name={isGpsReady ? 'location' : 'hourglass'} 
+                size={14} 
+                color="#FFF" 
+              />
+            <Text style={styles.gpsText}>
+              {isGpsReady 
+                ? `GPS Locked ±${gpsAccuracy?.toFixed(0)}m` 
+                : `Acquiring GPS...`
+              }
+            </Text>
+          </View>
+        </LinearGradient>
+        
+        <View style={styles.frameGuide}>
+          <View style={[styles.corner, styles.cornerTL]} />
+          <View style={[styles.corner, styles.cornerTR]} />
+          <View style={[styles.corner, styles.cornerBL]} />
+          <View style={[styles.corner, styles.cornerBR]} />
+          
+          {!isGpsReady && (
+            <View style={styles.gpsWarningOverlay}>
+              <View style={styles.gpsWarningBox}>
+                <ActivityIndicator color={colors.status.warning} size="small" />
+                <Text style={styles.gpsWarningText}>Waiting for detailed location...</Text>
+              </View>
+            </View>
+          )}
+        </View>
+        
+        <LinearGradient
+          colors={['transparent', 'rgba(0,0,0,0.8)']}
+          style={styles.bottomBar}
+        >
+          <Text style={styles.instructionText}>
+            {isGpsReady 
+              ? 'Tap to Capture' 
+              : 'Wait for GPS Lock'
+            }
+          </Text>
+          
+          <Animated.View style={{ transform: [{ scale: shutterAnim }] }}>
+            <TouchableOpacity
+              style={[
+                styles.shutterButton,
+                !isGpsReady && { opacity: 0.5 }
+              ]}
+              onPress={handleCapture}
+              disabled={!isGpsReady}
+            >
+              <Ionicons name="camera" size={36} color={colors.primary.main} />
+            </TouchableOpacity>
+          </Animated.View>
+        </LinearGradient>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#000",
+  },
+  camera: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  cameraOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'space-between',
+  },
+  gpsCheckContainer: {
+    flex: 1,
+    padding: spacing.lg,
+    justifyContent: 'center',
+  },
+  gpsCheckCard: {
+    padding: spacing.xl,
+    alignItems: 'center',
+    backgroundColor: "rgba(255,255,255,0.7)",
+  },
+  gpsCheckIcon: {
+    marginBottom: spacing.lg,
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: "rgba(245, 158, 11, 0.1)",
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  gpsCheckTitle: {
+    fontSize: 24,
+    fontWeight: "700",
+    color: colors.text.primary,
+    marginBottom: spacing.md,
+  },
+  gpsCheckText: {
+    fontSize: 14,
+    color: colors.text.secondary,
+    textAlign: 'center',
+    marginBottom: spacing.xl,
+    lineHeight: 20,
+  },
+  requirementList: {
+    width: '100%',
+    marginBottom: spacing.xl,
+    gap: spacing.sm,
+  },
+  requirementItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+  },
+  requirementText: {
+    fontSize: 14,
+    color: colors.text.primary,
+    fontWeight: "500",
+  },
+  backLink: {
+    marginTop: spacing.xl,
+    padding: spacing.md,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+  },
+  backLinkText: {
+    color: colors.text.secondary,
+    fontSize: 16,
+  },
+  topBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: spacing.lg,
+    paddingTop: 60,
+  },
+  backButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  gpsIndicator: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 20,
+    gap: 6,
+  },
+  gpsReady: {
+    backgroundColor: 'rgba(16, 185, 129, 0.8)', // Green
+  },
+  gpsWaiting: {
+    backgroundColor: 'rgba(245, 158, 11, 0.8)', // Amber
+  },
+  gpsText: {
+    color: "#FFF",
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  frameGuide: {
+    flex: 1,
+    marginHorizontal: 40,
+    marginVertical: 80,
+    position: 'relative',
+  },
+  corner: {
+    position: 'absolute',
+    width: 40,
+    height: 40,
+    borderColor: "#FFF",
+    borderWidth: 4,
+    borderRadius: 8,
+  },
+  cornerTL: { top: 0, left: 0, borderRightWidth: 0, borderBottomWidth: 0 },
+  cornerTR: { top: 0, right: 0, borderLeftWidth: 0, borderBottomWidth: 0 },
+  cornerBL: { bottom: 0, left: 0, borderRightWidth: 0, borderTopWidth: 0 },
+  cornerBR: { bottom: 0, right: 0, borderLeftWidth: 0, borderTopWidth: 0 },
+  gpsWarningOverlay: {
+    position: 'absolute',
+    bottom: -60,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+  },
+  gpsWarningBox: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.6)',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 20,
+    gap: 8,
+  },
+  gpsWarningText: {
+    color: "#FFF",
+    fontSize: 13,
+    fontWeight: '500', 
+  },
+  bottomBar: {
+    alignItems: 'center',
+    paddingBottom: 50,
+    paddingTop: 20,
+  },
+  shutterButton: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: "#FFFFFF",
+    marginTop: 20,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 5,
+    elevation: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  shutterInner: {
+    // Removed nested circle design
+    display: 'none', 
+  }, 
+  shutterDisabled: {
+    borderColor: "rgba(255,255,255,0.3)",
+  },
+  shutterInnerDisabled: {
+    backgroundColor: "transparent",
+  },
+  instructionText: {
+    color: "#FFF",
+    fontSize: 14,
+    fontWeight: "500",
+    textShadowColor: 'rgba(0,0,0,0.5)',
+    textShadowRadius: 4,
+  },
+  previewContainer: {
+    flex: 1,
+    backgroundColor: colors.background.primary,
+  },
+  previewContent: {
+    padding: spacing.lg,
+    paddingTop: spacing.xxl + 20,
+    paddingBottom: spacing.xxl,
+  },
+  previewImageWrapper: {
+    width: '100%',
+    height: 200,
+    borderRadius: borderRadius.lg,
+    overflow: 'hidden',
+    marginBottom: spacing.xl,
+    position: 'relative',
+  },
+  previewImageSmall: {
+    width: '100%',
+    height: '100%',
+  },
+  retakeOverlay: {
+    position: 'absolute',
+    top: spacing.md,
+    right: spacing.md,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.6)',
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: borderRadius.full,
+    gap: spacing.xs,
+  },
+  retakeText: {
+    color: colors.text.primary,
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  previewForm: {
+    marginBottom: spacing.xl,
+  },
+  previewTitle: {
+    ...typography.h2,
+    color: colors.text.primary,
+    marginBottom: spacing.md,
+  },
+  descriptionInput: {
+    backgroundColor: colors.background.tertiary,
+    borderRadius: borderRadius.md,
+    padding: spacing.md,
+    color: colors.text.primary,
+    fontSize: 16,
+    minHeight: 100,
+    textAlignVertical: 'top',
+    marginBottom: spacing.lg,
+    borderWidth: 1,
+    borderColor: colors.border.light,
+  },
+  locationCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: colors.background.tertiary,
+    padding: spacing.md,
+    borderRadius: borderRadius.md,
+  },
+  locationInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    flex: 1,
+  },
+  locationText: {
+    color: colors.text.secondary,
+    fontSize: 14,
+  },
+  accuracyBadge: {
+    backgroundColor: colors.secondary.main,
+    paddingHorizontal: spacing.sm,
+    paddingVertical: 4,
+    borderRadius: borderRadius.sm,
+  },
+  accuracyText: {
+    color: colors.text.primary,
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  previewActions: {
+    marginTop: spacing.md,
+  },
+});
+

User/src/screens/capture/ProcessingScreen.tsx

@@ -0,0 +1,632 @@
+import React, { useEffect, useState, useRef } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  Image,
+  Animated,
+  Dimensions,
+  Alert,
+  ScrollView,
+  ActivityIndicator,
+} from "react-native";
+import { useRoute, useNavigation, RouteProp } from "@react-navigation/native";
+import { LinearGradient } from "expo-linear-gradient";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import { Button } from "../../components/ui/Button";
+import { Card } from "../../components/ui/Card";
+import { issueService } from "../../services/issueService";
+import { cacheService } from "../../services/cacheService";
+import { useAuth } from "../../context/AuthContext";
+import { colors, spacing, typography, borderRadius } from "../../theme";
+import { LocationData, FlowStep } from "../../types";
+
+const { width } = Dimensions.get("window");
+
+type ProcessingRouteParams = {
+  Processing: {
+    imageUri: string;
+    location: LocationData;
+    description?: string;
+  };
+};
+
+interface AgentStep {
+  name: string;
+  iconName: keyof typeof Ionicons.glyphMap;
+  label: string;
+  status: "pending" | "running" | "done" | "error";
+  decision?: string;
+  reasoning?: string;
+}
+
+const initialAgents: AgentStep[] = [
+  {
+    name: "LocationStep",
+    iconName: "location",
+    label: "Verifying Location",
+    status: "pending",
+  },
+  {
+    name: "UploadStep",
+    iconName: "cloud-upload",
+    label: "Secure Upload",
+    status: "pending",
+  },
+  {
+    name: "VisionAgent",
+    iconName: "eye",
+    label: "Vision Agent",
+    status: "pending",
+  },
+  {
+    name: "GeoDeduplicateAgent",
+    iconName: "map",
+    label: "Geo Agent",
+    status: "pending",
+  },
+  {
+    name: "PriorityAgent",
+    iconName: "alert-circle",
+    label: "Priority Agent",
+    status: "pending",
+  },
+  {
+    name: "RoutingAgent",
+    iconName: "git-branch",
+    label: "Routing Agent",
+    status: "pending",
+  },
+  {
+    name: "NotificationAgent",
+    iconName: "notifications",
+    label: "Notification Agent",
+    status: "pending",
+  },
+];
+
+export function ProcessingScreen() {
+  const route = useRoute<RouteProp<ProcessingRouteParams, "Processing">>();
+  const navigation = useNavigation<any>();
+  const { session } = useAuth();
+
+  const { imageUri, location, description } = route.params;
+
+  const [agents, setAgents] = useState<AgentStep[]>(initialAgents);
+  const [issueId, setIssueId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isComplete, setIsComplete] = useState(false);
+
+  const progressAnim = useRef(new Animated.Value(0)).current;
+  const scanLineAnim = useRef(new Animated.Value(0)).current;
+  const pulseAnims = useRef(
+    initialAgents.map(() => new Animated.Value(1)),
+  ).current;
+
+  useEffect(() => {
+    submitIssue();
+    
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(scanLineAnim, {
+          toValue: 1,
+          duration: 2000,
+          useNativeDriver: true,
+        }),
+        Animated.timing(scanLineAnim, {
+          toValue: 0,
+          duration: 0,
+          useNativeDriver: true,
+        })
+      ])
+    ).start();
+  }, []);
+
+  useEffect(() => {
+    let cleanupFn: (() => void) | undefined;
+
+    const connect = async () => {
+      if (!issueId) return;
+
+      try {
+        cleanupFn = await issueService.connectToFlowStream(
+          issueId,
+          (event) => {
+            handleStreamEvent(event);
+          },
+          (err) => {},
+        );
+      } catch (e) {
+        console.error("Failed to connect to stream", e);
+      }
+    };
+
+    connect();
+
+    return () => {
+      if (cleanupFn) cleanupFn();
+    };
+  }, [issueId]);
+
+  const handleStreamEvent = (event: any) => {
+    if (event.type === "step_started") {
+      const { agent_name } = event.data;
+      setAgents((prev) =>
+        prev.map((a) =>
+          a.name === agent_name ? { ...a, status: "running" } : a,
+        ),
+      );
+
+      const idx = agents.findIndex((a) => a.name === agent_name);
+      if (idx !== -1) {
+        pulseAnims[idx].setValue(1);
+        Animated.loop(
+          Animated.sequence([
+            Animated.timing(pulseAnims[idx], {
+              toValue: 1.1,
+              duration: 500,
+              useNativeDriver: true,
+            }),
+            Animated.timing(pulseAnims[idx], {
+              toValue: 1,
+              duration: 500,
+              useNativeDriver: true,
+            }),
+          ]),
+        ).start();
+      }
+    } else if (event.type === "step_completed") {
+      const { agent_name, decision, reasoning, result } = event.data;
+
+      setAgents((prev) =>
+        prev.map((a) =>
+          a.name === agent_name
+            ? { ...a, status: "done", decision, reasoning }
+            : a,
+        ),
+      );
+
+      const idx = agents.findIndex((a) => a.name === agent_name);
+      if (idx !== -1) {
+        pulseAnims[idx].stopAnimation();
+        pulseAnims[idx].setValue(1);
+      }
+
+      if (agent_name === "VisionAgent" && result?.needs_confirmation) {
+        showConfirmationDialog();
+      }
+    } else if (event.type === "flow_completed") {
+      setIsComplete(true);
+      Animated.timing(progressAnim, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: false,
+      }).start();
+
+      if (event.data.final_result?.needs_confirmation) {
+        setIsComplete(false);
+        showConfirmationDialog();
+      }
+    } else if (event.type === "flow_error") {
+      setError(event.data.error || "Unknown error");
+    }
+  };
+
+  useEffect(() => {
+    const doneCount = agents.filter((a) => a.status === "done").length;
+    const runningCount = agents.filter((a) => a.status === "running").length;
+    const total = agents.length;
+
+    const progress = (doneCount + (runningCount ? 0.5 : 0)) / total;
+    Animated.timing(progressAnim, {
+      toValue: progress,
+      duration: 500,
+      useNativeDriver: false,
+    }).start();
+  }, [agents]);
+
+  const showConfirmationDialog = () => {
+    Alert.alert(
+      "Zero Detections Found",
+      "Our AI didn't find any specific issues in this image.\n\nDo you want to submit this for manual review?\n\n⚠️ WARNING: False reports may result in account ban.",
+      [
+        {
+          text: "Cancel",
+          style: "cancel",
+          onPress: async () => {
+            try {
+              if (issueId) await issueService.confirmIssue(issueId, false);
+              navigation.goBack();
+            } catch (e) {
+              console.error(e);
+            }
+          },
+        },
+        {
+          text: "Submit for Manual Review",
+          style: "default",
+          onPress: async () => {
+            try {
+              if (issueId) {
+                await issueService.confirmIssue(issueId, true);
+                setIsComplete(true);
+              }
+            } catch (e) {
+              setError("Failed to confirm issue");
+            }
+          },
+        },
+      ],
+    );
+  };
+
+  const submitIssue = async () => {
+    try {
+      console.log("[ProcessingScreen] Submitting issue - session present:", !!session, "access_token present:", !!session?.access_token);
+      const result = await issueService.createIssue(
+        imageUri,
+        location,
+        description,
+        session?.access_token,
+      );
+
+      setIssueId(result.issue_id);
+    } catch (err: any) {
+      console.error("Submit error:", err);
+      setError(err.message || "Failed to submit issue");
+    }
+  };
+
+  const handleViewDetails = async () => {
+    if (issueId) {
+      await cacheService.clearCache();
+      navigation.navigate("IssueDetail", { issueId });
+    }
+  };
+
+  const handleGoHome = async () => {
+    await cacheService.clearCache();
+    navigation.reset({
+      index: 0,
+      routes: [{ name: "MainTabs" }],
+    });
+  };
+
+  const progressInterpolate = progressAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0%", "100%"],
+  });
+
+  const scanTranslateY = scanLineAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 180], // Match image height
+  });
+
+
+  return (
+    <LinearGradient
+      colors={[colors.background.primary, colors.background.secondary]}
+      style={styles.container}
+    >
+      <View style={styles.header}>
+        <View style={[styles.headerIcon, isComplete && styles.headerIconComplete]}>
+          {isComplete ? (
+            <Ionicons name="sparkles" size={32} color={colors.secondary.main} />
+          ) : (
+            <MaterialCommunityIcons
+              name="robot-outline"
+              size={32}
+              color={colors.primary.main}
+            />
+          )}
+        </View>
+        <Text style={styles.title}>
+          {isComplete ? "Report Processed!" : "AI Analysis in Progress"}
+        </Text>
+        <Text style={styles.subtitle}>
+          {isComplete
+            ? "Your issue has been categorized and routed."
+            : "Our intelligent agents are analyzing your report."}
+        </Text>
+      </View>
+
+      <View style={styles.imageContainer}>
+        <Image source={{ uri: imageUri }} style={styles.image} />
+        {!isComplete && (
+          <View style={styles.imageOverlay}>
+            <Animated.View 
+              style={[
+                styles.scanLine, 
+                { transform: [{ translateY: scanTranslateY }] }
+              ]} 
+            />
+            <View style={styles.gridOverlay} />
+          </View>
+        )}
+      </View>
+
+      <View style={styles.progressContainer}>
+        <View style={styles.progressTrack}>
+          <Animated.View
+            style={[styles.progressFill, { width: progressInterpolate }]}
+          />
+        </View>
+        <Text style={styles.progressText}>
+          {Math.round((agents.filter(a => a.status === 'done').length / agents.length) * 100)}% Complete
+        </Text>
+      </View>
+
+      <ScrollView
+        style={styles.agentsContainer}
+        contentContainerStyle={{ paddingBottom: spacing.xxl }}
+        showsVerticalScrollIndicator={false}
+      >
+        {agents.map((agent, index) => (
+          <Animated.View
+            key={agent.name}
+            style={[
+              styles.agentRow,
+              {
+                transform: [{ scale: pulseAnims[index] }],
+                opacity: agent.status === "pending" ? 0.5 : 1,
+                borderColor:
+                  agent.status === "running"
+                    ? colors.primary.main
+                    : "rgba(255,255,255,0.1)",
+              },
+            ]}
+          >
+            <View
+              style={[
+                styles.agentIcon,
+                agent.status === "done" && styles.agentIconDone,
+                agent.status === "running" && styles.agentIconRunning,
+              ]}
+            >
+              <Ionicons
+                name={agent.status === "done" ? "checkmark" : agent.iconName}
+                size={20}
+                color={
+                  agent.status === "done"
+                    ? colors.secondary.main
+                    : agent.status === "running"
+                    ? colors.primary.main
+                    : colors.text.tertiary
+                }
+              />
+            </View>
+
+            <View style={styles.agentInfo}>
+              <Text
+                style={[
+                  styles.agentLabel,
+                  agent.status === "running" && styles.agentLabelRunning,
+                ]}
+              >
+                {agent.label}
+              </Text>
+
+              {agent.decision ? (
+                <Text style={styles.agentDecision}>Result: {agent.decision}</Text>
+              ) : null}
+            </View>
+
+            {agent.status === "running" && (
+              <ActivityIndicator size="small" color={colors.primary.main} />
+            )}
+          </Animated.View>
+        ))}
+      </ScrollView>
+
+      {error ? (
+        <Card style={styles.errorCard} variant="glass">
+          <View style={styles.errorContent}>
+            <Ionicons
+              name="alert-circle"
+              size={24}
+              color={colors.status.error}
+            />
+            <Text style={styles.errorText}>{error}</Text>
+          </View>
+          <Button
+            title="Retry Upload"
+            variant="outline"
+            onPress={submitIssue}
+            size="sm"
+            style={{ borderColor: colors.status.error }}
+            textStyle={{ color: colors.status.error }}
+          />
+        </Card>
+      ) : null}
+
+      {isComplete && (
+        <View style={styles.actions}>
+          <Button title="View Receipt" onPress={handleViewDetails} fullWidth size="lg" />
+          <Button
+            title="Return Home"
+            variant="ghost"
+            onPress={handleGoHome}
+            fullWidth
+            style={{ marginTop: spacing.sm }}
+          />
+        </View>
+      )}
+    </LinearGradient>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: spacing.lg,
+    paddingTop: 60,
+  },
+  header: {
+    marginBottom: spacing.xl,
+    alignItems: "center",
+  },
+  headerIcon: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: "rgba(59, 130, 246, 0.1)", // Blue tint
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: spacing.md,
+    borderWidth: 1,
+    borderColor: "rgba(59, 130, 246, 0.2)",
+  },
+  headerIconComplete: {
+    backgroundColor: "rgba(16, 185, 129, 0.1)", // Green tint
+    borderColor: "rgba(16, 185, 129, 0.2)",
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "700",
+    color: colors.text.primary,
+    marginBottom: 4,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: colors.text.secondary,
+    textAlign: "center",
+    maxWidth: '80%',
+  },
+  imageContainer: {
+    height: 200,
+    borderRadius: 20,
+    overflow: "hidden",
+    backgroundColor: colors.background.card,
+    marginBottom: spacing.xl,
+    borderWidth: 1,
+    borderColor: colors.border.light,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 10,
+    elevation: 5,
+  },
+  image: {
+    width: "100%",
+    height: "100%",
+    resizeMode: "cover",
+  },
+  imageOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "transparent",
+    overflow: 'hidden',
+  },
+  gridOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "transparent", 
+    // Add grid background image or implementation if feasible, otherwise keep transparent
+  },
+  scanLine: {
+    height: 2,
+    backgroundColor: colors.secondary.main, // Green laser
+    width: "100%",
+    shadowColor: colors.secondary.main,
+    shadowOpacity: 1,
+    shadowRadius: 10,
+    elevation: 5,
+  },
+  progressContainer: {
+    marginBottom: spacing.lg,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  progressTrack: {
+    flex: 1,
+    height: 8,
+    backgroundColor: "rgba(0,0,0,0.05)",
+    borderRadius: 4,
+    overflow: "hidden",
+  },
+  progressFill: {
+    height: "100%",
+    backgroundColor: colors.primary.main,
+    borderRadius: 4,
+  },
+  progressText: {
+    fontSize: 12,
+    color: colors.text.secondary,
+    fontWeight: "600",
+    width: 90,
+    textAlign: 'right',
+  },
+  agentsContainer: {
+    flex: 1,
+  },
+  agentRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 12,
+    borderRadius: 16,
+    marginBottom: 8,
+    backgroundColor: "rgba(255,255,255,0.6)",
+    borderWidth: 1,
+    borderColor: "transparent",
+  },
+  agentIcon: {
+    width: 36,
+    height: 36,
+    borderRadius: 12,
+    backgroundColor: colors.background.tertiary,
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 12,
+  },
+  agentIconDone: {
+    backgroundColor: "rgba(16, 185, 129, 0.1)",
+  },
+  agentIconRunning: {
+    backgroundColor: "rgba(59, 130, 246, 0.1)",
+  },
+  agentInfo: {
+    flex: 1,
+  },
+  agentLabel: {
+    fontSize: 15,
+    fontWeight: "600",
+    color: colors.text.primary,
+  },
+  agentLabelRunning: {
+    color: colors.primary.main,
+  },
+  agentDecision: {
+    fontSize: 12,
+    color: colors.secondary.main,
+    marginTop: 2,
+    fontWeight: "500",
+  },
+  agentReasoning: {
+    fontSize: 12,
+    color: colors.text.tertiary,
+    marginTop: 2,
+  },
+  errorCard: {
+    marginTop: spacing.md,
+    backgroundColor: "rgba(254, 226, 226, 0.5)", // Red tint
+    borderColor: "rgba(248, 113, 113, 0.3)",
+    padding: spacing.md,
+  },
+  errorContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: spacing.md,
+  },
+  errorText: {
+    fontSize: 14,
+    color: colors.status.error,
+    marginLeft: spacing.sm,
+    flex: 1,
+    fontWeight: "500",
+  },
+  actions: {
+    position: 'absolute',
+    bottom: 40,
+    left: 20,
+    right: 20,
+  },
+});

User/src/screens/home/DashboardScreen.tsx

@@ -0,0 +1,300 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, RefreshControl, Platform } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Ionicons } from '@expo/vector-icons';
+import { BlurView } from 'expo-blur';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+import { useAuth } from '../../context/AuthContext';
+import { colors, spacing, typography, borderRadius, shadows } from '../../theme';
+import { config } from '../../config/env';
+
+// Define navigation types since we are using useNavigation
+type RootStackParamList = {
+  Capture: undefined;
+  MyIssues: undefined;
+  Profile: undefined;
+};
+
+type NavigationProp = NativeStackNavigationProp<RootStackParamList>;
+
+interface UserStats {
+  total_reported: number;
+  resolved: number;
+  impact_score: number;
+}
+
+export function DashboardScreen() {
+  const { user, signOut, session } = useAuth();
+  const navigation = useNavigation<NavigationProp>();
+  const [stats, setStats] = useState<UserStats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const fetchStats = async () => {
+    try {
+      const response = await fetch(`${config.API_BASE_URL}/issues/user/stats`, {
+        headers: {
+          'Authorization': `Bearer ${session?.access_token}`
+        }
+      });
+      
+      if (response.ok) {
+        const data = await response.json();
+        setStats(data);
+      }
+    } catch (error) {
+      console.error('Failed to fetch stats', error);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchStats();
+  }, []);
+
+  const onRefresh = () => {
+    setRefreshing(true);
+    fetchStats();
+  };
+
+  const StatCard = ({ label, value, icon, color }: { label: string, value: string | number, icon: any, color: string }) => (
+    <View style={[styles.statCardContainer, { borderColor: color + '40' }]}>
+      <BlurView intensity={20} tint="dark" style={styles.statCard}>
+        <View style={[styles.iconContainer, { backgroundColor: color + '20' }]}>
+          <Ionicons name={icon} size={24} color={color} />
+        </View>
+        <Text style={styles.statValue}>{value}</Text>
+        <Text style={styles.statLabel}>{label}</Text>
+      </BlurView>
+    </View>
+  );
+
+  return (
+    <View style={styles.container}>
+      <LinearGradient
+        colors={colors.background.gradient}
+        style={StyleSheet.absoluteFill}
+      />
+      
+      <SafeAreaView style={styles.safeArea}>
+        <ScrollView 
+          contentContainerStyle={styles.scrollContent}
+          refreshControl={
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={colors.primary.main} />
+          }
+        >
+          {/* Header */}
+          <View style={styles.header}>
+            <View>
+              <Text style={styles.greeting}>Welcome back,</Text>
+              <Text style={styles.username}>{user?.user_metadata?.full_name?.split(' ')[0] || 'User'}</Text>
+            </View>
+            <TouchableOpacity onPress={signOut} style={styles.profileButton}>
+               <BlurView intensity={30} tint="dark" style={styles.profileIconBlur}>
+                 <Ionicons name="person" size={20} color={colors.primary.light} />
+               </BlurView>
+            </TouchableOpacity>
+          </View>
+
+          {/* Stats Grid */}
+          <View style={styles.statsGrid}>
+            <StatCard 
+              label="Impact Score" 
+              value={stats?.impact_score || 0} 
+              icon="flash" 
+              color={colors.secondary.main} 
+            />
+            <StatCard 
+              label="Issues Fixed" 
+              value={stats?.resolved || 0} 
+              icon="checkmark-circle" 
+              color={colors.status.success} 
+            />
+             <StatCard 
+              label="Reported" 
+              value={stats?.total_reported || 0} 
+              icon="megaphone" 
+              color={colors.primary.main} 
+            />
+          </View>
+
+          {/* Main Action - REPORT */}
+          <TouchableOpacity 
+            style={styles.mainAction}
+            onPress={() => navigation.navigate('Capture')}
+            activeOpacity={0.9}
+          >
+            <LinearGradient
+              colors={[colors.secondary.main, colors.secondary.dark]}
+              start={{ x: 0, y: 0 }}
+              end={{ x: 1, y: 1 }}
+              style={styles.actionGradient}
+            >
+              <Ionicons name="camera" size={32} color="white" />
+              <Text style={styles.actionText}>Report New Issue</Text>
+              <Ionicons name="arrow-forward" size={24} color="white" style={styles.actionArrow} />
+            </LinearGradient>
+          </TouchableOpacity>
+
+          {/* Quick Links */}
+          <Text style={styles.sectionTitle}>Quick Access</Text>
+          <View style={styles.quickLinks}>
+            <TouchableOpacity 
+              style={styles.linkCard} 
+              onPress={() => navigation.navigate('MyIssues')}
+            >
+               <BlurView intensity={20} tint="dark" style={styles.linkContent}>
+                  <Ionicons name="time" size={24} color={colors.primary.light} />
+                  <Text style={styles.linkText}>History</Text>
+               </BlurView>
+            </TouchableOpacity>
+
+            <TouchableOpacity 
+              style={styles.linkCard}
+              onPress={() => navigation.navigate('Profile')}
+            >
+               <BlurView intensity={20} tint="dark" style={styles.linkContent}>
+                  <Ionicons name="settings" size={24} color={colors.text.tertiary} />
+                  <Text style={styles.linkText}>Settings</Text>
+               </BlurView>
+            </TouchableOpacity>
+          </View>
+
+        </ScrollView>
+      </SafeAreaView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background.primary,
+  },
+  safeArea: {
+    flex: 1,
+  },
+  scrollContent: {
+    padding: spacing.lg,
+    paddingBottom: 100,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: spacing.xl,
+  },
+  greeting: {
+    ...typography.caption,
+    fontSize: 14,
+    color: colors.text.secondary,
+  },
+  username: {
+    ...typography.h1,
+    fontSize: 28,
+  },
+  profileButton: {
+    borderRadius: borderRadius.full,
+    overflow: 'hidden',
+  },
+  profileIconBlur: {
+    width: 44,
+    height: 44,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255,255,255,0.05)',
+  },
+  statsGrid: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: spacing.sm,
+    marginBottom: spacing.xl,
+  },
+  statCardContainer: {
+    flex: 1,
+    borderRadius: borderRadius.lg,
+    overflow: 'hidden',
+    borderWidth: 1,
+    backgroundColor: 'rgba(30, 41, 59, 0.4)',
+  },
+  statCard: {
+    padding: spacing.md,
+    alignItems: 'center',
+    height: 110,
+    justifyContent: 'center',
+  },
+  iconContainer: {
+    width: 36,
+    height: 36,
+    borderRadius: borderRadius.full,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: spacing.sm,
+  },
+  statValue: {
+    ...typography.h2,
+    fontSize: 20,
+    marginBottom: 2,
+  },
+  statLabel: {
+    ...typography.caption,
+    fontSize: 10,
+    textAlign: 'center',
+  },
+  mainAction: {
+    borderRadius: borderRadius.xl,
+    overflow: 'hidden',
+    marginBottom: spacing.xl,
+    ...shadows.glow,
+  },
+  actionGradient: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: spacing.lg,
+    paddingVertical: spacing.xl,
+  },
+  actionText: {
+    ...typography.h3,
+    color: 'white',
+    flex: 1,
+    marginLeft: spacing.md,
+  },
+  actionArrow: {
+    opacity: 0.8,
+  },
+  sectionTitle: {
+    ...typography.h3,
+    fontSize: 18,
+    marginBottom: spacing.md,
+    color: colors.text.secondary,
+  },
+  quickLinks: {
+    flexDirection: 'row',
+    gap: spacing.md,
+  },
+  linkCard: {
+    flex: 1,
+    height: 80,
+    borderRadius: borderRadius.md,
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: colors.border.accent,
+  },
+  linkContent: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.sm,
+    backgroundColor: 'rgba(30, 41, 59, 0.3)',
+  },
+  linkText: {
+    ...typography.button,
+    color: colors.text.primary,
+  },
+});

User/src/screens/home/HomeScreen.tsx

@@ -0,0 +1,445 @@
+import React, { useEffect, useState, useCallback } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  RefreshControl,
+  TouchableOpacity,
+  Dimensions,
+  AppState,
+} from "react-native";
+import { useNavigation, useFocusEffect } from "@react-navigation/native";
+import { LinearGradient } from "expo-linear-gradient";
+import * as Location from "expo-location";
+import { Ionicons } from "@expo/vector-icons";
+import { Button } from "../../components/ui/Button";
+import { Card } from "../../components/ui/Card";
+import { Loader } from "../../components/ui/Loader";
+import { IssueCard } from "../../components/issues/IssueCard";
+import { useAuth } from "../../context/AuthContext";
+import { issueService } from "../../services/issueService";
+import { colors, spacing, typography, borderRadius } from "../../theme";
+import { Issue } from "../../types";
+
+const { width } = Dimensions.get("window");
+
+export function HomeScreen() {
+  const navigation = useNavigation<any>();
+  const { user, signOut, isDevMode } = useAuth();
+  // ... rest of code
+
+  const [issues, setIssues] = useState<Issue[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [locationEnabled, setLocationEnabled] = useState<boolean | null>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      checkLocationServices();
+      setRefreshing(true);
+      fetchIssues();
+    }, [user?.id, isDevMode]),
+  );
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener("change", (nextAppState) => {
+      if (nextAppState === "active") {
+        checkLocationServices();
+      }
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  const checkLocationServices = async () => {
+    const enabled = await Location.hasServicesEnabledAsync();
+    setLocationEnabled(enabled);
+  };
+
+  const fetchIssues = async () => {
+    try {
+      const userId = isDevMode ? undefined : user?.id;
+      const response = await issueService.listIssues(1, 10, undefined, userId);
+      setIssues(response.items);
+    } catch (error) {
+      console.error("Failed to fetch issues:", error);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  const handleRefresh = () => {
+    setRefreshing(true);
+    fetchIssues();
+  };
+
+  const handleReportIssue = async () => {
+    const enabled = await Location.hasServicesEnabledAsync();
+    if (!enabled) {
+      setLocationEnabled(false);
+      return;
+    }
+    navigation.navigate("Capture");
+  };
+
+  const handleIssuePress = (issue: Issue) => {
+    navigation.navigate("IssueDetail", { issueId: issue.id });
+  };
+
+  const renderHeader = () => (
+    <View style={styles.header}>
+      <View>
+        <Text style={styles.greetingText}>Welcome,</Text>
+        <Text style={styles.userName}>
+          {user?.user_metadata?.full_name ||
+            user?.email?.split("@")[0] ||
+            "Citizen"}
+        </Text>
+      </View>
+
+      <TouchableOpacity style={styles.profileButton} onPress={signOut}>
+        <LinearGradient
+          colors={[colors.primary.light, colors.primary.main]}
+          style={styles.profileGradient}
+        >
+          <Ionicons name="person" size={20} color="#FFF" />
+        </LinearGradient>
+      </TouchableOpacity>
+    </View>
+  );
+
+  const renderQuickActions = () => (
+    <View style={styles.quickActions}>
+      <TouchableOpacity onPress={handleReportIssue} activeOpacity={0.9}>
+        <View style={styles.reportCard}>
+          <LinearGradient
+            colors={[colors.primary.main, colors.primary.dark]}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 1 }}
+            style={styles.reportCardGradient}
+          >
+            <View style={styles.reportCardContent}>
+              <View style={styles.reportInfo}>
+                <Text style={styles.reportTitle}>Report New Issue</Text>
+                <Text style={styles.reportSubtitle}>
+                  Snap a photo • AI Analysis • Track Fixes
+                </Text>
+              </View>
+              <View style={{
+                backgroundColor: 'rgba(255,255,255,0.2)',
+                padding: 10,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: 'rgba(255,255,255,0.3)'
+              }}>
+                <Ionicons name="camera" size={24} color="#FFF" />
+              </View>
+            </View>
+          </LinearGradient>
+        </View>
+      </TouchableOpacity>
+
+      {locationEnabled === false && (
+        <Card style={styles.gpsWarning}>
+          <View style={{flexDirection: 'row', alignItems: 'center', flex: 1}}>
+            <Ionicons name="location" size={24} color="#EF4444" />
+            <Text style={styles.gpsWarningText}>
+              Enable Location Services to report issues nearby.
+            </Text>
+          </View>
+          <Button
+            title="Enable"
+            variant="ghost"
+            size="sm"
+            onPress={async () => {
+              try {
+                await Location.enableNetworkProviderAsync();
+                setTimeout(checkLocationServices, 1000);
+              } catch (e) {
+                checkLocationServices();
+              }
+            }}
+            textStyle={{ color: "#EF4444", fontWeight: '700' }}
+            style={{ backgroundColor: 'rgba(239,68,68,0.1)' }}
+          />
+        </Card>
+      )}
+    </View>
+  );
+
+  const renderStats = () => (
+    <View style={styles.statsContainer}>
+      <View style={styles.statCard}>
+        <Text style={[styles.statValue, { color: colors.primary.main }]}>{issues.length}</Text>
+        <Text style={styles.statLabel}>Total</Text>
+      </View>
+      <View style={styles.statCard}>
+        <Text style={[styles.statValue, { color: '#10B981' }]}>
+          {issues.filter((i) => i.state === "resolved").length}
+        </Text>
+        <Text style={styles.statLabel}>Fixed</Text>
+      </View>
+      <View style={styles.statCard}>
+        <Text style={[styles.statValue, { color: '#F59E0B' }]}>
+          {
+            issues.filter((i) => ["assigned", "in_progress"].includes(i.state))
+              .length
+          }
+        </Text>
+        <Text style={styles.statLabel}>Pending</Text>
+      </View>
+    </View>
+  );
+
+  const renderRecentHeader = () => (
+    <View style={styles.sectionHeader}>
+      <Text style={styles.sectionTitle}>Recent Updates</Text>
+      <TouchableOpacity onPress={() => navigation.navigate("MyIssues")}>
+        <Text style={styles.seeAllText}>See All</Text>
+      </TouchableOpacity>
+    </View>
+  );
+
+  const renderEmpty = () => (
+    <Card style={styles.emptyCard} variant="glass">
+      <View style={styles.emptyIconBg}>
+        <Ionicons
+          name="images-outline"
+          size={32}
+          color={colors.primary.main}
+        />
+      </View>
+      <Text style={styles.emptyTitle}>No Reports Found</Text>
+      <Text style={styles.emptyText}>
+        You haven't reported any issues yet.{"\n"}Help improve your city today!
+      </Text>
+    </Card>
+  );
+
+  if (loading && !refreshing) {
+    return <Loader fullScreen size="large" />;
+  }
+
+  return (
+    <LinearGradient
+      colors={[colors.background.primary, "#E2E8F0", colors.background.tertiary]}
+      style={styles.container}
+    >
+      <FlatList
+        data={issues.slice(0, 5)}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <IssueCard issue={item} onPress={() => handleIssuePress(item)} />
+        )}
+        ListHeaderComponent={
+          <View style={styles.headerContainer}>
+            {renderHeader()}
+            {renderQuickActions()}
+            {renderStats()}
+            {issues.length > 0 && renderRecentHeader()}
+          </View>
+        }
+        ListEmptyComponent={!loading ? renderEmpty : null}
+        contentContainerStyle={styles.listContent}
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={handleRefresh}
+            tintColor={colors.primary.main}
+          />
+        }
+        showsVerticalScrollIndicator={false}
+      />
+    </LinearGradient>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  listContent: {
+    padding: spacing.lg,
+    paddingTop: 60, // Reduced from 80
+  },
+  headerContainer: {
+    marginBottom: spacing.lg,
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: spacing.xl,
+  },
+  greetingText: {
+    fontSize: 14,
+    color: colors.text.secondary,
+    fontWeight: "500",
+  },
+  userName: {
+    fontSize: 22,
+    fontWeight: "700",
+    color: colors.text.primary,
+    letterSpacing: -0.5,
+  },
+  profileButton: {
+    shadowColor: colors.primary.main,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  profileGradient: {
+    width: 44,
+    height: 44,
+    borderRadius: 14,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  quickActions: {
+    marginBottom: spacing.xl,
+  },
+  reportCard: {
+    marginBottom: spacing.md,
+    borderRadius: 20,
+    padding: 0, // Reset padding for internal gradient
+    overflow: 'hidden', // Ensure gradient is clipped
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.2)',
+    elevation: 8,
+    shadowColor: colors.primary.main,
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.3,
+    shadowRadius: 12,
+  },
+  reportCardGradient: {
+    padding: 20,
+    width: '100%',
+  },
+  reportCardContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  reportInfo: {
+    flex: 1,
+    marginRight: spacing.md,
+  },
+  reportTitle: {
+    fontSize: 20,
+    fontWeight: "800",
+    color: "#FFF",
+    marginBottom: 4,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+  },
+  reportSubtitle: {
+    fontSize: 13,
+    color: "rgba(255,255,255,0.9)",
+    fontWeight: "600",
+  },
+  gpsWarning: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: "#FFFFFF",
+    borderColor: "#EF4444", // Red-500
+    borderWidth: 1,
+    padding: spacing.md,
+    borderRadius: 12, // Reduced radius for "alert" feel
+    shadowColor: "#EF4444",
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  gpsWarningText: {
+    flex: 1,
+    flexShrink: 1, // Fix overflow
+    color: "#EF4444", 
+    fontSize: 13,
+    fontWeight: "600",
+    marginLeft: 10,
+    marginRight: 10,
+  },
+  statsContainer: {
+    flexDirection: "row",
+    marginBottom: spacing.xl,
+    gap: spacing.md,
+  },
+  statCard: {
+    flex: 1,
+    backgroundColor: "rgba(255,255,255,0.9)", // Increased opacity
+    borderRadius: 16,
+    padding: spacing.md,
+    alignItems: "center",
+    borderWidth: 1,
+    borderColor: "#E2E8F0", // Slate 200 border
+    shadowColor: "#64748B", // Slate 500 shadow
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 3,
+  },
+  statValue: {
+    fontSize: 20,
+    fontWeight: "800",
+    marginBottom: 2,
+  },
+  statLabel: {
+    fontSize: 11,
+    color: colors.text.secondary,
+    fontWeight: "600",
+    textTransform: "uppercase",
+  },
+  sectionHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: spacing.md,
+    paddingHorizontal: 4,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: "700",
+    color: colors.text.primary,
+  },
+  seeAllText: {
+    color: colors.primary.main,
+    fontSize: 14,
+    fontWeight: "600",
+  },
+  emptyCard: {
+    alignItems: "center",
+    padding: spacing.xl * 1.5,
+    backgroundColor: "rgba(255,255,255,0.5)",
+    borderStyle: 'dashed',
+    borderColor: colors.border.medium || "rgba(0,0,0,0.1)",
+  },
+  emptyIconBg: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: colors.primary.main + "10",
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: spacing.md,
+  },
+  emptyTitle: {
+    fontSize: 16,
+    fontWeight: "700",
+    color: colors.text.primary,
+    marginBottom: spacing.xs,
+  },
+  emptyText: {
+    fontSize: 14,
+    color: colors.text.secondary,
+    textAlign: "center",
+    lineHeight: 20,
+  },
+});

User/src/screens/index.ts

@@ -0,0 +1,7 @@
+export { LoginScreen } from './auth/LoginScreen';
+export { HomeScreen } from './home/HomeScreen';
+export { CaptureScreen } from './capture/CaptureScreen';
+export { ProcessingScreen } from './capture/ProcessingScreen';
+export { MyIssuesScreen } from './issues/MyIssuesScreen';
+export { IssueDetailScreen } from './issues/IssueDetailScreen';
+export { ProfileScreen } from './profile/ProfileScreen';

User/src/screens/issues/IssueDetailScreen.tsx

@@ -0,0 +1,481 @@
+import React, { useEffect, useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  Image,
+  Dimensions,
+  TouchableOpacity,
+  ActivityIndicator,
+} from 'react-native';
+import { useRoute, useNavigation, RouteProp } from '@react-navigation/native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Ionicons } from '@expo/vector-icons';
+import { Card } from '../../components/ui/Card';
+import { Button } from '../../components/ui/Button';
+import { issueService } from '../../services/issueService';
+import { colors, spacing, typography, borderRadius } from '../../theme';
+import { Issue } from '../../types';
+
+const { width } = Dimensions.get('window');
+
+type IssueDetailRouteParams = {
+  IssueDetail: {
+    issueId: string;
+  };
+};
+
+const priorityConfig: Record<number, { color: string; label: string }> = {
+  1: { color: colors.priority.critical, label: 'CRITICAL' },
+  2: { color: colors.priority.high, label: 'HIGH' },
+  3: { color: colors.priority.medium, label: 'MEDIUM' },
+  4: { color: colors.priority.low, label: 'LOW' },
+};
+
+const stateConfig: Record<string, { color: string; label: string; iconName: keyof typeof Ionicons.glyphMap }> = {
+  reported: { color: colors.status.info, label: 'Reported', iconName: 'document-text' },
+  validated: { color: colors.accent.purple, label: 'Validated', iconName: 'checkmark-circle' },
+  assigned: { color: colors.accent.cyan, label: 'Assigned', iconName: 'person' },
+  in_progress: { color: colors.status.warning, label: 'In Progress', iconName: 'construct' },
+  resolved: { color: colors.status.success, label: 'Resolved', iconName: 'checkmark-done-circle' },
+  closed: { color: colors.text.tertiary, label: 'Closed', iconName: 'archive' },
+  rejected: { color: colors.status.error, label: 'Rejected', iconName: 'close-circle' },
+};
+
+export function IssueDetailScreen() {
+  const route = useRoute<RouteProp<IssueDetailRouteParams, 'IssueDetail'>>();
+  const navigation = useNavigation();
+  
+  const { issueId } = route.params;
+  
+  const [issue, setIssue] = useState<Issue | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [activeImage, setActiveImage] = useState(0);
+  const [showAnnotated, setShowAnnotated] = useState(true);
+
+  useEffect(() => {
+    fetchIssue();
+  }, [issueId]);
+
+  const fetchIssue = async () => {
+    try {
+      const data = await issueService.getIssue(issueId);
+      setIssue(data);
+    } catch (error) {
+      console.error('Failed to fetch issue:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr);
+    return date.toLocaleDateString('en-US', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  if (loading) {
+    return (
+      <View style={styles.loadingContainer}>
+        <ActivityIndicator size="large" color={colors.primary.main} />
+      </View>
+    );
+  }
+
+  if (!issue) {
+    return (
+      <View style={styles.errorContainer}>
+        <Ionicons name="sad-outline" size={64} color={colors.text.tertiary} />
+        <Text style={styles.errorText}>Issue not found</Text>
+        <Button title="Go Back" onPress={() => navigation.goBack()} />
+      </View>
+    );
+  }
+
+  const priorityInfo = issue.priority ? priorityConfig[issue.priority] : null;
+  const stateInfo = stateConfig[issue.state] || stateConfig.reported;
+  const displayImages = showAnnotated && issue.annotated_urls.length > 0 
+    ? issue.annotated_urls 
+    : issue.image_urls;
+
+  return (
+    <LinearGradient
+      colors={[colors.background.primary, colors.background.secondary]}
+      style={styles.container}
+    >
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <View style={styles.imageContainer}>
+          {displayImages.length > 0 ? (
+            <Image
+              source={{ uri: displayImages[activeImage] }}
+              style={styles.mainImage}
+              resizeMode="cover"
+            />
+          ) : (
+            <View style={[styles.mainImage, styles.placeholderImage]}>
+              <Ionicons name="camera" size={48} color={colors.text.tertiary} />
+            </View>
+          )}
+          
+          <LinearGradient
+            colors={['transparent', 'rgba(0,0,0,0.7)']}
+            style={styles.imageGradient}
+          />
+          
+          <TouchableOpacity
+            style={styles.backButton}
+            onPress={() => navigation.goBack()}
+          >
+            <Ionicons name="arrow-back" size={24} color={colors.text.primary} />
+          </TouchableOpacity>
+          
+          {issue.annotated_urls.length > 0 && (
+            <View style={styles.imageToggle}>
+              <TouchableOpacity
+                style={[styles.toggleButton, !showAnnotated && styles.toggleActive]}
+                onPress={() => setShowAnnotated(false)}
+              >
+                <Text style={styles.toggleText}>Original</Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={[styles.toggleButton, showAnnotated && styles.toggleActive]}
+                onPress={() => setShowAnnotated(true)}
+              >
+                <Text style={styles.toggleText}>AI View</Text>
+              </TouchableOpacity>
+            </View>
+          )}
+        </View>
+        
+        <View style={styles.content}>
+          <View style={styles.badges}>
+            {priorityInfo ? (
+              <View style={[styles.badge, { backgroundColor: priorityInfo.color }]}>
+                <Text style={styles.badgeText}>{priorityInfo.label}</Text>
+              </View>
+            ) : null}
+            <View style={[styles.badge, styles.stateBadge, { borderColor: stateInfo.color }]}>
+              <Ionicons name={stateInfo.iconName} size={14} color={stateInfo.color} />
+              <Text style={[styles.badgeText, { color: stateInfo.color }]}>
+                {stateInfo.label}
+              </Text>
+            </View>
+          </View>
+          
+          {issue.category ? (
+            <Text style={styles.category}>{issue.category}</Text>
+          ) : null}
+          
+          {issue.confidence !== undefined && issue.confidence !== null ? (
+            <Card style={styles.confidenceCard} variant="glass">
+              <View style={styles.confidenceRow}>
+                <Text style={styles.confidenceLabel}>AI Confidence</Text>
+                <Text style={styles.confidenceValue}>
+                  {(issue.confidence * 100).toFixed(0)}%
+                </Text>
+              </View>
+              <View style={styles.confidenceBar}>
+                <View 
+                  style={[
+                    styles.confidenceFill, 
+                    { width: `${issue.confidence * 100}%` }
+                  ]} 
+                />
+              </View>
+            </Card>
+          ) : null}
+          
+          {issue.description ? (
+            <Card style={styles.descriptionCard} variant="glass">
+              <Text style={styles.sectionTitle}>Description</Text>
+              <Text style={styles.description}>{issue.description}</Text>
+            </Card>
+          ) : null}
+          
+          <Card style={styles.detailsCard} variant="glass">
+            <Text style={styles.sectionTitle}>Details</Text>
+            
+            <View style={styles.detailRow}>
+              <View style={styles.detailLabelContainer}>
+                <Ionicons name="location" size={16} color={colors.text.secondary} />
+                <Text style={styles.detailLabel}>Location</Text>
+              </View>
+              <Text style={styles.detailValue}>
+                {issue.latitude.toFixed(6)}, {issue.longitude.toFixed(6)}
+              </Text>
+            </View>
+            
+            <View style={styles.detailRow}>
+              <View style={styles.detailLabelContainer}>
+                <Ionicons name="time" size={16} color={colors.text.secondary} />
+                <Text style={styles.detailLabel}>Reported</Text>
+              </View>
+              <Text style={styles.detailValue}>{formatDate(issue.created_at)}</Text>
+            </View>
+            
+            {issue.is_duplicate ? (
+              <View style={styles.detailRow}>
+                <View style={styles.detailLabelContainer}>
+                  <Ionicons name="link" size={16} color={colors.status.warning} />
+                  <Text style={styles.detailLabel}>Status</Text>
+                </View>
+                <Text style={[styles.detailValue, { color: colors.status.warning }]}>
+                  Linked to existing report
+                </Text>
+              </View>
+            ) : null}
+            
+            {issue.geo_status ? (
+              <View style={styles.detailRow}>
+                <View style={styles.detailLabelContainer}>
+                  <Ionicons name="analytics" size={16} color={colors.text.secondary} />
+                  <Text style={styles.detailLabel}>Geo Status</Text>
+                </View>
+                <Text style={styles.detailValue}>{issue.geo_status}</Text>
+              </View>
+            ) : null}
+          </Card>
+          
+          <View style={styles.timeline}>
+            <Text style={styles.sectionTitle}>Status Timeline</Text>
+            <View style={styles.timelineItem}>
+              <View style={[styles.timelineDot, { backgroundColor: stateInfo.color }]} />
+              <View style={styles.timelineContent}>
+                <Text style={styles.timelineTitle}>{stateInfo.label}</Text>
+                <Text style={styles.timelineDate}>{formatDate(issue.updated_at)}</Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </ScrollView>
+    </LinearGradient>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  loadingContainer: {
+    flex: 1,
+    backgroundColor: colors.background.primary,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  errorContainer: {
+    flex: 1,
+    backgroundColor: colors.background.primary,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: spacing.xl,
+  },
+  errorText: {
+    ...typography.h3,
+    color: colors.text.primary,
+    marginBottom: spacing.xl,
+    marginTop: spacing.lg,
+  },
+  imageContainer: {
+    width: width,
+    height: 300,
+    position: 'relative',
+  },
+  mainImage: {
+    width: '100%',
+    height: '100%',
+  },
+  placeholderImage: {
+    backgroundColor: colors.background.tertiary,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  imageGradient: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 100,
+  },
+  backButton: {
+    position: 'absolute',
+    top: spacing.xxl,
+    left: spacing.lg,
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: 'rgba(255,255,255,0.2)', // Light glass
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.3)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  imageToggle: {
+    position: 'absolute',
+    bottom: spacing.lg,
+    right: spacing.lg,
+    flexDirection: 'row',
+    backgroundColor: 'rgba(0,0,0,0.6)',
+    borderRadius: borderRadius.full,
+    padding: 4,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.1)',
+  },
+  toggleButton: {
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: borderRadius.full,
+  },
+  toggleActive: {
+    backgroundColor: colors.primary.main,
+  },
+  toggleText: {
+    color: colors.text.primary,
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  content: {
+    padding: spacing.lg,
+  },
+  badges: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: spacing.sm,
+    marginBottom: spacing.md,
+  },
+  badge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: borderRadius.full,
+    gap: spacing.xs,
+  },
+  stateBadge: {
+    backgroundColor: 'rgba(255,255,255,0.1)',
+    borderWidth: 1,
+  },
+  badgeText: {
+    color: colors.text.primary,
+    fontSize: 12,
+    fontWeight: '700',
+    letterSpacing: 0.5,
+  },
+  category: {
+    fontSize: 28,
+    fontWeight: '800',
+    color: colors.text.primary,
+    marginBottom: spacing.lg,
+    letterSpacing: -0.5,
+  },
+  confidenceCard: {
+    marginBottom: spacing.md,
+    backgroundColor: 'rgba(255,255,255,0.05)',
+  },
+  confidenceRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: spacing.sm,
+  },
+  confidenceLabel: {
+    fontSize: 14,
+    color: colors.text.secondary,
+    fontWeight: '500',
+  },
+  confidenceValue: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: colors.secondary.main,
+    fontFamily: 'monospace', // Assuming Fira Code availability or fallback
+  },
+  confidenceBar: {
+    height: 6,
+    backgroundColor: 'rgba(255,255,255,0.1)',
+    borderRadius: 3,
+    overflow: 'hidden',
+  },
+  confidenceFill: {
+    height: '100%',
+    backgroundColor: colors.secondary.main,
+    borderRadius: 3,
+  },
+  descriptionCard: {
+    marginBottom: spacing.md,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: colors.text.primary,
+    marginBottom: spacing.md,
+  },
+  description: {
+    fontSize: 15,
+    color: colors.text.secondary,
+    lineHeight: 24,
+  },
+  detailsCard: {
+    marginBottom: spacing.lg,
+  },
+  detailRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(255,255,255,0.05)',
+  },
+  detailLabelContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+  },
+  detailLabel: {
+    fontSize: 14,
+    color: colors.text.secondary,
+    fontWeight: '500',
+  },
+  detailValue: {
+    fontSize: 15,
+    color: colors.text.primary,
+    flex: 1,
+    textAlign: 'right',
+    marginLeft: spacing.md,
+    fontWeight: '600',
+  },
+  timeline: {
+    marginBottom: spacing.xl,
+  },
+  timelineItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  timelineDot: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    marginRight: spacing.md,
+    shadowColor: colors.primary.main, // Glow effect placeholder
+    shadowOpacity: 0.5,
+    shadowRadius: 4,
+  },
+  timelineContent: {
+    flex: 1,
+  },
+  timelineTitle: {
+    fontSize: 16,
+    color: colors.text.primary,
+    fontWeight: '700',
+  },
+  timelineDate: {
+    fontSize: 13,
+    color: colors.text.tertiary,
+    marginTop: 2,
+  },
+});

User/src/screens/issues/MyIssuesScreen.tsx

@@ -0,0 +1,281 @@
+import React, { useEffect, useState, useCallback } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  RefreshControl,
+  TouchableOpacity,
+  ActivityIndicator,
+} from "react-native";
+import { useNavigation, useFocusEffect } from "@react-navigation/native";
+import { LinearGradient } from "expo-linear-gradient";
+import { Ionicons } from "@expo/vector-icons";
+import { Card } from "../../components/ui/Card";
+import { IssueCard } from "../../components/issues/IssueCard";
+import { issueService } from "../../services/issueService";
+import { cacheService } from "../../services/cacheService";
+import { useAuth } from "../../context/AuthContext";
+import { colors, spacing, typography, borderRadius } from "../../theme";
+import { Issue } from "../../types";
+
+const ITEMS_PER_PAGE = 10;
+
+export function MyIssuesScreen() {
+  const navigation = useNavigation<any>();
+  const { user, isDevMode } = useAuth();
+
+  const [issues, setIssues] = useState<Issue[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [filter, setFilter] = useState<string | null>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      loadIssues();
+    }, [filter, user?.id]),
+  );
+
+  const loadIssues = async () => {
+    setLoading(true);
+    await cacheService.clearCache();
+    await fetchIssues(1, true);
+  };
+
+  const fetchIssues = async (pageNum: number, reset: boolean = false) => {
+    try {
+      const response = await issueService.listIssues(
+        pageNum,
+        ITEMS_PER_PAGE,
+        filter || undefined,
+        isDevMode ? undefined : user?.id,
+      );
+
+      const filtered = response.items;
+
+      if (reset) {
+        setIssues(filtered);
+        await cacheService.setIssuesCache(filtered);
+      } else {
+        const newIssues = [...issues, ...filtered];
+        setIssues(newIssues);
+        await cacheService.setIssuesCache(newIssues);
+      }
+
+      setHasMore(response.items.length === ITEMS_PER_PAGE);
+      setPage(pageNum);
+    } catch (error) {
+      console.error("Failed to fetch issues:", error);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  const handleRefresh = () => {
+    setRefreshing(true);
+    fetchIssues(1, true);
+  };
+
+  const handleForceRefresh = async () => {
+    setLoading(true);
+    await cacheService.clearCache();
+    await fetchIssues(1, true);
+  };
+
+  const handleLoadMore = () => {
+    if (hasMore && !loading) {
+      fetchIssues(page + 1);
+    }
+  };
+
+  const handleIssuePress = (issue: Issue) => {
+    navigation.navigate("IssueDetail", { issueId: issue.id });
+  };
+
+  const filters = [
+    { key: null, label: "All" },
+    { key: "reported", label: "Reported" },
+    { key: "assigned", label: "Assigned" },
+    { key: "in_progress", label: "In Progress" },
+    { key: "pending_verification", label: "Review" },
+    { key: "resolved", label: "Resolved" },
+  ];
+
+  const renderHeader = () => (
+    <View style={styles.header}>
+      <TouchableOpacity
+        style={styles.backButton}
+        onPress={() => navigation.goBack()}
+      >
+        <Ionicons name="arrow-back" size={24} color={colors.text.primary} />
+      </TouchableOpacity>
+      <Text style={styles.title}>My Reports</Text>
+      <TouchableOpacity
+        style={styles.refreshButton}
+        onPress={handleForceRefresh}
+      >
+        <Ionicons name="refresh" size={24} color={colors.primary.main} />
+      </TouchableOpacity>
+    </View>
+  );
+
+  const renderFilters = () => (
+    <View style={styles.filters}>
+      {filters.map((f) => (
+        <TouchableOpacity
+          key={f.key || "all"}
+          style={[styles.filterButton, filter === f.key && styles.filterActive]}
+          onPress={() => setFilter(f.key)}
+        >
+          <Text
+            style={[
+              styles.filterText,
+              filter === f.key && styles.filterTextActive,
+            ]}
+          >
+            {f.label}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+
+  const renderEmpty = () => (
+    <Card style={styles.emptyCard}>
+      <Ionicons
+        name="documents-outline"
+        size={48}
+        color={colors.text.tertiary}
+      />
+      <Text style={styles.emptyTitle}>No Reports Found</Text>
+      <Text style={styles.emptyText}>
+        {filter
+          ? "No issues match this filter"
+          : "You haven't reported any issues yet"}
+      </Text>
+    </Card>
+  );
+
+  const renderFooter = () => {
+    if (!hasMore) return null;
+    return (
+      <View style={styles.footer}>
+        <ActivityIndicator size="small" color={colors.primary.main} />
+      </View>
+    );
+  };
+
+  return (
+    <LinearGradient
+      colors={[colors.background.primary, colors.background.secondary]}
+      style={styles.container}
+    >
+      <FlatList
+        data={issues}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <IssueCard issue={item} onPress={() => handleIssuePress(item)} />
+        )}
+        ListHeaderComponent={
+          <>
+            {renderHeader()}
+            {renderFilters()}
+          </>
+        }
+        ListEmptyComponent={!loading ? renderEmpty : null}
+        ListFooterComponent={renderFooter}
+        contentContainerStyle={styles.listContent}
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={handleRefresh}
+            tintColor={colors.primary.main}
+          />
+        }
+        onEndReached={handleLoadMore}
+        onEndReachedThreshold={0.5}
+        showsVerticalScrollIndicator={false}
+      />
+    </LinearGradient>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  listContent: {
+    padding: spacing.lg,
+    paddingTop: spacing.xxl * 2,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: spacing.lg,
+  },
+  backButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: colors.background.tertiary,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  refreshButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: colors.background.tertiary,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  title: {
+    ...typography.h2,
+    color: colors.text.primary,
+  },
+  filters: {
+    flexDirection: "row",
+    marginBottom: spacing.lg,
+    gap: spacing.sm,
+  },
+  filterButton: {
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: borderRadius.full,
+    backgroundColor: colors.background.tertiary,
+  },
+  filterActive: {
+    backgroundColor: colors.primary.main,
+  },
+  filterText: {
+    color: colors.text.secondary,
+    fontSize: 14,
+  },
+  filterTextActive: {
+    color: colors.text.primary,
+    fontWeight: "600",
+  },
+  emptyCard: {
+    alignItems: "center",
+    padding: spacing.xl,
+  },
+  emptyTitle: {
+    ...typography.h3,
+    color: colors.text.primary,
+    marginBottom: spacing.sm,
+    marginTop: spacing.md,
+  },
+  emptyText: {
+    ...typography.body,
+    color: colors.text.secondary,
+    textAlign: "center",
+  },
+  footer: {
+    paddingVertical: spacing.lg,
+    alignItems: "center",
+  },
+});

User/src/screens/profile/ProfileScreen.tsx

@@ -0,0 +1,284 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  TouchableOpacity,
+  Image,
+  Linking,
+} from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Ionicons } from '@expo/vector-icons';
+import { useAuth } from '../../context/AuthContext';
+import { Card } from '../../components/ui/Card';
+import { Button } from '../../components/ui/Button';
+import { colors, spacing, typography, borderRadius } from '../../theme';
+
+export function ProfileScreen() {
+  const { user, signOut } = useAuth();
+
+  const handleSignOut = async () => {
+    try {
+      await signOut();
+    } catch (error) {
+      console.error('Sign out error:', error);
+    }
+  };
+
+  const menuItems: { iconName: keyof typeof Ionicons.glyphMap; label: string; onPress: () => void; value?: string }[] = [
+    { iconName: 'notifications-outline', label: 'Notifications', onPress: () => {} },
+    { iconName: 'moon-outline', label: 'Dark Mode', onPress: () => {}, value: 'On' },
+    { iconName: 'location-outline', label: 'Location Settings', onPress: () => Linking.openSettings() },
+    { iconName: 'help-circle-outline', label: 'Help & Support', onPress: () => {} },
+    { iconName: 'document-text-outline', label: 'Terms of Service', onPress: () => {} },
+    { iconName: 'lock-closed-outline', label: 'Privacy Policy', onPress: () => {} },
+  ];
+
+  return (
+    <LinearGradient
+      colors={[colors.background.primary, colors.background.secondary]}
+      style={styles.container}
+    >
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <View style={styles.header}>
+          <View style={styles.avatarContainer}>
+            {user?.user_metadata?.avatar_url ? (
+              <Image 
+                source={{ uri: user.user_metadata.avatar_url }} 
+                style={styles.avatar}
+              />
+            ) : (
+              <View style={styles.avatarPlaceholder}>
+                <Ionicons name="person" size={48} color={colors.text.tertiary} />
+              </View>
+            )}
+            <View style={styles.verifiedBadge}>
+              <Ionicons name="checkmark" size={14} color={colors.primary.contrast} />
+            </View>
+          </View>
+          
+          <Text style={styles.userName}>
+            {user?.user_metadata?.full_name || 'Citizen'}
+          </Text>
+          <Text style={styles.userEmail}>{user?.email}</Text>
+          
+          <View style={styles.statsRow}>
+            <View style={styles.statItem}>
+              <Text style={styles.statValue}>12</Text>
+              <Text style={styles.statLabel}>Reports</Text>
+            </View>
+            <View style={styles.statDivider} />
+            <View style={styles.statItem}>
+              <Text style={styles.statValue}>8</Text>
+              <Text style={styles.statLabel}>Resolved</Text>
+            </View>
+            <View style={styles.statDivider} />
+            <View style={styles.statItem}>
+              <Text style={styles.statValue}>95%</Text>
+              <Text style={styles.statLabel}>Accuracy</Text>
+            </View>
+          </View>
+        </View>
+        
+        <Card variant="gradient" style={styles.badgeCard}>
+          <View style={styles.badgeCardContent}>
+            <View style={styles.badgeInfo}>
+              <Ionicons name="trophy" size={32} color={colors.status.warning} />
+              <View style={styles.badgeTextContainer}>
+                <Text style={styles.badgeTitle}>Civic Champion</Text>
+                <Text style={styles.badgeSubtitle}>Top 10% contributor in your area</Text>
+              </View>
+            </View>
+          </View>
+        </Card>
+        
+        <View style={styles.menuSection}>
+          <Text style={styles.sectionTitle}>Settings</Text>
+          <Card>
+            {menuItems.map((item, index) => (
+              <TouchableOpacity
+                key={item.label}
+                style={[
+                  styles.menuItem,
+                  index < menuItems.length - 1 && styles.menuItemBorder,
+                ]}
+                onPress={item.onPress}
+              >
+                <View style={styles.menuLeft}>
+                  <Ionicons name={item.iconName} size={20} color={colors.text.secondary} />
+                  <Text style={styles.menuLabel}>{item.label}</Text>
+                </View>
+                <View style={styles.menuRight}>
+                  {item.value ? (
+                    <Text style={styles.menuValue}>{item.value}</Text>
+                  ) : null}
+                  <Ionicons name="chevron-forward" size={16} color={colors.text.tertiary} />
+                </View>
+              </TouchableOpacity>
+            ))}
+          </Card>
+        </View>
+        
+        <View style={styles.signOutSection}>
+          <Button
+            title="Sign Out"
+            variant="outline"
+            onPress={handleSignOut}
+            fullWidth
+          />
+        </View>
+        
+        <Text style={styles.version}>Version 1.0.0</Text>
+      </ScrollView>
+    </LinearGradient>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    alignItems: 'center',
+    paddingTop: spacing.xxl * 2,
+    paddingBottom: spacing.xl,
+  },
+  avatarContainer: {
+    position: 'relative',
+    marginBottom: spacing.lg,
+  },
+  avatar: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    borderWidth: 3,
+    borderColor: colors.primary.main,
+  },
+  avatarPlaceholder: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    backgroundColor: colors.background.tertiary,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 3,
+    borderColor: colors.primary.main,
+  },
+  verifiedBadge: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: colors.secondary.main,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 3,
+    borderColor: colors.background.primary,
+  },
+  userName: {
+    ...typography.h2,
+    color: colors.text.primary,
+  },
+  userEmail: {
+    ...typography.body,
+    color: colors.text.secondary,
+    marginTop: spacing.xs,
+  },
+  statsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: spacing.xl,
+    paddingHorizontal: spacing.xl,
+  },
+  statItem: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  statValue: {
+    ...typography.h2,
+    color: colors.primary.main,
+  },
+  statLabel: {
+    ...typography.caption,
+    color: colors.text.secondary,
+    marginTop: spacing.xs,
+  },
+  statDivider: {
+    width: 1,
+    height: 40,
+    backgroundColor: colors.border.light,
+  },
+  badgeCard: {
+    marginHorizontal: spacing.lg,
+    marginBottom: spacing.xl,
+  },
+  badgeCardContent: {},
+  badgeInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+  },
+  badgeTextContainer: {
+    flex: 1,
+  },
+  badgeTitle: {
+    ...typography.body,
+    color: colors.text.primary,
+    fontWeight: '600',
+  },
+  badgeSubtitle: {
+    ...typography.caption,
+    color: colors.text.secondary,
+    marginTop: 2,
+  },
+  menuSection: {
+    paddingHorizontal: spacing.lg,
+    marginBottom: spacing.xl,
+  },
+  sectionTitle: {
+    ...typography.h3,
+    color: colors.text.primary,
+    marginBottom: spacing.md,
+  },
+  menuItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: spacing.md,
+  },
+  menuItemBorder: {
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border.light,
+  },
+  menuLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+  },
+  menuLabel: {
+    ...typography.body,
+    color: colors.text.primary,
+  },
+  menuRight: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+  },
+  menuValue: {
+    ...typography.body,
+    color: colors.text.secondary,
+  },
+  signOutSection: {
+    paddingHorizontal: spacing.lg,
+    marginBottom: spacing.lg,
+  },
+  version: {
+    ...typography.caption,
+    color: colors.text.tertiary,
+    textAlign: 'center',
+    marginBottom: spacing.xxl,
+  },
+});

User/src/services/cacheService.ts

@@ -0,0 +1,55 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { Issue } from '../types';
+
+const CACHE_KEY = 'ISSUES_CACHE';
+const CACHE_EXPIRY_MS = 5 * 60 * 1000; // 5 minutes
+
+interface CacheData {
+  issues: Issue[];
+  timestamp: number;
+}
+
+export const cacheService = {
+  /**
+   * Retrieves issues from cache.
+   * @param ignoreExpiry If true, returns cached data even if expired (useful for initial render while fetching)
+   */
+  async getIssuesCache(ignoreExpiry = false): Promise<Issue[] | null> {
+    try {
+      const cached = await AsyncStorage.getItem(CACHE_KEY);
+      if (!cached) return null;
+      
+      const data: CacheData = JSON.parse(cached);
+      const isExpired = Date.now() - data.timestamp > CACHE_EXPIRY_MS;
+      
+      if (isExpired && !ignoreExpiry) {
+        // We don't clear here if we want to allow stale retrieval later
+        return null;
+      }
+      
+      return data.issues;
+    } catch {
+      return null;
+    }
+  },
+
+  async setIssuesCache(issues: Issue[]): Promise<void> {
+    try {
+      const data: CacheData = {
+        issues,
+        timestamp: Date.now(),
+      };
+      await AsyncStorage.setItem(CACHE_KEY, JSON.stringify(data));
+    } catch {
+      // Ignore write errors
+    }
+  },
+
+  async clearCache(): Promise<void> {
+    try {
+      await AsyncStorage.removeItem(CACHE_KEY);
+    } catch {
+      // Ignore errors
+    }
+  },
+};

User/src/services/issueService.ts

@@ -0,0 +1,148 @@
+import { API_BASE_URL } from "../config/supabase";
+import { Issue, IssueListResponse, LocationData } from "../types";
+import EventSource, { EventSourceListener } from "react-native-sse";
+import { cacheService } from "./cacheService";
+
+class IssueService {
+  private baseUrl: string;
+
+  constructor() {
+    this.baseUrl = API_BASE_URL;
+  }
+
+  async createIssue(
+    imageUri: string,
+    location: LocationData,
+    description?: string,
+    accessToken?: string,
+  ): Promise<{ issue_id: string; stream_url: string }> {
+    const formData = new FormData();
+
+    const imageFile = {
+      uri: imageUri,
+      type: "image/jpeg",
+      name: "issue_photo.jpg",
+    } as any;
+
+    formData.append("images", imageFile);
+    formData.append("latitude", location.latitude.toString());
+    formData.append("longitude", location.longitude.toString());
+    formData.append("accuracy_meters", location.accuracy.toString());
+    formData.append("platform", "mobile_app");
+    formData.append("device_model", "expo_device");
+
+    if (description) {
+      formData.append("description", description);
+    }
+
+    if (accessToken) {
+      formData.append("authorization", `Bearer ${accessToken}`);
+      console.log("[IssueService] Authorization token appended to form data");
+    } else {
+      console.warn("[IssueService] No access token provided - issue will be created without user_id");
+    }
+
+    const headers: Record<string, string> = {
+      "Content-Type": "multipart/form-data",
+    };
+
+    const response = await fetch(`${this.baseUrl}/issues/stream`, {
+      method: "POST",
+      headers,
+      body: formData,
+    });
+
+    if (!response.ok) {
+      const error = await response.json();
+      throw new Error(error.detail || "Failed to create issue");
+    }
+
+    await cacheService.clearCache();
+
+    return response.json();
+  }
+
+  async getIssue(issueId: string): Promise<Issue> {
+    const response = await fetch(`${this.baseUrl}/issues/${issueId}`);
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch issue");
+    }
+
+    return response.json();
+  }
+
+  async listIssues(
+    page: number = 1,
+    pageSize: number = 20,
+    state?: string,
+    userId?: string,
+  ): Promise<IssueListResponse> {
+    const params = new URLSearchParams({
+      page: page.toString(),
+      page_size: pageSize.toString(),
+    });
+
+    if (state) {
+      params.append("state", state);
+    }
+
+    if (userId) {
+      params.append("user_id", userId);
+    }
+
+    const response = await fetch(`${this.baseUrl}/issues?${params}`);
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch issues");
+    }
+
+    return response.json();
+  }
+
+  async connectToFlowStream(
+    issueId: string,
+    onMessage: (data: any) => void,
+    onError: (error: Error) => void,
+  ): Promise<() => void> {
+    const eventSource = new EventSource(`${this.baseUrl}/flow/flow/${issueId}`);
+
+    const listener: EventSourceListener = (event) => {
+      if (event.type === "message") {
+        try {
+          const data = JSON.parse(event.data || "{}");
+          onMessage(data);
+        } catch (e) {
+          console.error("Failed to parse SSE message:", e);
+        }
+      } else if (event.type === "error") {
+        onError(new Error("SSE connection error"));
+      }
+    };
+
+    eventSource.addEventListener("message", listener);
+    eventSource.addEventListener("error", listener);
+
+    return () => {
+      eventSource.removeAllEventListeners();
+      eventSource.close();
+    };
+  }
+  async confirmIssue(issueId: string, confirmed: boolean): Promise<Issue> {
+    const response = await fetch(`${this.baseUrl}/issues/${issueId}/confirm`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ confirmed }),
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to confirm issue");
+    }
+
+    return response.json();
+  }
+}
+
+export const issueService = new IssueService();

User/src/services/locationService.ts

@@ -0,0 +1,145 @@
+import * as Location from 'expo-location';
+import { Linking, Alert, Platform } from 'react-native';
+import { LocationData } from '../types';
+
+export async function checkLocationServicesEnabled(): Promise<boolean> {
+  const enabled = await Location.hasServicesEnabledAsync();
+  return enabled;
+}
+
+export async function requestLocationPermission(): Promise<boolean> {
+  const { status } = await Location.requestForegroundPermissionsAsync();
+  return status === 'granted';
+}
+
+export async function ensureLocationEnabled(): Promise<{ enabled: boolean; permission: boolean }> {
+  const enabled = await checkLocationServicesEnabled();
+  
+  if (!enabled) {
+    return { enabled: false, permission: false };
+  }
+  
+  const permission = await requestLocationPermission();
+  return { enabled: true, permission };
+}
+
+export async function promptEnableLocation(): Promise<void> {
+  Alert.alert(
+    'Location Required',
+    'GPS must be enabled to report issues. This ensures accurate location data and prevents fraudulent reports.',
+    [
+      { text: 'Cancel', style: 'cancel' },
+      { 
+        text: 'Open Settings', 
+        onPress: () => {
+          if (Platform.OS === 'ios') {
+            Linking.openURL('app-settings:');
+          } else {
+            Linking.openSettings();
+          }
+        }
+      },
+    ]
+  );
+}
+
+export async function getCurrentLocation(
+  minAccuracy: number = 20,
+  timeout: number = 30000
+): Promise<LocationData> {
+  const startTime = Date.now();
+  
+  while (Date.now() - startTime < timeout) {
+    const location = await Location.getCurrentPositionAsync({
+      accuracy: Location.Accuracy.BestForNavigation,
+    });
+
+    if (location.coords.accuracy !== null && location.coords.accuracy <= minAccuracy) {
+      return {
+        latitude: location.coords.latitude,
+        longitude: location.coords.longitude,
+        accuracy: location.coords.accuracy,
+        heading: location.coords.heading ?? undefined,
+        altitude: location.coords.altitude ?? undefined,
+      };
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+  }
+
+  const location = await Location.getCurrentPositionAsync({
+    accuracy: Location.Accuracy.High,
+  });
+
+  return {
+    latitude: location.coords.latitude,
+    longitude: location.coords.longitude,
+    accuracy: location.coords.accuracy ?? 999,
+    heading: location.coords.heading ?? undefined,
+    altitude: location.coords.altitude ?? undefined,
+  };
+}
+
+export function isLocationAccurate(accuracy: number, threshold: number = 15): boolean {
+  return accuracy <= threshold;
+}
+
+export async function watchLocationWithGpsCheck(
+  onLocationUpdate: (location: LocationData) => void,
+  onGpsStatusChange: (enabled: boolean) => void,
+  accuracyThreshold: number = 15
+): Promise<() => void> {
+  let subscription: Location.LocationSubscription | null = null;
+  let gpsCheckInterval: ReturnType<typeof setInterval> | null = null;
+  
+  const checkGpsAndStart = async () => {
+    const enabled = await checkLocationServicesEnabled();
+    onGpsStatusChange(enabled);
+    
+    if (enabled && !subscription) {
+      subscription = await Location.watchPositionAsync(
+        {
+          accuracy: Location.Accuracy.BestForNavigation,
+          timeInterval: 1000,
+          distanceInterval: 1,
+        },
+        (newLocation) => {
+          const accuracy = newLocation.coords.accuracy ?? 999;
+          onLocationUpdate({
+            latitude: newLocation.coords.latitude,
+            longitude: newLocation.coords.longitude,
+            accuracy: accuracy,
+            heading: newLocation.coords.heading ?? undefined,
+            altitude: newLocation.coords.altitude ?? undefined,
+          });
+        }
+      );
+    } else if (!enabled && subscription) {
+      subscription.remove();
+      subscription = null;
+    }
+  };
+  
+  await checkGpsAndStart();
+  
+  gpsCheckInterval = setInterval(async () => {
+    const enabled = await checkLocationServicesEnabled();
+    onGpsStatusChange(enabled);
+    
+    if (!enabled && subscription) {
+      subscription.remove();
+      subscription = null;
+    } else if (enabled && !subscription) {
+      await checkGpsAndStart();
+    }
+  }, 3000);
+  
+  return () => {
+    if (subscription) {
+      subscription.remove();
+    }
+    if (gpsCheckInterval) {
+      clearInterval(gpsCheckInterval);
+    }
+  };
+}

User/src/theme/index.ts

@@ -0,0 +1,141 @@
+export const colors = {
+  primary: {
+    main: "#3B82F6",
+    light: "#60A5FA",
+    dark: "#2563EB",
+    contrast: "#FFFFFF",
+  },
+  secondary: {
+    main: "#60A5FA",
+    light: "#93C5FD",
+    dark: "#3B82F6",
+    contrast: "#FFFFFF",
+  },
+  accent: {
+    cta: "#F97316",
+    orange: "#F97316",
+    pink: "#EC4899",
+    cyan: "#06B6D4",
+    purple: "#8B5CF6",
+  },
+  background: {
+    primary: "#F1F5F9", // Slate 100
+    secondary: "#E2E8F0", // Slate 200 (Darker for contrast)
+    tertiary: "#CBD5E1", // Slate 300
+    card: "#FFFFFF",
+    gradient: ["#F8FAFC", "#E2E8F0"] as const,
+  },
+  text: {
+    primary: "#1E293B",
+    secondary: "#475569",
+    tertiary: "#94A3B8",
+    inverse: "#FFFFFF",
+  },
+  border: {
+    light: "#E2E8F0",
+    medium: "#CBD5E1",
+    accent: "rgba(59, 130, 246, 0.3)",
+  },
+  status: {
+    success: "#10B981",
+    warning: "#F59E0B",
+    error: "#EF4444",
+    info: "#3B82F6",
+  },
+  priority: {
+    critical: "#EF4444",
+    high: "#F97316",
+    medium: "#F59E0B",
+    low: "#10B981",
+  },
+  glass: {
+    background: "rgba(255, 255, 255, 0.7)",
+    border: "rgba(255, 255, 255, 0.5)",
+  },
+};
+
+export const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 48,
+};
+
+export const borderRadius = {
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  full: 9999,
+};
+
+export const typography = {
+  h1: {
+    fontSize: 32,
+    fontWeight: "700" as const,
+    lineHeight: 40,
+  },
+  h2: {
+    fontSize: 24,
+    fontWeight: "600" as const,
+    lineHeight: 32,
+  },
+  h3: {
+    fontSize: 20,
+    fontWeight: "600" as const,
+    lineHeight: 28,
+  },
+  body: {
+    fontSize: 16,
+    fontWeight: "400" as const,
+    lineHeight: 24,
+  },
+  bodySmall: {
+    fontSize: 14,
+    fontWeight: "400" as const,
+    lineHeight: 20,
+  },
+  caption: {
+    fontSize: 12,
+    fontWeight: "400" as const,
+    lineHeight: 16,
+  },
+  button: {
+    fontSize: 16,
+    fontWeight: "600" as const,
+    lineHeight: 24,
+  },
+};
+
+export const shadows = {
+  sm: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  md: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  lg: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.2,
+    shadowRadius: 16,
+    elevation: 8,
+  },
+  glow: {
+    shadowColor: "#6366F1",
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.4,
+    shadowRadius: 20,
+    elevation: 10,
+  },
+};

User/src/types/index.ts

@@ -0,0 +1,60 @@
+export interface User {
+  id: string;
+  email: string;
+  name?: string;
+  avatar_url?: string;
+}
+
+export interface Issue {
+  id: string;
+  description?: string;
+  latitude: number;
+  longitude: number;
+  state: IssueState;
+  priority?: number;
+  category?: string;
+  confidence?: number;
+  image_urls: string[];
+  annotated_urls: string[];
+  validation_source?: string;
+  is_duplicate: boolean;
+  parent_issue_id?: string;
+  geo_status?: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export type IssueState = 'reported' | 'validated' | 'assigned' | 'in_progress' | 'resolved' | 'closed' | 'rejected' | 'pending_confirmation';
+
+export interface CreateIssuePayload {
+  images: File[];
+  description?: string;
+  latitude: number;
+  longitude: number;
+  accuracy_meters?: number;
+  platform: string;
+  device_model?: string;
+}
+
+export interface IssueListResponse {
+  items: Issue[];
+  total: number;
+  page: number;
+  page_size: number;
+}
+
+export interface LocationData {
+  latitude: number;
+  longitude: number;
+  accuracy: number;
+  heading?: number;
+  altitude?: number;
+}
+
+export interface FlowStep {
+  name: string;
+  status: 'pending' | 'running' | 'done' | 'error';
+  decision?: string;
+  reasoning?: string;
+  timestamp?: string;
+}

User/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  }
+}