You cannot select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
	
	
		
			558 lines
		
	
	
		
			26 KiB
		
	
	
	
		
			HTML
		
	
			
		
		
	
	
			558 lines
		
	
	
		
			26 KiB
		
	
	
	
		
			HTML
		
	
| {% extends "main.html" %}
 | |
| {%load static%}
 | |
| {% block content %}
 | |
| 
 | |
| 
 | |
| <div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed lg:hidden bottom-3 right-3 p-2 flex justify-center items-center cursor-pointer usersActivityIcon z-20"
 | |
|     data-modal-url="{% url 'getupdatedactivities' %}">
 | |
|     <img src="{% static 'images/usersactivity.png' %}" alt="Users">
 | |
| </div>
 | |
| 
 | |
| 
 | |
| <!-- NOTES SECTION -->
 | |
| <div class="w-full px-5 s:px-9 pb-5">
 | |
|     <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
 | |
|         <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
 | |
|             <div class="w-full s:w-fit">
 | |
|                 <p class="text-base text-gray-500">Recent Note:</p>
 | |
|                 <div class="flex justify-start items-center gap-2">
 | |
|                     <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
 | |
|                         style="background-color: {{ last_note_color }};">
 | |
| 
 | |
|                     </div>
 | |
|                     <p class="text-slate-700">{{recent_note.text}}</p>
 | |
|                 </div>
 | |
|             </div>
 | |
|             <div class="w-full s:w-fit flex justify-start s:justify-end items-center gap-4">
 | |
|                 <button
 | |
|                     class="w-full s:w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
 | |
|                     id="showNotesButton">Show
 | |
|                     Notes</button>
 | |
|                 <button
 | |
|                     class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addNoteButton"
 | |
|                     data-modal-url="{% url 'addnote' %}">
 | |
|                     <i class="fa fa-plus"></i>
 | |
|                 </button>
 | |
|             </div>
 | |
|         </div>
 | |
| 
 | |
|         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
 | |
|         <div class="w-full h-fit hidden mt-5" id="notesContainer">
 | |
| 
 | |
|             <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
 | |
|                 {% for note in notes %}
 | |
|                 <div class="h-[150px] shadow-sm p-5" style="background-color: {{note.color}}">
 | |
|                     <p class="text-base text-slate-800">{{note.text}}</p>
 | |
|                 </div>
 | |
|                 {% endfor %}
 | |
|             </div>
 | |
| 
 | |
|             <div class="w-full black lg:hidden">
 | |
|                 <div class="swiper-container mt-5">
 | |
|                     <div class="swiper-wrapper">
 | |
|                         {% for note in notes %}
 | |
|                         <div class="swiper-slide">
 | |
|                             <div class="w-full h-[150px] p-3 flex justify-start items-start"
 | |
|                                 style="background-color: {{note.color}}">
 | |
|                                 {{note.text}}
 | |
|                             </div>
 | |
|                         </div>
 | |
|                         {% endfor %}
 | |
|                     </div>
 | |
| 
 | |
|                     <div class="flex justify-center items-center gap-3 mt-5">
 | |
|                         <div class="w-[35px] h-[35px] bg-slate-700 b rounded-md text-white flex justify-center items-center text-[18px] cursor-pointer z-10"
 | |
|                             id="sliderLeft">
 | |
|                             <i class="fa fa-angle-left"></i>
 | |
|                         </div>
 | |
| 
 | |
|                         <div class="w-[35px] h-[35px] bg-slate-700 b rounded-md text-white flex justify-center items-center text-[18px] cursor-pointer z-10"
 | |
|                             id="sliderRight">
 | |
|                             <i class="fa fa-angle-right"></i>
 | |
|                         </div>
 | |
|                     </div>
 | |
|                 </div>
 | |
|             </div>
 | |
|         </div>
 | |
|     </div>
 | |
| </div>
 | |
| 
 | |
| <!-- TASKS AND USERS ACTIVITY SECTION -->
 | |
| <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
 | |
|     <!-- LEFT SIDE / TASKS SECTION -->
 | |
|     <div class="w-full lg:w-[75%]">
 | |
| 
 | |
|         <!-- TASKS ON DESKTOP -->
 | |
|         <div class="hidden md:block">
 | |
|             <!-- TASKS TABLE -->
 | |
|             {% for task in tasks %}
 | |
|             <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mb-5">
 | |
