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:
@@ -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,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user