new changes.

main
nataly 12 months ago
parent 4fbbc4aec0
commit 44381000ed

Binary file not shown.

@ -58,6 +58,18 @@
}
/* ANIMATE THE NOTIFICATION SIDE BAR WHEN OPENING */
.slide-in {
right: 0;
transition: right 0.5s ease;
}
.slide-out {
right: -100%;
transition: right 0.8s ease;
}
/* TO SHOW AND HIDE MESSAGES SMOOTHLY */
/* Show the message with a fade-in animation */
.show-message {
@ -89,6 +101,35 @@
}
/* UPLOAD FILE PROGRESS BAR */
.progress {
width: 250px;
height: 15px;
background-color: #f0f0f0;
border-radius: 8px;
overflow: hidden;
}
.progress-bar {
width: 0;
height: 100%;
background-color: #374a7a;
text-align: center;
color: white;
padding: 5px 5px;
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 650px) {
.progress {
width: 100%
}
}
/* TO ANIMATE THE BURGER MENU IN THE FIXED HEADER */
/* Default state */
@ -112,7 +153,8 @@
width: 100%;
}
.fixedSideHeader, .topHeader {
.fixedSideHeader,
.topHeader {
display: none !important;
}
@ -122,7 +164,9 @@
}
@media (min-width: 1200px) {
.mobileTopHeader, .mobileFixedSideHeader {
.mobileTopHeader,
.mobileFixedSideHeader {
display: none !important;
}
@ -271,7 +315,7 @@
/* TICKETS REPLY DEFAULT STYLES */
.default-css {
color: rgb(147, 147, 147) !important;
}
}
.default-css h1 {
font-size: 2em;

@ -0,0 +1,10 @@
from django.urls import path
from . import views
urlpatterns = [
path('project_knowledge/', views.project_knowledge, name='project_knowledge'),
]

@ -0,0 +1,12 @@
from django.shortcuts import render, redirect, get_object_or_404
from osinacore.models import *
from osinacore.decorators import *
@staff_login_required
def project_knowledge(request):
context = {
}
return render(request, "knowledge_base/project-knowledge-modal.html", context)

@ -28,6 +28,119 @@
</div>
{% endif %}
<!-- NOTIFICATIONS SIDEBAR -->
<div class="w-full h-[100vh] fixed flex justify-end items-center z-50 right-[-100%] bg-black bg-opacity-50" id="notificationsSideBar">
<div class="w-[450px] h-[100vh] bg-white p-5">
<div class="w-full flex justify-between items-center">
<div class="flex justify-start items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6 text-secondosiblue">
<path stroke-linecap="round" stroke-linejoin="round"
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5" />
</svg>
<p class="text-secondosiblue font-poppinsBold text-xl">13 New Notifications</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-8 h-8 text-secondosiblue cursor-pointer" id="closeNotificationsSideBar">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</div>
<div class="w-full h-full flex flex-col gap-3 mt-5 overflow-y-auto notificationsContainer pb-[50px]">
<div
class="w-full px-3 py-5 flex justify-between items-center gap-3 cursor-pointer rounded-md bg-osiblue bg-opacity-40">
<div class="flex justify-start items-center gap-2">
<div>
<div class="w-[50px] h-[50px] rounded-full shadow-md">
<img src="{% static 'images/uploaded_images/salimelliye.jpeg' %}"
class="w-full h-full object-cover rounded-full">
</div>
</div>
<div>
<p class="text-[13px] font-light text-white">Salim Elliye added a reaction on your
status</p>
</div>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4 text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</div>
</div>
<div
class="w-full px-3 py-5 flex justify-between items-center gap-3 cursor-pointer rounded-md bg-gray-50">
<div class="flex justify-start items-center gap-2">
<div>
<div class="w-[50px] h-[50px] rounded-full shadow-md">
<img src="{% static 'images/uploaded_images/salimelliye.jpeg' %}"
class="w-full h-full object-cover rounded-full">
</div>
</div>
<div>
<p class="text-[13px] font-light text-secondosiblue">Salim Elliye added you into Osimenu
Project</p>
</div>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4 text-secondosiblue">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</div>
</div>
<div
class="w-full px-3 py-5 flex justify-between items-center gap-3 cursor-pointer rounded-md bg-gray-50">
<div class="flex justify-start items-center gap-2">
<div>
<p class="text-[13px] font-light text-secondosiblue">You are now offline!</p>
</div>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4 text-secondosiblue">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</div>
</div>
<div
class="w-full px-3 py-5 flex justify-between items-center gap-3 cursor-pointer rounded-md bg-gray-50">
<div class="flex justify-start items-center gap-2">
<div>
<p class="text-[13px] font-light text-secondosiblue">Your Osimenu subscription expires in 3
days. Save on your renewal now.</p>
</div>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4 text-secondosiblue">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</div>
</div>
<!-- View All Notifications container -->
<button
class="group bg-secondosiblue border border-secondosiblue text-white flex justify-center items-center gap-2 px-3 py-2 mt-10 rounded-md cursor-pointer hover:bg-white hover:text-secondosiblue duration-300">
<span>View All Notifications</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 h-5 text-white group-hover:text-secondosiblue">
<path stroke-linecap="round" stroke-linejoin="round"
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
</svg>
</button>
</div>
</div>
</div>
<div class="w-full flex">
<!-- FIXED SIDE NAVBAR -->
@ -651,35 +764,53 @@
</div>
</div>
<div class="relative">
<div class="w-fit flex justify-between items-center gap-2 cursor-pointer hover:bg-gray-50 rounded-md hover:p-2 duration-300"
id="userProfile">
<div>
<div class="w-[40px] s:w-[45px] h-[40px] s:h-[45px] rounded-full shadow-md">
<img src='{{request.user.staffprofile.image.url}}' alt="user-image"
class="w-full h-full object-cover rounded-full">
</div>
<div class="flex justify-end items-center gap-5">
<!-- NOTIFICATION -->
<div class="relative cursor-pointer hover:scale-105 duration-300 transition-transform" id="openNotificationsSideBar">
<div
class="w-[20px] h-[20px] rounded-full bg-secondosiblue text-white flex justify-center items-center text-sm p-1 absolute top-[-5px] right-[-5px]">
<p>1</p>
</div>
<div class="flex justify-center items-center gap-2 text-gray-500">
<p>{{request.user.first_name}} {{request.user.last_name}}</p>
<i class="fa fa-angle-down" id="arrowDown"></i>
<i class="fa fa-angle-up" style="display: none;" id="arrowUp"></i>
<div
class="w-[40px] s:w-[45px] h-[40px] s:h-[45px] rounded-full shadow-md bg-gray-50 border border-gray-100 flex justify-center items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6 text-secondosiblue">
<path stroke-linecap="round" stroke-linejoin="round"
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
</svg>
</div>
</div>
<!-- USER PROFILE DROPDOWN -->
<div class="w-[250px] h-fit bg-osiblue bg-opacity-70 rounded-md shadow-md px-3 absolute right-0 mt-3 flex flex-col"
style="display: none;" id="userProfileDropdown">
<a href="{% url 'signout' %}" class="w-full">
<div
class="w-full py-3 flex items-center gap-2 text-white hover:text-osiblue duration-300 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
</svg>
<p>Logout</p>
<div class="relative">
<div class="w-fit flex justify-between items-center gap-2 cursor-pointer hover:bg-gray-50 rounded-md hover:p-2 duration-300"
id="userProfile">
<div>
<div class="w-[40px] s:w-[45px] h-[40px] s:h-[45px] rounded-full shadow-md">
<img src='{{request.user.staffprofile.image.url}}' alt="user-image"
class="w-full h-full object-cover rounded-full">
</div>
</div>
</a>
<div class="flex justify-center items-center gap-2 text-gray-500">
<p>{{request.user.first_name}} {{request.user.last_name}}</p>
<i class="fa fa-angle-down" id="arrowDown"></i>
<i class="fa fa-angle-up" style="display: none;" id="arrowUp"></i>
</div>
</div>
<!-- USER PROFILE DROPDOWN -->
<div class="w-[250px] h-fit bg-osiblue bg-opacity-70 rounded-md shadow-md px-3 absolute right-0 mt-3 flex flex-col"
style="display: none;" id="userProfileDropdown">
<a href="{% url 'signout' %}" class="w-full">
<div
class="w-full py-3 flex items-center gap-2 text-white hover:text-osiblue duration-300 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
</svg>
<p>Logout</p>
</div>
</a>
</div>
</div>
</div>
</div>
@ -792,6 +923,19 @@
id="closeModalButton">
<i class="fa fa-close"></i>
</button>
<div class="w-full h-full flex justify-center items-center p-10" id="modalLoader">
<div role="status">
<svg aria-hidden="true" class="w-12 h-12 text-gray-400 animate-spin dark:text-gray-600 fill-osiblue"
viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="currentColor" />
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill" />
</svg>
</div>
</div>
<iframe id="popupModalFrame" frameborder="0"></iframe>
</div>
</div>
@ -808,6 +952,9 @@
<!-- TO RELOAD THE STATUS CONTAINER -->
<script type="text/javascript" src='{% static "js/api_calls/get-updated-last-status.js" %}'></script>
<!-- NOTIFICATIONS SIDE BAR -->
<script type="text/javascript" src='{% static "js/notifications-side-bar.js" %}'></script>
</body>
</html>

@ -68,22 +68,31 @@
<div class="w-full">
<label class="text-gray-500">Description:</label>
<textarea required name="description"
class="w-full py-1 px-3 border border-gray-300 outline-none rounded-md mt-1 resize-none" rows="8"></textarea>
class="w-full py-1 px-3 border border-gray-300 outline-none rounded-md mt-1 resize-none"
rows="8"></textarea>
</div>
<div class="w-full flex flex-col gap-3">
<div>
<label class="text-gray-500">Attach File:</label>
<div class="w-full border border-gray-300 rounded-md px-3 py-4 flex justify-between items-center gap-3 mt-1">
<div
class="w-full border border-gray-300 rounded-md px-3 py-4 flex justify-between items-center gap-3 mt-1">
<label>Upload File(s)</label>
<div class="cursor-pointer relative w-fit h-fit">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-7 h-7 cursor-pointer text-secondosiblue" fill="none">
<path d="M7 6.5H16.75C18.8567 6.5 19.91 6.5 20.6667 7.00559C20.9943 7.22447 21.2755 7.50572 21.4944 7.83329C21.9579 8.52694 21.9965 9.25981 21.9997 11M12 6.5L11.3666 5.23313C10.8418 4.18358 10.3622 3.12712 9.19926 2.69101C8.6899 2.5 8.10802 2.5 6.94427 2.5C5.1278 2.5 4.21956 2.5 3.53806 2.88032C3.05227 3.15142 2.65142 3.55227 2.38032 4.03806C2 4.71956 2 5.6278 2 7.44427V10.5C2 15.214 2 17.5711 3.46447 19.0355C4.8215 20.3926 6.94493 20.4921 11 20.4994H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M18.5 13.5L18.5 21.5M18.5 13.5C17.7998 13.5 16.4915 15.4943 16 16M18.5 13.5C19.2002 13.5 20.5085 15.4943 21 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="w-7 h-7 cursor-pointer text-secondosiblue" fill="none">
<path
d="M7 6.5H16.75C18.8567 6.5 19.91 6.5 20.6667 7.00559C20.9943 7.22447 21.2755 7.50572 21.4944 7.83329C21.9579 8.52694 21.9965 9.25981 21.9997 11M12 6.5L11.3666 5.23313C10.8418 4.18358 10.3622 3.12712 9.19926 2.69101C8.6899 2.5 8.10802 2.5 6.94427 2.5C5.1278 2.5 4.21956 2.5 3.53806 2.88032C3.05227 3.15142 2.65142 3.55227 2.38032 4.03806C2 4.71956 2 5.6278 2 7.44427V10.5C2 15.214 2 17.5711 3.46447 19.0355C4.8215 20.3926 6.94493 20.4921 11 20.4994H13"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path
d="M18.5 13.5L18.5 21.5M18.5 13.5C17.7998 13.5 16.4915 15.4943 16 16M18.5 13.5C19.2002 13.5 20.5085 15.4943 21 16"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<input type="file" id="fileupload" name="" placeholder="Select file" multiple class="opacity-0 absolute top-1/2 left-1/2 w-[25px] -translate-x-1/2 -translate-y-1/2 z-10">
<input type="file" id="fileupload" name="" placeholder="Select file" multiple
class="opacity-0 absolute top-1/2 left-1/2 w-[25px] -translate-x-1/2 -translate-y-1/2 z-10">
</div>
</div>
</div>

@ -555,6 +555,20 @@
id="closeModalButton">
<i class="fa fa-close"></i>
</button>
<div class="w-full h-full flex justify-center items-center p-10" id="modalLoader">
<div role="status">
<svg aria-hidden="true" class="w-12 h-12 text-gray-400 animate-spin dark:text-gray-600 fill-osiblue"
viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="currentColor" />
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill" />
</svg>
</div>
</div>
<iframe id="popupModalFrame" frameborder="0"></iframe>
</div>
</div>

@ -13,15 +13,17 @@
{% if project.projectstatus_set.all.last.status == 'In Progress' %}bg-orange-500{% endif %}
{% if project.projectstatus_set.all.last.status == 'Pending' %}bg-yellow-500{% endif %} bg-opacity-70">
<h1 class="text-xl md:text-3xl text-white font-semibold text-center">{{project.name}}</h1>
{% for type in project.project_type.all %}
<p class="text-white text-sm">
{{type.name}} {% if not forloop.last %} | {% endif %}
</p>
{% endfor %}
<div class="w-full flex justify-center items-center gap-2 flex-wrap">
{% for type in project.project_type.all %}
<p class="text-white text-sm">
{{type.name}} {% if not forloop.last %} | {% endif %}
</p>
{% endfor %}
</div>
<div class="absolute top-3 right-3 cursor-pointer" id="pinProject">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 s:w-7 h-6 s:h-7 text-white" color="#000000"
fill="none">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 s:w-7 h-6 s:h-7 text-white"
color="#000000" fill="none">
<path d="M3 21L8 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path
@ -31,8 +33,8 @@
</div>
<div class="absolute top-3 right-3 cursor-pointer hidden" id="unpinProject">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 s:w-7 h-6 s:h-7 text-white" color="#000000"
fill="none">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 s:w-7 h-6 s:h-7 text-white"
color="#000000" fill="none">
<path
d="M7.5 8C6.95863 8.1281 6.49932 8.14239 5.99268 8.45891C5.07234 9.03388 4.85108 9.71674 5.08821 10.7612C5.94028 14.5139 9.48599 18.0596 13.2388 18.9117C14.2834 19.1489 14.9661 18.928 15.5416 18.0077C15.8411 17.5288 15.8716 17.0081 16 16.5"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
@ -101,25 +103,24 @@
<div class="w-full grid grid-cols-1 xl:grid-cols-2 gap-3">
<div class="w-full p-5 bg-white border border-gray-100 shadow-md flex flex-col rounded-md">
<div class="w-full border-b border-gray-200 pb-3 flex justify-between items-center gap-2">
<p class="text-secondosiblue font-poppinsBold uppercase">Project Details</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="w-7 h-7 text-secondosiblue cursor-pointer hover:scale-105 duration-500" color="#000000"
fill="none">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5" />
<path
d="M10 9C10 7.89543 10.8954 7 12 7C13.1046 7 14 7.89543 14 9C14 9.39815 13.8837 9.76913 13.6831 10.0808C13.0854 11.0097 12 11.8954 12 13V13.5"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M11.992 17H12.001" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<p class="text-secondosiblue font-poppinsBold uppercase">Project {{project.project_id}}</p>
<div class="projectKnowledgeButton" data-modal-url="{% url 'project_knowledge' %}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="w-7 h-7 text-secondosiblue cursor-pointer hover:scale-105 duration-500"
color="#000000" fill="none">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5" />
<path
d="M10 9C10 7.89543 10.8954 7 12 7C13.1046 7 14 7.89543 14 9C14 9.39815 13.8837 9.76913 13.6831 10.0808C13.0854 11.0097 12 11.8954 12 13V13.5"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M11.992 17H12.001" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
</div>
<!-- PROJECT DETAILS -->
<div class="w-full flex flex-col gap-3 mt-3">
<p class="text-gray-500">Project ID: <span class="text-secondosiblue">{{project.project_id}}</span>
</p>
<div>
<p class="text-gray-500">Project Description:</p>
<p class="text-secondosiblue">
@ -441,24 +442,48 @@
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
{% if requirement.task_set.all %}
{% for task in requirement.task_set.all %}
<a class="text-blue-500 underline"
href="{% url 'detailed-task' task.task_id %}">{{task.name}} <i
class="fas fa-angle-double-right"></i></a>
<div class="w-full flex flex-col justify-center items-center gap-2">
<a class="text-gray-500 underline flex justify-center items-center gap-1 hover:text-secondosiblue duration-300 cursor-pointer"
href="{% url 'detailed-task' task.task_id %}">{{task.name}}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5" />
</svg>
</a>
<a href="{% url 'adduserstorytask' project.project_id requirement.id %}">
<div
class="w-[30px] h-[30px] rounded-full shadow-md bg-gray-50 text-secondosiblue border border-gray-100 flex justify-center items-center hover:bg-secondosiblue hover:text-gray-50 duration-300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
</a>
</div>
{% endfor %}
{%else%}
<p class="text-secondosiblue">None</p>
{% else %}
<div class="w-full flex flex-col justify-center items-center gap-2">
<p class="text-secondosiblue">Add Task</p>
<a href="{% url 'adduserstorytask' project.project_id requirement.id %}">
<div
class="w-[30px] h-[30px] rounded-full shadow-md bg-gray-50 text-secondosiblue border border-gray-100 flex justify-center items-center hover:bg-secondosiblue hover:text-gray-50 duration-300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
</a>
</div>
{% endif %}
</td>
<td class="px-6 py-4 text-center text-sm">
<div class="w-full flex justify-center items-center gap-3">
<a href="{% url 'adduserstorytask' project.project_id requirement.id %}">
<button
class="w-fit py-2 px-3 bg-green-700 border border-green-700 text-white rounded-md cursor-pointer hover:bg-white hover:text-green-700">Add
Task</button>
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor"
@ -467,7 +492,7 @@
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
</svg>
</a>
<div class="cursor-pointer deleteTicketButton" data-modal-url="">
<div class="cursor-pointer" data-modal-url="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor"
class="w-[18px] text-red-500 hover:scale-110 duration-500 transition-transform">

@ -4,98 +4,298 @@
<!-- LEFT SIDE -->
<div class="w-full xxlg1:w-[75%] flex flex-col gap-5">
<!-- TICKETS -->
<div class="w-full h-fit bg-white p-3 rounded-md shadow-md">
<h1 class="text-secondosiblue text-[25px]">Open Tickets</h1>
<div class="overflow-x-auto border border-gray-300 rounded-md mt-4" id="openTickets">
<table class="min-w-full divide-y">
<!-- TABLE HEADER -->
<thead class="bg-gray-50">
<tr>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Subject
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Ticket ID
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Regarding
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 border-r border-gray-300 uppercase whitespace-nowrap">
Last Updated
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 border-r border-gray-300 uppercase whitespace-nowrap">
Updated By
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
Actions
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-secondosiblue">Ticket Subject</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-secondosiblue">234233</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-secondosiblue">ggg</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-secondosiblue">20-2-234</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-secondosiblue">20-2-234</p>
</td>
<td class="px-6 py-4 text-center text-sm">
<div class="flex justify-center items-center gap-3">
<button onclick="myFunction()">
<input type="text" class="hidden" value="https://osina.ositcom.com/my-tickets/{{ticket.ticket_number}}/" id="myInput">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[16px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
<path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" />
</svg>
</button>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
</svg>
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
</svg>
</a>
<div class="cursor-pointer deleteTicketButton"
data-modal-url="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[18px] text-red-500 hover:scale-110 duration-500 transition-transform">
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
</svg>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- PINNED PROJECTS -->
<div class="w-full grid grid-cols-1 md:grid-cols-2 gap-5">
<div class="w-full h-fit bg-white rounded-md shadow-md p-3 projectContainer">
<div class="w-full bg-white h-fit rounded-md border border-gray-200">
<div
class="w-full px-5 pt-4 pb-1 bg-orange-500 flex flex-col gap-1 justify-center items-center text-center text-white rounded-t-md text-[17px] s:text-[20px] bg-opacity-70 relative">
<p>hallo</p>
<div class="w-full flex justify-between items-center gap-3 text-white text-[12px] opacity-80">
<p>20-2-24</p>
<p>20-2-24</p>
</div>
<div class="absolute top-3 right-3 cursor-pointer z-20" id="unpinProject">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 text-white"
color="#000000" fill="none">
<path
d="M7.5 8C6.95863 8.1281 6.49932 8.14239 5.99268 8.45891C5.07234 9.03388 4.85108 9.71674 5.08821 10.7612C5.94028 14.5139 9.48599 18.0596 13.2388 18.9117C14.2834 19.1489 14.9661 18.928 15.5416 18.0077C15.8411 17.5288 15.8716 17.0081 16 16.5"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M12 7.79915C12.1776 7.77794 12.3182 7.74034 12.4295 7.68235C13.3997 7.17686 13.9291 5.53361 14.4498 4.60009C14.9311 3.73715 15.1718 3.30567 15.7379 3.10227C16.3041 2.89888 16.6448 3.02205 17.3262 3.26839C18.9197 3.8445 20.1555 5.08032 20.7316 6.6738C20.9779 7.35521 21.1011 7.69591 20.8977 8.26204C20.6943 8.82817 20.2628 9.06884 19.3999 9.55018C18.4608 10.074 16.7954 10.6108 16.2905 11.5898C16.2345 11.6983 16.1978 11.8327 16.1769 12"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M3 21L8 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M3 3L21 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
</div>
<!-- Progress Bar -->
<div class="w-full h-[8px] bg-gray-100 mainBar">
<div class="h-full progressBar">
</div>
</div>
<div class="w-full flex flex-col justify-between">
<!-- Details -->
<div class="w-full flex flex-col gap-3 p-5">
<div class="w-full flex justify-start items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6 text-secondosiblue">
<path stroke-linecap="round" stroke-linejoin="round"
d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122" />
</svg>
<p class="text-secondosiblue"><span
class="font-poppinsBold">{{project.open_user_tasks_count}}</span> Open
{% if project.open_user_tasks_count == 1 %} Task {% else %} Tasks {% endif %}</p>
</div>
<div class="w-full flex justify-start items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="w-6 h-6 text-secondosiblue" color="#000000" fill="none">
<path
d="M2.46433 9.34375C2.21579 9.34375 1.98899 9.14229 2.00041 8.87895C2.06733 7.33687 2.25481 6.33298 2.78008 5.53884C3.08228 5.08196 3.45765 4.68459 3.88923 4.36468C5.05575 3.5 6.70139 3.5 9.99266 3.5H14.0074C17.2986 3.5 18.9443 3.5 20.1108 4.36468C20.5424 4.68459 20.9177 5.08196 21.2199 5.53884C21.7452 6.33289 21.9327 7.33665 21.9996 8.87843C22.011 9.14208 21.7839 9.34375 21.5351 9.34375C20.1493 9.34375 19.0259 10.533 19.0259 12C19.0259 13.467 20.1493 14.6562 21.5351 14.6562C21.7839 14.6562 22.011 14.8579 21.9996 15.1216C21.9327 16.6634 21.7452 17.6671 21.2199 18.4612C20.9177 18.918 20.5424 19.3154 20.1108 19.6353C18.9443 20.5 17.2986 20.5 14.0074 20.5H9.99266C6.70139 20.5 5.05575 20.5 3.88923 19.6353C3.45765 19.3154 3.08228 18.918 2.78008 18.4612C2.25481 17.667 2.06733 16.6631 2.00041 15.1211C1.98899 14.8577 2.21579 14.6562 2.46433 14.6562C3.85012 14.6562 4.97352 13.467 4.97352 12C4.97352 10.533 3.85012 9.34375 2.46433 9.34375Z"
stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
<path d="M9 3.5L9 20.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<p class="text-secondosiblue"><span
class="font-poppinsBold">{{project.open_user_tasks_count}}</span> Open
{% if project.open_user_tasks_count == 1 %} Ticket {% else %} Tickets {% endif %}</p>
</div>
<div class="w-full flex justify-start items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6 text-secondosiblue">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
<p class="text-secondosiblue">Total Time: <span
class="font-poppinsBold">{{project.total_time_worked_hours}}hr
{{project.total_time_worked_minutes}}min
{{project.total_time_worked_seconds}}sec</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="w-full h-fit bg-white rounded-md shadow-md p-3 projectContainer">
<div class="w-full bg-white h-fit rounded-md border border-gray-200">
<div
class="w-full px-5 pt-4 pb-1 bg-yellow-500 flex flex-col gap-1 justify-center items-center text-center text-white rounded-t-md text-[17px] s:text-[20px] bg-opacity-70 hover:bg-opacity-100 duration-300 relative">
<p>hallo</p>
<div class="w-full flex justify-between items-center gap-3 text-white text-[12px] opacity-80">
<p>20-2-24</p>
<p>20-2-24</p>
</div>
<div class="absolute top-3 right-3 cursor-pointer hidden" id="pinProject">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 text-white"
color="#000000" fill="none">
<path d="M3 21L8 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M13.2585 18.8714C9.51516 18.0215 5.97844 14.4848 5.12853 10.7415C4.99399 10.1489 4.92672 9.85266 5.12161 9.37197C5.3165 8.89129 5.55457 8.74255 6.03071 8.44509C7.10705 7.77265 8.27254 7.55888 9.48209 7.66586C11.1793 7.81598 12.0279 7.89104 12.4512 7.67048C12.8746 7.44991 13.1622 6.93417 13.7376 5.90269L14.4664 4.59604C14.9465 3.73528 15.1866 3.3049 15.7513 3.10202C16.316 2.89913 16.6558 3.02199 17.3355 3.26771C18.9249 3.84236 20.1576 5.07505 20.7323 6.66449C20.978 7.34417 21.1009 7.68401 20.898 8.2487C20.6951 8.8134 20.2647 9.05346 19.4039 9.53358L18.0672 10.2792C17.0376 10.8534 16.5229 11.1406 16.3024 11.568C16.0819 11.9955 16.162 12.8256 16.3221 14.4859C16.4399 15.7068 16.2369 16.88 15.5555 17.9697C15.2577 18.4458 15.1088 18.6839 14.6283 18.8786C14.1477 19.0733 13.8513 19.006 13.2585 18.8714Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
<div class="absolute top-3 right-3 cursor-pointer z-20" id="unpinProject">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 text-white"
color="#000000" fill="none">
<path
d="M7.5 8C6.95863 8.1281 6.49932 8.14239 5.99268 8.45891C5.07234 9.03388 4.85108 9.71674 5.08821 10.7612C5.94028 14.5139 9.48599 18.0596 13.2388 18.9117C14.2834 19.1489 14.9661 18.928 15.5416 18.0077C15.8411 17.5288 15.8716 17.0081 16 16.5"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M12 7.79915C12.1776 7.77794 12.3182 7.74034 12.4295 7.68235C13.3997 7.17686 13.9291 5.53361 14.4498 4.60009C14.9311 3.73715 15.1718 3.30567 15.7379 3.10227C16.3041 2.89888 16.6448 3.02205 17.3262 3.26839C18.9197 3.8445 20.1555 5.08032 20.7316 6.6738C20.9779 7.35521 21.1011 7.69591 20.8977 8.26204C20.6943 8.82817 20.2628 9.06884 19.3999 9.55018C18.4608 10.074 16.7954 10.6108 16.2905 11.5898C16.2345 11.6983 16.1978 11.8327 16.1769 12"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M3 21L8 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M3 3L21 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
</div>
<!-- Progress Bar -->
<div class="w-full h-[8px] bg-gray-100 mainBar">
<div class="h-full progressBar">
</div>
</div>
<div class="w-full flex flex-col justify-between">
<!-- Details -->
<div class="w-full flex flex-col gap-3 p-5">
<div class="w-full flex justify-start items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6 text-secondosiblue">
<path stroke-linecap="round" stroke-linejoin="round"
d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122" />
</svg>
<p class="text-secondosiblue"><span
class="font-poppinsBold">{{project.open_user_tasks_count}}</span> Open
{% if project.open_user_tasks_count == 1 %} Task {% else %} Tasks {% endif %}</p>
</div>
<div class="w-full flex justify-start items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="w-6 h-6 text-secondosiblue" color="#000000" fill="none">
<path
d="M2.46433 9.34375C2.21579 9.34375 1.98899 9.14229 2.00041 8.87895C2.06733 7.33687 2.25481 6.33298 2.78008 5.53884C3.08228 5.08196 3.45765 4.68459 3.88923 4.36468C5.05575 3.5 6.70139 3.5 9.99266 3.5H14.0074C17.2986 3.5 18.9443 3.5 20.1108 4.36468C20.5424 4.68459 20.9177 5.08196 21.2199 5.53884C21.7452 6.33289 21.9327 7.33665 21.9996 8.87843C22.011 9.14208 21.7839 9.34375 21.5351 9.34375C20.1493 9.34375 19.0259 10.533 19.0259 12C19.0259 13.467 20.1493 14.6562 21.5351 14.6562C21.7839 14.6562 22.011 14.8579 21.9996 15.1216C21.9327 16.6634 21.7452 17.6671 21.2199 18.4612C20.9177 18.918 20.5424 19.3154 20.1108 19.6353C18.9443 20.5 17.2986 20.5 14.0074 20.5H9.99266C6.70139 20.5 5.05575 20.5 3.88923 19.6353C3.45765 19.3154 3.08228 18.918 2.78008 18.4612C2.25481 17.667 2.06733 16.6631 2.00041 15.1211C1.98899 14.8577 2.21579 14.6562 2.46433 14.6562C3.85012 14.6562 4.97352 13.467 4.97352 12C4.97352 10.533 3.85012 9.34375 2.46433 9.34375Z"
stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
<path d="M9 3.5L9 20.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<p class="text-secondosiblue"><span
class="font-poppinsBold">{{project.open_user_tasks_count}}</span> Open
{% if project.open_user_tasks_count == 1 %} Ticket {% else %} Tickets {% endif %}</p>
</div>
<div class="w-full flex justify-start items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6 text-secondosiblue">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
<p class="text-secondosiblue">Total Time: <span
class="font-poppinsBold">{{project.total_time_worked_hours}}hr
{{project.total_time_worked_minutes}}min
{{project.total_time_worked_seconds}}sec</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- TICKETS -->
<div class="w-full h-fit bg-white p-3 rounded-md shadow-md">
<div class="overflow-x-auto border border-gray-300 rounded-md" id="openTickets">
<table class="min-w-full divide-y">
<!-- TABLE HEADER -->
<thead class="bg-gray-50">
<tr>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Subject
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Ticket ID
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Regarding
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 border-r border-gray-300 uppercase whitespace-nowrap">
Last Updated
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 border-r border-gray-300 uppercase whitespace-nowrap">
Updated By
</th>
<th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
Actions
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-secondosiblue">Ticket Subject</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-secondosiblue">234233</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-secondosiblue">ggg</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-secondosiblue">20-2-234</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-secondosiblue">20-2-234</p>
</td>
<td class="px-6 py-4 text-center text-sm">
<div class="flex justify-center items-center gap-3">
<button onclick="myFunction()">
<input type="text" class="hidden"
value="https://osina.ositcom.com/my-tickets/{{ticket.ticket_number}}/"
id="myInput">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor"
class="w-[16px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
<path stroke-linecap="round" stroke-linejoin="round"
d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" />
</svg>
</button>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor"
class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
</svg>
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor"
class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
<path stroke-linecap="round" stroke-linejoin="round"
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
</svg>
</a>
<div class="cursor-pointer deleteTicketButton" data-modal-url="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor"
class="w-[18px] text-red-500 hover:scale-110 duration-500 transition-transform">
<path stroke-linecap="round" stroke-linejoin="round"
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
</svg>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{% if tasks %}
<!-- TASKS ON DESKTOP -->
@ -325,7 +525,8 @@
</div>
{% else %}
<div class="w-full h-fit bg-white p-5 rounded-md shadow-md mb-5 flex flex-col justify-center items-center text-secondosiblue text-center text-xl font-poppinsBold">
<div
class="w-full h-fit bg-white p-5 rounded-md shadow-md mb-5 flex flex-col justify-center items-center text-secondosiblue text-center text-xl font-poppinsBold">
<p>No Available Tasks</p>
</div>
{% endif %}

@ -0,0 +1,49 @@
{%load static%}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
</head>
<body class="font-poppinsLight">
<div class="flex flex-col justify-center items-center gap-5">
<p class="text-secondosiblue text-xl uppercase">Knowledge Base</p>
<div class="w-full">
<p class="text-secondosiblue">Statuses</p>
<div class="w-full flex flex-col gap-1">
<div class="flex justify-start items-center gap-2">
<div class="w-[10px] h-[10px] rounded-full bg-gray-400 shadow-sm"></div>
<p class="text-gray-500">Initialized</p>
</div>
<div class="flex justify-start items-center gap-2">
<div class="w-[10px] h-[10px] rounded-full bg-orange-500 shadow-sm"></div>
<p class="text-gray-500">In Progress</p>
</div>
<div class="flex justify-start items-center gap-2">
<div class="w-[10px] h-[10px] rounded-full bg-yellow-500 shadow-sm"></div>
<p class="text-gray-500">Pending</p>
</div>
<div class="flex justify-start items-center gap-2">
<div class="w-[10px] h-[10px] rounded-full bg-green-700 shadow-sm"></div>
<p class="text-gray-500">Completed</p>
</div>
<div class="flex justify-start items-center gap-2">
<div class="w-[10px] h-[10px] rounded-full bg-red-500 shadow-sm"></div>
<p class="text-gray-500">Cancelled</p>
</div>
</div>
</div>
</div>
</body>
</html>

@ -6,7 +6,23 @@
<div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-secondosiblue text-[25px]">My Projects</h1>
<div class="w-full flex justify-between items-center gap-3">
<h1 class="text-secondosiblue text-[25px]">My Projects</h1>
<div class="projectKnowledgeButton" data-modal-url="{% url 'project_knowledge' %}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="w-7 h-7 text-secondosiblue cursor-pointer hover:scale-105 duration-500"
color="#000000" fill="none">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5" />
<path
d="M10 9C10 7.89543 10.8954 7 12 7C13.1046 7 14 7.89543 14 9C14 9.39815 13.8837 9.76913 13.6831 10.0808C13.0854 11.0097 12 11.8954 12 13V13.5"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M11.992 17H12.001" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
</div>
<!-- PROJECT FILTERING -->
<div
@ -68,12 +84,45 @@
<div class="w-full bg-white h-fit rounded-md border border-gray-200">
<a href="{% url 'detailed-project' project.project_id %}">
<div class="w-full px-5 py-5 bg-orange-500 flex justify-center items-center text-center text-white rounded-t-md text-[17px] s:text-[20px] bg-opacity-70 hover:bg-opacity-100 duration-300">
<div class="w-full px-5 pt-4 pb-1 bg-orange-500 flex flex-col gap-1 justify-center items-center text-center text-white rounded-t-md text-[17px] s:text-[20px] bg-opacity-70 hover:bg-opacity-100 duration-300 relative">
<p>{{project.name}}</p>
<div class="w-full flex justify-between items-center gap-3 text-white text-[12px] opacity-80">
<p>{{project.start_date}}</p>
<p>{{project.end_date}}</p>
</div>
<div class="absolute top-3 right-3 cursor-pointer" id="pinProject">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 text-white"
color="#000000" fill="none">
<path d="M3 21L8 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M13.2585 18.8714C9.51516 18.0215 5.97844 14.4848 5.12853 10.7415C4.99399 10.1489 4.92672 9.85266 5.12161 9.37197C5.3165 8.89129 5.55457 8.74255 6.03071 8.44509C7.10705 7.77265 8.27254 7.55888 9.48209 7.66586C11.1793 7.81598 12.0279 7.89104 12.4512 7.67048C12.8746 7.44991 13.1622 6.93417 13.7376 5.90269L14.4664 4.59604C14.9465 3.73528 15.1866 3.3049 15.7513 3.10202C16.316 2.89913 16.6558 3.02199 17.3355 3.26771C18.9249 3.84236 20.1576 5.07505 20.7323 6.66449C20.978 7.34417 21.1009 7.68401 20.898 8.2487C20.6951 8.8134 20.2647 9.05346 19.4039 9.53358L18.0672 10.2792C17.0376 10.8534 16.5229 11.1406 16.3024 11.568C16.0819 11.9955 16.162 12.8256 16.3221 14.4859C16.4399 15.7068 16.2369 16.88 15.5555 17.9697C15.2577 18.4458 15.1088 18.6839 14.6283 18.8786C14.1477 19.0733 13.8513 19.006 13.2585 18.8714Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="absolute top-3 right-3 cursor-pointer hidden" id="unpinProject">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 text-white"
color="#000000" fill="none">
<path
d="M7.5 8C6.95863 8.1281 6.49932 8.14239 5.99268 8.45891C5.07234 9.03388 4.85108 9.71674 5.08821 10.7612C5.94028 14.5139 9.48599 18.0596 13.2388 18.9117C14.2834 19.1489 14.9661 18.928 15.5416 18.0077C15.8411 17.5288 15.8716 17.0081 16 16.5"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M12 7.79915C12.1776 7.77794 12.3182 7.74034 12.4295 7.68235C13.3997 7.17686 13.9291 5.53361 14.4498 4.60009C14.9311 3.73715 15.1718 3.30567 15.7379 3.10227C16.3041 2.89888 16.6448 3.02205 17.3262 3.26839C18.9197 3.8445 20.1555 5.08032 20.7316 6.6738C20.9779 7.35521 21.1011 7.69591 20.8977 8.26204C20.6943 8.82817 20.2628 9.06884 19.3999 9.55018C18.4608 10.074 16.7954 10.6108 16.2905 11.5898C16.2345 11.6983 16.1978 11.8327 16.1769 12"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M3 21L8 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M3 3L21 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
</div>
</a>
<!-- Progress Bar -->
<div class="w-full h-[8px] bg-gray-100 mainBar">
<div class="h-full progressBar">
@ -98,6 +147,16 @@
class="font-poppinsBold">{{project.open_user_tasks_count}}</span> Open {% if project.open_user_tasks_count == 1 %} Task {% else %} Tasks {% endif %}</p>
</div>
<div class="w-full flex justify-start items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6 text-secondosiblue" color="#000000" fill="none">
<path d="M2.46433 9.34375C2.21579 9.34375 1.98899 9.14229 2.00041 8.87895C2.06733 7.33687 2.25481 6.33298 2.78008 5.53884C3.08228 5.08196 3.45765 4.68459 3.88923 4.36468C5.05575 3.5 6.70139 3.5 9.99266 3.5H14.0074C17.2986 3.5 18.9443 3.5 20.1108 4.36468C20.5424 4.68459 20.9177 5.08196 21.2199 5.53884C21.7452 6.33289 21.9327 7.33665 21.9996 8.87843C22.011 9.14208 21.7839 9.34375 21.5351 9.34375C20.1493 9.34375 19.0259 10.533 19.0259 12C19.0259 13.467 20.1493 14.6562 21.5351 14.6562C21.7839 14.6562 22.011 14.8579 21.9996 15.1216C21.9327 16.6634 21.7452 17.6671 21.2199 18.4612C20.9177 18.918 20.5424 19.3154 20.1108 19.6353C18.9443 20.5 17.2986 20.5 14.0074 20.5H9.99266C6.70139 20.5 5.05575 20.5 3.88923 19.6353C3.45765 19.3154 3.08228 18.918 2.78008 18.4612C2.25481 17.667 2.06733 16.6631 2.00041 15.1211C1.98899 14.8577 2.21579 14.6562 2.46433 14.6562C3.85012 14.6562 4.97352 13.467 4.97352 12C4.97352 10.533 3.85012 9.34375 2.46433 9.34375Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
<path d="M9 3.5L9 20.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<p class="text-secondosiblue"><span
class="font-poppinsBold">{{project.open_user_tasks_count}}</span> Open {% if project.open_user_tasks_count == 1 %} Ticket {% else %} Tickets {% endif %}</p>
</div>
<div class="w-full flex justify-start items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
@ -114,19 +173,6 @@
</div>
</div>
<!-- Action Buttons -->
<div
class="w-full border-t border-b l:border-b-0 border-gray-200 grid grid-cols-1 s:grid-cols-3">
<a href="{% url 'detailed-project' project.project_id %}"
class="p-3 border-b s:border-b-0 border-r-0 s:border-r border-gray-200 text-base bg-gray-50 text-secondosiblue flex justify-center items-center">View</a>
<a href="{% url 'editproject' project.project_id %}"
class="p-3 text-base bg-gray-50 border-b s:border-b-0 border-r-0 s:border-r border-gray-200 text-secondosiblue flex justify-center items-center">Edit</a>
<button class="p-3 text-base bg-gray-50 text-secondosiblue editProjectStatusButton"
data-modal-url="{% url 'editprojectstatusmodal' project.id %}">Update Status</button>
</div>
</div>
<!-- Right Section - Recent Notes -->
@ -134,7 +180,7 @@
{% if project.note_set.exists %}
{% with last_note=project.note_set.last %}
<div class="w-full h-full flex flex-col gap-3 justify-center items-center p-3">
<p class="text-secondosiblue break-all whitespace-pre-wrap">{{ last_note.text }}</p>
<p class="text-gray-400 break-all whitespace-pre-wrap text-sm">{{ last_note.text }}</p>
<div class="w-[30px] h-[30px] rounded-full shadow-md p-1 flex justify-center items-center bg-gray-100 cursor-pointer hover:scale-105 duration-300 addProjectNoteButton"
data-modal-url="{% url 'addprojectnotemodal' project.project_id %}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"

@ -61,7 +61,7 @@
<!-- NOTIFICATIONS SIDEBAR -->
<div class="w-full h-full fixed inset-0 bg-black bg-opacity-50 flex justify-end items-center z-40 hidden" id="notificationsSideBar">
<div class="w-full h-[100vh] fixed flex justify-end items-center z-50 right-[-100%] bg-black bg-opacity-50" id="notificationsSideBar">
<div class="w-[450px] h-[100vh] bg-white p-5">
<div class="w-full flex justify-between items-center">
<div class="flex justify-start items-center gap-2">
@ -1102,6 +1102,19 @@
id="closeModalButton">
<i class="fa fa-close"></i>
</button>
<div class="w-full h-full flex justify-center items-center p-10" id="modalLoader">
<div role="status">
<svg aria-hidden="true" class="w-12 h-12 text-gray-400 animate-spin dark:text-gray-600 fill-osiblue"
viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="currentColor" />
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill" />
</svg>
</div>
</div>
<iframe id="popupModalFrame" frameborder="0"></iframe>
</div>
</div>

@ -9,12 +9,43 @@
<div class="w-full bg-white h-fit rounded-md border border-gray-200">
<a href="{% url 'detailed-project' project.project_id %}">
<div class="w-full px-5 py-5 {% if project.projectstatus_set.all.last.status == 'Completed' %}bg-green-700{% endif %}
<div class="w-full pt-4 pb-1 px-5 flex flex-col gap-1 justify-center items-center text-center {% if project.projectstatus_set.all.last.status == 'Completed' %}bg-green-700{% endif %}
{% if project.projectstatus_set.all.last.status == 'Cancelled' %}bg-red-500{% endif %}
{% if project.projectstatus_set.all.last.status == 'In Progress' %}bg-orange-500{% endif %}
{% if project.projectstatus_set.all.last.status == 'Pending' %}bg-yellow-500{% endif %}
flex justify-center items-center text-center text-white rounded-t-md text-[17px] s:text-[20px] bg-opacity-70 hover:bg-opacity-100 duration-300">
{% if project.projectstatus_set.all.last.status == 'Pending' %}bg-yellow-500{% endif %} text-white rounded-t-md text-[17px] s:text-[20px] bg-opacity-70 hover:bg-opacity-100 duration-300 relative">
<p>{{project.name}}</p>
<div class="w-full flex justify-between items-center gap-3 text-white text-[12px] opacity-80">
<p>{{project.start_date}}</p>
<p>{{project.end_date}}</p>
</div>
<div class="absolute top-3 right-3 cursor-pointer" id="pinProject">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 text-white"
color="#000000" fill="none">
<path d="M3 21L8 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M13.2585 18.8714C9.51516 18.0215 5.97844 14.4848 5.12853 10.7415C4.99399 10.1489 4.92672 9.85266 5.12161 9.37197C5.3165 8.89129 5.55457 8.74255 6.03071 8.44509C7.10705 7.77265 8.27254 7.55888 9.48209 7.66586C11.1793 7.81598 12.0279 7.89104 12.4512 7.67048C12.8746 7.44991 13.1622 6.93417 13.7376 5.90269L14.4664 4.59604C14.9465 3.73528 15.1866 3.3049 15.7513 3.10202C16.316 2.89913 16.6558 3.02199 17.3355 3.26771C18.9249 3.84236 20.1576 5.07505 20.7323 6.66449C20.978 7.34417 21.1009 7.68401 20.898 8.2487C20.6951 8.8134 20.2647 9.05346 19.4039 9.53358L18.0672 10.2792C17.0376 10.8534 16.5229 11.1406 16.3024 11.568C16.0819 11.9955 16.162 12.8256 16.3221 14.4859C16.4399 15.7068 16.2369 16.88 15.5555 17.9697C15.2577 18.4458 15.1088 18.6839 14.6283 18.8786C14.1477 19.0733 13.8513 19.006 13.2585 18.8714Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="absolute top-3 right-3 cursor-pointer hidden" id="unpinProject">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 text-white"
color="#000000" fill="none">
<path
d="M7.5 8C6.95863 8.1281 6.49932 8.14239 5.99268 8.45891C5.07234 9.03388 4.85108 9.71674 5.08821 10.7612C5.94028 14.5139 9.48599 18.0596 13.2388 18.9117C14.2834 19.1489 14.9661 18.928 15.5416 18.0077C15.8411 17.5288 15.8716 17.0081 16 16.5"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M12 7.79915C12.1776 7.77794 12.3182 7.74034 12.4295 7.68235C13.3997 7.17686 13.9291 5.53361 14.4498 4.60009C14.9311 3.73715 15.1718 3.30567 15.7379 3.10227C16.3041 2.89888 16.6448 3.02205 17.3262 3.26839C18.9197 3.8445 20.1555 5.08032 20.7316 6.6738C20.9779 7.35521 21.1011 7.69591 20.8977 8.26204C20.6943 8.82817 20.2628 9.06884 19.3999 9.55018C18.4608 10.074 16.7954 10.6108 16.2905 11.5898C16.2345 11.6983 16.1978 11.8327 16.1769 12"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M3 21L8 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M3 3L21 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
</div>
</a>

@ -71,6 +71,7 @@ urlpatterns = [
path('add/', include('osinacore.add.urls')),
path('edit/', include('osinacore.edit.urls')),
path('delete/', include('osinacore.delete.urls')),
path('knowledge_base/', include('osinacore.knowledge_base.urls')),
#Fetch urls

@ -822,6 +822,10 @@ video {
right: 1.25rem;
}
.right-\[-100\%\] {
right: -100%;
}
.right-\[-5px\] {
right: -5px;
}
@ -866,10 +870,6 @@ video {
top: 14px;
}
.right-1\/2 {
right: 50%;
}
.z-0 {
z-index: 0;
}
@ -908,6 +908,10 @@ video {
margin-right: auto;
}
.-mr-3 {
margin-right: -0.75rem;
}
.mb-0 {
margin-bottom: 0px;
}
@ -932,6 +936,10 @@ video {
margin-bottom: 5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
@ -956,6 +964,10 @@ video {
margin-left: 300px;
}
.mr-0 {
margin-right: 0px;
}
.mr-1 {
margin-right: 0.25rem;
}
@ -964,6 +976,14 @@ video {
margin-right: 0.5rem;
}
.mr-20 {
margin-right: 5rem;
}
.mr-3 {
margin-right: 0.75rem;
}
.mt-0 {
margin-top: 0px;
}
@ -1048,26 +1068,6 @@ video {
margin-top: 80px;
}
.mr-20 {
margin-right: 5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mr-0 {
margin-right: 0px;
}
.-mr-3 {
margin-right: -0.75rem;
}
.mr-3 {
margin-right: 0.75rem;
}
.block {
display: block;
}
@ -1358,6 +1358,10 @@ video {
width: 2rem;
}
.w-\[10px\] {
width: 10px;
}
.w-\[120px\] {
width: 120px;
}
@ -1675,6 +1679,10 @@ video {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
@ -1683,10 +1691,6 @@ video {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.flex-row {
flex-direction: row;
}
@ -2715,6 +2719,10 @@ video {
padding-bottom: 0.5rem;
}
.pb-3 {
padding-bottom: 0.75rem;
}
.pb-5 {
padding-bottom: 1.25rem;
}
@ -2759,6 +2767,10 @@ video {
padding-top: 0.75rem;
}
.pt-4 {
padding-top: 1rem;
}
.pt-5 {
padding-top: 1.25rem;
}
@ -2767,10 +2779,6 @@ video {
padding-top: 2.25rem;
}
.pb-3 {
padding-bottom: 0.75rem;
}
.text-left {
text-align: left;
}
@ -3081,6 +3089,10 @@ video {
opacity: 0.7;
}
.opacity-80 {
opacity: 0.8;
}
.mix-blend-multiply {
mix-blend-mode: multiply;
}
@ -3226,6 +3238,18 @@ video {
src: url('../dist/fonts/Poppins-Bold.ttf');
}
/* ANIMATE THE NOTIFICATION SIDE BAR WHEN OPENING */
.slide-in {
right: 0;
transition: right 0.5s ease;
}
.slide-out {
right: -100%;
transition: right 0.8s ease;
}
/* TO SHOW AND HIDE MESSAGES SMOOTHLY */
/* Show the message with a fade-in animation */
@ -3259,6 +3283,35 @@ video {
font-weight: bold !important;
}
/* UPLOAD FILE PROGRESS BAR */
.progress {
width: 250px;
height: 15px;
background-color: #f0f0f0;
border-radius: 8px;
overflow: hidden;
}
.progress-bar {
width: 0;
height: 100%;
background-color: #374a7a;
text-align: center;
color: white;
padding: 5px 5px;
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 650px) {
.progress {
width: 100%
}
}
/* TO ANIMATE THE BURGER MENU IN THE FIXED HEADER */
/* Default state */
@ -3285,7 +3338,8 @@ video {
width: 100%;
}
.fixedSideHeader, .topHeader {
.fixedSideHeader,
.topHeader {
display: none !important;
}
@ -3295,7 +3349,8 @@ video {
}
@media (min-width: 1200px) {
.mobileTopHeader, .mobileFixedSideHeader {
.mobileTopHeader,
.mobileFixedSideHeader {
display: none !important;
}
@ -3553,6 +3608,11 @@ video {
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.hover\:text-gray-50:hover {
--tw-text-opacity: 1;
color: rgb(249 250 251 / var(--tw-text-opacity));
}
.hover\:text-gray-500:hover {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
@ -3631,6 +3691,10 @@ video {
display: none;
}
.s\:h-7 {
height: 1.75rem;
}
.s\:h-\[100px\] {
height: 100px;
}
@ -3651,8 +3715,8 @@ video {
height: 90px;
}
.s\:h-7 {
height: 1.75rem;
.s\:w-7 {
width: 1.75rem;
}
.s\:w-\[100px\] {
@ -3708,10 +3772,6 @@ video {
width: fit-content;
}
.s\:w-7 {
width: 1.75rem;
}
.s\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@ -3812,10 +3872,6 @@ video {
display: flex;
}
.md\:grid {
display: grid;
}
.md\:hidden {
display: none;
}
@ -3873,10 +3929,6 @@ video {
width: fit-content;
}
.l\:w-\[400px\] {
width: 400px;
}
.l\:max-w-xl {
max-width: 36rem;
}
@ -3932,10 +3984,6 @@ video {
width: 480px;
}
.lg\:grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.lg\:text-\[48px\] {
font-size: 48px;
}
@ -4074,10 +4122,6 @@ video {
}
@media (min-width: 1536px) {
.xl\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.xl\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@ -4086,6 +4130,10 @@ video {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.xl\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.xl\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;

@ -64,7 +64,7 @@ class FileUpload {
create_progress_bar(file) {
var progress = `
<div class="w-full flex justify-between items-center gap-3 p-3 bg-secondosiblue bg-opacity-70 rounded-md">
<div class="w-full flex flex-col s:flex-row justify-between items-center gap-3 p-3 bg-secondosiblue bg-opacity-70 rounded-md">
<div class="flex justify-start items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6 text-white" fill="none">
<path d="M16 17L9 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
@ -73,16 +73,16 @@ class FileUpload {
<path d="M3.5 12C3.5 10.1591 4.99238 8.66667 6.83333 8.66667C7.49912 8.66667 8.28404 8.78333 8.93137 8.60988C9.50652 8.45576 9.95576 8.00652 10.1099 7.43136C10.2833 6.78404 10.1667 5.99912 10.1667 5.33333C10.1667 3.49238 11.6591 2 13.5 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<p class="filename text-white" data-name="${file.name}"></p>
<p class="filename text-white text-sm s:text-base" data-name="${file.name}"></p>
</div>
<div class="w-full s:w-fit flex flex-col justify-end items-center gap-1">
<div class="progress" style="margin-top: 5px;">
<div class="progress-bar bg-success text-white" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%" data-name="${file.name}">
</div>
</div>
<div class="flex justify-end items-center gap-1">
<p class="textbox text-white" data-name="${file.name}"></p>
<p class="text-white">-</p>
<div class="progress" style="margin-top: 5px;">
<div class="progress-bar bg-success text-white" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%" data-name="${file.name}">
</div>
</div>
</div>
</div>`;
$('#uploaded_files').append(progress);

@ -5,12 +5,14 @@ document.addEventListener("DOMContentLoaded", function () {
const notificationsSideBar = document.getElementById("notificationsSideBar");
function openNotifications() {
notificationsSideBar.classList.remove("hidden");
notificationsSideBar.classList.remove('slide-out');
notificationsSideBar.classList.add('slide-in');
document.body.classList.add("overflow-hidden");
}
function closeNotifications() {
notificationsSideBar.classList.add("hidden");
notificationsSideBar.classList.remove('slide-in');
notificationsSideBar.classList.add('slide-out');
document.body.classList.remove("overflow-hidden");
}

@ -1,11 +1,8 @@
function initializeModalButtons() {
// OPEN THE MODAL WITH DIMENSIONS
function openModalWithDimensions(url, width, height) {
const modalUrl = url;
openModal(modalUrl);
console.log('hii4');
const iframe = document.getElementById("popupModalFrame");
openModal(url);
iframe.style.height = height;
iframe.style.width = width;
}
@ -15,13 +12,17 @@ function initializeModalButtons() {
const modalContainer = document.getElementById("popUpModal");
const iframe = document.getElementById("popupModalFrame");
const body = document.body;
const loader = document.getElementById("modalLoader");
body.style.overflow = "hidden";
console.log('hii1');
loader.style.display = "flex"; // Show loader
iframe.src = url;
console.log('hii2')
modalContainer.style.display = "flex";
console.log('hii3')
// Hide loader when iframe content has fully loaded
iframe.onload = () => {
loader.style.display = "none"; // Hide loader
};
}
// CLOSE MODAL
@ -29,10 +30,12 @@ function initializeModalButtons() {
const modalContainer = document.getElementById("popUpModal");
const iframe = document.getElementById("popupModalFrame");
const body = document.body;
const loader = document.getElementById("modalLoader");
iframe.src = "";
body.style.overflow = "auto";
modalContainer.style.display = "none";
loader.style.display = "none"; // Ensure loader is hidden
}
// Function to add a click listener to buttons by class name
@ -42,11 +45,11 @@ function initializeModalButtons() {
button.addEventListener("click", () => {
const modalUrl = button.getAttribute("data-modal-url");
openModalWithDimensions(modalUrl, width, height);
console.log('hii5')
});
});
}
addButtonClickListener("addStatusButton", "450px", "200px");
addButtonClickListener("addNoteButton", "400px", "225px");
addButtonClickListener("addProjectNoteButton", "400px", "225px");
@ -93,6 +96,10 @@ function initializeModalButtons() {
addButtonClickListener("deletePaymentButton", "400px", "140px");
addButtonClickListener("deletePaymentMethodButton", "400px", "140px");
// KNOWLEDGE BASE
addButtonClickListener("projectKnowledgeButton", "400px", "230px");
const closeButton = document.getElementById("closeModalButton");
closeButton.addEventListener("click", () => {
closeModal();

Loading…
Cancel
Save