You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1303 lines
80 KiB
HTML
1303 lines
80 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %} Osina {% endblock %}</title>
|
|
<link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
|
<!-- DRAGGABLE SLIDER LINKS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|
|
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
|
|
|
<!-- TEXT EDITOR SCRIPT -->
|
|
<script src="https://cdn.ckeditor.com/4.19.1/standard/ckeditor.js"></script>
|
|
</head>
|
|
|
|
<body class="bg-gray-200 font-poppinsLight relative">
|
|
<div id="osichat">
|
|
{% include 'chat_templates/chat-widget.html' %}
|
|
</div>
|
|
|
|
|
|
<!-- USERS ACTIVITIES BUTTON ON MOBILE -->
|
|
<a href="{% url 'recentactivitiespage' %}">
|
|
<div
|
|
class="w-[55px] h-[55px] bg-osiblue rounded-full fixed xxlg1:hidden bottom-3 right-3 p-2 flex justify-center items-center cursor-pointer z-20 zoom">
|
|
<img src="{% static 'images/icons/useractivity.png' %}" alt="Users">
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<!-- NOTES POPUP THAT APPEARS WHEN CLICKING ON A SPECIFIC NOTE -->
|
|
<div id="notesModal"
|
|
class="w-full h-full bg-black bg-opacity-40 z-20 fixed hidden justify-center items-center inset-0 p-5">
|
|
<div class="w-full s:w-[500px] h-fit rounded-md p-5 cursor-pointer relative"
|
|
style="background-color: {{note.color}}">
|
|
<p class="text-base text-gray-500 p-5 rounded-md"
|
|
style="word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;"
|
|
id="noteContent"></p>
|
|
|
|
<div class="bg-white rounded-full h-[30px] w-[30px] shadow-md absolute top-2 right-2 p-2 flex justify-center items-center cursor-pointer text-secondosiblue"
|
|
onclick="closeModal()">
|
|
<i class="fa fa-close"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 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 -->
|
|
<div class="fixed h-screen w-[300px] bg-osiblue pt-9 flex flex-col justify-between flex-grow overflow-y-auto fixedSideHeader"
|
|
id="fixedSideHeader">
|
|
|
|
<div>
|
|
<a href="{% url 'home' %}">
|
|
<div class="mb-10 w-full flex justify-center">
|
|
<img src="{% static 'images/ositcom_logos/osinawhite.png' %}" class="w-[180px]">
|
|
</div>
|
|
</a>
|
|
|
|
<div class="w-full px-3 relative">
|
|
<input type="text"
|
|
class="w-full bg-transparent border border-white border-opacity-10 py-2 px-3 text-white outline-none rounded-md"
|
|
placeholder="Search...">
|
|
<div class="inset-y-0 absolute right-5 flex justify-center items-center text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-[20px] text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Menu Items -->
|
|
<div
|
|
class="w-full flex flex-col items-center px-5 h-[400px] xxlg1:h-[500px] overflow-hidden overflow-y-auto mt-5">
|
|
|
|
<!-- ACCOUNTS -->
|
|
{% if user.is_superuser %}
|
|
<div class="w-full menu-container">
|
|
<div
|
|
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
|
|
<div class="w-full flex justify-start items-center gap-3">
|
|
<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="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
|
|
</svg>
|
|
<p class="text-white">Accounts</p>
|
|
</div>
|
|
<div>
|
|
<i class="angleDown fa fa-angle-down" style="font-size: 18px; color: white;"></i>
|
|
<i class="angleUp fa fa-angle-up"
|
|
style="font-size: 18px; color: white; display: none;"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
|
|
<a href="{% url 'customers' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Customers</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'businesses' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Businesses</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'users' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Staffs</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- MY WORK DROPDOWN -->
|
|
<div class="w-full menu-container">
|
|
<div
|
|
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
|
|
<div class="w-full flex justify-start items-center gap-3">
|
|
<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="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776" />
|
|
</svg>
|
|
<p class="text-white">My Work</p>
|
|
</div>
|
|
<div>
|
|
<i class="angleDown fa fa-angle-down" style="font-size: 18px; color: white;"></i>
|
|
<i class="angleUp fa fa-angle-up"
|
|
style="font-size: 18px; color: white; display: none;"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
|
|
<a href="{% url 'my-projects' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Projects</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'my-tasks' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2">
|
|
<p class="text-white">Tasks</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'my-notes' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2">
|
|
<p class="text-white">Notes</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'dailyreports' %}">
|
|
<div class="w-full flex justify-start items-center gap-3 text-white py-2">
|
|
<p class="text-white">Daily Reports</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SUPPORT DROPDOWN -->
|
|
<div class="w-full menu-container">
|
|
<div
|
|
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
|
|
<div class="w-full flex justify-start items-center gap-3">
|
|
<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="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
|
|
</svg>
|
|
<p class="text-white">Support</p>
|
|
</div>
|
|
<div>
|
|
<i class="angleDown fa fa-angle-down" style="font-size: 18px; color: white;"></i>
|
|
<i class="angleUp fa fa-angle-up"
|
|
style="font-size: 18px; color: white; display: none;"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
|
|
<a href="{% url 'tickets' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2">
|
|
<p class="text-white">Tickets</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- BILLING DROPDOWN -->
|
|
{% if user.is_superuser %}
|
|
<div class="w-full menu-container">
|
|
<div
|
|
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
|
|
<div class="w-full flex justify-start items-center gap-3">
|
|
<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="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" />
|
|
</svg>
|
|
<p class="text-white">Billing</p>
|
|
</div>
|
|
<div>
|
|
<i class="angleDown fa fa-angle-down" style="font-size: 18px; color: white;"></i>
|
|
<i class="angleUp fa fa-angle-up"
|
|
style="font-size: 18px; color: white; display: none;"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
|
|
<a href="{% url 'items' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Items</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'orders' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Orders</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'invoices' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Invoices</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Receipts</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
<!-- UTILITIES DROPDOWN -->
|
|
<div class="w-full menu-container">
|
|
<div
|
|
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
|
|
<div class="w-full flex justify-start items-center gap-3">
|
|
<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="M4.5 12a7.5 7.5 0 0 0 15 0m-15 0a7.5 7.5 0 1 1 15 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077 1.41-.513m14.095-5.13 1.41-.513M5.106 17.785l1.15-.964m11.49-9.642 1.149-.964M7.501 19.795l.75-1.3m7.5-12.99.75-1.3m-6.063 16.658.26-1.477m2.605-14.772.26-1.477m0 17.726-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205 12 12m6.894 5.785-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" />
|
|
</svg>
|
|
<p class="text-white">Utilities</p>
|
|
</div>
|
|
<div>
|
|
<i class="angleDown fa fa-angle-down" style="font-size: 18px; color: white;"></i>
|
|
<i class="angleUp fa fa-angle-up"
|
|
style="font-size: 18px; color: white; display: none;"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
|
|
|
|
<a href="{% url 'departments' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Departments</p>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<a href="{% url 'projecttypes' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Project Types</p>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<a href="{% url 'jobpositions' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Job Positions</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'businesstypes' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Business Types</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'references' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">References</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'tags' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Tags</p>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<a href="{% url 'paymentmethods' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Payment Methods</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a>
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Countries</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<a class="w-full">
|
|
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
|
|
<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="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
|
|
</svg>
|
|
<p class="text-white">Activity</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="w-full" href="{% url 'addressbook' %}">
|
|
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
|
|
<svg class="w-[25px] text-white" viewBox="0 -0.5 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 7V17C7.5 18.1046 8.39543 19 9.5 19H17.5C18.6046 19 19.5 18.1046 19.5 17V7C19.5 5.89543 18.6046 5 17.5 5H9.5C8.39543 5 7.5 5.89543 7.5 7Z" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5 10C15.5 11.1046 14.6046 12 13.5 12C12.3954 12 11.5 11.1046 11.5 10C11.5 8.89543 12.3954 8 13.5 8C14.6046 8 15.5 8.89543 15.5 10Z" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M7.05108 16.3992C6.71926 16.6471 6.65126 17.1171 6.89919 17.4489C7.14713 17.7807 7.61711 17.8487 7.94892 17.6008L7.05108 16.3992ZM19.0511 17.6008C19.3829 17.8487 19.8529 17.7807 20.1008 17.4489C20.3487 17.1171 20.2807 16.6471 19.9489 16.3992L19.0511 17.6008ZM5.5 8.25C5.08579 8.25 4.75 8.58579 4.75 9C4.75 9.41421 5.08579 9.75 5.5 9.75V8.25ZM7.5 9.75C7.91421 9.75 8.25 9.41421 8.25 9C8.25 8.58579 7.91421 8.25 7.5 8.25V9.75ZM5.5 11.25C5.08579 11.25 4.75 11.5858 4.75 12C4.75 12.4142 5.08579 12.75 5.5 12.75V11.25ZM7.5 12.75C7.91421 12.75 8.25 12.4142 8.25 12C8.25 11.5858 7.91421 11.25 7.5 11.25V12.75ZM5.5 14.25C5.08579 14.25 4.75 14.5858 4.75 15C4.75 15.4142 5.08579 15.75 5.5 15.75V14.25ZM7.5 15.75C7.91421 15.75 8.25 15.4142 8.25 15C8.25 14.5858 7.91421 14.25 7.5 14.25V15.75ZM7.94892 17.6008C11.2409 15.141 15.7591 15.141 19.0511 17.6008L19.9489 16.3992C16.1245 13.5416 10.8755 13.5416 7.05108 16.3992L7.94892 17.6008ZM5.5 9.75H7.5V8.25H5.5V9.75ZM5.5 12.75H7.5V11.25H5.5V12.75ZM5.5 15.75H7.5V14.25H5.5V15.75Z" fill="#fff"/>
|
|
</svg>
|
|
<p class="text-white">Address Book</p>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="w-full menu-container">
|
|
<div
|
|
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
|
|
<div class="w-full flex justify-start items-center gap-3">
|
|
<svg class="w-[25px] text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12" stroke="#fff" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M13 11L21.2 2.80005" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M21.9999 6.83V2H17.1699" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<p class="text-white">Sales</p>
|
|
</div>
|
|
<div>
|
|
<i class="angleDown fa fa-angle-down" style="font-size: 18px; color: white;"></i>
|
|
<i class="angleUp fa fa-angle-up"
|
|
style="font-size: 18px; color: white; display: none;"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
|
|
|
|
<a href="{% url 'departments' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Prospecting Lists</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div
|
|
class="w-full xlg1:w-[300px] h-fit bg-secondosiblue flex flex-col items-center absolute xlg1:fixed justify-center gap-2 py-2 bottom-0 inset-x-0 mt-[100px]">
|
|
<div class="w-full flex flex-col justify-center gap-1 items-center">
|
|
<div class="flex justify-center items-center gap-1">
|
|
<img src="{% static 'images/ositcom_logos/ositcomwhite(o).png' %}" alt="Ositcom Logo"
|
|
class="w-[30px] h-[25px]">
|
|
<p class="text-gray-200 font-light text-xs">Powered By OSITCOM</p>
|
|
</div>
|
|
<p class="text-gray-200 font-light text-xs">Copyrights © 2024 All Rights Reserved</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MOBILE FIXED SIDE BAR -->
|
|
<div class="w-full h-[100vh] absolute bg-black bg-opacity-40 z-50 mt-[80px] mobileFixedSideHeader hidden">
|
|
<div class="w-[70%] h-full bg-osiblue flex flex-col gap-3 relative">
|
|
<div class="w-full">
|
|
<!-- USER PROFILE -->
|
|
<div class="w-full flex justify-start items-center gap-2 cursor-pointer border border-white border-opacity-10 py-2 px-3 duration-300 bg-secondosiblue"
|
|
id="mobileUserProfile">
|
|
<div>
|
|
<div class="w-[35px] h-[35px] 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>
|
|
|
|
<div class="w-full flex justify-between items-center gap-2 text-white py-3">
|
|
<p>{{request.user.first_name}} {{request.user.last_name}}</p>
|
|
<i class="fa fa-angle-down"></i>
|
|
<i class="fa fa-angle-up" style="display: none;"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- USER PROFILE DROPDOWN -->
|
|
<div class="w-full h-fit bg-secondosiblue px-5 flex flex-col hidden" id="mobileUserProfileDropdown">
|
|
<a href="{% url 'signout' %}" class="w-full">
|
|
<div class="w-full py-3 flex items-center gap-2 text-white text-[16px]">
|
|
<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>
|
|
|
|
|
|
<!-- MOBILE MENU ITEMS -->
|
|
<div class="w-full flex flex-col items-center px-3 h-[400px] overflow-hidden overflow-y-auto">
|
|
<!-- CUSTOMERS -->
|
|
{% if user.is_superuser %}
|
|
<div class="w-full menu-container">
|
|
<div
|
|
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
|
|
<div class="w-full flex justify-start items-center gap-3">
|
|
<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="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
|
|
</svg>
|
|
<p class="text-white">Accounts</p>
|
|
</div>
|
|
<div>
|
|
<i class="angleDown fa fa-angle-down" style="font-size: 18px; color: white;"></i>
|
|
<i class="angleUp fa fa-angle-up"
|
|
style="font-size: 18px; color: white; display: none;"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
|
|
<a href="{% url 'customers' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Customers</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'businesses' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Businesses</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'users' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Staffs</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- MY WORK DROPDOWN -->
|
|
<div class="w-full menu-container">
|
|
<div
|
|
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
|
|
<div class="w-full flex justify-start items-center gap-3">
|
|
<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="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776" />
|
|
</svg>
|
|
<p class="text-white">My Work</p>
|
|
</div>
|
|
<div>
|
|
<i class="angleDown fa fa-angle-down" style="font-size: 18px; color: white;"></i>
|
|
<i class="angleUp fa fa-angle-up"
|
|
style="font-size: 18px; color: white; display: none;"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
|
|
<a href="{% url 'my-projects' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">My Projects</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'my-tasks' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2">
|
|
<p class="text-white">My Tasks</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'my-notes' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2">
|
|
<p class="text-white">My Notes</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'dailyreports' %}">
|
|
<div class="w-full flex justify-start items-center gap-3 text-white py-2">
|
|
<p class="text-white">Daily Reports</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- SUPPORT DROPDOWN -->
|
|
<div class="w-full menu-container">
|
|
<div
|
|
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
|
|
<div class="w-full flex justify-start items-center gap-3">
|
|
<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="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
|
|
</svg>
|
|
<p class="text-white">Support</p>
|
|
</div>
|
|
<div>
|
|
<i class="angleDown fa fa-angle-down" style="font-size: 18px; color: white;"></i>
|
|
<i class="angleUp fa fa-angle-up"
|
|
style="font-size: 18px; color: white; display: none;"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
|
|
<a href="{% url 'tickets' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2">
|
|
<p class="text-white">Tickets</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BILLING DROPDOWN -->
|
|
{% if user.is_superuser %}
|
|
<div class="w-full menu-container">
|
|
<div
|
|
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
|
|
<div class="w-full flex justify-start items-center gap-3">
|
|
<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="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" />
|
|
</svg>
|
|
<p class="text-white">Billing</p>
|
|
</div>
|
|
<div>
|
|
<i class="angleDown fa fa-angle-down" style="font-size: 18px; color: white;"></i>
|
|
<i class="angleUp fa fa-angle-up"
|
|
style="font-size: 18px; color: white; display: none;"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
|
|
<a href="{% url 'items' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Items</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'orders' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Orders</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'invoices' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Invoices</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Receipts</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
<!-- UTILITIES -->
|
|
<div class="w-full menu-container">
|
|
<div
|
|
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
|
|
<div class="w-full flex justify-start items-center gap-3">
|
|
<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="M4.5 12a7.5 7.5 0 0 0 15 0m-15 0a7.5 7.5 0 1 1 15 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077 1.41-.513m14.095-5.13 1.41-.513M5.106 17.785l1.15-.964m11.49-9.642 1.149-.964M7.501 19.795l.75-1.3m7.5-12.99.75-1.3m-6.063 16.658.26-1.477m2.605-14.772.26-1.477m0 17.726-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205 12 12m6.894 5.785-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" />
|
|
</svg>
|
|
<p class="text-white">Utilities</p>
|
|
</div>
|
|
<div>
|
|
<i class="angleDown fa fa-angle-down" style="font-size: 18px; color: white;"></i>
|
|
<i class="angleUp fa fa-angle-up"
|
|
style="font-size: 18px; color: white; display: none;"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
|
|
|
|
<a href="{% url 'departments' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Departments</p>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<a href="{% url 'projecttypes' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Project Types</p>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<a href="{% url 'jobpositions' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Job Positions</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'businesstypes' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Business Types</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'references' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">References</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'tags' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Tags</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'paymentmethods' %}">
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Payment Methods</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a>
|
|
<div
|
|
class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
|
|
<p class="text-white">Countries</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<a class="w-full">
|
|
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
|
|
<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="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
|
|
</svg>
|
|
<p class="text-white">Activity</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- SCROLL PART -->
|
|
<div class="flex-1 ml-[300px] h-fit bg-gray-200" id="scrollPart">
|
|
<!-- TOP HEADER -->
|
|
<div
|
|
class="w-full h-[100px] bg-white shadow-md px-5 s:px-9 py-5 flex justify-between items-center topHeader">
|
|
<div class="w-fit flex justify-center items-center gap-10">
|
|
<div class="w-fit flex flex-col gap-2 cursor-pointer" id="burgerMenuButton">
|
|
<div class="burgerMenuLine w-[25px] h-[2px] bg-osiblue duration-300"></div>
|
|
<div class="burgerMenuLine w-[25px] h-[2px] bg-osiblue duration-300"></div>
|
|
<div class="burgerMenuLine w-[25px] h-[2px] bg-osiblue duration-300"></div>
|
|
</div>
|
|
|
|
<div class="hidden sm:flex justify-start items-center gap-5">
|
|
<div id="statusContainer">
|
|
{% include 'recent-status.html' %}
|
|
</div>
|
|
<button
|
|
class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[16px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addStatusButton hover:bg-osiblue duration-300"
|
|
data-modal-url="{% url 'addstatusmodal' %}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
|
|
stroke="currentColor" class="w-[20px]">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</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="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>
|
|
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
|
|
<!-- MOBILE TOP HEADER -->
|
|
<div
|
|
class="w-full h-[80px] bg-osiblue shadow-md px-5 s:px-9 py-5 flex xlg1:hidden justify-between items-center mobileTopHeader">
|
|
<a href="{% url 'home' %}">
|
|
<img src="{% static 'images/ositcom_logos/osinawhite.png' %}" class="w-[130px] h-auto">
|
|
</a>
|
|
|
|
<div class="w-fit flex flex-col gap-2 cursor-pointer" id="mobileBurgerMenuButton">
|
|
<div class="w-[25px] h-[2px] bg-white duration-300"></div>
|
|
<div class="w-[25px] h-[2px] bg-white duration-300"></div>
|
|
<div class="w-[25px] h-[2px] bg-white duration-300"></div>
|
|
</div>
|
|
|
|
<div class="w-fit cursor-pointer hidden" id="mobileCloseMenuButton">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-[40px] text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- MODULES SECTION -->
|
|
<div
|
|
class="w-full h-fit hidden xlg1:grid grid-cols-1 s:grid-cols-2 xlg1:grid-cols-3 gap-5 px-5 s:px-9 py-5">
|
|
<div class="bg-white shadow-md rounded-md p-5">
|
|
<div class="w-full h-full flex flex-col justify-between items-center">
|
|
<div class="w-full flex justify-between items-center">
|
|
<p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Tasks</p>
|
|
<img src="{% static 'images/icons/tasks.png' %}" class="w-[50px]">
|
|
</div>
|
|
<div
|
|
class="w-[60px] h-[60px] bg-white border-2 rounded-full border-secondosiblue flex justify-center items-center">
|
|
<p class="text-secondosiblue text-xl font-semibold">{{total_tasks}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white shadow-md rounded-md p-5">
|
|
<div class="w-full h-full flex flex-col justify-between items-center">
|
|
<div class="w-full flex justify-between items-center">
|
|
<p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Projects</p>
|
|
<img src="{% static 'images/icons/projects.png' %}" class="w-[50px]">
|
|
</div>
|
|
<div
|
|
class="w-[60px] h-[60px] bg-white border-2 rounded-full border-secondosiblue flex justify-center items-center">
|
|
<p class="text-secondosiblue text-xl font-semibold">2</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white shadow-md rounded-md p-5">
|
|
<div class="w-full h-full flex flex-col justify-between items-center">
|
|
<div class="w-full flex justify-between items-center">
|
|
<p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Tickets</p>
|
|
<img src="{% static 'images/icons/tickets.png' %}" class="w-[50px]">
|
|
</div>
|
|
<div
|
|
class="w-[60px] h-[60px] bg-white border-2 rounded-full border-secondosiblue flex justify-center items-center">
|
|
<p class="text-secondosiblue text-xl font-semibold">2</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- TOP MODULES ON MOBILE -->
|
|
<div class="block xlg1:hidden px-5 s:px-9 py-5">
|
|
<div class="bg-white shadow-sm rounded-md flex justify-between items-center text-secondosiblue text-[17px] py-5 px-3 cursor-pointer"
|
|
id="openAccessibilitiesDropDown">
|
|
<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" fill="none">
|
|
<path
|
|
d="M15.5 6.5C15.5 8.433 13.933 10 12 10C10.067 10 8.5 8.433 8.5 6.5C8.5 4.567 10.067 3 12 3C13.933 3 15.5 4.567 15.5 6.5Z"
|
|
stroke="currentColor" stroke-width="1.5" />
|
|
<path
|
|
d="M22 17.5C22 19.433 20.433 21 18.5 21C16.567 21 15 19.433 15 17.5C15 15.567 16.567 14 18.5 14C20.433 14 22 15.567 22 17.5Z"
|
|
stroke="currentColor" stroke-width="1.5" />
|
|
<path
|
|
d="M9 17.5C9 19.433 7.433 21 5.5 21C3.567 21 2 19.433 2 17.5C2 15.567 3.567 14 5.5 14C7.433 14 9 15.567 9 17.5Z"
|
|
stroke="currentColor" stroke-width="1.5" />
|
|
</svg>
|
|
<p>Accessibilites</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-5 arrowDown">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
|
</svg>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-5 arrowUp hidden">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="w-full flex flex-col gap-3" id="accessibilitesDropDown">
|
|
<div class="h-[150px] bg-white shadow-md rounded-md block xlg1:hidden">
|
|
<div
|
|
class=" bg-osiblue rounded-t-md flex justify-between items-center text-white text-[22px] h-[50px]">
|
|
<div class="px-3">
|
|
<p>Recent Status</p>
|
|
</div>
|
|
|
|
<button
|
|
class="h-full rounded-tr-md px-4 bg-gray-300 text-secondosiblue text-[18px] outline-none border-none cursor-pointer hidden sm:flex justify-center items-center shadow-md addStatusButton"
|
|
data-modal-url="{% url 'addstatusmodal' %}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
|
|
stroke="currentColor" class="w-[20px]">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
class="h-full rounded-tr-md px-4 bg-gray-300 text-secondosiblue text-[18px] outline-none border-none cursor-pointer flex sm:hidden justify-center items-center shadow-md addStatusButtonMobile"
|
|
data-modal-url="{% url 'statusmobilemodal' %}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
|
|
stroke="currentColor" class="w-[20px]">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div id="statusContainer" class="w-full h-fit p-5">
|
|
{% include 'recent-status.html' %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white shadow-md rounded-md p-5">
|
|
<div class="w-full h-full flex flex-col justify-between items-center">
|
|
<div class="w-full flex justify-between items-center">
|
|
<p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Tasks</p>
|
|
<img src="{% static 'images/icons/tasks.png' %}" class="w-[50px]">
|
|
</div>
|
|
<div
|
|
class="w-[60px] h-[60px] bg-white border-2 rounded-full border-secondosiblue flex justify-center items-center">
|
|
<p class="text-secondosiblue text-xl font-semibold">{{total_tasks}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white shadow-md rounded-md p-5">
|
|
<div class="w-full h-full flex flex-col justify-between items-center">
|
|
<div class="w-full flex justify-between items-center">
|
|
<p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Projects</p>
|
|
<img src="{% static 'images/icons/projects.png' %}" class="w-[50px]">
|
|
</div>
|
|
<div
|
|
class="w-[60px] h-[60px] bg-white border-2 rounded-full border-secondosiblue flex justify-center items-center">
|
|
<p class="text-secondosiblue text-xl font-semibold">2</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white shadow-md rounded-md p-5">
|
|
<div class="w-full h-full flex flex-col justify-between items-center">
|
|
<div class="w-full flex justify-between items-center">
|
|
<p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Tickets</p>
|
|
<img src="{% static 'images/icons/tickets.png' %}" class="w-[50px]">
|
|
</div>
|
|
<div
|
|
class="w-[60px] h-[60px] bg-white border-2 rounded-full border-secondosiblue flex justify-center items-center">
|
|
<p class="text-secondosiblue text-xl font-semibold">2</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- NOTES SECTION -->
|
|
<div class="w-full px-5 s:px-9 pb-5">
|
|
<div class="w-full h-fit bg-white shadow-md rounded-md p-5">
|
|
<div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
|
|
<div class="w-full s:w-fit flex justify-between items-center">
|
|
<div class="hidden md:block">
|
|
<p class="text-base text-gray-500">Recent Note:</p>
|
|
<div class="flex justify-start items-center gap-2">
|
|
<div class="w-[13px] h-[13px] rounded-full"
|
|
style="background-color: {{ recent_note.color }};">
|
|
</div>
|
|
<p class="text-secondosiblue truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full flex justify-between items-center md:hidden">
|
|
<p class="text-base text-gray-500">My Notes</p>
|
|
|
|
<button
|
|
class="w-[34px] h-[33px] rounded-md p-2 bg-gray-300 text-white text-[16px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton hover:bg-osiblue duration-300"
|
|
data-modal-url="{% url 'addnotemodal' %}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke-width="3" stroke="currentColor" class="w-[20px]">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full s:w-fit hidden md:flex justify-start s:justify-end items-center gap-2">
|
|
<button
|
|
class="w-full s:w-fit rounded-md py-1 px-3 bg-osiblue border border-osiblue text-white hover:bg-white hover:text-osiblue cursor-pointer duration-300"
|
|
id="showNotesButton">Show
|
|
Notes</button>
|
|
<button
|
|
class="w-[34px] h-[33px] rounded-md p-2 bg-gray-300 text-white text-[16px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addNoteButton hover:bg-osiblue duration-300"
|
|
data-modal-url="{% url 'addnotemodal' %}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
|
|
stroke="currentColor" class="w-[20px]">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ALL NOTES CONTAINER (appears when clicking on the "Show notes" button) -->
|
|
<div class="w-full h-fit hidden mt-3 s:mt-5" id="notesContainer">
|
|
<div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
|
|
{% for note in notes %}
|
|
<div class="h-[150px] shadow-md rounded-md p-5 cursor-pointer"
|
|
style="background-color: {{note.color}}"
|
|
onclick="showModal('{{ note.text }}', '{{ note.color }}')">
|
|
<p class="text-sm text-gray-500 overflow-hidden"
|
|
style="word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;">
|
|
{{ note.text }}
|
|
</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- MOBILE NOTES IN SLIDER -->
|
|
<div class="w-full block lg:hidden">
|
|
<div class="swiper-container mt-3">
|
|
<div class="swiper-wrapper">
|
|
{% for note in notes %}
|
|
<div class="swiper-slide cursor-pointer">
|
|
<div class="w-full h-[150px] p-3 flex justify-start items-start rounded-md shadow-md"
|
|
style="background-color: {{note.color}}"
|
|
onclick="showModal('{{ note.text }}', '{{ note.color }}')">
|
|
<p class="text-sm text-gray-500 overflow-hidden"
|
|
style="word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;">
|
|
{{ note.text }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- DYNAMIC CONTENT AND USERS ACTIVITY SECTION -->
|
|
<div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
|
|
|
|
{% block content %}
|
|
replace me
|
|
{% endblock content %}
|
|
|
|
<!-- RIGHT SIDE / USERS ACTIVITY -->
|
|
<div class="w-[25%] hidden xxlg1:flex flex-col gap-3">
|
|
|
|
<div
|
|
class="hidden xxlg1:block w-full bg-white {% if latest_statuses %}h-[1000px]{% else %}h-[305px]{%endif%} overflow-y-auto overflow-hidden rounded-md shadow-md py-5 px-3 relative">
|
|
|
|
<a href="{% url 'recentactivitiespage' %}">
|
|
<div>
|
|
<img src="{% static 'images/icons/expand.png' %}"
|
|
class="absolute w-[25px] right-3 top-5 hover:scale-105 cursor-pointer duration-300">
|
|
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<h1 class="text-2xl text-secondosiblue text-center font-semibold">Users Activity</h1>
|
|
<div class="w-full h-fit mt-2" id="activitiesContainer">
|
|
{% include 'details_templates/partials/recent-activities.html' %}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="connected-users">
|
|
<!-- RECENTLY LOGGED IN USERS -->
|
|
{% include 'details_templates/partials/recently-online.html' %}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RECENTLY LOGGED IN ON MOBILE -->
|
|
<div class="grid grid-cols-1 s:grid-cols-2 gap-5 px-5 s:px-9 pb-5 xxlg1:hidden connected-users">
|
|
<!-- RECENTLY LOGGED IN USERS ON MOBILE -->
|
|
{% include 'details_templates/partials/recently-online.html' %}
|
|
</div>
|
|
|
|
<!-- MOBILE FOOTER -->
|
|
<div class="bg-osiblue h-fit py-2 mobileFooter">
|
|
<div class="w-full flex flex-col justify-center items-center gap-1">
|
|
<div class="flex justify-center items-center gap-2">
|
|
<img src="{% static 'images/ositcom_logos/ositcomwhite(o).png' %}" alt="Ositcom Logo"
|
|
class="w-[30px] h-[25px]">
|
|
<p class="text-gray-200 font-light text-xs">Powered By OSITCOM</p>
|
|
</div>
|
|
<p class="text-gray-200 font-light text-xs">Copyrights © 2024 All Rights Reserved</p>
|
|
</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 inset-0"
|
|
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>
|
|
<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>
|
|
|
|
|
|
|
|
<script type="module" src='{% static "js/pop-modals.js" %}'></script>
|
|
|
|
<!---------------------- JS SCRIPTS -------------------->
|
|
|
|
<!-- ROOMS -->
|
|
<script type="text/javascript" src='{% static "js/osichat-admin/osichat.js" %}'></script>
|
|
|
|
<!-- ONLINE CONSUMER SCRIPT -->
|
|
<script type="text/javascript" src='{% static "js/online/online-consumer.js" %}'></script>
|
|
|
|
<!-- NEW STATUS CONSUMER -->
|
|
<script type="text/javascript" src='{% static "js/status/new-status-consumer.js" %}'></script>
|
|
<script type="text/javascript" src='{% static "js/status/update-status-time-consumer.js" %}'></script>
|
|
|
|
<!-- SIDE BAR SCRIPT -->
|
|
<script type="text/javascript" src='{% static "js/side-bar.js" %}'></script>
|
|
|
|
<!-- DRAGGABLE SLIDER SCRIPT FOR NOTES ON MOBILE -->
|
|
<script type="text/javascript" src='{% static "js/draggable-slider.js" %}'></script>
|
|
|
|
<!-- TO SHOW ALL THE ADDED NOTES BY THE USER WHEN CLICKING ON THE SHOW NOTES BUTTON -->
|
|
<script type="text/javascript" src='{% static "js/notes/show-notes.js" %}'></script>
|
|
|
|
<!-- IT OPENS A POPUP FOR THE WHOLE NOTE CONTENT -->
|
|
<script type="text/javascript" src='{% static "js/notes/notes-pop-modal.js" %}'></script>
|
|
|
|
<!-- TO OPEN TASKS ACTIONS BUTTONS CONTAINER ON MOBILE -->
|
|
<script type="text/javascript" src='{% static "js/tasks.js" %}'></script>
|
|
|
|
<!-- TO OPEN EMOJI PICKER TO ADD REACTIONS -->
|
|
<script type="text/javascript" src='{% static "js/emoji-picker.js" %}'></script>
|
|
|
|
<!-- NOTIFICATIONS SIDE BAR -->
|
|
<script type="text/javascript" src='{% static "js/notifications-side-bar.js" %}'></script>
|
|
|
|
<!-- MODULES DROP DOWN ON MOBILE -->
|
|
<script type="text/javascript" src='{% static "js/accessibilities-dropdown.js" %}'></script>
|
|
</body>
|
|
|
|
</html> |