salim
/
newosinadjango
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New changes.

Browse Source
main
nataly 1 year ago
parent 902e5db0e3
commit c739686168
28 changed files with 792 additions and 244 deletions
Show Stats Download Patch File Download Diff File

BIN
osinaweb/db.sqlite3
View File

Binary file not shown.

1
osinaweb/input.css
Unescape Escape View File

@ -54,6 +54,7 @@
@media (max-width: 1200px) { @media (max-width: 1200px) {
#scrollPart { #scrollPart {
margin-left: 0; margin-left: 0;
width: 100%;
} }
.fixedSideHeader { .fixedSideHeader {

BIN
osinaweb/osinacore/__pycache__/custom_context.cpython-311.pyc
View File

Binary file not shown.

BIN
osinaweb/osinacore/__pycache__/views.cpython-311.pyc
View File

Binary file not shown.

24
osinaweb/osinacore/custom_context.py
Unescape Escape View File

@ -1,6 +1,7 @@
from .models import * from .models import *
from django.contrib.auth.models import AnonymousUser from django.contrib.auth.models import AnonymousUser
from datetime import datetime, timedelta from datetime import datetime, timedelta
from django.shortcuts import get_object_or_404
def calculate_time_ago(status): def calculate_time_ago(status):
@ -42,18 +43,27 @@ def utilities(request):
total_tasks = open_task_count + working_on_task_count total_tasks = open_task_count + working_on_task_count
latest_statuses = Status.objects.all().order_by('-id')[:12]
# Get the current time
current_time = timezone.now()
# Calculate the datetime of 24 hours ago
twenty_four_hours_ago = current_time - timezone.timedelta(hours=24)
# Fetch the latest statuses from the last 24 hours
latest_statuses = Status.objects.filter(date__gte=twenty_four_hours_ago).order_by('-id')
# Calculate time ago for each status and store it in a dictionary # Calculate time ago for each status and store it in a dictionary
latest_statuses_time_ago = [{'status': status, 'time_ago': calculate_time_ago(status)} for status in latest_statuses] latest_statuses_time_ago = [{'status': status, 'time_ago': calculate_time_ago(status)} for status in latest_statuses]
return {'total_tasks': total_tasks, 'latest_statuses' : latest_statuses, 'latest_statuses_time_ago': latest_statuses_time_ago, 'notes' : notes, 'recent_note' : recent_note,} return {'total_tasks': total_tasks,
'latest_statuses' : latest_statuses,
'latest_statuses_time_ago': latest_statuses_time_ago,
'notes' : notes,
'recent_note' : recent_note,
}
def last_status(request): def last_status(request):

44
osinaweb/osinacore/views.py
Unescape Escape View File

@ -527,7 +527,38 @@ def status_mobile_modal (request, *args, **kwargs):
context = { context = {
} }
return render(request, 'popup_modals/status-on-mobile-modal.html', context) return render(request, 'popup_modals/status-on-mobile-modal.html', context)
def user_recent_activities_modal(request, user_id):
current_time = timezone.now()
# Calculate the datetime of 24 hours ago
twenty_four_hours_ago = current_time - timezone.timedelta(hours=24)
if user_id:
specific_user = get_object_or_404(User, id=user_id)
# Fetch the specific user's statuses from the last 24 hours
user_statuses = Status.objects.filter(staff__user=specific_user, date__gte=twenty_four_hours_ago).order_by('-id')
# Calculate time ago for each user status and store it in a dictionary
user_statuses_time_ago = [{'status': status, 'time_ago': calculate_time_ago(status)} for status in user_statuses]
else:
# No specific user ID provided, fetch statuses for all users in the last 24 hours
all_user_statuses = Status.objects.filter(date__gte=twenty_four_hours_ago).order_by('-id')
# Calculate time ago for each user status and store it in a dictionary
user_statuses_time_ago = [{'status': status, 'time_ago': calculate_time_ago(status)} for status in all_user_statuses]
context = {
'user_statuses_time_ago': user_statuses_time_ago,
}
return render(request, 'user-recent-activities.html', context)
@ -1517,9 +1548,16 @@ def get_latest_activities(request):
total_tasks = open_task_count + working_on_task_count total_tasks = open_task_count + working_on_task_count
latest_statuses = Status.objects.all().order_by('-id')[:12] # Get the current time
current_time = timezone.now()
# Calculate the datetime of 24 hours ago
twenty_four_hours_ago = current_time - timezone.timedelta(hours=24)
# Fetch the latest statuses from the last 24 hours
latest_statuses = Status.objects.filter(date__gte=twenty_four_hours_ago).order_by('-id')
# Calculate time ago for each status and store it in a list of dictionaries # Calculate time ago for each status and store it in a dictionary
latest_statuses_time_ago = [{'status': status, 'time_ago': calculate_time_ago(status)} for status in latest_statuses] latest_statuses_time_ago = [{'status': status, 'time_ago': calculate_time_ago(status)} for status in latest_statuses]
response_data = { response_data = {

BIN
osinaweb/osinaweb/__pycache__/urls.cpython-311.pyc
View File

Binary file not shown.

1
osinaweb/osinaweb/urls.py
Unescape Escape View File

@ -85,6 +85,7 @@ urlpatterns = [
path('add-businesscustomer/', views.add_business_modal, name='addbusinesscustomer'), path('add-businesscustomer/', views.add_business_modal, name='addbusinesscustomer'),
path('add-staffposition/', views.staff_position_modal, name='addstaffposition'), path('add-staffposition/', views.staff_position_modal, name='addstaffposition'),
path('statusmobilemodal/', views.status_mobile_modal, name='statusmobilemodal'), path('statusmobilemodal/', views.status_mobile_modal, name='statusmobilemodal'),
path('userrecentativities/<int:user_id>', views.user_recent_activities_modal, name='userrecentativities'),
#Save Urls #Save Urls

55
osinaweb/static/dist/output.css vendored
Unescape Escape View File

@ -717,6 +717,10 @@ video {
top: 0.25rem; top: 0.25rem;
} }
.top-10 {
top: 2.5rem;
}
.top-3 { .top-3 {
top: 0.75rem; top: 0.75rem;
} }
@ -866,10 +870,6 @@ video {
height: 150px; height: 150px;
} }
.h-\[18px\] {
height: 18px;
}
.h-\[25px\] { .h-\[25px\] {
height: 25px; height: 25px;
} }
@ -910,6 +910,10 @@ video {
height: 70px; height: 70px;
} }
.h-\[800px\] {
height: 800px;
}
.h-\[80px\] { .h-\[80px\] {
height: 80px; height: 80px;
} }
@ -935,10 +939,6 @@ video {
width: 12rem; width: 12rem;
} }
.w-\[100\%\] {
width: 100%;
}
.w-\[100px\] { .w-\[100px\] {
width: 100px; width: 100px;
} }
@ -967,10 +967,6 @@ video {
width: 160px; width: 160px;
} }
.w-\[18px\] {
width: 18px;
}
.w-\[20\%\] { .w-\[20\%\] {
width: 20%; width: 20%;
} }
@ -1515,6 +1511,16 @@ video {
background-color: rgb(107 114 128 / var(--tw-bg-opacity)); background-color: rgb(107 114 128 / var(--tw-bg-opacity));
} }
.bg-gray-600 {
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}
.bg-gray-700 {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.bg-green-200 { .bg-green-200 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(187 247 208 / var(--tw-bg-opacity)); background-color: rgb(187 247 208 / var(--tw-bg-opacity));
@ -2166,6 +2172,7 @@ video {
@media (max-width: 1200px) { @media (max-width: 1200px) {
#scrollPart { #scrollPart {
margin-left: 0; margin-left: 0;
width: 100%;
} }
.fixedSideHeader { .fixedSideHeader {
@ -2316,6 +2323,10 @@ video {
height: 50px; height: 50px;
} }
.s\:w-\[300px\] {
width: 300px;
}
.s\:w-\[500px\] { .s\:w-\[500px\] {
width: 500px; width: 500px;
} }
@ -2361,10 +2372,6 @@ video {
display: none; display: none;
} }
.md\:h-\[150px\] {
height: 150px;
}
.md\:h-\[70px\] { .md\:h-\[70px\] {
height: 70px; height: 70px;
} }
@ -2416,10 +2423,6 @@ video {
} }
@media (min-width: 1110px) { @media (min-width: 1110px) {
.lg\:block {
display: block;
}
.lg\:grid { .lg\:grid {
display: grid; display: grid;
} }
@ -2449,10 +2452,6 @@ video {
.xlg1\:w-\[74\.5\%\] { .xlg1\:w-\[74\.5\%\] {
width: 74.5%; width: 74.5%;
} }
.xlg1\:w-\[75\%\] {
width: 75%;
}
} }
@media (min-width: 1300px) { @media (min-width: 1300px) {
@ -2470,6 +2469,10 @@ video {
} }
@media (min-width: 1350px) { @media (min-width: 1350px) {
.xxlg1\:block {
display: block;
}
.xxlg1\:flex { .xxlg1\:flex {
display: flex; display: flex;
} }
@ -2478,6 +2481,10 @@ video {
display: none; display: none;
} }
.xxlg1\:w-\[75\%\] {
width: 75%;
}
.xxlg1\:grid-cols-3 { .xxlg1\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
} }

BIN
osinaweb/static/images/AZIZ_ALHUMAIDHI_KUWAIT_261116_0812.jpeg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

BIN
osinaweb/static/images/banner.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

4
osinaweb/static/js/pop-modals.js
Unescape Escape View File

@ -59,8 +59,10 @@ document.addEventListener("DOMContentLoaded", function () {
addButtonClickListener("addTagButton", "fit-content", "160px"); addButtonClickListener("addTagButton", "fit-content", "160px");
addButtonClickListener("addBusinessButton", "550px", "500px"); addButtonClickListener("addBusinessButton", "550px", "500px");
addButtonClickListener("addStaffPositionButton", "fit-content", "160px"); addButtonClickListener("addStaffPositionButton", "fit-content", "160px");
addButtonClickListener("usersActivityIcon", "500px", "600px"); addButtonClickListener("usersActivityIcon", "400px", "600px");
addButtonClickListener("addStatusButtonMobile", "500px", "80px"); addButtonClickListener("addStatusButtonMobile", "500px", "80px");
addButtonClickListener("userRecentActivitiesButton", "400px", "600px");

BIN
osinaweb/templates/.DS_Store vendored
View File

Binary file not shown.

9
osinaweb/templates/index.html
Unescape Escape View File

@ -3,7 +3,8 @@
{% block content %} {% block content %}
<div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xlg1:hidden bottom-3 right-3 p-2 flex justify-center items-center cursor-pointer usersActivityIcon z-20" <!-- USERS ACTIVITIES ON MOBILE -->
<div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xxlg1:hidden bottom-3 right-3 p-2 flex justify-center items-center cursor-pointer usersActivityIcon z-20"
data-modal-url="{% url 'getupdatedactivities' %}"> data-modal-url="{% url 'getupdatedactivities' %}">
<img src="{% static 'images/usersactivity.png' %}" alt="Users"> <img src="{% static 'images/usersactivity.png' %}" alt="Users">
</div> </div>
@ -80,7 +81,7 @@
<!-- TASKS AND USERS ACTIVITY SECTION --> <!-- TASKS AND USERS ACTIVITY SECTION -->
<div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5"> <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
<!-- LEFT SIDE / TASKS SECTION --> <!-- LEFT SIDE / TASKS SECTION -->
<div class="w-full xlg1:w-[75%]"> <div class="w-full xxlg1:w-[75%]">
<!-- TASKS ON DESKTOP --> <!-- TASKS ON DESKTOP -->
<div class="hidden md:block"> <div class="hidden md:block">
@ -499,7 +500,7 @@
</div> </div>
<!-- RIGHT SIDE / USERS ACTIVITY --> <!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="hidden lg:block w-[25%] bg-white h-fit rounded-md shadow-md p-5"> <div class="hidden xxlg1:block w-[25%] bg-white h-[800px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1> <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer"> <div class="w-full h-fit mt-2" id="activitiesContainer">
@ -533,6 +534,4 @@
<script type="text/javascript" src='{% static "js/show-notes.js" %}'></script> <script type="text/javascript" src='{% static "js/show-notes.js" %}'></script>
<script type="text/javascript" src='{% static "js/draggable-slider.js" %}'></script>
{% endblock content %} {% endblock content %}

79
osinaweb/templates/listing_pages/business-types.html
Unescape Escape View File

@ -1,11 +1,19 @@
{% extends "main.html" %} {% extends "main.html" %}
{%load static%} {%load static%}
{% block content %} {% block content %}
<!-- USERS ACTIVITIES ON MOBILE -->
<div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xxlg1: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 --> <!-- NOTES SECTION -->
<div class="w-full h-fit flex justify-between items-center px-10 pb-5"> <div class="w-full px-5 s:px-9 pb-5">
<div class="relative w-full h-fit bg-white shadow-md rounded-md p-5"> <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
<div class="w-full flex justify-between items-center"> <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
<div> <div class="w-full s:w-fit">
<p class="text-base text-gray-500">Recent Note:</p> <p class="text-base text-gray-500">Recent Note:</p>
<div class="flex justify-start items-center gap-2"> <div class="flex justify-start items-center gap-2">
<div class="w-[13px] h-[13px] bg-red-200 rounded-full" <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
@ -15,9 +23,9 @@
<p class="text-slate-700">{{recent_note.text}}</p> <p class="text-slate-700">{{recent_note.text}}</p>
</div> </div>
</div> </div>
<div class="flex justify-end items-center gap-4"> <div class="w-full s:w-fit flex justify-start s:justify-end items-center gap-4">
<button <button
class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800" 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 id="showNotesButton">Show
Notes</button> Notes</button>
<button <button
@ -29,40 +37,67 @@
</div> </div>
<!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) --> <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
<div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto" <div class="w-full h-fit hidden mt-5" id="notesContainer">
id="notesContainer">
{% for note in notes %} <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
<div class="w-[16.33%] h-[150px] shadow-sm p-5" style="background-color: {{note.color}}"> {% for note in notes %}
<p class="text-base text-slate-800">{{note.text}}</p> <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>
{% endfor %}
<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> </div>
</div> </div>
<!-- PROJECT TYPES LISTING AND USERS ACTIVITY SECTION --> <!-- PROJECT TYPES LISTING AND USERS ACTIVITY SECTION -->
<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5"> <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
<!-- LEFT SIDE / BUSINESS TYPES SECTION --> <!-- LEFT SIDE / BUSINESS TYPES SECTION -->
<div class="w-[74.5%]"> <div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5"> <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-slate-800 text-[30px] font-semibold">Businness Types</h1> <h1 class="text-slate-800 text-[30px] font-semibold">Businness Types</h1>
<!-- FILTERING --> <!-- FILTERING -->
<div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-between items-center"> <div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
<div class="flex justify-start items-center gap-5"> <div class="w-full s:w-fit flex justify-start items-center gap-5">
<div class="relative h-fit w-fit flex items-center"> <div class="relative h-fit w-full s:w-fit flex items-center">
<input type="text" placeholder="Enter Business Type" <input type="text" placeholder="Enter Business Type"
class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative"> class="py-2 px-3 border border-gray-300 rounded-md outline-none w-full s:w-[300px] h-[40px] relative">
<button class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white"> <button class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
<i class="fa fa-search"></i> <i class="fa fa-search"></i>
</button> </button>
</div> </div>
</div> </div>
<div> <div class="w-full s:w-fit">
<button <button
class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500 addBusinessTypeButton" data-modal-url="{% url 'addbusinesstype' %}">Add class="w-full s:w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500 addBusinessTypeButton" data-modal-url="{% url 'addbusinesstype' %}">Add
Business Type</button> Business Type</button>
</div> </div>
</div> </div>
@ -113,11 +148,11 @@
</div> </div>
<!-- RIGHT SIDE / USERS ACTIVITY --> <!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[23%] bg-white h-fit rounded-md shadow-md p-5"> <div class="hidden xxlg1: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> <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer"> <div class="w-full h-fit mt-2" id="activitiesContainer">
{% include 'recent-activities.html' %} {% include 'recent-activities.html' %}
</div> </div>
</div> </div>

85
osinaweb/templates/listing_pages/businesses.html
Unescape Escape View File

@ -2,11 +2,19 @@
{%load static%} {%load static%}
{% block title %}My Projects{% endblock %} {% block title %}My Projects{% endblock %}
{% block content %} {% block content %}
<!-- USERS ACTIVITIES ON MOBILE -->
<div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xxlg1: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 --> <!-- NOTES SECTION -->
<div class="w-full h-fit flex justify-between items-center px-10 pb-5"> <div class="w-full px-5 s:px-9 pb-5">
<div class="relative w-full h-fit bg-white shadow-md rounded-md p-5"> <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
<div class="w-full flex justify-between items-center"> <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
<div> <div class="w-full s:w-fit">
<p class="text-base text-gray-500">Recent Note:</p> <p class="text-base text-gray-500">Recent Note:</p>
<div class="flex justify-start items-center gap-2"> <div class="flex justify-start items-center gap-2">
<div class="w-[13px] h-[13px] bg-red-200 rounded-full" <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
@ -16,9 +24,9 @@
<p class="text-slate-700">{{recent_note.text}}</p> <p class="text-slate-700">{{recent_note.text}}</p>
</div> </div>
</div> </div>
<div class="flex justify-end items-center gap-4"> <div class="w-full s:w-fit flex justify-start s:justify-end items-center gap-4">
<button <button
class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800" 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 id="showNotesButton">Show
Notes</button> Notes</button>
<button <button
@ -30,42 +38,69 @@
</div> </div>
<!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) --> <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
<div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto" <div class="w-full h-fit hidden mt-5" id="notesContainer">
id="notesContainer">
{% for note in notes %} <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
<div class="w-[16.33%] h-[150px] shadow-sm p-5" style="background-color: {{note.color}}"> {% for note in notes %}
<p class="text-base text-slate-800">{{note.text}}</p> <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>
{% endfor %}
<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> </div>
</div> </div>
<!-- BUSINESSES AND USERS ACTIVITY SECTION --> <!-- BUSINESSES AND USERS ACTIVITY SECTION -->
<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5"> <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
<!-- LEFT SIDE / BUSINESSES SECTION --> <!-- LEFT SIDE / BUSINESSES SECTION -->
<div class="w-[74.5%]"> <div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5"> <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-slate-800 text-[30px] font-semibold">Businesses</h1> <h1 class="text-slate-800 text-[30px] font-semibold">Businesses</h1>
<!-- FILTERING --> <!-- FILTERING -->
<div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-between items-center"> <div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
<div class="flex justify-start items-center gap-5"> <div class="w-full s:w-fit flex justify-start items-center gap-5">
<div class="relative h-fit w-fit flex items-center"> <div class="relative h-fit w-full s:w-fit flex items-center">
<input type="text" placeholder="Enter Business Name" <input type="text" placeholder="Enter Business Name"
class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative"> class="py-2 px-3 border border-gray-300 rounded-md outline-none w-full s:w-[300px] h-[40px] relative">
<button <button
class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white"> class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
<i class="fa fa-search"></i> <i class="fa fa-search"></i>
</button> </button>
</div> </div>
</div> </div>
<div> <div class="w-full s:w-fit">
<a href="{% url 'addbusiness' %}"> <a href="{% url 'addbusiness' %}" class="w-full s:w-fit">
<button <button
class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Add class="w-full s:w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Add
Business</button> Business</button>
</a> </a>
</div> </div>
@ -82,8 +117,8 @@
Name Name
</th> </th>
<th scope="col" <th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap"> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Customer Customer
</th> </th>
<th scope="col" <th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap"> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
@ -143,11 +178,11 @@
</div> </div>
<!-- RIGHT SIDE / USERS ACTIVITY --> <!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[23%] bg-white h-fit rounded-md shadow-md p-5"> <div class="hidden xxlg1: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> <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer"> <div class="w-full h-fit mt-2" id="activitiesContainer">
{% include 'recent-activities.html' %} {% include 'recent-activities.html' %}
</div> </div>
</div> </div>

81
osinaweb/templates/listing_pages/customers.html
Unescape Escape View File

@ -2,11 +2,18 @@
{%load static%} {%load static%}
{% block title %}My Projects{% endblock %} {% block title %}My Projects{% endblock %}
{% block content %} {% block content %}
<!-- USERS ACTIVITIES ON MOBILE -->
<div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xxlg1: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 --> <!-- NOTES SECTION -->
<div class="w-full h-fit flex justify-between items-center px-10 pb-5"> <div class="w-full px-5 s:px-9 pb-5">
<div class="relative w-full h-fit bg-white shadow-md rounded-md p-5"> <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
<div class="w-full flex justify-between items-center"> <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
<div> <div class="w-full s:w-fit">
<p class="text-base text-gray-500">Recent Note:</p> <p class="text-base text-gray-500">Recent Note:</p>
<div class="flex justify-start items-center gap-2"> <div class="flex justify-start items-center gap-2">
<div class="w-[13px] h-[13px] bg-red-200 rounded-full" <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
@ -16,9 +23,9 @@
<p class="text-slate-700">{{recent_note.text}}</p> <p class="text-slate-700">{{recent_note.text}}</p>
</div> </div>
</div> </div>
<div class="flex justify-end items-center gap-4"> <div class="w-full s:w-fit flex justify-start s:justify-end items-center gap-4">
<button <button
class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800" 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 id="showNotesButton">Show
Notes</button> Notes</button>
<button <button
@ -30,42 +37,70 @@
</div> </div>
<!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) --> <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
<div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto" <div class="w-full h-fit hidden mt-5" id="notesContainer">
id="notesContainer">
{% for note in notes %} <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
<div class="w-[16.33%] h-[150px] shadow-sm p-5" style="background-color: {{note.color}}"> {% for note in notes %}
<p class="text-base text-slate-800">{{note.text}}</p> <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>
{% endfor %}
<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> </div>
</div> </div>
<!-- CUSTOMERS AND USERS ACTIVITY SECTION --> <!-- CUSTOMERS AND USERS ACTIVITY SECTION -->
<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5"> <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
<!-- LEFT SIDE / CUSTOMERS SECTION --> <!-- LEFT SIDE / CUSTOMERS SECTION -->
<div class="w-[74.5%]"> <div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5"> <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-slate-800 text-[30px] font-semibold">Customers</h1> <h1 class="text-slate-800 text-[30px] font-semibold">Customers</h1>
<!-- FILTERING --> <!-- FILTERING -->
<div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-between items-center"> <div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
<div class="flex justify-start items-center gap-5"> <div class="w-full s:w-fit flex justify-start items-center gap-5">
<div class="relative h-fit w-fit flex items-center"> <div class="relative h-fit w-full s:w-fit flex items-center">
<input type="text" placeholder="Enter Customer Name" <input type="text" placeholder="Enter Customer Name"
class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative"> class="py-2 px-3 border border-gray-300 rounded-md outline-none w-full s:w-[300px] h-[40px] relative">
<button <button
class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white"> class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
<i class="fa fa-search"></i> <i class="fa fa-search"></i>
</button> </button>
</div> </div>
</div> </div>
<div> <div class="w-full s:w-fit">
<a href="{% url 'addcustomer' %}"> <a href="{% url 'addcustomer' %}" class="w-full s:w-fit">
<button <button
class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Add class="w-full s:w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Add
Customer</button> Customer</button>
</a> </a>
</div> </div>
@ -161,8 +196,10 @@
</div> </div>
</div> </div>
</div> </div>
<!-- RIGHT SIDE / USERS ACTIVITY --> <!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[23%] bg-white h-fit rounded-md shadow-md p-5"> <div class="hidden xxlg1: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> <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer"> <div class="w-full h-fit mt-2" id="activitiesContainer">

8
osinaweb/templates/listing_pages/daily-reports.html
Unescape Escape View File

@ -2,11 +2,13 @@
{%load static%} {%load static%}
{% block content %} {% block content %}
<div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xlg1:hidden bottom-3 right-3 p-2 flex justify-center items-center cursor-pointer usersActivityIcon z-20" <!-- USERS ACTIVITIES ON MOBILE -->
<div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xxlg1:hidden bottom-3 right-3 p-2 flex justify-center items-center cursor-pointer usersActivityIcon z-20"
data-modal-url="{% url 'getupdatedactivities' %}"> data-modal-url="{% url 'getupdatedactivities' %}">
<img src="{% static 'images/usersactivity.png' %}" alt="Users"> <img src="{% static 'images/usersactivity.png' %}" alt="Users">
</div> </div>
<!-- NOTES SECTION --> <!-- NOTES SECTION -->
<div class="w-full px-5 s:px-9 pb-5"> <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 h-fit bg-white shadow-md rounded-md p-5">
@ -79,7 +81,7 @@
<!-- DAILY REPORTS USERS ACTIVITY SECTION --> <!-- DAILY REPORTS USERS ACTIVITY SECTION -->
<div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5"> <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
<!-- LEFT SIDE / USERS SECTION --> <!-- LEFT SIDE / USERS SECTION -->
<div class="w-full xlg1:w-[75%]"> <div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5"> <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-slate-800 text-[30px] font-semibold">Daily Report</h1> <h1 class="text-slate-800 text-[30px] font-semibold">Daily Report</h1>
@ -168,7 +170,7 @@
</div> </div>
<!-- RIGHT SIDE / USERS ACTIVITY --> <!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="hidden xlg1:block w-[25%] bg-white h-fit rounded-md shadow-md p-5"> <div class="hidden xxlg1: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> <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer"> <div class="w-full h-fit mt-2" id="activitiesContainer">

79
osinaweb/templates/listing_pages/project-types.html
Unescape Escape View File

@ -1,11 +1,19 @@
{% extends "main.html" %} {% extends "main.html" %}
{%load static%} {%load static%}
{% block content %} {% block content %}
<!-- USERS ACTIVITIES ON MOBILE -->
<div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xxlg1: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 --> <!-- NOTES SECTION -->
<div class="w-full h-fit flex justify-between items-center px-10 pb-5"> <div class="w-full px-5 s:px-9 pb-5">
<div class="relative w-full h-fit bg-white shadow-md rounded-md p-5"> <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
<div class="w-full flex justify-between items-center"> <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
<div> <div class="w-full s:w-fit">
<p class="text-base text-gray-500">Recent Note:</p> <p class="text-base text-gray-500">Recent Note:</p>
<div class="flex justify-start items-center gap-2"> <div class="flex justify-start items-center gap-2">
<div class="w-[13px] h-[13px] bg-red-200 rounded-full" <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
@ -15,9 +23,9 @@
<p class="text-slate-700">{{recent_note.text}}</p> <p class="text-slate-700">{{recent_note.text}}</p>
</div> </div>
</div> </div>
<div class="flex justify-end items-center gap-4"> <div class="w-full s:w-fit flex justify-start s:justify-end items-center gap-4">
<button <button
class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800" 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 id="showNotesButton">Show
Notes</button> Notes</button>
<button <button
@ -29,40 +37,67 @@
</div> </div>
<!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) --> <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
<div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto" <div class="w-full h-fit hidden mt-5" id="notesContainer">
id="notesContainer">
{% for note in notes %} <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
<div class="w-[16.33%] h-[150px] shadow-sm p-5" style="background-color: {{note.color}}"> {% for note in notes %}
<p class="text-base text-slate-800">{{note.text}}</p> <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>
{% endfor %}
<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> </div>
</div> </div>
<!-- PROJECT TYPES LISTING AND USERS ACTIVITY SECTION --> <!-- PROJECT TYPES LISTING AND USERS ACTIVITY SECTION -->
<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5"> <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
<!-- LEFT SIDE / PROJECT TYPES SECTION --> <!-- LEFT SIDE / PROJECT TYPES SECTION -->
<div class="w-[74.5%]"> <div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5"> <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-slate-800 text-[30px] font-semibold">Project Types</h1> <h1 class="text-slate-800 text-[30px] font-semibold">Project Types</h1>
<!-- FILTERING --> <!-- FILTERING -->
<div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-between items-center"> <div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
<div class="flex justify-start items-center gap-5"> <div class="w-full s:w-fit flex justify-start items-center gap-5">
<div class="relative h-fit w-fit flex items-center"> <div class="relative h-fit w-full s:w-fit flex items-center">
<input type="text" placeholder="Enter Project Type" <input type="text" placeholder="Enter Project Type"
class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative"> class="py-2 px-3 border border-gray-300 rounded-md outline-none w-full s:w-[300px] h-[40px] relative">
<button class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white"> <button class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
<i class="fa fa-search"></i> <i class="fa fa-search"></i>
</button> </button>
</div> </div>
</div> </div>
<div> <div class="w-full s:w-fit">
<button <button
class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500 addProjectTypeButton" data-modal-url="{% url 'addprojecttype' %}">Add class="w-full s:w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500 addProjectTypeButton" data-modal-url="{% url 'addprojecttype' %}">Add
Project Type</button> Project Type</button>
</div> </div>
</div> </div>
@ -113,11 +148,11 @@
</div> </div>
<!-- RIGHT SIDE / USERS ACTIVITY --> <!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[23%] bg-white h-fit rounded-md shadow-md p-5"> <div class="hidden xxlg1: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> <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer"> <div class="w-full h-fit mt-2" id="activitiesContainer">
{% include 'recent-activities.html' %} {% include 'recent-activities.html' %}
</div> </div>
</div> </div>

7
osinaweb/templates/listing_pages/projects.html
Unescape Escape View File

@ -3,7 +3,8 @@
{% block title %}My Projects{% endblock %} {% block title %}My Projects{% endblock %}
{% block content %} {% block content %}
<div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xlg1:hidden bottom-3 right-3 p-2 flex justify-center items-center cursor-pointer usersActivityIcon z-20" <!-- USERS ACTIVITIES ON MOBILE -->
<div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xxlg1:hidden bottom-3 right-3 p-2 flex justify-center items-center cursor-pointer usersActivityIcon z-20"
data-modal-url="{% url 'getupdatedactivities' %}"> data-modal-url="{% url 'getupdatedactivities' %}">
<img src="{% static 'images/usersactivity.png' %}" alt="Users"> <img src="{% static 'images/usersactivity.png' %}" alt="Users">
</div> </div>
@ -80,7 +81,7 @@
<!-- PROJECTS AND USERS ACTIVITY SECTION --> <!-- PROJECTS AND USERS ACTIVITY SECTION -->
<div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5"> <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
<!-- LEFT SIDE / PROJECTS SECTION --> <!-- LEFT SIDE / PROJECTS SECTION -->
<div class="w-full xlg1:w-[75%]"> <div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5"> <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-slate-800 text-[30px] font-semibold">My Projects</h1> <h1 class="text-slate-800 text-[30px] font-semibold">My Projects</h1>
@ -211,7 +212,7 @@
</div> </div>
<!-- RIGHT SIDE / USERS ACTIVITY --> <!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="hidden xlg1:block w-[25%] bg-white h-fit rounded-md shadow-md p-5"> <div class="hidden xxlg1: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> <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer"> <div class="w-full h-fit mt-2" id="activitiesContainer">

77
osinaweb/templates/listing_pages/references.html
Unescape Escape View File

@ -1,11 +1,19 @@
{% extends "main.html" %} {% extends "main.html" %}
{%load static%} {%load static%}
{% block content %} {% block content %}
<!-- USERS ACTIVITIES ON MOBILE -->
<div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xxlg1: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 --> <!-- NOTES SECTION -->
<div class="w-full h-fit flex justify-between items-center px-10 pb-5"> <div class="w-full px-5 s:px-9 pb-5">
<div class="relative w-full h-fit bg-white shadow-md rounded-md p-5"> <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
<div class="w-full flex justify-between items-center"> <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
<div> <div class="w-full s:w-fit">
<p class="text-base text-gray-500">Recent Note:</p> <p class="text-base text-gray-500">Recent Note:</p>
<div class="flex justify-start items-center gap-2"> <div class="flex justify-start items-center gap-2">
<div class="w-[13px] h-[13px] bg-red-200 rounded-full" <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
@ -15,9 +23,9 @@
<p class="text-slate-700">{{recent_note.text}}</p> <p class="text-slate-700">{{recent_note.text}}</p>
</div> </div>
</div> </div>
<div class="flex justify-end items-center gap-4"> <div class="w-full s:w-fit flex justify-start s:justify-end items-center gap-4">
<button <button
class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800" 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 id="showNotesButton">Show
Notes</button> Notes</button>
<button <button
@ -29,41 +37,68 @@
</div> </div>
<!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) --> <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
<div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto" <div class="w-full h-fit hidden mt-5" id="notesContainer">
id="notesContainer">
{% for note in notes %} <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
<div class="w-[16.33%] h-[150px] shadow-sm p-5" style="background-color: {{note.color}}"> {% for note in notes %}
<p class="text-base text-slate-800">{{note.text}}</p> <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>
{% endfor %}
<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> </div>
</div> </div>
<!-- REFERENCES LISTING AND USERS ACTIVITY SECTION --> <!-- REFERENCES LISTING AND USERS ACTIVITY SECTION -->
<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5"> <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
<!-- LEFT SIDE / REFERENCES SECTION --> <!-- LEFT SIDE / REFERENCES SECTION -->
<div class="w-[74.5%]"> <div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5"> <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-slate-800 text-[30px] font-semibold">References</h1> <h1 class="text-slate-800 text-[30px] font-semibold">References</h1>
<!-- FILTERING --> <!-- FILTERING -->
<div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-between items-center"> <div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
<div class="flex justify-start items-center gap-5"> <div class="w-full s:w-fit flex justify-start items-center gap-5">
<div class="relative h-fit w-fit flex items-center"> <div class="relative h-fit w-full s:w-fit flex items-center">
<input type="text" placeholder="Enter Reference" <input type="text" placeholder="Enter Reference"
class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative"> class="py-2 px-3 border border-gray-300 rounded-md outline-none w-full s:w-[300px] h-[40px] relative">
<button <button
class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white"> class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
<i class="fa fa-search"></i> <i class="fa fa-search"></i>
</button> </button>
</div> </div>
</div> </div>
<div> <div class="w-full s:w-fit">
<button <button
class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500 addReferenceButton" class="w-full s:w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500 addReferenceButton"
data-modal-url="{% url 'addreference' %}">Add data-modal-url="{% url 'addreference' %}">Add
Reference</button> Reference</button>
</div> </div>
@ -123,7 +158,7 @@
</div> </div>
<!-- RIGHT SIDE / USERS ACTIVITY --> <!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[23%] bg-white h-fit rounded-md shadow-md p-5"> <div class="hidden xxlg1: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> <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer"> <div class="w-full h-fit mt-2" id="activitiesContainer">

79
osinaweb/templates/listing_pages/staff-positions.html
Unescape Escape View File

@ -2,11 +2,19 @@
{%load static%} {%load static%}
{% block title %}My Projects{% endblock %} {% block title %}My Projects{% endblock %}
{% block content %} {% block content %}
<!-- USERS ACTIVITIES ON MOBILE -->
<div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xxlg1: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 --> <!-- NOTES SECTION -->
<div class="w-full h-fit flex justify-between items-center px-10 pb-5"> <div class="w-full px-5 s:px-9 pb-5">
<div class="relative w-full h-fit bg-white shadow-md rounded-md p-5"> <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
<div class="w-full flex justify-between items-center"> <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
<div> <div class="w-full s:w-fit">
<p class="text-base text-gray-500">Recent Note:</p> <p class="text-base text-gray-500">Recent Note:</p>
<div class="flex justify-start items-center gap-2"> <div class="flex justify-start items-center gap-2">
<div class="w-[13px] h-[13px] bg-red-200 rounded-full" <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
@ -16,9 +24,9 @@
<p class="text-slate-700">{{recent_note.text}}</p> <p class="text-slate-700">{{recent_note.text}}</p>
</div> </div>
</div> </div>
<div class="flex justify-end items-center gap-4"> <div class="w-full s:w-fit flex justify-start s:justify-end items-center gap-4">
<button <button
class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800" 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 id="showNotesButton">Show
Notes</button> Notes</button>
<button <button
@ -30,41 +38,68 @@
</div> </div>
<!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) --> <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
<div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto" <div class="w-full h-fit hidden mt-5" id="notesContainer">
id="notesContainer">
{% for note in notes %} <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
<div class="w-[16.33%] h-[150px] shadow-sm p-5" style="background-color: {{note.color}}"> {% for note in notes %}
<p class="text-base text-slate-800">{{note.text}}</p> <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>
{% endfor %}
<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> </div>
</div> </div>
<!-- USERS AND USERS ACTIVITY SECTION --> <!-- USERS AND USERS ACTIVITY SECTION -->
<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5"> <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
<!-- LEFT SIDE / USERS SECTION --> <!-- LEFT SIDE / USERS SECTION -->
<div class="w-[74.5%]"> <div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5"> <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-slate-800 text-[30px] font-semibold">Staff Positions</h1> <h1 class="text-slate-800 text-[30px] font-semibold">Staff Positions</h1>
<!-- FILTERING --> <!-- FILTERING -->
<div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-between items-center"> <div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
<div class="flex justify-start items-center gap-5"> <div class="w-full s:w-fit flex justify-start items-center gap-5">
<div class="relative h-fit w-fit flex items-center"> <div class="relative h-fit w-full s:w-fit flex items-center">
<input type="text" placeholder="Enter Position" <input type="text" placeholder="Enter Position"
class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative"> class="py-2 px-3 border border-gray-300 rounded-md outline-none w-full s:w-[300px] h-[40px] relative">
<button <button
class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white"> class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
<i class="fa fa-search"></i> <i class="fa fa-search"></i>
</button> </button>
</div> </div>
</div> </div>
<div> <div class="w-full s:w-fit">
<button <button
class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500 addStaffPositionButton" class="w-full s:w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500 addStaffPositionButton"
data-modal-url="{% url 'addstaffposition' %}">Add data-modal-url="{% url 'addstaffposition' %}">Add
Staff Position</button> Staff Position</button>
</div> </div>
@ -116,11 +151,11 @@
</div> </div>
<!-- RIGHT SIDE / USERS ACTIVITY --> <!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[23%] bg-white h-fit rounded-md shadow-md p-5"> <div class="hidden xxlg1: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> <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer"> <div class="w-full h-fit mt-2" id="activitiesContainer">
{% include 'recent-activities.html' %} {% include 'recent-activities.html' %}
</div> </div>
</div> </div>

