ll

osinaweb/billing/add/urls.py

@@ -6,4 +6,5 @@ urlpatterns = [
     path('product', views.add_product, name='addproduct'),
     path('service', views.add_service, name='addservice'),
     path('order', views.add_order, name='addorder'),
+    path('invoice/<int:order_id>/', views.add_invoice_pdf, name='addinvoice'),
 ]

osinaweb/billing/add/views.py

@@ -4,6 +4,8 @@ from billing.models import *
 from django.http import JsonResponse, HttpResponse
 from django.template.loader import get_template
 from weasyprint import HTML
+from django.conf import settings
+import os
 
 
 def add_product (request, *args, **kwargs):
@@ -36,14 +38,61 @@ def add_product (request, *args, **kwargs):
 
 
 def add_service (request, *args, **kwargs):
-    context = {
+    item_types = ProjectType.objects.all().order_by('name')
+    customers = CustomerProfile.objects.all().order_by('user__first_name')
+    if request.method == 'POST':
+        title = request.POST.get('title')
+        description = request.POST.get('description')
+
+        customer_id = request.POST.get('customer')
+        customer = get_object_or_404(CustomerProfile, id=customer_id)
+
+        item_type_id = request.POST.get('item_type')
+        item_type = get_object_or_404(ProjectType, id=item_type_id)
+
+        amount = request.POST.get('amount')
+        recurring = request.POST.get('recurring')
 
+        Item.objects.create(
+            type='Service',
+            title=title,
+            description = description,
+            customer = customer,
+            item_type = item_type,
+            amount = amount,
+            recurring = recurring,
+        )
+        return redirect('items')
+    context = {
+        'item_types' : item_types,
+        'customers' : customers
     }
     return render(request, 'add_templates/add-service.html', context) 
 
 
 def add_order (request, *args, **kwargs):
     customers = CustomerProfile.objects.all().order_by('-id')
+    if request.method == 'POST':
+        customer_id = request.POST.get('customer')
+        customer = get_object_or_404(CustomerProfile, id=customer_id)
+
+        status = request.POST.get('status')
+
+        customer_id = request.POST.get('customer')
+        customer = get_object_or_404(CustomerProfile, id=customer_id)
+
+        selected_items = request.POST.getlist('items')
+
+        order = Order.objects.create(
+            customer=customer,
+            status=status
+        )
+
+        for item_id in selected_items:
+            item = Item.objects.get(id=item_id)
+            OrderItem.objects.create(order=order, item=item, purchased_at=datetime.now())
+        return redirect('orders')
+
 
     context = {
         'customers': customers,
@@ -52,12 +101,35 @@ def add_order (request, *args, **kwargs):
     return render(request, 'add_templates/add-order.html', context) 
 
 
-def add_invoice_pdf(request):
+
+def add_invoice_pdf(request, order_id):
+    order = get_object_or_404(Order, id=order_id)
+
     template = get_template('details_templates/invoice-details.html')
-    context = {} 
+    context = {'order': order} 
     html_string = template.render(context)
 
+    # Generate PDF
     pdf = HTML(string=html_string).write_pdf()
+
+    invoice = Invoice.objects.create(
+        invoice_number='111',
+        order=order,
+        date_created=datetime.now(),
+    )
+
+    # Save PDF to a file
+    pdf_file_path = os.path.join(settings.MEDIA_ROOT, f'invoice_{invoice.id}.pdf')
+    with open(pdf_file_path, 'wb') as pdf_file:
+        pdf_file.write(pdf)
+
+    # Associate PDF file path with the Invoice object
+    invoice.pdf = pdf_file_path
+    invoice.save()
+
+    # Return PDF
     response = HttpResponse(pdf, content_type='application/pdf')
     response['Content-Disposition'] = 'attachment; filename="my_pdf.pdf"'
+
     return response
+

osinaweb/billing/migrations/0028_remove_order_due_date.py

@@ -0,0 +1,17 @@
+# Generated by Django 4.2.5 on 2024-04-13 09:41
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('billing', '0027_item_type'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='order',
+            name='due_date',
+        ),
+    ]

osinaweb/billing/migrations/0029_invoice_pdf.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.5 on 2024-04-13 10:19
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('billing', '0028_remove_order_due_date'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='invoice',
+            name='pdf',
+            field=models.FileField(blank=True, null=True, upload_to=''),
+        ),
+    ]

