admin dashboard and mobile app shell

apps/mobile/app/(app)/(tabs)/_layout.tsx

@@ -0,0 +1,16 @@
+import { Tabs } from 'expo-router';
+
+export default function TabsLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: '#1f4d3f',
+      }}
+    >
+      <Tabs.Screen name="index" options={{ title: 'Home' }} />
+      <Tabs.Screen name="reports" options={{ title: 'Reports' }} />
+      <Tabs.Screen name="settings" options={{ title: 'Settings' }} />
+    </Tabs>
+  );
+}

apps/mobile/app/(app)/(tabs)/index.tsx

@@ -0,0 +1,55 @@
+import { Link } from 'expo-router';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default function HomeScreen() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.eyebrow}>Mobile Foundation</Text>
+      <Text style={styles.title}>Signed-in app shell.</Text>
+      <Text style={styles.copy}>
+        Tabs, routing, environment-aware API helpers, and session context are in place for
+        report and auth flows.
+      </Text>
+      <Link href="/(app)/(tabs)/reports" style={styles.secondaryButton}>
+        Open reports tab
+      </Link>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    padding: 24,
+    backgroundColor: '#fffaf2',
+  },
+  eyebrow: {
+    textTransform: 'uppercase',
+    letterSpacing: 2,
+    color: '#2f5d50',
+    marginBottom: 12,
+    fontWeight: '700',
+  },
+  title: {
+    fontSize: 34,
+    fontWeight: '700',
+    color: '#112219',
+  },
+  copy: {
+    marginTop: 16,
+    color: '#405149',
+    lineHeight: 22,
+  },
+  secondaryButton: {
+    marginTop: 24,
+    borderColor: '#d9d0bf',
+    borderWidth: 1,
+    color: '#112219',
+    paddingHorizontal: 18,
+    paddingVertical: 14,
+    borderRadius: 999,
+    overflow: 'hidden',
+    fontWeight: '700',
+  },
+});

apps/mobile/app/(app)/(tabs)/reports.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+export default function ReportsPlaceholderScreen() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Reports tab placeholder</Text>
+      <Text style={styles.copy}>
+        This tab is reserved for mobile report submission and history screens in the next
+        issue batches.
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    padding: 24,
+    backgroundColor: '#fff',
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '700',
+    color: '#112219',
+  },
+  copy: {
+    marginTop: 12,
+    color: '#51615a',
+    lineHeight: 22,
+  },
+});

apps/mobile/app/(app)/(tabs)/settings.tsx

@@ -0,0 +1,38 @@
+import { Link } from 'expo-router';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default function SettingsPlaceholderScreen() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Settings placeholder</Text>
+      <Text style={styles.copy}>Session controls and profile settings will land here.</Text>
+      <Link href="/(auth)/login" style={styles.link}>
+        Return to auth shell
+      </Link>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    padding: 24,
+    backgroundColor: '#fff',
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '700',
+    color: '#112219',
+  },
+  copy: {
+    marginTop: 12,
+    color: '#51615a',
+    lineHeight: 22,
+  },
+  link: {
+    marginTop: 20,
+    color: '#1f4d3f',
+    fontWeight: '700',
+  },
+});

apps/mobile/app/(app)/_layout.tsx

@@ -0,0 +1,11 @@
+import { Stack } from 'expo-router';
+
+export default function AppLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+      }}
+    />
+  );
+}

apps/mobile/app/(auth)/_layout.tsx

@@ -0,0 +1,11 @@
+import { Stack } from 'expo-router';
+
+export default function AuthLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+      }}
+    />
+  );
+}

apps/mobile/app/(auth)/login.tsx

