Odoo Popup button not working (JS, xml, Controller and manifest to troubleshoot) - odoo

Question

I have the following code:
odoo.define('ebs_portal_attendance.mn_tasks', function (require) {
"use strict";
$(document).ready(function () {
// Show create timesheet popup
$('#create_timesheet_button').on('click', function () {
var $modal = $('#create_timesheet_popup');
var task_id = $(this).data('task-id');
$modal.modal('show');
});
// Create timesheet
$('#create_timesheet_popup #create_timesheet_button').on('click', function () {
var $modal = $('#create_timesheet_popup');
var task_id = $modal.find('#task_id').val();
var name = $modal.find('#name').val();
var unit_amount = $modal.find('#unit_amount').val();
var date = $modal.find('#date').val();
ajax.jsonRpc("/my/tasks/create_timesheet", 'call', {
'values': {
'name': name,
'task_id': task_id,
'unit_amount': unit_amount,
'date': date,
}
}).then(function (result) {
if (result.success) {
$modal.modal('hide');
alert("Timesheet created successfully!");
} else {
alert("An error occurred while creating the timesheet.");
}
});
});
});
});
<template id="mn_tasks_list" inherit_id="project.portal_tasks_list">
<xpath expr="//t//t//t//tbody//t//tr//td[last()]" position="after">
<td>
<div class="o_download_pdf btn-toolbar flex-sm-nowrap">
<div>
<a role="button" class="btn btn-secondary flex-grow-1 mb-1 create_timesheet_button"
data-toggle="modal"
id='create_timesheet_button' data-target="#create_timesheet_popup" href="#">
<t>Create Timesheet</t>
</a>
</div>
</div>
</td>
</xpath>
</template>
</data>
<template id="create_timesheet_popup" name="Create Timesheet Popup">
<div id="create_timesheet_popup" class="modal fade">
<div class="modal-dialog modal-content"
style="border:solid 2px white; min-height:200px;max-width:800px;margin-top:10px">
<div class="modal-body" id="pop_html">
<a href="#" class="o_popup_btn_close o_not_editable o_default_snippet_text pull-right"
data-dismiss="modal" aria-hidden="true">X</a>
<div class="row">
<div class="col-md-12">
<form class="o_form_sheet">
<div class="o_form_sheet_name">
<h4>Create Timesheet</h4>
</div>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" name="name" required="required"/>
</div>
<div class="form-group">
<label for="task_id">Task:</label>
<select class="form-control" id="task_id" name="task_id" required="required">
<t t-foreach="tasks" t-as="task">
<option value="{{ task.id }}">{{ task.name }}</option>
</t>
</select>
</div>
<div class="form-group">
<label for="unit_amount">Hours:</label>
<input type="number" class="form-control" id="unit_amount" name="unit_amount"
required="required"/>
</div>
<div class="form-group">
<label for="date">Date:</label>
<input type="date" class="form-control" id="date" name="date" required="required"/>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" id="create_timesheet_button" data-task-id="{{ task.id }}">Create Timesheet</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
#http.route('/my/tasks/create_timesheet', type='json', auth='user')
def create_timesheet(self, values):
task_id = values.get('task_id')
name = values.get('name')
unit_amount = values.get('unit_amount')
date = values.get('date')
try:
# Create new timesheet record
new_timesheet = http.request.env['account.analytic.line'].sudo().create({
'name': name,
'task_id': task_id,
'unit_amount': unit_amount,
'date': date,
})
# Return success message
return {'success': True, 'message': 'Timesheet created successfully'}
except Exception as e:
# Return error message
return {'success': False, 'message': 'An error occurred while creating the timesheet: %s' % e}
with the manifest is as follows:
` # always loaded
'data': [
'security/security.xml',
'security/ir.model.access.csv',
'views/views.xml',
'views/templates.xml',
'views/inherited_templates.xml',
],
'assets': {
'web.assets_backend': [
'model_folder/static/src/js/portal_timesheets.js',
],
},`
My Problem is that button on the portal in the list of tasks where the button is located it's there but now it's not doing anything i tried checking the js via adding console.log("test") to see if anything would appear under the web browser's console but there's nothing... what i am doing wring here please do help me.
Thank you!!
I'm looking to have it work where when the user clicks on create timesheet, a popup would appear and it'll take the task's ID and task.analytical_account_id.id and other inputs to which it'll create at the end a record for that model and appears under his timesheets.