Customer Template
Nataly-ab
1 year ago
parent
c31633918b
commit
2a06abcaeb
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,170 @@
|
||||
{% extends "customer_dashboard/customer_main.html" %}
|
||||
{%load static%}
|
||||
{% block content %}
|
||||
|
||||
<div class="w-full px-5 s:px-9 flex flex-col gap-3">
|
||||
<!-- TICKETS -->
|
||||
<div class="w-full bg-white rounded-md h-fit shadow-md p-5">
|
||||
<h1 class="text-slate-700 text-xl font-bold">Tickets</h1>
|
||||
|
||||
<div class="overflow-x-auto border border-gray-300 rounded-md mt-3">
|
||||
<table class="min-w-full divide-y">
|
||||
<!-- TABLE HEADER -->
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
||||
#
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
||||
Client
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
||||
Last Update
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
||||
Last Reply
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
||||
Subject
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
||||
Department
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
||||
Status
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<!-- TABLE BODY -->
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<tr>
|
||||
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
||||
<p class="text-slate-800">1</p>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
||||
<p class="text-slate-800">Emile Elliye</p>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
||||
<p class="text-slate-800">20-1-2024</p>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
||||
<p class="text-slate-800">20-2-2024</p>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
||||
<p class="text-slate-800">Add Customer Template</p>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
||||
<p class="text-slate-800">Informatique</p>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm border-r border-gray-300 bg-green-700">
|
||||
<p class="text-white">Closed</p>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm">
|
||||
<div class="flex justify-center items-center gap-3">
|
||||
<a href="">
|
||||
<div class="text-[15px] text-blue-500 cursor-pointer">
|
||||
<i class="fa fa-edit"></i>
|
||||
</div>
|
||||
</a>
|
||||
<div class="text-[15px] text-red-500 cursor-pointer">
|
||||
<i class="fa fa-trash"></i>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- INVOICES -->
|
||||
<div class="w-full bg-white rounded-md h-fit shadow-md p-5">
|
||||
<h1 class="text-slate-700 text-xl font-bold">Invoices</h1>
|
||||
|
||||
<div class="overflow-x-auto border border-gray-300 rounded-md mt-3">
|
||||
<table class="min-w-full divide-y">
|
||||
<!-- TABLE HEADER -->
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
||||
#
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
||||
Due Date
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
||||
Title
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
||||
Description
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
||||
Status
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
|
||||
Amount
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<!-- TABLE BODY -->
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<tr>
|
||||
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
||||
<p class="text-slate-800">1</p>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
||||
<p class="text-slate-800">20-2-2024</p>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
||||
<p class="text-slate-800">Invoice 1</p>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
||||
<p class="text-slate-800">Invoice description section</p>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm border-r border-gray-300 bg-yellow-500">
|
||||
<p class="text-white">Pending</p>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm">
|
||||
<p class="text-slate-800">200</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
@ -0,0 +1,254 @@
|
||||
{% 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>
|
||||
|
||||
</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>
|
||||
|
||||
<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: 20px; color: white;"></i>
|
||||
<p class="text-white">Home</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
<!-- 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: 20px; color: white;"></i>
|
||||
<p class="text-white">My Projects</p>
|
||||
</div>
|
||||
<div>
|
||||
<i class="angleDown fa fa-angle-down" style="font-size: 20px; color: white;"></i>
|
||||
<i class="angleUp fa fa-angle-up" style="font-size: 20px; 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 'my-notes' %}">
|
||||
<div class="w-full flex justify-start items-center gap-3 text-white py-2 text-[18px]">
|
||||
<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 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-project-diagram" style="font-size: 18px; color: white;"></i>
|
||||
<p class="text-white">My Projects</p>
|
||||
</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-tasks" style="font-size: 20px; color: white;"></i>
|
||||
<p class="text-white">Tickets</p>
|
||||
</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-receipt" style="font-size: 20px; color: white;"></i>
|
||||
<p class="text-white">Invoices</p>
|
||||
</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-folder-open" style="font-size: 20px; color: white;"></i>
|
||||
<p class="text-white">Products</p>
|
||||
</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="fa fa-info-circle" style="font-size: 20px; color: white;"></i>
|
||||
<p class="text-white">Knowledgebase</p>
|
||||
</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-address-card" style="font-size: 20px; color: white;"></i>
|
||||
<p class="text-white">Contact Us</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<a href="{% url 'signout' %}" class="w-full">
|
||||
<div class="w-full flex justify-start items-center gap-3 py-3">
|
||||
<i class="fa fa-power-off" style="font-size: 20px; color: white;"></i>
|
||||
<p class="text-white">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>
|
||||
|
||||
<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 s:grid-cols-2 lg:grid-cols-4 gap-5 px-5 s:px-9 py-5">
|
||||
<div class="bg-white shadow-md rounded-md p-5">
|
||||
<div class="w-full h-full flex flex-col justify-between items-center gap-3">
|
||||
<div class="w-full flex justify-between items-center">
|
||||
<p class="text-xl 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="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-xl text-slate-800 font-bold uppercase">Tickets</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="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-xl text-slate-800 font-bold uppercase">Invoices</p>
|
||||
<i class="fas fa-receipt" style="font-size: 30px; color: red;"></i>
|
||||
</div>
|
||||
<div
|
||||
class="w-[60px] h-[60px] bg-white border-2 rounded-full border-red-500 flex justify-center items-center">
|
||||
<p class="text-red-500 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-xl text-slate-800 font-bold uppercase">Balance</p>
|
||||
<i class="fas fa-money-bill" style="font-size: 30px; color: green"></i>
|
||||
</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>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue