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.
202 lines
12 KiB
HTML
202 lines
12 KiB
HTML
{% extends "customer_main.html" %}
|
|
{%load static%}
|
|
{% block content %}
|
|
|
|
|
|
<div class="w-full px-5 s:px-9 flex flex-col gap-5">
|
|
<!-- SUBSCRIPTION -->
|
|
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
|
|
<h1 class="text-secondosiblue text-[25px]">Subscriptions</h1>
|
|
<div class="w-full grid grid-cols-1 md:grid-cols-2 l:grid-cols-3 xxlg1:grid-cols-4 gap-x-5 gap-y-14 mt-3 mb-10">
|
|
|
|
{% for subscription in active_subscriptions %}
|
|
{% if subscription.item.item_type.name == 'OSIMENU' %}
|
|
<a href="{% url 'redirectosimenu' %}">
|
|
<div class="flex flex-col justify-center items-center shadow-md rounded-md cursor-pointer hover:scale-105 transition-transform duration-300 relative">
|
|
<div class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center rounded-t-md relative h-[130px]">
|
|
{% if subscription.item.item_type.name == 'OSIMENU' %}
|
|
<img src="{% static 'images/ositcom_logos/osimenublue.png' %}" class="w-[80%] h-auto">
|
|
{% endif %}
|
|
|
|
</div>
|
|
<div class="w-full bg-white border border-gray-100 shadow-md flex justify-start items-center p-3">
|
|
<p class="text-secondosiblue text-[17px]">Expires:{% if subscription.end_at %} <span class="font-semibold">{{subscription.end_at}} {% else %} <span class="font-semibold">No Expiry {% endif %}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{% elif subscription.item.item_type.name == 'OSICARD' %}
|
|
<a href="{% url 'redirectosicard' %}">
|
|
<div class="flex flex-col justify-center items-center shadow-md rounded-md cursor-pointer hover:scale-105 transition-transform duration-300 relative">
|
|
<div class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center rounded-t-md relative h-[130px]">
|
|
{% if subscription.item.item_type.name == 'OSICARD' %}
|
|
<img src="{% static 'images/ositcom_logos/osicardblue.png' %}" class="w-[80%] h-auto">
|
|
{% endif %}
|
|
|
|
</div>
|
|
<div class="w-full bg-white border border-gray-100 shadow-md flex justify-start items-center p-3">
|
|
<p class="text-secondosiblue text-[17px]">Expires:{% if subscription.end_at %} <span class="font-semibold">{{subscription.end_at}} {% else %} <span class="font-semibold">No Expiry {% endif %}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
|
|
<a href="{% url 'products' %}" class="w-full h-full">
|
|
<div class="w-full h-full bg-gray-50 rounded-md flex justify-center items-center py-10 px-5 shadow-md border border-gray-100 cursor-pointer hover:bg-secondosiblue duration-300 group zoom">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10 text-secondosiblue group-hover:text-white duration-300">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- TICKETS -->
|
|
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
|
|
<h1 class="text-secondosiblue text-[25px]">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">
|
|
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">
|
|
Ticket ID
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
Regarding
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 border-r border-gray-300 uppercase whitespace-nowrap">
|
|
Last Updated
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 border-r border-gray-300 uppercase whitespace-nowrap">
|
|
Updated By
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
|
|
Unread
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<!-- TABLE BODY -->
|
|
{% for ticket in customer_open_tickets %}
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
<tr data-href="{% url 'customerticketdetails' ticket.ticket_number %}" class="hover:bg-gray-100 duration-300 cursor-pointer">
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<a href="{% url 'customerticketdetails' ticket.ticket_number %}">
|
|
<p class="text-secondosiblue cursor-pointer">{{ticket.title}}</p>
|
|
</a>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-secondosiblue">{{ticket.ticket_number}}</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-secondosiblue">{{ticket.regarding}}</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
|
|
<p class="text-secondosiblue">{{ticket.ticketupdate_set.last.date_added}}</p>
|
|
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-secondosiblue">{{ticket.ticketupdate_set.last.added_by.first_name}}</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center items-center text-sm">
|
|
<div class="w-full flex justify-center items-center">
|
|
<div class="w-[40px] h-[40px] rounded-full border-2 border-secondosiblue flex justify-center items-center">
|
|
<p class="text-secondosiblue">{{ticket.unread_updates_count}}</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
{% endfor %}
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
|
|
<h1 class="text-secondosiblue text-[25px]">Ways to Get Help</h1>
|
|
|
|
<div class="w-full grid grid-cols-1 s:grid-cols-2 gap-5 mt-5">
|
|
<div class="flex flex-col gap-3 justify-center items-center bg-gray-50 border border-gray-100 shadow-md rounded-md px-5 py-10">
|
|
<div class="w-[70px] h-[70px] rounded-full bg-white border border-gray-100 flex justify-center items-center p-2">
|
|
<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">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m6.75 12H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<p class="font-poppinsBold text-secondosiblue text-center text-xl">Guides & Tutorials</p>
|
|
|
|
<p class="text-gray-500 font-light text-center">View Osina guides and tutorials for all experience levels.</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-3 justify-center items-center bg-gray-50 border border-gray-100 shadow-md rounded-md px-5 py-10">
|
|
<div class="w-[70px] h-[70px] rounded-full bg-white border border-gray-100 flex justify-center items-center p-2">
|
|
<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">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<p class="font-poppinsBold text-secondosiblue text-center text-xl">Community Q&A</p>
|
|
|
|
<p class="text-gray-500 font-light text-center">Ask questions, find answers, and connect with other members of the Ositcom community.</p>
|
|
</div>
|
|
|
|
|
|
<div class="flex flex-col gap-3 justify-center items-center bg-gray-50 border border-gray-100 shadow-md rounded-md px-5 py-10">
|
|
<div class="w-[70px] h-[70px] rounded-full bg-white border border-gray-100 flex justify-center items-center p-2">
|
|
<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">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<p class="font-poppinsBold text-secondosiblue text-center text-xl">Ositcom Status Page</p>
|
|
|
|
<p class="text-gray-500 font-light text-center">Get Updates on Ositcom incidents and maintenance.</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-3 justify-center items-center bg-gray-50 border border-gray-100 shadow-md rounded-md px-5 py-10">
|
|
<div class="w-[70px] h-[70px] rounded-full bg-white border border-gray-100 flex justify-center items-center p-2">
|
|
<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">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 0 1-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 0 0 1.183 1.981l6.478 3.488m8.839 2.51-4.66-2.51m0 0-1.023-.55a2.25 2.25 0 0 0-2.134 0l-1.022.55m0 0-4.661 2.51m16.5 1.615a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V8.844a2.25 2.25 0 0 1 1.183-1.981l7.5-4.039a2.25 2.25 0 0 1 2.134 0l7.5 4.039a2.25 2.25 0 0 1 1.183 1.98V19.5Z" />
|
|
</svg>
|
|
|
|
</div>
|
|
|
|
<p class="font-poppinsBold text-secondosiblue text-center text-xl">Customer Support</p>
|
|
|
|
<p class="text-gray-500 font-light text-center">View or open Ositcom Support tickets.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var rows = document.querySelectorAll('table tbody tr');
|
|
rows.forEach(function (row) {
|
|
row.addEventListener('click', function () {
|
|
window.location.href = row.getAttribute('data-href');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
{% endblock %} |