osinaweb/billing/migrations/0030_alter_invoice_order.py

@@ -0,0 +1,19 @@
+# Generated by Django 4.2.5 on 2024-04-13 10:25
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('billing', '0029_invoice_pdf'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='invoice',
+            name='order',
+            field=models.OneToOneField(null=True, on_delete=django.db.models.deletion.SET_NULL, to='billing.order'),
+        ),
+    ]

osinaweb/billing/migrations/0031_alter_invoice_invoice_number.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.5 on 2024-04-13 10:26
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('billing', '0030_alter_invoice_order'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='invoice',
+            name='invoice_number',
+            field=models.CharField(max_length=100, null=True),
+        ),
+    ]

osinaweb/billing/models.py

@@ -38,7 +38,6 @@ class Order(models.Model):
     customer = models.ForeignKey(CustomerProfile, on_delete=models.CASCADE)
     status = models.CharField(max_length=200, choices=STATUS, default='None')
     order_id = models.CharField(max_length=100, null=True, blank=True)
-    due_date = models.DateField(null=True)
     @property
     def get_cart_total(self):
         orderitems = self.orderitem_set.all()
@@ -88,9 +87,10 @@ class OrderItem(models.Model):
 
 
 class Invoice(models.Model):
-    invoice_number = models.CharField(max_length=100)
-    order = models.ForeignKey(Order, on_delete=models.SET_NULL, null=True)
+    invoice_number = models.CharField(max_length=100, null=True)
+    order = models.OneToOneField(Order, on_delete=models.SET_NULL, null=True)
     date_created = models.DateField()
+    pdf = models.FileField(null=True, blank=True)
     def __str__(self):
         return self.invoice_number
 

osinaweb/billing/templates/add_templates/add-order.html

@@ -14,15 +14,16 @@
             Add Order
         </h1>
         
-        <form method="POST" action="" enctype="multipart/form-data">
+
+        <form method="POST" action="{% url 'addorder' %}" 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"
+                    <select name="customer" 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>
+                        <option selected disabled>Select Customer</option>
                         {% for customer in customers %}
                         <option value="{{customer.id}}">{{customer.user.first_name}} {{customer.user.last_name}}
                         </option>
@@ -30,33 +31,18 @@
                     </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=""
+                    <select name="status" 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>
+                        <option value="Completed">Completed</option>
+                        <option value="Failed">Failed</option>
+                        <option value="Cancelled">Cancelled</option>
+                        <option value="None">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">
@@ -64,7 +50,7 @@
                     <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>
+                        <option disabled>Select Customer First</option>
                     </select>
                 </div>
 

osinaweb/billing/templates/add_templates/add-product.html

@@ -49,7 +49,7 @@
                     <select name="recurring" 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">True</option>
-                        <option value="False">False</option>
+                        <option value="False" selected>False</option>
                     </select>
                 </div>
 

osinaweb/billing/templates/add_templates/add-service.html

@@ -8,19 +8,19 @@
             Add Service
         </h1>
 
-        <form method="POST" action="" enctype="multipart/form-data">
+        <form method="POST" action="{% url 'addservice' %}" 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"
+                    <input name="title" 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"
+                    <textarea name="description" 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>
@@ -28,35 +28,39 @@
 
                 <div class="w-full">
                     <label class="text-gray-500">Customer:</label>
-                    <select name="type" id=""
+                    <select name="customer" 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>
+                        <option value="" disabled selected>Select Customer</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">Project Type:</label>
-                    <select name="type" id=""
+                    <select name="item_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>
+                        <option value="" disabled selected>Select Type</option>
+                        {% for type in item_types %}
+                        <option value="{{type.id}}">{{type.name}}</option>
+                        {% endfor %}
                     </select>
                 </div>
 
                 <div class="w-full">
                     <label class="text-gray-500">Amount:</label>
