|  |  | @ -159,22 +159,38 @@ | 
			
		
	
		
		
			
				
					
					|  |  |  |                     <div class="w-full bg-white h-fit rounded-md border border-gray-200"> |  |  |  |                     <div class="w-full bg-white h-fit rounded-md border border-gray-200"> | 
			
		
	
		
		
			
				
					
					|  |  |  |                         <!-- TABLE HEADER --> |  |  |  |                         <!-- TABLE HEADER --> | 
			
		
	
		
		
			
				
					
					|  |  |  |                         <div class="w-full h-[70px] rounded-t-md grid grid-cols-2"> |  |  |  |                         <div class="w-full h-[70px] rounded-t-md grid grid-cols-2"> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                             {% if task.status == 'Open' %} | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                             <div | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                 class="flex justify-center items-center border-r border-b border-gray-200 bg-blue-500 rounded-tl-md text-xl text-white font-semibold"> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                 <p>{{task.name}}</p> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                             </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                             {% endif %} | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |      | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                             {% if task.status == 'Working On' %} | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                             <div | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                 class="flex justify-center items-center border-r border-b border-gray-200 bg-yellow-500 rounded-tl-md text-xl text-white font-semibold"> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                 <p>{{task.name}}</p> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                             </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                             {% endif %} | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                             {% if task.status == 'Closed' %} | 
			
		
	
		
		
			
				
					
					|  |  |  |                             <div |  |  |  |                             <div | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 class="flex justify-center items-center border-r border-b border-gray-200 bg-slate-600 rounded-tl-md text-xl text-white font-semibold"> |  |  |  |                                 class="flex justify-center items-center border-r border-b border-gray-200 bg-green-700 rounded-tl-md text-xl text-white font-semibold"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					|  |  |  |                                 <p>{{task.name}}</p> |  |  |  |                                 <p>{{task.name}}</p> | 
			
		
	
		
		
			
				
					
					|  |  |  |                             </div> |  |  |  |                             </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                             {% endif %} | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |                             <div class="grid grid-cols-3"> |  |  |  |                             <div class="grid grid-cols-3"> | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 {% if task.status == 'Open' %} |  |  |  |                                 {% if task.status == 'Open' %} | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 <div |  |  |  |                                 <div | 
			
		
	
		
		
			
				
					
					|  |  |  |                                     class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-red-500"> |  |  |  |                                     class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-blue-500"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					|  |  |  |                                     <p>{{task.status}}</p> |  |  |  |                                     <p>{{task.status}}</p> | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 </div> |  |  |  |                                 </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 {% endif %} |  |  |  |                                 {% endif %} | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 {% if task.status == 'Working On' %} |  |  |  |                                 {% if task.status == 'Working On' %} | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 <div |  |  |  |                                 <div | 
			
		
	
		
		
			
				
					
					|  |  |  |                                     class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-orange-500"> |  |  |  |                                     class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-yellow-500"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					|  |  |  |                                     <p>{{task.status}}</p> |  |  |  |                                     <p>{{task.status}}</p> | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 </div> |  |  |  |                                 </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 {% endif %} |  |  |  |                                 {% endif %} | 
			
		
	
	
		
		
			
				
					|  |  | @ -188,14 +204,14 @@ | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 {% if task.status == 'Open' %} |  |  |  |                                 {% if task.status == 'Open' %} | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 <div |  |  |  |                                 <div | 
			
		
	
		
		
			
				
					
					|  |  |  |                                     class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-red-500"> |  |  |  |                                     class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-blue-500"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					|  |  |  |                                     <p>{{task.formatted_start_date}}</p> |  |  |  |                                     <p>{{task.formatted_start_date}}</p> | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 </div> |  |  |  |                                 </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 {% endif %} |  |  |  |                                 {% endif %} | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 {% if task.status == 'Working On' %} |  |  |  |                                 {% if task.status == 'Working On' %} | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 <div |  |  |  |                                 <div | 
			
		
	
		
		
			
				
					
					|  |  |  |                                     class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-orange-500"> |  |  |  |                                     class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-yellow-500"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					|  |  |  |                                     <p>{{task.formatted_start_date}}</p> |  |  |  |                                     <p>{{task.formatted_start_date}}</p> | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 </div> |  |  |  |                                 </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 {% endif %} |  |  |  |                                 {% endif %} | 
			
		
	
	
		
		
			
				
					|  |  | @ -208,25 +224,46 @@ | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 {% endif %} |  |  |  |                                 {% endif %} | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 {% if task.status == 'Open' %} |  |  |  |                                 {% if task.status == 'Open' %} | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                     {% if task.end_date < current_date %} | 
			
		
	
		
		
			
				
					
					|  |  |  |                                     <div |  |  |  |                                     <div | 
			
		
	
		
		
			
				
					
					|  |  |  |                                         class="flex justify-center items-center border-b border-gray-200 text-white bg-red-500 rounded-tr-md"> |  |  |  |                                         class="flex justify-center items-center border-b border-gray-200 text-white bg-red-500 rounded-tr-md"> | 
			
		
	
		
		
			
				
					
					|  |  |  |                                         <p>{{task.formatted_end_date}}</p> |  |  |  |                                         <p>{{task.formatted_end_date}}</p> | 
			
		
	
		
		
			
				
					
					|  |  |  |                                     </div> |  |  |  |                                     </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                     {% else %} | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                     <div | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                         class="flex justify-center items-center border-b border-gray-200 text-white bg-blue-500 rounded-tr-md"> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                         <p>{{task.formatted_end_date}}</p> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                     </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                     {% endif %} | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 {% endif %} |  |  |  |                                 {% endif %} | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 {% if task.status == 'Working On' %} |  |  |  |                                 {% if task.status == 'Working On' %} | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                     {% if task.end_date < current_date %} | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                     <div | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                         class="flex justify-center items-center border-b border-gray-200 text-white bg-red-500 rounded-tr-md"> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                         <p>{{task.formatted_end_date}}</p> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                     </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                     {% else %} | 
			
		
	
		
		
			
				
					
					|  |  |  |                                     <div |  |  |  |                                     <div | 
			
		
	
		
		
			
				
					
					|  |  |  |                                     class="flex justify-center items-center border-b border-gray-200 text-white bg-orange-500 rounded-tr-md"> |  |  |  |                                         class="flex justify-center items-center border-b border-gray-200 text-white bg-yellow-500 rounded-tr-md"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					|  |  |  |                                         <p>{{task.formatted_end_date}}</p> |  |  |  |                                         <p>{{task.formatted_end_date}}</p> | 
			
		
	
		
		
			
				
					
					|  |  |  |                                     </div> |  |  |  |                                     </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |                                     {% endif %} |  |  |  |                                     {% endif %} | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                 {% endif %} | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 {% if task.status == 'Closed' %} |  |  |  |                                 {% if task.status == 'Closed' %} | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                     {% if task.end_date < current_date %} | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                     <div | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                         class="flex justify-center items-center border-b border-gray-200 text-white bg-red-500 rounded-tr-md"> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                         <p>{{task.formatted_end_date}}</p> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                     </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                     {% else %} | 
			
		
	
		
		
			
				
					
					|  |  |  |                                     <div |  |  |  |                                     <div | 
			
		
	
		
		
			
				
					
					|  |  |  |                                         class="flex justify-center items-center border-b border-gray-200 text-white bg-green-700 rounded-tr-md"> |  |  |  |                                         class="flex justify-center items-center border-b border-gray-200 text-white bg-green-700 rounded-tr-md"> | 
			
		
	
		
		
			
				
					
					|  |  |  |                                         <p>{{task.formatted_end_date}}</p> |  |  |  |                                         <p>{{task.formatted_end_date}}</p> | 
			
		
	
		
		
			
				
					
					|  |  |  |                                     </div> |  |  |  |                                     </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |                                     {% endif %} |  |  |  |                                     {% endif %} | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                                 {% endif %} | 
			
		
	
		
		
			
				
					
					|  |  |  |                             </div> |  |  |  |                             </div> | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |                         </div> |  |  |  |                         </div> | 
			
		
	
	
		
		
			
				
					|  |  | @ -333,7 +370,7 @@ | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |                             {% if task.status == 'Working On' %} |  |  |  |                             {% if task.status == 'Working On' %} | 
			
		
	
		
		
			
				
					
					|  |  |  |                             <div |  |  |  |                             <div | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 class="w-full flex justify-center items-center text-white text-center bg-orange-500 rounded-t-md py-5 px-3"> |  |  |  |                                 class="w-full flex justify-center items-center text-white text-center bg-yellow-500 rounded-t-md py-5 px-3"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					|  |  |  |                                 <p>{{task.name}}</p> |  |  |  |                                 <p>{{task.name}}</p> | 
			
		
	
		
		
			
				
					
					|  |  |  |                             </div> |  |  |  |                             </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |                             {% endif %} |  |  |  |                             {% endif %} | 
			
		
	
	
		
		
			
				
					|  |  | @ -364,7 +401,7 @@ | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |                             {% if task.status == 'Working On' %} |  |  |  |                             {% if task.status == 'Working On' %} | 
			
		
	
		
		
			
				
					
					|  |  |  |                             <div |  |  |  |                             <div | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 class="text-white bg-orange-500 border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm"> |  |  |  |                                 class="text-white bg-yellow-500 border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					|  |  |  |                                 <p>{{task.status}}</p> |  |  |  |                                 <p>{{task.status}}</p> | 
			
		
	
		
		
			
				
					
					|  |  |  |                             </div> |  |  |  |                             </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |                             {% endif %} |  |  |  |                             {% endif %} | 
			
		
	
	
		
		
			
				
					|  |  | @ -379,7 +416,7 @@ | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |                             {% if task.status == 'Working On' %} |  |  |  |                             {% if task.status == 'Working On' %} | 
			
		
	
		
		
			
				
					
					|  |  |  |                             <div |  |  |  |                             <div | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 class="text-white bg-orange-500 border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm"> |  |  |  |                                 class="text-white bg-yellow-500 border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					|  |  |  |                                 <p>{{task.start_date}}</p> |  |  |  |                                 <p>{{task.start_date}}</p> | 
			
		
	
		
		
			
				
					
					|  |  |  |                             </div> |  |  |  |                             </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |                             {% endif %} |  |  |  |                             {% endif %} | 
			
		
	
	
		
		
			
				
					|  |  | @ -401,7 +438,7 @@ | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |                             {% if task.status == 'Working On' %} |  |  |  |                             {% if task.status == 'Working On' %} | 
			
		
	
		
		
			
				
					
					|  |  |  |                             <div |  |  |  |                             <div | 
			
		
	
		
		
			
				
					
					|  |  |  |                                 class="text-white bg-orange-500 flex justify-center items-center text-center py-3 text-sm"> |  |  |  |                                 class="text-white bg-yellow-500 flex justify-center items-center text-center py-3 text-sm"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					|  |  |  |                                 <p>{{task.end_date}}</p> |  |  |  |                                 <p>{{task.end_date}}</p> | 
			
		
	
		
		
			
				
					
					|  |  |  |                             </div> |  |  |  |                             </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |                             {% endif %} |  |  |  |                             {% endif %} | 
			
		
	
	
		
		
			
				
					|  |  | 
 |