Major fixes and imporvments

osinaweb/osinacore/admin.py

@@ -30,4 +30,6 @@ admin.site.register(Milestone)
 admin.site.register(Epic)
 admin.site.register(Note)
 admin.site.register(Task)
+admin.site.register(Status)
+
 

osinaweb/osinacore/migrations/0024_task_task_id.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.5 on 2023-09-18 18:43
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('osinacore', '0023_task_assigned_to'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='task',
+            name='task_id',
+            field=models.CharField(blank=True, max_length=20, null=True),
+        ),
+    ]

osinaweb/osinacore/migrations/0025_status.py

@@ -0,0 +1,26 @@
+# Generated by Django 4.2.5 on 2023-09-18 19:42
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ('osinacore', '0024_task_task_id'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Status',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('text', models.TextField(blank=True)),
+                ('date', models.CharField(max_length=40)),
+                ('time', models.CharField(max_length=40)),
+                ('user', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+        ),
+    ]

osinaweb/osinacore/migrations/0026_remove_status_user_status_staff.py

@@ -0,0 +1,23 @@
+# Generated by Django 4.2.5 on 2023-09-18 20:11
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('osinacore', '0025_status'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='status',
+            name='user',
+        ),
+        migrations.AddField(
+            model_name='status',
+            name='staff',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='staff', to='osinacore.customerprofile'),
+        ),
+    ]

osinaweb/osinacore/migrations/0027_alter_status_staff.py

@@ -0,0 +1,19 @@
+# Generated by Django 4.2.5 on 2023-09-18 20:13
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('osinacore', '0026_remove_status_user_status_staff'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='status',
+            name='staff',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='staff', to='osinacore.staffprofile'),
+        ),
+    ]

osinaweb/osinacore/models.py

@@ -2,6 +2,8 @@ from django.db import models
 from django.contrib.auth.models import User
 from colorfield.fields import ColorField
 from datetime import datetime
+from django.db.models import Max
+
 
 # Create your models here.
 
@@ -191,4 +193,31 @@ class Task(models.Model):
     description = models.TextField()
     start_date = models.CharField(max_length=200)
     end_date = models.CharField(max_length=200)
-    assigned_to =  models.ForeignKey(StaffProfile, on_delete=models.CASCADE, null=True)
+    assigned_to =  models.ForeignKey(StaffProfile, on_delete=models.CASCADE, null=True)
+    task_id = models.CharField(max_length=20, null=True, blank=True)  
+    def save(self, *args, **kwargs):
+        if not self.task_id:
+            # Get the last two digits of the current year
+            current_year = str(datetime.now().year)[-2:]
+            # Find the maximum project ID in the database and increment it
+            max_id = Task.objects.aggregate(models.Max('task_id'))['task_id__max']
+            new_id = str(int(max_id[-4:]) + 1).zfill(4) if max_id else '0001'  # If no existing records, start with '0001'
+            self.task_id = 'T' + current_year + new_id  # Add 'p' prefix
+        super(Task, self).save(*args, **kwargs)
+
+    def formatted_start_date(self):
+        # Assuming start_date is stored as "day-month-year"
+        parts = self.start_date.split('-')
+        return f"{parts[2]}-{parts[1]}-{parts[0]}"
+
+    def formatted_end_date(self):
+        # Assuming end_date is stored as "day-month-year"
+        parts = self.end_date.split('-')
+        return f"{parts[2]}-{parts[1]}-{parts[0]}"
+
+
+class Status(models.Model):
+    text = models.TextField(blank=True)
+    date = models.CharField(max_length=40)
+    time = models.CharField(max_length=40)
+    staff = models.ForeignKey(StaffProfile, on_delete=models.CASCADE, null=True,blank=True, related_name='staff')

osinaweb/osinacore/views.py

@@ -7,6 +7,7 @@ from .forms import *
 from django.utils import timezone
 from django.urls import reverse
 from django.http import HttpResponse
+from django.db.models import Q
 
 
 # Pages views
@@ -42,18 +43,34 @@ def signout(request):
 
 @login_required
 def home(request, *args, **kwargs):
-
     notes = Note.objects.filter(user=request.user).order_by('-date')[:6]
