marco.pms.web/src/components/Organization/ManageOrganization1.jsx

const ManageOrganization1 = ({
  projectOrganizations = [],
  organizationId = null,
}) => {
  const [step, setStep] = useState(1); // default = scenario decision
  const orgModal = useOrganizationModal();
  const { data: services, isLoading } = useServices();

  const method = useForm({
    resolver: zodResolver(organizationSchema),
    defaultValues: defaultOrganizationValues,
  });

  const {
    handleSubmit,
    register,
    reset,
    formState: { errors },
  } = method;

  const { mutate: CreateOrganization, isPending } = useCreateOrganization(
    () => {
      reset(defaultOrganizationValues);
      orgModal.onClose();
      setStep(1); // reset to first step
    }
  );

  // 🔹 Decide first step when modal opens
  useEffect(() => {
    if (orgModal.isOpen) {
      if (organizationId) {
        setStep(3); // update flow → show org details directly
      } else if (projectOrganizations && projectOrganizations.length > 0) {
        setStep(1); // Scenario 1 → from current tenant list
      } else {
        setStep(2); // Scenario 2 → search with SPRID
      }
    }
  }, [orgModal.isOpen, organizationId, projectOrganizations]);

  const onSubmit = (OrgPayload) => {
    CreateOrganization(OrgPayload);
  };

  const RenderTitle = useMemo(() => {
    if (organizationId) return "Update Organization";
    if (step === 1) return "Add Organization"; // current tenant
    if (step === 2) return "Find Organization"; // search with SPRID
    if (step === 3) return "Organization Details";
    if (step === 4) return "Create Organization";
    return "Manage Organization";
  }, [step, organizationId]);

  const contentBody = (
    <div>
      {/* ---------- STEP 1: From Current Tenant Organizations ---------- */}
      {step === 1 && (
        <div className="d-block">
          <div className="list-group mt-3">
            {projectOrganizations.map((org, idx) => (
              <div
                key={idx}
                className="list-group-item list-group-item-action cursor-pointer"
                onClick={() => setStep(3)}
              >
                <i className="bx bx-building-house me-2"></i>
                {org}
              </div>
            ))}
          </div>

          <div className="d-flex justify-content-between text-secondary mt-3">
            <button
              type="button"
              className="btn btn-xs btn-outline-secondary"
              onClick={() => setStep(2)} // jump to SPRID search
            >
              <i className="bx bx-search-alt"></i> Find with SPRID
            </button>
            <button
              type="button"
              className="btn btn-xs btn-secondary"
              onClick={() => setStep(4)}
            >
              <i className="bx bx-plus-circle me-2"></i>
              Add New Organization
            </button>
          </div>
        </div>
      )}

      {/* ---------- STEP 2: Search by Service Provider ID ---------- */}
      {step === 2 && (
        <div className="d-block">
          <div className="text-start mb-1">
            <Label className="text-secondary">Enter Service Provider ID</Label>
            <input
              type="text"
              className="form-control form-control-sm w-auto"
              placeholder="SPR - ID"
            />
          </div>

          {/* Example SPR results */}
          <div className="list-group mt-3">
            <div
              className="list-group-item list-group-item-action cursor-pointer"
              onClick={() => setStep(3)}
            >
              <i className="bx bx-building-house me-2"></i>
              Sample Organization (SPRID)
            </div>
          </div>

          <div className="d-flex justify-content-between gap-2 mt-3">
            <button
              type="button"
              className="btn btn-xs btn-outline-secondary"
              onClick={() => setStep(1)}
            >
              <i className="bx bx-left-arrow-alt"></i> Back
            </button>
            <button
              type="button"
              className="btn btn-xs btn-secondary"
              onClick={() => setStep(4)}
            >
              <i className="bx bx-plus-circle me-2"></i>
              Add New Organization
            </button>
          </div>
        </div>
      )}

      {/* ---------- STEP 3: Organization Details ---------- */}
      {step === 3 && (
        <div>
          <p className="text-muted small">
            Show organization details here (from SPR or tenant list). User
            selects services and clicks Add.
          </p>
          <div className="mb-2">
            <Label>Services Offered</Label>
            <ul className="list-group">
              <li className="list-group-item">
                <input type="checkbox" className="form-check-input me-2" />
                Service 1
              </li>
              <li className="list-group-item">
                <input type="checkbox" className="form-check-input me-2" />
                Service 2
              </li>
            </ul>
          </div>
          <div className="d-flex justify-content-between mt-3">
            <button
              type="button"
              className="btn btn-sm btn-outline-secondary"
              onClick={() => setStep(1)}
            >
              ← Back
            </button>
            <button type="button" className="btn btn-sm btn-primary">
              Add
            </button>
          </div>
        </div>
      )}

      {/* ---------- STEP 4: Create New Organization ---------- */}
      {step === 4 && (
        <FormProvider {...method}>
          <form className="form" onSubmit={handleSubmit(onSubmit)}>
            {/* same form as your code, unchanged */}
            {/* ... */}
          </form>
        </FormProvider>
      )}
    </div>
  );

  return (
    <Modal
      isOpen={orgModal.isOpen}
      onClose={orgModal.onClose}
      title={RenderTitle}
      body={contentBody}
    />
  );
};

export default ManageOrganization;