New changes.

main
nataly 1 year ago
parent f50f18acee
commit ea84da3a92

@ -0,0 +1,85 @@
{% extends "add-edit-main.html" %}
{%load static%}
{% block content %}
<!-- TO ENABLE THE SEARCH FUNCTIONALITY IN THE SELECT TAG -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.min.css" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"></script>
<div class="w-full px-5 s:px-9 mb-5">
<div class="w-full h-full shadow-md rounded-md py-5 px-3 bg-white">
<h1 class="text-3xl text-secondosiblue text-center font-semibold">
Add Order
</h1>
<form method="POST" action="" enctype="multipart/form-data">
{% csrf_token %}
<div class="w-full flex flex-col gap-5">
<div class="w-full">
<label class="text-gray-500">Customer:</label>
<select name="type" id="customersSelectTag"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-1"
required>
<option selected disabled>Customers</option>
{% for customer in customers %}
<option value="{{customer.id}}">{{customer.user.first_name}} {{customer.user.last_name}}
</option>
{% endfor %}
</select>
</div>
<div class="w-full">
<label class="text-gray-500">Items:</label>
<select name="type" id=""
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-1"
required>
<option value="">Type 1</option>
<option value="">Type 2</option>
</select>
</div>
<div class="w-full">
<label class="text-gray-500">Status:</label>
<select name="type" id=""
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-1"
required>
<option value="">Completed</option>
<option value="">Failed</option>
<option value="">Cancelled</option>
<option value="">None</option>
</select>
</div>
<div class="w-full">
<label class="text-gray-500">Due Date:</label>
<input name="" type="date"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1" required>
</div>
<div class="w-full">
<label class="text-gray-500">Items:</label>
<select name="items" id="itemsSelectTag"
class="border border-gray-300 p-3 rounded-md outline-none w-full text-gray-500 mt-1" multiple
required>
<option disabled>Items</option>
</select>
</div>
<div class="w-full flex justify-center items-center mt-3">
<button type="submit"
class="w-fit py-1 px-5 bg-osiblue rounded-md outline-none text-white border border-osiblue text-xl cursor-pointer hover:bg-white hover:text-osiblue duration-300">Save</button>
</div>
</div>
</form>
</div>
</div>
<!---------------------- JS SCRIPTS -------------------->
<script src="{% static 'js/billing/add-order.js' %}"></script>
{% endblock %}

@ -0,0 +1,72 @@
{% extends "add-edit-main.html" %}
{%load static%}
{% block content %}
<div class="w-full px-5 s:px-9 mb-5">
<div class="w-full h-full shadow-md rounded-md py-5 px-3 bg-white">
<h1 class="text-3xl text-secondosiblue text-center font-semibold">
Add Product
</h1>
<form method="POST" action="" enctype="multipart/form-data">
{% csrf_token %}
<div class="w-full flex flex-col gap-5">
<div class="w-full">
<label class="text-gray-500">Title:</label>
<input name="" type="text"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1" required>
</div>
<div class="w-full">
<label class="text-gray-500">Description:</label>
<textarea name="" type="text"
class="w-full py-1 px-3 border border-gray-300 outline-none rounded-md mt-1 resize-none"
rows="8" required></textarea>
</div>
<div class="w-full">
<label class="text-gray-500">Customer:</label>
<select name="type" id=""
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-1">
<option value="">Customer 1</option>
<option value="">Customer 2</option>
</select>
</div>
<div class="w-full">
<label class="text-gray-500">Project Type:</label>
<select name="type" id=""
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-1" required>
<option value="">Type 1</option>
<option value="">Type 2</option>
</select>
</div>
<div class="w-full">
<label class="text-gray-500">Amount:</label>
<input name="" type="decimal"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1" required>
</div>
<div class="w-full">
<label class="text-gray-500">Recurring:</label>
<select name="" id=""
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-1" required>
<option value="">True</option>
<option value="">False</option>
</select>
</div>
<div class="w-full flex justify-center items-center mt-3">
<button type="submit"
class="w-fit py-1 px-5 bg-osiblue rounded-md outline-none text-white border border-osiblue text-xl cursor-pointer hover:bg-white hover:text-osiblue duration-300">Save</button>
</div>
</div>
</form>
</div>
</div>
{% endblock %}

