main
nataly 1 year ago
parent d3560e1efc
commit c47911d5c2

@ -0,0 +1,18 @@
# Generated by Django 5.0.4 on 2024-04-23 11:44
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('billing', '0038_alter_invoice_pdf'),
]
operations = [
migrations.AddField(
model_name='recurringcycle',
name='cycle_price',
field=models.FloatField(null=True),
),
]

@ -23,6 +23,7 @@ class Item(models.Model):
class RecurringCycle(models.Model):
item = models.ForeignKey(Item, on_delete=models.CASCADE, null=True)
months = models.IntegerField()
cycle_price = models.FloatField(null=True)
def __str__(self):
return f"{self.months} months"

@ -7,7 +7,7 @@
<div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-secondosiblue text-[30px] font-semibold">Invoices</h1>
<h1 class="text-secondosiblue text-[25px]">Invoices</h1>
<div
class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">

@ -60,15 +60,15 @@
{% for product in products %}
<tr>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{product.title}}</p>
<p class="text-secondosiblue">{{product.title}}</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{product.item_type}}</p>
<p class="text-secondosiblue">{{product.item_type}}</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">${{product.amount}}</p>
<p class="text-secondosiblue">${{product.amount}}</p>
</td>
@ -129,19 +129,19 @@
{% for service in services %}
<tr>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{service.title}}</p>
<p class="text-secondosiblue">{{service.title}}</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{service.customer.user.first_name}} {{service.customer.user.last_name}}</p>
<p class="text-secondosiblue">{{service.customer.user.first_name}} {{service.customer.user.last_name}}</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{service.item_type}}</p>
<p class="text-secondosiblue">{{service.item_type}}</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">${{service.amount}}</p>
<p class="text-secondosiblue">${{service.amount}}</p>
</td>

@ -5,7 +5,7 @@
<div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-secondosiblue text-[30px] font-semibold">Orders</h1>
<h1 class="text-secondosiblue text-[25px]">Orders</h1>
<div
class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
<div class="w-full s:w-fit flex justify-start items-center gap-5">
@ -60,15 +60,15 @@
{% for order in orders %}
<tr>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{order.order_id}}</p>
<p class="text-secondosiblue">{{order.order_id}}</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{order.customer.user.first_name}} {{order.customer.user.last_name}}</p>
<p class="text-secondosiblue">{{order.customer.user.first_name}} {{order.customer.user.last_name}}</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">${{order.get_cart_total}}</p>
<p class="text-secondosiblue">${{order.get_cart_total}}</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300 {% if order.status == 'Completed' %} bg-green-700 {% elif order.status == 'Pending' %} bg-yellow-500 {% else %} bg-gray-400 {% endif %}">

@ -5,7 +5,7 @@
<div class="w-full px-5 s:px-9 flex flex-col gap-3">
<!-- INVOICES -->
<div class="w-full bg-white rounded-md h-fit shadow-md p-5">
<h1 class="text-secondosiblue text-[30px] font-semibold">Invoices</h1>
<h1 class="text-secondosiblue text-[25px]">Invoices</h1>
<div class="overflow-x-auto border border-gray-300 rounded-md mt-4">
<table class="min-w-full divide-y">
<!-- TABLE HEADER -->

@ -5,7 +5,7 @@
<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">
<h1 class="text-secondosiblue text-[30px] font-semibold">My Orders</h1>
<h1 class="text-secondosiblue text-[25px]">My Orders</h1>
<div class="overflow-x-auto border border-gray-300 rounded-md mt-4">

@ -67,9 +67,11 @@
<div class="flex justify-between items-center">
<img src="{% static 'images/ositcom_logos/osicardblue.png' %}" class="w-[180px]">
<button
<a href="{% url 'osicardplans' %}">
<button
class="bg-osiblue border border-osiblue text-white px-5 py-2 rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">More
Details</button>
</a>
</div>

@ -16,7 +16,36 @@
<div class="w-full h-fit bg-white rounded-md shadow-md">
<div class="grid grid-cols-1 xxlg1:grid-cols-2">
<div
class="w-full hidden xxlg1:flex flex-col items-center justify-center rounded-l-md h-full bg-osiblue bg-opacity-70 p-9 gap-8 relative overflow-hidden">
class="w-full flex flex-col items-center justify-center rounded-l-md h-full p-9 gap-8 overflow-hidden relative bg-gradient-to-b from-gray-400 via-gray-500 to-blue-950">
<div
class="absolute top-0 left-32 w-[400px] h-[400px] bg-slate-800 filter blur-xl opacity-70 animate-blob animation-delay-2000">
</div>
<div
class="absolute top-20 right-0 w-[400px] h-[400px] bg-osiblue filter blur-xl opacity-70 animate-blob animation-delay-2000">
</div>
<div
class="absolute bottom-0 left-10 w-[400px] h-[400px] bg-blue-900 filter blur-xl opacity-70 animate-blob animation-delay-2000">
</div>
<div
class="absolute bottom-0 right-36 w-[400px] h-[400px] bg-gray-400 filter blur-xl opacity-70 animate-blob animation-delay-2000">
</div>
<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">
<p class="text-secondosiblue font-poppinsExtraBold uppercase text-xl s:text-2xl">{{item.title}}</p>
<p class="text-secondosiblue text-xl s:text-2xl">${{item.amount}}</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">
{% for cycle in cycles %}
<option value="{{cycle.id}}">{{cycle.months}} {% if cycle.months == 1 %}month {% else %}months{% endif %}</option>
{% endfor %}
</select>
</div>
</div>

