[ADD] HORILLA_THEME: Generic Profile template
This commit is contained in:
Horilla
341
horilla_theme/templates/generic/horilla_profile_view.html
Normal file
341
horilla_theme/templates/generic/horilla_profile_view.html
Normal file
@@ -0,0 +1,341 @@
|
||||
<div class="h-[calc(100vh_-_120px)]">
|
||||
<div class="grid grid-cols-12 gap-4 h-full">
|
||||
<!-- Left Column: 6/12 -->
|
||||
<div class="col-span-12 lg:col-span-3">
|
||||
<div class="bg-white rounded-md shadow-card h-full">
|
||||
<h5 class="flex items-center gap-3 text-sm font-semibold bg-primary-100 text-primary-600 px-4 py-4 rounded-tr-md rounded-tl-md mb-1">
|
||||
Employee
|
||||
<ul class="userlist">
|
||||
{% for object in instances|slice:"6" %}
|
||||
<li>
|
||||
<span hx-get="{{object.get_profile_url}}?{{request.GET.urlencode}}"
|
||||
{% if push_url %}
|
||||
hx-push-url = "{{object.get_push_url}}"
|
||||
{% endif %}
|
||||
hx-target="#{{view_id|safe}}"
|
||||
hx-swap="outerHTML"
|
||||
/>
|
||||
<img
|
||||
style="border-radius :50px ;overflow :hidden;"
|
||||
src="{{object.get_avatar}}"
|
||||
width="28px"
|
||||
/>
|
||||
</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% if display_count %}
|
||||
<li>
|
||||
<span>{{display_count}}</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</h5>
|
||||
<div class="p-3">
|
||||
<div class="relative mb-5">
|
||||
<input type="text" placeholder="Search for Candidates..." class="text-color-600 ps-10 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:[text-dark-100] text-sm [transition:.3s] focus:border-primary-600" />
|
||||
<i class="fas fa-search absolute left-3 top-0 bottom-0 m-auto flex items-center opacity-50 text-sm"></i>
|
||||
</div>
|
||||
|
||||
<div class="h-[calc(100vh_-_270px)] overflow-hidden overflow-y-auto">
|
||||
{% for object in instances|slice:"1:9" %}
|
||||
<div class="userbox active p-4 rounded-md mb-2">
|
||||
<div class="flex flex-col gap-3 relative">
|
||||
<div class="absolute inline-block dropdown-wrapper right-0 -top-1">
|
||||
<a class="cursor-pointer dropdown-toggle"><i class="fa-solid fa-ellipsis-vertical text-black"></i></a>
|
||||
<!-- Dropdown Content -->
|
||||
<div class="dropdown-menu absolute right-0 min-w-[100px] bg-white rounded-lg shadow-card py-2 hidden z-50 transition-all duration-200">
|
||||
<ul class="text-xs">
|
||||
<li>
|
||||
<button class="w-full text-left px-3 py-1 hover:text-primary-600 transition duration-300">Edit</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="w-full text-left px-3 py-1 hover:text-primary-600 transition duration-300">Delete</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<img
|
||||
style="border-radius :30px ;overflow :hidden;"
|
||||
src="{{object.get_avatar}}" alt="" width="35" />
|
||||
<h5 class="mb-1 font-medium text-sm">{{object.get_full_name}}</h5>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<div>
|
||||
<p class="text-[13px] text-[#565E6C] mb-1">
|
||||
{{object.get_subtitle}}
|
||||
</p>
|
||||
<p class="text-[13px] text-[#565E6C] mb-1">Register : 12 March 2023</p>
|
||||
</div>
|
||||
<div>
|
||||
<button class="w-8 h-8 rounded-md bg-[#f7f7f7] bg-primary-600 flex items-center justify-center text-white text-xs transition duration-300 hover:bg-primary-700"><i class="fa-solid fa-angle-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: 6/12 -->
|
||||
<div class="col-span-12 lg:col-span-9">
|
||||
<div class="bg-white rounded-md shadow-card p-3 mb-5">
|
||||
<ul class="usertablist">
|
||||
<li>
|
||||
<button class="active">About</button>
|
||||
</li>
|
||||
<li>
|
||||
<button>Work Type & Shift</button>
|
||||
</li>
|
||||
<li>
|
||||
<button>Groups & PermissionsAbout</button>
|
||||
</li>
|
||||
<li>
|
||||
<button>Note</button>
|
||||
</li>
|
||||
<li>
|
||||
<button>Documents</button>
|
||||
</li>
|
||||
<li>
|
||||
<button>Mail Log</button>
|
||||
</li>
|
||||
<li>
|
||||
<button>Leave</button>
|
||||
</li>
|
||||
<li>
|
||||
<button>History</button>
|
||||
</li>
|
||||
<li>
|
||||
<button>Scheduled Interviews</button>
|
||||
</li>
|
||||
<li>
|
||||
<button>Probationary Assessment</button>
|
||||
</li>
|
||||
<li>
|
||||
<button>Performance</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-md shadow-card p-3 mb-5 lg:mb-0">
|
||||
<div class="h-[calc(100vh_-_260px)] overflow-hidden overflow-y-auto">
|
||||
<div class="block lg:flex lg:items-center gap-3 mb-5 bg-[#f4f7fe] rounded-md p-3 lg:sticky top-0 z-10">
|
||||
<div class="rounded-md overflow-hidden mb-3 lg:mb-0">
|
||||
<img src="/assets/img/user1.jpg" alt="" width="120" class="rounded-md" />
|
||||
</div>
|
||||
<div class="block lg:flex items-center gap-2 justify-between flex-auto">
|
||||
<div class="mb-3 lg:mb-0">
|
||||
<h5 class="mb-1 font-medium text-sm">User ( PEPE )</h5>
|
||||
<p class="text-[13px] text-[#565E6C] mb-1">
|
||||
<i class="fa-solid fa-envelope pe-2"></i>
|
||||
abigail.roberts@horilla.com
|
||||
</p>
|
||||
<p class="text-[13px] text-[#565E6C] mb-1">
|
||||
<i class="fa-solid fa-phone pe-2"></i> 9876540015
|
||||
</p>
|
||||
<p class="text-[13px] text-[#565E6C] mb-1">
|
||||
<i class="fa-solid fa-mars pe-2"></i> Male
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-auto lg:w-[350px] bg-white rounded-md p-3 shadow-card">
|
||||
<h5 class="mb-1 font-medium text-sm">Emergency Contact</h5>
|
||||
<p class="flex justify-between text-[13px] text-[#565E6C] mb-1">
|
||||
<span>Name</span> <span class="text-color-600 font-semibold">None</span>
|
||||
</p>
|
||||
<p class="flex justify-between text-[13px] text-[#565E6C] mb-1">
|
||||
<span>Relationship</span> <span class="text-color-600 font-semibold">None</span>
|
||||
</p>
|
||||
<p class="flex justify-between text-[13px] text-[#565E6C] mb-1">
|
||||
<span>Phone Number</span> <span class="text-color-600 font-semibold">None</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block lg:grid grid-cols-12 gap-3">
|
||||
<div class="col-span-3 mb-3 lg:mb-0">
|
||||
<div class="border border-dark-50 rounded-md p-3 h-full">
|
||||
<h5 class="mb-1 font-medium text-sm">Personal Information</h5>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Date of birth</span>
|
||||
<p class="text-xs font-semibold">None</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Gender</span>
|
||||
<p class="text-xs font-semibold">Male</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Address</span>
|
||||
<p class="text-xs font-semibold">FPTPL</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Country</span>
|
||||
<p class="text-xs font-semibold">None</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Date of birth</span>
|
||||
<p class="text-xs font-semibold">None</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Gender</span>
|
||||
<p class="text-xs font-semibold">Male</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Address</span>
|
||||
<p class="text-xs font-semibold">FPTPL</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Country</span>
|
||||
<p class="text-xs font-semibold">None</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-9">
|
||||
<!-- Tab Buttons -->
|
||||
<div class="mytab flex" role="tablist">
|
||||
<button class="tab-button px-4 py-2 text-sm font-medium" data-tab="tab1">Work Information</button>
|
||||
<button class="tab-button px-4 py-2 text-sm font-medium" data-tab="tab2">Contract Details</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab Contents -->
|
||||
<div class="tab-content mt-4">
|
||||
<div class="tab-pane hidden" id="tab1">
|
||||
<!-- <h5 class="mb-1 font-medium text-sm">Work Information</h5> -->
|
||||
<div class="grid grid-cols-12 gap-3">
|
||||
<div class="col-span-6">
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Date of birth</span>
|
||||
<p class="text-xs font-semibold">None</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Gender</span>
|
||||
<p class="text-xs font-semibold">Male</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Address</span>
|
||||
<p class="text-xs font-semibold">FPTPL</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Country</span>
|
||||
<p class="text-xs font-semibold">None</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Date of birth</span>
|
||||
<p class="text-xs font-semibold">None</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Gender</span>
|
||||
<p class="text-xs font-semibold">Male</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Address</span>
|
||||
<p class="text-xs font-semibold">FPTPL</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Country</span>
|
||||
<p class="text-xs font-semibold">None</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<!-- <h5 class="mb-1 font-medium text-sm">Contact Details</h5> -->
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Date of birth</span>
|
||||
<p class="text-xs font-semibold">None</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Gender</span>
|
||||
<p class="text-xs font-semibold">Male</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Address</span>
|
||||
<p class="text-xs font-semibold">FPTPL</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Country</span>
|
||||
<p class="text-xs font-semibold">None</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Date of birth</span>
|
||||
<p class="text-xs font-semibold">None</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Gender</span>
|
||||
<p class="text-xs font-semibold">Male</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Address</span>
|
||||
<p class="text-xs font-semibold">FPTPL</p>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<span class="font-medium text-xs text-[#565E6C]">Country</span>
|
||||
<p class="text-xs font-semibold">None</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane hidden" id="tab2">
|
||||
<!-- <h5 class="mb-1 font-medium text-sm">Contract Details</h5> -->
|
||||
<div class="overflow-hidden overflow-y-auto">
|
||||
<table class="w-full">
|
||||
<thead class="sticky top-0 bg-[white]">
|
||||
<tr class="border-b border-[#ececec]">
|
||||
<th class="text-sm font-medium sticky text-left p-3">
|
||||
<div class="flex gap-3">
|
||||
<span class="flex w-max">Contract</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="text-sm font-medium sticky text-left p-3">
|
||||
<div class="flex gap-3">
|
||||
<span class="flex w-max">Start Date</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="text-sm font-medium sticky text-left p-3">
|
||||
<div class="flex gap-3">
|
||||
<span class="flex w-max">End Date</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="text-sm font-medium sticky text-left p-3">
|
||||
<div class="flex gap-3">
|
||||
<span class="flex w-max">Wage Type</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="text-sm font-medium sticky text-left p-3">
|
||||
<div class="flex gap-3">
|
||||
<span class="flex w-max">Basic Salary</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="text-sm font-medium sticky text-left p-3">
|
||||
<div class="flex gap-3">
|
||||
<span class="flex w-max"></span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-[#ebebeb]">
|
||||
<td class="text-sm text-left p-3 text-[#666]">HR Supermark(001)'s Contract</td>
|
||||
<td class="text-sm text-left p-3 text-[#666]">Jan 1, 2025</td>
|
||||
<td class="text-sm text-left p-3 text-[#666]">None</td>
|
||||
<td class="text-sm text-left p-3 text-[#666]">Monthly</td>
|
||||
<td class="text-sm text-left p-3 text-[#666]">40,0000</td>
|
||||
<td class="text-sm text-center p-3 text-[#666]">
|
||||
<div class="flex gap-1">
|
||||
<button class="cursor-pointer px-2 py-1 text-sm bg-primary-300 text-primary-600 rounded-sm w-7 h-7 flex items-center justify-center hover:bg-primary-600 hover:text-white transition duration-300"><i class="fa-solid fa-pen-to-square"></i></button>
|
||||
<button class="cursor-pointer px-2 py-1 text-sm bg-primary-300 text-primary-600 rounded-sm w-7 h-7 flex items-center justify-center hover:bg-primary-600 hover:text-white transition duration-300"><i class="fa-solid fa-trash"></i></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user