salim
/
newosinadjango
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New changes.

Browse Source
main
nataly 11 months ago
parent 503c55ecc7
commit 9b7fb9c9f4
20 changed files with 688 additions and 168 deletions
Show Stats Download Patch File Download Diff File

BIN
osinaweb/billing/__pycache__/views.cpython-312.pyc
View File

Binary file not shown.

BIN
osinaweb/billing/add/__pycache__/urls.cpython-312.pyc
View File

Binary file not shown.

BIN
osinaweb/billing/add/__pycache__/views.cpython-312.pyc
View File

Binary file not shown.

BIN
osinaweb/customercore/__pycache__/views.cpython-312.pyc
View File

Binary file not shown.

16
osinaweb/customercore/templates/details_templates/inner-customer-project.html
Unescape Escape View File

@ -5,10 +5,16 @@
<div class="w-full px-5 s:px-9 flex flex-col gap-3">
<div class="w-full bg-white rounded-md h-fit shadow-md p-5">
<div class="w-full rounded-md flex flex-col justify-center items-center py-2 gap-2 mt-[50px] {% if project.projectstatus_set.all.last.status == 'In Progress' %} bg-orange-500 {% elif project.projectstatus_set.all.last.status == 'Completed' %} bg-green-700 {% elif project.projectstatus_set.all.last.status == 'Cancelled' %} bg-red-500 {% endif %}">
<div
class="w-full rounded-md flex flex-col justify-center items-center py-2 gap-2 mt-[50px] {% if project.projectstatus_set.all.last.status == 'In Progress' %} bg-orange-500 {% elif project.projectstatus_set.all.last.status == 'Completed' %} bg-green-700 {% elif project.projectstatus_set.all.last.status == 'Cancelled' %} bg-red-500 {% endif %}">
<div
class="w-[70px] s:w-[90px] h-[70px] s:h-[90px] rounded-full mt-[-50px] s:mt-[-63px] border border-gray-300 bg-white">
<img src="{{project.logo.url}}" alt="" class="w-full h-full object-cover rounded-full">
{% if project.logo %}
<img src="{{project.logo.url}}" class="w-full h-full rounded-full object-cover">
{% else %}
<img src="{% static 'images/ositcom_logos/logobluebg-o.jpg' %}"
class="w-full h-full rounded-full object-cover">
{% endif %}
</div>
<div class="text-center">
<p class="text-xl text-white font-semibold">{{project.name}}</p>
@ -62,11 +68,11 @@
<img src="{% static 'images/default-user.png' %}"
class="w-full h-full object-cover shadow-md rounded-full">
{% else %}
<img src="{{project.manager.image.url}}"
class="w-full h-full object-cover shadow-md rounded-full">
<img src="{{project.manager.image.url}}" class="w-full h-full object-cover shadow-md rounded-full">
{% endif %}
</div>
<p class="text-gray-500 text-[16px]">{{project.manager.user.first_name}} {{project.manager.user.last_name}}</p>
<p class="text-gray-500 text-[16px]">{{project.manager.user.first_name}}
{{project.manager.user.last_name}}</p>
</div>
</div>

37
osinaweb/customercore/templates/payment_pages/buy-now.html
Unescape Escape View File

@ -40,21 +40,31 @@
<div class="hidden s:flex z-10">
<img src="{% static 'images/ositcom_logos/full-logo-white.png' %}" class="w-[150px]">
</div>
<div class="w-full s:w-fit flex flex-col justify-center items-center gap-5 text-center border border-white border-opacity-10 rounded-md py-10 px-10 s:px-20 shadow-md bg-white z-10">
<div
class="w-full s:w-fit flex flex-col justify-center items-center gap-5 text-center rounded-md py-10 px-10 s:px-20 shadow-md bg-white z-10">
<p class="text-secondosiblue font-poppinsExtraBold uppercase text-xl s:text-2xl">{{item.title}}</p>
<p class="text-secondosiblue text-xl s:text-2xl">$<span id="cyclePrice"></span></p>
<select class="w-full s:w-[300px] bg-white border border-gray-200 rounded-md px-3 py-3 text-secondosiblue outline-none flex justify-center items-center text-center cursor-pointer" id="cycle">
<select
class="w-full s:w-[300px] bg-white border border-gray-200 rounded-md px-3 py-3 text-secondosiblue outline-none cursor-pointer"
id="cycle">
{% for cycle in cycles %}
<option value="{{cycle.id}}" data-cycle-price="{{cycle.cycle_price}}">{{cycle.months}} {% if cycle.months == 1 %}month {% else %}months{% endif %}</option>
<option value="{{cycle.id}}" data-cycle-price="{{cycle.cycle_price}}">{{cycle.months}}
{% if cycle.months == 1 %}month {% else %}months{% endif %}</option>
{% endfor %}
</select>
{% if item.item_type.name == 'cPanel' %}
<input type="text" class="w-full bg-white border border-gray-200 rounded-md px-3 py-3 outline-none"
placeholder="Enter your IP">
{% endif %}
</div>
</div>
<div class="w-full bg-white border-bl-none xxlg1:border-bl-md px-5 py-3 z-10 flex flex-col justify-center items-center border border-gray-100">
<div
class="w-full bg-white border-bl-none xxlg1:border-bl-md px-5 py-3 z-10 flex flex-col justify-center items-center border border-gray-100">
<p class="text-secondosiblue font-poppinsLight text-sm">Payment Powered By</p>
<img src="{% static 'images/netcommerce-logo.png' %}" class="w-[120px]">
</div>
@ -63,11 +73,18 @@
<!-- EMBEDDED PAYMENT FORM -->
<div class="p-5 relative min-h-[200px] xxlg1:h-full">
<div class="w-full h-full absolute flex justify-center items-center bg-black bg-opacity-30 z-10 inset-0 rounded-rt-none rounded-b-md xxlg1:rounded-r-md rounded-bl-md xxlg1:rounded-bl-none hidden" id="paymentLoader">
<div class="w-full h-full absolute flex justify-center items-center bg-black bg-opacity-30 z-10 inset-0 rounded-rt-none rounded-b-md xxlg1:rounded-r-md rounded-bl-md xxlg1:rounded-bl-none hidden"
id="paymentLoader">
<div role="status">
<svg aria-hidden="true" class="w-14 h-14 text-white animate-spin dark:text-gray-600 fill-secondosiblue" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
<svg aria-hidden="true"
class="w-14 h-14 text-white animate-spin dark:text-gray-600 fill-secondosiblue"
viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="currentColor" />
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill" />
</svg>
</div>
</div>

