I need to fetch the documents in my Shared Folder to a Surf page that I created in Alfresco 7.2

[mohdamaan000077]

I am new to Alfresco and have created a surf page in which I want to  fetch the documents in my Shared Folder in "Available Documents" frame that I have created. Could someone guide me of how can I achieve that?  

here is my ftl file:

<#include "/org/alfresco/include/alfresco-template.ftl" />

<@templateHeader></@>

<@templateBody>
<@markup id="alf-hd">
<div id="alf-hd">
<@region scope="global" id="share-header" chromeless="true"/>
</div>
</@>

<@markup id="bd">
<div id="bd">
<h1>Document Summarization</h1>
<div id="documentContainer">
<div id="documentListContainer">
<h2>Available Documents</h2>
<ul id="documentList"></ul>
</div>
<div id="summaryContainer">
<h2>Document Summary</h2>
<div id="documentSummary">Select a document to view its summary.</div>
</div>
</div>
</div>
</@>

</@templateBody>

<@templateFooter>
<@markup id="alf-ft">
<div id="alf-ft">
<@region id="footer" scope="global" />
</div>
</@>
</@templateFooter>

<!-- Load JavaScript file for document fetching and summarization -->
<script type="text/javascript" src="${page.url.context}/components/summaries/documentSummarization.js"></script>

<!-- Styling for layout -->
<style>
#documentContainer {
display: flex;
gap: 20px;
justify-content: space-between;
padding: 20px;
}
#documentListContainer, #summaryContainer {
width: 48%;
padding: 15px;
border: 1px solid #ccc;
background-color: #ffffff;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
}
ul {
list-style: none;
padding: 0;
}
li {
cursor: pointer;
padding: 8px;
border-bottom: 1px solid #ddd;
transition: background-color 0.2s;
}
li:hover {
background-color: #f4f4f4;
}
h1, h2 {
color: #333;
}
#documentSummary {
min-height: 100px;
padding: 10px;
background-color: #fafafa;
border: 1px solid #ddd;
border-radius: 5px;
}
</style>

and here is my file in which I am trying to call my shared files.-

(function () {
try {
var siteName = "clavis-technologies"; // Update this if needed
var searchUrl = "/alfresco/api/-default-/public/search/versions/1/search";

// Define the search query for files in the document library
var requestBody = JSON.stringify({
query: {
language: "afts",
query: 'PATH:"/app:company_home/st:sites/cm:' + siteName + '/cm:documentLibrary//*" AND TYPE:"cm:content"'
}
});

// Make the API request
var connector = remote.connect("alfresco");
var response = connector.post(searchUrl, requestBody, "application/json");

if (response.status == 200) {
var jsonResponse = JSON.parse(response.response);
model.files = jsonResponse.list.entries.map(function (entry) {
return {
name: entry.entry.name,
nodeRef: entry.entry.id
};
});
} else {
status.code = response.status;
status.message = "Failed to fetch document data: " + response.response;
status.redirect = true;
}
} catch (error) {
status.code = 500;
status.message = "Error executing script: " + error.message;
status.redirect = true;
}
})();