@ -0,0 +1,72 @@
{% extends "add-edit-main.html" %}
{%load static%}
{% block content %}
<div class="w-full px-5 s:px-9 mb-5">
<div class="w-full h-full shadow-md rounded-md py-5 px-3 bg-white">
<h1 class="text-3xl text-secondosiblue text-center font-semibold">
Add Service
</h1>
<form method="POST" action="" enctype="multipart/form-data">
{% csrf_token %}
<div class="w-full flex flex-col gap-5">
<div class="w-full">
<label class="text-gray-500">Title:</label>
<input name="" type="text"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1" required>
</div>
<div class="w-full">
<label class="text-gray-500">Description:</label>
<textarea name="" type="text"
class="w-full py-1 px-3 border border-gray-300 outline-none rounded-md mt-1 resize-none"
rows="8" required></textarea>
</div>
<div class="w-full">
<label class="text-gray-500">Customer:</label>
<select name="type" id=""
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-1">
<option value="">Customer 1</option>
<option value="">Customer 2</option>
</select>
</div>
<div class="w-full">
<label class="text-gray-500">Project Type:</label>
<select name="type" id=""
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-1" required>
<option value="">Type 1</option>
<option value="">Type 2</option>
</select>
</div>
<div class="w-full">
<label class="text-gray-500">Amount:</label>
<input name="" type="decimal"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1" required>
</div>
<div class="w-full">
<label class="text-gray-500">Recurring:</label>
<select name="" id=""
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-1" required>
<option value="">True</option>
<option value="">False</option>
</select>
</div>
<div class="w-full flex justify-center items-center mt-3">
<button type="submit"
class="w-fit py-1 px-5 bg-osiblue rounded-md outline-none text-white border border-osiblue text-xl cursor-pointer hover:bg-white hover:text-osiblue duration-300">Save</button>
</div>
</div>
</form>
</div>
</div>
{% endblock %}

@ -0,0 +1,30 @@
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
<title>Invoice Details</title>
</head>
<body class="flex justify-center items-center" id="invoice-details-content">
<div class="w-[50%] flex flex-col items-center gap-5">
<img src="{% static 'images/ositcom_logos/full-logo.jpg' %}" class="w-[150px] h-[150px]">
<div class="w-full flex flex-col gap-3 p-5">
<p class="text-gray-500">Bill To: <span class="text-secondosiblue">Winabig</span></p>
<p class="text-gray-500">Customer Details: <span class="text-secondosiblue">036466464</span></p>
</div>
<div class="w-full bg-osiblue h-[50px]">
</div>
</div>
</body>
</html>

@ -0,0 +1,97 @@
{% extends "main.html" %}
{%load static%}
{% block content %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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>
<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">
<div class="relative h-fit w-full s:w-fit flex items-center">
<input type="text" placeholder="Enter Invoice Number"
class="py-2 px-3 border border-gray-300 rounded-md outline-none w-full s:w-[300px] h-[40px] relative">
<button
class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<div class="w-full s:w-fit">
<a href="">
<button
class="w-full s:w-fit text-base px-3 py-2 bg-osiblue text-white outline-none border border-osiblue rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">Add
Invoice</button>
</a>
</div>
</div>
<div class="overflow-x-auto border border-gray-300 rounded-md mt-4">
<table class="min-w-full divide-y">
<!-- TABLE HEADER -->
<thead class="bg-gray-50">
<tr>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Invoice Number
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Customer
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Order
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Date Created
</th>
<th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
Actions
</th>
</tr>
</thead>
<!-- TABLE BODY -->
<tbody class="bg-white divide-y divide-gray-200">
{% for invoice in invoices %}
<tr>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{invoice.invoice_number}}</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{invoice.order.customer}}</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{invoice.order.id}}</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{invoice.date_created}}</p>
</td>
<td class="px-6 py-4">
<div class="w-full flex justify-center items-center">
<button
class="flex justify-center items-center gap-2 px-3 py-1 rounded-md bg-osiblue text-white border border-osiblue cursor-pointer hover:bg-white hover:text-osiblue duration-300 generateInvoice" data-invoice-id="{{ invoice.id }}">
Generate Invoice
</button>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}

