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.
1132 lines
68 KiB
HTML
1132 lines
68 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">
|
|
<!-- THE POPUP THAT APPEARS WHEN THE USER GOES OFFLINE -->
|
|
{% if user_offline %}
|
|
<div class="w-full h-full inset-0 fixed bg-black bg-opacity-70 flex justify-center items-center p-5 z-20">
|
|
<div class="w-full s:w-[400px] bg-white shadow-md rounded-md flex flex-col justify-between">
|
|
<div class="w-full py-9 px-5 flex justify-center items-center text-center">
|
|
<p class="text-secondosiblue text-[18px]">You are Currently Offline</p>
|
|
</div>
|
|
|
|
<button id="goOnlineButton" data-url="{% url 'go_online' %}"
|
|
class="w-full text-white bg-green-700 py-3 px-3 rounded-b-md hover:bg-opacity-60 duration-300 cursor-pointer">Go
|
|
Online</button>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- 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-full fixed inset-0 bg-black bg-opacity-50 flex justify-end items-center z-40 hidden" 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 'staffpositions' %}">
|
|
<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">Staff 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>
|
|
|
|
<!-- 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 'staffpositions' %}">
|
|
<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">Staff 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 xxlg1: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 grid grid-cols-1 xxlg1:grid-cols-3 gap-5 px-5 s:px-9 py-5">
|
|
<div class="h-[150px] bg-white shadow-md rounded-md block xxlg1:hidden">
|
|
<div
|
|
class=" bg-osiblue rounded-t-md flex justify-between items-center text-white text-[22px] font-bold 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 flex 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>
|
|
|
|
|
|
<!-- 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_time_ago %}h-[1283px]{% 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 'recent-activities.html' %}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- CONNECTED USERS -->
|
|
<div class="w-full hidden xxlg1:block bg-white shadow-md rounded-md p-5">
|
|
<div class="w-full h-full flex flex-col gap-3 items-center">
|
|
<div class="w-full flex justify-center items-center">
|
|
<p class="text-[20px] text-secondosiblue font-bold text-center"><span
|
|
class="text-green-700"></span>
|
|
Connected Users</p>
|
|
</div>
|
|
|
|
<div class="w-full flex flex-wrap gap-4">
|
|
|
|
{% for online in online_staff_profiles %}
|
|
<div class="flex flex-col justify-center items-center gap-1">
|
|
<div class="w-[30px] h-[30px] rounded-full">
|
|
<img src="{{online.image.url}}" alt="User Image"
|
|
class="w-full h-full rounded-full object-cover">
|
|
</div>
|
|
<p class="text-gray-500 text-[10px] font-light">{{online.user.first_name}}</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
|
|
<!---------------------- JS SCRIPTS -------------------->
|
|
<!-- 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/show-notes.js" %}'></script>
|
|
|
|
<!-- IT OPENS A POPUP FOR THE WHOLE NOTE CONTENT -->
|
|
<script type="text/javascript" src='{% static "js/notes-pop-modal.js" %}'></script>
|
|
|
|
<!-- TO OPEN TASKS ACTIONS BUTTONS CONTAINER ON MOBILE -->
|
|
<script type="text/javascript" src='{% static "js/tasks.js" %}'></script>
|
|
|
|
<!-- TO SWITCH BETWEEN STATUSES FROM ONLINE TO OFFLINE -->
|
|
<script type="text/javascript" src='{% static "js/switch-status.js" %}'></script>
|
|
|
|
<!-- TO OPEN EMOJI PICKER TO ADD REACTIONS -->
|
|
<script type="text/javascript" src='{% static "js/emoji-picker.js" %}'></script>
|
|
|
|
<!-- TO RELOAD THE STATUS CONTAINER -->
|
|
<script type="text/javascript" src='{% static "js/get-updated-last-status.js" %}'></script>
|
|
|
|
<!-- TO RELOAD THE USERS ACTIVITY CONTAINER -->
|
|
<script type="text/javascript" src='{% static "js/get-updated-user-activity.js" %}'></script>
|
|
|
|
<!-- NOTIFICATIONS SIDE BAR -->
|
|
<script type="text/javascript" src='{% static "js/notifications-side-bar.js" %}'></script>
|
|
|
|
</body>
|
|
|
|
</html> |