Polish mobile app for App Store review and expand CRUD.
Default to beenvoice.soconnor.dev with server settings hidden behind Advanced; add Entities tab with clients/businesses, invoice creation, UI fixes for dashboard layout, date fields, FAB position, and card-matched button radius. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,63 @@
|
||||
import { Pressable, StyleSheet, Text } from "react-native";
|
||||
|
||||
import { useAppTheme } from "@/contexts/ThemeContext";
|
||||
import { fonts, radii } from "@/constants/theme";
|
||||
import { useFloatingActionBottom } from "@/lib/tab-bar-insets";
|
||||
|
||||
type FloatingActionButtonProps = {
|
||||
onPress: () => void;
|
||||
accessibilityLabel?: string;
|
||||
};
|
||||
|
||||
export function FloatingActionButton({
|
||||
onPress,
|
||||
accessibilityLabel = "Create",
|
||||
}: FloatingActionButtonProps) {
|
||||
const { colors } = useAppTheme();
|
||||
const bottom = useFloatingActionBottom();
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={accessibilityLabel}
|
||||
onPress={onPress}
|
||||
style={({ pressed }) => [
|
||||
styles.fab,
|
||||
{
|
||||
bottom,
|
||||
backgroundColor: colors.primary,
|
||||
shadowColor: colors.foreground,
|
||||
},
|
||||
pressed && styles.pressed,
|
||||
]}
|
||||
>
|
||||
<Text style={[styles.icon, { color: colors.primaryForeground }]}>+</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
fab: {
|
||||
position: "absolute",
|
||||
right: 20,
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: radii.pill,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 8,
|
||||
elevation: 6,
|
||||
},
|
||||
pressed: {
|
||||
opacity: 0.9,
|
||||
transform: [{ scale: 0.96 }],
|
||||
},
|
||||
icon: {
|
||||
fontSize: 32,
|
||||
lineHeight: 34,
|
||||
fontFamily: fonts.body,
|
||||
marginTop: -2,
|
||||
},
|
||||
});
|
||||
+21
-19
@@ -1,9 +1,11 @@
|
||||
import { Image } from "expo-image";
|
||||
import { StyleSheet, Text, View, type ImageStyle, type ViewStyle } from "react-native";
|
||||
import { StyleSheet, Text, View, type ViewStyle } from "react-native";
|
||||
|
||||
import { useAppTheme } from "@/contexts/ThemeContext";
|
||||
import { fonts } from "@/constants/theme";
|
||||
|
||||
const markSource = require("@/assets/images/icon.png");
|
||||
|
||||
type LogoSize = "xs" | "sm" | "md" | "lg";
|
||||
|
||||
const widths: Record<LogoSize, number> = {
|
||||
@@ -42,30 +44,34 @@ export function Logo({ size = "md", style, onDark }: LogoProps) {
|
||||
);
|
||||
}
|
||||
|
||||
/** Square app icon mark — fixed aspect ratio so flex parents cannot squash it. */
|
||||
/** Square dollar mark from Icon Composer export (1024×1024 PNG). */
|
||||
export function LogoMark({
|
||||
size = 32,
|
||||
style,
|
||||
}: {
|
||||
size?: number;
|
||||
style?: ImageStyle;
|
||||
style?: ViewStyle;
|
||||
}) {
|
||||
const flat = StyleSheet.flatten(style);
|
||||
const width =
|
||||
typeof flat?.width === "number"
|
||||
? flat.width
|
||||
: typeof flat?.height === "number"
|
||||
? flat.height
|
||||
: size;
|
||||
const height = typeof flat?.height === "number" ? flat.height : width;
|
||||
const fromStyle =
|
||||
typeof style?.width === "number"
|
||||
? style.width
|
||||
: typeof style?.height === "number"
|
||||
? style.height
|
||||
: undefined;
|
||||
const dimension = fromStyle ?? size;
|
||||
|
||||
return (
|
||||
<View style={[styles.markBox, { width, height }]}>
|
||||
<View
|
||||
style={[
|
||||
styles.markBox,
|
||||
{ width: dimension, height: dimension, aspectRatio: 1 },
|
||||
style,
|
||||
]}
|
||||
>
|
||||
<Image
|
||||
source={require("@/assets/images/icon.png")}
|
||||
style={styles.markImage}
|
||||
source={markSource}
|
||||
style={{ width: dimension, height: dimension }}
|
||||
contentFit="contain"
|
||||
accessibilityLabel="beenvoice"
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
@@ -98,10 +104,6 @@ const styles = StyleSheet.create({
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
markImage: {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
},
|
||||
heading: {
|
||||
fontFamily: fonts.heading,
|
||||
},
|
||||
|
||||
@@ -27,8 +27,7 @@ export function StatCard({ label, value, hint }: StatCardProps) {
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
flex: 1,
|
||||
minWidth: "46%",
|
||||
width: "100%",
|
||||
},
|
||||
label: {
|
||||
fontSize: 13,
|
||||
|
||||
@@ -0,0 +1,335 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
Alert,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Switch,
|
||||
Text,
|
||||
View,
|
||||
} from "react-native";
|
||||
|
||||
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 { useAppTheme } from "@/contexts/ThemeContext";
|
||||
import type { ThemeColors } from "@/lib/theme-palette";
|
||||
import { useThemedStyles } from "@/lib/use-themed-styles";
|
||||
import { api } from "@/lib/trpc";
|
||||
|
||||
type BusinessFormValues = {
|
||||
name: string;
|
||||
nickname: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
addressLine1: string;
|
||||
addressLine2: string;
|
||||
city: string;
|
||||
state: string;
|
||||
postalCode: string;
|
||||
country: string;
|
||||
website: string;
|
||||
taxId: string;
|
||||
isDefault: boolean;
|
||||
};
|
||||
|
||||
const emptyValues: BusinessFormValues = {
|
||||
name: "",
|
||||
nickname: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
addressLine1: "",
|
||||
addressLine2: "",
|
||||
city: "",
|
||||
state: "",
|
||||
postalCode: "",
|
||||
country: "United States",
|
||||
website: "",
|
||||
taxId: "",
|
||||
isDefault: false,
|
||||
};
|
||||
|
||||
type BusinessFormProps = {
|
||||
mode: "create" | "edit";
|
||||
businessId?: string;
|
||||
scrollPadding: number;
|
||||
onSaved: () => void;
|
||||
onDeleted?: () => void;
|
||||
};
|
||||
|
||||
export function BusinessForm({
|
||||
mode,
|
||||
businessId,
|
||||
scrollPadding,
|
||||
onSaved,
|
||||
onDeleted,
|
||||
}: BusinessFormProps) {
|
||||
const { colors } = useAppTheme();
|
||||
const styles = useThemedStyles(createBusinessFormStyles);
|
||||
const utils = api.useUtils();
|
||||
|
||||
const businessQuery = api.businesses.getById.useQuery(
|
||||
{ id: businessId ?? "" },
|
||||
{ enabled: mode === "edit" && Boolean(businessId) },
|
||||
);
|
||||
|
||||
const [values, setValues] = useState<BusinessFormValues>(emptyValues);
|
||||
const [fieldError, setFieldError] = useState<string | null>(null);
|
||||
|
||||
const switchProps = {
|
||||
trackColor: { false: colors.switchTrackOff, true: colors.switchTrackOn },
|
||||
thumbColor: Platform.OS === "android" ? colors.switchThumb : undefined,
|
||||
ios_backgroundColor: colors.switchIosBackground,
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const business = businessQuery.data;
|
||||
if (!business) return;
|
||||
setValues({
|
||||
name: business.name,
|
||||
nickname: business.nickname ?? "",
|
||||
email: business.email ?? "",
|
||||
phone: business.phone ?? "",
|
||||
addressLine1: business.addressLine1 ?? "",
|
||||
addressLine2: business.addressLine2 ?? "",
|
||||
city: business.city ?? "",
|
||||
state: business.state ?? "",
|
||||
postalCode: business.postalCode ?? "",
|
||||
country: business.country ?? "United States",
|
||||
website: business.website ?? "",
|
||||
taxId: business.taxId ?? "",
|
||||
isDefault: business.isDefault ?? false,
|
||||
});
|
||||
}, [businessQuery.data]);
|
||||
|
||||
const createBusiness = api.businesses.create.useMutation({
|
||||
onSuccess: () => {
|
||||
void utils.businesses.getAll.invalidate();
|
||||
onSaved();
|
||||
},
|
||||
onError: (err) => setFieldError(err.message),
|
||||
});
|
||||
|
||||
const updateBusiness = api.businesses.update.useMutation({
|
||||
onSuccess: () => {
|
||||
void utils.businesses.getAll.invalidate();
|
||||
if (businessId) void utils.businesses.getById.invalidate({ id: businessId });
|
||||
onSaved();
|
||||
},
|
||||
onError: (err) => setFieldError(err.message),
|
||||
});
|
||||
|
||||
const deleteBusiness = api.businesses.delete.useMutation({
|
||||
onSuccess: () => {
|
||||
void utils.businesses.getAll.invalidate();
|
||||
onDeleted?.();
|
||||
},
|
||||
onError: (err) => Alert.alert("Could not delete business", err.message),
|
||||
});
|
||||
|
||||
function patch<K extends keyof BusinessFormValues>(field: K, value: BusinessFormValues[K]) {
|
||||
setValues((prev) => ({ ...prev, [field]: value }));
|
||||
setFieldError(null);
|
||||
}
|
||||
|
||||
function buildPayload() {
|
||||
return {
|
||||
name: values.name.trim(),
|
||||
nickname: values.nickname.trim(),
|
||||
email: values.email.trim(),
|
||||
phone: values.phone.trim(),
|
||||
addressLine1: values.addressLine1.trim(),
|
||||
addressLine2: values.addressLine2.trim(),
|
||||
city: values.city.trim(),
|
||||
state: values.state.trim(),
|
||||
postalCode: values.postalCode.trim(),
|
||||
country: values.country.trim() || "United States",
|
||||
website: values.website.trim(),
|
||||
taxId: values.taxId.trim(),
|
||||
isDefault: values.isDefault,
|
||||
};
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
if (!values.name.trim()) {
|
||||
setFieldError("Business name is required");
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = buildPayload();
|
||||
|
||||
if (mode === "create") {
|
||||
createBusiness.mutate(payload);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!businessId) return;
|
||||
updateBusiness.mutate({ id: businessId, ...payload });
|
||||
}
|
||||
|
||||
function confirmDelete() {
|
||||
if (!businessId) return;
|
||||
Alert.alert(
|
||||
"Delete business",
|
||||
"This cannot be undone. Businesses with invoices cannot be deleted.",
|
||||
[
|
||||
{ text: "Cancel", style: "cancel" },
|
||||
{
|
||||
text: "Delete",
|
||||
style: "destructive",
|
||||
onPress: () => deleteBusiness.mutate({ id: businessId }),
|
||||
},
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
const saving = createBusiness.isPending || updateBusiness.isPending;
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
||||
style={styles.flex}
|
||||
>
|
||||
<ScrollView
|
||||
contentContainerStyle={[styles.container, { paddingBottom: scrollPadding }]}
|
||||
contentInsetAdjustmentBehavior={Platform.OS === "ios" ? "automatic" : undefined}
|
||||
scrollIndicatorInsets={{ bottom: scrollPadding }}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
<Card title="Profile">
|
||||
<Input label="Name" value={values.name} onChangeText={(v) => patch("name", v)} />
|
||||
<Input
|
||||
label="Nickname"
|
||||
value={values.nickname}
|
||||
onChangeText={(v) => patch("nickname", v)}
|
||||
placeholder="Optional short name"
|
||||
/>
|
||||
<Input
|
||||
label="Email"
|
||||
value={values.email}
|
||||
onChangeText={(v) => patch("email", v)}
|
||||
keyboardType="email-address"
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
<Input
|
||||
label="Phone"
|
||||
value={values.phone}
|
||||
onChangeText={(v) => patch("phone", v)}
|
||||
keyboardType="phone-pad"
|
||||
/>
|
||||
<Input
|
||||
label="Website"
|
||||
value={values.website}
|
||||
onChangeText={(v) => patch("website", v)}
|
||||
autoCapitalize="none"
|
||||
keyboardType="url"
|
||||
placeholder="https://"
|
||||
/>
|
||||
<Input
|
||||
label="Tax ID"
|
||||
value={values.taxId}
|
||||
onChangeText={(v) => patch("taxId", v)}
|
||||
placeholder="Optional"
|
||||
/>
|
||||
<View style={styles.switchRow}>
|
||||
<View style={styles.switchCopy}>
|
||||
<Text style={[styles.switchLabel, { color: colors.foreground }]}>
|
||||
Default business
|
||||
</Text>
|
||||
<Text style={[styles.switchHint, { color: colors.mutedForeground }]}>
|
||||
Used for new invoices when none is selected
|
||||
</Text>
|
||||
</View>
|
||||
<Switch
|
||||
value={values.isDefault}
|
||||
onValueChange={(v) => patch("isDefault", v)}
|
||||
{...switchProps}
|
||||
/>
|
||||
</View>
|
||||
</Card>
|
||||
|
||||
<Card title="Address">
|
||||
<Input
|
||||
label="Address line 1"
|
||||
value={values.addressLine1}
|
||||
onChangeText={(v) => patch("addressLine1", v)}
|
||||
/>
|
||||
<Input
|
||||
label="Address line 2"
|
||||
value={values.addressLine2}
|
||||
onChangeText={(v) => patch("addressLine2", v)}
|
||||
/>
|
||||
<Input label="City" value={values.city} onChangeText={(v) => patch("city", v)} />
|
||||
<Input label="State" value={values.state} onChangeText={(v) => patch("state", v)} />
|
||||
<Input
|
||||
label="Postal code"
|
||||
value={values.postalCode}
|
||||
onChangeText={(v) => patch("postalCode", v)}
|
||||
/>
|
||||
<Input
|
||||
label="Country"
|
||||
value={values.country}
|
||||
onChangeText={(v) => patch("country", v)}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{fieldError ? <Text style={styles.error}>{fieldError}</Text> : null}
|
||||
|
||||
<View style={styles.actions}>
|
||||
<Button
|
||||
title={mode === "create" ? "Create business" : "Save changes"}
|
||||
loading={saving}
|
||||
onPress={handleSave}
|
||||
/>
|
||||
{mode === "edit" ? (
|
||||
<Button
|
||||
title="Delete business"
|
||||
variant="danger"
|
||||
loading={deleteBusiness.isPending}
|
||||
onPress={confirmDelete}
|
||||
/>
|
||||
) : null}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const createBusinessFormStyles = (colors: ThemeColors, _isDark: boolean) =>
|
||||
StyleSheet.create({
|
||||
flex: { flex: 1 },
|
||||
container: {
|
||||
padding: spacing.md,
|
||||
gap: spacing.md,
|
||||
},
|
||||
switchRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
gap: spacing.md,
|
||||
paddingTop: spacing.xs,
|
||||
},
|
||||
switchCopy: {
|
||||
flex: 1,
|
||||
gap: 2,
|
||||
},
|
||||
switchLabel: {
|
||||
fontFamily: fonts.bodyMedium,
|
||||
fontSize: 14,
|
||||
},
|
||||
switchHint: {
|
||||
fontFamily: fonts.body,
|
||||
fontSize: 12,
|
||||
lineHeight: 16,
|
||||
},
|
||||
actions: {
|
||||
gap: spacing.sm,
|
||||
},
|
||||
error: {
|
||||
color: colors.destructive,
|
||||
fontFamily: fonts.body,
|
||||
fontSize: 14,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,288 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
Alert,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from "react-native";
|
||||
|
||||
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 type { ThemeColors } from "@/lib/theme-palette";
|
||||
import { useThemedStyles } from "@/lib/use-themed-styles";
|
||||
import { api } from "@/lib/trpc";
|
||||
|
||||
export type ClientFormValues = {
|
||||
name: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
addressLine1: string;
|
||||
addressLine2: string;
|
||||
city: string;
|
||||
state: string;
|
||||
postalCode: string;
|
||||
country: string;
|
||||
defaultHourlyRate: string;
|
||||
currency: string;
|
||||
};
|
||||
|
||||
const emptyValues: ClientFormValues = {
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
addressLine1: "",
|
||||
addressLine2: "",
|
||||
city: "",
|
||||
state: "",
|
||||
postalCode: "",
|
||||
country: "United States",
|
||||
defaultHourlyRate: "",
|
||||
currency: "USD",
|
||||
};
|
||||
|
||||
type ClientFormProps = {
|
||||
mode: "create" | "edit";
|
||||
clientId?: string;
|
||||
scrollPadding: number;
|
||||
onSaved: () => void;
|
||||
onDeleted?: () => void;
|
||||
};
|
||||
|
||||
export function ClientForm({
|
||||
mode,
|
||||
clientId,
|
||||
scrollPadding,
|
||||
onSaved,
|
||||
onDeleted,
|
||||
}: ClientFormProps) {
|
||||
const styles = useThemedStyles(createClientFormStyles);
|
||||
const utils = api.useUtils();
|
||||
|
||||
const clientQuery = api.clients.getById.useQuery(
|
||||
{ id: clientId ?? "" },
|
||||
{ enabled: mode === "edit" && Boolean(clientId) },
|
||||
);
|
||||
|
||||
const [values, setValues] = useState<ClientFormValues>(emptyValues);
|
||||
const [fieldError, setFieldError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const client = clientQuery.data;
|
||||
if (!client) return;
|
||||
setValues({
|
||||
name: client.name,
|
||||
email: client.email ?? "",
|
||||
phone: client.phone ?? "",
|
||||
addressLine1: client.addressLine1 ?? "",
|
||||
addressLine2: client.addressLine2 ?? "",
|
||||
city: client.city ?? "",
|
||||
state: client.state ?? "",
|
||||
postalCode: client.postalCode ?? "",
|
||||
country: client.country ?? "United States",
|
||||
defaultHourlyRate:
|
||||
client.defaultHourlyRate != null ? String(client.defaultHourlyRate) : "",
|
||||
currency: client.currency ?? "USD",
|
||||
});
|
||||
}, [clientQuery.data]);
|
||||
|
||||
const createClient = api.clients.create.useMutation({
|
||||
onSuccess: () => {
|
||||
void utils.clients.getAll.invalidate();
|
||||
void utils.dashboard.getStats.invalidate();
|
||||
onSaved();
|
||||
},
|
||||
onError: (err) => setFieldError(err.message),
|
||||
});
|
||||
|
||||
const updateClient = api.clients.update.useMutation({
|
||||
onSuccess: () => {
|
||||
void utils.clients.getAll.invalidate();
|
||||
if (clientId) void utils.clients.getById.invalidate({ id: clientId });
|
||||
void utils.dashboard.getStats.invalidate();
|
||||
onSaved();
|
||||
},
|
||||
onError: (err) => setFieldError(err.message),
|
||||
});
|
||||
|
||||
const deleteClient = api.clients.delete.useMutation({
|
||||
onSuccess: () => {
|
||||
void utils.clients.getAll.invalidate();
|
||||
void utils.dashboard.getStats.invalidate();
|
||||
onDeleted?.();
|
||||
},
|
||||
onError: (err) => Alert.alert("Could not delete client", err.message),
|
||||
});
|
||||
|
||||
function patch(field: keyof ClientFormValues, value: string) {
|
||||
setValues((prev) => ({ ...prev, [field]: value }));
|
||||
setFieldError(null);
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
if (!values.name.trim()) {
|
||||
setFieldError("Name is required");
|
||||
return;
|
||||
}
|
||||
|
||||
const rate = values.defaultHourlyRate.trim()
|
||||
? Number(values.defaultHourlyRate)
|
||||
: undefined;
|
||||
if (rate !== undefined && (Number.isNaN(rate) || rate < 0)) {
|
||||
setFieldError("Hourly rate must be a valid number");
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
name: values.name.trim(),
|
||||
email: values.email.trim(),
|
||||
phone: values.phone.trim(),
|
||||
addressLine1: values.addressLine1.trim(),
|
||||
addressLine2: values.addressLine2.trim(),
|
||||
city: values.city.trim(),
|
||||
state: values.state.trim(),
|
||||
postalCode: values.postalCode.trim(),
|
||||
country: values.country.trim() || "United States",
|
||||
defaultHourlyRate: rate,
|
||||
currency: values.currency.trim() || "USD",
|
||||
};
|
||||
|
||||
if (mode === "create") {
|
||||
createClient.mutate(payload);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!clientId) return;
|
||||
updateClient.mutate({ id: clientId, ...payload });
|
||||
}
|
||||
|
||||
function confirmDelete() {
|
||||
if (!clientId) return;
|
||||
Alert.alert(
|
||||
"Delete client",
|
||||
"This cannot be undone. Clients with invoices cannot be deleted.",
|
||||
[
|
||||
{ text: "Cancel", style: "cancel" },
|
||||
{
|
||||
text: "Delete",
|
||||
style: "destructive",
|
||||
onPress: () => deleteClient.mutate({ id: clientId }),
|
||||
},
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
const saving = createClient.isPending || updateClient.isPending;
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
||||
style={styles.flex}
|
||||
>
|
||||
<ScrollView
|
||||
contentContainerStyle={[styles.container, { paddingBottom: scrollPadding }]}
|
||||
contentInsetAdjustmentBehavior={Platform.OS === "ios" ? "automatic" : undefined}
|
||||
scrollIndicatorInsets={{ bottom: scrollPadding }}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
<Card title="Contact">
|
||||
<Input label="Name" value={values.name} onChangeText={(v) => patch("name", v)} />
|
||||
<Input
|
||||
label="Email"
|
||||
value={values.email}
|
||||
onChangeText={(v) => patch("email", v)}
|
||||
keyboardType="email-address"
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
<Input
|
||||
label="Phone"
|
||||
value={values.phone}
|
||||
onChangeText={(v) => patch("phone", v)}
|
||||
keyboardType="phone-pad"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card title="Address">
|
||||
<Input
|
||||
label="Address line 1"
|
||||
value={values.addressLine1}
|
||||
onChangeText={(v) => patch("addressLine1", v)}
|
||||
/>
|
||||
<Input
|
||||
label="Address line 2"
|
||||
value={values.addressLine2}
|
||||
onChangeText={(v) => patch("addressLine2", v)}
|
||||
/>
|
||||
<Input label="City" value={values.city} onChangeText={(v) => patch("city", v)} />
|
||||
<Input label="State" value={values.state} onChangeText={(v) => patch("state", v)} />
|
||||
<Input
|
||||
label="Postal code"
|
||||
value={values.postalCode}
|
||||
onChangeText={(v) => patch("postalCode", v)}
|
||||
/>
|
||||
<Input
|
||||
label="Country"
|
||||
value={values.country}
|
||||
onChangeText={(v) => patch("country", v)}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card title="Billing">
|
||||
<Input
|
||||
label="Default hourly rate"
|
||||
value={values.defaultHourlyRate}
|
||||
onChangeText={(v) => patch("defaultHourlyRate", v)}
|
||||
keyboardType="decimal-pad"
|
||||
placeholder="Optional"
|
||||
/>
|
||||
<Input
|
||||
label="Currency"
|
||||
value={values.currency}
|
||||
onChangeText={(v) => patch("currency", v.toUpperCase())}
|
||||
autoCapitalize="characters"
|
||||
maxLength={3}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{fieldError ? <Text style={styles.error}>{fieldError}</Text> : null}
|
||||
|
||||
<View style={styles.actions}>
|
||||
<Button
|
||||
title={mode === "create" ? "Create client" : "Save changes"}
|
||||
loading={saving}
|
||||
onPress={handleSave}
|
||||
/>
|
||||
{mode === "edit" ? (
|
||||
<Button
|
||||
title="Delete client"
|
||||
variant="danger"
|
||||
loading={deleteClient.isPending}
|
||||
onPress={confirmDelete}
|
||||
/>
|
||||
) : null}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const createClientFormStyles = (colors: ThemeColors, _isDark: boolean) =>
|
||||
StyleSheet.create({
|
||||
flex: { flex: 1 },
|
||||
container: {
|
||||
padding: spacing.md,
|
||||
gap: spacing.md,
|
||||
},
|
||||
actions: {
|
||||
gap: spacing.sm,
|
||||
},
|
||||
error: {
|
||||
color: colors.destructive,
|
||||
fontFamily: fonts.body,
|
||||
fontSize: 14,
|
||||
},
|
||||
});
|
||||
@@ -3,6 +3,7 @@ import { Pressable, StyleSheet, Text, View } from "react-native";
|
||||
|
||||
import { DateTimeField } from "@/components/ui/DateTimeField";
|
||||
import { Input } from "@/components/ui/Input";
|
||||
import { StepperInput } from "@/components/ui/StepperInput";
|
||||
import { fonts, spacing } from "@/constants/theme";
|
||||
import { useAppTheme } from "@/contexts/ThemeContext";
|
||||
import { formatCurrency, formatDate } from "@/lib/format";
|
||||
@@ -79,11 +80,10 @@ export function LineItemEditor({
|
||||
|
||||
<View style={styles.inlineRow}>
|
||||
<View style={styles.inlineField}>
|
||||
<Input
|
||||
<StepperInput
|
||||
label="Hours"
|
||||
value={item.hours}
|
||||
onChangeText={(hours) => onChange({ hours })}
|
||||
keyboardType="decimal-pad"
|
||||
placeholder="0"
|
||||
/>
|
||||
</View>
|
||||
|
||||
@@ -77,7 +77,7 @@ export function Button({
|
||||
const styles = StyleSheet.create({
|
||||
base: {
|
||||
minHeight: 40,
|
||||
borderRadius: radii.md,
|
||||
borderRadius: radii.lg,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
paddingHorizontal: spacing.md,
|
||||
|
||||
@@ -29,6 +29,7 @@ const styles = StyleSheet.create({
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: spacing.md,
|
||||
gap: spacing.sm,
|
||||
alignItems: "stretch",
|
||||
},
|
||||
title: {
|
||||
fontSize: 15,
|
||||
|
||||
@@ -128,6 +128,8 @@ export function DateTimeField({
|
||||
const styles = StyleSheet.create({
|
||||
wrapper: {
|
||||
gap: spacing.xs,
|
||||
alignSelf: "stretch",
|
||||
width: "100%",
|
||||
},
|
||||
label: {
|
||||
fontSize: 13,
|
||||
@@ -137,8 +139,10 @@ const styles = StyleSheet.create({
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
alignSelf: "stretch",
|
||||
width: "100%",
|
||||
borderWidth: 1,
|
||||
borderRadius: radii.md,
|
||||
borderRadius: radii.lg,
|
||||
paddingHorizontal: spacing.md,
|
||||
minHeight: 48,
|
||||
paddingVertical: spacing.sm,
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { Pressable, StyleSheet, Text, TextInput, View, type TextInputProps } from "react-native";
|
||||
|
||||
import { fonts, radii, spacing } from "@/constants/theme";
|
||||
import { useAppTheme } from "@/contexts/ThemeContext";
|
||||
|
||||
type StepperInputProps = Omit<TextInputProps, "value" | "onChangeText"> & {
|
||||
label: string;
|
||||
value: string;
|
||||
onChangeText: (value: string) => void;
|
||||
step?: number;
|
||||
min?: number;
|
||||
};
|
||||
|
||||
export function StepperInput({
|
||||
label,
|
||||
value,
|
||||
onChangeText,
|
||||
step = 0.25,
|
||||
min = 0,
|
||||
...props
|
||||
}: StepperInputProps) {
|
||||
const { colors } = useAppTheme();
|
||||
|
||||
function adjust(delta: number) {
|
||||
const current = Number.parseFloat(value) || 0;
|
||||
const next = Math.max(min, Math.round((current + delta) * 100) / 100);
|
||||
onChangeText(Number.isInteger(next) ? String(next) : String(next));
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.wrapper}>
|
||||
<Text style={[styles.label, { color: colors.foreground }]}>{label}</Text>
|
||||
<View
|
||||
style={[
|
||||
styles.field,
|
||||
{ borderColor: colors.border, backgroundColor: colors.cardGlass },
|
||||
]}
|
||||
>
|
||||
<Pressable
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={`Decrease ${label}`}
|
||||
hitSlop={6}
|
||||
onPress={() => adjust(-step)}
|
||||
style={({ pressed }) => [styles.stepButton, pressed && styles.stepPressed]}
|
||||
>
|
||||
<Ionicons name="remove" size={18} color={colors.foreground} />
|
||||
</Pressable>
|
||||
|
||||
<TextInput
|
||||
value={value}
|
||||
onChangeText={onChangeText}
|
||||
keyboardType="decimal-pad"
|
||||
placeholderTextColor={colors.mutedForeground}
|
||||
style={[styles.input, { color: colors.foreground }]}
|
||||
{...props}
|
||||
/>
|
||||
|
||||
<Pressable
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={`Increase ${label}`}
|
||||
hitSlop={6}
|
||||
onPress={() => adjust(step)}
|
||||
style={({ pressed }) => [styles.stepButton, pressed && styles.stepPressed]}
|
||||
>
|
||||
<Ionicons name="add" size={18} color={colors.foreground} />
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
wrapper: {
|
||||
gap: spacing.sm,
|
||||
},
|
||||
label: {
|
||||
fontSize: 14,
|
||||
fontFamily: fonts.bodyMedium,
|
||||
},
|
||||
field: {
|
||||
minHeight: 44,
|
||||
borderWidth: 1,
|
||||
borderRadius: radii.md,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: spacing.xs,
|
||||
},
|
||||
stepButton: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: radii.sm,
|
||||
},
|
||||
stepPressed: {
|
||||
opacity: 0.65,
|
||||
},
|
||||
input: {
|
||||
flex: 1,
|
||||
textAlign: "center",
|
||||
fontSize: 14,
|
||||
fontFamily: fonts.body,
|
||||
paddingVertical: spacing.sm,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user