-                    <input name="" type="decimal"
+                    <input name="amount" 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=""
+                    <select name="recurring" 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>
+                        <option value="True">True</option>
+                        <option value="False" selected>False</option>
                     </select>
                 </div>
 

osinaweb/billing/templates/details_templates/invoice-details.html

@@ -16,7 +16,7 @@
         <img src="https://newosina.osinode.com/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">Bill To: <span class="text-secondosiblue">{{order.customer}}</span></p>
             <p class="text-gray-500" class="color:red;">Customer Details: <span class="text-secondosiblue">036466464</span></p>
         </div>
 

osinaweb/billing/templates/listing_pages/invoices.html

@@ -79,10 +79,10 @@
 
                         <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>
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-[18px] text-blue-500">
+                                    <path fill-rule="evenodd" d="M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875Zm5.845 17.03a.75.75 0 0 0 1.06 0l3-3a.75.75 0 1 0-1.06-1.06l-1.72 1.72V12a.75.75 0 0 0-1.5 0v4.19l-1.72-1.72a.75.75 0 0 0-1.06 1.06l3 3Z" clip-rule="evenodd" />
+                                    <path d="M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z" />
+                                </svg>      
                             </div>
                         </td>
                     </tr>

osinaweb/billing/templates/listing_pages/items.html

@@ -126,24 +126,26 @@
 
                 <!-- TABLE BODY -->
                 <tbody class="bg-white divide-y divide-gray-200">
