75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
import { useState } from "react";
|
|
import { createClient } from "../api/clients";
|
|
import { useTranslation } from "../hooks/useTranslation";
|
|
import { Button } from "./ui/button";
|
|
import { Input } from "./ui/input";
|
|
import { Modal } from "./Modal";
|
|
import { TextAreaInput } from "./ui/TextAreaInput";
|
|
|
|
interface CreateClientModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSuccess: () => void;
|
|
workspaceId: string;
|
|
}
|
|
|
|
export default function CreateClientModal({ isOpen, onClose, onSuccess, workspaceId }: CreateClientModalProps) {
|
|
const { t } = useTranslation();
|
|
const [name, setName] = useState("");
|
|
const [notes, setNotes] = useState("");
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const handleSubmit = async () => {
|
|
if (!name.trim()) return;
|
|
setIsLoading(true);
|
|
try {
|
|
await createClient(workspaceId, { name, notes });
|
|
onSuccess();
|
|
setName("");
|
|
setNotes("");
|
|
onClose();
|
|
} catch (error) {
|
|
console.error(t.clients.errors.createFailed, error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const footer = (
|
|
<>
|
|
<Button variant="outline" onClick={onClose} disabled={isLoading}>
|
|
{t.actions?.cancel}
|
|
</Button>
|
|
<Button onClick={handleSubmit} disabled={isLoading || !name.trim()}>
|
|
{isLoading ? "..." : t.clients.create}
|
|
</Button>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<Modal isOpen={isOpen} onClose={onClose} title={t.clients.modalTitle} footer={footer}>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1 text-slate-700 dark:text-slate-300">
|
|
{t.clients.clientName}
|
|
</label>
|
|
<Input
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
placeholder={t.clients.clientNamePlaceholder}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1 text-slate-700 dark:text-slate-300">
|
|
{t.clients.notes}
|
|
</label>
|
|
<TextAreaInput
|
|
value={notes}
|
|
onChange={(e) => setNotes(e.target.value)}
|
|
placeholder={t.clients.notesPlaceholder}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
} |