New changes.

osinaweb/input.css

@@ -148,7 +148,7 @@
 
 
 
-@media screen and (max-width: 650px) {
+@media screen and (max-width: 798px) {
     #notesContainer {
         display: block;
     }

osinaweb/osinacore/migrations/0052_note_project.py

@@ -0,0 +1,19 @@
+# Generated by Django 4.2.5 on 2024-01-23 07:01
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('osinacore', '0051_alter_task_requirement'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='note',
+            name='project',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to='osinacore.project'),
+        ),
+    ]

osinaweb/osinacore/models.py

@@ -194,6 +194,7 @@ class Note(models.Model):
     date = models.DateTimeField(null=True,blank=True)
     user = models.ForeignKey(User, on_delete=models.CASCADE, null=True,blank=True)
     color = ColorField(default='#FF0000',blank=True)
+    project = models.ForeignKey(Project, on_delete=models.CASCADE, null=True, blank=True)
 
 
 class Task(models.Model):

osinaweb/osinacore/views.py

@@ -71,6 +71,7 @@ def home(request, *args, **kwargs):
 
 
 
+from django.db.models import Subquery, OuterRef
 
 #Listing Pages
 @login_required
@@ -84,11 +85,19 @@ def my_projects(request, *args, **kwargs):
         # Non-superuser, filter projects where the user is either the manager or a member
         projects = Project.objects.filter(Q(manager=user.staffprofile) | Q(members=user.staffprofile)).distinct().order_by('-project_id')
 
+    # Annotate each project with its most recent note
+    projects = projects.annotate(
+        recent_note_text=Subquery(
+            Note.objects.filter(project=OuterRef('pk')).order_by('-date').values('text')[:1]
+        ),
+        recent_note_color=Subquery(
+            Note.objects.filter(project=OuterRef('pk')).order_by('-date').values('color')[:1]
+        ),
+        recent_note_date=Max('note__date')
+    )
     
     context = {
-
-   'projects' : projects,
-
+        'projects': projects,
     }
     return render(request, 'listing_pages/projects.html', context)
 
@@ -233,6 +242,8 @@ def detailed_project(request, project_id):
     epics = Epic.objects.filter(project=project)
     latest_epic = Epic.objects.filter(project=project).last()
 
+    project_notes = Note.objects.filter(project=project).order_by('-id')
+
     if latest_epic:
         epics = epics.exclude(pk=latest_epic.pk)
 
@@ -250,11 +261,14 @@ def detailed_project(request, project_id):
         'epics': epics,
         'selected_epic': selected_epic,
         'related_tasks': related_tasks,
-        'latest_epic': latest_epic
+        'latest_epic': latest_epic,
+        'project_notes' : project_notes,
     }
 
     return render(request, 'details_pages/project-details.html', context)
 
+
+
 @login_required
 def customerdetails(request, customer_id):
     customer = get_object_or_404(CustomerProfile, customer_id=customer_id)
@@ -433,10 +447,13 @@ def add_note_modal(request, *args, **kwargs):
     return render(request, 'popup_modals/addnote-modal.html', context)   
 
 