|                 <div class="w-full bg-white h-fit rounded-md border border-gray-200">
 | |
|                     <!-- TABLE HEADER -->
 | |
|                     <div class="w-full h-[70px] rounded-t-md grid grid-cols-2">
 | |
|                         <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">
 | |
|                             <p>{{task.name}}</p>
 | |
|                         </div>
 | |
| 
 | |
|                         <div class="grid grid-cols-3">
 | |
|                             {% if task.status == 'Open' %}
 | |
|                             <div
 | |
|                                 class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-red-500">
 | |
|                                 <p>{{task.status}}</p>
 | |
|                             </div>
 | |
|                             {% endif %}
 | |
| 
 | |
|                             {% if task.status == 'Working On' %}
 | |
|                             <div
 | |
|                                 class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-orange-500">
 | |
|                                 <p>{{task.status}}</p>
 | |
|                             </div>
 | |
|                             {% endif %}
 | |
| 
 | |
|                             {% if task.status == 'Open' %}
 | |
|                             <div
 | |
|                                 class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-red-500">
 | |
|                                 <p>{{task.formatted_start_date}}</p>
 | |
|                             </div>
 | |
|                             {% endif %}
 | |
| 
 | |
|                             {% if task.status == 'Working On' %}
 | |
|                             <div
 | |
|                                 class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-orange-500">
 | |
|                                 <p>{{task.formatted_start_date}}</p>
 | |
|                             </div>
 | |
|                             {% endif %}
 | |
| 
 | |
|                             {% if task.status == 'Open' %}
 | |
|                             <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>
 | |
|                             {% endif %}
 | |
| 
 | |
|                             {% if task.status == 'Working On' %}
 | |
|                             <div
 | |
|                                 class="flex justify-center items-center border-b border-gray-200 text-white bg-orange-500 rounded-tr-md">
 | |
|                                 <p>{{task.formatted_end_date}}</p>
 | |
|                             </div>
 | |
|                             {% endif %}
 | |
|                         </div>
 | |
| 
 | |
|                     </div>
 | |
| 
 | |
|                     <!-- TABLE BODY -->
 | |
|                     <div class="w-full h-fit grid grid-cols-2">
 | |
|                         <!-- LEFT SIDE OF TABLE BODY -->
 | |
