Add beenvoice mobile companion app with full dark mode support.

Expo app with dashboard, time clock, invoices, and settings — native tabs, glass UI, theme-aware components, and iOS Live Activities. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-17 22:36:37 -04:00
parent 8a7a8df477
commit 14c880123c
93 changed files with 8849 additions and 7849 deletions
@@ -0,0 +1,179 @@
+import { Link, router } from "expo-router";
+import { useState } from "react";
+import {
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
+import { AuthBackground } from "@/components/AppBackground";
+import { CollapsibleServerField } from "@/components/CollapsibleServerField";
+import { HeadingText, Logo } from "@/components/Logo";
+import { FullScreen } from "@/components/Screen";
+import { Button } from "@/components/ui/Button";
+import { Card } from "@/components/ui/Card";
+import { Input } from "@/components/ui/Input";
+import { fonts, spacing } from "@/constants/theme";
+import { useAccounts } from "@/contexts/AccountsContext";
+import { useAuthClient } from "@/contexts/AuthContext";
+import { useAppTheme } from "@/contexts/ThemeContext";
+
+export default function SignInScreen() {
+  const authClient = useAuthClient();
+  const { apiUrl, registerAccount } = useAccounts();
+  const { colors } = useAppTheme();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSignIn() {
+    setError(null);
+    setLoading(true);
+
+    const { error: signInError } = await authClient.signIn.email({ email: email.trim(), password });
+
+    if (signInError) {
+      setLoading(false);
+      const message = signInError.message ?? "";
+      if (message.toLowerCase().includes("internal") || message.includes("500")) {
+        setError("Server error — is the API running with Postgres? Check beenvoice dev + docker.");
+      } else {
+        setError(message || "Invalid email or password");
+      }
+      return;
+    }
+
+    const session = await authClient.getSession();
+    const user = session.data?.user;
+    if (user) {
+      await registerAccount({
+        instanceUrl: apiUrl,
+        userId: user.id,
+        email: user.email,
+        name: user.name,
+      });
+    }
+
+    setLoading(false);
+    router.replace("/(app)");
+  }
+
+  return (
+    <AuthBackground>
+      <FullScreen style={styles.safe}>
+        <KeyboardAvoidingView
+          behavior={Platform.OS === "ios" ? "padding" : undefined}
+          style={styles.flex}
+        >
+          <ScrollView
+            contentContainerStyle={styles.container}
+            keyboardShouldPersistTaps="handled"
+          >
+            <Card style={styles.card}>
+              <View style={styles.header}>
+                <Logo size="lg" />
+                <HeadingText style={styles.title}>Welcome back</HeadingText>
+                <Text style={[styles.subtitle, { color: colors.mutedForeground }]}>
+                  Sign in to manage invoices on the go
+                </Text>
+              </View>
+
+              <View style={styles.form}>
+                <Input
+                  label="Email"
+                  autoCapitalize="none"
+                  autoComplete="email"
+                  keyboardType="email-address"
+                  value={email}
+                  onChangeText={setEmail}
+                  placeholder="you@example.com"
+                />
+                <Input
+                  label="Password"
+                  secureTextEntry
+                  autoComplete="password"
+                  value={password}
+                  onChangeText={setPassword}
+                  placeholder="••••••••"
+                />
+
+                <Pressable onPress={() => router.push("/(auth)/forgot-password")}>
+                  <Text style={[styles.forgot, { color: colors.mutedForeground }]}>
+                    Forgot password?
+                  </Text>
+                </Pressable>
+
+                {error ? (
+                  <Text style={[styles.error, { color: colors.destructive }]}>{error}</Text>
+                ) : null}
+
+                <Button title="Sign In" loading={loading} onPress={handleSignIn} />
+              </View>
+
+              <Text style={[styles.footer, { color: colors.mutedForeground }]}>
+                Don&apos;t have an account?{" "}
+                <Link href="/(auth)/register" style={[styles.link, { color: colors.foreground }]}>
+                  Create one
+                </Link>
+              </Text>
+            </Card>
+          </ScrollView>
+        </KeyboardAvoidingView>
+        <CollapsibleServerField />
+      </FullScreen>
+    </AuthBackground>
+  );
+}
+
+const styles = StyleSheet.create({
+  safe: {
+    flex: 1,
+  },
+  flex: {
+    flex: 1,
+  },
+  container: {
+    flexGrow: 1,
+    justifyContent: "center",
+    padding: spacing.lg,
+    paddingBottom: spacing.md,
+  },
+  card: {
+    gap: spacing.lg,
+  },
+  header: {
+    gap: spacing.sm,
+  },
+  title: {
+    fontSize: 24,
+    marginTop: spacing.sm,
+  },
+  subtitle: {
+    fontSize: 14,
+    fontFamily: fonts.body,
+  },
+  form: {
+    gap: spacing.md,
+  },
+  forgot: {
+    alignSelf: "flex-end",
+    fontFamily: fonts.bodyMedium,
+    fontSize: 12,
+  },
+  error: {
+    fontSize: 14,
+    fontFamily: fonts.body,
+  },
+  footer: {
+    textAlign: "center",
+    fontSize: 14,
+    fontFamily: fonts.body,
+  },
+  link: {
+    fontFamily: fonts.bodySemiBold,
+  },
+});