Matter details

Title form.setData( 'title', e.target.value, ) } required />

Type

Priority

{!editing && (

Client

)} {editing && (

Client

)}

Practice area

Responsible partner

Office

Date opened form.setData( 'date_opened', e.target.value, ) } required />

Summary

form.setData(
                                                'summary',
                                                e.target.value,
                                            )
                                        }
                                    />
                                </div>
                            </CardContent>
                        </Card>

<Card>
                            <CardHeader>
                                <CardTitle>
                                    {isLitigation
                                        ? 'Litigation details'
                                        : 'Matter value'}
                                </CardTitle>
                            </CardHeader>
                            <CardContent className="grid gap-4 sm:grid-cols-2">
                                {isLitigation ? (
                                    <>
                                        <div className="grid gap-2">
                                            <Label htmlFor="suit_number">
                                                Suit number
                                            </Label>
                                            <Input
                                                id="suit_number"
                                                value={form.data.suit_number}
                                                onChange={(e) =>
                                                    form.setData(
                                                        'suit_number',
                                                        e.target.value,
                                                    )
                                                }
                                            />
                                        </div>
                                        <div className="grid gap-2">
                                            <Label htmlFor="court_id">
                                                Court
                                            </Label>
                                            <Select
                                                value={
                                                    form.data.court_id
                                                        ? String(
                                                              form.data
                                                                  .court_id,
                                                          )
                                                        : NONE
                                                }
                                                onValueChange={(v) =>
                                                    form.setData(
                                                        'court_id',
                                                        num(v),
                                                    )
                                                }
                                            >
                                                <SelectTrigger id="court_id">
                                                    <SelectValue placeholder="None" />
                                                </SelectTrigger>
                                                <SelectContent>
                                                    <SelectItem value={NONE}>
                                                        None
                                                    </SelectItem>
                                                    {options.courts.map((o) => (
                                                        <SelectItem
                                                            key={o.value}
                                                            value={String(
                                                                o.value,
                                                            )}
                                                        >
                                                            {o.label}
                                                        </SelectItem>
                                                    ))}
                                                </SelectContent>
                                            </Select>
                                        </div>
                                        <div className="grid gap-2">
                                            <Label htmlFor="client_role">
                                                Client's role
                                            </Label>
                                            <Select
                                                value={
                                                    form.data.client_role ??
                                                    NONE
                                                }
                                                onValueChange={(v) =>
                                                    form.setData(
                                                        'client_role',
                                                        v === NONE ? null : v,
                                                    )
                                                }
                                            >
                                                <SelectTrigger id="client_role">
                                                    <SelectValue placeholder="None" />
                                                </SelectTrigger>
                                                <SelectContent>
                                                    <SelectItem value={NONE}>
                                                        None
                                                    </SelectItem>
                                                    {options.partyRoles.map(
                                                        (o) => (
                                                            <SelectItem
                                                                key={o.value}
                                                                value={String(
                                                                    o.value,
                                                                )}
                                                            >
                                                                {o.label}
                                                            </SelectItem>
                                                        ),
                                                    )}
                                                </SelectContent>
                                            </Select>
                                        </div>
                                        <div className="grid gap-2">
                                            <Label htmlFor="opposing_counsel">
                                                Opposing counsel
                                            </Label>
                                            <Input
                                                id="opposing_counsel"
                                                value={
                                                    form.data.opposing_counsel
                                                }
                                                onChange={(e) =>
                                                    form.setData(
                                                        'opposing_counsel',
                                                        e.target.value,
                                                    )
                                                }
                                            />
                                        </div>
                                        <div className="grid gap-2">
                                            <Label htmlFor="claim_amount">
                                                Claim amount (₦)
                                            </Label>
                                            <Input
                                                id="claim_amount"
                                                inputMode="decimal"
                                                value={form.data.claim_amount}
                                                onChange={(e) =>
                                                    form.setData(
                                                        'claim_amount',
                                                        e.target.value,
                                                    )
                                                }
                                            />
                                        </div>
                                        <div className="grid gap-2 sm:col-span-2">
                                            <Label htmlFor="relief_sought">
                                                Relief sought
                                            </Label>
                                            <Textarea
                                                id="relief_sought"
                                                value={form.data.relief_sought}
                                                onChange={(e) =>
                                                    form.setData(
                                                        'relief_sought',
                                                        e.target.value,
                                                    )
                                                }
                                            />
                                        </div>
                                    </>
                                ) : (
                                    <div className="grid gap-2">
                                        <Label htmlFor="estimated_value">
                                            Estimated value (₦)
                                        </Label>
                                        <Input
                                            id="estimated_value"
                                            inputMode="decimal"
                                            value={form.data.estimated_value}
                                            onChange={(e) =>
                                                form.setData(
                                                    'estimated_value',
                                                    e.target.value,
                                                )
                                            }
                                        />
                                    </div>
                                )}
                            </CardContent>
                        </Card>