@ -0,0 +1,183 @@
{% extends "main.html" %}
{%load static%}
{% block content %}
<div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<div
class="w-full bg-secondosiblue shadow-md rounded-md px-3 s:px-5 py-3 s:py-5 flex flex-col s:flex-row justify-between items-center gap-5 text-fifthosiblue">
<div class="flex items-center gap-8">
<p class="selectedItemType cursor-pointer" id="products">Products</p>
<p class="cursor-pointer" id="services">Services</p>
</div>
<div class="w-full s:w-fit">
<a href="{% url 'addproduct' %}" class="w-full s:w-fit">
<button
class="w-full s:w-fit px-5 py-2 bg-white text-secondosiblue border border-white rounded-md cursor-pointer hover:bg-secondosiblue hover:text-white duration-300"
id="addProductButton">Add
Product</button>
</a>
<a href="{% url 'addservice' %}" class="w-full s:w-fit">
<button
class="w-full s:w-fit px-5 py-2 bg-white text-secondosiblue border border-white rounded-md cursor-pointer hover:bg-secondosiblue hover:text-white duration-300 hidden"
id="addServiceButton">Add
Service</button>
</a>
</div>
</div>
<!-- PRODUCTS -->
<div class="overflow-x-auto border border-gray-300 rounded-md mt-5" id="productsContainer">
<table class="min-w-full divide-y">
<!-- TABLE HEADER -->
<thead class="bg-gray-50">
<tr>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Title
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Customer
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Type
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Amount
</th>
<th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
Actions
</th>
</tr>
</thead>
<!-- TABLE BODY -->
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">Item 1</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">Nataly</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">Type</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">222</p>
</td>
<td class="px-6 py-4">
<div class="flex justify-center items-center gap-3">
<a href="">
<div class="text-[15px] text-blue-500 cursor-pointer">
<i class="fa fa-eye"></i>
</div>
</a>
<a href="">
<div class="text-[15px] text-blue-500 cursor-pointer">
<i class="fa fa-edit"></i>
</div>
</a>
<div class="text-[15px] text-red-500 cursor-pointer" data-modal-url="">
<i class="fa fa-trash"></i>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- SERVICES -->
<div class="overflow-x-auto border border-gray-300 rounded-md mt-5 hidden" id="servicesContainer">
<table class="min-w-full divide-y">
<!-- TABLE HEADER -->
<thead class="bg-gray-50">
<tr>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Title
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Customer
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Type
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Amount
</th>
<th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
Actions
</th>
</tr>
</thead>
<!-- TABLE BODY -->
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">Item 2</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">Salim</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">Type</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">222</p>
</td>
<td class="px-6 py-4">
<div class="flex justify-center items-center gap-3">
<a href="">
<div class="text-[15px] text-blue-500 cursor-pointer">
<i class="fa fa-eye"></i>
</div>
</a>
<a href="">
<div class="text-[15px] text-blue-500 cursor-pointer">
<i class="fa fa-edit"></i>
</div>
</a>
<div class="text-[15px] text-red-500 cursor-pointer" data-modal-url="">
<i class="fa fa-trash"></i>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!---------------------- JS SCRIPTS -------------------->
<script src="{% static 'js/billing/items.js' %}"></script>
{% endblock %}