-    
-    context = {
+    recent_note = Note.objects.last()
+
+    if request.user.is_superuser:
+        # Superadmin can see the last 8 tasks for all users
+        tasks = Task.objects.filter(Q(status='Open') | Q(status='Working On')).order_by('-id')[:8]
+        open_task_count = Task.objects.filter(status='Open').count()
+        working_on_task_count = Task.objects.filter(status='Working On').count()
+        total_tasks = open_task_count + working_on_task_count
+    else:
+        # Non-superadmin user can only see their assigned tasks
+        tasks = Task.objects.filter(Q(assigned_to=request.user.staffprofile) & (Q(status='Open') | Q(status='Working On')))
+        open_task_count = Task.objects.filter(assigned_to=request.user.staffprofile,status='Open').count()
+        working_on_task_count = Task.objects.filter(assigned_to=request.user.staffprofile, status='Working On').count()
+        total_tasks = open_task_count + working_on_task_count
 
-    'notes' : notes,
-       
+
+    context = {
+        'notes': notes,
+        'recent_note': recent_note,
+        'tasks': tasks,
+        'total_tasks' :total_tasks,
 
     }
     return render(request, 'index.html', context)
 
 
+
 @login_required
 def my_projects(request, *args, **kwargs):
     user = request.user
@@ -98,14 +115,23 @@ def customers(request, *args, **kwargs):
 def detailed_project(request, project_id):
     project = get_object_or_404(Project, project_id=project_id)
     epics = Epic.objects.filter(project=project)
-    
-    context = {
 
-    'project' : project,
-    'epics' : epics
-       
+    selected_epic_id = request.GET.get('epic_id')  # Get the selected epic_id from the query parameters
 
+    if selected_epic_id:
+        selected_epic = get_object_or_404(Epic, id=selected_epic_id)
+        related_tasks = Task.objects.filter(epic=selected_epic)
+    else:
+        selected_epic = None
+        related_tasks = []
+
+    context = {
+        'project': project,
+        'epics': epics,
+        'selected_epic': selected_epic,  # Pass the selected epic to the template
+        'related_tasks': related_tasks,  # Pass the related tasks to the template
     }
+
     return render(request, 'project-details.html', context)
 
 
@@ -113,10 +139,12 @@ def detailed_project(request, project_id):
 def createtask_project(request, project_id):
     project = get_object_or_404(Project, project_id=project_id)
     epics_of_my_project = Epic.objects.filter(project=project)
+    staffs = StaffProfile.objects.all().order_by('-id')
     context = {  
 
     'project' : project,
     'epics_of_my_project' : epics_of_my_project,
+    'staffs' : staffs,
 
     }
     return render(request, 'createtask-project.html', context)
@@ -234,6 +262,29 @@ def users(request):
 
 
 
+@login_required
+def detailed_task(request, task_id):
+    task = get_object_or_404(Task, task_id=task_id)
+
+    context = {
+        'task': task,
+
+    }
+
+    return render(request, 'task-details.html', context)
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -330,7 +381,6 @@ def save_note(request):
 
     return render(request, 'addnote-modal.html') 
 
-    
 
 
 @login_required
@@ -424,6 +474,7 @@ def save_task(request):
         status = request.POST.get('status')
         project_id = request.POST.get('project')
         epic_id = request.POST.get('epic')
+        assigned_to_id = request.POST.get('assigned_to')
         extra = request.POST.get('extra') 
         description = request.POST.get('description')   
         start_date = request.POST.get('start_date')   
@@ -443,6 +494,15 @@ def save_task(request):
             # You might want to display an error message or redirect to an appropriate page.
             pass
 
+        try:
+   
+            assigned_to = StaffProfile.objects.get(id=assigned_to_id)
+        except StaffProfile.DoesNotExist:
+            # Handle the case where the StaffProfile with the provided ID doesn't exist
+            # You might want to display an error message or redirect to an appropriate page.
+            pass
+
+
         # Create the Task object with the Project and Epic instances
         task = Task(
             name=name,
@@ -452,7 +512,9 @@ def save_task(request):
             extra=extra,
             description=description,
             start_date=start_date,
-            end_date=end_date
+            end_date=end_date,
+            assigned_to = assigned_to
+
         )
 
         # Save the Task object to the database
@@ -527,3 +589,30 @@ def save_customer(request):
 
     return redirect('customers')
 
+
+@login_required
+def save_status(request):
+    if request.method == 'POST':
+        text = request.POST.get('text')
+        current_datetime = timezone.now()
+        date = current_datetime.date() 
+        time = current_datetime.hour  
+
+        try:
+            staff_profile = StaffProfile.objects.get(user=request.user)
+        except StaffProfile.DoesNotExist:
+            # Handle the case where a StaffProfile does not exist for the user
+            staff_profile = None
+
+        status = Status(
+            text=text,
+            staff=staff_profile,
+            date=date,
+            time = time,
+        )
+        status.save()
+
+        # Reload the parent page
+        return HttpResponse('<script>window.top.location.reload();</script>')
+
+    return render(request, 'addstatus-modal.html') 

osinaweb/osinaweb/urls.py

@@ -41,6 +41,7 @@ urlpatterns = [
     path('createtask/', views.create_task, name='createtask'),
     path('createtask/<str:project_id>/', views.createtask_project, name='createtaskproject'),
     path('createtaskepic/', views.createtask_epic, name='createtaskepic'),
+    path('taskdetails/<str:task_id>/', views.detailed_task, name='detailed-task'),
 
 
     # Modals urls
@@ -62,4 +63,5 @@ urlpatterns = [
     path('save_task/', views.save_task, name='save_task'),
     path('save_business/', views.save_business, name='save_business'),
     path('save_customer/', views.save_customer, name='save_customer'),
+    path('save_status/', views.save_status, name='save_status'),
 ]

osinaweb/templates/addpoint-modal.html

@@ -36,7 +36,7 @@
 
             <button
                 class="w-fit bg-blue-500 border border-blue-500 rounded-md text-white text-xl px-3 py-2 hover:bg-white hover:text-blue-500">Save
-                Notes</button>
+                Point(s)</button>
         </div>
 
         <div class="w-full flex flex-col" id="allPointsContainer">

osinaweb/templates/addstatus-modal.html

@@ -14,11 +14,12 @@
 </head>
 
 <body>
-    <div id="hiddenContent">
+    <form id="hiddenContent" method="POST" action="{% url 'save_status' %}">
+        {% csrf_token %}
         <h1 class="text-slate-800 text-2xl font-semibold text-center">Add Status</h1>
 
         <div class="w-full flex justify-center items-center">
-            <input type="text" placeholder="Type your status here..."
+            <input required name="text" type="text" placeholder="Type your status here..."
                 class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4">
         </div>
 
@@ -29,7 +30,7 @@
 
         <div class="w-full hidden"
             id="relatedTaskContainer">
-            <select required id=""
+            <select  id=""
             class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
             <option value="" selected disabled>Choose Task</option>
             <option>Task 1</option>
@@ -55,10 +56,10 @@
         </script>
 
         <div class="w-full flex justify-center items-center mt-4">
-            <button
+            <button type="submit"
                 class="w-fit bg-blue-500 border border-blue-500 rounded-md text-white text-xl px-3 py-2 hover:bg-white hover:text-blue-500">Add</button>
         </div>
-    </div>
+    </form>
 </body>
 
 </html>

osinaweb/templates/createtask-project.html

@@ -46,11 +46,12 @@
                 <option value="False">No</option>
             </select>
 
-            <select required id=""
+            <select name="assigned_to" required id=""
                 class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
                 <option value="" selected disabled>Assigned To</option>
-                <option value="Pending">Nataly</option>
-                <option value="Active">Salim</option>
+                {% for staff in staffs %}
+                <option value="{{staff.id}}">{{staff.first_name}} {{staff.last_name}}</option>
+                {% endfor %}
             </select>
 
             <textarea required name="description" type="text" placeholder="Task Description" rows="5" cols="5"

osinaweb/templates/deletetask-modal.html

@@ -18,9 +18,7 @@
 
         <div class="w-full flex justify-center items-center mt-4 gap-5">
             <button
-                class="w-[70px] bg-blue-500 border border-blue-500 rounded-md text-white text-xl px-3 py-2 hover:bg-white hover:text-blue-500">Yes</button>
-            <button
-                class="w-[70px] bg-red-500 border border-red-500 rounded-md text-white text-xl px-3 py-2 hover:bg-white hover:text-red-500" id="noDeleteTaskBttn">no</button>
+                class="w-[100px] bg-red-500 border border-red-500 rounded-md text-white text-xl px-3 py-2 hover:bg-white hover:text-red-500" id="noDeleteTaskBttn">Delete</button>
         </div>
     </div>
 </body>

osinaweb/templates/index.html

@@ -7,7 +7,7 @@
         <div class="w-full flex justify-between items-center">
             <div>
                 <p class="text-base text-gray-500">Recent Note:</p>
-                <p class="text-slate-700">--</p>
+                <p class="text-slate-700">{{recent_note.text}}</p>
             </div>
             <div class="flex justify-end items-center gap-4">
                 <button
@@ -68,115 +68,31 @@
         </div>
 
         <!-- TASKS TABLE -->
+        {% for task in tasks %}
         <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mt-5">
             <div class="w-full bg-white h-fit rounded-md border border-gray-300">
                 <!-- TABLE HEADER -->
                 <div class="w-full flex h-[70px] rounded-t-md">
+                    {% if task.status == 'Open' %}
                     <div
                         class="w-[55%] flex justify-center items-center border-r border-b border-gray-300 bg-green-700 rounded-tl-md">
-                        <p class="text-xl text-white">Task Name</p>
+                        <p class="text-xl text-white">{{task.name}}</p>
                     </div>
-                    <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
-                        <p class="text-xl text-slate-700">Open</p>
-                    </div>
-                    <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
-                        <p class="text-xl text-slate-700">1/2/2021</p>
-                    </div>
-                    <div class="w-[15%] flex justify-center items-center border-b border-gray-300">
-                        <p class="text-xl text-slate-700">1/2/2022</p>
-                    </div>
-                </div>
-
-                <!-- TABLE BODY -->
-                <div class="w-full h-fit flex">
-                    <!-- LEFT SIDE OF TABLE BODY -->
-                    <div class="w-[55%] h-fit bg-white p-3 rounded-bl-md">
-                        <!-- 1st row -->
-                        <div class="w-full flex flex-col gap-2">
-                            <div class="flex justify-start items-center gap-2">
-                                <p class="text-gray-400  text-base">Project:</p>
-                                <p class="text-slate-700 text-base">Osina Project</p>
-                            </div>
-
-                            <div class="flex justify-start items-center gap-2">
-                                <p class="text-gray-400  text-base">Epic:</p>
-                                <p class="text-slate-700 text-base">epic</p>
-                            </div>
-
-                            <div class="flex justify-start items-center gap-2">
-                                <p class="text-gray-400  text-base">Assigned To:</p>
-                                <p class="text-slate-700 text-base">Nataly</p>
-                            </div>
-
-                            <div class="flex justify-start items-center gap-2">
-                                <p class="text-gray-400  text-base">Files:</p>
-                                <p class="text-slate-700 text-base">Documentation.pdf, Project.doc</p>
-                            </div>
-                            <div class="flex justify-start items-center gap-2">
-                                <p class="text-gray-400  text-base">Tags:</p>
-                                <p class="text-slate-700 text-base">Live Streaming, Media Streaming</p>
-                            </div>
-
-                            <div class="flex justify-start items-center gap-2">
-                                <p class="text-gray-400  text-base">Extra:</p>
-                                <p class="text-slate-700 text-base">Yes</p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- RIGHT SIDE OF TABLE BODY -->
-                    <div class="w-[45%] h-fit bg-white flex flex-wrap justify-start rounded-br-md">
-                        <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Close</button>
-                        <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
-                            id="updateStatusButton" data-modal-url="{% url 'updatestatus' %}">Update
-                            Status</button>
-                        <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
-                            id="addTimeButton" data-modal-url="{% url 'addtime' %}">Add
-                            Time</button>
-                        <button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white"
-                            id="deleteTaskButton" data-modal-url="{% url 'deletetask' %}">Delete</button>
-                        <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-blue-500 text-white">Update</button>
-                        <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
-                            id="showPointsButton" data-modal-url="{% url 'showpoints' %}">Show
-                            Points</button>
-                        <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
-                            id="addPointButton" data-modal-url="{% url 'addpoint' %}">Add
-                            Point</button>
-                        <a href="./task-details.html" class="w-[33.33%]">
-                            <button
-                                class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
-                        </a>
-                        <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md"
-                            id="timelineButton" data-modal-url="{% url 'timeline' %}">Timeline</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- TASKS TABLE -->
-        <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mt-5">
-            <div class="w-full bg-white h-fit rounded-md border border-gray-300">
-                <!-- TABLE HEADER -->
-                <div class="w-full flex h-[70px] rounded-t-md">
+                    {% endif %}
+                    {% if task.status == 'Working On' %}
                     <div
-                        class="w-[55%] flex justify-center items-center border-r border-b border-gray-300 bg-green-700 rounded-tl-md">
-                        <p class="text-xl text-white">Task Name</p>
+                        class="w-[55%] flex justify-center items-center border-r border-b border-gray-300 bg-yellow-400 rounded-tl-md">
+                        <p class="text-xl text-white">{{task.name}}</p>
                     </div>
+                    {% endif %}
                     <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
-                        <p class="text-xl text-slate-700">Open</p>
+                        <p class="text-xl text-slate-700">{{task.status}}</p>
                     </div>
                     <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
-                        <p class="text-xl text-slate-700">1/2/2021</p>
+                        <p class="text-xl text-slate-700">{{task.formatted_start_date}}</p>
                     </div>
                     <div class="w-[15%] flex justify-center items-center border-b border-gray-300">
-                        <p class="text-xl text-slate-700">1/2/2022</p>
+                        <p class="text-xl text-slate-700">{{task.formatted_end_date}}</p>
                     </div>
                 </div>
 
@@ -188,17 +104,17 @@
                         <div class="w-full flex flex-col gap-2">
                             <div class="flex justify-start items-center gap-2">
                                 <p class="text-gray-400  text-base">Project:</p>
-                                <p class="text-slate-700 text-base">Osina Project</p>
+                                <p class="text-slate-700 text-base">{{task.project.name}}</p>
                             </div>
 
                             <div class="flex justify-start items-center gap-2">
                                 <p class="text-gray-400  text-base">Epic:</p>
-                                <p class="text-slate-700 text-base">epic</p>
+                                <p class="text-slate-700 text-base">{{task.epic.title}}</p>
                             </div>
 
                             <div class="flex justify-start items-center gap-2">
                                 <p class="text-gray-400  text-base">Assigned To:</p>
-                                <p class="text-slate-700 text-base">Nataly</p>
+                                <p class="text-slate-700 text-base">{{task.assigned_to.first_name}} {{task.assigned_to.last_name}}</p>
                             </div>
 
                             <div class="flex justify-start items-center gap-2">
@@ -212,7 +128,7 @@
 
                             <div class="flex justify-start items-center gap-2">
                                 <p class="text-gray-400  text-base">Extra:</p>
-                                <p class="text-slate-700 text-base">Yes</p>
+                                <p class="text-slate-700 text-base">{{task.extra}}</p>
                             </div>
                         </div>
                     </div>
@@ -241,7 +157,7 @@
                             class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
                             id="addPointButton" data-modal-url="{% url 'addpoint' %}">Add
                             Point</button>
-                        <a href="./task-details.html" class="w-[33.33%]">
+                        <a href="{% url 'detailed-task' task.task_id %}" class="w-[33.33%]">
                             <button
                                 class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
                         </a>
@@ -252,192 +168,8 @@
                 </div>
             </div>
         </div>
+        {% endfor %}
 
-        <!-- TASKS TABLE -->
-        <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mt-5">
-            <div class="w-full bg-white h-fit rounded-md border border-gray-300">
-                <!-- TABLE HEADER -->
-                <div class="w-full flex h-[70px] rounded-t-md">
-                    <div
-                        class="w-[55%] flex justify-center items-center border-r border-b border-gray-300 bg-green-700 rounded-tl-md">
-                        <p class="text-xl text-white">Task Name</p>
-                    </div>
-                    <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
-                        <p class="text-xl text-slate-700">Open</p>
-                    </div>
-                    <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
-                        <p class="text-xl text-slate-700">1/2/2021</p>
-                    </div>
-                    <div class="w-[15%] flex justify-center items-center border-b border-gray-300">
-                        <p class="text-xl text-slate-700">1/2/2022</p>
-                    </div>
-                </div>
-
-                <!-- TABLE BODY -->
-                <div class="w-full h-fit flex">
-                    <!-- LEFT SIDE OF TABLE BODY -->
-                    <div class="w-[55%] h-fit bg-white p-3 rounded-bl-md">
-                        <!-- 1st row -->
-                        <div class="w-full flex flex-col gap-2">
-                            <div class="flex justify-start items-center gap-2">
-                                <p class="text-gray-400  text-base">Project:</p>
-                                <p class="text-slate-700 text-base">Osina Project</p>
-                            </div>
-
-                            <div class="flex justify-start items-center gap-2">
-                                <p class="text-gray-400  text-base">Epic:</p>
-                                <p class="text-slate-700 text-base">epic</p>
-                            </div>
-
-                            <div class="flex justify-start items-center gap-2">
-                                <p class="text-gray-400  text-base">Assigned To:</p>
-                                <p class="text-slate-700 text-base">Nataly</p>
-                            </div>
-
-                            <div class="flex justify-start items-center gap-2">
-                                <p class="text-gray-400  text-base">Files:</p>
-                                <p class="text-slate-700 text-base">Documentation.pdf, Project.doc</p>
-                            </div>
-                            <div class="flex justify-start items-center gap-2">
-                                <p class="text-gray-400  text-base">Tags:</p>
-                                <p class="text-slate-700 text-base">Live Streaming, Media Streaming</p>
-                            </div>
-
-                            <div class="flex justify-start items-center gap-2">
-                                <p class="text-gray-400  text-base">Extra:</p>
-                                <p class="text-slate-700 text-base">Yes</p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- RIGHT SIDE OF TABLE BODY -->
-                    <div class="w-[45%] h-fit bg-white flex flex-wrap justify-start rounded-br-md">
-                        <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Close</button>
-                        <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
-                            id="updateStatusButton" data-modal-url="{% url 'updatestatus' %}">Update
-                            Status</button>
-                        <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
-                            id="addTimeButton" data-modal-url="{% url 'addtime' %}">Add
-                            Time</button>
-                        <button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white"
-                            id="deleteTaskButton" data-modal-url="{% url 'deletetask' %}">Delete</button>
-                        <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-blue-500 text-white">Update</button>
-                        <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
-                            id="showPointsButton" data-modal-url="{% url 'showpoints' %}">Show
-                            Points</button>
-                        <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
-                            id="addPointButton" data-modal-url="{% url 'addpoint' %}">Add
-                            Point</button>
-                        <a href="./task-details.html" class="w-[33.33%]">
-                            <button
-                                class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
-                        </a>
-                        <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md"
-                            id="timelineButton" data-modal-url="{% url 'timeline' %}">Timeline</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- TASKS TABLE -->
-        <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mt-5">
-            <div class="w-full bg-white h-fit rounded-md border border-gray-300">
-                <!-- TABLE HEADER -->
-                <div class="w-full flex h-[70px] rounded-t-md">
-                    <div
-                        class="w-[55%] flex justify-center items-center border-r border-b border-gray-300 bg-green-700 rounded-tl-md">
-                        <p class="text-xl text-white">Task Name</p>
-                    </div>
-                    <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
-                        <p class="text-xl text-slate-700">Open</p>
-                    </div>
-                    <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
-                        <p class="text-xl text-slate-700">1/2/2021</p>
-                    </div>
-                    <div class="w-[15%] flex justify-center items-center border-b border-gray-300">
-                        <p class="text-xl text-slate-700">1/2/2022</p>
-                    </div>
-                </div>
-
-                <!-- TABLE BODY -->
-                <div class="w-full h-fit flex">
-                    <!-- LEFT SIDE OF TABLE BODY -->
-                    <div class="w-[55%] h-fit bg-white p-3 rounded-bl-md">
-                        <!-- 1st row -->
-                        <div class="w-full flex flex-col gap-2">
-                            <div class="flex justify-start items-center gap-2">
-                                <p class="text-gray-400  text-base">Project:</p>
-                                <p class="text-slate-700 text-base">Osina Project</p>
-                            </div>
-
-                            <div class="flex justify-start items-center gap-2">
-                                <p class="text-gray-400  text-base">Epic:</p>
-                                <p class="text-slate-700 text-base">epic</p>
-                            </div>
-
-                            <div class="flex justify-start items-center gap-2">
-                                <p class="text-gray-400  text-base">Assigned To:</p>
-                                <p class="text-slate-700 text-base">Nataly</p>
-                            </div>
-
-                            <div class="flex justify-start items-center gap-2">
-                                <p class="text-gray-400  text-base">Files:</p>
-                                <p class="text-slate-700 text-base">Documentation.pdf, Project.doc</p>
-                            </div>
-                            <div class="flex justify-start items-center gap-2">
-                                <p class="text-gray-400  text-base">Tags:</p>
-                                <p class="text-slate-700 text-base">Live Streaming, Media Streaming</p>
-                            </div>
-
-                            <div class="flex justify-start items-center gap-2">
-                                <p class="text-gray-400  text-base">Extra:</p>
-                                <p class="text-slate-700 text-base">Yes</p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- RIGHT SIDE OF TABLE BODY -->
-                    <div class="w-[45%] h-fit bg-white flex flex-wrap justify-start rounded-br-md">
-                        <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Close</button>
-                        <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
-                            id="updateStatusButton" data-modal-url="{% url 'updatestatus' %}">Update
-                            Status</button>
-                        <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
-                            id="addTimeButton" data-modal-url="{% url 'addtime' %}">Add
-                            Time</button>
-                        <button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white"
-                            id="deleteTaskButton" data-modal-url="{% url 'deletetask' %}">Delete</button>
-                        <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-blue-500 text-white">Update</button>
-                        <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
-                            id="showPointsButton" data-modal-url="{% url 'showpoints' %}">Show
-                            Points</button>
-                        <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
-                            id="addPointButton" data-modal-url="{% url 'addpoint' %}">Add
-                            Point</button>
-                        <a href="./task-details.html" class="w-[33.33%]">
-                            <button
-                                class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
-                        </a>
-                        <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md"
-                            id="timelineButton" data-modal-url="{% url 'timeline' %}">Timeline</button>
-                    </div>
-                </div>
-            </div>
-        </div>
     </div>
 
     <!-- RIGHT SIDE / USERS ACTIVITY -->
@@ -445,6 +177,8 @@
         <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
         <div class="w-full h-fit mt-2">
 
+
+            {% for latest in latest_statuses_by_user %}
             <!-- 1ST ROW -->
             <div class="w-full flex flex-col py-3">
                 <div class="w-full flex flex-col justify-center items-start gap-2">
@@ -479,111 +213,9 @@
                     </div>
                 </div>
             </div>
+            {% endfor %}
 
-            <!-- 2NT ROW -->
-            <div class="w-full flex flex-col py-3">
-                <div class="w-full flex flex-col justify-center items-start gap-2">
-                    <div class="w-full flex justify-between items-center gap-2">
-                        <div class="flex justify-start gap-2">
-                            <div class="w-[45px] h-[45px] rounded-full">
-                                <img src='{% static "images/avatar2.png" %}' alt="user profile"
-                                    class="w-full h-full object-cover">
-                            </div>
-                            <div class="flex flex-col">
-                                <h1 class="text-sm text-slate-700 font-semibold">Salim</h1>
-                                <p class="text-sm text-gray-500">11:30 AM</p>
-                            </div>
-                        </div>
-                        <div class="cursor-pointer">
-                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
-                        </div>
-                    </div>
-
-                    <!-- Status -->
-                    <div class="w-full">
-                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
-                    </div>
-
-                    <!-- Add comment section -->
-                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
-                        <input type="text" placeholder="Add Comment..."
-                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
-                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
-                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 3RD ROW -->
-            <div class="w-full flex flex-col py-3">
-                <div class="w-full flex flex-col justify-center items-start gap-2">
-                    <div class="w-full flex justify-between items-center gap-2">
-                        <div class="flex justify-start gap-2">
-                            <div class="w-[45px] h-[45px] rounded-full">
-                                <img src='{% static "images/avatar3.png" %}' alt="user profile"
-                                    class="w-full h-full object-cover">
-                            </div>
-                            <div class="flex flex-col">
-                                <h1 class="text-sm text-slate-700 font-semibold">Emile</h1>
-                                <p class="text-sm text-gray-500">11:30 AM</p>
-                            </div>
-                        </div>
-                        <div class="cursor-pointer">
-                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
-                        </div>
-                    </div>
-
-                    <!-- Status -->
-                    <div class="w-full">
-                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
-                    </div>
-
-                    <!-- Add comment section -->
-                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
-                        <input type="text" placeholder="Add Comment..."
-                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
-                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
-                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 4TH ROW -->
-            <div class="w-full flex flex-col py-3">
-                <div class="w-full flex flex-col justify-center items-start gap-2">
-                    <div class="w-full flex justify-between items-center gap-2">
-                        <div class="flex justify-start gap-2">
-                            <div class="w-[45px] h-[45px] rounded-full">
-                                <img src='{% static "images/avatar.svg" %}' alt="user profile"
-                                    class="w-full h-full object-cover">
-                            </div>
-                            <div class="flex flex-col">
-                                <h1 class="text-sm text-slate-700 font-semibold">Nataly</h1>
-                                <p class="text-sm text-gray-500">11:30 AM</p>
-                            </div>
-                        </div>
-                        <div class="cursor-pointer">
-                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
-                        </div>
-                    </div>
-
-                    <!-- Status -->
-                    <div class="w-full">
-                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
-                    </div>
 
-                    <!-- Add comment section -->
-                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
-                        <input type="text" placeholder="Add Comment..."
-                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
-                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
-                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
         </div>
     </div>
 </div>

osinaweb/templates/main.html

@@ -213,7 +213,7 @@
                         </div>
                         <div
                             class="w-[60px] h-[60px] bg-white border-2 rounded-full border-green-700 flex justify-center items-center">
-                            <p class="text-green-700 text-xl font-semibold">5</p>
+                            <p class="text-green-700 text-xl font-semibold">{{total_tasks}}</p>
                         </div>
                     </div>
                 </div>

osinaweb/templates/project-details.html

@@ -311,13 +311,15 @@
             <div class="w-full mt-5">
                 <div class="w-full bg-slate-300 rounded-md shadow-md h-fit p-5 flex justify-between items-center">
                     <div>
-                        <select id="epicSelect"
+                        <form method="GET" action="{% url 'detailed-project' project.project_id %}">
+                        <select id="epicSelect" name="epic_id"
                             class="w-[250px] rounded-md border border-gray-300 p-3 outline-none text-gray-500 cursor-pointer">
                             <option selected disabled>EPICS</option>
                             {% for epic in epics %}
-                            <option data-start-date="{{ epic.start_date }}" data-end-date="{{ epic.end_date }}">{{epic.title}}</option>
+                            <option  value="{{ epic.id }}" data-start-date="{{ epic.start_date }}" data-end-date="{{ epic.end_date }}">{{epic.title}}</option>
                            {% endfor %}
                         </select>
+                       </form>
                     </div>
                     <div class="w-full flex justify-end gap-[3%] pl-5">
                         <div class="w-[50%] justify-start items-center gap-2 hidden" id="epicDetails">
@@ -370,25 +372,25 @@
                 <div class="w-full p-3 bg-white rounded-md shadow-lg">
                     <p class="text-gray-500 text-xl">Related Tasks:</p>
                     <!-- TASK 1 -->
-
-                    {% for task in tasks %}
+                    {% for task in related_tasks %}
                     <div class="w-full bg-white h-fit rounded-md border border-gray-300 mt-3">
                         <!-- TABLE HEADER -->
                         <div class="w-full flex h-[70px] rounded-t-md">
                             <div
                                 class="w-[55%] flex justify-center items-center border-r border-b border-gray-300 bg-green-700 rounded-tl-md">
-                                <p class="text-xl text-white">Task Name</p>
+                                <p class="text-xl text-white">{{task.name}}</p>
                             </div>
                             <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
-                                <p class="text-xl text-slate-700">Open</p>
+                                <p class="text-xl text-slate-700">{{task.status}}</p>
                             </div>
                             <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
-                                <p class="text-xl text-slate-700">1/2/2021</p>
+                                <p class="text-xl text-slate-700">{{task.start_date}}</p>
                             </div>
                             <div class="w-[15%] flex justify-center items-center border-b border-gray-300">
-                                <p class="text-xl text-slate-700">1/2/2022</p>
+                                <p class="text-xl text-slate-700">{{task.end_date}}</p>
                             </div>
                         </div>
+                    
 
                         <!-- TABLE BODY -->
                         <div class="w-full h-fit flex">
@@ -465,7 +467,7 @@
                         </div>
                     </div>
                     {% endfor %}
-
+                    
                 </div>
             </div>
 

osinaweb/templates/task-details.html

@@ -1,225 +1,6 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Task Detail</title>
-
-    <link href="output.css" rel="stylesheet">
-    <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>
-    <div class="w-full flex">
-        <!-- FIXED SIDE NAVBAR -->
-        <div class="fixed h-screen w-[300px] bg-slate-700 px-5 py-9" id="fixedSideHeader">
-            <h1 class="text-white text-4xl text-center">OSINA</h1>
-            <!-- Menu Items -->
-            <div class="w-full h-fit flex flex-col justify-center items-center mt-14">
-                <div class="mb-5 w-full relative">
-                    <input type="text" placeholder="Search..."
-                        class="border border-gray-500 rounded-md py-2 px-3 bg-transparent w-full outline-none text-white">
-                    <i class="fa fa-search absolute right-3 top-3 text-gray-500" style="font-size: 20px;"></i>
-                </div>
-                <div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
-                    <i class="fa fa-home" style="font-size: 22px; color: white;"></i>
-                    <p class="text-white text-xl">Home</p>
-                </div>
-
-                <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">
-                        <i class="fa fa-user" style="font-size: 22px; color: white;"></i>
-                        <p class="text-white text-xl">Sales</p>
-                    </div>
-                    <div>
-                        <i class="fa fa-angle-down" style="font-size: 25px; color: white;"></i>
-                    </div>
-                </div>
-
-                <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">
-                        <i class="fa fa-list" style="font-size: 22px; color: white;"></i>
-                        <p class="text-white text-xl">Accounts</p>
-                    </div>
-                    <div>
-                        <i class="fa fa-angle-down" style="font-size: 25px; color: white;"></i>
-                    </div>
-                </div>
-
-                <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">
-                        <i class="fas fa-comment-alt" style="font-size: 22px; color: white;"></i>
-                        <p class="text-white text-xl">Support</p>
-                    </div>
-                    <div>
-                        <i class="fa fa-angle-down" style="font-size: 25px; color: white;"></i>
-                    </div>
-                </div>
-
-                <div class="w-full">
-                    <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">
-                            <i class="fa fa-tasks" style="font-size: 22px; color: white;"></i>
-                            <p class="text-white text-xl">My Work</p>
-                        </div>
-                        <div>
-                            <i class="angleDown fa fa-angle-down" style="font-size: 25px; color: white;"></i>
-                            <i class="angleUp fa fa-angle-up" style="font-size: 25px; color: white; display: none;"></i>
-                        </div>
-                    </div>
-
-                    <div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
-                        <a href="projects.html">
-                            <div
-                                class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
-                                <i class='fas fa-project-diagram' style="font-size: 16px;"></i>
-                                <p class="text-white">My Projects</p>
-                            </div>
-                        </a>
-
-                        <a href="tasks.html">
-                            <div
-                                class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px]">
-                                <i class='fas fa-tasks' style="font-size: 19px;"></i>
-                                <p class="text-white">My Tasks</p>
-                            </div>
-                        </a>
-
-                        <a href="tickets.html">
-                            <div class="w-full flex justify-start items-center gap-3 text-white py-2 text-[18px]">
-                                <i class='fas fa-ticket-alt'></i>
-                                <p class="text-white">My Tickets</p>
-                            </div>
-                        </a>
-                    </div>
-                </div>
-
-                <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">
-                        <i class="fa fa-euro" style="font-size: 22px; color: white;"></i>
-                        <p class="text-white text-xl">Billing</p>
-                    </div>
-                    <div>
-                        <i class="fa fa-angle-down" style="font-size: 25px; color: white;"></i>
-                    </div>
-                </div>
-
-                <div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
-                    <i class="fa fa-check-square" style="font-size: 22px; color: white;"></i>
-                    <p class="text-white text-xl">Activity</p>
-                </div>
-
-                <div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
-                    <i class="fa fa-power-off" style="font-size: 22px; color: white;"></i>
-                    <p class="text-white text-xl">Logout</p>
-                </div>
-            </div>
-        </div>
-
-        <!-- SCROLL PART -->
-        <div class="flex-1 ml-[300px] h-fit bg-gray-200" id="scrollPart">
-            <!-- TOP HEADER -->
-            <div class="w-full h-[100px] bg-white shadow-md px-10 py-5 flex justify-between items-center">
-                <div class="w-fit flex justify-center items-center gap-10">
-                    <div class="w-fit flex flex-col gap-2 cursor-pointer" id="burgerMenuButton">
-                        <div class="burgerMenuLine w-[25px] h-[2px] bg-slate-800 duration-300"></div>
-                        <div class="burgerMenuLine w-[25px] h-[2px] bg-slate-800 duration-300"></div>
-                        <div class="burgerMenuLine w-[25px] h-[2px] bg-slate-800 duration-300"></div>
-                    </div>
-
-                    <div class="flex justify-start items-center gap-5">
-                        <div>
-                            <p class="text-sm text-gray-500">Your last update: 2023-08-31 08:13:31, 32 mins ago</p>
-                            <p class="text-sm text-gray-500">Recent Status: <span
-                                    class="text-slate-700 font-semibold">Working on Osina</span></p>
-                        </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 justify-center items-center shadow-md"
-                            id="addStatusButton">
-                            <i class="fa fa-plus"></i>
-                        </button>
-                    </div>
-                </div>
-
-                <div>
-                    <div class="w-fit flex justify-between items-center gap-3">
-                        <div class="flex justify-center items-center gap-2">
-                            <p class="text-gray-400">Nataly Abi Wajeh</p>
-                            <i class="fa fa-angle-down" style="color: grey;"></i>
-                        </div>
-
-                        <div class="w-[50px] h-[50px] bg-slate-600 rounded-full">
-                            <img src="../images/avatar.svg" alt="user-image"
-                                class="w-full h-full object-cover rounded-full">
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- MODULES SECTION -->
-            <div class="w-full h-fit flex justify-between items-center px-10 py-5">
-                <div class="w-[23%] h-[150px] bg-white shadow-md rounded-md p-5">
-                    <div class="w-full h-full flex flex-col justify-between items-center">
-                        <div class="w-full flex justify-between items-center">
-                            <p class="text-[22px] text-slate-800 font-bold">TASKS</p>
-                            <i class="fa fa-tasks" style="font-size: 30px; color: green;"></i>
-                        </div>
-                        <div
-                            class="w-[60px] h-[60px] bg-white border-2 rounded-full border-green-700 flex justify-center items-center">
-                            <p class="text-green-700 text-xl font-semibold">5</p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="w-[23%] h-[150px] bg-white shadow-md rounded-md p-5">
-                    <div class="w-full h-full flex flex-col justify-between items-center">
-                        <div class="w-full flex justify-between items-center">
-                            <p class="text-[22px] text-slate-800 font-bold">NOTIFICATIONS</p>
-                            <i class="fa fa-bell" style="font-size: 30px; color: orangered;"></i>
-                        </div>
-                        <div
-                            class="w-[60px] h-[60px] bg-white border-2 rounded-full border-orange-700 flex justify-center items-center">
-                            <p class="text-orange-700 text-xl font-semibold">2</p>
-                        </div>
-                    </div>
-
-                </div>
-
-                <div class="w-[23%] h-[150px] bg-white shadow-md rounded-md p-5">
-                    <div class="w-full h-full flex flex-col justify-between items-center">
-                        <div class="w-full flex justify-between items-center">
-                            <p class="text-[22px] text-slate-800 font-bold">TICKETS</p>
-                            <i class="fas fa-ticket-alt" style="font-size: 30px; color: cornflowerblue;"></i>
-                        </div>
-                        <div
-                            class="w-[60px] h-[60px] bg-white border-2 rounded-full border-blue-500 flex justify-center items-center">
-                            <p class="text-blue-500 text-xl font-semibold">2</p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="w-[23%] h-[150px] bg-white shadow-md rounded-md p-5">
-                    <div class="w-full flex justify-between items-center">
-                        <p class="text-[22px] text-slate-800 font-bold">Wed 30 Aug 2023</p>
-                        <!-- <i class="fas fa-comment" style="font-size: 30px; color: salmon;"></i> -->
-                        <img src="../images/clockicon.png" alt="" class="w-[30px] h-[30px]">
-                    </div>
-                    <p class="text-gray-500">12:09:33 PM</p>
-                    <div>
-                        <div class="flex justify-start items-center gap-2">
-                            <p>Available</p>
-                            <img src="../images/yes.png" alt="" class="w-[15px] h-[15px]">
-                        </div>
-                    </div>
-                </div>
-
-            </div>
-
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
             <!-- NOTES SECTION -->
             <div class="w-full h-fit flex justify-between items-center px-10 pb-5">
                 <div class="relative w-full h-fit bg-white shadow-md rounded-md p-5">
@@ -650,17 +431,13 @@
                 <iframe id="popupModalFrame" frameborder="0"></iframe>
             </div>
         </div>
+        <script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
 
-        <script src="./js/pop-modals.js"></script>
 
     </div>
-
+    
     <!---------------------- JS SCRIPTS -------------------->
-    <!-- SIDE BAR SCRIPT -->
-    <script src="./js/side-bar.js"></script>
-
+    
     <!-- TO SHOW ALL THE ADDED NOTES BY THE USER WHEN CLICKING ON THE SHOW NOTES BUTTON -->
-    <script src="./js/show-notes.js"></script>
-</body>
-
-</html>
+    <script type="text/javascript" src='{% static "js/show-notes.js" %}'></script>
+{% endblock content %}