frontend/scripts/22_file_manager_workspace.sh

#!/usr/bin/env bash
set -euo pipefail

echo "[1/10] Creating File Manager..."

mkdir -p services/files
mkdir -p hooks

cat > services/files/client.js <<'EOC'
import api from "../api";

export async function listFiles(projectId){
    const {data}=await api.get(`/api/projects/${projectId}/files`);
    return data;
}

export async function readFile(projectId,path){
    const {data}=await api.get(`/api/projects/${projectId}/file`,{
        params:{path}
    });
    return data;
}

export async function saveFile(projectId,path,content){
    const {data}=await api.put(`/api/projects/${projectId}/file`,{
        path,
        content
    });
    return data;
}

export async function createFile(projectId,path){
    const {data}=await api.post(`/api/projects/${projectId}/file`,{
        path
    });
    return data;
}

export async function renameFile(projectId,oldPath,newPath){
    const {data}=await api.patch(`/api/projects/${projectId}/file`,{
        old_path:oldPath,
        new_path:newPath
    });
    return data;
}

export async function deleteFile(projectId,path){
    const {data}=await api.delete(`/api/projects/${projectId}/file`,{
        data:{path}
    });
    return data;
}

export async function uploadFile(projectId,file){
    const form=new FormData();
    form.append("file",file);

    const {data}=await api.post(
        `/api/projects/${projectId}/upload`,
        form,
        {
            headers:{
                "Content-Type":"multipart/form-data"
            }
        }
    );

    return data;
}

export async function downloadFile(projectId,path){
    const {data}=await api.get(
        `/api/projects/${projectId}/download`,
        {
            params:{path},
            responseType:"blob"
        }
    );

    return data;
}
EOC

cat > hooks/useFiles.js <<'EOC'
"use client";

import {useState} from "react";
import * as files from "../services/files/client";

export default function useFiles(){

const [loading,setLoading]=useState(false);

async function execute(fn,...args){
    setLoading(true);
    try{
        return await fn(...args);
    }finally{
        setLoading(false);
    }
}

return{
loading,
listFiles:(...a)=>execute(files.listFiles,...a),
readFile:(...a)=>execute(files.readFile,...a),
saveFile:(...a)=>execute(files.saveFile,...a),
createFile:(...a)=>execute(files.createFile,...a),
renameFile:(...a)=>execute(files.renameFile,...a),
deleteFile:(...a)=>execute(files.deleteFile,...a),
uploadFile:(...a)=>execute(files.uploadFile,...a),
downloadFile:(...a)=>execute(files.downloadFile,...a)
};

}
EOC

echo "[2/10] Installing..."
npm install

echo "[3/10] Building..."
npm run build >/dev/null

echo "[4/10] Verify..."

test -f services/files/client.js
test -f hooks/useFiles.js

echo "[5/10] File API installed."
echo "[6/10] File hooks installed."
echo "[7/10] Production build verified."
echo "[8/10] Frontend verified."
echo "[9/10] Ready."
echo "[10/10] Complete."