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.
365 lines
19 KiB
HTML
365 lines
19 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">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.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>
|
|
</head>
|
|
|
|
<body class="bg-gray-200">
|
|
<div class="w-full flex">
|
|
<!-- FIXED SIDE NAVBAR -->
|
|
<div class="fixed h-screen w-[300px] bg-slate-700 pt-9 flex flex-col justify-between flex-grow overflow-y-auto fixedSideHeader"
|
|
id="fixedSideHeader">
|
|
<!-- Menu Items -->
|
|
<div class="w-full h-fit flex flex-col justify-center items-center px-5">
|
|
<a href="{% url 'home' %}">
|
|
<div class="mb-14 w-full">
|
|
<h1 class="text-white text-4xl text-center">OSINA</h1>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="mb-5 w-full relative">
|
|
<input type="text" placeholder="Search..."
|
|
class="border border-gray-500 rounded-md py-2 px-3 bg-transparent w-full outline-none text-white">
|
|
<i class="fa fa-search absolute right-3 top-3 text-gray-500" style="font-size: 20px;"></i>
|
|
</div>
|
|
|
|
<a href="{% url 'home' %}" class="w-full">
|
|
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
|
|
<i class="fa fa-home" style="font-size: 22px; color: white;"></i>
|
|
<p class="text-white text-xl">Home</p>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- 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">
|
|
<i class="fas fa-users" style="font-size: 20px; color: white;"></i>
|
|
<p class="text-white text-xl">Accounts</p>
|
|
</div>
|
|
<div>
|
|
<i class="angleDown fa fa-angle-down" style="font-size: 25px; color: white;"></i>
|
|
<i class="angleUp fa fa-angle-up" style="font-size: 25px; 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 text-[18px] 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 text-[18px] 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 text-[18px] 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">
|
|
<i class="fa fa-tasks" style="font-size: 22px; color: white;"></i>
|
|
<p class="text-white text-xl">My Work</p>
|
|
</div>
|
|
<div>
|
|
<i class="angleDown fa fa-angle-down" style="font-size: 25px; color: white;"></i>
|
|
<i class="angleUp fa fa-angle-up" style="font-size: 25px; 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 text-[18px] 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 text-[18px]">
|
|
<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 text-[18px]">
|
|
<p class="text-white">My Tickets</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'dailyreports' %}">
|
|
<div class="w-full flex justify-start items-center gap-3 text-white py-2 text-[18px]">
|
|
<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">
|
|
<i class="fas fa-comment-alt" style="font-size: 20px; color: white;"></i>
|
|
<p class="text-white text-xl">Support</p>
|
|
</div>
|
|
<div>
|
|
<i class="fa fa-angle-down" style="font-size: 25px; color: white;"></i>
|
|
</div>
|
|
</div>
|
|
|
|
{% if user.is_superuser %}
|
|
<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">
|
|
<i class="fas fa-cash-register" style="font-size: 22px; color: white;"></i>
|
|
<p class="text-white text-xl">Billing</p>
|
|
</div>
|
|
<div>
|
|
<i class="fa fa-angle-down" style="font-size: 25px; color: white;"></i>
|
|
</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">
|
|
<i class="fas fa-cogs" style="font-size: 20px; color: white;"></i>
|
|
<p class="text-white text-xl">Utilities</p>
|
|
</div>
|
|
<div>
|
|
<i class="angleDown fa fa-angle-down" style="font-size: 25px; color: white;"></i>
|
|
<i class="angleUp fa fa-angle-up" style="font-size: 25px; 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 text-[18px] 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 text-[18px] 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 text-[18px] 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 text-[18px] 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 text-[18px] 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 text-[18px] 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">
|
|
<i class="fa fa-check-square" style="font-size: 22px; color: white;"></i>
|
|
<p class="text-white text-xl">Activity</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{% url 'signout' %}" class="w-full">
|
|
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
|
|
<i class="fa fa-power-off" style="font-size: 22px; color: white;"></i>
|
|
<p class="text-white text-xl">Logout</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div
|
|
class="w-full xlg1:w-[300px] h-fit bg-slate-800 flex flex-col items-center absolute xlg1:fixed justify-center gap-2 py-2 bottom-0 inset-x-0">
|
|
<div class="w-full flex flex-col justify-center items-center">
|
|
<p class="text-gray-500 font-light text-sm">Powered By Ositcom</p>
|
|
<p class="text-gray-500 font-light text-sm">Copyrights © 2023 All Rights Reserved</p>
|
|
</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">
|
|
<div class="w-fit flex justify-center items-center gap-10">
|
|
<div class="w-fit hidden xlg:flex flex-col gap-2 cursor-pointer" id="burgerMenuButton">
|
|
<div class="burgerMenuLine w-[25px] h-[2px] bg-slate-800 duration-300"></div>
|
|
<div class="burgerMenuLine w-[25px] h-[2px] bg-slate-800 duration-300"></div>
|
|
<div class="burgerMenuLine w-[25px] h-[2px] bg-slate-800 duration-300"></div>
|
|
</div>
|
|
|
|
<div class="w-fit flex flex-row xlg:hidden gap-2 cursor-pointer" id="closeMenuButton">
|
|
<div class="closeMenuLine w-[2px] h-[25px] bg-slate-800 duration-300"></div>
|
|
<div class="closeMenuLine w-[2px] h-[25px] bg-slate-800 duration-300"></div>
|
|
<div class="closeMenuLine w-[2px] h-[25px] bg-slate-800 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-[18px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addStatusButton"
|
|
data-modal-url="{% url 'addstatus' %}">
|
|
<i class="fa fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="w-fit flex justify-between items-center gap-3">
|
|
|
|
<div class="flex justify-center items-center gap-2">
|
|
<p class="text-gray-400">{{request.user.first_name}}
|
|
{{request.user.last_name}}</p>
|
|
<i class="fa fa-angle-down" style="color: grey;"></i>
|
|
</div>
|
|
|
|
|
|
<div class="w-[40px] s:w-[50px] h-[40px] s:h-[50px] bg-slate-600 rounded-full">
|
|
<img src='{{request.user.staffprofile.image.url}}' alt="user-image"
|
|
class="w-full h-full object-cover rounded-full">
|
|
</div>
|
|
</div>
|
|
</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-slate-700 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-slate-700 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="h-[150px] 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-slate-800 font-bold uppercase">Tasks</p>
|
|
<i class="fa fa-tasks" style="font-size: 30px; color: salmon;"></i>
|
|
</div>
|
|
<div
|
|
class="w-[60px] h-[60px] bg-white border-2 rounded-full border-red-400 flex justify-center items-center">
|
|
<p class="text-red-400 text-xl font-semibold">{{total_tasks}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="h-[150px] 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-slate-800 font-bold uppercase">Projects</p>
|
|
<i class="fas fa-project-diagram" style="font-size: 30px; color: cornflowerblue;"></i>
|
|
</div>
|
|
<div
|
|
class="w-[60px] h-[60px] bg-white border-2 rounded-full border-blue-500 flex justify-center items-center">
|
|
<p class="text-blue-500 text-xl font-semibold">2</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="h-fit md:h-[150px] bg-white shadow-md rounded-md p-5 cursor-pointer">
|
|
<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-slate-800 font-bold uppercase">Connected Users</p>
|
|
<div class="w-[18px] h-[18px] bg-gradient-to-r from-green-500 via-green-600 to-green-700 rounded-full shadow-md border border-gray-200 connectedUsersDot"></div>
|
|
</div>
|
|
<div
|
|
class="w-[60px] h-[60px] bg-white border-2 rounded-full border-green-700 flex justify-center items-center">
|
|
<p class="text-green-700 text-xl font-semibold">2</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
{% block content %}
|
|
replace me
|
|
{% endblock content %}
|
|
|
|
<!---------------------- JS SCRIPTS -------------------->
|
|
<!-- SIDE BAR SCRIPT -->
|
|
<script type="text/javascript" src='{% static "js/side-bar.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>
|
|
|
|
</body>
|
|
|
|
</html> |