InertiaJs/React Controller Structure

Hey folks, I have a design pattern question for any of you experienced Inertia(react)/Larvel’ers out there! Love to collect any and all feedback as I am a solo developer on this project and just need someone to bounce some ideas off of.

So, for a little context. The project was spun up using Laravel breeze and incorporates InertiaJs/React The current design issue I am working through is this.... What is the best way to organise controllers?

Currently I have 3 relatively distinct types of controller:

• View controller: A traditional controller that returns a react view component, reaches for the requisite data and pumps it into the component/view via props Use Case: pretty much all route able views

    /**
     * Show the form for creating a new case.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        $clients = Role::where('name','client')->first()->users()->get();
        $counsellors = Role::where('name','counsellor')->first()->users()->get();
        return Inertia::render('Admin/IntakeManagement/IntakeManagementCreate', [
            'clients' => $clients,
            'counsellors' => $counsellors
        ]);
    }

• Resource Action? Controllers: A controller that simply provides access to a particular resource action via a route and redirects back to the previous view to force a re render/ re hydration of the data there to reflect the change. Use Case: Simple CRUD operations and to better facilitate flash messages.

    public function update($caseId, $userId)
    {
        $result = $this->caseService->addCaseUser($caseId, $userId);

        return redirect()->back()
            ->with('message', $result);
    }

• API/JSON controllers: A controller that will act more along the lines of a REST api call. Will perform a specific action and/or return a json response. This approach is used in the more deeply nested components to allow access to information and rendering responsibility to the component itself by leveraging the react life cycles and useEffect vs having to have data piped in via props. Use Case: A Live chat app that can effectively act as a self contained micro app that can handle its own IO.

    public function index($caseId)
    {
        $case = CounsellingCase::find($caseId);
        $messages = $case->messages()->with('user')->get();

        return response()->json([
            'messages' => $messages,
        ]);
    }

My concern here is that I have these paradigms sort of peppered throughout my flat file structure of controllers and looking forward I can foresee this becoming some what of a on boarding or maintenance/readability issue having all of these approaches used kind of at random.

So my question to you smart folks is... How would you approach the situation? Would you try and stick to one particular approach (refactor controllers to essentially be all API or refactor to not return JSON and drill props down to where they are needed)? Or could it simply be organised better (API/JSON folder for controllers that behave this way and try to just keep things organised)?

Let me know!