44
osinaweb/customercore/templates/products/cpanel-licenses.html
Unescape Escape View File

@ -15,19 +15,26 @@
<!-- PRICING ON DESKTOP -->
<div class="w-full grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 mt-10">
<div
class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center {% if active_order_item_basic %} bg-black bg-opacity-20 {% endif %}">
class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center {% if active_order_admin_cloud %} bg-black bg-opacity-20 {% endif %}">
<p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">cPanel Admin Cloud</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$26/month</p>
</div>
<a href="">
{% if not active_order_admin_cloud %}
<a href="{% url 'buynow' admin_cloud.id %}">
<button
class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
Started
</button>
</a>
{% else %}
<button
class="w-fit px-9 py-2 bg-white border border-green-700 text-green-700 uppercase cursor-default">Currently
Subscribed
</button>
{% endif %}
<div class="w-full flex flex-col gap-3 mt-5">
<h1 class="text-gray-500 text-[17px] font-light">Features:</h1>
@ -52,19 +59,26 @@
</div>
<div
class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center {% if active_order_item_basic %} bg-black bg-opacity-20 {% endif %}">
class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center {% if active_order_pro_cloud %} bg-black bg-opacity-20 {% endif %}">
<p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">cPanel Pro Cloud</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$38.5/month</p>
</div>
<a href="">
{% if not active_order_pro_cloud %}
<a href="{% url 'buynow' pro_cloud.id %}">
<button
class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
Started
</button>
</a>
{% else %}
<button
class="w-fit px-9 py-2 bg-white border border-green-700 text-green-700 uppercase cursor-default">Currently
Subscribed
</button>
{% endif %}
<div class="w-full flex flex-col gap-3 mt-5">
<h1 class="text-gray-500 text-[17px] font-light">Features:</h1>
@ -89,19 +103,26 @@
</div>
<div
class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center {% if active_order_item_basic %} bg-black bg-opacity-20 {% endif %}">
class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center {% if active_order_premier_cloud %} bg-black bg-opacity-20 {% endif %}">
<p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">cPanel Premier Cloud</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$57.5/month</p>
</div>
<a href="">
{% if not active_order_premier_cloud %}
<a href="{% url 'buynow' premier_cloud.id %}">
<button
class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
Started
</button>
</a>
{% else %}
<button
class="w-fit px-9 py-2 bg-white border border-green-700 text-green-700 uppercase cursor-default">Currently
Subscribed</button>
{% endif %}
<div class="w-full flex flex-col gap-3 mt-5">
<h1 class="text-gray-500 text-[17px] font-light">Features:</h1>
@ -126,19 +147,26 @@
</div>
<div
class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center {% if active_order_item_basic %} bg-black bg-opacity-20 {% endif %}">
class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center {% if active_order_premier_metal %} bg-black bg-opacity-20 {% endif %}">
<p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">cPanel Premier Metal</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$57.5/month</p>
</div>
<a href="">
{% if not active_order_premier_metal %}
<a href="{% url 'buynow' premier_metal.id %}">
<button
class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
Started
</button>
</a>
{% else %}
<button
class="w-fit px-9 py-2 bg-white border border-green-700 text-green-700 uppercase cursor-default">Currently
Subscribed</button>
{% endif %}
<div class="w-full flex flex-col gap-3 mt-5">
<h1 class="text-gray-500 text-[17px] font-light">Features:</h1>

20
osinaweb/customercore/views.py
Unescape Escape View File

@ -267,9 +267,27 @@ def dedicated_servers_plans(request, *args, **kwargs):
@customer_login_required
def cpanel_licenses(request, *args, **kwargs):
admin_cloud = Item.objects.filter(title='ADMIN CLOUD').first()
pro_cloud = Item.objects.filter(title='PRO CLOUD').first()
premier_cloud = Item.objects.filter(title='PREMIER CLOUD').first()
premier_metal = Item.objects.filter(title='PREMIER METAL').first()
active_order_admin_cloud = OrderItem.objects.filter(order__customer=request.user.customerprofile, item=admin_cloud, active=True)
active_order_pro_cloud = OrderItem.objects.filter(order__customer=request.user.customerprofile, item=pro_cloud, active=True)
active_order_premier_cloud = OrderItem.objects.filter(order__customer=request.user.customerprofile, item=premier_cloud, active=True)
active_order_premier_metal = OrderItem.objects.filter(order__customer=request.user.customerprofile, item=premier_metal, active=True)
context = {
'admin_cloud' : admin_cloud,
'pro_cloud' : pro_cloud,
'premier_cloud' : premier_cloud,
'premier_metal' : premier_metal,
'active_order_admin_cloud' : active_order_admin_cloud,
'active_order_pro_cloud' : active_order_pro_cloud,
'active_order_premier_cloud' : active_order_premier_cloud,
'active_order_premier_metal' : active_order_premier_metal,
}
return render(request, 'products/cpanel-licenses.html', context)