87
osinaweb/templates/listing_pages/staffs.html
Unescape Escape View File

@ -2,11 +2,19 @@
{%load static%} {%load static%}
{% block title %}My Projects{% endblock %} {% block title %}My Projects{% endblock %}
{% block content %} {% block content %}
<!-- USERS ACTIVITIES ON MOBILE -->
<div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xxlg1: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 --> <!-- NOTES SECTION -->
<div class="w-full h-fit flex justify-between items-center px-10 pb-5"> <div class="w-full px-5 s:px-9 pb-5">
<div class="relative w-full h-fit bg-white shadow-md rounded-md p-5"> <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
<div class="w-full flex justify-between items-center"> <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
<div> <div class="w-full s:w-fit">
<p class="text-base text-gray-500">Recent Note:</p> <p class="text-base text-gray-500">Recent Note:</p>
<div class="flex justify-start items-center gap-2"> <div class="flex justify-start items-center gap-2">
<div class="w-[13px] h-[13px] bg-red-200 rounded-full" <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
@ -16,9 +24,9 @@
<p class="text-slate-700">{{recent_note.text}}</p> <p class="text-slate-700">{{recent_note.text}}</p>
</div> </div>
</div> </div>
<div class="flex justify-end items-center gap-4"> <div class="w-full s:w-fit flex justify-start s:justify-end items-center gap-4">
<button <button
class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800" 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 id="showNotesButton">Show
Notes</button> Notes</button>
<button <button
@ -30,41 +38,70 @@
</div> </div>
<!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) --> <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
<div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto" <div class="w-full h-fit hidden mt-5" id="notesContainer">
id="notesContainer">
{% for note in notes %} <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
<div class="w-[16.33%] h-[150px] shadow-sm p-5" style="background-color: {{note.color}}"> {% for note in notes %}
<p class="text-base text-slate-800">{{note.text}}</p> <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>
{% endfor %}
<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> </div>
</div> </div>
<!-- USERS AND USERS ACTIVITY SECTION --> <!-- USERS AND USERS ACTIVITY SECTION -->
<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5"> <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
<!-- LEFT SIDE / USERS SECTION --> <!-- LEFT SIDE / USERS SECTION -->
<div class="w-[74.5%]"> <div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5"> <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-slate-800 text-[30px] font-semibold">Staffs</h1> <h1 class="text-slate-800 text-[30px] font-semibold">Staffs</h1>
<!-- FILTERING --> <!-- FILTERING -->
<div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-between items-center"> <div
<div class="flex justify-start items-center gap-5"> class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
<div class="relative h-fit w-fit flex items-center"> <div class="w-full s:w-fit flex justify-start items-center gap-5">
<div class="relative h-fit w-full s:w-fit flex items-center">
<input type="text" placeholder="Enter Username" <input type="text" placeholder="Enter Username"
class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative"> class="py-2 px-3 border border-gray-300 rounded-md outline-none w-full s:w-[300px] h-[40px] relative">
<button class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white"> <button
class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
<i class="fa fa-search"></i> <i class="fa fa-search"></i>
</button> </button>
</div> </div>
</div> </div>
<div> <div class="w-full s:w-fit">
<a href="{% url 'adduser' %}"> <a href="{% url 'adduser' %}" class="w-full s:w-fit">
<button <button
class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Add class="w-full s:w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Add
Staff</button> Staff</button>
</a> </a>
</div> </div>
@ -102,7 +139,7 @@
class="w-full h-full object-cover rounded-full"> class="w-full h-full object-cover rounded-full">
</div> </div>
<p class="text-gray-500">{{staff.user.first_name}} {{staff.user.last_name}}</p> <p class="text-gray-500">{{staff.user.first_name}} {{staff.user.last_name}}</p>
</div> </div>
</td> </td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300"> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
@ -135,11 +172,11 @@
</div> </div>
<!-- RIGHT SIDE / USERS ACTIVITY --> <!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[23%] bg-white h-fit rounded-md shadow-md p-5"> <div class="hidden xxlg1: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> <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer"> <div class="w-full h-fit mt-2" id="activitiesContainer">
{% include 'recent-activities.html' %} {% include 'recent-activities.html' %}
</div> </div>
</div> </div>