@@ -0,0 +1,53 @@
+import { Link } from 'expo-router';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default function LoginScreen() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.eyebrow}>Sidewalk Mobile</Text>
+      <Text style={styles.title}>Auth shell ready.</Text>
+      <Text style={styles.copy}>
+        This route is the foundation for OTP login and session restore in the next issue batch.
+      </Text>
+      <Link href="/(app)/(tabs)" style={styles.primaryButton}>
+        Continue to app shell
+      </Link>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    padding: 24,
+    backgroundColor: '#f4efe6',
+  },
+  eyebrow: {
+    textTransform: 'uppercase',
+    letterSpacing: 2,
+    color: '#2f5d50',
+    marginBottom: 12,
+    fontWeight: '700',
+  },
+  title: {
+    fontSize: 36,
+    fontWeight: '700',
+    color: '#112219',
+  },
+  copy: {
+    marginTop: 16,
+    color: '#405149',
+    lineHeight: 22,
+  },
+  primaryButton: {
+    marginTop: 28,
+    backgroundColor: '#1f4d3f',
+    color: '#f8fff8',
+    paddingHorizontal: 18,
+    paddingVertical: 14,
+    borderRadius: 999,
+    overflow: 'hidden',
+    fontWeight: '700',
+  },
+});

apps/mobile/app/_layout.tsx

@@ -1,5 +1,14 @@
-import { Stack } from "expo-router";
+import { Stack } from 'expo-router';
+import { SessionProvider } from './providers/session-provider';
 
 export default function RootLayout() {
-  return <Stack />;
+  return (
+    <SessionProvider>
+      <Stack
+        screenOptions={{
+          headerShown: false,
+        }}
+      />
+    </SessionProvider>
+  );
 }

apps/mobile/app/index.tsx

@@ -42,22 +42,3 @@ export default function App() {
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 20,
-  },
-  status: {
-    fontSize: 16,
-    textAlign: 'center',
-    color: '#333',
-  },
-});

apps/mobile/app/lib/api.ts

@@ -0,0 +1,19 @@
+import Constants from 'expo-constants';
+
+const configuredUrl =
+  Constants.expoConfig?.extra?.apiBaseUrl ??
+  process.env.EXPO_PUBLIC_API_BASE_URL ??
+  'http://localhost:5001';
+
+export const apiBaseUrl = configuredUrl.replace(/\/+$/, '');
+
+export const apiFetch = async <T>(path: string, init?: RequestInit): Promise<T> => {
+  const response = await fetch(`${apiBaseUrl}${path}`, init);
+  const payload = (await response.json()) as T & { error?: { message?: string } };
+
+  if (!response.ok) {
+    throw new Error(payload.error?.message ?? 'Request failed');
+  }
+
+  return payload;
+};

apps/mobile/app/providers/session-provider.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { createContext, ReactNode, useContext, useMemo, useState } from 'react';
+
+type SessionState = {
+  accessToken: string | null;
+  setAccessToken: (token: string | null) => void;
+};
+
+const SessionContext = createContext<SessionState | null>(null);
+
+export function SessionProvider({ children }: Readonly<{ children: ReactNode }>) {
+  const [accessToken, setAccessToken] = useState<string | null>(null);
+  const value = useMemo(
+    () => ({
+      accessToken,
+      setAccessToken,
+    }),
+    [accessToken],
+  );
+
+  return <SessionContext.Provider value={value}>{children}</SessionContext.Provider>;
+}
+
+export const useSession = () => {
+  const context = useContext(SessionContext);
+  if (!context) {
+    throw new Error('useSession must be used within SessionProvider');
+  }
+
+  return context;
+};

apps/web/app/dashboard/admin/page.tsx

@@ -0,0 +1,20 @@
+import { AdminQueue } from './queue';
+
+export default function AdminDashboardPage() {
+  return (
+    <main className="page-shell">
+      <section className="hero compact">
+        <p className="eyebrow">Admin Queue</p>
+        <h1>Triage incoming reports.</h1>
+        <p className="lede">
+          Filter recent reports, review integrity state, and anchor a status update from a
+          single moderation screen.
+        </p>
+      </section>
+
+      <section className="panel-stack">
+        <AdminQueue />
+      </section>
+    </main>
+  );
+}