@ -13,7 +13,7 @@
<img src="{% static 'images/ositcom_logos/osicardblue.png' %}" class="w-[180px] s:w-[250px]">
<!-- PRICING ON DESKTOP -->
<div class="w-full hidden l:grid grid-cols-3 mt-24">
<div class="w-full hidden l:grid grid-cols-3 mt-10">
<div class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center">
<p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">Basic</p>

@ -104,13 +104,14 @@ def dedicated_servers_plans(request, *args, **kwargs):
@customer_login_required
def payment(request, item_id):
item = get_object_or_404(Item, id=item_id)
cycles = RecurringCycle.objects.filter(item = item)
context = {
'item' : item,
'cycles' : cycles,
}
return render(request, 'payment.html', context)
@ -122,6 +123,8 @@ def basic_auth_header(username, password):
return f"Basic {encoded_credentials}"
import json
@customer_login_required
def initiate_checkout(request):
api_username = 'merchant.TEST06127800'
@ -131,9 +134,15 @@ def initiate_checkout(request):
customer = request.user.customerprofile
item_id = request.headers.get('X-Item-ID')
data = json.loads(request.body)
item_id = data.get('item_id')
cycle_id = data.get('cycle_id')
item = Item.objects.get(id=item_id)
cycle = RecurringCycle.objects.get(id = cycle_id)
price = cycle.cycle_price
order = Order.objects.create(status='None', customer=customer)
order.save()
order_id = order.order_id
@ -150,7 +159,7 @@ def initiate_checkout(request):
'interaction.operation': 'PURCHASE',
'interaction.merchant.name': merchant_name,
'order.id': order_id,
'order.amount': '100.00',
'order.amount': price,
'order.currency': 'USD',
'order.description': 'description_of_order',
'order.notificationUrl' : 'https://newosina.osinode.com/webhooks/',

Binary file not shown.