BIN
osinaweb/db.sqlite3
View File

Binary file not shown.

14
osinaweb/input.css
Unescape Escape View File

@ -346,4 +346,18 @@
.default-css ol {
list-style-type: decimal;
padding: 0px 30px;
}
/* Add transition to the dropdown content */
#accessibilitesDropDown {
max-height: 0;
overflow: hidden;
transition: max-height 0.8s ease-in-out;
}
/* Set max-height to reveal dropdown content */
#accessibilitesDropDown.visible {
max-height: 1000px;
}

BIN
osinaweb/osinacore/__pycache__/custom_context.cpython-312.pyc
View File

Binary file not shown.

BIN
osinaweb/osinacore/__pycache__/views.cpython-312.pyc
View File

Binary file not shown.

14
osinaweb/osinacore/custom_context.py
Unescape Escape View File

@ -76,7 +76,17 @@ def utilities(request):
# Calculate time ago for each status and store it in a dictionary
latest_statuses_time_ago = [{'status': status, 'time_ago': calculate_time_ago(status)} for status in latest_statuses]
recent_logged_in_staffs = User.objects.filter(
staffprofile__isnull=False, # Ensure there's a StaffProfile associated
last_login__isnull=False # Ensure they have logged in at least once
).order_by('-last_login')[:8]
recent_logged_in_customers = User.objects.filter(
customerprofile__isnull=False, # Ensure there's a CustomerProfile associated
last_login__isnull=False # Ensure they have logged in at least once
).order_by('-last_login')[:8]
return {'total_tasks': total_tasks,
'latest_statuses' : latest_statuses,
@ -85,6 +95,8 @@ def utilities(request):
'recent_note' : recent_note,
'online_staff_profiles' : online_staff_profiles,
'user_offline' : user_offline,
'recent_logged_in_staffs' : recent_logged_in_staffs,
'recent_logged_in_customers' : recent_logged_in_customers,
}

192
osinaweb/osinacore/templates/customer_index.html
Unescape Escape View File

@ -4,6 +4,62 @@
<div class="w-full px-5 s:px-9 flex flex-col gap-5">
<!-- PROJECTS -->
{% if customer_projects %}
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-secondosiblue text-[25px]">Projects</h1>
<div class="w-full grid grid-cols-1 s:grid-cols-2 gap-5 mt-3">
{% for customer_project in customer_projects %}
<a href="{% url 'customerprojectdetails' customer_project.project_id %}">
<div
class="w-full rounded-md flex flex-col justify-between items-center gap-3 px-5 py-9 h-[250px] bg-gray-50 shadow-md relative hover:bg-gray-100 duration-300 projectContainer">
<div class="flex flex-col justify-center items-center gap-5">
<div class="w-[70px] h-[70px] rounded-full shadow-md">
{% if customer_project.logo %}
<img src="{{customer_project.logo.url}}" class="w-full h-full rounded-full object-cover">
{% else %}
<img src="{% static 'images/ositcom_logos/logobluebg-o.jpg' %}"
class="w-full h-full rounded-full object-cover">
{% endif %}
</div>
<div>
<p class="text-secondosiblue font-poppinsBold text-center text-xl">{{customer_project.name}}</p>
<p class="text-sm uppercase font-light text-secondosiblue text-center">
{{customer_project.project_id}}</p>
</div>
</div>
<div
class="{% if customer_project.projectstatus_set.all.last.status == 'In Progress' %} bg-orange-500 {% elif project.projectstatus_set.all.last.status == 'Completed' %} bg-green-700 {% elif project.projectstatus_set.all.last.status == 'Cancelled' %} bg-red-500 {% endif %} px-3 py-2 rounded-r-md text-xs text-white font-light uppercase absolute top-5 left-0">
<p>{{customer_project.projectstatus_set.all.last.status}}</p>
</div>
<div class="w-full mt-5 flex flex-col gap-2">
<div class="w-full flex justify-between items-center gap-3 text-gray-500 font-light text-xs">
<p class="startDate">{{customer_project.start_date}}</p>
<p class="endDate">{{customer_project.end_date}}</p>
</div>
<p id="projectId" class="hidden">{{customer_project.id}}</p>
<div class="w-full rounded-md bg-white shadow-md h-[8px] mainBar">
<div class=" rounded-md h-full progressBar"></div>
</div>
</div>
</div>
</a>
{% endfor %}
</div>
</div>
{% endif %}
<!-- SUBSCRIPTION -->
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-secondosiblue text-[25px]">Subscriptions</h1>
@ -11,31 +67,39 @@
{% 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 %}
<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>
<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
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 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>
@ -45,8 +109,10 @@
<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">
<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>
@ -75,14 +141,16 @@
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">
<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">
<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
Unread
</th>
</tr>
</thead>
@ -90,7 +158,8 @@
<!-- 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">
<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>
@ -106,9 +175,9 @@
</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">
@ -117,10 +186,11 @@
<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">
<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>
</div>
</td>
</tr>
</tbody>
@ -129,42 +199,56 @@
</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
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>
<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" />
<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>
<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
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>
@ -172,12 +256,16 @@
<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
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>
@ -198,5 +286,5 @@
});
</script>
<script type="module" src='{% static "js/projects/calculate-all-projects-time.js" %}'></script>
{% endblock %}

428
osinaweb/osinacore/templates/main.html
Unescape Escape View File