{!editing && (
                            <>
                                <Card>
                                    <CardHeader>
                                        <CardTitle>Team</CardTitle>
                                    </CardHeader>
                                    <CardContent className="space-y-3">
                                        {form.data.team.map((row, i) => (
                                            <div
                                                key={i}
                                                className="flex flex-wrap items-end gap-2"
                                            >
                                                <div className="grid flex-1 gap-2">
                                                    <Label>
                                                        Member{' '}
                                                        {i === 0
                                                            ? '(lead)'
                                                            : ''}
                                                    </Label>
                                                    <Select
                                                        value={
                                                            row.user_id
                                                                ? String(
                                                                      row.user_id,
                                                                  )
                                                                : ''
                                                        }
                                                        onValueChange={(v) => {
                                                            const next = [
                                                                ...form.data
                                                                    .team,
                                                            ];
                                                            next[i] = {
                                                                ...row,
                                                                user_id:
                                                                    Number(v),
                                                            };
                                                            setTeam(next);
                                                        }}
                                                    >
                                                        <SelectTrigger>
                                                            <SelectValue placeholder="Select a person" />
                                                        </SelectTrigger>
                                                        <SelectContent>
                                                            {options.users.map(
                                                                (o) => (
                                                                    <SelectItem
                                                                        key={
                                                                            o.value
                                                                        }
                                                                        value={String(
                                                                            o.value,
                                                                        )}
                                                                    >
                                                                        {
                                                                            o.label
                                                                        }
                                                                    </SelectItem>
                                                                ),
                                                            )}
                                                        </SelectContent>
                                                    </Select>
                                                </div>
                                                <div className="grid w-40 gap-2">
                                                    <Label>Role</Label>
                                                    <Select
                                                        value={row.role}
                                                        onValueChange={(v) => {
                                                            const next = [
                                                                ...form.data
                                                                    .team,
                                                            ];
                                                            next[i] = {
                                                                ...row,
                                                                role: v,
                                                            };
                                                            setTeam(next);
                                                        }}
                                                    >
                                                        <SelectTrigger>
                                                            <SelectValue />
                                                        </SelectTrigger>
                                                        <SelectContent>
                                                            {options.teamRoles.map(
                                                                (o) => (
                                                                    <SelectItem
                                                                        key={
                                                                            o.value
                                                                        }
                                                                        value={String(
                                                                            o.value,
                                                                        )}
                                                                    >
                                                                        {
                                                                            o.label
                                                                        }
                                                                    </SelectItem>
                                                                ),
                                                            )}
                                                        </SelectContent>
                                                    </Select>
                                                </div>
                                                {form.data.team.length > 1 && (
                                                    <Button
                                                        type="button"
                                                        variant="ghost"
                                                        size="icon-sm"
                                                        onClick={() =>
                                                            setTeam(
                                                                form.data.team.filter(
                                                                    (_, j) =>
                                                                        j !== i,
                                                                ),
                                                            )
                                                        }
                                                    >
                                                        <Trash2 />
                                                    </Button>
                                                )}
                                            </div>
                                        ))}
                                        <InputError
                                            message={form.errors.team}
                                        />
                                        <Button
                                            type="button"
                                            variant="outline"
                                            size="sm"
                                            onClick={() =>
                                                setTeam([
                                                    ...form.data.team,
                                                    {
                                                        user_id: null,
                                                        role: 'counsel',
                                                    },
                                                ])
                                            }
                                        >
                                            <Plus /> Add member
                                        </Button>
                                    </CardContent>
                                </Card>

<Card>
                                    <CardHeader>
                                        <CardTitle>Parties</CardTitle>
                                    </CardHeader>
                                    <CardContent className="space-y-3">
                                        {form.data.parties.length === 0 && (
                                            <p className="text-sm text-muted-foreground">
                                                No parties added yet.
                                            </p>
                                        )}
                                        {form.data.parties.map((row, i) => (
                                            <div
                                                key={i}
                                                className="flex flex-wrap items-end gap-2"
                                            >
                                                <div className="grid flex-1 gap-2">
                                                    <Label>Name</Label>
                                                    <Input
                                                        value={row.name}
                                                        onChange={(e) => {
                                                            const next = [
                                                                ...form.data
                                                                    .parties,
                                                            ];
                                                            next[i] = {
                                                                ...row,
                                                                name: e.target
                                                                    .value,
                                                            };
                                                            setParties(next);
                                                        }}
                                                    />
                                                </div>
                                                <div className="grid w-44 gap-2">
                                                    <Label>Role</Label>
                                                    <Select
                                                        value={row.role}
                                                        onValueChange={(v) => {
                                                            const next = [
                                                                ...form.data
                                                                    .parties,
                                                            ];
                                                            next[i] = {
                                                                ...row,
                                                                role: v,
                                                            };
                                                            setParties(next);
                                                        }}
                                                    >
                                                        <SelectTrigger>
                                                            <SelectValue placeholder="Role" />
                                                        </SelectTrigger>
                                                        <SelectContent>
                                                            {options.partyRoles.map(
                                                                (o) => (
                                                                    <SelectItem
                                                                        key={
                                                                            o.value
                                                                        }
                                                                        value={String(
                                                                            o.value,
                                                                        )}
                                                                    >
                                                                        {
                                                                            o.label
                                                                        }
                                                                    </SelectItem>
                                                                ),
                                                            )}
                                                        </SelectContent>
                                                    </Select>
                                                </div>
                                                <Button
                                                    type="button"
                                                    variant="ghost"
                                                    size="icon-sm"
                                                    onClick={() =>
                                                        setParties(
                                                            form.data.parties.filter(
                                                                (_, j) =>
                                                                    j !== i,
                                                            ),
                                                        )
                                                    }
                                                >
                                                    <Trash2 />
                                                </Button>
                                            </div>
                                        ))}
                                        <Button
                                            type="button"
                                            variant="outline"
                                            size="sm"
                                            onClick={() =>
                                                setParties([
                                                    ...form.data.parties,
                                                    {
                                                        name: '',
                                                        role: 'defendant',
                                                        phone: '',
                                                        address: '',
                                                        notes: '',
                                                    },
                                                ])
                                            }
                                        >
                                            <Plus /> Add party
                                        </Button>
                                    </CardContent>
                                </Card>
                            </>
                        )}
                    </div>

{!editing && (
                        <div className="lg:col-span-1">
                            <ConflictCheckWidget name={form.data.title} />
                        </div>
                    )}
                </div>
            </form>
        </>
    );
}