|
1 | | -<div align="center"> |
2 | | - <img src="assets/logo.png" alt="WorkLog Logo" width="200"/> |
3 | | -</div> |
| 1 | +# WorkLog Mobile |
4 | 2 |
|
5 | | -A cross-platform **time & project management** app for small teams (≤ ~50 workers) built with **Expo + React Native**. |
6 | | -WorkLog lets **employers** create projects and track their own shifts, while **workers** clock in/out with location verification. Data is stored locally for MVP; cloud sync can be added later. |
7 | | - |
8 | | -## ✨ Features |
9 | | - |
10 | | -### Worker |
11 | | -- **Login with Employee Number + Password** |
12 | | - - First-time registration via *“Initial Registration”* (Full Name, Israeli ID, Employer Number + chosen password). |
13 | | - - “Forgot Password” resets to the worker’s **ID number**. |
14 | | -- **Time Clock** |
15 | | - - Clock **in/out** with GPS validation: within a configured radius of the job site. |
16 | | - - Shows live elapsed time; saves start time, end time, and **human-readable address** (street + city). |
17 | | -- **Personal Info / History** |
18 | | - - Month/Year selector to view past shifts. |
19 | | - - Monthly total hours + list of shifts: `[Date, Duration, Location]`. |
20 | | - |
21 | | -### Employer |
22 | | -- **Employer Login** (Employer Number + Password) & **Initial Registration** (company name + password). |
23 | | -- **Employer Home** with side menu (open/close): |
24 | | - - **Time Clock** for employer (with seconds HH:MM:SS). |
25 | | - - **Personal Info**: month/year selector + monthly total + shift list. |
26 | | - - **My Workers**: list of all workers (sorted by oldest → newest), showing **total hours (all time)** per worker. |
27 | | - - **My Projects**: |
28 | | - - Create a project with **Name** + **Location**. |
29 | | - - See project list with creation date, open a project details page. |
30 | | - - Project page: **Add Media** (camera, gallery, file), view media list, select & **delete** media. |
31 | | - |
32 | | -> Logo is shown from `assets/logo.png` anywhere the app name would normally appear. |
33 | | -
|
34 | | ---- |
35 | | - |
36 | | -## 🧱 Tech Stack |
37 | | - |
38 | | -- **React Native** (Expo) |
39 | | -- **expo-router** (navigation) |
40 | | -- **AsyncStorage** (local storage for MVP) |
41 | | -- **expo-location** (GPS + reverse geocoding) |
42 | | -- **expo-image-picker** (camera + gallery) |
43 | | -- **expo-document-picker** (file picker) |
44 | | - |
45 | | ---- |
46 | | - |
47 | | -## 📂 Project Structure (high level) |
48 | | - |
49 | | -``` |
50 | | -app/ |
51 | | - _layout.tsx |
52 | | - auth.tsx # Worker login + initial registration |
53 | | - employer-auth.tsx # Employer login + initial registration |
54 | | - employer-home.tsx # Employer dashboard + side menu & sections |
55 | | - employer-project.tsx # Project details + media management |
56 | | - clock.tsx # Worker’s time clock (existing) |
57 | | - profile.tsx # Worker’s personal info w/ month-year filter |
58 | | -assets/ |
59 | | - logo.png # App logo used in headers |
60 | | -src/ |
61 | | - lib/ |
62 | | - storage.ts # Employers, Workers, Punches, Projects, Media (AsyncStorage) |
63 | | - location.ts # Location helpers, reverse geocode, distance |
64 | | -``` |
65 | | - |
66 | | ---- |
67 | | - |
68 | | -## ⚙️ Setup |
69 | | - |
70 | | -```bash |
71 | | -# 1) Install dependencies |
72 | | -npm install |
73 | | - |
74 | | -# 2) Make sure required Expo libs are installed |
75 | | -npx expo install expo-location expo-image-picker expo-document-picker @react-native-async-storage/async-storage |
76 | | - |
77 | | -# 3) Start the app |
78 | | -npx expo start |
79 | | -``` |
80 | | - |
81 | | -### App config (already included) |
82 | | -`app.json` includes camera/photo/library/location permissions and `"expo-image-picker"` plugin. |
83 | | - |
84 | | ---- |
85 | | - |
86 | | -## 📍 Location Rules (MVP) |
87 | | - |
88 | | -- Clock in/out is allowed **only** within a configured radius of the job site. |
89 | | -- Constants (in `app/employer-home.tsx` and `app/clock.tsx`): |
90 | | - ```ts |
91 | | - const SITE_LAT = 32.1105; |
92 | | - const SITE_LNG = 34.9845; |
93 | | - const RADIUS_M = 4000; // 4km for testing |
94 | | - const ACCURACY_MAX = 75; // meters |
95 | | - ``` |
96 | | -- Reverse geocoding displays **street, city** when available. |
97 | | - |
98 | | -> Adjust these values for your real site coordinates and radius. |
| 3 | +📱 Cross-platform mobile app (React Native + Expo) for employers and workers to track work hours, projects, and attendance. |
| 4 | +Backend powered by **Supabase**. |
| 5 | +Supports **offline mode**, **local storage with AsyncStorage**, and **media saved locally in the app sandbox**. |
99 | 6 |
|
100 | 7 | --- |
101 | 8 |
|
102 | | -## 🔐 Auth & Data (MVP notes) |
103 | | - |
104 | | -- **Local-only** storage (AsyncStorage). No server or cloud sync yet. |
105 | | -- Worker passwords are plain text (MVP!) → should be replaced with proper auth in production. |
106 | | -- Employer/Worker numbers are generated locally and unique per device. |
| 9 | +## ✨ Features |
107 | 10 |
|
108 | | ---- |
| 11 | +- **Employer & Worker accounts** |
| 12 | + - Secure login & password management |
| 13 | + - Unique IDs per user (no duplicate employers/workers allowed) ✅ |
109 | 14 |
|
110 | | -## 🧭 Worker Flow |
| 15 | +- **Attendance clock** |
| 16 | + - Punch **in/out** with real GPS validation (haversine distance check, accuracy filter) |
| 17 | + - Shift duration tracking in real time |
| 18 | + - Offline punches are queued and synced later |
111 | 19 |
|
112 | | -1. Open the app → Worker login screen. |
113 | | -2. If first time, tap **“Initial Registration”**: |
114 | | - - Enter Full Name, Israeli ID, Employer Number, choose a Password. |
115 | | - - You’ll receive your **Employee Number** (also shown in your profile). |
116 | | -3. Log in with **Employee Number + Password**. |
117 | | -4. Use the **Clock** to start/finish the shift. |
118 | | - Your **Personal Info** shows monthly totals and shift history. |
| 20 | +- **Projects** |
| 21 | + - Employers can create and manage projects |
| 22 | + - Projects stored in Supabase (with local fallback) |
| 23 | + - Media (photos, videos, files) saved locally per project |
119 | 24 |
|
120 | | ---- |
| 25 | +- **Workers** |
| 26 | + - Employers can see all workers and their total hours |
| 27 | + - Sorted by seniority |
121 | 28 |
|
122 | | -## 🧭 Employer Flow |
| 29 | +- **Personal totals** |
| 30 | + - Monthly summary per employer |
| 31 | + - Worker total hours across all time |
123 | 32 |
|
124 | | -1. Go to **Employer Login** (top-right on worker login screen). |
125 | | -2. Either log in or do **“Initial Registration”** (company + password). |
126 | | -3. In **Employer Home**, use side menu: |
127 | | - - **Clock** (employer) |
128 | | - - **Personal Info** (month/year) |
129 | | - - **My Workers** (total hours per worker, all time) |
130 | | - - **My Projects** (create + open projects) |
131 | | -4. In **Project page**: |
132 | | - - **Add Media**: pick **Camera / Gallery / File** |
133 | | - - See media list and delete selected items. |
| 33 | +- **Dark mode support** |
| 34 | + - Auto-adapted using `useColorScheme` |
| 35 | + - Panels and text styled for light/dark themes |
134 | 36 |
|
135 | | ---- |
136 | | - |
137 | | -## 🧭 Roadmap (Next steps) |
138 | | - |
139 | | -- **Cloud backend**: Supabase/Postgres with RLS or Firebase for: |
140 | | - - Employers, Workers, Projects, Media, Punches (with sync). |
141 | | -- **Auth**: Proper authentication, passwords hashing, sessions/JWT. |
142 | | -- **Multiple job sites** & per-project geofencing. |
143 | | -- **Offline sync** + conflict resolution. |
144 | | -- **Payroll exports** (CSV/Excel/PDF) & configurable pay rules. |
145 | | -- **Project media**: thumbnails, previews, full-screen viewer, tagging, comments. |
146 | | -- **Roles & permissions** (owner, manager, worker). |
147 | | -- **Push notifications** (reminders, shift confirmations). |
148 | | -- **Analytics & dashboards** (per project/worker/month). |
149 | | -- **Localization** (EN/HE), **Accessibility**, **Dark mode** polish. |
150 | | -- **Testing** (unit/E2E) + **CI/CD** (EAS Build, automatic releases). |
| 37 | +- **Bigger app logo** |
| 38 | + - Central reusable component `WLLogo` in `components/` |
| 39 | + - Easy to resize globally or per screen |
151 | 40 |
|
152 | 41 | --- |
153 | 42 |
|
154 | | -## 🐛 Troubleshooting |
| 43 | +## 🏗️ Tech Stack |
155 | 44 |
|
156 | | -- **VirtualizedLists inside ScrollView warning** |
157 | | - Fixed by rendering each list inside its own `FlatList` + `ListHeaderComponent` (no `ScrollView` wrapping lists). |
158 | | -- **Location denied** |
159 | | - Ensure you accepted permissions and you’re within `RADIUS_M` meters of `SITE_LAT/LNG`. |
160 | | -- **Media pickers** |
161 | | - Accept camera/photo/files permissions when prompted. |
| 45 | +- [Expo](https://expo.dev) (React Native runtime) |
| 46 | +- [expo-router](https://expo.github.io/router/docs) |
| 47 | +- [Supabase](https://supabase.com) (Postgres + auth + API) |
| 48 | +- AsyncStorage for offline/local data |
| 49 | +- Jest + jest-expo for testing |
| 50 | +- TypeScript for type safety |
162 | 51 |
|
163 | 52 | --- |
164 | 53 |
|
165 | | -## 🤝 Contributing |
166 | | - |
167 | | -PRs and discussions are welcome! For now this is an MVP; guidelines will be added after backend integration. |
| 54 | +## 🔑 Environment Variables |
168 | 55 |
|
169 | | ---- |
| 56 | +All secrets are **kept outside the repo**. |
| 57 | +Create `.env` files (or use EAS Secrets in CI/CD): |
170 | 58 |
|
171 | | -## 🛡️ License |
| 59 | +```env |
| 60 | +EXPO_PUBLIC_SUPABASE_URL="https://xxxx.supabase.co" |
| 61 | +EXPO_PUBLIC_SUPABASE_ANON_KEY="your-anon-key" |
172 | 62 |
|
173 | | -TBD (recommend MIT). Add a `LICENSE` file if you want open-source. |
| 63 | +# For CI tests only (not bundled into the app) |
| 64 | +SUPABASE_SERVICE_ROLE_KEY="service-role-key" |
0 commit comments