@ -0,0 +1,100 @@
{% extends "main.html" %}
{%load static%}
{% block content %}
<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>
<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">
<div class="relative h-fit w-full s:w-fit flex items-center">
<input type="text" placeholder="Enter Order"
class="py-2 px-3 border border-gray-300 rounded-md outline-none w-full s:w-[300px] h-[40px] relative">
<button
class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<div class="w-full s:w-fit">
<a href="{% url 'addorder' %}">
<button
class="w-full s:w-fit text-base px-3 py-2 bg-osiblue text-white outline-none border border-osiblue rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">Add
Order</button>
</a>
</div>
</div>
<div class="overflow-x-auto border border-gray-300 rounded-md mt-4">
<table class="min-w-full divide-y">
<!-- TABLE HEADER -->
<thead class="bg-gray-50">
<tr>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Order ID
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Customer
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Due Date
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Status
</th>
<th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
Actions
</th>
</tr>
</thead>
<!-- TABLE BODY -->
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">1</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">Nataly</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">10-2-2014</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300 bg-green-700">
<p class="text-white">Paid</p>
</td>
<td class="px-6 py-4">
<div class="w-full flex justify-center items-center gap-3">
<button class="flex justify-center items-center gap-2 px-3 py-1 rounded-md bg-osiblue text-white border border-osiblue cursor-pointer hover:bg-white hover:text-osiblue duration-300">
Generate Invoice
</button>
<a href="">
<div class="text-[15px] text-blue-500 cursor-pointer">
<i class="fa fa-edit"></i>
</div>
</a>
<div class="text-[15px] text-red-500 cursor-pointer" data-modal-url="">
<i class="fa fa-trash"></i>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}

@ -10,4 +10,22 @@ urlpatterns = [
path('check', views.create_charges_for_recurring_services, name='check'),
# LISTING
path('items', views.items, name='items'),
path('orders', views.orders, name='orders'),
path('invoices', views.invoices, name='invoices'),
# ADD
path('add-product', views.add_product, name='addproduct'),
path('add-service', views.add_service, name='addservice'),
path('add-order', views.add_order, name='addorder'),
path('fetch-customer-items/<int:customer_id>/', views.fetch_customer_items, name='fetch_customer_items'),
path('fetch-invoice-details/<int:invoice_id>/', views.fetch_invoice_details, name='fetchinvoicedetails'),
path('invoice-details/<int:invoice_id>/', views.invoice_details, name='invoicedetails'),
]

@ -1,12 +1,9 @@
from django.shortcuts import render
from django.shortcuts import render, get_object_or_404
from django.utils import timezone
from datetime import timedelta
from .models import *
from django.http import JsonResponse
# Create your views here.
# Create your tests here.
def create_charges_for_recurring_services(request):
today = timezone.now().date()
@ -27,3 +24,107 @@ def create_charges_for_recurring_services(request):
due_date=new_due_date
)
return JsonResponse({'status': 'success'})
# LISTING
def items (request, *args, **kwargs):
context = {
}
return render(request, 'listing_pages/items.html', context)
def orders (request, *args, **kwargs):
context = {
}
return render(request, 'listing_pages/orders.html', context)
def invoices (request, *args, **kwargs):
invoices = Invoice.objects.all().order_by('-id')
context = {
'invoices': invoices,
}
return render(request, 'listing_pages/invoices.html', context)
# ADD
def add_product (request, *args, **kwargs):
context = {
}
return render(request, 'add_templates/add-product.html', context)
def add_service (request, *args, **kwargs):
context = {
}
return render(request, 'add_templates/add-service.html', context)
def add_order (request, *args, **kwargs):
customers = CustomerProfile.objects.all().order_by('-id')
context = {
'customers': customers,
}
return render(request, 'add_templates/add-order.html', context)
# TO FETCH THE ITEMS RELATED TO TH SELECTED CUSTOMER AND THE ITEMS THAT ARE NOT RELATED TO A CUSTOMER
def fetch_customer_items(request, customer_id):
customer = get_object_or_404(CustomerProfile, id=customer_id)
items_related_to_customer = Item.objects.filter(customer=customer)
items_without_customer = Item.objects.filter(customer__isnull=True)
data = {
'items_related_to_customer': list(items_related_to_customer.values('id', 'title')),
'items_without_customer': list(items_without_customer.values('id', 'title')),
}
return JsonResponse(data)
def fetch_invoice_details(request, invoice_id):
invoice = get_object_or_404(Invoice, id=invoice_id)
order = invoice.order
order_items = OrderItem.objects.filter(order=order)
order_total = order.get_cart_total
data = {
'invoice_number': invoice.invoice_number,
'order_id': order.order_id,
'order_total' : order_total,
'date_created': invoice.date_created,
'customer_first_name': order.customer.user.first_name,
'customer_last_name': order.customer.user.last_name,
'customer_email': order.customer.user.email,
'order_items': list(order_items.values()), # Convert QuerySet to list of dictionaries
}
return JsonResponse(data)
def invoice_details (request, invoice_id):
invoice = get_object_or_404(Invoice, id=invoice_id)
context = {
'invoice' : invoice,
}
return render(request, 'invoice-details.html', context)

