new

osinaweb/osinacore/templates/projects-dashboard.html

@@ -6,41 +6,14 @@
 <script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
 
 <style>
-  .dashboard-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%; /* Adjust based on your header height */
-    padding: 1rem;
-    background-color: #f9fafb;
-  }
-  .table-container {
-    flex: 1;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-  }
-  .table-responsive {
-    flex: 1;
-    overflow: auto;
-  }
-  .compact-table {
-    width: 100%;
-    table-layout: fixed;
-  }
-  .compact-table th,
-  .compact-table td {
-    padding: 0.5rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+
   .status-badge {
     font-size: 0.75rem;
     padding: 0.25rem 0.5rem;
   }
 </style>
 
-<div class="dashboard-container rounded-xl bg-gray-50 shadow-md">
+<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
   <div class="flex flex-row gap-3 justify-between items-center mb-4">
     <h1 class="font-semibold text-xl text-secondosiblue font-poppinsBold ">Projects Dashboard</h1>
   </div>
@@ -91,27 +64,27 @@
     </div>
   </form>
 
-  <div class="table-container">
-    <div class="table-responsive">
-      <table class="compact-table">
+    <div class="w-full overflow-x-auto border border-gray-300 rounded-md tableContainer">
+
+      <table class="w-full divide-y">
         <thead class="bg-gray-50">
           <tr>
-            <th class="w-1/6">Project</th>
-            <th class="w-1/6">Task</th>
-            <th class="w-1/6">Point</th>
-            <th class="w-1/6">Status</th>
-            <th class="w-1/6">Assigned To</th>
-            <th class="w-1/6">Time Spent</th>
-            <th class="w-1/6">Last Activity</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">Task</th>
+            <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Point</th>
+            <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Status</th>
+            <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Assigned To</th>
+            <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Time Spent</th>
+            <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Last Activity</th>
           </tr>
         </thead>
         <tbody class="bg-white divide-y divide-gray-200">
           {% for point in points %}
           <tr class="border border-gray-200 text-center">
-            <td>{{ point.task.project.name }}</td>
-            <td>{{ point.task.name }}</td>
-            <td>{{ point.text|truncatechars:30 }}</td>
-            <td>
+            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ point.task.project.name }}</td>
+            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ point.task.name }}</td>
+            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ point.text|truncatechars:30 }}</td>
+            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
               <span class="status-badge inline-flex rounded-full
                 {% if point.status == 'Completed' %}bg-green-100 text-green-800
                 {% elif point.status == 'Working On' %}bg-blue-100 text-blue-800
@@ -120,16 +93,16 @@
                 {{ point.status }}
               </span>
             </td>
-            <td>{{ point.task.assigned_to.user.first_name }} {{ point.task.assigned_to.user.last_name }}</td>
-            <td>
+            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ point.task.assigned_to.user.first_name }} {{ point.task.assigned_to.user.last_name }}</td>
+            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
               {% with point.total_activity_time as time %}
                 {{ time.0 }}h {{ time.1 }}m
               {% endwith %}
             </td>
-            <td>
+            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
               {% with point.pointactivity_set.last as last_activity %}
                 {% if last_activity %}
-                  {{ last_activity.end_time|date:"m/d H:i" }}
+                  {{ last_activity.end_time|date:"j F  H:i" }}
                 {% else %}
                   -
                 {% endif %}
@@ -143,7 +116,9 @@
           {% endfor %}
         </tbody>
       </table>
-   <div class="flex justify-center items-center mt-10">
+
+    </div>
+ <div class="flex justify-center items-center mt-10">
             <div class="flex">
                 {% if points.has_previous %}
                 <a href="?page={{ points.previous_page_number }}" class="w-[40px] h-[40px] rounded-l-md border border-gray-200 flex justify-center items-center text-secondosiblue p-1 cursor-pointer hover:bg-gray-100 duration-300">
@@ -168,9 +143,6 @@
                 {% endif %}
             </div>
         </div>
-
-    </div>
-  </div>
 </div>
 
 <script>

osinaweb/static/dist/output.css

@@ -1244,10 +1244,6 @@ video {
   width: 0.375rem;
 }
 
-.w-1\/6 {
-  width: 16.666667%;
-}
-
 .w-10 {
   width: 2.5rem;
 }