From dd85cad77e8ea22f76c0eb349ecda6e6b70e8917 Mon Sep 17 00:00:00 2001
From: emile <emileelliye@Emiles-iMac.local>
Date: Wed, 14 May 2025 15:44:24 +0300
Subject: [PATCH] new

---
 .../templates/projects-dashboard.html         | 189 +++++++++++-------
 1 file changed, 112 insertions(+), 77 deletions(-)

diff --git a/osinaweb/osinacore/templates/projects-dashboard.html b/osinaweb/osinacore/templates/projects-dashboard.html
index eb913f6d..cca540fe 100644
--- a/osinaweb/osinacore/templates/projects-dashboard.html
+++ b/osinaweb/osinacore/templates/projects-dashboard.html
@@ -5,32 +5,64 @@
 <link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
 
-<div class="h-fit w-full flex flex-col items gap-5 rounded-xl bg-gray-50 shadow-md p-5">
-  <div class="flex flex-row gap-3 justify-between items-center">
+<style>
+  .dashboard-container {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 100px); /* 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="flex flex-row gap-3 justify-between items-center mb-4">
     <h1 class="font-semibold text-xl text-primary">Projects Dashboard</h1>
   </div>
 
-  <form method="get" id="filter-form">
-    <div class="w-full flex flex-col gap-10 justify-center items-center">
-      <div class="flex flex-col lg:flex-row w-full justify-center items-center gap-5">
-        <div class="w-full max-w-[300px] flex flex-row gap-2 items-center">
-          <p>From:</p>
-          <input name="start_date" id="start-date" type="date"
-                 value="{{ start_date }}"
-                 class="w-full border rounded-md outline-none focus:border-primary p-2">
-        </div>
-        <div class="w-full max-w-[300px] flex flex-row gap-2 items-center">
-          <p>To:</p>
-          <input name="end_date" id="end-date" type="date"
-                 value="{{ end_date }}"
-                 class="w-full border rounded-md outline-none focus:border-primary p-2">
+  <form method="get" id="filter-form" class="mb-4">
+    <div class="w-full flex flex-col gap-4">
+      <div class="flex flex-col lg:flex-row w-full gap-4">
+        <div class="flex-1 flex flex-col">
+          <label class="font-medium text-secondary mb-1">Date Range</label>
+          <div class="flex flex-col lg:flex-row gap-2">
+            <input name="start_date" id="start-date" type="date"
+                   value="{{ start_date }}"
+                   class="border rounded-md outline-none focus:border-primary p-2">
+            <input name="end_date" id="end-date" type="date"
+                   value="{{ end_date }}"
+                   class="border rounded-md outline-none focus:border-primary p-2">
+          </div>
         </div>
-      </div>
 
-      <div class="w-full flex flex-row flex-wrap gap-5">
-        <div class="w-full flex flex-1 flex-col items-center">
-          <p class="font-medium text-secondary">Projects</p>
-          <select name="projects" id="projects" class="w-full h-full rounded-md z-10" multiple>
+        <div class="flex-1 flex flex-col">
+          <label class="font-medium text-secondary mb-1">Projects</label>
+          <select name="projects" id="projects" class="rounded-md" multiple>
             {% for project in projects %}
             <option value="{{ project.id }}"
                     {% if project.id in selected_projects %}selected{% endif %}>
@@ -40,9 +72,9 @@
           </select>
         </div>
 
-        <div class="w-full flex-1 flex flex-col items-center">
-          <p class="font-medium text-secondary">Staff</p>
-          <select name="staff" id="staff" class="w-full h-full rounded-md z-10" multiple>
+        <div class="flex-1 flex flex-col">
+          <label class="font-medium text-secondary mb-1">Staff</label>
+          <select name="staff" id="staff" class="rounded-md" multiple>
             {% for staff in staffs %}
             <option value="{{ staff.id }}"
                     {% if staff.id in selected_staff %}selected{% endif %}>
@@ -52,64 +84,65 @@
           </select>
         </div>
       </div>
-
-      <button type="submit" class="bg-primary text-white px-4 py-2 rounded-md">
+      <button type="submit" class="self-start bg-primary text-white px-4 py-2 rounded-md">
         Apply Filters
       </button>
     </div>
   </form>
 
-  <div class="w-full overflow-x-auto">
-    <table class="min-w-full divide-y divide-gray-200">
-      <thead class="bg-gray-50">
-        <tr>
-          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Project</th>
-          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Task</th>
-          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Point</th>
-          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Assigned To</th>
-          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time Spent</th>
-          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Activity</th>
-        </tr>
-      </thead>
-      <tbody class="bg-white divide-y divide-gray-200">
-        {% for point in points %}
-        <tr>
-          <td class="px-6 py-4 whitespace-nowrap">{{ point.task.project.name }}</td>
-          <td class="px-6 py-4 whitespace-nowrap">{{ point.task.name }}</td>
-          <td class="px-6 py-4 whitespace-nowrap">{{ point.text }}</td>
-          <td class="px-6 py-4 whitespace-nowrap">
-            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
-              {% if point.status == 'Completed' %}bg-green-100 text-green-800
-              {% elif point.status == 'Working On' %}bg-blue-100 text-blue-800
-              {% elif point.status == 'Paused' %}bg-yellow-100 text-yellow-800
-              {% else %}bg-red-100 text-red-800{% endif %}">
-              {{ point.status }}
-            </span>
-          </td>
-          <td class="px-6 py-4 whitespace-nowrap">{{ point.task.assigned_to.name }}</td>
-          <td class="px-6 py-4 whitespace-nowrap">
-            {% with point.total_activity_time as time %}
-              {{ time.0 }}h {{ time.1 }}m {{ time.2 }}s
-            {% endwith %}
-          </td>
-          <td class="px-6 py-4 whitespace-nowrap">
-            {% with point.pointactivity_set.last as last_activity %}
-              {% if last_activity %}
-                {{ last_activity.end_time|date:"Y-m-d H:i" }}
-              {% else %}
-                No activity
-              {% endif %}
-            {% endwith %}
-          </td>
-        </tr>
-        {% empty %}
-        <tr>
-          <td colspan="7" class="px-6 py-4 text-center">No points found with the current filters</td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
+  <div class="table-container">
+    <div class="table-responsive">
+      <table class="compact-table">
+        <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>
+          </tr>
+        </thead>
+        <tbody class="bg-white divide-y divide-gray-200">
+          {% for point in points %}
+          <tr>
+            <td>{{ point.task.project.name }}</td>
+            <td>{{ point.task.name }}</td>
+            <td>{{ point.text|truncatechars:30 }}</td>
+            <td>
+              <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
+                {% elif point.status == 'Paused' %}bg-yellow-100 text-yellow-800
+                {% else %}bg-red-100 text-red-800{% endif %}">
+                {{ point.status }}
+              </span>
+            </td>
+            <td>{{ point.task.assigned_to.name }}</td>
+            <td>
+              {% with point.total_activity_time as time %}
+                {{ time.0 }}h {{ time.1 }}m
+              {% endwith %}
+            </td>
+            <td>
+              {% with point.pointactivity_set.last as last_activity %}
+                {% if last_activity %}
+                  {{ last_activity.end_time|date:"m/d H:i" }}
+                {% else %}
+                  -
+                {% endif %}
+              {% endwith %}
+            </td>
+          </tr>
+          {% empty %}
+          <tr>
+            <td colspan="7" class="text-center py-4">No points found with the current filters</td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
   </div>
 </div>
 
@@ -119,6 +152,7 @@ document.addEventListener('DOMContentLoaded', function() {
     new TomSelect('#projects', {
         create: false,
         sortField: 'text',
+        plugins: ['remove_button'],
         onChange: function() {
             document.getElementById('filter-form').submit();
         }
@@ -128,6 +162,7 @@ document.addEventListener('DOMContentLoaded', function() {
     new TomSelect('#staff', {
         create: false,
         sortField: 'text',
+        plugins: ['remove_button'],
         onChange: function() {
             document.getElementById('filter-form').submit();
         }