New changes.
parent
4b0054c573
commit
88f136be9b
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,192 +1,68 @@
|
|||||||
document.addEventListener("DOMContentLoaded", function () {
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
|
||||||
// Function to open the modal
|
function openModalWithDimensions(url, width, height) {
|
||||||
function openModal(url) {
|
const modalUrl = url;
|
||||||
const modalContainer = document.getElementById("popUpModal");
|
openModal(modalUrl);
|
||||||
|
|
||||||
//Get the iframe element
|
|
||||||
const iframe = document.getElementById("popupModalFrame");
|
const iframe = document.getElementById("popupModalFrame");
|
||||||
|
iframe.style.height = height;
|
||||||
|
iframe.style.width = width;
|
||||||
|
}
|
||||||
|
|
||||||
//Get the body element
|
function openModal(url) {
|
||||||
|
const modalContainer = document.getElementById("popUpModal");
|
||||||
|
const iframe = document.getElementById("popupModalFrame");
|
||||||
const body = document.body;
|
const body = document.body;
|
||||||
|
|
||||||
//Disable scrolling
|
|
||||||
body.style.overflow = "hidden";
|
body.style.overflow = "hidden";
|
||||||
|
|
||||||
//Set the URL of the iframe to load the external content
|
|
||||||
iframe.src = url;
|
iframe.src = url;
|
||||||
|
|
||||||
//Display the modal
|
|
||||||
modalContainer.style.display = "flex";
|
modalContainer.style.display = "flex";
|
||||||
}
|
}
|
||||||
|
|
||||||
//Function to close the modal
|
|
||||||
function closeModal() {
|
function closeModal() {
|
||||||
const modalContainer = document.getElementById("popUpModal");
|
const modalContainer = document.getElementById("popUpModal");
|
||||||
|
|
||||||
const iframe = document.getElementById("popupModalFrame");
|
const iframe = document.getElementById("popupModalFrame");
|
||||||
|
|
||||||
//Clear the URL to stop loading the content
|
|
||||||
iframe.src = "";
|
|
||||||
|
|
||||||
const body = document.body;
|
const body = document.body;
|
||||||
|
|
||||||
//Enable scrolling
|
iframe.src = "";
|
||||||
body.style.overflow = "auto";
|
body.style.overflow = "auto";
|
||||||
|
|
||||||
//Hide the modal
|
|
||||||
modalContainer.style.display = "none";
|
modalContainer.style.display = "none";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function addButtonClickListener(buttonId, width, height) {
|
||||||
|
const button = document.getElementById(buttonId);
|
||||||
|
if (button) {
|
||||||
|
button.addEventListener("click", () => {
|
||||||
|
const modalUrl = button.getAttribute("data-modal-url");
|
||||||
|
openModalWithDimensions(modalUrl, width, height);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const closeButton = document.getElementById("closeModalButton");
|
// Add button click listeners with dimensions
|
||||||
|
addButtonClickListener("addStatusButton", "450px", "200px");
|
||||||
|
addButtonClickListener("addNoteButton", "400px", "225px");
|
||||||
|
addButtonClickListener("addFileButton", "500px", "320px");
|
||||||
|
addButtonClickListener("addCredentialsButton", "500px", "300px");
|
||||||
|
addButtonClickListener("updateStatusButton", "fit-content", "160px");
|
||||||
|
addButtonClickListener("showPointsButton", "600px", "450px");
|
||||||
|
addButtonClickListener("addPointButton", "500px", "225px");
|
||||||
|
addButtonClickListener("timelineButton", "600px", "450px");
|
||||||
|
addButtonClickListener("addTimeButton", "300px", "270px");
|
||||||
|
addButtonClickListener("deleteTaskButton", "fit-content", "130px");
|
||||||
|
|
||||||
|
const closeButton = document.getElementById("closeModalButton");
|
||||||
closeButton.addEventListener("click", () => {
|
closeButton.addEventListener("click", () => {
|
||||||
closeModal();
|
closeModal();
|
||||||
});
|
});
|
||||||
|
|
||||||
const modalContainer = document.getElementById("popUpModal");
|
const modalContainer = document.getElementById("popUpModal");
|
||||||
// Event listener to trigger the modal when clicking outside of it
|
|
||||||
window.addEventListener("click", function (event) {
|
window.addEventListener("click", function (event) {
|
||||||
if (event.target === modalContainer) {
|
if (event.target === modalContainer) {
|
||||||
closeModal();
|
closeModal();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
//ADD STATUS MODAL
|
// TO RELOAD THE TOP WINDOW AFTER ADDING
|
||||||
const addStatusButton = document.getElementById("addStatusButton");
|
// window.top.location.reload();
|
||||||
|
});
|
||||||
addStatusButton.addEventListener("click", () => {
|
|
||||||
const modalUrl = addStatusButton.getAttribute("data-modal-url");
|
|
||||||
|
|
||||||
openModal(modalUrl);
|
|
||||||
|
|
||||||
const iframe = document.getElementById("popupModalFrame");
|
|
||||||
iframe.style.height = "200px"
|
|
||||||
iframe.style.width = "450px"
|
|
||||||
});
|
|
||||||
|
|
||||||
//ADD NOTE MODAL
|
|
||||||
const addNoteButton = document.getElementById("addNoteButton");
|
|
||||||
|
|
||||||
addNoteButton.addEventListener("click", () => {
|
|
||||||
// Retrieve the URL from the data attribute
|
|
||||||
const modalUrl = addNoteButton.getAttribute("data-modal-url");
|
|
||||||
|
|
||||||
// Open the modal with the retrieved URL
|
|
||||||
openModal(modalUrl);
|
|
||||||
|
|
||||||
const iframe = document.getElementById("popupModalFrame");
|
|
||||||
iframe.style.height = "225px"
|
|
||||||
iframe.style.width = "400px"
|
|
||||||
});
|
|
||||||
|
|
||||||
//ADD FILE MODAL (in the inner project page)
|
|
||||||
const addFileButton = document.getElementById("addFileButton");
|
|
||||||
|
|
||||||
addFileButton.addEventListener("click", () => {
|
|
||||||
const modalUrl = addFileButton.getAttribute("data-modal-url");
|
|
||||||
|
|
||||||
openModal(modalUrl);
|
|
||||||
|
|
||||||
const iframe = document.getElementById("popupModalFrame");
|
|
||||||
iframe.style.height = "320px"
|
|
||||||
iframe.style.width = "500px"
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
//ADD CREDENTIALS MODAL (in the inner project page)
|
|
||||||
const addCredentialsButton = document.getElementById("addCredentialsButton");
|
|
||||||
|
|
||||||
addCredentialsButton.addEventListener("click", () => {
|
|
||||||
const modalUrl = addCredentialsButton.getAttribute("data-modal-url");
|
|
||||||
|
|
||||||
openModal(modalUrl);
|
|
||||||
|
|
||||||
const iframe = document.getElementById("popupModalFrame");
|
|
||||||
iframe.style.height = "300px"
|
|
||||||
iframe.style.width = "500px"
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
//SHOW TASK MODALS
|
|
||||||
//Show the update status modal
|
|
||||||
const updateStatusButton = document.getElementById("updateStatusButton");
|
|
||||||
|
|
||||||
updateStatusButton.addEventListener("click", () => {
|
|
||||||
const modalUrl = updateStatusButton.getAttribute("data-modal-url");
|
|
||||||
|
|
||||||
openModal(modalUrl);
|
|
||||||
|
|
||||||
const iframe = document.getElementById("popupModalFrame");
|
|
||||||
iframe.style.height = "160px"
|
|
||||||
iframe.style.width = "fit-content"
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
//Show the show points modal
|
|
||||||
const showPointsButton = document.getElementById("showPointsButton");
|
|
||||||
|
|
||||||
showPointsButton.addEventListener("click", () => {
|
|
||||||
const modalUrl = showPointsButton.getAttribute("data-modal-url");
|
|
||||||
|
|
||||||
openModal(modalUrl);
|
|
||||||
|
|
||||||
const iframe = document.getElementById("popupModalFrame");
|
|
||||||
iframe.style.height = "450px"
|
|
||||||
iframe.style.width = "600px"
|
|
||||||
});
|
|
||||||
|
|
||||||
//Show the add point modal
|
|
||||||
const addPointButton = document.getElementById("addPointButton");
|
|
||||||
|
|
||||||
addPointButton.addEventListener("click", () => {
|
|
||||||
const modalUrl = addPointButton.getAttribute("data-modal-url");
|
|
||||||
|
|
||||||
openModal(modalUrl);
|
|
||||||
|
|
||||||
const iframe = document.getElementById("popupModalFrame");
|
|
||||||
iframe.style.height = "225px"
|
|
||||||
iframe.style.width = "500px"
|
|
||||||
});
|
|
||||||
|
|
||||||
//Show the Timeline modal
|
|
||||||
const timelineButton = document.getElementById("timelineButton");
|
|
||||||
|
|
||||||
timelineButton.addEventListener("click", () => {
|
|
||||||
const modalUrl = timelineButton.getAttribute("data-modal-url");
|
|
||||||
|
|
||||||
openModal(modalUrl);
|
|
||||||
|
|
||||||
const iframe = document.getElementById("popupModalFrame");
|
|
||||||
iframe.style.height = "450px"
|
|
||||||
iframe.style.width = "600px"
|
|
||||||
});
|
|
||||||
|
|
||||||
//Show the add timeline modal
|
|
||||||
const addTimeButton = document.getElementById("addTimeButton");
|
|
||||||
|
|
||||||
addTimeButton.addEventListener("click", () => {
|
|
||||||
const modalUrl = addTimeButton.getAttribute("data-modal-url");
|
|
||||||
|
|
||||||
openModal(modalUrl);
|
|
||||||
|
|
||||||
const iframe = document.getElementById("popupModalFrame");
|
|
||||||
iframe.style.height = "270px"
|
|
||||||
iframe.style.width = "300px"
|
|
||||||
});
|
|
||||||
|
|
||||||
//Show the delete task modal
|
|
||||||
const deleteTaskButton = document.getElementById("deleteTaskButton");
|
|
||||||
|
|
||||||
deleteTaskButton.addEventListener("click", () => {
|
|
||||||
const modalUrl = deleteTaskButton.getAttribute("data-modal-url");
|
|
||||||
|
|
||||||
openModal(modalUrl);
|
|
||||||
|
|
||||||
const iframe = document.getElementById("popupModalFrame");
|
|
||||||
iframe.style.height = "130px"
|
|
||||||
iframe.style.width = "fit-content"
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|||||||
@ -0,0 +1,94 @@
|
|||||||
|
{% extends "main.html" %}
|
||||||
|
{%load static%}
|
||||||
|
{% block content %}
|
||||||
|
|
||||||
|
|
||||||
|
<div class="w-full px-10 mb-4">
|
||||||
|
<div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
|
||||||
|
<h1 class="text-3xl text-slate-800 text-center font-semibold">
|
||||||
|
Add User
|
||||||
|
</h1>
|
||||||
|
<form method="POST" action="{% url 'save_customer' %}">
|
||||||
|
{% csrf_token %}
|
||||||
|
<div class="w-full flex flex-col gap-3 justify-center items-center mt-5">
|
||||||
|
|
||||||
|
<input type="text" placeholder="Username"
|
||||||
|
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
|
||||||
|
|
||||||
|
<input type="password" placeholder="Password"
|
||||||
|
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
|
||||||
|
|
||||||
|
<input type="password" placeholder="Password Confirmation"
|
||||||
|
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
|
||||||
|
|
||||||
|
<div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<input required name="cv" type="file" id="actual-btn" accept="image/*" hidden multiple />
|
||||||
|
<span id="file-name" class="text-gray-500 text-base focus:outline-none outline-none">Upload
|
||||||
|
Profile Picture</span>
|
||||||
|
<label for="actual-btn"
|
||||||
|
class="bg-transparent text-gray-500 border border-white px-4 py-2 h-14 cursor-pointer flex items-center"><i
|
||||||
|
class="fa fa-upload"></i></label>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- WHEN THE USER CHOOSE A FILE THE NAME OF THE FILE WILL APPEAR IN THE SPAN -->
|
||||||
|
<script>
|
||||||
|
const fileInput = document.getElementById('actual-btn');
|
||||||
|
const fileNameSpan = document.getElementById('file-name');
|
||||||
|
|
||||||
|
fileInput.addEventListener('change', (event) => {
|
||||||
|
const selectedFiles = event.target.files;
|
||||||
|
if (selectedFiles.length > 0) {
|
||||||
|
const fileNames = Array.from(selectedFiles).map(file => file.name).join(', ');
|
||||||
|
fileNameSpan.textContent = fileNames;
|
||||||
|
} else {
|
||||||
|
fileNameSpan.textContent = 'Upload Documents (PDF, docx)';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<select id=""
|
||||||
|
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
|
||||||
|
<option value="" selected disabled>Groups</option>
|
||||||
|
<option>Group 1</option>
|
||||||
|
<option>Group 2</option>
|
||||||
|
<option>Group 3</option>
|
||||||
|
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<input name="first_name" type="text" placeholder="First Name"
|
||||||
|
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
|
||||||
|
|
||||||
|
<input name="last_name" type="text" placeholder="Last Name"
|
||||||
|
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
|
||||||
|
|
||||||
|
<input name="email" type="email" placeholder="Email"
|
||||||
|
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
|
||||||
|
|
||||||
|
<div class="w-full flex justify-center items-center mt-3">
|
||||||
|
<button type="submit"
|
||||||
|
class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500">Add
|
||||||
|
User</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- POPUP MODAL -->
|
||||||
|
<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" id="popUpModal">
|
||||||
|
<div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
|
||||||
|
<button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
|
||||||
|
id="closeModalButton">
|
||||||
|
<i class="fa fa-close"></i>
|
||||||
|
</button>
|
||||||
|
<iframe id="popupModalFrame" frameborder="0"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% endblock content %}
|
||||||
@ -0,0 +1,273 @@
|
|||||||
|
{% extends "main.html" %}
|
||||||
|
{%load static%}
|
||||||
|
{% block title %}My Projects{% endblock %}
|
||||||
|
{% block content %}
|
||||||
|
<!-- NOTES SECTION -->
|
||||||
|
<div class="w-full h-fit flex justify-between items-center px-10 pb-5">
|
||||||
|
<div class="relative w-full h-fit bg-white shadow-md rounded-md p-5">
|
||||||
|
<div class="w-full flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<p class="text-base text-gray-500">Recent Note:</p>
|
||||||
|
<p class="text-slate-700">Send an Email to Salim.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end items-center gap-4">
|
||||||
|
<button
|
||||||
|
class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
|
||||||
|
id="showNotesButton">Show
|
||||||
|
Notes</button>
|
||||||
|
<button
|
||||||
|
class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
|
||||||
|
id="addNoteButton">
|
||||||
|
<i class="fa fa-plus"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
|
||||||
|
<div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
|
||||||
|
id="notesContainer">
|
||||||
|
<div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
|
||||||
|
<p class="text-base text-slate-800">Send an Email to Salim.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
|
||||||
|
<p class="text-base text-slate-80">Contact the client.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
|
||||||
|
<p class="text-base text-slate-80">Add daily report at the end of the day.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
|
||||||
|
<p class="text-base text-slate-80">Add daily report at the end of the day.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
|
||||||
|
<p class="text-base text-slate-80">Add daily report at the end of the day.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
|
||||||
|
<p class="text-base text-slate-80">Add daily report at the end of the day.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- BUSINESSES AND USERS ACTIVITY SECTION -->
|
||||||
|
<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
|
||||||
|
<!-- LEFT SIDE / BUSINESSES SECTION -->
|
||||||
|
<div class="w-[74.5%]">
|
||||||
|
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
|
||||||
|
<h1 class="text-slate-800 text-[30px] font-semibold">Businesses</h1>
|
||||||
|
|
||||||
|
<!-- FILTERING -->
|
||||||
|
<div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-between items-center">
|
||||||
|
<div class="flex justify-start items-center gap-5">
|
||||||
|
<div class="relative h-fit w-fit flex items-center">
|
||||||
|
<input type="text" placeholder="Enter Business Name"
|
||||||
|
class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative">
|
||||||
|
<button
|
||||||
|
class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
|
||||||
|
<i class="fa fa-search"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="{% url 'addbusiness' %}">
|
||||||
|
<button
|
||||||
|
class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Add
|
||||||
|
Business</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-5 w-full h-fit">
|
||||||
|
<div class="w-full border-t border-x border-gray-300 rounded-t-md mt-3">
|
||||||
|
<!-- HEADER -->
|
||||||
|
<div class="w-full h-[60px] flex items-center justify-between">
|
||||||
|
<div class="w-[35%] h-full border-r border-gray-300 flex justify-center items-center">
|
||||||
|
<p class="text-sm">Name</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
|
||||||
|
<p class="text-sm">Business Type</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
|
||||||
|
<p class="text-sm">Financial number</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-[15%] h-full flex justify-center items-center">
|
||||||
|
<p class="text-sm">Actions</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- BODY -->
|
||||||
|
<div class="w-full border-t border-gray-300">
|
||||||
|
<!-- ROW -->
|
||||||
|
<div class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
|
||||||
|
<div class="w-[35%] h-full border-r border-gray-300 flex justify-center items-center">
|
||||||
|
<p class="text-sm">HII</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
|
||||||
|
<p class="text-sm">Non-profit</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
|
||||||
|
<p class="text-sm">2022</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-[15%] h-full flex justify-center items-center gap-3">
|
||||||
|
<a href="{% url 'businessdetails' %}">
|
||||||
|
<div class="text-[18px] text-blue-500 cursor-pointer">
|
||||||
|
<i class="fa fa-eye"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<div class="text-[18px] text-blue-500 cursor-pointer">
|
||||||
|
<i class="fa fa-edit"></i>
|
||||||
|
</div>
|
||||||
|
<div class="text-[18px] text-red-500 cursor-pointer">
|
||||||
|
<i class="fa fa-trash"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- RIGHT SIDE / USERS ACTIVITY -->
|
||||||
|
<div class="w-[23%] bg-white h-fit rounded-md shadow-md p-5">
|
||||||
|
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
|
||||||
|
<div class="w-full h-fit mt-2">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 1ST ROW -->
|
||||||
|
<div class="w-full flex flex-col py-3">
|
||||||
|
<div class="w-full flex flex-col justify-center items-start gap-2">
|
||||||
|
<div class="w-full flex justify-between items-center gap-2">
|
||||||
|
<div class="flex justify-start gap-2">
|
||||||
|
<div class="w-[45px] h-[45px] rounded-full">
|
||||||
|
<img src='{% static "images/avatar.svg" %}' alt="user profile"
|
||||||
|
class="w-full h-full object-cover">
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<h1 class="text-sm text-slate-700 font-semibold">Nataly</h1>
|
||||||
|
<p class="text-sm text-gray-500">11:30 AM</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cursor-pointer">
|
||||||
|
<i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Status -->
|
||||||
|
<div class="w-full">
|
||||||
|
<p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add comment section -->
|
||||||
|
<div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
|
||||||
|
<input type="text" placeholder="Add Comment..."
|
||||||
|
class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
|
||||||
|
<button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
|
||||||
|
<i class="fa fa-send" style="color: white; font-size: 15px;"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 2NT ROW -->
|
||||||
|
<div class="w-full flex flex-col py-3">
|
||||||
|
<div class="w-full flex flex-col justify-center items-start gap-2">
|
||||||
|
<div class="w-full flex justify-between items-center gap-2">
|
||||||
|
<div class="flex justify-start gap-2">
|
||||||
|
<div class="w-[45px] h-[45px] rounded-full">
|
||||||
|
<img src='{% static "images/avatar2.png" %}' alt="user profile"
|
||||||
|
class="w-full h-full object-cover">
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<h1 class="text-sm text-slate-700 font-semibold">Salim</h1>
|
||||||
|
<p class="text-sm text-gray-500">11:30 AM</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cursor-pointer">
|
||||||
|
<i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Status -->
|
||||||
|
<div class="w-full">
|
||||||
|
<p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add comment section -->
|
||||||
|
<div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
|
||||||
|
<input type="text" placeholder="Add Comment..."
|
||||||
|
class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
|
||||||
|
<button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
|
||||||
|
<i class="fa fa-send" style="color: white; font-size: 15px;"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 3RD ROW -->
|
||||||
|
<div class="w-full flex flex-col py-3">
|
||||||
|
<div class="w-full flex flex-col justify-center items-start gap-2">
|
||||||
|
<div class="w-full flex justify-between items-center gap-2">
|
||||||
|
<div class="flex justify-start gap-2">
|
||||||
|
<div class="w-[45px] h-[45px] rounded-full">
|
||||||
|
<img src='{% static "images/avatar3.png" %}' alt="user profile"
|
||||||
|
class="w-full h-full object-cover">
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<h1 class="text-sm text-slate-700 font-semibold">Emile</h1>
|
||||||
|
<p class="text-sm text-gray-500">11:30 AM</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cursor-pointer">
|
||||||
|
<i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Status -->
|
||||||
|
<div class="w-full">
|
||||||
|
<p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add comment section -->
|
||||||
|
<div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
|
||||||
|
<input type="text" placeholder="Add Comment..."
|
||||||
|
class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
|
||||||
|
<button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
|
||||||
|
<i class="fa fa-send" style="color: white; font-size: 15px;"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- POPUP MODAL -->
|
||||||
|
<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" id="popUpModal">
|
||||||
|
<div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
|
||||||
|
<button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
|
||||||
|
id="closeModalButton">
|
||||||
|
<i class="fa fa-close"></i>
|
||||||
|
</button>
|
||||||
|
<iframe id="popupModalFrame" frameborder="0"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!---------------------- JS SCRIPTS -------------------->
|
||||||
|
|
||||||
|
<!-- TO SHOW ALL THE ADDED NOTES BY THE USER WHEN CLICKING ON THE SHOW NOTES BUTTON -->
|
||||||
|
<script type="text/javascript" src='{% static "js/show-notes.js" %}'></script>
|
||||||
|
|
||||||
|
{% endblock content %}
|
||||||
@ -0,0 +1,250 @@
|
|||||||
|
{% extends "main.html" %}
|
||||||
|
{%load static%}
|
||||||
|
{% block title %}My Projects{% endblock %}
|
||||||
|
{% block content %}
|
||||||
|
<!-- NOTES SECTION -->
|
||||||
|
<div class="w-full h-fit flex justify-between items-center px-10 pb-5">
|
||||||
|
<div class="relative w-full h-fit bg-white shadow-md rounded-md p-5">
|
||||||
|
<div class="w-full flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<p class="text-base text-gray-500">Recent Note:</p>
|
||||||
|
<p class="text-slate-700">Send an Email to Salim.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end items-center gap-4">
|
||||||
|
<button
|
||||||
|
class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
|
||||||
|
id="showNotesButton">Show
|
||||||
|
Notes</button>
|
||||||
|
<button
|
||||||
|
class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
|
||||||
|
id="addNoteButton">
|
||||||
|
<i class="fa fa-plus"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
|
||||||
|
<div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
|
||||||
|
id="notesContainer">
|
||||||
|
<div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
|
||||||
|
<p class="text-base text-slate-800">Send an Email to Salim.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
|
||||||
|
<p class="text-base text-slate-80">Contact the client.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
|
||||||
|
<p class="text-base text-slate-80">Add daily report at the end of the day.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
|
||||||
|
<p class="text-base text-slate-80">Add daily report at the end of the day.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
|
||||||
|
<p class="text-base text-slate-80">Add daily report at the end of the day.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
|
||||||
|
<p class="text-base text-slate-80">Add daily report at the end of the day.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- USER DETAIL AND USERS ACTIVITY SECTION -->
|
||||||
|
<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
|
||||||
|
|
||||||
|
<!-- LEFT SIDE / USER DETAIL SECTION -->
|
||||||
|
<div class="w-[74.5%] bg-white h-fit rounded-md shadow-md p-5">
|
||||||
|
<div class="w-full h-[70px] flex justify-between items-center bg-gray-100 shadow-md rounded-md px-3 py-1 mt-4">
|
||||||
|
<div class="flex justify-start items-center gap-2">
|
||||||
|
<div class="w-[55px] h-[55px] bg-slate-600 rounded-full">
|
||||||
|
<img src='{% static "images/avatar.svg" %}' alt="user-image"
|
||||||
|
class="w-full h-full object-cover rounded-full">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-gray-400 text-xl">Nataly</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end items-center gap-3">
|
||||||
|
<button
|
||||||
|
class="w-fit text-base px-3 py-2 bg-red-500 text-white outline-none border border-red-500 rounded-md cursor-pointer hover:bg-white hover:text-red-500">Delete
|
||||||
|
User</button>
|
||||||
|
<button
|
||||||
|
class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Edit
|
||||||
|
User</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-full flex flex-col gap-4 mt-5">
|
||||||
|
<div>
|
||||||
|
<p class="text-gray-500 text-xl">Username: <span
|
||||||
|
class="text-slate-800 text-xl font-semibold">Nataly</span></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p class="text-gray-500 text-xl">Password: <span class="text-slate-800 text-xl font-semibold">--</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p class="text-gray-500 text-xl">Group: <span class="text-slate-800 text-xl font-semibold">Group
|
||||||
|
1</span></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p class="text-gray-500 text-xl">First Name: <span
|
||||||
|
class="text-slate-800 text-xl font-semibold">Nataly</span></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p class="text-gray-500 text-xl">Last Name: <span
|
||||||
|
class="text-slate-800 text-xl font-semibold">Nataly</span></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p class="text-gray-500 text-xl">Email: <span
|
||||||
|
class="text-slate-800 text-xl font-semibold">nataly.aw@ositcom.net</span></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- RIGHT SIDE / USERS ACTIVITY -->
|
||||||
|
<div class="w-[23%] bg-white h-fit rounded-md shadow-md p-5">
|
||||||
|
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
|
||||||
|
<div class="w-full h-fit mt-2">
|
||||||
|
|
||||||
|
<!-- 1ST ROW -->
|
||||||
|
<div class="w-full flex flex-col py-3">
|
||||||
|
<div class="w-full flex flex-col justify-center items-start gap-2">
|
||||||
|
<div class="w-full flex justify-between items-center gap-2">
|
||||||
|
<div class="flex justify-start gap-2">
|
||||||
|
<div class="w-[45px] h-[45px] rounded-full">
|
||||||
|
<img src='{% static "images/avatar.svg" %}' alt="user profile"
|
||||||
|
class="w-full h-full object-cover">
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<h1 class="text-sm text-slate-700 font-semibold">Nataly</h1>
|
||||||
|
<p class="text-sm text-gray-500">11:30 AM</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cursor-pointer">
|
||||||
|
<i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Status -->
|
||||||
|
<div class="w-full">
|
||||||
|
<p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add comment section -->
|
||||||
|
<div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
|
||||||
|
<input type="text" placeholder="Add Comment..."
|
||||||
|
class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
|
||||||
|
<button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
|
||||||
|
<i class="fa fa-send" style="color: white; font-size: 15px;"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 2NT ROW -->
|
||||||
|
<div class="w-full flex flex-col py-3">
|
||||||
|
<div class="w-full flex flex-col justify-center items-start gap-2">
|
||||||
|
<div class="w-full flex justify-between items-center gap-2">
|
||||||
|
<div class="flex justify-start gap-2">
|
||||||
|
<div class="w-[45px] h-[45px] rounded-full">
|
||||||
|
<img src='{% static "images/avatar2.png" %}' alt="user profile"
|
||||||
|
class="w-full h-full object-cover">
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<h1 class="text-sm text-slate-700 font-semibold">Salim</h1>
|
||||||
|
<p class="text-sm text-gray-500">11:30 AM</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cursor-pointer">
|
||||||
|
<i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Status -->
|
||||||
|
<div class="w-full">
|
||||||
|
<p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add comment section -->
|
||||||
|
<div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
|
||||||
|
<input type="text" placeholder="Add Comment..."
|
||||||
|
class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
|
||||||
|
<button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
|
||||||
|
<i class="fa fa-send" style="color: white; font-size: 15px;"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 3RD ROW -->
|
||||||
|
<div class="w-full flex flex-col py-3">
|
||||||
|
<div class="w-full flex flex-col justify-center items-start gap-2">
|
||||||
|
<div class="w-full flex justify-between items-center gap-2">
|
||||||
|
<div class="flex justify-start gap-2">
|
||||||
|
<div class="w-[45px] h-[45px] rounded-full">
|
||||||
|
<img src='{% static "images/avatar3.png" %}' alt="user profile"
|
||||||
|
class="w-full h-full object-cover">
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<h1 class="text-sm text-slate-700 font-semibold">Emile</h1>
|
||||||
|
<p class="text-sm text-gray-500">11:30 AM</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cursor-pointer">
|
||||||
|
<i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Status -->
|
||||||
|
<div class="w-full">
|
||||||
|
<p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add comment section -->
|
||||||
|
<div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
|
||||||
|
<input type="text" placeholder="Add Comment..."
|
||||||
|
class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
|
||||||
|
<button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
|
||||||
|
<i class="fa fa-send" style="color: white; font-size: 15px;"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- POPUP MODAL -->
|
||||||
|
<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" id="popUpModal">
|
||||||
|
<div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
|
||||||
|
<button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
|
||||||
|
id="closeModalButton">
|
||||||
|
<i class="fa fa-close"></i>
|
||||||
|
</button>
|
||||||
|
<iframe id="popupModalFrame" frameborder="0"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!---------------------- JS SCRIPTS -------------------->
|
||||||
|
|
||||||
|
<!-- TO SHOW ALL THE ADDED NOTES BY THE USER WHEN CLICKING ON THE SHOW NOTES BUTTON -->
|
||||||
|
<script type="text/javascript" src='{% static "js/show-notes.js" %}'></script>
|
||||||
|
|
||||||
|
<!-- THE SCRIPT FOR THE EPICS BAR -->
|
||||||
|
<script type="text/javascript" src='{% static "js/epics.js" %}'></script>
|
||||||
|
{% endblock content %}
|
||||||
@ -0,0 +1,266 @@
|
|||||||
|
{% extends "main.html" %}
|
||||||
|
{%load static%}
|
||||||
|
{% block title %}My Projects{% endblock %}
|
||||||
|
{% block content %}
|
||||||
|
<!-- NOTES SECTION -->
|
||||||
|
<div class="w-full h-fit flex justify-between items-center px-10 pb-5">
|
||||||
|
<div class="relative w-full h-fit bg-white shadow-md rounded-md p-5">
|
||||||
|
<div class="w-full flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<p class="text-base text-gray-500">Recent Note:</p>
|
||||||
|
<p class="text-slate-700">Send an Email to Salim.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end items-center gap-4">
|
||||||
|
<button
|
||||||
|
class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
|
||||||
|
id="showNotesButton">Show
|
||||||
|
Notes</button>
|
||||||
|
<button
|
||||||
|
class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
|
||||||
|
id="addNoteButton">
|
||||||
|
<i class="fa fa-plus"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
|
||||||
|
<div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
|
||||||
|
id="notesContainer">
|
||||||
|
<div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
|
||||||
|
<p class="text-base text-slate-800">Send an Email to Salim.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
|
||||||
|
<p class="text-base text-slate-80">Contact the client.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
|
||||||
|
<p class="text-base text-slate-80">Add daily report at the end of the day.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
|
||||||
|
<p class="text-base text-slate-80">Add daily report at the end of the day.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
|
||||||
|
<p class="text-base text-slate-80">Add daily report at the end of the day.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
|
||||||
|
<p class="text-base text-slate-80">Add daily report at the end of the day.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- USERS AND USERS ACTIVITY SECTION -->
|
||||||
|
<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
|
||||||
|
<!-- LEFT SIDE / USERS SECTION -->
|
||||||
|
<div class="w-[74.5%]">
|
||||||
|
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
|
||||||
|
<h1 class="text-slate-800 text-[30px] font-semibold">Users</h1>
|
||||||
|
|
||||||
|
<!-- FILTERING -->
|
||||||
|
<div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-between items-center">
|
||||||
|
<div class="flex justify-start items-center gap-5">
|
||||||
|
<div class="relative h-fit w-fit flex items-center">
|
||||||
|
<input type="text" placeholder="Enter Username"
|
||||||
|
class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative">
|
||||||
|
<button class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
|
||||||
|
<i class="fa fa-search"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="{% url 'adduser' %}">
|
||||||
|
<button
|
||||||
|
class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Add
|
||||||
|
User</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-5 w-full h-fit">
|
||||||
|
<div class="w-full border-x border-t border-gray-300 rounded-t-md ">
|
||||||
|
<!-- TABLE HEADER -->
|
||||||
|
<div
|
||||||
|
class="w-full flex justify-between items-center h-[60px] border-b border-gray-300 rounded-t-md">
|
||||||
|
<div class="w-[40%] h-full border-r border-gray-300 flex justify-center items-center">
|
||||||
|
<p class="text-slate-800">Username</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-[40%] h-full border-r border-gray-300 flex justify-center items-center">
|
||||||
|
<p>Group</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-[20%] h-full flex justify-center items-center">
|
||||||
|
Actions
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- TABLE BODY -->
|
||||||
|
<div class="w-full">
|
||||||
|
<!-- 1st row -->
|
||||||
|
<div class="w-full h-[60px] flex justify-between items-center border-b border-gray-300">
|
||||||
|
<div class="w-[40%] h-full border-r border-gray-300 flex justify-center items-center">
|
||||||
|
<p class="text-gray-500">Nataly.aw</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-[40%] h-full border-r border-gray-300 flex justify-center items-center">
|
||||||
|
<p class="text-gray-500">Group 1</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-[20%] h-full flex justify-center items-center gap-3">
|
||||||
|
<a href="{% url 'userdetails' %}">
|
||||||
|
<div class="text-[15px] text-blue-500 cursor-pointer">
|
||||||
|
<i class="fa fa-eye"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<div class="text-[15px] text-blue-500 cursor-pointer">
|
||||||
|
<i class="fa fa-edit"></i>
|
||||||
|
</div>
|
||||||
|
<div class="text-[15px] text-red-500 cursor-pointer">
|
||||||
|
<i class="fa fa-trash"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- RIGHT SIDE / USERS ACTIVITY -->
|
||||||
|
<div class="w-[23%] bg-white h-fit rounded-md shadow-md p-5">
|
||||||
|
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
|
||||||
|
<div class="w-full h-fit mt-2">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 1ST ROW -->
|
||||||
|
<div class="w-full flex flex-col py-3">
|
||||||
|
<div class="w-full flex flex-col justify-center items-start gap-2">
|
||||||
|
<div class="w-full flex justify-between items-center gap-2">
|
||||||
|
<div class="flex justify-start gap-2">
|
||||||
|
<div class="w-[45px] h-[45px] rounded-full">
|
||||||
|
<img src='{% static "images/avatar.svg" %}' alt="user profile"
|
||||||
|
class="w-full h-full object-cover">
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<h1 class="text-sm text-slate-700 font-semibold">Nataly</h1>
|
||||||
|
<p class="text-sm text-gray-500">11:30 AM</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cursor-pointer">
|
||||||
|
<i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Status -->
|
||||||
|
<div class="w-full">
|
||||||
|
<p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add comment section -->
|
||||||
|
<div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
|
||||||
|
<input type="text" placeholder="Add Comment..."
|
||||||
|
class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
|
||||||
|
<button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
|
||||||
|
<i class="fa fa-send" style="color: white; font-size: 15px;"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 2NT ROW -->
|
||||||
|
<div class="w-full flex flex-col py-3">
|
||||||
|
<div class="w-full flex flex-col justify-center items-start gap-2">
|
||||||
|
<div class="w-full flex justify-between items-center gap-2">
|
||||||
|
<div class="flex justify-start gap-2">
|
||||||
|
<div class="w-[45px] h-[45px] rounded-full">
|
||||||
|
<img src='{% static "images/avatar2.png" %}' alt="user profile"
|
||||||
|
class="w-full h-full object-cover">
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<h1 class="text-sm text-slate-700 font-semibold">Salim</h1>
|
||||||
|
<p class="text-sm text-gray-500">11:30 AM</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cursor-pointer">
|
||||||
|
<i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Status -->
|
||||||
|
<div class="w-full">
|
||||||
|
<p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add comment section -->
|
||||||
|
<div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
|
||||||
|
<input type="text" placeholder="Add Comment..."
|
||||||
|
class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
|
||||||
|
<button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
|
||||||
|
<i class="fa fa-send" style="color: white; font-size: 15px;"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 3RD ROW -->
|
||||||
|
<div class="w-full flex flex-col py-3">
|
||||||
|
<div class="w-full flex flex-col justify-center items-start gap-2">
|
||||||
|
<div class="w-full flex justify-between items-center gap-2">
|
||||||
|
<div class="flex justify-start gap-2">
|
||||||
|
<div class="w-[45px] h-[45px] rounded-full">
|
||||||
|
<img src='{% static "images/avatar3.png" %}' alt="user profile"
|
||||||
|
class="w-full h-full object-cover">
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<h1 class="text-sm text-slate-700 font-semibold">Emile</h1>
|
||||||
|
<p class="text-sm text-gray-500">11:30 AM</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cursor-pointer">
|
||||||
|
<i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Status -->
|
||||||
|
<div class="w-full">
|
||||||
|
<p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add comment section -->
|
||||||
|
<div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
|
||||||
|
<input type="text" placeholder="Add Comment..."
|
||||||
|
class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
|
||||||
|
<button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
|
||||||
|
<i class="fa fa-send" style="color: white; font-size: 15px;"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- POPUP MODAL -->
|
||||||
|
<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" id="popUpModal">
|
||||||
|
<div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
|
||||||
|
<button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
|
||||||
|
id="closeModalButton">
|
||||||
|
<i class="fa fa-close"></i>
|
||||||
|
</button>
|
||||||
|
<iframe id="popupModalFrame" frameborder="0"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!---------------------- JS SCRIPTS -------------------->
|
||||||
|
|
||||||
|
<!-- TO SHOW ALL THE ADDED NOTES BY THE USER WHEN CLICKING ON THE SHOW NOTES BUTTON -->
|
||||||
|
<script type="text/javascript" src='{% static "js/show-notes.js" %}'></script>
|
||||||
|
|
||||||
|
{% endblock content %}
|
||||||
Loading…
Reference in New Issue