Function CreateProjectModal

webapp/src/components/createProjectModal.tsx:30–135

({
    organizationId,
    isOpen,
    onClose,
    onProjectCreated,
})

}

const CreateProjectModal: React.FC<ModalProps> = ({
    organizationId,
    isOpen,
    onClose,
    onProjectCreated,
}) => {
    const [formData, setFormData] = useState<CreateProjectInput>({
        name: "",
        description: "",
    });
    const [isLoading, setIsLoading] = useState(false);

    const handleSave = async () => {
        toast.promise(
            async () => {
                setIsLoading(true);
                try {
                    const newProject = await createProject(
                        organizationId,
                        formData,
                    );
                    await onProjectCreated(); // Call the callback to refresh the project list
                    handleClose(); // Automatically close the modal after successful creation
                    return newProject; // Return for the success message
                } catch (error) {
                    console.error("Failed to create project:", error);
                    throw error; // Rethrow for the error message
                } finally {
                    setIsLoading(false);
                }
            },
            {
                loading: "Creating project...",
                success: "Project created successfully!",
                error: "Failed to create project",
            },
        );
    };

    const handleClose = () => {
        // Reset state when closing
        setFormData({ name: "", description: "" });
        onClose();
    };

    return (
        <Dialog open={isOpen} onOpenChange={handleClose}>
            <DialogContent className="sm:max-w-[425px]">
                <DialogHeader>
                    <DialogTitle>Create new project</DialogTitle>
                    <DialogDescription>
                        Fill in the details to create your project
                    </DialogDescription>
                </DialogHeader>
                <Separator className="my-4" />
                <div className="grid gap-4 py-4">
                    <div className="space-y-2">
                        <Label htmlFor="project-name">Project Name</Label>