+                    {% 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">Item 2</p>
+                            <p class="text-slate-800">{{service.title}}</p>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-slate-800">Salim</p>
+                            <p class="text-slate-800">{{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">Type</p>
+                            <p class="text-slate-800">{{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">222</p>
+                            <p class="text-slate-800">${{service.amount}}</p>
                         </td>
                     
 
+
                         <td class="px-6 py-4">
                             <div class="flex justify-center items-center gap-3">
                                 <a href="">
@@ -162,6 +164,7 @@
                             </div>
                         </td>
                     </tr>
+                    {% endfor %}
                 </tbody>
             </table>
         </div>

osinaweb/billing/templates/listing_pages/orders.html

@@ -42,7 +42,7 @@
                         </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
+                            Cart Total
                         </th>
                         <th scope="col"
                             class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
@@ -56,28 +56,51 @@
 
                 <!-- TABLE BODY -->
                 <tbody class="bg-white divide-y divide-gray-200">
+
+                    {% 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">1</p>
+                            <p class="text-slate-800">{{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">Nataly</p>
+                            <p class="text-slate-800">{{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">10-2-2014</p>
+                            <p class="text-slate-800">${{order.get_cart_total}}</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 class="px-6 py-4 text-center text-sm border-r border-gray-300 {% if order.status == 'Completed' %}  bg-green-700  {% else %} bg-gray-400 {% endif %}">
+                            <p class="text-white">{{order.status}}</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-eye"></i>
+                                    </div>
+                                </a>
+
+
+                                {% if order.status == 'Completed' and not order.invoice %}
+                                <a href="{% url 'addinvoice' order.id %}">
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-[18px] text-blue-500">
+                                        <path fill-rule="evenodd" d="M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875ZM12.75 12a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V18a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V12Z" clip-rule="evenodd" />
+                                        <path d="M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z" />
+                                    </svg>
+                                </a>
+                                {% endif %}
+                                
+                                {% if order.invoice %}
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-[18px] text-blue-500">
+                                    <path fill-rule="evenodd" d="M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875Zm5.845 17.03a.75.75 0 0 0 1.06 0l3-3a.75.75 0 1 0-1.06-1.06l-1.72 1.72V12a.75.75 0 0 0-1.5 0v4.19l-1.72-1.72a.75.75 0 0 0-1.06 1.06l3 3Z" clip-rule="evenodd" />
+                                    <path d="M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z" />
+                                </svg>                                  
+                                {% endif %}
+                                  
 
                                 <a href="">
                                     <div class="text-[15px] text-blue-500 cursor-pointer">
@@ -90,6 +113,7 @@
                             </div>
                         </td>
                     </tr>
+                    {% endfor %}
                 </tbody>
             </table>
         </div>

osinaweb/billing/urls.py

@@ -12,7 +12,7 @@ urlpatterns = [
     path('invoices', views.invoices, name='invoices'),
 
     # DETAILS
-    path('invoice-details/<int:invoice_id>/', views.invoice_details, name='invoicedetails'),
+    path('invoice-details/<int:order_id>/', views.invoice_details, name='invoicedetails'),
 
 
     path('fetch-customer-items/<int:customer_id>/', views.fetch_customer_items, name='fetch_customer_items'),

osinaweb/billing/views.py

@@ -10,16 +10,19 @@ from weasyprint import HTML
 # LISTING
 def items(request, *args, **kwargs):
     products = Item.objects.filter(type='Product').order_by('-id')
+    services = Item.objects.filter(type='Service').order_by('-id')
     context = {
         'products': products,
+        'services': services,
 
     }
     return render(request, 'listing_pages/items.html', context) 
 
 
 def orders(request, *args, **kwargs):
+    orders = Order.objects.all().order_by('-id')
     context = {
-
+        'orders': orders,
     }
     return render(request, 'listing_pages/orders.html', context) 
 
@@ -35,11 +38,11 @@ def invoices (request, *args, **kwargs):
 
 
 #DETAILS
-def invoice_details (request, invoice_id):
-    invoice = get_object_or_404(Invoice, id=invoice_id)
+def invoice_details(request, order_id):
+    order = get_object_or_404(Order, id=order_id)
 
     context = {
-        'invoice' : invoice,
+        'order' : order,
     }
 
     return render(request, 'invoice-details.html', context) 

osinaweb/osinacore/templates/add-edit-main.html

@@ -46,7 +46,9 @@
                         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">
-                        <i class="fa fa-search"></i>
+                        <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>
 
@@ -60,7 +62,9 @@
                         <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">
-                                <img src="{% static 'images/icons/users.png' %}" class="w-[30px]">
+                                <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>
                             <div>
@@ -100,7 +104,9 @@
                         <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">
-                                <img src="{% static 'images/icons/work.png' %}" class="w-[30px]">
+                                <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>
                             <div>
@@ -150,7 +156,9 @@
                     <!-- SUPPORT DROPDOWN -->
                     <div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
                         <div class="w-full flex justify-start items-center gap-3">
-                            <img src="{% static 'images/icons/support.png' %}" class="w-[30px]">
+                            <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>
                         <div>
@@ -165,7 +173,9 @@
                         <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">
-                                <img src="{% static 'images/icons/billing.png' %}" class="w-[30px]">
+                                <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>
                             <div>
@@ -213,7 +223,9 @@
                         <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">
-                                <img src="{% static 'images/icons/utilities.png' %}" class="w-[30px]">
+                                <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>
                             <div>
@@ -271,7 +283,9 @@
 
                     <a class="w-full">
                         <div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
-                            <img src="{% static 'images/icons/activity.png' %}" class="w-[30px]">
+                            <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>
                     </a>
@@ -332,7 +346,9 @@
                         <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">
-                                <img src="{% static 'images/icons/users.png' %}" class="w-[28px]">
+                                <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>
                             <div>
@@ -372,7 +388,9 @@
                         <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">
-                                <img src="{% static 'images/icons/work.png' %}" class="w-[28px]">
+                                <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>
                             <div>
@@ -421,7 +439,9 @@
 
                     <div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
                         <div class="w-full flex justify-start items-center gap-3">
-                            <img src="{% static 'images/icons/support.png' %}" class="w-[28px]">
+                            <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>
                         <div>
@@ -436,7 +456,9 @@
                         <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">
-                                <img src="{% static 'images/icons/billing.png' %}" class="w-[28px]">
+                                <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>
                             <div>
@@ -484,7 +506,9 @@
                         <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">
-                                <img src="{% static 'images/icons/utilities.png' %}" class="w-[28px]">
+                                <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>
                             <div>
@@ -542,7 +566,9 @@
 
                     <a class="w-full">
                         <div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
-                            <img src="{% static 'images/icons/activity.png' %}" class="w-[28px]">
+                            <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>
                     </a>

osinaweb/osinacore/templates/customer_main.html

@@ -33,7 +33,9 @@
                         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">
-                        <i class="fa fa-search"></i>
+                        <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>
 
@@ -42,18 +44,24 @@
                     class="w-full flex flex-col items-center px-5 h-[400px] xxlg1:h-[500px] overflow-hidden overflow-y-auto mt-5">
 
                     <div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3 text-white">
-                        <i class='fas fa-project-diagram'></i>
+                        <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="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122" />
+                        </svg>                          
                         <p class="">My Projects</p>
                     </div>
 
                     <div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3 text-white">
-                        <i class='fas fa-ticket-alt'></i>
+                        <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="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 0 1 0 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 0 1 0-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375Z" />
+                        </svg>
                         <p>Tickets</p>
                     </div>
 
                     <a href="{% url 'customerinvoices' %}" class="w-full">
                         <div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3 text-white">
-                            <i class='fas fa-file-invoice'></i>
+                            <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="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
+                            </svg>                              
                             <p>Invoices</p>
                         </div>
                     </a>
@@ -62,7 +70,9 @@
                         <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 text-white">
-                                <i class='far fa-clone'></i>
+                                <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="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
+                                 </svg>                                  
                                 <p class="">Products</p>
                             </div>
                             <div>
@@ -90,12 +100,17 @@
 
 
                     <div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3 text-white">
-                        <i class='fas fa-exclamation-circle'></i>
+                        <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="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
+                        </svg>
+                          
                         <p>Knowledgebase</p>
                     </div>
 
                     <div class="w-full flex justify-start items-center gap-3 py-3 text-white">
-                        <i class='far fa-comments'></i>
+                        <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>Contact Us</p>
                     </div>
                 </div>
@@ -152,7 +167,9 @@
                     <div class="w-full">
                         <div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
                             <div class="w-full flex justify-start items-center gap-3">
-                                <img src="" class="w-[30px]">
+                                <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="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122" />
+                                </svg>  
                                 <p class="text-white">My Projects</p>
                             </div>
                         </div>
@@ -162,7 +179,9 @@
                     <div class="w-full">
                         <div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
                             <div class="w-full flex justify-start items-center gap-3">
-                                <img src="" class="w-[30px]">
+                                <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="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 0 1 0 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 0 1 0-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375Z" />
+                                </svg>
                                 <p class="text-white">Tickets</p>
                             </div>
                         </div>
@@ -172,7 +191,9 @@
                     <a href="{% url 'customerinvoices' %}" class="w-full">
                         <div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
                             <div class="w-full flex justify-start items-center gap-3">
-                                <img src="" class="w-[30px]">
+                                <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="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
+                                </svg>  
                                 <p class="text-white">Invoices</p>
                             </div>
                         </div>
@@ -181,7 +202,9 @@
                     <a href="" class="w-full">
                         <div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
                             <div class="w-full flex justify-start items-center gap-3">
-                                <img src="" class="w-[30px]">
+                                <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="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
+                                </svg>    
                                 <p class="text-white">Products</p>
                             </div>
                         </div>
@@ -191,7 +214,9 @@
                     <div class="w-full">
                         <div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
                             <div class="w-full flex justify-start items-center gap-3">
-                                <img src="" class="w-[30px]">
+                                <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="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
+                                </svg>
                                 <p class="text-white">Knowledgebase</p>
                             </div>
                         </div>
@@ -200,7 +225,9 @@
                     <div class="w-full">
                         <div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
                             <div class="w-full flex justify-start items-center gap-3">
-                                <img src="" class="w-[30px]">
+                                <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">Contact Us</p>
                             </div>
                         </div>

osinaweb/osinacore/templates/main.html

@@ -74,7 +74,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">
-                        <i class="fa fa-search"></i>
+                        <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>
 
@@ -88,7 +91,11 @@
                         <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">
-                                <img src="{% static 'images/icons/users.png' %}" class="w-[30px]">
+                                <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>
                             <div>
@@ -128,7 +135,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">
-                                <img src="{% static 'images/icons/work.png' %}" class="w-[30px]">
+                                <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>
                             <div>
@@ -178,7 +188,10 @@
                     <!-- SUPPORT DROPDOWN -->
                     <div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
                         <div class="w-full flex justify-start items-center gap-3">
-                            <img src="{% static 'images/icons/support.png' %}" class="w-[30px]">
+                            <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>
                         <div>
@@ -192,7 +205,10 @@
                     <div class="w-full menu-container">
                         <div class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
                             <div class="w-full flex justify-start items-center gap-3">
-                                <img src="{% static 'images/icons/billing.png' %}" class="w-[30px]">
+                                <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>
                             <div>
@@ -239,7 +255,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">
-                                <img src="{% static 'images/icons/utilities.png' %}" class="w-[30px]">
+                                <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>
                             <div>
@@ -297,7 +316,10 @@
 
                     <a class="w-full">
                         <div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
-                            <img src="{% static 'images/icons/activity.png' %}" class="w-[30px]">
+                            <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>
                     </a>
@@ -359,7 +381,9 @@
                         <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">
-                                <img src="{% static 'images/icons/users.png' %}" class="w-[28px]">
+                                <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>
                             <div>
@@ -399,7 +423,9 @@
                         <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">
-                                <img src="{% static 'images/icons/work.png' %}" class="w-[28px]">
+                                <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>
                             <div>
@@ -448,7 +474,9 @@
 
                     <div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
                         <div class="w-full flex justify-start items-center gap-3">
-                            <img src="{% static 'images/icons/support.png' %}" class="w-[28px]">
+                            <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>
                         <div>
@@ -463,7 +491,9 @@
                        <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">
-                               <img src="{% static 'images/icons/billing.png' %}" class="w-[28px]">
+                                <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>
                            <div>
@@ -510,7 +540,9 @@
                         <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">
-                                <img src="{% static 'images/icons/utilities.png' %}" class="w-[28px]">
+                                <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>
                             <div>
@@ -568,7 +600,9 @@
 
                     <a class="w-full">
                         <div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
-                            <img src="{% static 'images/icons/activity.png' %}" class="w-[28px]">
+                            <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>
                     </a>

osinaweb/static/dist/output.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
+! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -32,11 +32,9 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
-7. Disable tap highlights on iOS
 */
 
-html,
-:host {
+html {
   line-height: 1.5;
   /* 1 */
   -webkit-text-size-adjust: 100%;
@@ -46,14 +44,12 @@ html,
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
   font-variation-settings: normal;
   /* 6 */
-  -webkit-tap-highlight-color: transparent;
-  /* 7 */
 }
 
 /*
@@ -125,10 +121,8 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font-family by default.
-2. Use the user's configured `mono` font-feature-settings by default.
-3. Use the user's configured `mono` font-variation-settings by default.
-4. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -137,12 +131,8 @@ samp,
 pre {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   /* 1 */
-  font-feature-settings: normal;
-  /* 2 */
-  font-variation-settings: normal;
-  /* 3 */
   font-size: 1em;
-  /* 4 */
+  /* 2 */
 }
 
 /*
@@ -1208,6 +1198,10 @@ video {
   width: 180px;
 }
 
+.w-\[18px\] {
+  width: 18px;
+}
+
 .w-\[20px\] {
   width: 20px;
 }
@@ -1284,10 +1278,6 @@ video {
   width: 55px;
 }
 
-.w-\[60\%\] {
-  width: 60%;
-}
-
 .w-\[60px\] {
   width: 60px;
 }
@@ -1326,7 +1316,7 @@ video {
 }
 
 .max-w-0 {
-  max-width: 0px;
+  max-width: 0rem;
 }
 
 .max-w-2xl {