@ -124,18 +124,16 @@
0%,
100% {
transform: scale(1);
opacity: 0.5;
transform: scale(0.9);
}
50% {
transform: scale(1.2);
opacity: 1;
transform: scale(1);
}
}
.usersActivityIcon {
animation: zoomInOut 1.5s infinite;
.zoom {
animation: zoomInOut 2s infinite;
}

@ -728,7 +728,7 @@
<div class="w-full bg-osiblue h-fit py-2 mobileFooter">
<div class="w-full flex flex-col justify-center items-center gap-1">
<div class="flex justify-center items-center gap-2">
<img src="{% static 'images/banner-logo.png' %}" alt="Ositcom Logo" class="w-[30px] h-[25px]">
<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>

@ -25,7 +25,7 @@
<div class="w-full py-2 flex justify-start gap-3 items-center">
<input type="checkbox" name="" id="relatedTaskCheckbox">
<p class="text-slate-700 text-base">Add Status To Task</p>
<p class="text-secondosiblue text-base">Add Status To Task</p>
</div>
<div class="w-full hidden"

@ -4,12 +4,12 @@
<div class="w-full px-5 s:px-9 flex flex-col gap-5">
<!-- INVOICESS -->
<!-- SUBSCRIPTION -->
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-secondosiblue text-[30px]">Subscriptions</h1>
<div class="w-full grid grid-cols-4 gap-5 mt-3">
<div class="flex flex-col justify-center items-center shadow-md">
<div class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center">
<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-5 mt-3">
<div class="flex flex-col justify-center items-center shadow-md rounded-md cursor-pointer hover:scale-105 transition-transform duration-300">
<div class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center rounded-t-md">
<img src="{% static 'images/ositcom_logos/osicardblue.png' %}" class="w-[80%] h-auto">
</div>
@ -21,8 +21,8 @@
</div>
</div>
<div class="flex flex-col justify-center items-center shadow-md">
<div class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center">
<div class="flex flex-col justify-center items-center shadow-md rounded-md cursor-pointer hover:scale-105 transition-transform duration-300">
<div class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center rounded-t-md">
<img src="{% static 'images/ositcom_logos/osimenublue.png' %}" class="w-[80%] h-auto">
</div>
@ -33,13 +33,21 @@
</div>
</div>
</div>
<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-[30px]">Tickets</h1>
<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 -->
@ -123,7 +131,7 @@
<!-- INVOICESS -->
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-secondosiblue text-[30px]">Invoices</h1>
<h1 class="text-secondosiblue text-[25px]">Invoices</h1>
<div class="overflow-x-auto border border-gray-300 rounded-md mt-3">
<table class="min-w-full divide-y">
<!-- TABLE HEADER -->

@ -450,11 +450,14 @@
</div>
{% endblock modules_section %}
{% block content %}
replace me
{% endblock content %}
<!-- BODY -->
<div class="w-full mb-5">
{% block content %}
replace me
{% endblock content %}
</div>
<!-- MOBILE FOOTER -->
<div class="bg-osiblue h-fit py-2 mobileFooter">

@ -81,7 +81,7 @@
<!-- POPUP MODAL -->
<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" 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">

@ -175,7 +175,7 @@
<!-- POPUP MODAL -->
<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" 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">

@ -101,7 +101,7 @@
</p>
</div>
<div class="w-fit py-1 px-2 bg-white text-slate-700 text-xs rounded-md shadow-md">
<div class="w-fit py-1 px-2 bg-white text-secondosiblue text-xs rounded-md shadow-md">
{% if point.status == 'Completed' %}
<p class="text-green-700 opacity-50">Completed</p>
{% elif point.status == 'Working On' %}
@ -109,7 +109,7 @@
{% elif point.status == 'Paused' %}
<p class="text-red-500 opacity-50">Paused</p>
{% else %}
<p class="text-slate-700 opacity-50">Created</p>
<p class="text-secondosiblue opacity-50">Created</p>
{% endif %}
</div>
</div>

@ -68,7 +68,7 @@
<!-- POPUP MODAL -->
<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" 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">

@ -218,7 +218,7 @@
</p>
</div>
<div class="w-fit py-1 px-2 bg-white text-slate-700 text-xs rounded-md shadow-md">
<div class="w-fit py-1 px-2 bg-white text-secondosiblue text-xs rounded-md shadow-md">
{% if point.status == 'Completed' %}
<p class="text-green-700 opacity-50">Completed</p>
{% elif point.status == 'Working On' %}
@ -226,7 +226,7 @@
{% elif point.status == 'Paused' %}
<p class="text-red-500 opacity-50">Paused</p>
{% else %}
<p class="text-slate-700 opacity-50">Created</p>
<p class="text-secondosiblue opacity-50">Created</p>
{% endif %}
</div>
</div>

@ -120,7 +120,7 @@
<!-- POPUP MODAL -->
<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" 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">

@ -15,7 +15,7 @@
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
<span class="ml-4 text-sm text-slate-700 font-semibold">Current Page</span>
<span class="ml-4 text-sm text-secondosiblue font-semibold">Current Page</span>
</div>
</div> -->
@ -63,32 +63,32 @@
<div class="w-full flex flex-col gap-2">
<div class="flex justify-start items-center gap-2">
<p class="text-gray-400 text-base">Project:</p>
<p class="text-slate-700 text-base">{{task.project.name}}</p>
<p class="text-secondosiblue text-base">{{task.project.name}}</p>
</div>
<div class="flex justify-start items-center gap-2">
<p class="text-gray-400 text-base">Epic:</p>
<p class="text-slate-700 text-base">{{task.epic.title}}</p>
<p class="text-secondosiblue text-base">{{task.epic.title}}</p>
</div>
<div class="flex justify-start items-center gap-2">
<p class="text-gray-400 text-base">Assigned To:</p>
<p class="text-slate-700 text-base">{{task.assigned_to.user.first_name}}
<p class="text-secondosiblue text-base">{{task.assigned_to.user.first_name}}
{{task.assigned_to.user.last_name}}</p>
</div>
<div class="flex justify-start items-center gap-2">
<p class="text-gray-400 text-base">Files:</p>
<p class="text-slate-700 text-base"></p>
<p class="text-secondosiblue text-base"></p>
</div>
<div class="flex justify-start items-center gap-2">
<p class="text-gray-400 text-base">Tags:</p>
<p class="text-slate-700 text-base"></p>
<p class="text-secondosiblue text-base"></p>
</div>
<div class="flex justify-start items-center gap-2">
<p class="text-gray-400 text-base">Extra:</p>
<p class="text-slate-700 text-base">{{task.extra}}</p>
<p class="text-secondosiblue text-base">{{task.extra}}</p>
</div>
</div>
</div>
@ -174,29 +174,29 @@
<div class="w-full flex flex-col gap-2 p-3">
<div class="flex justify-start items-center gap-2">
<p class="text-gray-400 text-base">Project:</p>
<p class="text-slate-700 text-base">{{task.project.name}}</p>
<p class="text-secondosiblue text-base">{{task.project.name}}</p>
</div>
<div class="flex justify-start items-center gap-2">
<p class="text-gray-400 text-base">Epic:</p>
<p class="text-slate-700 text-base">{{task.epic.title}}</p>
<p class="text-secondosiblue text-base">{{task.epic.title}}</p>
</div>
<div class="flex justify-start items-center gap-2">
<p class="text-gray-400 text-base">Assigned To:</p>
<p class="text-slate-700 text-base">{{task.assigned_to.user.first_name}}
<p class="text-secondosiblue text-base">{{task.assigned_to.user.first_name}}
{{task.assigned_to.user.last_name}}</p>
</div>
<div class="flex justify-start items-center gap-2">
<p class="text-gray-400 text-base">Extra:</p>
<p class="text-slate-700 text-base">{{task.extra}}</p>
<p class="text-secondosiblue text-base">{{task.extra}}</p>
</div>
</div>
<div
class="w-full bg-gray-100 flex justify-between items-center py-3 px-3 text-slate-700 actionsButton">
class="w-full bg-gray-100 flex justify-between items-center py-3 px-3 text-secondosiblue actionsButton">
<p>Actions</p>
<i class="fa fa-angle-down" style="font-size: 20px;"></i>
<i class="fa fa-angle-up" style="font-size: 20px; display: none;"></i>

@ -5,7 +5,7 @@
<div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-secondosiblue text-[30px] font-semibold">Businness Types</h1>
<h1 class="text-secondosiblue text-[25px]">Businness Types</h1>
<!-- FILTERING -->
<div
@ -49,7 +49,7 @@
{% for type in businesstypes %}
<tr>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{type.name}}</p>
<p class="text-secondosiblue">{{type.name}}</p>
</td>
<td class="px-6 py-4 text-center text-sm">

@ -6,7 +6,7 @@
<div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-secondosiblue text-[30px] font-semibold">Businesses</h1>
<h1 class="text-secondosiblue text-[25px]">Businesses</h1>
<!-- FILTERING -->
<div
@ -65,16 +65,16 @@
<img src='{{business.logo.url}}' alt="Business Logo"
class="w-full h-full object-cover rounded-full">
</div>
<p class="text-slate-800">{{business.name}}</p>
<p class="text-secondosiblue">{{business.name}}</p>
</div>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{business.customer.user.first_name}} {{business.customer.user.last_name}}</p>
<p class="text-secondosiblue">{{business.customer.user.first_name}} {{business.customer.user.last_name}}</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{business.type.name}}</p>
<p class="text-secondosiblue">{{business.type.name}}</p>
</td>

