101 lines
3.9 KiB
TypeScript
101 lines
3.9 KiB
TypeScript
import React from "react";
|
|
import AppLayout from "@/layouts/app-layout";
|
|
import { useForm, Link } from "@inertiajs/react";
|
|
import { Alert, Button, Card, Container, Group, Select, Stack, Text, TextInput, Title } from "@mantine/core";
|
|
import { IconArrowLeft, IconDeviceFloppy } from "@tabler/icons-react";
|
|
|
|
type PendingInvoice = {
|
|
id: number;
|
|
invoice_no: string;
|
|
pending_sql_acc_code?: string | null;
|
|
pending_client_name?: string | null;
|
|
client?: {
|
|
name: string;
|
|
customer_id: string;
|
|
} | null;
|
|
};
|
|
|
|
interface Props {
|
|
invoice: PendingInvoice;
|
|
existingClient: PendingInvoice["client"];
|
|
unlinkedClients: { value: string; label: string }[];
|
|
}
|
|
|
|
export default function Page({ invoice, existingClient, unlinkedClients }: Props) {
|
|
const form = useForm({
|
|
client_id: "",
|
|
sql_acc_code: invoice.pending_sql_acc_code ?? "",
|
|
});
|
|
|
|
const submit = (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
form.post(route("client-invoices.client.store", { invoice: invoice.id }));
|
|
};
|
|
|
|
return (
|
|
<AppLayout>
|
|
<Container size="lg" px="xs">
|
|
<Group position="apart" mb="md">
|
|
<Stack spacing={2}>
|
|
<Title order={2}>Link client</Title>
|
|
<Text size="sm" color="dimmed">
|
|
Invoice {invoice.invoice_no}
|
|
</Text>
|
|
</Stack>
|
|
<Button
|
|
component={Link}
|
|
href={route("dashboard")}
|
|
leftIcon={<IconArrowLeft size={16} />}
|
|
variant="outline"
|
|
>
|
|
Back
|
|
</Button>
|
|
</Group>
|
|
|
|
<Card withBorder>
|
|
<form onSubmit={submit}>
|
|
<Stack spacing="md">
|
|
{existingClient ? (
|
|
<Alert color="blue">
|
|
This SQL account code is already linked to {existingClient.name}. You can continue to the invoice.
|
|
</Alert>
|
|
) : null}
|
|
|
|
<Select
|
|
label="Google client"
|
|
placeholder="Select a synced Google client without SQL account code"
|
|
data={unlinkedClients}
|
|
value={form.data.client_id}
|
|
onChange={(value) => form.setData("client_id", value ?? "")}
|
|
error={form.errors.client_id}
|
|
searchable
|
|
nothingFound="No unlinked clients found. Sync Google records from the accounts page first."
|
|
required
|
|
disabled={!!existingClient}
|
|
/>
|
|
|
|
<TextInput
|
|
label="SQL account code"
|
|
value={form.data.sql_acc_code}
|
|
onChange={(event) => form.setData("sql_acc_code", event.target.value)}
|
|
error={form.errors.sql_acc_code}
|
|
required
|
|
/>
|
|
|
|
<Button
|
|
type="submit"
|
|
leftIcon={<IconDeviceFloppy size={16} />}
|
|
loading={form.processing}
|
|
style={{ width: "max-content" }}
|
|
disabled={!!existingClient}
|
|
>
|
|
Link client and continue
|
|
</Button>
|
|
</Stack>
|
|
</form>
|
|
</Card>
|
|
</Container>
|
|
</AppLayout>
|
|
);
|
|
}
|