86
osinaweb/templates/listing_pages/tags.html
Unescape Escape View File

@ -1,11 +1,19 @@
{% extends "main.html" %} {% extends "main.html" %}
{%load static%} {%load static%}
{% block content %} {% block content %}
<!-- USERS ACTIVITIES ON MOBILE -->
<div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xxlg1: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 --> <!-- NOTES SECTION -->
<div class="w-full h-fit flex justify-between items-center px-10 pb-5"> <div class="w-full px-5 s:px-9 pb-5">
<div class="relative w-full h-fit bg-white shadow-md rounded-md p-5"> <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
<div class="w-full flex justify-between items-center"> <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
<div> <div class="w-full s:w-fit">
<p class="text-base text-gray-500">Recent Note:</p> <p class="text-base text-gray-500">Recent Note:</p>
<div class="flex justify-start items-center gap-2"> <div class="flex justify-start items-center gap-2">
<div class="w-[13px] h-[13px] bg-red-200 rounded-full" <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
@ -15,9 +23,9 @@
<p class="text-slate-700">{{recent_note.text}}</p> <p class="text-slate-700">{{recent_note.text}}</p>
</div> </div>
</div> </div>
<div class="flex justify-end items-center gap-4"> <div class="w-full s:w-fit flex justify-start s:justify-end items-center gap-4">
<button <button
class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800" 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 id="showNotesButton">Show
Notes</button> Notes</button>
<button <button
@ -29,41 +37,71 @@
</div> </div>
<!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) --> <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
<div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto" <div class="w-full h-fit hidden mt-5" id="notesContainer">
id="notesContainer">
{% for note in notes %} <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
<div class="w-[16.33%] h-[150px] shadow-sm p-5" style="background-color: {{note.color}}"> {% for note in notes %}
<p class="text-base text-slate-800">{{note.text}}</p> <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>
{% endfor %}
<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> </div>
</div> </div>
<!-- PROJECT TYPES LISTING AND USERS ACTIVITY SECTION --> <!-- PROJECT TYPES LISTING AND USERS ACTIVITY SECTION -->
<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5"> <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
<!-- LEFT SIDE / PROJECT TYPES SECTION --> <!-- LEFT SIDE / PROJECT TYPES SECTION -->
<div class="w-[74.5%]"> <div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5"> <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-slate-800 text-[30px] font-semibold">Tags</h1> <h1 class="text-slate-800 text-[30px] font-semibold">Tags</h1>
<!-- FILTERING --> <!-- FILTERING -->
<div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-between items-center"> <div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row gap-3 justify-between items-center">
<div class="flex justify-start items-center gap-5"> <div class="w-full s:w-fit flex justify-start items-center gap-5">
<div class="relative h-fit w-fit flex items-center"> <div class="relative h-fit w-full s:w-fit flex items-center">
<input type="text" placeholder="Enter Tag Name" <input type="text" placeholder="Enter Tag Name"
class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative"> class="py-2 px-3 border border-gray-300 rounded-md outline-none w-full s:w-[300px] h-[40px] relative">
<button class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white"> <button
class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
<i class="fa fa-search"></i> <i class="fa fa-search"></i>
</button> </button>
</div> </div>
</div> </div>
<div> <div class="w-full s:w-fit">
<button <button
class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500 addTagButton" data-modal-url="{% url 'addtag' %}">Add class="w-full s:w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500 addTagButton"
Tag</button> data-modal-url="{% url 'addtag' %}">Add
Tag</button>
</div> </div>
</div> </div>
@ -113,11 +151,11 @@
</div> </div>
<!-- RIGHT SIDE / USERS ACTIVITY --> <!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[23%] bg-white h-fit rounded-md shadow-md p-5"> <div class="hidden xxlg1: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> <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer"> <div class="w-full h-fit mt-2" id="activitiesContainer">
{% include 'recent-activities.html' %} {% include 'recent-activities.html' %}
</div> </div>
</div> </div>