@ -5,7 +5,7 @@
<div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-secondosiblue text-[30px] font-semibold">Customers</h1>
<h1 class="text-secondosiblue text-[25px]">Customers</h1>
<!-- FILTERING -->
<div
@ -58,44 +58,28 @@
<!-- TABLE BODY -->
<tbody class="bg-white divide-y divide-gray-200">
<!-- 1st row -->
{% for customer in customers %}
<tr>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{customer.user.first_name}}
<p class="text-secondosiblue">{{customer.user.first_name}}
{{customer.user.last_name}}</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{customer.user.username}}</p>
<p class="text-secondosiblue">{{customer.user.username}}</p>
</td>
{% if customer.status == 'Active' %}
<td class="px-6 py-4 text-center text-sm border-r border-gray-300 bg-green-700">
<p class="text-white">{{customer.status}}</p>
</td>
{% endif %}
{% if customer.status == 'Terminated' %}
<td class="px-6 py-4 text-center text-sm border-r border-gray-300 bg-gray-500">
<td class="px-6 py-4 text-center text-sm border-r border-gray-300 {% if customer.status == 'Active' %}bg-green-700{% endif %} {% if customer.status == 'Terminated' %}bg-gray-500{% endif %} {% if customer.status == 'Suspended' %}bg-red-500{% endif %}">
<p class="text-white">{{customer.status}}</p>
</td>
{% endif %}
{% if customer.status == 'Suspended' %}
<td class="px-6 py-4 text-center text-sm border-r border-gray-300 bg-red-500">
<p class="text-white">{{customer.status}}</p>
</td>
{% endif %}
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
{% if customer.business_set.all %}
{% for business in customer.business_set.all %}
<p class="text-slate-800">{{business.name}}</p>
<p class="text-secondosiblue">{{business.name}}</p>
{% endfor %}
{% else %}
<p class="text-slate-800">None</p>
<p class="text-secondosiblue">None</p>
{% endif %}
</td>

@ -4,7 +4,7 @@
<div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-secondosiblue text-[30px] font-semibold">{% if request.user.is_superuser %}Daily Reports{% else %} My Daily Reports{% endif%}</h1>
<h1 class="text-secondosiblue text-[25px]">{% if request.user.is_superuser %}Daily Reports{% else %} My Daily Reports{% endif%}</h1>
<!-- FILTERING -->
<div

@ -4,7 +4,7 @@
<div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-secondosiblue text-[30px] font-semibold">Notes</h1>
<h1 class="text-secondosiblue text-[25px]">Notes</h1>
<!-- FILTERING -->
<div class="w-full py-3 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-end items-center">

@ -5,7 +5,7 @@
<div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-secondosiblue text-[30px] font-semibold">Project Types</h1>
<h1 class="text-secondosiblue text-[25px]">Project Types</h1>
<!-- FILTERING -->
<div
@ -49,7 +49,7 @@
{% for type in projecttypes %}
<tr>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{type.name}}</p>
<p class="text-secondosiblue">{{type.name}}</p>
</td>
<td class="px-6 py-4 text-center text-sm">
@ -74,7 +74,7 @@
<!-- POPUP MODAL -->
<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" 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">

@ -6,7 +6,7 @@
<div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-secondosiblue text-[30px] font-semibold">My Projects</h1>
<h1 class="text-secondosiblue text-[25px]">My Projects</h1>
<!-- PROJECT FILTERING -->
<div

@ -5,7 +5,7 @@
<div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-secondosiblue text-[30px] font-semibold">References</h1>
<h1 class="text-secondosiblue text-[25px]">References</h1>
<!-- FILTERING -->
<div
@ -53,11 +53,11 @@
{% for reference in references %}
<tr>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{reference.name}}</p>
<p class="text-secondosiblue">{{reference.name}}</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{reference.formatted_date}}</p>
<p class="text-secondosiblue">{{reference.formatted_date}}</p>
</td>
<td class="px-6 py-4 text-center text-sm">
@ -82,7 +82,7 @@
<!-- POPUP MODAL -->
<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" 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">

@ -6,7 +6,7 @@
<div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-secondosiblue text-[30px] font-semibold">Staff Positions</h1>
<h1 class="text-secondosiblue text-[25px]">Staff Positions</h1>
<!-- FILTERING -->
<div
@ -50,7 +50,7 @@
{% for position in staffpositions %}
<tr>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{position.name}}</p>
<p class="text-secondosiblue">{{position.name}}</p>
</td>
<td class="px-6 py-4 text-center text-sm">
@ -75,7 +75,7 @@
<!-- POPUP MODAL -->
<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" 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">

@ -5,7 +5,7 @@
<div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-secondosiblue text-[30px] font-semibold">Staffs</h1>
<h1 class="text-secondosiblue text-[25px]">Staffs</h1>
<!-- FILTERING -->
<div
@ -60,12 +60,12 @@
<img src='{{staff.image.url}}' alt="user-image"
class="w-full h-full object-cover rounded-full">
</div>
<p class="text-slate-800">{{staff.user.first_name}} {{staff.user.last_name}}</p>
<p class="text-secondosiblue">{{staff.user.first_name}} {{staff.user.last_name}}</p>
</div>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{staff.user.email}}</p>
<p class="text-secondosiblue">{{staff.user.email}}</p>
</td>
<td class="px-6 py-4 text-center text-sm">
@ -95,12 +95,12 @@
<img src='{{staff.image.url}}' alt="user-image"
class="w-full h-full object-cover rounded-full">
</div>
<p class="text-slate-800">{{staff.user.first_name}} {{staff.user.last_name}}</p>
<p class="text-secondosiblue">{{staff.user.first_name}} {{staff.user.last_name}}</p>
</div>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{staff.user.email}}</p>
<p class="text-secondosiblue">{{staff.user.email}}</p>
</td>
<td class="px-6 py-4 text-center text-sm">

