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.
278 lines
15 KiB
HTML
278 lines
15 KiB
HTML
{% extends "customer_main.html" %}
|
|
{%load static%}
|
|
|
|
{% block content %}
|
|
|
|
<div class="w-full px-5 s:px-9 flex flex-col gap-3">
|
|
<div class="w-full bg-white rounded-md h-fit shadow-md p-5">
|
|
<div class="w-full rounded-md flex flex-col justify-center items-center py-2 gap-2 mt-[50px] {% if project.projectstatus_set.all.last.status == 'In Progress' %} bg-orange-500 {% elif project.projectstatus_set.all.last.status == 'Completed' %} bg-green-700 {% elif project.projectstatus_set.all.last.status == 'Cancelled' %} bg-red-500 {% endif %}">
|
|
<div
|
|
class="w-[70px] s:w-[90px] h-[70px] s:h-[90px] rounded-full mt-[-50px] s:mt-[-63px] border border-gray-300 bg-white">
|
|
<img src="{{project.logo.url}}" alt="" class="w-full h-full object-cover rounded-full">
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="text-xl text-white font-semibold">{{project.name}}</p>
|
|
<p class="text-sm text-white font-light">{{project.project_id}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p id="projectId" class="hidden">{{project.id}}</p>
|
|
<div class="w-full flex flex-col gap-2 mt-3">
|
|
<div class="w-full h-[10px] bg-gray-100 shadow-md mainBar rounded-md">
|
|
<div class="h-full rounded-md progressBar">
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex justify-between items-center gap-3 text-gray-500 font-light text-sm">
|
|
<p class="startDate">{{project.start_date}}</p>
|
|
<p class="endDate">{{project.end_date}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full h-fit flex justify-end items-center bg-gray-100 shadow-md rounded-md px-3 py-3 mt-3">
|
|
<div class="w-full s:w-fit flex flex-col s:flex-row justify-end items-center gap-3">
|
|
<a href="" class="w-full s:w-fit">
|
|
<button
|
|
class="w-full s:w-fit text-base px-3 py-2 bg-osiblue text-white outline-none border border-osiblue rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">Add
|
|
Ticket</button>
|
|
</a>
|
|
<a href="" class="w-full s:w-fit">
|
|
<button
|
|
class="w-full s:w-fit text-base px-3 py-2 bg-osiblue text-white outline-none border border-osiblue rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">Add
|
|
User Story</button>
|
|
</a>
|
|
<a href="" class="w-full s:w-fit">
|
|
<button
|
|
class="w-full s:w-fit text-base px-3 py-2 bg-osiblue text-white outline-none border border-osiblue rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">Add
|
|
Credentials</button>
|
|
</a>
|
|
<a href="" class="w-full s:w-fit">
|
|
<button
|
|
class="w-full s:w-fit text-base px-3 py-2 bg-osiblue text-white outline-none border border-osiblue rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">Add
|
|
File</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full bg-gray-50 rounded-md shadow-md border border-gray-100 p-5 mt-10">
|
|
<p class="text-secondosiblue text-[17px] font-poppinsBold">Project Manager</p>
|
|
<div
|
|
class="w-[240px] px-5 py-2 bg-white shadow-md mt-3 rounded-md flex justify-start items-center gap-2 cursor-pointer">
|
|
<div class="w-[50px] h-[50px] rounded-full">
|
|
{% if not project.manager.image %}
|
|
<img src="{% static 'images/default-user.png' %}"
|
|
class="w-full h-full object-cover shadow-md rounded-full">
|
|
{% else %}
|
|
<img src="{{project.manager.image.url}}"
|
|
class="w-full h-full object-cover shadow-md rounded-full">
|
|
{% endif %}
|
|
</div>
|
|
<p class="text-gray-500 text-[16px]">{{project.manager.user.first_name}} {{project.manager.user.last_name}}</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="w-full bg-gray-50 rounded-md shadow-md border border-gray-100 p-5 mt-10">
|
|
<p class="text-secondosiblue text-[17px] font-poppinsBold">Project Details</p>
|
|
<p class="text-gray-500 font-light leading-7">There are many variations of passages of Lorem Ipsum
|
|
available, but the majority have suffered alteration
|
|
in some form, by injected humour, or randomised words which don't look even slightly believable. If you
|
|
are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden
|
|
in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks
|
|
as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200
|
|
Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks
|
|
reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or
|
|
non-characteristic words etc.</p>
|
|
</div>
|
|
|
|
|
|
<!-- USER STORIES -->
|
|
<div class="w-full mt-10">
|
|
<div class="overflow-x-auto border border-gray-300 rounded-md mt-5">
|
|
<div
|
|
class=" bg-gray-200 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
|
|
<div class="px-3">
|
|
<p class="text-secondosiblue uppercase font-bold">User Stories</p>
|
|
</div>
|
|
|
|
<button
|
|
class="h-full rounded-tr-md px-4 bg-secondosiblue text-gray-200 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center addUserStoryButton"
|
|
data-modal-url="">
|
|
<i class="fa fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
<table class="min-w-full divide-y">
|
|
<!-- TABLE HEADER -->
|
|
<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">
|
|
Story
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
Related Task
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<!-- TABLE BODY -->
|
|
<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-secondosiblue">requirements</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
dddd
|
|
</td>
|
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm">
|
|
<div class="w-full flex justify-center items-center gap-3">
|
|
<a href="">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke-width="1.5" stroke="currentColor"
|
|
class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
|
|
</svg>
|
|
</a>
|
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke-width="1.5" stroke="currentColor"
|
|
class="w-[18px] text-red-500 hover:scale-110 duration-500 transition-transform">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
|
|
</svg>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- CREDENTIALS -->
|
|
<div class="mt-10 relative">
|
|
<div
|
|
class=" bg-gray-200 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
|
|
<div class="px-3">
|
|
<p class="text-secondosiblue uppercase font-bold">Credentials</p>
|
|
</div>
|
|
|
|
<button
|
|
class="h-full rounded-tr-md px-4 bg-secondosiblue text-gray-200 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center addCredentialsButton"
|
|
data-modal-url="">
|
|
<i class="fa fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto border border-gray-300 rounded-b-md">
|
|
<table class="min-w-full divide-y">
|
|
<!-- TABLE HEADER -->
|
|
<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">
|
|
Email or Username
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
Password
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
|
|
Used For
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<!-- TABLE BODY -->
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
<!-- 1st row -->
|
|
<tr>
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-secondosiblue">{{credential.emailorusername}}</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<a class="text-secondosiblue">{{credential.password}}</a>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm">
|
|
<a class="text-secondosiblue">{{credential.usedfor}}</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- RELATED FILES -->
|
|
<div class="w-full mt-10">
|
|
<div class="overflow-x-auto border border-gray-300 rounded-md mt-5">
|
|
<div
|
|
class=" bg-gray-200 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
|
|
<div class="px-3">
|
|
<p class="text-secondosiblue uppercase font-bold">Related files</p>
|
|
</div>
|
|
|
|
<button
|
|
class="h-full rounded-tr-md px-4 bg-secondosiblue text-gray-200 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center addFileButton"
|
|
data-modal-url="">
|
|
<i class="fa fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<table class="min-w-full divide-y">
|
|
<!-- TABLE HEADER -->
|
|
<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">
|
|
File Name
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
File
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
|
|
Date Entered
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<!-- TABLE BODY -->
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
<!-- 1st row -->
|
|
<tr>
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-secondosiblue">{{file.name}}</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<a class="text-secondosiblue">{{file.file}}</a>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm">
|
|
<a class="text-secondosiblue">{{file.date}}</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src='{% static "js/projects/calculate-project-time.js" %}'></script>
|
|
{% endblock content %} |