@ -71,7 +71,6 @@
</table>
</div>
</div>
</div>
{% endblock %}

@ -3,19 +3,10 @@
{% block content %}
<style>
.selectedProductCategory {
color: white;
font-weight: bolder;
}
</style>
<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 bg-secondosiblue shadow-md rounded-md px-5 py-5 flex flex-wrap items-center gap-8 text-fifthosiblue text-xl uppercase">
class="w-full bg-secondosiblue shadow-md rounded-md px-5 py-5 flex flex-wrap items-center gap-8 text-fifthosiblue text-base xl:text-xl uppercase">
<p class="selectedProductCategory cursor-pointer" id="solutions">Solutions</p>
<p class="cursor-pointer" id="hostingSolutions">Cloud Hosting</p>
@ -24,7 +15,7 @@
<div class="w-full flex flex-col gap-10 mt-10" id="solutionsContainer">
<div class="w-full p-5 bg-gray-50 border-gray-100 shadow-md">
<div class="flex justify-between items-center">
<img src="{% static 'images/ositcom_logos/osimenublue.png' %}" class="w-[180px]">
<img src="{% static 'images/ositcom_logos/osimenublue.png' %}" class="w-[140px] s:w-[180px]">
<a href="{% url 'osimenuplans' %}">
<button
@ -34,35 +25,36 @@
</div>
<div class="w-full grid grid-cols-3 gap-5 mt-5">
<div class="w-full grid grid-cols-1 l:grid-cols-3 gap-5 mt-5">
<div
class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
<p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">Basic</p>
<p class="text-secondosiblue uppercase font-poppinsBold text-xl s:text-2xl text-center">Basic
</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$0</p>
<div class="w-full flex flex-col justify-center items-center text-center">
<p class="text-osiblue font-poppinsLight text-[17px] s:text-2xl font-semibold">$0</p>
<p class="text-gray-500">monthly/restaurant</p>
</div>
</div>
<div class="relative">
<div
class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-b-md bg-white">
<p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">Standard</p>
<p class="text-secondosiblue uppercase font-poppinsBold text-xl s:text-2xl text-center">Standard
</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$89</p>
<div class="w-full flex flex-col justify-center items-center text-center">
<p class="text-osiblue font-poppinsLight text-[17px] s:text-2xl font-semibold">$89</p>
<p class="text-gray-500">monthly/restaurant</p>
</div>
</div>
</div>
<div
class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
<p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">Premium</p>
<p class="text-secondosiblue uppercase font-poppinsBold text-xl s:text-2xl text-center">Premium
</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$169</p>
<div class="w-full flex flex-col justify-center items-center text-center">
<p class="text-osiblue font-poppinsLight text-[17px] s:text-2xl font-semibold">$169</p>
<p class="text-gray-500">monthly/restaurant</p>
</div>
</div>
@ -124,7 +116,7 @@
<div class="w-full flex flex-col gap-10 mt-10 hidden" id="hostingSolutionsContainer">
<div class="w-full p-5 bg-gray-50 border-gray-100 shadow-md">
<div class="flex justify-between items-center">
<p class="font-poppinsExtraBold text-2xl text-osiblue">Shared Hosting</p>
<p class="font-poppinsExtraBold text-base s:text-2xl text-osiblue">Shared Hosting</p>
<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
@ -132,40 +124,40 @@
</div>
<div class="w-full grid grid-cols-3 gap-5 mt-5">
<div class="w-full grid grid-cols-1 l:grid-cols-3 gap-5 mt-5">
<div
class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
<p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">Shared Basic</p>
<p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">Shared
Basic</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">80%</p>
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$2.40/month</p>
<div class="w-full flex flex-col justify-center items-center text-center">
<p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">80%</p>
<p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$2.40/month</p>
<p class="text-gray-500">Regular Price: $12.00/month</p>
</div>
</div>
<div class="relative">
<div
class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-b-md bg-white">
<p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">Shared Plus
<p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">Shared
Plus
</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">80%</p>
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$3.50/month</p>
<div class="w-full flex flex-col justify-center items-center text-center">
<p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">80%</p>
<p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$3.50/month</p>
<p class="text-gray-500">Regular Price: $17.50/month</p>
</div>
</div>
</div>
<div
class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
<p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">Shared Power</p>
<p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">Shared
Power</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">80%</p>
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$4.80/month</p>
<div class="w-full flex flex-col justify-center items-center text-center">
<p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">80%</p>
<p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$4.80/month</p>
<p class="text-gray-500">Regular Price: $24.00/month</p>
</div>
</div>
@ -175,7 +167,7 @@
<div class="w-full p-5 bg-gray-50 border-gray-100 shadow-md">
<div class="flex justify-between items-center">
<p class="font-poppinsExtraBold text-2xl text-osiblue">Cloud VPS Hosting</p>
<p class="font-poppinsExtraBold text-base s:text-2xl text-osiblue">Cloud VPS Hosting</p>
<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
@ -183,50 +175,53 @@
</div>
<div class="w-full grid grid-cols-4 gap-5 mt-5">
<div class="w-full grid grid-cols-1 l:grid-cols-2 xxlg:grid-cols-4 gap-5 mt-5">
<div
class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
<p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">OSICLOUD 1</p>
<p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
OSICLOUD 1</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">30%</p>
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$46.16/month</p>
<div class="w-full flex flex-col justify-center items-center text-center">
<p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">30%</p>
<p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$46.16/month</p>
<p class="text-gray-500">Regular Price: $65.95/month</p>
</div>
</div>
<div class="relative">
<div
class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-b-md bg-white">
<p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">OSICLOUD 2</p>
<p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
OSICLOUD 2</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">30%</p>
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$53.86/month</p>
<div class="w-full flex flex-col justify-center items-center text-center">
<p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">30%</p>
<p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$53.86/month
</p>
<p class="text-gray-500">Regular Price: $76.95/month</p>
</div>
</div>
</div>
<div
class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
<p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">OSICLOUD 3</p>
<p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
OSICLOUD 3</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">30%</p>
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$69.26/month</p>
<div class="w-full flex flex-col justify-center items-center text-center">
<p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">30%</p>
<p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$69.26/month</p>
<p class="text-gray-500">Regular Price: $98.95/month</p>
</div>
</div>
<div
class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
<p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">OSICLOUD 4</p>
<p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
OSICLOUD 4</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">30%</p>
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$107.76/month</p>
<div class="w-full flex flex-col justify-center items-center text-center">
<p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">30%</p>
<p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$107.76/month
</p>
<p class="text-gray-500">Regular Price: $153.95/month</p>
</div>
</div>
@ -236,7 +231,7 @@
<div class="w-full p-5 bg-gray-50 border-gray-100 shadow-md">
<div class="flex justify-between items-center">
<p class="font-poppinsExtraBold text-2xl text-osiblue">Dedicated CPU Servers</p>
<p class="font-poppinsExtraBold text-base s:text-2xl text-osiblue">Dedicated CPU Servers</p>
<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
@ -244,51 +239,56 @@
</div>
<div class="w-full grid grid-cols-4 gap-5 mt-5">
<div class="w-full grid grid-cols-1 l:grid-cols-2 xxlg:grid-cols-4 gap-5 mt-5">
<div
class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
<p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">DEDICATED 1</p>
<p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
DEDICATED 1</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">30%</p>
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$103.06/month</p>
<div class="w-full flex flex-col justify-center items-center text-center">
<p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">30%</p>
<p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$103.06/month
</p>
<p class="text-gray-500">Regular Price: $143.95/month</p>
</div>
</div>
<div class="relative">
<div
class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-b-md bg-white">
<p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">DEDICATED 2
<p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
DEDICATED 2
</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">30%</p>
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$127.16/month</p>
<div class="w-full flex flex-col justify-center items-center text-center">
<p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">30%</p>
<p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">
$127.16/month</p>
<p class="text-gray-500">Regular Price: $184.95/month</p>
</div>
</div>
</div>
<div
class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
<p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">DEDICATED 3</p>
<p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
DEDICATED 3</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">30%</p>
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$173.63/month</p>
<div class="w-full flex flex-col justify-center items-center text-center">
<p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">30%</p>
<p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$173.63/month
</p>
<p class="text-gray-500">Regular Price: $252.95/month</p>
</div>
</div>
<div
class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
<p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">DEDICATED 4</p>
<p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
DEDICATED 4</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">30%</p>
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$265.76/month</p>
<div class="w-full flex flex-col justify-center items-center text-center">
<p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">30%</p>
<p class="text-osiblue font-poppinsLight text-base s:text-xl font-semibold">$265.76/month
</p>
<p class="text-gray-500">Regular Price: $374.95/month</p>
</div>
</div>
@ -298,26 +298,8 @@
</div>
</div>
<script>
const solutionsBtn = document.getElementById('solutions');
const hostingBtn = document.getElementById('hostingSolutions');
const solutionsContainer = document.getElementById('solutionsContainer');
const hostingContainer = document.getElementById('hostingSolutionsContainer');
solutionsBtn.addEventListener('click', () => {
solutionsContainer.classList.remove('hidden');
hostingContainer.classList.add('hidden');
hostingBtn.classList.remove('selectedProductCategory');
solutions.classList.add('selectedProductCategory');
});
hostingBtn.addEventListener('click', () => {
solutionsContainer.classList.add('hidden');
hostingContainer.classList.remove('hidden');
solutions.classList.remove('selectedProductCategory');
hostingBtn.classList.add('selectedProductCategory');
});
</script>
<!---------------------- JS SCRIPTS -------------------->
<script src="{% static 'js/customer_dashboard/products.js' %}"></script>
{% endblock %}

@ -5,7 +5,7 @@ from . import views
urlpatterns = [
# LISTING
path('invoices/', views.customer_invoices, name='customerinvoices'),
path('customer-invoices/', views.customer_invoices, name='customerinvoices'),
path('products/', views.all_products, name='products'),
path('orders/', views.customer_orders, name='orders'),

Binary file not shown.

@ -227,3 +227,18 @@
#paymentContent iframe {
min-height: fit-content !important;
}
/* CUSTOMER DASHBOARD PRODUCTS PAGE */
.selectedProductCategory {
color: white;
font-weight: bolder;
}
/* IN BILLING ITEMS */
.selectedItemType {
color: white;
font-weight: bolder;
}

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save