# Makima Mobile

A React Native mobile application for Makima, built with Expo and expo-router.

## Overview

This mobile app allows users to:
- View and manage tasks created from contracts
- Monitor task progress in real-time
- Answer pending questions from running tasks
- Track task status (running, completed, failed, blocked)
- Authenticate via Supabase

## Prerequisites

- Node.js 18+
- npm or yarn
- Expo CLI (`npm install -g expo-cli`)
- iOS Simulator (macOS) or Android Emulator
- Expo Go app (for physical device testing)

## Getting Started

### 1. Install dependencies

```bash
npm install
```

### 2. Set up environment variables

Copy the example environment file and fill in your values:

```bash
cp .env.example .env
```

Edit `.env` with your actual credentials:

```env
EXPO_PUBLIC_SUPABASE_URL=https://ynxyjytytmfwxjqxljzm.supabase.co
EXPO_PUBLIC_SUPABASE_ANON_KEY=your_actual_anon_key
EXPO_PUBLIC_API_URL=https://api.makima.jp
```

### 3. Start the development server

```bash
npm start
```

This will open the Expo Dev Tools in your browser.

## Available Commands

| Command | Description |
|---------|-------------|
| `npm start` | Start the Expo development server |
| `npm run ios` | Start on iOS simulator |
| `npm run android` | Start on Android emulator |
| `npm run web` | Start web version |
| `npm run lint` | Run ESLint |
| `npm run typecheck` | Run TypeScript type checking |

## Project Structure

```
apps/mobile/
├── app/                    # Expo Router screens
│   ├── (auth)/            # Authentication screens
│   │   ├── _layout.tsx    # Auth layout
│   │   └── login.tsx      # Login screen
│   ├── (tabs)/            # Tab navigation screens
│   │   ├── _layout.tsx    # Tab layout
│   │   ├── index.tsx      # Dashboard
│   │   ├── tasks.tsx      # Task list
│   │   └── settings.tsx   # Settings
│   ├── task/              # Task detail screens
│   │   ├── _layout.tsx    # Task layout
│   │   └── [id].tsx       # Task detail by ID
│   └── _layout.tsx        # Root layout
├── components/            # Reusable components
├── constants/             # App constants (colors, etc.)
├── contexts/              # React contexts
├── hooks/                 # Custom React hooks
├── lib/                   # Utility libraries
│   ├── api.ts            # API client
│   ├── auth.ts           # Auth utilities
│   ├── config.ts         # App configuration
│   └── supabase.ts       # Supabase client
└── stores/               # Zustand stores
```

## Features

### Authentication
- Email/password sign-in via Supabase
- Secure token storage using expo-secure-store
- Automatic session refresh

### Dashboard
- Overview of running tasks
- Pending questions alert
- Quick access to tasks needing attention
- Task counts by status

### Tasks
- List all tasks with status filtering
- Search tasks by name
- Pull-to-refresh
- Navigate to task details

### Task Details
- View task status and progress
- See subtasks
- View error messages if failed
- Task metadata (created, started, completed times)

### Settings
- Sign out functionality
- Environment indicator
- Links to support/legal pages

## Technology Stack

- **Framework**: React Native with Expo
- **Navigation**: expo-router (file-based routing)
- **State Management**: Zustand
- **Data Fetching**: TanStack React Query
- **Auth**: Supabase Auth
- **Styling**: React Native StyleSheet
- **Icons**: @expo/vector-icons (Ionicons)

## Development Notes

### Environment Configuration

The app automatically detects development vs production mode:
- In development on iOS: Uses `localhost:8080`
- In development on Android: Uses `10.0.2.2:8080` (Android emulator's host)
- In production: Uses `https://api.makima.jp`

You can override this by setting `EXPO_PUBLIC_API_URL`.

### TypeScript

Run type checking before committing:

```bash
npm run typecheck
```

### Building for Production

Export for all platforms:

```bash
npx expo export --platform all
```

## License

MIT