Changes
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
co-authored by
renee-png
renee-png
parent
6730c8b863
commit
54793abda3
@@ -0,0 +1,192 @@
|
||||
import { createFileRoute, useNavigate, Link } from "@tanstack/react-router";
|
||||
import { z } from "zod";
|
||||
import { useEffect, useState } from "react";
|
||||
import { ProtectedLayout } from "@/components/protected-layout";
|
||||
import { PageContainer, PageHeader } from "@/components/app-shell";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { supabase } from "@/integrations/supabase/client";
|
||||
import { useAuth } from "@/lib/auth";
|
||||
import { ArrowLeft, Loader2 } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
const search = z.object({ clientId: z.string().optional() });
|
||||
|
||||
export const Route = createFileRoute("/cases/new")({
|
||||
validateSearch: search,
|
||||
component: () => (
|
||||
<ProtectedLayout>
|
||||
<NewCase />
|
||||
</ProtectedLayout>
|
||||
),
|
||||
});
|
||||
|
||||
function NewCase() {
|
||||
const { clientId } = Route.useSearch();
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuth();
|
||||
const [clients, setClients] = useState<any[]>([]);
|
||||
const [users, setUsers] = useState<any[]>([]);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const [form, setForm] = useState({
|
||||
client_id: clientId ?? "",
|
||||
case_number: "",
|
||||
title: "",
|
||||
practice_area: "",
|
||||
description: "",
|
||||
status: "intake" as const,
|
||||
assigned_attorney_id: user?.id ?? "",
|
||||
default_hourly_rate: "",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const [{ data: cs }, { data: us }] = await Promise.all([
|
||||
supabase.from("clients").select("id, name").order("name"),
|
||||
supabase.from("profiles").select("id, full_name, email").order("full_name"),
|
||||
]);
|
||||
setClients(cs ?? []);
|
||||
setUsers(us ?? []);
|
||||
})();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (user?.id && !form.assigned_attorney_id) {
|
||||
setForm((f) => ({ ...f, assigned_attorney_id: user.id }));
|
||||
}
|
||||
}, [user?.id]);
|
||||
|
||||
// Auto-generate case number suggestion
|
||||
useEffect(() => {
|
||||
if (!form.case_number) {
|
||||
const yr = new Date().getFullYear();
|
||||
const rand = Math.floor(1000 + Math.random() * 9000);
|
||||
setForm((f) => ({ ...f, case_number: `${yr}-${rand}` }));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const onSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!form.client_id || !form.title.trim() || !form.case_number.trim()) {
|
||||
toast.error("Please fill in client, title, and case number.");
|
||||
return;
|
||||
}
|
||||
setSubmitting(true);
|
||||
const payload = {
|
||||
client_id: form.client_id,
|
||||
case_number: form.case_number.trim(),
|
||||
title: form.title.trim(),
|
||||
practice_area: form.practice_area.trim() || null,
|
||||
description: form.description.trim() || null,
|
||||
status: form.status,
|
||||
assigned_attorney_id: form.assigned_attorney_id || null,
|
||||
default_hourly_rate: form.default_hourly_rate ? parseFloat(form.default_hourly_rate) : null,
|
||||
created_by: user?.id,
|
||||
};
|
||||
const { data, error } = await supabase.from("cases").insert(payload).select("id").single();
|
||||
setSubmitting(false);
|
||||
if (error) {
|
||||
toast.error("Could not create case", { description: error.message });
|
||||
return;
|
||||
}
|
||||
toast.success("Case created");
|
||||
navigate({ to: "/cases/$caseId", params: { caseId: data.id } });
|
||||
};
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<Button variant="ghost" size="sm" asChild className="mb-3 -ml-2">
|
||||
<Link to="/cases"><ArrowLeft className="h-4 w-4 mr-1" /> All cases</Link>
|
||||
</Button>
|
||||
<PageHeader title="New case" description="Open a new matter." />
|
||||
|
||||
<Card className="max-w-2xl border-border/60">
|
||||
<CardContent className="p-6">
|
||||
<form onSubmit={onSubmit} className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Client</Label>
|
||||
<Select value={form.client_id} onValueChange={(v) => setForm({ ...form, client_id: v })}>
|
||||
<SelectTrigger><SelectValue placeholder="Select client" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{clients.map((c) => <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Case number</Label>
|
||||
<Input value={form.case_number} onChange={(e) => setForm({ ...form, case_number: e.target.value })} required maxLength={50} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Title</Label>
|
||||
<Input value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} required maxLength={200} />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Practice area</Label>
|
||||
<Input
|
||||
value={form.practice_area}
|
||||
onChange={(e) => setForm({ ...form, practice_area: e.target.value })}
|
||||
placeholder="HOA collections, Litigation, Transactional…"
|
||||
maxLength={120}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Status</Label>
|
||||
<Select value={form.status} onValueChange={(v: any) => setForm({ ...form, status: v })}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="intake">Intake</SelectItem>
|
||||
<SelectItem value="active">Active</SelectItem>
|
||||
<SelectItem value="on_hold">On hold</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Assigned attorney</Label>
|
||||
<Select value={form.assigned_attorney_id} onValueChange={(v) => setForm({ ...form, assigned_attorney_id: v })}>
|
||||
<SelectTrigger><SelectValue placeholder="Select user" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{users.map((u) => <SelectItem key={u.id} value={u.id}>{u.full_name || u.email}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Default hourly rate ($)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
value={form.default_hourly_rate}
|
||||
onChange={(e) => setForm({ ...form, default_hourly_rate: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Description</Label>
|
||||
<Textarea rows={4} value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} maxLength={5000} />
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button type="button" variant="outline" asChild>
|
||||
<Link to="/cases">Cancel</Link>
|
||||
</Button>
|
||||
<Button type="submit" disabled={submitting}>
|
||||
{submitting && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
|
||||
Create case
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</PageContainer>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user