integrate bugs List in company dashboard

Author: JisanAR03

company/templates/company/company_manage_bugs.html

@@ -3,24 +3,59 @@
     Manage Bugs
 {% endblock title %}
 {% block body %}
-    <style>
-        .bottom-right {
-            position: absolute;
-            bottom: 10px;
-            right: 15px;
-        }
-    </style>
-    <div class="bottom-right">
-        <a href="https://github.com/OWASP-BLT/BLT/blob/main/company/templates/company/company_manage_bugs.html">
-            <i class="fab fa-github"></i>
-        </a>
-        <a href="https://www.figma.com/file/s0xuxeU6O2guoWEfA9OElZ/Design?node-id=3%3A76&t=pqxWpF3hcYxjEDrs-1">
-            <i class="fab fa-figma"></i>
-        </a>
+<div class="bg-[#F3F5F7] w-full h-full flex flex-col items-center">
+    <div class="flex items-center md:justify-between w-full md:h-max mt-5 flex-col md:flex-row">
+        <p class="text-red-700 font-satoshi font-bold text-[35px] px-8">Manage Bugs</p>
+        <div class="w-full md:w-[15%] flex justify-center md:justify-end mr-10">
+            <a href="{% url 'report' %}"
+                class="flex items-center justify-center md:justify-center px-16 py-7 bg-[#DC4654] rounded-xl hover:bg-red-600 transition-all">
+                <i class="fa-sharp fa-solid fa-plus fa-xl text-white"></i>
+            </a>
+        </div>
     </div>
-    <div class="bg-[#F3F5F7]">
-        <div class="w-full mt-5">
-            <p class="text-[#464255] font-satoshi font-bold text-[35px] px-5">Manage Bugs</p>
+    <div class="w-[96%] h-[70vh] overflow-y-scroll flow-root my-10">
+        <div class="relative overflow-x-auto shadow-md sm:rounded-lg h-full bg-white">
+            <table class="w-full text-sm text-left text-gray-500">
+                <caption class="p-5 text-xl font-semibold text-left text-gray-900 bg-white">
+                    <div class="flex w-full justify-between">
+                        <h2 class="mt-1 text-xl font-extrabold text-gray-500">Bugs</h2>
+                    </div>
+                </caption>
+                <thead class="text-gray-700 uppercase bg-gray-50">
+                    <tr>
+                        <th scope="col" class="px-6 py-3 text-[1rem]">Description</th>
+                        <th scope="col" class="px-6 py-3 text-[1rem]">Created On</th>
+                        <th scope="col" class="px-6 py-3 text-[1rem]">Bug Type</th>
+                        <th scope="col" class="px-6 py-3 text-[1rem]">Status</th>
+                        <th scope="col" class="px-6 py-3 text-[1rem]"><span class="sr-only">View</span></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% if issues %}
+                        {% for issue in issues %}
+                            <tr class="bg-white border-b">
+                                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">{{ issue.description|slice:":25" }}...</th>
+                                <td class="px-6 py-4">{{ issue.created|date:"F j, Y" }}</td>
+                                <td class="px-6 py-4">{{ issue.get_label_display }}</td>
+                                <td class="px-6 py-4"> 
+                                    {% if issue.status == 'open' %} 
+                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Open</span>
+                                    {% else %} 
+                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Closed</span>
+                                    {% endif %} 
+                                </td>
+                                <td class="px-6 py-4 text-right"><a href="{% url 'issue_view2' issue.pk %}" class="font-medium text-blue-600 hover:underline">View</a></td>
+                            </tr>
+                        {% endfor %}
+                    {% else %}
+                        <tr class="bg-white border-b">
+                            <th scope="row"
+                                class="px-6 py-4 font-medium text-red-500 whitespace-nowrap">No Issues Found</th>
+                        </tr>
+                    {% endif %}
+                </tbody>
+            </table>
         </div>
     </div>
+</div>
 {% endblock body %}

company/views.py

@@ -365,10 +365,19 @@ def get(self, request, id, *args, **kwargs):
             .distinct()
         )
 
+        company_obj = Company.objects.filter(id=id).first()
+
+        # get all domains of this company
+        domains = Domain.objects.filter(company_id=id)
+
+        # get all issues where the url is in the domains in descending order
+        issues = Issue.objects.filter(domain__in=domains).order_by("-created")
+
         context = {
             "company": id,
             "companies": companies,
-            "company_obj": Company.objects.filter(id=id).first(),
+            "company_obj": company_obj,
+            "issues": issues,
         }
         return render(request, "company/company_manage_bugs.html", context=context)