7
osinaweb/templates/listing_pages/tasks.html
Unescape Escape View File

@ -2,7 +2,8 @@
{%load static%} {%load static%}
{% block content %} {% block content %}
<div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xlg1:hidden bottom-3 right-3 p-2 flex justify-center items-center cursor-pointer usersActivityIcon z-20" <!-- USERS ACTIVITIES ON MOBILE -->
<div class="w-[55px] h-[55px] bg-slate-700 rounded-full fixed xxlg1:hidden bottom-3 right-3 p-2 flex justify-center items-center cursor-pointer usersActivityIcon z-20"
data-modal-url="{% url 'getupdatedactivities' %}"> data-modal-url="{% url 'getupdatedactivities' %}">
<img src="{% static 'images/usersactivity.png' %}" alt="Users"> <img src="{% static 'images/usersactivity.png' %}" alt="Users">
</div> </div>
@ -78,7 +79,7 @@
<!-- TASKS AND USERS ACTIVITY SECTION --> <!-- TASKS AND USERS ACTIVITY SECTION -->
<div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5"> <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">
<!-- LEFT SIDE / TASKS SECTION --> <!-- LEFT SIDE / TASKS SECTION -->
<div class="w-full xlg1:w-[75%]"> <div class="w-full xxlg1:w-[75%]">
<div class="w-full h-fit bg-white rounded-md shadow-md p-5"> <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
<h1 class="text-slate-800 text-[30px] font-semibold">My Tasks</h1> <h1 class="text-slate-800 text-[30px] font-semibold">My Tasks</h1>
@ -466,7 +467,7 @@
</div> </div>
<!-- RIGHT SIDE / USERS ACTIVITY --> <!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="hidden xlg1:block w-[25%] bg-white h-fit rounded-md shadow-md p-5"> <div class="hidden xxlg1: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> <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer"> <div class="w-full h-fit mt-2" id="activitiesContainer">

