newosinadjango/osinaweb/customercore/templates/details_templates/inner-customer-project.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 bg-orange-500 rounded-md flex flex-col justify-center items-center py-2 gap-2 mt-[50px]">
            <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="{% static 'images/ositcom_logos/full-logo.png' %}" alt="" class="w-full h-full object-cover rounded-full">
            </div>
            <div class="text-center">
                <p class="text-xl text-white font-semibold">Winabig</p>
                <p class="text-sm text-white font-light">P20302</p>
            </div>
        </div>


        <div class="w-full flex flex-col gap-2 mt-3">
            <div class="w-full rounded-md bg-white shadow-md h-[8px]">
                <div class="w-[80%] h-full bg-green-700 rounded-md">

                </div>
            </div>
            <div class="w-full flex justify-between items-center gap-3 text-gray-500 font-light text-sm">
                <p>20-2-2023</p>
                <p>20-2-2024</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">
                    <img src="{% static 'images/default-user.png' %}"
                        class="w-full h-full object-cover shadow-md rounded-full">
                </div>
                <p class="text-gray-500 text-[16px]">Emile Elliye</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>

{% endblock content %}