Function AddGroupModal

components/approval/addQuestionModal.tsx:520–593

(props: {
  open: boolean;
  close: () => void;
  setGroups: React.Dispatch<
    React.SetStateAction<
      { name: string; id: string; questions: UIQuestionMessageData[] }[]
    >
  >;
})

}

export function AddGroupModal(props: {
  open: boolean;
  close: () => void;
  setGroups: React.Dispatch<
    React.SetStateAction<
      { name: string; id: string; questions: UIQuestionMessageData[] }[]
    >
  >;
}) {
  const { profile } = useProfile();
  const supabase = useSupabaseClient<Database>();
  const [groupName, setGroupName] = useState<string>("");
  const [error, setError] = useState<string | null>(null);

  return (
    <ClarifyCloseModal
      open={props.open}
      setOpen={props.close}
      classNames={"max-w-xl overflow-visible"}
      shouldClarify={Boolean(groupName)}
    >
      <div className="w-full flex flex-col">
        <h1 className={"text-lg text-gray-200 mb-2"}>Add Question Group</h1>
        <input
          value={groupName}
          onChange={(e) => setGroupName(e.target.value)}
          className="rounded-md bg-gray-700 border-gray-400 text-gray-100 px-2 py-1 placeholder:text-gray-400"
          placeholder={"E.g. Sales"}
        />
        {error && <div className="text-red-500 text-sm mt-1">{error}</div>}

        <div className={"flex flex-row justify-end gap-x-2 mt-2"}>
          <button
            className={"bg-gray-500 rounded px-2 py-1 text-gray-50"}
            onClick={props.close}
          >
            Cancel
          </button>
          <button
            className={classNames(
              "rounded px-2 py-1 text-gray-50",
              !groupName
                ? "bg-gray-600 cursor-not-allowed"
                : "bg-green-600 cursor-pointer",
            )}
            onClick={async () => {
              if (!profile?.org_id || !groupName) return;
              const { data, error } = await supabase
                .from("approval_answer_groups")
                .insert({
                  org_id: profile.org_id,
                  name: groupName,
                })
                .select()
                .single();
              if (error) {
                setError(`Failed to save group: ${error.message}`);
                console.error(`Failed to save group: ${error.message}`);