168
osinaweb/templates/main.html
Unescape Escape View File

@ -15,6 +15,12 @@
<!-- DRAGGABLE SLIDER LINKS --> <!-- DRAGGABLE SLIDER LINKS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<style>
.userProfileContainer:hover .userName {
display: block;
}
</style>
</head> </head>
<body class="bg-gray-200"> <body class="bg-gray-200">
@ -302,7 +308,7 @@
</div> </div>
</div> </div>
<div class="h-[150px] bg-white shadow-md rounded-md p-5"> <div class="bg-white shadow-md rounded-md p-5">
<div class="w-full h-full flex flex-col justify-between items-center"> <div class="w-full h-full flex flex-col justify-between items-center">
<div class="w-full flex justify-between items-center"> <div class="w-full flex justify-between items-center">
<p class="text-[22px] text-slate-800 font-bold uppercase">Tasks</p> <p class="text-[22px] text-slate-800 font-bold uppercase">Tasks</p>
@ -315,7 +321,7 @@
</div> </div>
</div> </div>
<div class="h-[150px] bg-white shadow-md rounded-md p-5"> <div class="bg-white shadow-md rounded-md p-5">
<div class="w-full h-full flex flex-col justify-between items-center"> <div class="w-full h-full flex flex-col justify-between items-center">
<div class="w-full flex justify-between items-center"> <div class="w-full flex justify-between items-center">
<p class="text-[22px] text-slate-800 font-bold uppercase">Projects</p> <p class="text-[22px] text-slate-800 font-bold uppercase">Projects</p>
@ -328,15 +334,157 @@
</div> </div>
</div> </div>
<div class="h-fit md:h-[150px] bg-white shadow-md rounded-md p-5 cursor-pointer"> <div class="bg-white shadow-md rounded-md p-5 cursor-pointer">
<div class="w-full h-full flex flex-col justify-between items-center"> <div class="w-full h-full flex flex-col gap-3 items-center">
<div class="w-full flex justify-between items-center"> <div class="w-full flex justify-between items-center">
<p class="text-[22px] text-slate-800 font-bold uppercase">Connected Users</p> <p class="text-[22px] text-slate-800 font-bold uppercase">Connected Users</p>
<div class="w-[18px] h-[18px] bg-gradient-to-r from-green-500 via-green-600 to-green-700 rounded-full shadow-md border border-gray-200 connectedUsersDot"></div> <div
class="w-[40px] h-[40px] bg-white border-2 rounded-full border-green-700 flex justify-center items-center">
<p class="text-green-700 font-semibold">14</p>
</div>
</div> </div>
<div
class="w-[60px] h-[60px] bg-white border-2 rounded-full border-green-700 flex justify-center items-center"> <div class="w-full flex flex-wrap gap-2">
<p class="text-green-700 text-xl font-semibold">2</p> <div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -364,6 +512,10 @@
<!-- TO OPEN TASKS ACTIONS BUTTONS CONTAINER ON MOBILE --> <!-- TO OPEN TASKS ACTIONS BUTTONS CONTAINER ON MOBILE -->
<script type="text/javascript" src='{% static "js/tasks.js" %}'></script> <script type="text/javascript" src='{% static "js/tasks.js" %}'></script>
<!-- DRAGGABLE SLIDER SCRIPT FOR NOTES ON MOBILE -->
<script type="text/javascript" src='{% static "js/draggable-slider.js" %}'></script>
</body> </body>
</html> </html>

8
osinaweb/templates/recent-activities.html
Unescape Escape View File

@ -8,7 +8,7 @@
<div class="w-full flex flex-col py-3"> <div class="w-full flex flex-col py-3">
<div class="w-full flex flex-col justify-center items-start gap-2"> <div class="w-full flex flex-col justify-center items-start gap-2">
<div class="w-full flex justify-between items-center gap-2"> <div class="w-full flex justify-between items-center gap-2">
<div class="flex justify-start gap-2"> <div class="flex justify-start gap-2 cursor-pointer userRecentActivitiesButton" data-modal-url="{% url 'userrecentativities' latest.status.staff.user.id %}">
<div class="w-[45px] h-[45px] rounded-full"> <div class="w-[45px] h-[45px] rounded-full">
<img src='{{latest.status.staff.image.url}}' alt="user profile" <img src='{{latest.status.staff.image.url}}' alt="user profile"
class="w-full h-full object-cover rounded-full"> class="w-full h-full object-cover rounded-full">
@ -34,10 +34,10 @@
</div> </div>
<!-- Add comment section --> <!-- Add comment section -->
<div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md"> <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md relative">
<input type="text" placeholder="Add Comment..." <input type="text" placeholder="Add Comment..."
class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md"> class="outline-none text-gray-500 px-3 w-full text-sm h-[40px] rounded-tl-md rounded-bl-md">
<button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md"> <button class="w-fit absolute right-0 h-full px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
<i class="fa fa-send" style="color: white; font-size: 15px;"></i> <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
</button> </button>
</div> </div>

47
osinaweb/templates/user-recent-activities.html
Unescape Escape View File

@ -0,0 +1,47 @@
{% load static %}
<link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
{% for latest in user_statuses_time_ago %}
<div class="w-full flex flex-col py-3">
<div class="w-full flex flex-col justify-center items-start gap-2">
<div class="w-full flex justify-between items-center gap-2">
<div class="flex justify-start gap-2">
<div class="w-[45px] h-[45px] rounded-full">
<img src='{{latest.status.staff.image.url}}' alt="user profile"
class="w-full h-full object-cover rounded-full">
</div>
<div class="flex flex-col">
<h1 class="text-sm text-slate-700 font-semibold">{{latest.status.staff.user.first_name}}
{{latest.status.staff.user.last_name}}</h1>
{% if latest.time_ago == '0min ago' %}
<p class="text-sm text-gray-500">Just Now</p>
{%else %}
<p class="text-sm text-gray-500">{{ latest.time_ago}}</p>
{%endif%}
</div>
</div>
<div class="cursor-pointer">
<i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
</div>
</div>
<!-- Status -->
<div class="w-full">
<p class="text-sm text-gray-500">{{latest.status.text}}</p>
</div>
<!-- Add comment section -->
<div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md relative">
<input type="text" placeholder="Add Comment..."
class="outline-none text-gray-500 px-3 w-full text-sm h-[40px] rounded-tl-md rounded-bl-md">
<button class="w-fit absolute right-0 h-full px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
<i class="fa fa-send" style="color: white; font-size: 15px;"></i>
</button>
</div>
</div>
</div>
{% endfor %}
Write Preview
Loading…
Cancel
Save