I am making an admin and user dashboard for a food ordering app.
Right now i have something like:

src/
├── app/               
│   ├── api/           
│   ├── (auth)   
│   ├── (marketing)         
│   └── (protected)           
├── components/     
├── lib/                    
│   ├── supabase/         
│   │   ├── client.ts   # Client Component client
│   │   ├── proxy.ts  # Refreshing Auth token & passing to browser/server comp.        
│   │   └── server.ts   # Server Component client
│   └── utils.ts            
├── types/
├── constants/
├── hooks/
├── styles/           
└── proxy.ts            # Middleware

Rn I am calling supabse direclty in client comp like:

"use client";
...
import { supabase } from "@/lib/supabase/client";
...

export default function OrdersManager() {
...
  async function loadOrders() {
    setLoading(true);
    let query = supabase
      .from("orders")
      .select("*")
      .order("created_at", { ascending: false })
      .limit(100);
    if (statusFilter !== "all") query = query.eq("status", statusFilter);
    const { data } = await query;
    setOrders(data || []);
    setLoading(false);
  }

return (
  ...
   <button
     onClick={loadOrders}
     className="flex items-center gap-1.5 text-xs text-brand-muted hover:text-brand-cream">
         <RefreshCw size={13} /> Refresh
   </button>
  ...
)}

And I am thinking to restructure it by having:
1) DAL (/lib/data/...) for fetching or querying
2) Server actions (/lib/actions/...) for mutations

And put security checks in all of them.

Is this a good/standard approach?