|                         <div class="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">{{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">{{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">{{task.assigned_to.user.first_name}}
 | |
|                                         {{task.assigned_to.user.last_name}}</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"></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"></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">{{task.extra}}</p>
 | |
|                                 </div>
 | |
|                             </div>
 | |
|                         </div>
 | |
| 
 | |
|                         <!-- RIGHT SIDE OF TABLE BODY -->
 | |
|                         <div class="h-fit bg-white grid grid-cols-3 rounded-br-md">
 | |
|                             <button
 | |
|                                 class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500">Close</button>
 | |
| 
 | |
|                             <button
 | |
|                                 class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 updateStatusButton"
 | |
|                                 data-modal-url="{% url 'updatestatus' task.task_id %}">Update
 | |
|                                 Status</button>
 | |
| 
 | |
|                             <button
 | |
|                                 class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 addTimeButton"
 | |
|                                 data-modal-url="{% url 'addtime' %}">Add
 | |
|                                 Time</button>
 | |
| 
 | |
|                             <button
 | |
|                                 class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 deleteTaskButton"
 | |
|                                 data-modal-url="{% url 'deletetask' %}">Delete</button>
 | |
| 
 | |
|                             <a href="{% url 'edittask' task.task_id %}">
 | |
|                                 <button
 | |
|                                     class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500">Edit</button>
 | |
|                             </a>
 | |
| 
 | |
|                             <button
 | |
|                                 class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 showPointsButton"
 | |
|                                 data-modal-url="{% url 'showpoints' task.task_id  %}">Show
 | |
|                                 Points</button>
 | |
| 
 | |
|                             <button
 | |
|                                 class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 addPointButton"
 | |
|                                 data-modal-url="{% url 'addpoint' task.task_id %}">Add
 | |
|                                 Point</button>
 | |
| 
 | |
|                             <a href="{% url 'detailed-task' task.task_id %}">
 | |
|                                 <button
 | |
|                                     class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500">Details</button>
 | |
|                             </a>
 | |
| 
 | |
|                             <button
 | |
|                                 class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 rounded-br-md timelineButton"
 | |
|                                 data-modal-url="{% url 'timeline' %}">Timeline</button>
 | |
|                         </div>
 | |
|                     </div>
 | |
|                 </div>
 | |
|             </div>
 | |
|             {% endfor %}
 | |
|         </div>
 | |
| 
 | |
|         <!-- TASKS ON MOBILE -->
 | |
|         <div class="block md:hidden">
 | |
|             {% for task in tasks %}
 | |
|             <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mb-5">
 | |
|                 <div class="border border-gray-200 rounded-t-md">
 | |
|                     <div class="w-full rounded-t-md">
 | |
|                         {% if task.status == 'Open' %}
 | |
|                         <div
 | |
|                             class="w-full flex justify-center items-center text-white text-center bg-red-500 rounded-t-md py-5 px-3">
 | |
|                             <p>{{task.name}}</p>
 | |
|                         </div>
 | |
|                         {% endif %}
 | |
| 
 | |
|                         {% if task.status == 'Working On' %}
 | |
|                         <div
 | |
|                             class="w-full flex justify-center items-center text-white text-center bg-orange-500 rounded-t-md py-5 px-3">
 | |
|                             <p>{{task.name}}</p>
 | |
|                         </div>
 | |
|                         {% endif %}
 | |
|                     </div>
 | |
| 
 | |
| 
 | |
|                     <div class="grid grid-cols-3 border-t border-gray-200">
 | |
|                         {% if task.status == 'Open' %}
 | |
|                         <div
 | |
|                             class="text-white bg-red-500 border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm">
 | |
|                             <p>{{task.status}}</p>
 | |
|                         </div>
 | |
|                         {% endif %}
 | |
| 
 | |
|                         {% if task.status == 'Working On' %}
 | |
|                         <div
 | |
|                             class="text-white bg-orange-500 border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm">
 | |
|                             <p>{{task.status}}</p>
 | |
|                         </div>
 | |
|                         {% endif %}
 | |
| 
 | |
| 
 | |
|                         {% if task.status == 'Open' %}
 | |
|                         <div
 | |
|                             class="text-white bg-red-500 border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm">
 | |
|                             <p>{{task.start_date}}</p>
 | |
|                         </div>
 | |
|                         {% endif %}
 | |
| 
 | |
|                         {% if task.status == 'Working On' %}
 | |
|                         <div
 | |
|                             class="text-white bg-orange-500 border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm">
 | |
|                             <p>{{task.start_date}}</p>
 | |
|                         </div>
 | |
|                         {% endif %}
 | |
| 
 | |
| 
 | |
|                         {% if task.status == 'Open' %}
 | |
|                         <div class="text-white bg-red-500 flex justify-center items-center text-center py-3 text-sm">
 | |
|                             <p>{{task.end_date}}</p>
 | |
|                         </div>
 | |
|                         {% endif %}
 | |
| 
 | |
|                         {% if task.status == 'Working On' %}
 | |
|                         <div class="text-white bg-orange-500 flex justify-center items-center text-center py-3 text-sm">
 | |
|                             <p>{{task.end_date}}</p>
 | |
|                         </div>
 | |
|                         {% endif %}
 | |
|                     </div>
 | |
| 
 | |
| 
 | |
|                     <div class="w-full flex flex-col gap-2 p-3">
 | |
|                         <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">{{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">{{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">{{task.assigned_to.user.first_name}}
 | |
|                                 {{task.assigned_to.user.last_name}}</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">{{task.extra}}</p>
 | |
|                         </div>
 | |
|                     </div>
 | |
| 
 | |
| 
 | |
|                     <div
 | |
|                         class="w-full bg-gray-100 flex justify-between items-center py-3 px-3 text-slate-700 actionsButton">
 | |
|                         <p>Actions</p>
 | |
|                         <i class="fa fa-angle-down" style="font-size: 20px;"></i>
 | |
|                         <i class="fa fa-angle-up" style="font-size: 20px; display: none;"></i>
 | |
|                     </div>
 | |
| 
 | |
| 
 | |
|                     <div class="grid-cols-3 actionsContainer hidden">
 | |
|                         <button
 | |
|                             class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500">Close</button>
 | |
| 
 | |
|                         <button
 | |
|                             class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500 updateStatusButton"
 | |
|                             data-modal-url="{% url 'updatestatus' task.task_id %}">Update
 | |
|                             Status</button>
 | |
| 
 | |
|                         <button
 | |
|                             class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500 addTimeButton"
 | |
|                             data-modal-url="{% url 'addtime' %}">Add
 | |
|                             Time</button>
 | |
| 
 | |
|                         <button
 | |
|                             class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500 deleteTaskButton"
 | |
|                             data-modal-url="{% url 'deletetask' %}">Delete</button>
 | |
| 
 | |
|                         <a href="{% url 'edittask' task.task_id %}">
 | |
|                             <button
 | |
|                                 class="w-full p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500">Edit</button>
 | |
|                         </a>
 | |
| 
 | |
|                         <button
 | |
|                             class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500 showPointsButton"
 | |
|                             data-modal-url="{% url 'showpoints' task.task_id  %}">Show
 | |
|                             Points</button>
 | |
| 
 | |
|                         <button
 | |
|                             class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500 addPointButton"
 | |
|                             data-modal-url="{% url 'addpoint' task.task_id %}">Add
 | |
|                             Point</button>
 | |
| 
 | |
|                         <a href="{% url 'detailed-task' task.task_id %}">
 | |
|                             <button
 | |
|                                 class="w-full p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500">Details</button>
 | |
|                         </a>
 | |
| 
 | |
|                         <button
 | |
|                             class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500 timelineButton"
 | |
|                             data-modal-url="{% url 'timeline' %}">Timeline</button>
 | |
|                     </div>
 | |
|                 </div>
 | |
|             </div>
 | |
|             {% endfor %}
 | |
|         </div>
 | |
| 
 | |
| 
 | |
|         <!-- TICKETS SECTION -->
 | |
|         <!-- <div class="w-full h-fit px-10 py-5">
 | |
|  
 | |
|     <div class="w-full h-fit bg-white shadow-md rounded-md flex justify-center items-center gap-10 py-5 px-3">
 | |
|         <a class="text-xl text-gray-500">Tickets</a>
 | |
|         <select name="" id=""
 | |
|             class="border border-gray-300 p-2 rounded-md outline-none w-[160px] text-gray-500 h-[40px]">
 | |
|             <option value="" disabled selected>Assigned To</option>
 | |
|             <option value="">Nataly</option>
 | |
|             <option value="">Salim</option>
 | |
|             <option value="">Emile</option>
 | |
|             <option value="">Arze</option>
 | |
|         </select>
 | |
|         <select name="" id=""
 | |
|             class="border border-gray-300 p-2 rounded-md outline-none w-[160px] text-gray-500 h-[40px]">
 | |
|             <option value="" disabled selected>Status</option>
 | |
|             <option value="">Open</option>
 | |
|             <option value="">Working On</option>
 | |
|             <option value="">Closed</option>
 | |
|             <option value="">Waiting for client reply</option>
 | |
|         </select>
 | |
|         <input type="text" placeholder="Project"
 | |
|             class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[220px] h-[40px]">
 | |
|     </div>
 | |
| 
 | |
|     <div class="overflow-x-auto border border-gray-300 rounded-md mt-5" id="customersContainer">
 | |
|         <table class="min-w-full divide-y">
 | |
|     
 | |
|             <thead class="bg-gray-50">
 | |
|                 <tr>
 | |
|                     <th scope="col"
 | |
|                         class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
 | |
|                         #
 | |
|                     </th>
 | |
|                     <th scope="col"
 | |
|                         class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
 | |
|                         Client
 | |
|                     </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 Update
 | |
|                     </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 Reply
 | |
|                     </th>
 | |
|                     <th scope="col"
 | |
|                         class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
 | |
|                         Subject
 | |
|                     </th>
 | |
|                     <th scope="col"
 | |
|                         class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
 | |
|                         Department
 | |
|                     </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 whitespace-nowrap">
 | |
|                         Actions
 | |
|                     </th>
 | |
|                 </tr>
 | |
|             </thead>
 | |
| 
 | |
|     
 | |
|             <tbody class="bg-white divide-y divide-gray-200">
 | |
|                 <tr>
 | |
|                     <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
 | |
|                         <p class="text-slate-800">1</p>
 | |
|                     </td>
 | |
| 
 | |
|                     <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
 | |
|                         <p class="text-slate-800">Asaad</p>
 | |
|                     </td>
 | |
| 
 | |
|                     <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
 | |
|                         <p class="text-slate-800">Mon 18/2/2023 - 12:30PM</p>
 | |
|                     </td>
 | |
| 
 | |
|                     <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
 | |
|                         <p class="text-slate-800">Nataly</p>
 | |
|                     </td>
 | |
| 
 | |
|                     <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
 | |
|                         <p class="text-slate-800">Change the homepage colors</p>
 | |
|                     </td>
 | |
| 
 | |
|                     <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
 | |
|                         <p class="text-slate-800">Development</p>
 | |
|                     </td>
 | |
| 
 | |
|                     <td class="px-6 py-4 text-center text-sm border-r border-gray-300 bg-red-500">
 | |
|                         <p class="text-white">Open</p>
 | |
|                     </td>
 | |
| 
 | |
| 
 | |
|                     <td class="px-6 py-4 text-center text-sm">
 | |
|                         <div class="w-full flex justify-center items-center gap-3">
 | |
|                             <a href="">
 | |
|                                 <div class="text-[15px] text-blue-500 cursor-pointer">
 | |
|                                     <i class="fa fa-eye"></i>
 | |
|                                 </div>
 | |
|                             </a>
 | |
| 
 | |
|                             <a href="">
 | |
|                                 <div class="text-[15px] text-blue-500 cursor-pointer">
 | |
|                                     <i class="fa fa-edit"></i>
 | |
|                                 </div>
 | |
|                             </a>
 | |
| 
 | |
|                             <div class="text-[15px] text-red-500 cursor-pointer">
 | |
|                                 <i class="fa fa-trash"></i>
 | |
|                             </div>
 | |
|                         </div>
 | |
|                     </td>
 | |
|                 </tr>
 | |
|             </tbody>
 | |
|         </table>
 | |
|     </div>
 | |
| </div> -->
 | |
| 
 | |
|     </div>
 | |
| 
 | |
|     <script>
 | |
|         document.addEventListener('DOMContentLoaded', function () {
 | |
|             var actionsButtons = document.querySelectorAll('.actionsButton');
 | |
| 
 | |
|             actionsButtons.forEach(function (button) {
 | |
|                 button.addEventListener('click', function () {
 | |
|                     var arrowDown = button.querySelector('.fa-angle-down');
 | |
|                     var arrowUp = button.querySelector('.fa-angle-up');
 | |
| 
 | |
|                     arrowDown.style.display = arrowDown.style.display === 'none' ? 'inline-block' : 'none';
 | |
|                     arrowUp.style.display = arrowUp.style.display === 'none' ? 'inline-block' : 'none';
 | |
| 
 | |
|                     var actionsContainer = button.nextElementSibling;
 | |
|                     actionsContainer.classList.toggle('hidden');
 | |
|                     actionsContainer.classList.toggle('grid');
 | |
|                 });
 | |
|             });
 | |
|         });
 | |
|     </script>
 | |
| 
 | |
|     <!-- RIGHT SIDE / USERS ACTIVITY -->
 | |
|     <div class="hidden lg:block w-[25%] bg-white h-fit rounded-md shadow-md p-5">
 | |
|         <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
 | |
|         <div class="w-full h-fit mt-2" id="activitiesContainer">
 | |
| 
 | |
|             {% include 'recent-activities.html' %}
 | |
| 
 | |
|         </div>
 | |
|     </div>
 | |
| </div>
 | |
| 
 | |
| </div>
 | |
| 
 | |
| 
 | |
| <!-- POPUP MODAL -->
 | |
| <div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" id="popUpModal">
 | |
|     <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
 | |
|         <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
 | |
|             id="closeModalButton">
 | |
|             <i class="fa fa-close"></i>
 | |
|         </button>
 | |
|         <iframe id="popupModalFrame" frameborder="0"></iframe>
 | |
|     </div>
 | |
| </div>
 | |
| <script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
 | |
| 
 | |
| 
 | |
| </div>
 | |
| 
 | |
| <!---------------------- JS SCRIPTS -------------------->
 | |
| 
 | |
| <!-- TO SHOW ALL THE ADDED NOTES BY THE USER WHEN CLICKING ON THE SHOW NOTES BUTTON -->
 | |
| <script type="text/javascript" src='{% static "js/show-notes.js" %}'></script>
 | |
| 
 | |
| 
 | |
| <script type="text/javascript" src='{% static "js/draggable-slider.js" %}'></script>
 | |
| 
 | |
| {% endblock content %} |