-def add_project_note_modal(request, *args, **kwargs):
-    context = {
+def add_project_note_modal(request, project_id):
+    project = get_object_or_404(Project, project_id=project_id)
 
+    context = {
+        'project' : project
     }
+
     return render(request, 'popup_modals/add-project-note-modal.html', context)   
 
 
@@ -696,6 +713,31 @@ def save_note(request):
     return render(request, 'addnote-modal.html') 
 
 
+def save_project_note(request):
+
+    if request.method == 'POST':
+        text = request.POST.get('note_text')
+        color = request.POST.get('note_color')
+        user = request.user
+        date = timezone.now()
+
+        project_id = request.POST.get('project')
+        project = get_object_or_404(Project, id=project_id)
+
+        note = Note(
+            text=text,
+            color=color,
+            user=user,
+            date=date,
+            project=project,
+        )
+        note.save()
+
+        return HttpResponse('<script>window.top.location.reload();</script>')
+
+    return render(request, 'add-project-note-modal.html')
+
+
 
 @login_required
 def save_project(request):
@@ -1697,6 +1739,25 @@ def delete_note_modal(request, note_id):
     return render(request, "delete_modals/delete-note-modal.html", context)
 
 
+@login_required
+def delete_project_note_modal(request, note_id):
+    note = get_object_or_404(Note, id=note_id)
+
+    if request.method == 'POST':
+        project_id = note.project_id
+        project = get_object_or_404(Project, id=project_id)
+        note.delete()
+
+        return redirect('detailed-project', project_id=project.project_id)
+
+    context = {
+        'note': note,
+    }
+    
+    return render(request, "delete_modals/delete-project-note-modal.html", context)
+
+
+
 @login_required
 def delete_business_modal(request, business_id):
     business = get_object_or_404(Business, id=business_id)

osinaweb/osinaweb/urls.py

@@ -37,7 +37,6 @@ urlpatterns = [
     path('addstaff/', views.addstaff, name='adduser'),
     path('staffs/', views.staffs, name='users'),
     path('staffpositions/', views.staff_positions, name='staffpositions'),
-    path('projectdetails/<str:project_id>/', views.detailed_project, name='detailed-project'),
     path('createproject/', views.create_project, name='createproject'),
     path('createepic/<str:project_id>/', views.create_epic, name='createepic'),
     path('createtask/', views.create_task, name='createtask'),
@@ -59,6 +58,7 @@ urlpatterns = [
     path('customers/<str:customer_id>/', views.customerdetails, name='customerdetails'),
     path('staffs/<str:staff_id>/', views.staffdetails, name='userdetails'),
     path('tasks/<str:task_id>/', views.detailed_task, name='detailed-task'),
+    path('projectdetails/<str:project_id>/', views.detailed_project, name='detailed-project'),
 
 
 
@@ -72,7 +72,7 @@ urlpatterns = [
     #Modals urls
     path('add-status/', views.add_status_modal, name='addstatus'),
     path('add-note/', views.add_note_modal, name='addnote'),
-    path('add-project-note/', views.add_project_note_modal, name='addprojectnote'),
+    path('add-project-note/<str:project_id>/', views.add_project_note_modal, name='addprojectnote'),
     path('add-file/', views.add_file_modal, name='addfile'),
     path('add-user-story/<str:project_id>/', views.add_user_story_modal, name='adduserstory'),
     path('add-credentials/', views.add_credentials_modal, name='addcredentials'),
@@ -98,9 +98,12 @@ urlpatterns = [
     path('deleteprojectmodal/<int:project_id>', views.delete_project_modal, name='deleteprojectmodal'),
     path('deletetaskmodal/<int:task_id>', views.delete_task_modal, name='deletetaskmodal'),
     path('deletenotemodal/<int:note_id>', views.delete_note_modal, name='deletenotemodal'),
+    path('deleteprojectnotemodal/<int:note_id>', views.delete_project_note_modal, name='deleteprojectnotemodal'),
 
     #Save Urls
     path('save_note/', views.save_note, name='save_note'),
+    path('save_project_note/', views.save_project_note, name='save_project_note'),
+    
     path('save_project/', views.save_project, name='save_project'),
     path('save_epic/', views.save_epic, name='save_epic'),
     path('save_task/', views.save_task, name='save_task'),

osinaweb/static/dist/output.css

@@ -1080,6 +1080,10 @@ video {
   min-width: 100%;
 }
 
+.max-w-0 {
+  max-width: 0rem;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1389,6 +1393,11 @@ video {
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
 }
 
+.border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+}
+
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -2285,7 +2294,7 @@ video {
   }
 }
 
-@media screen and (max-width: 650px) {
+@media screen and (max-width: 798px) {
   #notesContainer {
     display: block;
   }
@@ -2439,6 +2448,10 @@ video {
     display: block;
   }
 
+  .md\:flex {
+    display: flex;
+  }
+
   .md\:hidden {
     display: none;
   }

osinaweb/static/js/pop-modals.js

@@ -74,6 +74,8 @@ document.addEventListener("DOMContentLoaded", function () {
     addButtonClickListener("deleteProjectButton", "400px", "140px");
     addButtonClickListener("deleteTaskButton", "400px", "140px");
     addButtonClickListener("deleteNoteButton", "400px", "140px");
+    addButtonClickListener("deleteProjectNoteButton", "400px", "140px");
+    
 
     
     

osinaweb/templates/delete_modals/delete-project-note-modal.html

@@ -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" %}'>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+</head>
+
+<body>
+    <form id="hiddenContent" method="post" action="{% url 'deleteprojectnotemodal' note.id %}" target="_parent">
+        {% csrf_token %}
+
+        <div class="h-[140px] flex flex-col justify-center items-center">
+            <h1 class="text-slate-800 text-xl font-semibold text-center">Are you sure you want to delete this note?</h1>
+
+            <div class="w-full flex justify-center items-center mt-5 gap-5">
+                <button 
+                    class="w-fit bg-red-500 border border-red-500 rounded-md text-white text-base px-3 py-2 hover:bg-white hover:text-red-500">Delete</button>
+            </div>
+        </div>
+    </form>
+</body>
+
+</html>

osinaweb/templates/details_pages/business-details.html

@@ -30,11 +30,11 @@
 
 
 <!-- NOTES SECTION -->
-<div class="w-full px-5 s:px-9 pb-5">
+\<div class="w-full px-5 s:px-9 pb-5">
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
             <div class="w-full s:w-fit flex justify-between items-center">
-                <div>
+                <div class="hidden md:block">
                     <p class="text-base text-gray-500">Recent Note:</p>
                     <div class="flex justify-start items-center gap-2">
                         <div class="w-[13px] h-[13px] rounded-full" style="background-color: {{ recent_note.color }};">
@@ -42,13 +42,19 @@
                         <p class="text-slate-700 truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
                     </div>
                 </div>
-                <button
-                    class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
-                    data-modal-url="{% url 'addnote' %}">
-                    <i class="fa fa-plus"></i>
-                </button>
+
+                <div class="w-full flex justify-between items-center md:hidden">
+                    <p class="text-base text-gray-500">My Notes</p>
+
+                    <button
+                        class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                        data-modal-url="{% url 'addnote' %}">
+                        <i class="fa fa-plus"></i>
+                    </button>
+                </div>
             </div>
-            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
+
+            <div class="w-full s:w-fit hidden md:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s:w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
                     id="showNotesButton">Show
@@ -62,7 +68,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
+        <div class="w-full h-fit hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -77,8 +83,8 @@
             </div>
 
             <!-- MOBILE NOTES IN SLIDER -->
-            <div class="w-full black lg:hidden">
-                <div class="swiper-container mt-5">
+            <div class="w-full block lg:hidden">
+                <div class="swiper-container mt-3">
                     <div class="swiper-wrapper">
                         {% for note in notes %}
                         <div class="swiper-slide cursor-pointer">
@@ -99,6 +105,7 @@
     </div>
 </div>
 
+
 <!-- BUSINESS DETAIL AND USERS ACTIVITY SECTION -->
 <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
     <!-- LEFT SIDE / BUSINESS DETAIL SECTION -->

osinaweb/templates/details_pages/customer-details.html

@@ -34,7 +34,7 @@
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
             <div class="w-full s:w-fit flex justify-between items-center">
-                <div>
+                <div class="hidden md:block">
                     <p class="text-base text-gray-500">Recent Note:</p>
                     <div class="flex justify-start items-center gap-2">
                         <div class="w-[13px] h-[13px] rounded-full" style="background-color: {{ recent_note.color }};">
@@ -42,13 +42,19 @@
                         <p class="text-slate-700 truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
                     </div>
                 </div>
-                <button
-                    class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
-                    data-modal-url="{% url 'addnote' %}">
-                    <i class="fa fa-plus"></i>
-                </button>
+
+                <div class="w-full flex justify-between items-center md:hidden">
+                    <p class="text-base text-gray-500">My Notes</p>
+
+                    <button
+                        class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                        data-modal-url="{% url 'addnote' %}">
+                        <i class="fa fa-plus"></i>
+                    </button>
+                </div>
             </div>
-            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
+
+            <div class="w-full s:w-fit hidden md:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s:w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
                     id="showNotesButton">Show
@@ -62,7 +68,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
+        <div class="w-full h-fit hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -77,8 +83,8 @@
             </div>
 
             <!-- MOBILE NOTES IN SLIDER -->
-            <div class="w-full black lg:hidden">
-                <div class="swiper-container mt-5">
+            <div class="w-full block lg:hidden">
+                <div class="swiper-container mt-3">
                     <div class="swiper-wrapper">
                         {% for note in notes %}
                         <div class="swiper-slide cursor-pointer">

osinaweb/templates/details_pages/project-details.html

@@ -34,7 +34,7 @@
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
             <div class="w-full s:w-fit flex justify-between items-center">
-                <div>
+                <div class="hidden md:block">
                     <p class="text-base text-gray-500">Recent Note:</p>
                     <div class="flex justify-start items-center gap-2">
                         <div class="w-[13px] h-[13px] rounded-full" style="background-color: {{ recent_note.color }};">
@@ -42,13 +42,19 @@
                         <p class="text-slate-700 truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
                     </div>
                 </div>
-                <button
-                    class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
-                    data-modal-url="{% url 'addnote' %}">
-                    <i class="fa fa-plus"></i>
-                </button>
+
+                <div class="w-full flex justify-between items-center md:hidden">
+                    <p class="text-base text-gray-500">My Notes</p>
+
+                    <button
+                        class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                        data-modal-url="{% url 'addnote' %}">
+                        <i class="fa fa-plus"></i>
+                    </button>
+                </div>
             </div>
-            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
+
+            <div class="w-full s:w-fit hidden md:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s:w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
                     id="showNotesButton">Show
@@ -62,7 +68,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
+        <div class="w-full h-fit hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -77,8 +83,8 @@
             </div>
 
             <!-- MOBILE NOTES IN SLIDER -->
-            <div class="w-full black lg:hidden">
-                <div class="swiper-container mt-5">
+            <div class="w-full block lg:hidden">
+                <div class="swiper-container mt-3">
                     <div class="swiper-wrapper">
                         {% for note in notes %}
                         <div class="swiper-slide cursor-pointer">
@@ -105,26 +111,26 @@
     <div class="w-full xxlg1:w-[74.5%] bg-white h-fit rounded-md shadow-md p-5">
         {% if project.status == 'Completed' %}
         <div class="w-full bg-green-700 rounded-t-md flex flex-col justify-center items-center py-2">
-            <h1 class="text-3xl text-white font-semibold">{{project.name}}</h1>
-            <p class="text-white text-base">{{project.project_id}}</p>
+            <h1 class="text-xl md:text-3xl text-white font-semibold text-center">{{project.name}}</h1>
+            <p class="text-white text-center text-base">{{project.project_id}}</p>
         </div>
         {% endif %}
         {% if project.status == 'Cancelled' %}
         <div class="w-full  bg-red-500 rounded-t-md flex flex-col justify-center items-center py-2">
-            <h1 class="text-3xl text-white font-semibold">{{project.name}}</h1>
-            <p class="text-white text-base">{{project.project_id}}</p>
+            <h1 class="text-xl md:text-3xl text-white font-semibold text-center">{{project.name}}</h1>
+            <p class="text-white text-center text-base">{{project.project_id}}</p>
         </div>
         {% endif %}
         {% if project.status == 'Active' %}
         <div class="w-full  bg-orange-500 rounded-t-md flex flex-col justify-center items-center py-2">
-            <h1 class="text-3xl text-white font-semibold">{{project.name}}</h1>
-            <p class="text-white text-base">{{project.project_id}}</p>
+            <h1 class="text-xl md:text-3xl text-white font-semibold text-center">{{project.name}}</h1>
+            <p class="text-white text-center text-base">{{project.project_id}}</p>
         </div>
         {% endif %}
         {% if project.status == 'Pending' %}
         <div class="w-full bg-yellow-400 rounded-t-md flex flex-col justify-center items-center py-2">
-            <h1 class="text-3xl text-white font-semibold">{{project.name}}</h1>
-            <p class="text-white text-base">{{project.project_id}}</p>
+            <h1 class="text-xl md:text-3xl text-white font-semibold text-center">{{project.name}}</h1>
+            <p class="text-white text-center text-base">{{project.project_id}}</p>
         </div>
         {% endif %}
         <div class="w-full rounded-b-md flex xll:hidden items-center">
@@ -305,8 +311,8 @@
                                     <div class="w-full flex justify-center items-center gap-3">
                                         <a href="{% url 'createuserstorytask' %}">
                                             <button
-                                            class="w-fit py-2 px-3 bg-green-700 border border-green-700 text-white rounded-md cursor-pointer hover:bg-white hover:text-green-700">Add
-                                            Task</button>
+                                                class="w-fit py-2 px-3 bg-green-700 border border-green-700 text-white rounded-md cursor-pointer hover:bg-white hover:text-green-700">Add
+                                                Task</button>
                                         </a>
 
                                         <a href="">
@@ -479,7 +485,7 @@
 
                         <button
                             class="h-full rounded-tr-md px-4 bg-gray-300 text-slate-700 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center addProjectNoteButton"
-                            data-modal-url="{% url 'addprojectnote' %}">
+                            data-modal-url="{% url 'addprojectnote' project.project_id %}">
                             <i class="fa fa-plus"></i>
                         </button>
                     </div>
@@ -510,30 +516,35 @@
                         <!-- TABLE BODY -->
                         <tbody class="bg-white divide-y divide-gray-200">
                             <!-- 1st row -->
-                            <tr>
+
+                            {% for note in project_notes %}
+                            <tr style="background-color: {{note.color}}">
                                 <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                                    <p class="text-slate-800">Note Content</p>
+                                    <p class="text-gray-500">{{ note.text }}</p>
                                 </td>
 
                                 <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                                    <p class="text-slate-800">2-11-2023</p>
+                                    <p class="text-gray-500">{{ note.date }}</p>
                                 </td>
 
                                 <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                                    <p class="text-slate-800">Nataly Abi Wajeh</p>
+                                    <p class="text-gray-500">{{ note.user.username }}</p>
                                 </td>
 
                                 <td class="px-6 py-4 text-center text-sm">
                                     <button
-                                        class="w-full py-2 px-3 bg-red-500 border border-red-500 text-white cursor-pointer rounded-md hover:bg-white hover:text-red-500">Delete</button>
+                                        class="w-full py-2 px-3 bg-transparent border border-gray-500 text-gray-500 cursor-pointer rounded-md deleteProjectNoteButton" data-modal-url="{% url 'deleteprojectnotemodal' note.id %}">Delete</button>
                                 </td>
                             </tr>
+                            {% endfor %}
 
-                            <!-- <tr>
-                                <td colspan="3" class="px-6 py-4 text-center text-sm text-slate-800">
+                            {% if project_notes.count == 0 %}
+                            <tr>
+                                <td colspan="4" class="px-6 py-4 text-center text-sm text-slate-800">
                                     No Available Notes
                                 </td>
-                            </tr> -->
+                            </tr>
+                            {% endif %}
                         </tbody>
                     </table>
                 </div>
@@ -618,7 +629,8 @@
 
     <!-- RIGHT SIDE / USERS ACTIVITY -->
     {% if latest_statuses_time_ago %}
-    <div class="hidden xxlg1:block w-[25%] bg-white h-[1283px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
+    <div
+        class="hidden xxlg1:block w-[25%] bg-white h-[1283px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
         <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
         <div class="w-full h-fit mt-2" id="activitiesContainer">
 

osinaweb/templates/details_pages/staff-details.html

@@ -34,7 +34,7 @@
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
             <div class="w-full s:w-fit flex justify-between items-center">
-                <div>
+                <div class="hidden md:block">
                     <p class="text-base text-gray-500">Recent Note:</p>
                     <div class="flex justify-start items-center gap-2">
                         <div class="w-[13px] h-[13px] rounded-full" style="background-color: {{ recent_note.color }};">
@@ -42,13 +42,19 @@
                         <p class="text-slate-700 truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
                     </div>
                 </div>
-                <button
-                    class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
-                    data-modal-url="{% url 'addnote' %}">
-                    <i class="fa fa-plus"></i>
-                </button>
+
+                <div class="w-full flex justify-between items-center md:hidden">
+                    <p class="text-base text-gray-500">My Notes</p>
+
+                    <button
+                        class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                        data-modal-url="{% url 'addnote' %}">
+                        <i class="fa fa-plus"></i>
+                    </button>
+                </div>
             </div>
-            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
+
+            <div class="w-full s:w-fit hidden md:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s:w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
                     id="showNotesButton">Show
@@ -62,7 +68,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
+        <div class="w-full h-fit hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -77,8 +83,8 @@
             </div>
 
             <!-- MOBILE NOTES IN SLIDER -->
-            <div class="w-full black lg:hidden">
-                <div class="swiper-container mt-5">
+            <div class="w-full block lg:hidden">
+                <div class="swiper-container mt-3">
                     <div class="swiper-wrapper">
                         {% for note in notes %}
                         <div class="swiper-slide cursor-pointer">

osinaweb/templates/details_pages/task-details.html

@@ -33,7 +33,7 @@
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
             <div class="w-full s:w-fit flex justify-between items-center">
-                <div>
+                <div class="hidden md:block">
                     <p class="text-base text-gray-500">Recent Note:</p>
                     <div class="flex justify-start items-center gap-2">
                         <div class="w-[13px] h-[13px] rounded-full" style="background-color: {{ recent_note.color }};">
@@ -41,13 +41,19 @@
                         <p class="text-slate-700 truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
                     </div>
                 </div>
-                <button
-                    class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
-                    data-modal-url="{% url 'addnote' %}">
-                    <i class="fa fa-plus"></i>
-                </button>
+
+                <div class="w-full flex justify-between items-center md:hidden">
+                    <p class="text-base text-gray-500">My Notes</p>
+
+                    <button
+                        class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                        data-modal-url="{% url 'addnote' %}">
+                        <i class="fa fa-plus"></i>
+                    </button>
+                </div>
             </div>
-            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
+
+            <div class="w-full s:w-fit hidden md:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s:w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
                     id="showNotesButton">Show
@@ -61,7 +67,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
+        <div class="w-full h-fit hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -76,8 +82,8 @@
             </div>
 
             <!-- MOBILE NOTES IN SLIDER -->
-            <div class="w-full black lg:hidden">
-                <div class="swiper-container mt-5">
+            <div class="w-full block lg:hidden">
+                <div class="swiper-container mt-3">
                     <div class="swiper-wrapper">
                         {% for note in notes %}
                         <div class="swiper-slide cursor-pointer">
@@ -105,17 +111,17 @@
     <div class="w-full xxlg1:w-[75%] bg-white h-fit rounded-md shadow-md p-5">
         {% if task.status == 'Open' %}
         <div class="w-full bg-red-500 rounded-t-md flex flex-col justify-center items-center py-3">
-            <h1 class="text-3xl text-white font-semibold">{{task.name}}</h1>
+            <h1 class="text-xl md:text-3xl text-white font-semibold text-center">{{task.name}}</h1>
         </div>
         {% endif %}
         {% if task.status == 'Working On' %}
         <div class="w-full bg-orange-500 rounded-t-md flex flex-col justify-center items-center py-3">
-            <h1 class="text-3xl text-white font-semibold">{{task.name}}</h1>
+            <h1 class="text-xl md:text-3xl text-white font-semibold text-center">{{task.name}}</h1>
         </div>
         {% endif %}
         {% if task.status == 'Closed' %}
         <div class="w-full  bg-green-700 rounded-t-md flex flex-col justify-center items-center py-3">
-            <h1 class="text-3xl text-white font-semibold">{{task.name}}</h1>
+            <h1 class="text-xl md:text-3xl text-white font-semibold text-center">{{task.name}}</h1>
         </div>
         {% endif %}
         <div class="w-full h-fit flex justify-end items-center bg-gray-100 shadow-md rounded-md px-3 py-3 mt-4">

osinaweb/templates/index.html

@@ -2,50 +2,6 @@
 {%load static%}
 {% block content %}
 
-<style>
-    /* .bread{
-    height:40px;
-    background:red;
-    color:#fff;
-    position:relative;
-    width:200px;
-    text-align:center;
-    line-height:40px;
-}
-
-.bread:after{
-    content:"";
-    position:absolute;
-    height:0;
-    width:0;
-    left:100%;
-    top:0;
-    border:20px solid transparent;
-    border-left: 20px solid red;
-} */
-
-    /* .nextbread {
-    height:40px;
-    background:red;
-    color:#fff;
-    position:relative;
-    width:200px;
-    text-align:center;
-    line-height:40px;
-}
-.nextbread:after {
-    content:"";
-    position:absolute;
-    height:0;
-    width:0;
-    left:100%;
-    top:0;
-    border:20px solid transparent;
-    border-left: 20px solid red;
-} */
-</style>
-
-
 
 <!-- USERS ACTIVITIES ON MOBILE -->
 <div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xxlg1:hidden bottom-3 right-3 p-2 flex justify-center items-center cursor-pointer usersActivityIcon z-20"
@@ -78,7 +34,7 @@
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
             <div class="w-full s:w-fit flex justify-between items-center">
-                <div>
+                <div class="hidden md:block">
                     <p class="text-base text-gray-500">Recent Note:</p>
                     <div class="flex justify-start items-center gap-2">
                         <div class="w-[13px] h-[13px] rounded-full" style="background-color: {{ recent_note.color }};">
@@ -86,13 +42,19 @@
                         <p class="text-slate-700 truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
                     </div>
                 </div>
-                <button
-                    class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
-                    data-modal-url="{% url 'addnote' %}">
-                    <i class="fa fa-plus"></i>
-                </button>
+
+                <div class="w-full flex justify-between items-center md:hidden">
+                    <p class="text-base text-gray-500">My Notes</p>
+
+                    <button
+                        class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                        data-modal-url="{% url 'addnote' %}">
+                        <i class="fa fa-plus"></i>
+                    </button>
+                </div>
             </div>
-            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
+
+            <div class="w-full s:w-fit hidden md:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s:w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
                     id="showNotesButton">Show
@@ -106,7 +68,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
+        <div class="w-full h-fit hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -121,8 +83,8 @@
             </div>
 
             <!-- MOBILE NOTES IN SLIDER -->
-            <div class="w-full black lg:hidden">
-                <div class="swiper-container mt-5">
+            <div class="w-full block lg:hidden">
+                <div class="swiper-container mt-3">
                     <div class="swiper-wrapper">
                         {% for note in notes %}
                         <div class="swiper-slide cursor-pointer">
@@ -143,19 +105,9 @@
     </div>
 </div>
 
-<div class="w-full px-5 s:px-9 pb-5">
-    <!-- <div class="w-full px-3 py-5 flex items-center bg-white shadow-md rounded-md text-gray-500 font-light">
-        <div
-            class="bread ">
-            <p>Home</p>
-        </div>
-
-        <div
-            class="nextbread ">
-            <p>Home</p>
-        </div>
-    </div> -->
 
+<!-- BREAD CRUMBS -->
+<div class="w-full px-5 s:px-9 pb-5">
     <div class="flex items-center px-6 py-3 bg-white border-b rounded-md shadow-md">
         <a href="#" class="text-sm text-gray-500 hover:text-gray-700">Home</a>
         <svg class="w-5 h-5 ml-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
@@ -167,11 +119,13 @@
             stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
         </svg>
-        <span class="ml-4 text-sm text-gray-500">Current Page</span>
+        <span class="ml-4 text-sm text-slate-700 font-semibold">Current Page</span>
     </div>
-    
+
 </div>
 
+
+
 <!-- TASKS AND USERS ACTIVITY SECTION -->
 <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
     <!-- LEFT SIDE / TASKS SECTION -->

osinaweb/templates/listing_pages/business-types.html

@@ -33,7 +33,7 @@
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
             <div class="w-full s:w-fit flex justify-between items-center">
-                <div>
+                <div class="hidden md:block">
                     <p class="text-base text-gray-500">Recent Note:</p>
                     <div class="flex justify-start items-center gap-2">
                         <div class="w-[13px] h-[13px] rounded-full" style="background-color: {{ recent_note.color }};">
@@ -41,13 +41,19 @@
                         <p class="text-slate-700 truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
                     </div>
                 </div>
-                <button
-                    class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
-                    data-modal-url="{% url 'addnote' %}">
-                    <i class="fa fa-plus"></i>
-                </button>
+
+                <div class="w-full flex justify-between items-center md:hidden">
+                    <p class="text-base text-gray-500">My Notes</p>
+
+                    <button
+                        class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                        data-modal-url="{% url 'addnote' %}">
+                        <i class="fa fa-plus"></i>
+                    </button>
+                </div>
             </div>
-            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
+
+            <div class="w-full s:w-fit hidden md:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s:w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
                     id="showNotesButton">Show
@@ -61,7 +67,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
+        <div class="w-full h-fit hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -76,8 +82,8 @@
             </div>
 
             <!-- MOBILE NOTES IN SLIDER -->
-            <div class="w-full black lg:hidden">
-                <div class="swiper-container mt-5">
+            <div class="w-full block lg:hidden">
+                <div class="swiper-container mt-3">
                     <div class="swiper-wrapper">
                         {% for note in notes %}
                         <div class="swiper-slide cursor-pointer">

osinaweb/templates/listing_pages/businesses.html

@@ -34,7 +34,7 @@
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
             <div class="w-full s:w-fit flex justify-between items-center">
-                <div>
+                <div class="hidden md:block">
                     <p class="text-base text-gray-500">Recent Note:</p>
                     <div class="flex justify-start items-center gap-2">
                         <div class="w-[13px] h-[13px] rounded-full" style="background-color: {{ recent_note.color }};">
@@ -42,13 +42,19 @@
                         <p class="text-slate-700 truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
                     </div>
                 </div>
-                <button
-                    class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
-                    data-modal-url="{% url 'addnote' %}">
-                    <i class="fa fa-plus"></i>
-                </button>
+
+                <div class="w-full flex justify-between items-center md:hidden">
+                    <p class="text-base text-gray-500">My Notes</p>
+
+                    <button
+                        class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                        data-modal-url="{% url 'addnote' %}">
+                        <i class="fa fa-plus"></i>
+                    </button>
+                </div>
             </div>
-            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
+
+            <div class="w-full s:w-fit hidden md:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s:w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
                     id="showNotesButton">Show
@@ -62,7 +68,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
+        <div class="w-full h-fit hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -77,8 +83,8 @@
             </div>
 
             <!-- MOBILE NOTES IN SLIDER -->
-            <div class="w-full black lg:hidden">
-                <div class="swiper-container mt-5">
+            <div class="w-full block lg:hidden">
+                <div class="swiper-container mt-3">
                     <div class="swiper-wrapper">
                         {% for note in notes %}
                         <div class="swiper-slide cursor-pointer">

osinaweb/templates/listing_pages/customers.html

@@ -33,7 +33,7 @@
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
             <div class="w-full s:w-fit flex justify-between items-center">
-                <div>
+                <div class="hidden md:block">
                     <p class="text-base text-gray-500">Recent Note:</p>
                     <div class="flex justify-start items-center gap-2">
                         <div class="w-[13px] h-[13px] rounded-full" style="background-color: {{ recent_note.color }};">
@@ -41,13 +41,19 @@
                         <p class="text-slate-700 truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
                     </div>
                 </div>
-                <button
-                    class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
-                    data-modal-url="{% url 'addnote' %}">
-                    <i class="fa fa-plus"></i>
-                </button>
+
+                <div class="w-full flex justify-between items-center md:hidden">
+                    <p class="text-base text-gray-500">My Notes</p>
+
+                    <button
+                        class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                        data-modal-url="{% url 'addnote' %}">
+                        <i class="fa fa-plus"></i>
+                    </button>
+                </div>
             </div>
-            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
+
+            <div class="w-full s:w-fit hidden md:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s:w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
                     id="showNotesButton">Show
@@ -61,7 +67,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
+        <div class="w-full h-fit hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -76,8 +82,8 @@
             </div>
 
             <!-- MOBILE NOTES IN SLIDER -->
-            <div class="w-full black lg:hidden">
-                <div class="swiper-container mt-5">
+            <div class="w-full block lg:hidden">
+                <div class="swiper-container mt-3">
                     <div class="swiper-wrapper">
                         {% for note in notes %}
                         <div class="swiper-slide cursor-pointer">

osinaweb/templates/listing_pages/daily-reports.html

@@ -33,7 +33,7 @@
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
             <div class="w-full s:w-fit flex justify-between items-center">
-                <div>
+                <div class="hidden md:block">
                     <p class="text-base text-gray-500">Recent Note:</p>
                     <div class="flex justify-start items-center gap-2">
                         <div class="w-[13px] h-[13px] rounded-full" style="background-color: {{ recent_note.color }};">
@@ -41,13 +41,19 @@
                         <p class="text-slate-700 truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
                     </div>
                 </div>
-                <button
-                    class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
-                    data-modal-url="{% url 'addnote' %}">
-                    <i class="fa fa-plus"></i>
-                </button>
+
+                <div class="w-full flex justify-between items-center md:hidden">
+                    <p class="text-base text-gray-500">My Notes</p>
+
+                    <button
+                        class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                        data-modal-url="{% url 'addnote' %}">
+                        <i class="fa fa-plus"></i>
+                    </button>
+                </div>
             </div>
-            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
+
+            <div class="w-full s:w-fit hidden md:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s:w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
                     id="showNotesButton">Show
@@ -61,7 +67,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
+        <div class="w-full h-fit hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -76,8 +82,8 @@
             </div>
 
             <!-- MOBILE NOTES IN SLIDER -->
-            <div class="w-full black lg:hidden">
-                <div class="swiper-container mt-5">
+            <div class="w-full block lg:hidden">
+                <div class="swiper-container mt-3">
                     <div class="swiper-wrapper">
                         {% for note in notes %}
                         <div class="swiper-slide cursor-pointer">

osinaweb/templates/listing_pages/notes.html

@@ -33,7 +33,7 @@
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
             <div class="w-full s:w-fit flex justify-between items-center">
-                <div>
+                <div class="hidden md:block">
                     <p class="text-base text-gray-500">Recent Note:</p>
                     <div class="flex justify-start items-center gap-2">
                         <div class="w-[13px] h-[13px] rounded-full" style="background-color: {{ recent_note.color }};">
@@ -41,13 +41,19 @@
                         <p class="text-slate-700 truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
                     </div>
                 </div>
-                <button
-                    class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
-                    data-modal-url="{% url 'addnote' %}">
-                    <i class="fa fa-plus"></i>
-                </button>
+
+                <div class="w-full flex justify-between items-center md:hidden">
+                    <p class="text-base text-gray-500">My Notes</p>
+
+                    <button
+                        class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                        data-modal-url="{% url 'addnote' %}">
+                        <i class="fa fa-plus"></i>
+                    </button>
+                </div>
             </div>
-            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
+
+            <div class="w-full s:w-fit hidden md:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s:w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
                     id="showNotesButton">Show
@@ -61,7 +67,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
+        <div class="w-full h-fit hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -76,8 +82,8 @@
             </div>
 
             <!-- MOBILE NOTES IN SLIDER -->
-            <div class="w-full black lg:hidden">
-                <div class="swiper-container mt-5">
+            <div class="w-full block lg:hidden">
+                <div class="swiper-container mt-3">
                     <div class="swiper-wrapper">
                         {% for note in notes %}
                         <div class="swiper-slide cursor-pointer">

osinaweb/templates/listing_pages/project-types.html

@@ -33,7 +33,7 @@
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
             <div class="w-full s:w-fit flex justify-between items-center">
-                <div>
+                <div class="hidden md:block">
                     <p class="text-base text-gray-500">Recent Note:</p>
                     <div class="flex justify-start items-center gap-2">
                         <div class="w-[13px] h-[13px] rounded-full" style="background-color: {{ recent_note.color }};">
@@ -41,13 +41,19 @@
                         <p class="text-slate-700 truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
                     </div>
                 </div>
-                <button
-                    class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
-                    data-modal-url="{% url 'addnote' %}">
-                    <i class="fa fa-plus"></i>
-                </button>
+
+                <div class="w-full flex justify-between items-center md:hidden">
+                    <p class="text-base text-gray-500">My Notes</p>
+
+                    <button
+                        class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                        data-modal-url="{% url 'addnote' %}">
+                        <i class="fa fa-plus"></i>
+                    </button>
+                </div>
             </div>
-            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
+
+            <div class="w-full s:w-fit hidden md:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s:w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
                     id="showNotesButton">Show
@@ -61,7 +67,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
+        <div class="w-full h-fit hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -76,8 +82,8 @@
             </div>
 
             <!-- MOBILE NOTES IN SLIDER -->
-            <div class="w-full black lg:hidden">
-                <div class="swiper-container mt-5">
+            <div class="w-full block lg:hidden">
+                <div class="swiper-container mt-3">
                     <div class="swiper-wrapper">
                         {% for note in notes %}
                         <div class="swiper-slide cursor-pointer">

osinaweb/templates/listing_pages/projects.html

@@ -22,7 +22,8 @@
             onclick="closeModal()">
             <svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512">
                 <path
-                    d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" fill="grey"/>
+                    d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"
+                    fill="grey" />
             </svg>
         </div>
     </div>
@@ -34,7 +35,7 @@
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
             <div class="w-full s:w-fit flex justify-between items-center">
-                <div>
+                <div class="hidden md:block">
                     <p class="text-base text-gray-500">Recent Note:</p>
                     <div class="flex justify-start items-center gap-2">
                         <div class="w-[13px] h-[13px] rounded-full" style="background-color: {{ recent_note.color }};">
@@ -42,13 +43,19 @@
                         <p class="text-slate-700 truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
                     </div>
                 </div>
-                <button
-                    class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
-                    data-modal-url="{% url 'addnote' %}">
-                    <i class="fa fa-plus"></i>
-                </button>
+
+                <div class="w-full flex justify-between items-center md:hidden">
+                    <p class="text-base text-gray-500">My Notes</p>
+
+                    <button
+                        class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                        data-modal-url="{% url 'addnote' %}">
+                        <i class="fa fa-plus"></i>
+                    </button>
+                </div>
             </div>
-            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
+
+            <div class="w-full s:w-fit hidden md:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s:w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
                     id="showNotesButton">Show
@@ -62,7 +69,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
+        <div class="w-full h-fit hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -77,8 +84,8 @@
             </div>
 
             <!-- MOBILE NOTES IN SLIDER -->
-            <div class="w-full black lg:hidden">
-                <div class="swiper-container mt-5">
+            <div class="w-full block lg:hidden">
+                <div class="swiper-container mt-3">
                     <div class="swiper-wrapper">
                         {% for note in notes %}
                         <div class="swiper-slide cursor-pointer">
@@ -107,7 +114,8 @@
             <h1 class="text-slate-800 text-[30px] font-semibold">My Projects</h1>
 
             <!-- PROJECT FILTERING -->
-            <div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col md:flex-row justify-between items-center gap-3">
+            <div
+                class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col md:flex-row justify-between items-center gap-3">
                 <div class="w-full md:w-fit flex flex-col md:flex-row justify-start items-center gap-3">
                     <div class="relative h-fit w-full md:w-fit flex items-center">
                         <input type="text" placeholder="Enter Project Name"
@@ -127,7 +135,7 @@
                     </select>
                 </div>
                 <div class="w-full md:w-fit">
-                    <a href="{% url 'createproject' %}" class="w-full md:w-fit"> 
+                    <a href="{% url 'createproject' %}" class="w-full md:w-fit">
                         <button
                             class="w-full md:w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Create
                             Project</button>
@@ -141,17 +149,13 @@
                     <!-- 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">
-                                #
-                            </th>
                             <th scope="col"
                                 class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                                 Project
                             </th>
                             <th scope="col"
                                 class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
-                                Client
+                                Recent Note
                             </th>
                             <th scope="col"
                                 class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
@@ -169,16 +173,17 @@
                         <!-- 1st row -->
                         {% for project in projects %}
                         <tr>
-                            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                                <p class="text-slate-800">{{project.project_id}}</p>
-                            </td>
 
                             <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                                 <p class="text-slate-800">{{project.name}}</p>
                             </td>
 
-                            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                                <p class="text-slate-800">{{project.customer}}</p>
+                            <td class="px-6 py-4 text-center text-sm border-r border-gray-300" style="background-color: {{ project.recent_note_color }}">
+                                {% if project.recent_note_date %}
+                                <p class="text-gray-500">{{ project.recent_note_text }}</p>
+                                {% else %}
+                                <p class="text-slate-800">No recent note</p>
+                                {% endif %}
                             </td>
 
                             {% if project.status == 'Completed' %}
@@ -219,7 +224,8 @@
                                             <i class="fa fa-edit"></i>
                                         </div>
                                     </a>
-                                    <div class="text-[15px] text-red-500 cursor-pointer deleteProjectButton" data-modal-url="{% url 'deleteprojectmodal' project.id %}">
+                                    <div class="text-[15px] text-red-500 cursor-pointer deleteProjectButton"
+                                        data-modal-url="{% url 'deleteprojectmodal' project.id %}">
                                         <i class="fa fa-trash"></i>
                                     </div>
                                 </div>
@@ -234,7 +240,8 @@
 
     <!-- RIGHT SIDE / USERS ACTIVITY -->
     {% if latest_statuses_time_ago %}
-    <div class="hidden xxlg1:block w-[25%] bg-white h-[1283px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
+    <div
+        class="hidden xxlg1:block w-[25%] bg-white h-[1283px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
         <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
         <div class="w-full h-fit mt-2" id="activitiesContainer">
 

osinaweb/templates/listing_pages/references.html

@@ -33,7 +33,7 @@
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
             <div class="w-full s:w-fit flex justify-between items-center">
-                <div>
+                <div class="hidden md:block">
                     <p class="text-base text-gray-500">Recent Note:</p>
                     <div class="flex justify-start items-center gap-2">
                         <div class="w-[13px] h-[13px] rounded-full" style="background-color: {{ recent_note.color }};">
@@ -41,13 +41,19 @@
                         <p class="text-slate-700 truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
                     </div>
                 </div>
-                <button
-                    class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
-                    data-modal-url="{% url 'addnote' %}">
-                    <i class="fa fa-plus"></i>
-                </button>
+
+                <div class="w-full flex justify-between items-center md:hidden">
+                    <p class="text-base text-gray-500">My Notes</p>
+
+                    <button
+                        class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                        data-modal-url="{% url 'addnote' %}">
+                        <i class="fa fa-plus"></i>
+                    </button>
+                </div>
             </div>
-            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
+
+            <div class="w-full s:w-fit hidden md:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s:w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
                     id="showNotesButton">Show
@@ -61,7 +67,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
+        <div class="w-full h-fit hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -76,8 +82,8 @@
             </div>
 
             <!-- MOBILE NOTES IN SLIDER -->
-            <div class="w-full black lg:hidden">
-                <div class="swiper-container mt-5">
+            <div class="w-full block lg:hidden">
+                <div class="swiper-container mt-3">
                     <div class="swiper-wrapper">
                         {% for note in notes %}
                         <div class="swiper-slide cursor-pointer">

osinaweb/templates/listing_pages/staff-positions.html

@@ -34,7 +34,7 @@
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
             <div class="w-full s:w-fit flex justify-between items-center">
-                <div>
+                <div class="hidden md:block">
                     <p class="text-base text-gray-500">Recent Note:</p>
                     <div class="flex justify-start items-center gap-2">
                         <div class="w-[13px] h-[13px] rounded-full" style="background-color: {{ recent_note.color }};">
@@ -42,13 +42,19 @@
                         <p class="text-slate-700 truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
                     </div>
                 </div>
-                <button
-                    class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
-                    data-modal-url="{% url 'addnote' %}">
-                    <i class="fa fa-plus"></i>
-                </button>
+
+                <div class="w-full flex justify-between items-center md:hidden">
+                    <p class="text-base text-gray-500">My Notes</p>
+
+                    <button
+                        class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                        data-modal-url="{% url 'addnote' %}">
+                        <i class="fa fa-plus"></i>
+                    </button>
+                </div>
             </div>
-            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
+
+            <div class="w-full s:w-fit hidden md:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s:w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
                     id="showNotesButton">Show
@@ -62,7 +68,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
+        <div class="w-full h-fit hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -77,8 +83,8 @@
             </div>
 
             <!-- MOBILE NOTES IN SLIDER -->
-            <div class="w-full black lg:hidden">
-                <div class="swiper-container mt-5">
+            <div class="w-full block lg:hidden">
+                <div class="swiper-container mt-3">
                     <div class="swiper-wrapper">
                         {% for note in notes %}
                         <div class="swiper-slide cursor-pointer">
@@ -99,6 +105,7 @@
     </div>
 </div>
 
+
 <!-- USERS AND USERS ACTIVITY SECTION -->
 <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
     <!-- LEFT SIDE / USERS SECTION -->

osinaweb/templates/listing_pages/staffs.html

@@ -34,7 +34,7 @@
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
             <div class="w-full s:w-fit flex justify-between items-center">
-                <div>
+                <div class="hidden md:block">
                     <p class="text-base text-gray-500">Recent Note:</p>
                     <div class="flex justify-start items-center gap-2">
                         <div class="w-[13px] h-[13px] rounded-full" style="background-color: {{ recent_note.color }};">
@@ -42,13 +42,19 @@
                         <p class="text-slate-700 truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
                     </div>
                 </div>
-                <button
-                    class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
-                    data-modal-url="{% url 'addnote' %}">
-                    <i class="fa fa-plus"></i>
-                </button>
+
+                <div class="w-full flex justify-between items-center md:hidden">
+                    <p class="text-base text-gray-500">My Notes</p>
+
+                    <button
+                        class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                        data-modal-url="{% url 'addnote' %}">
+                        <i class="fa fa-plus"></i>
+                    </button>
+                </div>
             </div>
-            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
+
+            <div class="w-full s:w-fit hidden md:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s:w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
                     id="showNotesButton">Show
@@ -62,7 +68,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
+        <div class="w-full h-fit hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -77,8 +83,8 @@
             </div>
 
             <!-- MOBILE NOTES IN SLIDER -->
-            <div class="w-full black lg:hidden">
-                <div class="swiper-container mt-5">
+            <div class="w-full block lg:hidden">
+                <div class="swiper-container mt-3">
                     <div class="swiper-wrapper">
                         {% for note in notes %}
                         <div class="swiper-slide cursor-pointer">
@@ -99,6 +105,7 @@
     </div>
 </div>
 
+
 <!-- USERS AND USERS ACTIVITY SECTION -->
 <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
     <!-- LEFT SIDE / USERS SECTION -->

osinaweb/templates/listing_pages/tags.html

@@ -33,7 +33,7 @@
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
             <div class="w-full s:w-fit flex justify-between items-center">
-                <div>
+                <div class="hidden md:block">
                     <p class="text-base text-gray-500">Recent Note:</p>
                     <div class="flex justify-start items-center gap-2">
                         <div class="w-[13px] h-[13px] rounded-full" style="background-color: {{ recent_note.color }};">
@@ -41,13 +41,19 @@
                         <p class="text-slate-700 truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
                     </div>
                 </div>
-                <button
-                    class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
-                    data-modal-url="{% url 'addnote' %}">
-                    <i class="fa fa-plus"></i>
-                </button>
+
+                <div class="w-full flex justify-between items-center md:hidden">
+                    <p class="text-base text-gray-500">My Notes</p>
+
+                    <button
+                        class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                        data-modal-url="{% url 'addnote' %}">
+                        <i class="fa fa-plus"></i>
+                    </button>
+                </div>
             </div>
-            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
+
+            <div class="w-full s:w-fit hidden md:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s:w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
                     id="showNotesButton">Show
@@ -61,7 +67,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
+        <div class="w-full h-fit hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -76,8 +82,8 @@
             </div>
 
             <!-- MOBILE NOTES IN SLIDER -->
-            <div class="w-full black lg:hidden">
-                <div class="swiper-container mt-5">
+            <div class="w-full block lg:hidden">
+                <div class="swiper-container mt-3">
                     <div class="swiper-wrapper">
                         {% for note in notes %}
                         <div class="swiper-slide cursor-pointer">

osinaweb/templates/listing_pages/tasks.html

@@ -32,7 +32,7 @@
     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
             <div class="w-full s:w-fit flex justify-between items-center">
-                <div>
+                <div class="hidden md:block">
                     <p class="text-base text-gray-500">Recent Note:</p>
                     <div class="flex justify-start items-center gap-2">
                         <div class="w-[13px] h-[13px] rounded-full" style="background-color: {{ recent_note.color }};">
@@ -40,13 +40,19 @@
                         <p class="text-slate-700 truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
                     </div>
                 </div>
-                <button
-                    class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
-                    data-modal-url="{% url 'addnote' %}">
-                    <i class="fa fa-plus"></i>
-                </button>
+
+                <div class="w-full flex justify-between items-center md:hidden">
+                    <p class="text-base text-gray-500">My Notes</p>
+
+                    <button
+                        class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton"
+                        data-modal-url="{% url 'addnote' %}">
+                        <i class="fa fa-plus"></i>
+                    </button>
+                </div>
             </div>
-            <div class="w-full s:w-fit hidden s:flex justify-start s:justify-end items-center gap-4">
+
+            <div class="w-full s:w-fit hidden md:flex justify-start s:justify-end items-center gap-4">
                 <button
                     class="w-full s:w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
                     id="showNotesButton">Show
@@ -60,7 +66,7 @@
         </div>
 
         <!-- ALL NOTES CONTAINER (appears when clicking on the "Show notes" button) -->
-        <div class="w-full h-fit mt-5 hidden" id="notesContainer">
+        <div class="w-full h-fit hidden" id="notesContainer">
 
             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                 {% for note in notes %}
@@ -75,8 +81,8 @@
             </div>
 
             <!-- MOBILE NOTES IN SLIDER -->
-            <div class="w-full black lg:hidden">
-                <div class="swiper-container mt-5">
+            <div class="w-full block lg:hidden">
+                <div class="swiper-container mt-3">
                     <div class="swiper-wrapper">
                         {% for note in notes %}
                         <div class="swiper-slide cursor-pointer">
@@ -97,6 +103,7 @@
     </div>
 </div>
 
+
 <!-- TASKS AND USERS ACTIVITY SECTION -->
 <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
     <!-- LEFT SIDE / TASKS SECTION -->

osinaweb/templates/popup_modals/add-project-note-modal.html

@@ -14,13 +14,18 @@
 </head>
 
 <body>
-    <form id="hiddenContent" method="POST" action="">
+    <form id="hiddenContent" method="POST" action="{% url 'save_project_note' %}">
         {% csrf_token %}
         <h1 class="text-slate-800 text-2xl font-semibold text-center">Add Note</h1>
 
-        <div class="w-full flex justify-center items-center">
+        <div class="w-full flex flex-col gap-3 justify-center items-center">
             <input required name="note_text" type="text" placeholder="Type your note here..."
                 class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4">
+
+            <select required name="project" id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 hidden">
+                <option value="{{project.id}}">{{project.id}}</option>
+            </select>
         </div>
 
         <div class="w-full flex justify-between items-center flex-wrap mt-4">