@ -9,7 +9,7 @@
<title>{% block title %} Osina {% endblock %}</title>
<link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- DRAGGABLE SLIDER LINKS -->
@ -50,7 +50,9 @@
class="w-full h-full bg-black bg-opacity-40 z-20 fixed hidden justify-center items-center inset-0 p-5">
<div class="w-full s:w-[500px] h-fit rounded-md p-5 cursor-pointer relative"
style="background-color: {{note.color}}">
<p class="text-base text-gray-500 p-5 rounded-md" style="word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;" id="noteContent"></p>
<p class="text-base text-gray-500 p-5 rounded-md"
style="word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;"
id="noteContent"></p>
<div class="bg-white rounded-full h-[30px] w-[30px] shadow-md absolute top-2 right-2 p-2 flex justify-center items-center cursor-pointer text-secondosiblue"
onclick="closeModal()">
@ -61,7 +63,8 @@
<!-- NOTIFICATIONS SIDEBAR -->
<div class="w-full h-[100vh] fixed flex justify-end items-center z-50 right-[-100%] bg-black bg-opacity-50" id="notificationsSideBar">
<div class="w-full h-[100vh] fixed flex justify-end items-center z-50 right-[-100%] bg-black bg-opacity-50"
id="notificationsSideBar">
<div class="w-[450px] h-[100vh] bg-white p-5">
<div class="w-full flex justify-between items-center">
<div class="flex justify-start items-center gap-2">
@ -73,7 +76,8 @@
<p class="text-secondosiblue font-poppinsBold text-xl">13 New Notifications</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-8 h-8 text-secondosiblue cursor-pointer" id="closeNotificationsSideBar">
stroke="currentColor" class="w-8 h-8 text-secondosiblue cursor-pointer"
id="closeNotificationsSideBar">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</div>
@ -191,8 +195,10 @@
class="w-full bg-transparent border border-white border-opacity-10 py-2 px-3 text-white outline-none rounded-md"
placeholder="Search...">
<div class="inset-y-0 absolute right-5 flex justify-center items-center text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[20px] text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-[20px] text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</div>
</div>
@ -207,8 +213,10 @@
<div
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
<div class="w-full flex justify-start items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
</svg>
<p class="text-white">Accounts</p>
</div>
@ -249,8 +257,10 @@
<div
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
<div class="w-full flex justify-start items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776" />
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776" />
</svg>
<p class="text-white">My Work</p>
</div>
@ -296,8 +306,10 @@
<div
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
<div class="w-full flex justify-start items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
</svg>
<p class="text-white">Support</p>
</div>
@ -325,8 +337,10 @@
<div
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
<div class="w-full flex justify-start items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" />
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" />
</svg>
<p class="text-white">Billing</p>
</div>
@ -375,8 +389,10 @@
<div
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
<div class="w-full flex justify-start items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12a7.5 7.5 0 0 0 15 0m-15 0a7.5 7.5 0 1 1 15 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077 1.41-.513m14.095-5.13 1.41-.513M5.106 17.785l1.15-.964m11.49-9.642 1.149-.964M7.501 19.795l.75-1.3m7.5-12.99.75-1.3m-6.063 16.658.26-1.477m2.605-14.772.26-1.477m0 17.726-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205 12 12m6.894 5.785-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" />
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M4.5 12a7.5 7.5 0 0 0 15 0m-15 0a7.5 7.5 0 1 1 15 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077 1.41-.513m14.095-5.13 1.41-.513M5.106 17.785l1.15-.964m11.49-9.642 1.149-.964M7.501 19.795l.75-1.3m7.5-12.99.75-1.3m-6.063 16.658.26-1.477m2.605-14.772.26-1.477m0 17.726-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205 12 12m6.894 5.785-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" />
</svg>
<p class="text-white">Utilities</p>
</div>
@ -452,8 +468,10 @@
<a class="w-full">
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
</svg>
<p class="text-white">Activity</p>
</div>
@ -466,7 +484,8 @@
class="w-full xlg1:w-[300px] h-fit bg-secondosiblue flex flex-col items-center absolute xlg1:fixed justify-center gap-2 py-2 bottom-0 inset-x-0 mt-[100px]">
<div class="w-full flex flex-col justify-center gap-1 items-center">
<div class="flex justify-center items-center gap-1">
<img src="{% static 'images/ositcom_logos/ositcomwhite(o).png' %}" alt="Ositcom Logo" class="w-[30px] h-[25px]">
<img src="{% static 'images/ositcom_logos/ositcomwhite(o).png' %}" alt="Ositcom Logo"
class="w-[30px] h-[25px]">
<p class="text-gray-200 font-light text-xs">Powered By OSITCOM</p>
</div>
<p class="text-gray-200 font-light text-xs">Copyrights © 2024 All Rights Reserved</p>
@ -499,9 +518,11 @@
<div class="w-full h-fit bg-secondosiblue px-5 flex flex-col hidden" id="mobileUserProfileDropdown">
<a href="{% url 'signout' %}" class="w-full">
<div class="w-full py-3 flex items-center gap-2 text-white text-[16px]">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
</svg>
<p>Logout</p>
</div>
</a>
@ -517,8 +538,10 @@
<div
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
<div class="w-full flex justify-start items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
</svg>
<p class="text-white">Accounts</p>
</div>
@ -559,8 +582,10 @@
<div
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
<div class="w-full flex justify-start items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776" />
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776" />
</svg>
<p class="text-white">My Work</p>
</div>
@ -607,8 +632,10 @@
<div
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
<div class="w-full flex justify-start items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
</svg>
<p class="text-white">Support</p>
</div>
@ -635,8 +662,10 @@
<div
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
<div class="w-full flex justify-start items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" />
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" />
</svg>
<p class="text-white">Billing</p>
</div>
@ -685,8 +714,10 @@
<div
class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
<div class="w-full flex justify-start items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12a7.5 7.5 0 0 0 15 0m-15 0a7.5 7.5 0 1 1 15 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077 1.41-.513m14.095-5.13 1.41-.513M5.106 17.785l1.15-.964m11.49-9.642 1.149-.964M7.501 19.795l.75-1.3m7.5-12.99.75-1.3m-6.063 16.658.26-1.477m2.605-14.772.26-1.477m0 17.726-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205 12 12m6.894 5.785-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" />
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M4.5 12a7.5 7.5 0 0 0 15 0m-15 0a7.5 7.5 0 1 1 15 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077 1.41-.513m14.095-5.13 1.41-.513M5.106 17.785l1.15-.964m11.49-9.642 1.149-.964M7.501 19.795l.75-1.3m7.5-12.99.75-1.3m-6.063 16.658.26-1.477m2.605-14.772.26-1.477m0 17.726-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205 12 12m6.894 5.785-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" />
</svg>
<p class="text-white">Utilities</p>
</div>
@ -761,8 +792,10 @@
<a class="w-full">
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-[25px] text-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
</svg>
<p class="text-white">Activity</p>
</div>
@ -791,10 +824,11 @@
<button
class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[16px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addStatusButton hover:bg-osiblue duration-300"
data-modal-url="{% url 'addstatusmodal' %}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-[20px]">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
stroke="currentColor" class="w-[20px]">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</button>
</div>
</div>
@ -802,7 +836,8 @@
<div class="flex justify-end items-center gap-5">
<!-- NOTIFICATION -->
<div class="relative cursor-pointer hover:scale-105 duration-300 transition-transform" id="openNotificationsSideBar">
<div class="relative cursor-pointer hover:scale-105 duration-300 transition-transform"
id="openNotificationsSideBar">
<div
class="w-[20px] h-[20px] rounded-full bg-secondosiblue text-white flex justify-center items-center text-sm p-1 absolute top-[-5px] right-[-5px]">
<p>1</p>
@ -879,35 +914,7 @@
<!-- MODULES SECTION -->
<div class="w-full h-fit grid grid-cols-1 s:grid-cols-2 xlg1:grid-cols-3 gap-5 px-5 s:px-9 py-5">
<div class="h-[150px] bg-white shadow-md rounded-md block xlg1: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 hidden sm:flex justify-center items-center shadow-md addStatusButton"
data-modal-url="{% url 'addstatusmodal' %}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-[20px]">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</button>
<button
class="h-full rounded-tr-md px-4 bg-gray-300 text-secondosiblue text-[18px] outline-none border-none cursor-pointer flex sm:hidden justify-center items-center shadow-md addStatusButtonMobile"
data-modal-url="{% url 'statusmobilemodal' %}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-[20px]">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</button>
</div>
<div id="statusContainer" class="w-full h-fit p-5">
{% include 'recent-status.html' %}
</div>
</div>
<div class="w-full h-fit hidden xlg1:grid grid-cols-1 s:grid-cols-2 xlg1:grid-cols-3 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">
<div class="w-full flex justify-between items-center">
@ -949,6 +956,99 @@
</div>
<!-- TOP MODULES ON MOBILE -->
<div class="block xlg1:hidden px-5 s:px-9 py-5">
<div class="bg-white shadow-sm rounded-md flex justify-between items-center text-secondosiblue text-[17px] py-5 px-3 cursor-pointer" id="openAccessibilitiesDropDown">
<div class="flex justify-start items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6" fill="none">
<path d="M15.5 6.5C15.5 8.433 13.933 10 12 10C10.067 10 8.5 8.433 8.5 6.5C8.5 4.567 10.067 3 12 3C13.933 3 15.5 4.567 15.5 6.5Z" stroke="currentColor" stroke-width="1.5" />
<path d="M22 17.5C22 19.433 20.433 21 18.5 21C16.567 21 15 19.433 15 17.5C15 15.567 16.567 14 18.5 14C20.433 14 22 15.567 22 17.5Z" stroke="currentColor" stroke-width="1.5" />
<path d="M9 17.5C9 19.433 7.433 21 5.5 21C3.567 21 2 19.433 2 17.5C2 15.567 3.567 14 5.5 14C7.433 14 9 15.567 9 17.5Z" stroke="currentColor" stroke-width="1.5" />
</svg>
<p>Accessibilites</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 arrowDown">
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 arrowUp hidden">
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
</svg>
</div>
<div class="w-full flex flex-col gap-3" id="accessibilitesDropDown">
<div class="h-[150px] bg-white shadow-md rounded-md block xlg1:hidden">
<div
class=" bg-osiblue rounded-t-md flex justify-between items-center text-white text-[22px] 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 hidden sm:flex justify-center items-center shadow-md addStatusButton"
data-modal-url="{% url 'addstatusmodal' %}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
stroke="currentColor" class="w-[20px]">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</button>
<button
class="h-full rounded-tr-md px-4 bg-gray-300 text-secondosiblue text-[18px] outline-none border-none cursor-pointer flex sm:hidden justify-center items-center shadow-md addStatusButtonMobile"
data-modal-url="{% url 'statusmobilemodal' %}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
stroke="currentColor" class="w-[20px]">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</button>
</div>
<div id="statusContainer" class="w-full h-fit p-5">
{% include 'recent-status.html' %}
</div>
</div>
<div class="bg-white shadow-md rounded-md p-5">
<div class="w-full h-full flex flex-col justify-between items-center">
<div class="w-full flex justify-between items-center">
<p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Tasks</p>
<img src="{% static 'images/icons/tasks.png' %}" class="w-[50px]">
</div>
<div
class="w-[60px] h-[60px] bg-white border-2 rounded-full border-secondosiblue flex justify-center items-center">
<p class="text-secondosiblue text-xl font-semibold">{{total_tasks}}</p>
</div>
</div>
</div>
<div class="bg-white shadow-md rounded-md p-5">
<div class="w-full h-full flex flex-col justify-between items-center">
<div class="w-full flex justify-between items-center">
<p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Projects</p>
<img src="{% static 'images/icons/projects.png' %}" class="w-[50px]">
</div>
<div
class="w-[60px] h-[60px] bg-white border-2 rounded-full border-secondosiblue flex justify-center items-center">
<p class="text-secondosiblue text-xl font-semibold">2</p>
</div>
</div>
</div>
<div class="bg-white shadow-md rounded-md p-5">
<div class="w-full h-full flex flex-col justify-between items-center">
<div class="w-full flex justify-between items-center">
<p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Tickets</p>
<img src="{% static 'images/icons/tickets.png' %}" class="w-[50px]">
</div>
<div
class="w-[60px] h-[60px] bg-white border-2 rounded-full border-secondosiblue flex justify-center items-center">
<p class="text-secondosiblue text-xl font-semibold">2</p>
</div>
</div>
</div>
</div>
</div>
<!-- NOTES SECTION -->
<div class="w-full px-5 s:px-9 pb-5">
<div class="w-full h-fit bg-white shadow-md rounded-md p-5">
@ -970,8 +1070,10 @@
<button
class="w-[34px] h-[33px] rounded-md p-2 bg-gray-300 text-white text-[16px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton hover:bg-osiblue duration-300"
data-modal-url="{% url 'addnotemodal' %}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-[20px]">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="3" stroke="currentColor" class="w-[20px]">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</button>
</div>
@ -985,7 +1087,8 @@
<button
class="w-[34px] h-[33px] rounded-md p-2 bg-gray-300 text-white text-[16px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addNoteButton hover:bg-osiblue duration-300"
data-modal-url="{% url 'addnotemodal' %}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-[20px]">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
stroke="currentColor" class="w-[20px]">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</button>
@ -1042,13 +1145,13 @@
<div class="w-[25%] hidden xxlg1:flex flex-col gap-3">
<div
class="hidden xxlg1:block w-full bg-white {% if latest_statuses_time_ago %}h-[1283px]{% else %}h-[305px]{%endif%} overflow-y-auto overflow-hidden rounded-md shadow-md py-5 px-3 relative">
class="hidden xxlg1:block w-full bg-white {% if latest_statuses_time_ago %}h-[1000px]{% else %}h-[305px]{%endif%} overflow-y-auto overflow-hidden rounded-md shadow-md py-5 px-3 relative">
<a href="{% url 'recentactivitiespage' %}">
<div>
<img src="{% static 'images/icons/expand.png' %}"
class="absolute w-[25px] right-3 top-5 hover:scale-105 cursor-pointer duration-300">
</div>
</a>
@ -1066,9 +1169,9 @@
<div class="w-full hidden xxlg1:block bg-white shadow-md rounded-md p-5">
<div class="w-full h-full flex flex-col gap-3 items-center">
<div class="w-full flex justify-center items-center">
<p class="text-[20px] text-secondosiblue font-bold text-center"><span
class="text-green-700"></span>
Connected Users</p>
<p class="text-[20px] text-secondosiblue font-bold text-center">
Connected Users
</p>
</div>
<div class="w-full flex flex-wrap gap-4">
@ -1085,9 +1188,175 @@
</div>
</div>
</div>
<!-- RECENTLY LOGGED IN USERS -->
<div
class="w-full hidden xxlg1:flex flex-col justify-center items-center gap-3 bg-white shadow-md rounded-md p-5 logged-in-container">
<div class="w-full flex justify-center items-center">
<p class="text-[20px] text-secondosiblue font-bold text-center">Recently Logged In</p>
</div>
<div class="w-full recentltLoggedCustomersContainer">
<div class="w-full rounded-md bg-gray-200 grid grid-cols-2 shadow-sm">
<button
class="w-full bg-white rounded-md text-secondosiblue text-sm cursor-pointer p-2 customerButton"
style="box-shadow: 0 0 6px rgba(88, 88, 88, 0.043), 6px 0 6px rgba(88, 88, 88, 0.043), 0 6px 6px rgba(88, 88, 88, 0.043), -6px 0 6px rgba(88, 88, 88, 0.043);">Customers</button>
<button
class="w-full text-secondosiblue text-sm cursor-pointer p-2 staffButton">Staffs</button>
</div>
<div class="w-full mt-3 flex flex-col gap-3 recentltLoggedCustomers">
{% for recent_logged_in_customer in recent_logged_in_customers %}
<div class="w-full flex justify-start items-center gap-2">
<div
class="w-[50px] h-[50px] bg-secondosiblue flex justify-center items-center rounded-full text-white">
<p>{{recent_logged_in_customer.first_name|slice:":1"}}{{recent_logged_in_customer.last_name|slice:":1"}}
</p>
</div>
<div class="flex flex-col">
<p class="text-secondosiblue text-sm">{{recent_logged_in_customer.first_name}}
{{recent_logged_in_customer.last_name}}</p>
<p class="text-gray-500 text-sm">
{{recent_logged_in_customer.last_login|date:"g:i A"}}</p>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="w-full hidden recentltLoggedStaffsContainer">
<div class="w-full rounded-md bg-gray-200 grid grid-cols-2 shadow-sm">
<button
class="w-full rounded-md text-secondosiblue text-sm cursor-pointer p-2 customerButton">Customers</button>
<button
class="w-full bg-white rounded-md text-secondosiblue text-sm cursor-pointer p-2 staffButton"
style="box-shadow: 0 0 6px rgba(88, 88, 88, 0.043), 6px 0 6px rgba(88, 88, 88, 0.043), 0 6px 6px rgba(88, 88, 88, 0.043), -6px 0 6px rgba(88, 88, 88, 0.043);">Staffs</button>
</div>
<div class="w-full mt-3">
{% for recent_logged_in_staff in recent_logged_in_staffs %}
<div class="w-full flex justify-start items-center gap-2">
<div class="relative">
<div class="w-[50px] h-[50px] rounded-full">
<img src="{{recent_logged_in_staff.staffprofile.image.url}}"
class="w-full h-full object-cover rounded-full">
</div>
{% if recent_logged_in_staff.staffprofile in online_staff_profiles %}
<div
class="w-[12px] h-[12px] absolute rounded-full bg-green-600 bottom-0 right-0 border-2 border-white">
</div>
{% else %}
<div
class="w-[12px] h-[12px] absolute rounded-full bg-red-500 bottom-0 right-0 border-2 border-white">
</div>
{% endif %}
</div>
<div class="flex flex-col">
<p class="text-secondosiblue text-sm">{{recent_logged_in_staff.first_name}}
{{recent_logged_in_staff.last_name}}</p>
<p class="text-gray-500 text-sm">{{recent_logged_in_staff.last_login|date:"g:i A"}}</p>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<!-- CONNECTED USERS / RECENTLY LOGGED IN ON MOBILE -->
<div class="grid grid-cols-1 s:grid-cols-2 gap-5 px-5 s:px-9 pb-5 xxlg1:hidden">
<!-- CONNECTED USERS ON MOBILE -->
<div class="w-full bg-white shadow-md rounded-md p-5">
<div class="w-full h-full flex flex-col gap-3 items-center">
<div class="w-full flex justify-center items-center">
<p class="text-[20px] text-secondosiblue font-bold text-center">
Connected Users
</p>
</div>
<div class="w-full flex flex-wrap gap-4">
{% for online in online_staff_profiles %}
<div class="flex flex-col justify-center items-center gap-1">
<div class="w-[30px] h-[30px] rounded-full">
<img src="{{online.image.url}}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
<p class="text-gray-500 text-[10px] font-light">{{online.user.first_name}}</p>
</div>
{% endfor %}
</div>
</div>
</div>
<!-- RECENTLY LOGGED IN USERS ON MOBILE -->
<div
class="w-full flex flex-col justify-center items-center gap-3 bg-white shadow-md rounded-md p-5 logged-in-container">
<div class="w-full flex justify-center items-center">
<p class="text-[20px] text-secondosiblue font-bold text-center">Recently Logged In</p>
</div>
<div class="w-full recentltLoggedCustomersContainer">
<div class="w-full rounded-md bg-gray-200 grid grid-cols-2 shadow-sm">
<button
class="w-full bg-white rounded-md text-secondosiblue text-sm cursor-pointer p-2 customerButton"
style="box-shadow: 0 0 6px rgba(88, 88, 88, 0.043), 6px 0 6px rgba(88, 88, 88, 0.043), 0 6px 6px rgba(88, 88, 88, 0.043), -6px 0 6px rgba(88, 88, 88, 0.043);">Customers</button>
<button
class="w-full text-secondosiblue text-sm cursor-pointer p-2 staffButton">Staffs</button>
</div>
<div class="w-full mt-3 flex flex-col gap-3 recentltLoggedCustomers">
{% for recent_logged_in_customer in recent_logged_in_customers %}
<div class="w-full flex justify-start items-center gap-2">
<div
class="w-[50px] h-[50px] bg-secondosiblue flex justify-center items-center rounded-full text-white">
<p>{{recent_logged_in_customer.first_name|slice:":1"}}{{recent_logged_in_customer.last_name|slice:":1"}}
</p>
</div>
<div class="flex flex-col">
<p class="text-secondosiblue text-sm">{{recent_logged_in_customer.first_name}}
{{recent_logged_in_customer.last_name}}</p>
<p class="text-gray-500 text-sm">
{{recent_logged_in_customer.last_login|date:"g:i A"}}</p>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="w-full hidden recentltLoggedStaffsContainer">
<div class="w-full rounded-md bg-gray-200 grid grid-cols-2 shadow-sm">
<button
class="w-full rounded-md text-secondosiblue text-sm cursor-pointer p-2 customerButton">Customers</button>
<button
class="w-full bg-white rounded-md text-secondosiblue text-sm cursor-pointer p-2 staffButton"
style="box-shadow: 0 0 6px rgba(88, 88, 88, 0.043), 6px 0 6px rgba(88, 88, 88, 0.043), 0 6px 6px rgba(88, 88, 88, 0.043), -6px 0 6px rgba(88, 88, 88, 0.043);">Staffs</button>
</div>
<div class="w-full mt-3">
{% for recent_logged_in_staff in recent_logged_in_staffs %}
<div class="w-full flex justify-start items-center gap-2">
<div class="relative">
<div class="w-[50px] h-[50px] rounded-full">
<img src="{{recent_logged_in_staff.staffprofile.image.url}}"
class="w-full h-full object-cover rounded-full">
</div>
{% if recent_logged_in_staff.staffprofile in online_staff_profiles %}
<div
class="w-[12px] h-[12px] absolute rounded-full bg-green-600 bottom-0 right-0 border-2 border-white">
</div>
{% else %}
<div
class="w-[12px] h-[12px] absolute rounded-full bg-red-500 bottom-0 right-0 border-2 border-white">
</div>
{% endif %}
</div>
<div class="flex flex-col">
<p class="text-secondosiblue text-sm">{{recent_logged_in_staff.first_name}}
{{recent_logged_in_staff.last_name}}</p>
<p class="text-gray-500 text-sm">
{{recent_logged_in_staff.last_login|date:"g:i A"}}</p>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<!-- MOBILE FOOTER -->
<div class="bg-osiblue h-fit py-2 mobileFooter">
@ -1103,8 +1372,10 @@
</div>
</div>
<!-- POPUP MODAL -->
<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden inset-0" id="popUpModal">
<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden inset-0"
id="popUpModal">
<div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
<button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
id="closeModalButton">
@ -1127,7 +1398,7 @@
</div>
</div>
<script type="module" src='{% static "js/pop-modals.js" %}'></script>
<script type="module" src='{% static "js/pop-modals.js" %}'></script>
<!---------------------- JS SCRIPTS -------------------->
<!-- SIDE BAR SCRIPT -->
@ -1160,6 +1431,11 @@
<!-- NOTIFICATIONS SIDE BAR -->
<script type="text/javascript" src='{% static "js/notifications-side-bar.js" %}'></script>
<!-- TO SWITCH BETWEEN THE CUSTOMERS AND STAFFS TABS IN THE RECENTLY LOGGED IN CONTAINER -->
<script type="text/javascript" src='{% static "js/recently-logged-in-users.js" %}'></script>
<!-- MODULES DROP DOWN ON MOBILE -->
<script type="text/javascript" src='{% static "js/accessibilities-dropdown.js" %}'></script>
</body>
</html>

1
osinaweb/osinacore/templates/recent-activities.html
Unescape Escape View File

@ -124,7 +124,6 @@
</div>
{% if latest_statuses_time_ago %}
{% for latest in latest_statuses_time_ago %}
<div class="w-full flex flex-col py-3">

3
osinaweb/osinacore/views.py
Unescape Escape View File

@ -192,6 +192,7 @@ def home(request, *args, **kwargs):
total_time_worked = project.total_time_worked(request.user)
open_tasks = project.open_tasks_count(request.user)
pinned_projects_with_time.append({'project': project, 'total_time_worked': total_time_worked, 'open_tasks': open_tasks})
context = {
'notes': notes,
@ -203,7 +204,9 @@ def home(request, *args, **kwargs):
else:
customer_projects = Project.objects.filter(customer=request.user.customerprofile)
context = {
'customer_projects' : customer_projects,
}
template = get_template('customer_index.html')
return HttpResponse(template.render(context, request))

46
osinaweb/static/dist/output.css vendored
Unescape Escape View File

@ -1161,6 +1161,10 @@ video {
height: 24rem;
}
.h-\[1000px\] {
height: 1000px;
}
.h-\[100px\] {
height: 100px;
}
@ -1173,10 +1177,6 @@ video {
height: 10px;
}
.h-\[1283px\] {
height: 1283px;
}
.h-\[12px\] {
height: 12px;
}
@ -2116,6 +2116,16 @@ video {
border-color: rgb(55 65 81 / var(--tw-border-opacity));
}
.border-green-500 {
--tw-border-opacity: 1;
border-color: rgb(34 197 94 / var(--tw-border-opacity));
}
.border-green-600 {
--tw-border-opacity: 1;
border-color: rgb(22 163 74 / var(--tw-border-opacity));
}
.border-green-700 {
--tw-border-opacity: 1;
border-color: rgb(21 128 61 / var(--tw-border-opacity));
@ -2201,16 +2211,6 @@ video {
border-color: rgb(202 138 4 / var(--tw-border-opacity));
}
.border-green-600 {
--tw-border-opacity: 1;
border-color: rgb(22 163 74 / var(--tw-border-opacity));
}
.border-green-500 {
--tw-border-opacity: 1;
border-color: rgb(34 197 94 / var(--tw-border-opacity));
}
.border-r-transparent {
border-right-color: transparent;
}
@ -3610,6 +3610,20 @@ video {
padding: 0px 30px;
}
/* Add transition to the dropdown content */
#accessibilitesDropDown {
max-height: 0;
overflow: hidden;
transition: max-height 0.8s ease-in-out;
}
/* Set max-height to reveal dropdown content */
#accessibilitesDropDown.visible {
max-height: 1000px;
}
.hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
@ -4086,6 +4100,10 @@ video {
display: flex;
}
.xlg1\:grid {
display: grid;
}
.xlg1\:hidden {
display: none;
}

21
osinaweb/static/js/accessibilities-dropdown.js
Unescape Escape View File

@ -0,0 +1,21 @@
document.addEventListener("DOMContentLoaded", function() {
const dropDown = document.getElementById('accessibilitesDropDown');
const dropDownArrowUp = document.querySelector('.arrowUp');
const dropDownArrowDown = document.querySelector('.arrowDown');
document.getElementById('openAccessibilitiesDropDown').addEventListener('click', function() {
dropDown.classList.toggle('visible');
dropDownArrowUp.classList.toggle('hidden');
dropDownArrowDown.classList.toggle('hidden');
// Add mt-3 class immediately when dropdown is opened
if (dropDown.classList.contains('visible')) {
dropDown.classList.add('mt-3');
} else {
// Delay the removal of mt-3 class when dropdown is closed
setTimeout(function() {
dropDown.classList.remove('mt-3');
}, 800); // Same duration as transition in CSS
}
});
});

20
osinaweb/static/js/recently-logged-in-users.js
Unescape Escape View File

@ -0,0 +1,20 @@
document.addEventListener('DOMContentLoaded', function () {
const customerButtons = document.querySelectorAll('.customerButton');
const staffButtons = document.querySelectorAll('.staffButton');
const customerContainers = document.querySelectorAll('.recentltLoggedCustomersContainer');
const staffContainers = document.querySelectorAll('.recentltLoggedStaffsContainer');
customerButtons.forEach(button => {
button.addEventListener('click', function () {
customerContainers.forEach(container => container.classList.remove('hidden'));
staffContainers.forEach(container => container.classList.add('hidden'));
});
});
staffButtons.forEach(button => {
button.addEventListener('click', function () {
staffContainers.forEach(container => container.classList.remove('hidden'));
customerContainers.forEach(container => container.classList.add('hidden'));
});
});
});
Write Preview
Loading…
Cancel
Save