@ -5,7 +5,7 @@
<div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-secondosiblue text-[30px] font-semibold">Tags</h1>
<h1 class="text-secondosiblue text-[25px]">Tags</h1>
<!-- FILTERING -->
<div
@ -49,7 +49,7 @@
{% for tag in tags %}
<tr>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{tag.name}}</p>
<p class="text-secondosiblue">{{tag.name}}</p>
</td>
<td class="px-6 py-4 text-center text-sm">
@ -74,7 +74,7 @@
<!-- POPUP MODAL -->
<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" 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">

@ -5,7 +5,7 @@
<div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-secondosiblue text-[30px] font-semibold">My Tasks</h1>
<h1 class="text-secondosiblue text-[25px]">My Tasks</h1>
<!-- TASK FILTERING -->
<div
@ -85,32 +85,32 @@
<div class="w-full flex flex-col gap-2">
<div class="flex justify-start items-center gap-2">
<p class="text-gray-400 text-base">Project:</p>
<p class="text-slate-700 text-base">{{task.project.name}}</p>
<p class="text-secondosiblue text-base">{{task.project.name}}</p>
</div>
<div class="flex justify-start items-center gap-2">
<p class="text-gray-400 text-base">Epic:</p>
<p class="text-slate-700 text-base">{{task.epic.title}}</p>
<p class="text-secondosiblue text-base">{{task.epic.title}}</p>
</div>
<div class="flex justify-start items-center gap-2">
<p class="text-gray-400 text-base">Assigned To:</p>
<p class="text-slate-700 text-base">{{task.assigned_to.user.first_name}}
<p class="text-secondosiblue text-base">{{task.assigned_to.user.first_name}}
{{task.assigned_to.user.last_name}}</p>
</div>
<div class="flex justify-start items-center gap-2">
<p class="text-gray-400 text-base">Files:</p>
<p class="text-slate-700 text-base"></p>
<p class="text-secondosiblue text-base"></p>
</div>
<div class="flex justify-start items-center gap-2">
<p class="text-gray-400 text-base">Tags:</p>
<p class="text-slate-700 text-base"></p>
<p class="text-secondosiblue text-base"></p>
</div>
<div class="flex justify-start items-center gap-2">
<p class="text-gray-400 text-base">Extra:</p>
<p class="text-slate-700 text-base">{{task.extra}}</p>
<p class="text-secondosiblue text-base">{{task.extra}}</p>
</div>
</div>
</div>
@ -196,29 +196,29 @@
<div class="w-full flex flex-col gap-2 p-3">
<div class="flex justify-start items-center gap-2">
<p class="text-gray-400 text-base">Project:</p>
<p class="text-slate-700 text-base">{{task.project.name}}</p>
<p class="text-secondosiblue text-base">{{task.project.name}}</p>
</div>
<div class="flex justify-start items-center gap-2">
<p class="text-gray-400 text-base">Epic:</p>
<p class="text-slate-700 text-base">{{task.epic.title}}</p>
<p class="text-secondosiblue text-base">{{task.epic.title}}</p>
</div>
<div class="flex justify-start items-center gap-2">
<p class="text-gray-400 text-base">Assigned To:</p>
<p class="text-slate-700 text-base">{{task.assigned_to.user.first_name}}
<p class="text-secondosiblue text-base">{{task.assigned_to.user.first_name}}
{{task.assigned_to.user.last_name}}</p>
</div>
<div class="flex justify-start items-center gap-2">
<p class="text-gray-400 text-base">Extra:</p>
<p class="text-slate-700 text-base">{{task.extra}}</p>
<p class="text-secondosiblue text-base">{{task.extra}}</p>
</div>
</div>
<div
class="w-full bg-gray-100 flex justify-between items-center py-3 px-3 text-slate-700 actionsButton">
class="w-full bg-gray-100 flex justify-between items-center py-3 px-3 text-secondosiblue actionsButton">
<p>Actions</p>
<i class="fa fa-angle-down" style="font-size: 20px;"></i>
<i class="fa fa-angle-up" style="font-size: 20px; display: none;"></i>

@ -95,12 +95,12 @@
<div
class="w-full h-[60px] rounded-md bg-gray-200 flex justify-center items-center shadow-sm">
<button
class="w-[50%] h-full bg-white rounded-md p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer"
class="w-[50%] h-full bg-white rounded-md p-3 text-secondosiblue text-sm s:text-[20px] cursor-pointer"
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);"
type="button">
Login
</button>
<button class="w-[50%] h-full p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer"
<button class="w-[50%] h-full p-3 text-secondosiblue text-sm s:text-[20px] cursor-pointer"
id="loginToRegisterButton" type="button">
Register
</button>
@ -161,12 +161,12 @@
<div class="w-full s:w-[550px] h-fit bg-slate-50 rounded-md shadow-md p-5 s:p-9">
<div
class="w-full h-[60px] rounded-md bg-gray-200 flex justify-center items-center shadow-sm">
<button class="w-[50%] h-full p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer"
<button class="w-[50%] h-full p-3 text-secondosiblue text-sm s:text-[20px] cursor-pointer"
id="registerToLoginButton" type="button">
Login
</button>
<button
class="w-[50%] h-full bg-white rounded-md p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer"
class="w-[50%] h-full bg-white rounded-md p-3 text-secondosiblue text-sm s:text-[20px] cursor-pointer"
type="button"
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);">
Register

@ -35,7 +35,7 @@
<!-- USERS ACTIVITIES BUTTON ON MOBILE -->
<a href="{% url 'recentactivitiespage' %}">
<div class="w-[55px] h-[55px] bg-osiblue rounded-full fixed xxlg1:hidden bottom-3 right-3 p-2 flex justify-center items-center cursor-pointer z-20 usersActivityIcon">
<div class="w-[55px] h-[55px] bg-osiblue rounded-full fixed xxlg1:hidden bottom-3 right-3 p-2 flex justify-center items-center cursor-pointer z-20 zoom">
<img src="{% static 'images/icons/useractivity.png' %}" alt="Users">
</div>
</a>
@ -765,7 +765,7 @@
<div class="w-[13px] h-[13px] rounded-full"
style="background-color: {{ recent_note.color }};">
</div>
<p class="text-slate-700 truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
<p class="text-secondosiblue truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
</div>
</div>

@ -253,7 +253,7 @@
class="w-full xlg1:w-[300px] h-fit bg-secondosiblue flex flex-col items-center absolute xlg1:fixed justify-center gap-2 py-2 bottom-0 inset-x-0 mt-[100px]">
<div class="w-full flex flex-col justify-center gap-1 items-center">
<div class="flex justify-center items-center gap-1">
<img src="{% static 'images/banner-logo.png' %}" alt="Ositcom Logo" class="w-[30px] h-[25px]">
<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>
@ -577,7 +577,7 @@
<div class="bg-osiblue h-fit py-2 mobileFooter">
<div class="w-full flex flex-col justify-center items-center gap-1">
<div class="flex justify-center items-center gap-2">
<img src="{% static 'images/banner-logo.png' %}" alt="Ositcom Logo" class="w-[30px] h-[25px]">
<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>

@ -150,7 +150,7 @@
</div>
<div class="flex flex-col">
<h1 class="text-sm text-slate-700 font-semibold">{{latest.status.staff.user.first_name}}
<h1 class="text-sm text-secondosiblue font-semibold">{{latest.status.staff.user.first_name}}
{{latest.status.staff.user.last_name}}</h1>
{% if latest.time_ago == '0min ago' %}
<p class="text-sm text-gray-500">Just Now</p>

@ -2,7 +2,7 @@
<div>
<p class="text-sm text-gray-500 truncate max-w-xl">Recent Status:
<span class="text-slate-700 font-semibold">{{last_status.text}}</span>
<span class="text-secondosiblue font-semibold">{{last_status.text}}</span>
</p>
<p class="text-sm text-gray-500">Last update:
{% if last_status.date == current_date %}

@ -14,7 +14,7 @@
class="w-full h-full object-cover rounded-full">
</div>
<div class="flex flex-col">
<h1 class="text-sm text-slate-700 font-semibold">{{latest.status.staff.user.first_name}}
<h1 class="text-sm text-secondosiblue font-semibold">{{latest.status.staff.user.first_name}}
{{latest.status.staff.user.last_name}}</h1>
{% if latest.time_ago == '0min ago' %}
<p class="text-sm text-gray-500">Just Now</p>

@ -1020,6 +1020,10 @@ video {
height: 0.25rem;
}
.h-10 {
height: 2.5rem;
}
.h-14 {
height: 3.5rem;
}
@ -1174,6 +1178,10 @@ video {
width: 0.25rem;
}
.w-10 {
width: 2.5rem;
}
.w-4 {
width: 1rem;
}
@ -1214,6 +1222,10 @@ video {
width: 140px;
}
.w-\[150px\] {
width: 150px;
}
.w-\[180px\] {
width: 180px;
}
@ -1539,6 +1551,10 @@ video {
gap: 0.5rem;
}
.gap-20 {
gap: 5rem;
}
.gap-3 {
gap: 0.75rem;
}
@ -1651,6 +1667,11 @@ video {
border-bottom-left-radius: 0.375rem;
}
.rounded-l-none {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.rounded-r-md {
border-top-right-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
@ -1661,6 +1682,11 @@ video {
border-top-right-radius: 0.375rem;
}
.rounded-t-none {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.rounded-bl-lg {
border-bottom-left-radius: 0.5rem;
}
@ -1979,6 +2005,11 @@ video {
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.bg-green-200 {
--tw-bg-opacity: 1;
background-color: rgb(187 247 208 / var(--tw-bg-opacity));
@ -2178,6 +2209,18 @@ video {
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-200 {
--tw-gradient-from: #e5e7eb var(--tw-gradient-from-position);
--tw-gradient-to: rgb(229 231 235 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-400 {
--tw-gradient-from: #9ca3af var(--tw-gradient-from-position);
--tw-gradient-to: rgb(156 163 175 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-400 {
--tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
@ -2208,6 +2251,16 @@ video {
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-gray-300 {
--tw-gradient-to: rgb(209 213 219 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), #d1d5db var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-gray-500 {
--tw-gradient-to: rgb(107 114 128 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), #6b7280 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-green-500 {
--tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), #22c55e var(--tw-gradient-via-position), var(--tw-gradient-to);
@ -2261,10 +2314,18 @@ video {
padding: 0.25rem;
}
.p-10 {
padding: 2.5rem;
}
.p-2 {
padding: 0.5rem;
}
.p-20 {
padding: 5rem;
}
.p-3 {
padding: 0.75rem;
}
@ -2306,6 +2367,11 @@ video {
padding-right: 0.5rem;
}
.px-20 {
padding-left: 5rem;
padding-right: 5rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
@ -2341,6 +2407,11 @@ video {
padding-bottom: 0.25rem;
}
.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
@ -2479,6 +2550,10 @@ video {
font-size: 22px;
}
.text-\[25px\] {
font-size: 25px;
}
.text-\[30px\] {
font-size: 30px;
}
@ -2910,18 +2985,16 @@ video {
@keyframes zoomInOut {
0%,
100% {
transform: scale(1);
opacity: 0.5;
transform: scale(0.9);
}
50% {
transform: scale(1.2);
opacity: 1;
transform: scale(1);
}
}
.usersActivityIcon {
animation: zoomInOut 1.5s infinite;
.zoom {
animation: zoomInOut 2s infinite;
}
/* DRAGGABLE SLIDER */
@ -3128,6 +3201,11 @@ video {
outline-offset: 2px;
}
.group:hover .group-hover\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
@media (min-width: 650px) {
.s\:mt-5 {
margin-top: 1.25rem;
@ -3137,6 +3215,10 @@ video {
margin-top: -63px;
}
.s\:flex {
display: flex;
}
.s\:hidden {
display: none;
}
@ -3240,6 +3322,11 @@ video {
padding-right: 3.5rem;
}
.s\:px-20 {
padding-left: 5rem;
padding-right: 5rem;
}
.s\:px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
@ -3314,6 +3401,10 @@ video {
width: fit-content;
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@ -3509,6 +3600,10 @@ video {
.xxlg1\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.xxlg1\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 1390px) {

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

@ -0,0 +1,93 @@
document.addEventListener('DOMContentLoaded', function () {
// Osicloud 1 Subscription
const firstOsicloudPrices = {
1: 89,
3: 200,
6: 350,
12: 650,
24: 1200,
36: 1800,
60: 3000
};
const firstOsicloudSubscriptionOptions = document.querySelectorAll('.firstOsicloudSubscriptionOptions');
firstOsicloudSubscriptionOptions.forEach(function (options) {
options.addEventListener('change', function () {
const selectedValue = parseInt(this.value);
const priceElement = this.closest('.feature').querySelector('.firstOsicloudPrice');
const price = firstOsicloudPrices[selectedValue];
priceElement.textContent = `$${price}`;
});
});
// Osicloud 2 Subscription
const secondOsicloudPrices = {
1: 169,
3: 400,
6: 700,
12: 1300,
24: 2400,
36: 3600,
60: 6000
};
const secondOsicloudSubscriptionOptions = document.querySelectorAll('.secondOsicloudSubscriptionOptions');
secondOsicloudSubscriptionOptions.forEach(function (options) {
options.addEventListener('change', function () {
const selectedValue = parseInt(this.value);
const priceElement = this.closest('.feature').querySelector('.secondOsicloudPrice');
const price = secondOsicloudPrices[selectedValue];
priceElement.textContent = `$${price}`;
});
});
// Osicloud 3 Subscription
const thirdOsicloudPrices = {
1: 89,
3: 200,
6: 350,
12: 650,
24: 1200,
36: 1800,
60: 3000
};
const thirdOsicloudSubscriptionOptions = document.querySelectorAll('.thirdOsicloudSubscriptionOptions');
thirdOsicloudSubscriptionOptions.forEach(function (options) {
options.addEventListener('change', function () {
const selectedValue = parseInt(this.value);
const priceElement = this.closest('.feature').querySelector('.thirdOsicloudPrice');
const price = thirdOsicloudPrices[selectedValue];
priceElement.textContent = `$${price}`;
});
});
// Osicloud 4 Subscription
const fourthOsicloudPrices = {
1: 89,
3: 200,
6: 350,
12: 650,
24: 1200,
36: 1800,
60: 3000
};
const fourthOsicloudSubscriptionOptions = document.querySelectorAll('.fourthOsicloudSubscriptionOptions');
fourthOsicloudSubscriptionOptions.forEach(function (options) {
options.addEventListener('change', function () {
const selectedValue = parseInt(this.value);
const priceElement = this.closest('.feature').querySelector('.fourthOsicloudPrice');
const price = fourthOsicloudPrices[selectedValue];
priceElement.textContent = `$${price}`;
});
});
});

@ -0,0 +1,93 @@
document.addEventListener('DOMContentLoaded', function () {
// Dedicated 1 Subscription
const firstDedicatedPrices = {
1: 89,
3: 200,
6: 350,
12: 650,
24: 1200,
36: 1800,
60: 3000
};
const firstDedicatedSubscriptionOptions = document.querySelectorAll('.firstDedicatedSubscriptionOptions');
firstDedicatedSubscriptionOptions.forEach(function (options) {
options.addEventListener('change', function () {
const selectedValue = parseInt(this.value);
const priceElement = this.closest('.feature').querySelector('.firstDedicatedPrice');
const price = firstDedicatedPrices[selectedValue];
priceElement.textContent = `$${price}`;
});
});
// Dedicated 2 Subscription
const secondDedicatedPrices = {
1: 169,
3: 400,
6: 700,
12: 1300,
24: 2400,
36: 3600,
60: 6000
};
const secondDedicatedSubscriptionOptions = document.querySelectorAll('.secondDedicatedSubscriptionOptions');
secondDedicatedSubscriptionOptions.forEach(function (options) {
options.addEventListener('change', function () {
const selectedValue = parseInt(this.value);
const priceElement = this.closest('.feature').querySelector('.secondDedicatedPrice');
const price = secondDedicatedPrices[selectedValue];
priceElement.textContent = `$${price}`;
});
});
// Dedicated 3 Subscription
const thirdDedicatedPrices = {
1: 89,
3: 200,
6: 350,
12: 650,
24: 1200,
36: 1800,
60: 3000
};
const thirdDedicatedSubscriptionOptions = document.querySelectorAll('.thirdDedicatedSubscriptionOptions');
thirdDedicatedSubscriptionOptions.forEach(function (options) {
options.addEventListener('change', function () {
const selectedValue = parseInt(this.value);
const priceElement = this.closest('.feature').querySelector('.thirdDedicatedPrice');
const price = thirdDedicatedPrices[selectedValue];
priceElement.textContent = `$${price}`;
});
});
// Dedicated 4 Subscription
const fourthDedicatedPrices = {
1: 89,
3: 200,
6: 350,
12: 650,
24: 1200,
36: 1800,
60: 3000
};
const fourthDedicatedSubscriptionOptions = document.querySelectorAll('.fourthDedicatedSubscriptionOptions');
fourthDedicatedSubscriptionOptions.forEach(function (options) {
options.addEventListener('change', function () {
const selectedValue = parseInt(this.value);
const priceElement = this.closest('.feature').querySelector('.fourthDedicatedPrice');
const price = fourthDedicatedPrices[selectedValue];
priceElement.textContent = `$${price}`;
});
});
});

@ -0,0 +1,45 @@
document.addEventListener('DOMContentLoaded', function () {
// Standard Subscription
const standardPrices = {
1: 89,
3: 200,
6: 350,
12: 650,
24: 1200,
36: 1800,
60: 3000
};
const standardSubscriptionOptions = document.querySelectorAll('.standardSubscriptionOptions');
standardSubscriptionOptions.forEach(function (options) {
options.addEventListener('change', function () {
const selectedValue = parseInt(this.value);
const priceElement = this.closest('.feature').querySelector('.standardPrice');
const price = standardPrices[selectedValue];
priceElement.textContent = `$${price}`;
});
});
// Premium Subscription
const premiumPrices = {
1: 169,
3: 400,
6: 700,
12: 1300,
24: 2400,
36: 3600,
60: 6000
};
const premiumSubscriptionOptions = document.querySelectorAll('.premiumSubscriptionOptions');
premiumSubscriptionOptions.forEach(function (options) {
options.addEventListener('change', function () {
const selectedValue = parseInt(this.value);
const priceElement = this.closest('.feature').querySelector('.premiumPrice');
const price = premiumPrices[selectedValue];
priceElement.textContent = `$${price}`;
});
});
});

@ -1,10 +1,10 @@
const paymentContent = document.getElementById('paymentContent');
const item_id = document.getElementById('itemId').textContent;
function initiateCheckout(item_id) {
function initiateCheckout(item_id, selectedCycleId) {
const csrftoken = getCookie('csrftoken');
console.log(item_id);
console.log('Selected Cycle ID:', selectedCycleId);
console.log('CSRF Token:', csrftoken);
@ -13,10 +13,8 @@ function initiateCheckout(item_id) {
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': csrftoken,
'X-Item-ID': item_id,
},
body: JSON.stringify({ item_id: item_id }),
body: JSON.stringify({ item_id: item_id, cycle_id: selectedCycleId }), // Include selected cycle ID in the request body
})
.then(response => {
if (!response.ok) {
@ -42,6 +40,17 @@ function initiateCheckout(item_id) {
});
}
// Add an event listener to the select element
const cycleSelect = document.getElementById('cycle');
cycleSelect.addEventListener('change', function() {
// Get the selected cycle ID when the user changes the selection
const selectedCycleId = cycleSelect.value;
console.log('Selected Cycle ID:', selectedCycleId);
// Call initiateCheckout with the updated cycle ID
initiateCheckout(item_id, selectedCycleId);
});
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
@ -57,5 +66,6 @@ function getCookie(name) {
return cookieValue;
}
initiateCheckout(item_id);
// Call initiateCheckout initially with the default selected cycle ID
const selectedCycleId = cycleSelect.value;
initiateCheckout(item_id, selectedCycleId);

@ -0,0 +1,70 @@
document.addEventListener('DOMContentLoaded', function () {
// Shared Basic Subscription
const sharedBasicPrices = {
1: 89,
3: 200,
6: 350,
12: 650,
24: 1200,
36: 1800,
60: 3000
};
const sharedBasicSubscriptionOptions = document.querySelectorAll('.sharedBasicSubscriptionOptions');
sharedBasicSubscriptionOptions.forEach(function (options) {
options.addEventListener('change', function () {
const selectedValue = parseInt(this.value);
const priceElement = this.closest('.feature').querySelector('.sharedBasicPrice');
const price = sharedBasicPrices[selectedValue];
priceElement.textContent = `$${price}`;
});
});
// Shared Plus Subscription
const sharedPlusPrices = {
1: 169,
3: 400,
6: 700,
12: 1300,
24: 2400,
36: 3600,
60: 6000
};
const sharedPlusSubscriptionOptions = document.querySelectorAll('.sharedPlusSubscriptionOptions');
sharedPlusSubscriptionOptions.forEach(function (options) {
options.addEventListener('change', function () {
const selectedValue = parseInt(this.value);
const priceElement = this.closest('.feature').querySelector('.sharedPlusPrice');
const price = sharedPlusPrices[selectedValue];
priceElement.textContent = `$${price}`;
});
});
// Shared Basic Subscription
const sharedPowerPrices = {
1: 89,
3: 200,
6: 350,
12: 650,
24: 1200,
36: 1800,
60: 3000
};
const sharedPowerSubscriptionOptions = document.querySelectorAll('.sharedPowerSubscriptionOptions');
sharedPowerSubscriptionOptions.forEach(function (options) {
options.addEventListener('change', function () {
const selectedValue = parseInt(this.value);
const priceElement = this.closest('.feature').querySelector('.sharedPowerPrice');
const price = sharedPowerPrices[selectedValue];
priceElement.textContent = `$${price}`;
});
});
});
Loading…
Cancel
Save