New changes.
parent
7255126f08
commit
612bf8b1f7
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,656 @@
|
||||
{% 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>
|
||||
</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
|
||||
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 %}
|
||||
|
||||
|
||||
<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/osinaw.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">
|
||||
<i class="fa fa-search"></i>
|
||||
</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">
|
||||
<img src="{% static 'images/icons/users.png' %}" class="w-[30px]">
|
||||
<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">
|
||||
<img src="{% static 'images/icons/work.png' %}" class="w-[30px]">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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 flex justify-between items-center border-b border-slate-600 py-3">
|
||||
<div class="w-full flex justify-start items-center gap-3">
|
||||
<img src="{% static 'images/icons/support.png' %}" class="w-[30px]">
|
||||
<p class="text-white">Support</p>
|
||||
</div>
|
||||
<div>
|
||||
<i class="fa fa-angle-down" style="font-size: 20px; color: white;"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- BILLING DROPDOWN -->
|
||||
{% if user.is_superuser %}
|
||||
<div class="w-full">
|
||||
<div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
|
||||
<div class="w-full flex justify-start items-center gap-3">
|
||||
<img src="{% static 'images/icons/billing.png' %}" class="w-[30px]">
|
||||
<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>
|
||||
{% 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">
|
||||
<img src="{% static 'images/icons/utilities.png' %}" class="w-[30px]">
|
||||
<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 '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>
|
||||
<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">
|
||||
<img src="{% static 'images/icons/activity.png' %}" class="w-[30px]">
|
||||
<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/banner-logo.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]">
|
||||
<img src="{% static 'images/icons/logout.png' %}" class="w-[22px]">
|
||||
<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">
|
||||
<img src="{% static 'images/icons/users.png' %}" class="w-[28px]">
|
||||
<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">
|
||||
<img src="{% static 'images/icons/work.png' %}" class="w-[28px]">
|
||||
<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>
|
||||
<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 Tickets</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>
|
||||
|
||||
<div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
|
||||
<div class="w-full flex justify-start items-center gap-3">
|
||||
<img src="{% static 'images/icons/support.png' %}" class="w-[28px]">
|
||||
<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>
|
||||
|
||||
{% if user.is_superuser %}
|
||||
<div class="w-full">
|
||||
<div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
|
||||
<div class="w-full flex justify-start items-center gap-3">
|
||||
<img src="{% static 'images/icons/billing.png' %}" class="w-[28px]">
|
||||
<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>
|
||||
|
||||
{% 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">
|
||||
<img src="{% static 'images/icons/utilities.png' %}" class="w-[28px]">
|
||||
<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 '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>
|
||||
<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">
|
||||
<img src="{% static 'images/icons/activity.png' %}" class="w-[28px]">
|
||||
<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' %}">
|
||||
<i class="fa fa-plus"></i>
|
||||
</button>
|
||||
</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">
|
||||
<img src="{% static 'images/icons/logout.png' %}" class="w-[22px]">
|
||||
<p>Logout</p>
|
||||
</div>
|
||||
</a>
|
||||
</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/osinaw.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">
|
||||
<img src="{% static 'images/closeicon.png' %}" class="w-[25px]">
|
||||
</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' %}">
|
||||
<i class="fa fa-plus"></i>
|
||||
</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-bold 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-bold 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-bold 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>
|
||||
|
||||
|
||||
{% block content %}
|
||||
replace me
|
||||
{% endblock content %}
|
||||
|
||||
|
||||
<!-- MOBILE FOOTER -->
|
||||
<div class="w-full 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/banner-logo.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>
|
||||
|
||||
<!-- TO SWITCH BETWEEN STATUSES FROM ONLINE TO OFFLINE -->
|
||||
<script type="text/javascript" src='{% static "js/switch-status.js" %}'></script>
|
||||
|
||||
<!-- TO RELOAD THE STATUS CONTAINER -->
|
||||
<script type="text/javascript" src='{% static "js/get-updated-last-status.js" %}'></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,604 @@
|
||||
{% 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>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<!-- 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
|
||||
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 %}
|
||||
|
||||
|
||||
|
||||
<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/osinaw.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">
|
||||
<i class="fa fa-search"></i>
|
||||
</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">
|
||||
<img src="{% static 'images/icons/users.png' %}" class="w-[30px]">
|
||||
<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">
|
||||
<img src="{% static 'images/icons/work.png' %}" class="w-[30px]">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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 flex justify-between items-center border-b border-slate-600 py-3">
|
||||
<div class="w-full flex justify-start items-center gap-3">
|
||||
<img src="{% static 'images/icons/support.png' %}" class="w-[30px]">
|
||||
<p class="text-white">Support</p>
|
||||
</div>
|
||||
<div>
|
||||
<i class="fa fa-angle-down" style="font-size: 20px; color: white;"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- BILLING DROPDOWN -->
|
||||
{% if user.is_superuser %}
|
||||
<div class="w-full">
|
||||
<div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
|
||||
<div class="w-full flex justify-start items-center gap-3">
|
||||
<img src="{% static 'images/icons/billing.png' %}" class="w-[30px]">
|
||||
<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>
|
||||
{% 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">
|
||||
<img src="{% static 'images/icons/utilities.png' %}" class="w-[30px]">
|
||||
<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 '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>
|
||||
<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">
|
||||
<img src="{% static 'images/icons/activity.png' %}" class="w-[30px]">
|
||||
<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/banner-logo.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]">
|
||||
<img src="{% static 'images/icons/logout.png' %}" class="w-[22px]">
|
||||
<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">
|
||||
<img src="{% static 'images/icons/users.png' %}" class="w-[28px]">
|
||||
<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">
|
||||
<img src="{% static 'images/icons/work.png' %}" class="w-[28px]">
|
||||
<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>
|
||||
<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 Tickets</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>
|
||||
|
||||
<div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
|
||||
<div class="w-full flex justify-start items-center gap-3">
|
||||
<img src="{% static 'images/icons/support.png' %}" class="w-[28px]">
|
||||
<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>
|
||||
|
||||
{% if user.is_superuser %}
|
||||
<div class="w-full">
|
||||
<div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
|
||||
<div class="w-full flex justify-start items-center gap-3">
|
||||
<img src="{% static 'images/icons/billing.png' %}" class="w-[28px]">
|
||||
<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>
|
||||
|
||||
{% 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">
|
||||
<img src="{% static 'images/icons/utilities.png' %}" class="w-[28px]">
|
||||
<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 '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>
|
||||
<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">
|
||||
<img src="{% static 'images/icons/activity.png' %}" class="w-[28px]">
|
||||
<p class="text-white">Activity</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- SCROLL PART -->
|
||||
<div class="flex-1 ml-[300px] h-fit" 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' %}">
|
||||
<i class="fa fa-plus"></i>
|
||||
</button>
|
||||
</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">
|
||||
<img src="{% static 'images/icons/logout.png' %}" class="w-[22px]">
|
||||
<p>Logout</p>
|
||||
</div>
|
||||
</a>
|
||||
</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/osinaw.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">
|
||||
<img src="{% static 'images/closeicon.png' %}" class="w-[25px]">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- RECENT ACTIVITIES -->
|
||||
<div class="w-full h-fit px-3 py-5" id="activitiesContainer">
|
||||
<div class="w-full">
|
||||
{% include 'recent-activities.html' %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- MOBILE FOOTER -->
|
||||
<div class="w-full bg-osiblue h-fit py-2 mobileFooter absolute bottom-0">
|
||||
<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/banner-logo.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>
|
||||
|
||||
<!-- 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 USERS ACTIVITY CONTAINER -->
|
||||
<script type="text/javascript" src='{% static "js/get-updated-user-activity.js" %}'></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,17 +1,24 @@
|
||||
{% load static %}
|
||||
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 truncate max-w-xl">Recent Status: <span
|
||||
class="text-slate-700 font-semibold">{{last_status.text}}</span></p>
|
||||
<p class="text-sm text-gray-500">Last update:
|
||||
{% if last_status.date == current_date %}
|
||||
Today | {{last_status.time}},
|
||||
{% if minutes_ago == 0 %}
|
||||
Just Now
|
||||
{%else%}
|
||||
{{hours_minutes_ago}}
|
||||
{%endif%}
|
||||
{% else %}
|
||||
{{last_status.date}} | {{last_status.time}}
|
||||
{%endif %}</p>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 truncate max-w-xl">Recent Status:
|
||||
<span class="text-slate-700 font-semibold">{{last_status.text}}</span>
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">Last update:
|
||||
{% if last_status.date == current_date %}
|
||||
Today | {{last_status.time}},
|
||||
{% if minutes_ago == 0 %}
|
||||
Just Now
|
||||
{%else%}
|
||||
{{hours_minutes_ago}}
|
||||
{%endif%}
|
||||
{% else %}
|
||||
{{last_status.date}} | {{last_status.time}}
|
||||
{%endif %}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!---------------------- JS SCRIPTS -------------------->
|
||||
|
||||
<!-- TO RELOAD THE STATUS CONTAINER -->
|
||||
<script type="text/javascript" src='{% static "js/get-updated-last-status.js" %}'></script>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1009 B |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,38 @@
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// To open and close the emoji picker
|
||||
const emojiPicker = document.getElementById('emojiPicker');
|
||||
const closeEmojiPicker = document.getElementById('closeEmojiPicker');
|
||||
const emojiPickerContainer = document.getElementById('emojiPickerContainer');
|
||||
|
||||
emojiPicker.addEventListener('click', function () {
|
||||
emojiPickerContainer.classList.remove('hidden');
|
||||
});
|
||||
|
||||
closeEmojiPicker.addEventListener('click', function () {
|
||||
emojiPickerContainer.classList.add('hidden');
|
||||
});
|
||||
|
||||
|
||||
// To navigate between categories
|
||||
const categories = document.querySelectorAll('.emoji-category');
|
||||
const categoryContainers = document.querySelectorAll('.emoji-category-container');
|
||||
|
||||
categories.forEach(category => {
|
||||
category.addEventListener('click', function () {
|
||||
const selectedCategory = category.dataset.category;
|
||||
toggleCategory(selectedCategory);
|
||||
categories.forEach(cat => {
|
||||
cat.classList.toggle('selectedEmojiCategory', cat === category);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function toggleCategory(category) {
|
||||
categoryContainers.forEach(container => {
|
||||
const containerId = container.getAttribute('id');
|
||||
container.classList.toggle('hidden', containerId !== `${category}Container`);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
// TO SWITCH BETWEEN STATUSES FROM ONLINE TO OFFLINE
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
document.getElementById('go-online-btn').addEventListener('click', function () {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', "{% url 'go_online' %}", true);
|
||||
xhr.onload = function () {
|
||||
if (xhr.status === 200) {
|
||||
// If the request is successful, reload the top window
|
||||
window.top.location.reload();
|
||||
} else {
|
||||
console.log("You are still offline.")
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue