326 lines
27 KiB
HTML
326 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>User:Dashboard</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
|
|
rel="stylesheet">
|
|
<link rel="stylesheet" href="../css/style.css" />
|
|
<link rel="stylesheet" href="../css/landing.css.css" />
|
|
<link rel="stylesheet" href="https://cdn.tailwindcss.com" />
|
|
<link rel="stylesheet" href="../css/aos.min.css" />
|
|
<link rel="stylesheet" href="../css/daisyUI.min.css" />
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="body-wrapper w-full">
|
|
<div class="flex">
|
|
<main class="flex-1 my-3 min-h-[calc(100vh-24px)] ml-[270px] mr-4 mb-3 rounded-2xl bg-white py-2">
|
|
<!-- header -->
|
|
<header
|
|
class="pt-3 pb-4 rounded-t-lg px-4 sticky top-0 z-10 bg-white h-16 flex justify-between items-center border-b-sky-100">
|
|
<nav class="w-full flex items-center justify-between">
|
|
<!-- Centered search input -->
|
|
<div class="searchbar relative mx-auto w-[450px]">
|
|
<i data-lucide="search" class="absolute text-xl text-slate-400 top-[12px] left-2"></i>
|
|
<input type="text"
|
|
class="pr-3 pl-8 py-[10px] w-full border placeholder:text-slate-400 border-gray-300 border-solid rounded-lg focus-visible:outline-1 focus:outline-primary-600 focus:outline-1"
|
|
placeholder="Search Id Card and Employee">
|
|
</div>
|
|
<!-- Right-aligned buttons -->
|
|
<div class="header_widgets flex items-center gap-3">
|
|
<button type="button"
|
|
class="flex items-center justify-center cursor-pointer bg-transparent transition-transform duration-150 p-0 border-none m-0 rounded-lg relative">
|
|
<i data-lucide="bell" class="text-primary-600 leading-3"></i>
|
|
<div class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></div>
|
|
</button>
|
|
<!-- <div class="flex items-center bg-primary-100/40 border border-primary-100/40 border-solid px-4 py-2 rounded-lg gap-1 cursor-pointer hover:bg-primary-200/50 active:scale-90 transition-transform duration-150"
|
|
tabindex="0">
|
|
<span class="text-primary-600">Login</span>
|
|
</div>
|
|
<div class="text-primary-600 flex items-center bg-white border border-primary-600 border-solid px-4 py-2 rounded-lg gap-1 cursor-pointer hover:bg-primary-600 hover:text-white active:scale-90 transition-transform duration-150"
|
|
tabindex="0">
|
|
<span class="block">Sign up</span>
|
|
</div> -->
|
|
<button type="button"
|
|
class="flex bg-primary-100/40 px-3 py-2 rounded-lg items-center gap-1 cursor-pointer"
|
|
popovertarget="popover-1" style="anchor-name:--anchor-1">
|
|
<i data-lucide="user" class="text-primary-600"></i>
|
|
<span class="text-primary-600">Welcome Krishnen...</span>
|
|
<i data-lucide="chevron-down" class="text-primary-600"></i>
|
|
</button>
|
|
<ul class="dropdown menu min-w-[228px] mt-1 bg-white rounded-box bg-base-100 shadow-lg"
|
|
popover id="popover-1" style="position-anchor:--anchor-1">
|
|
<li><a
|
|
class="py-[10px] px-4 hover:bg-primary-100/50 hover:text-primary-600 border-bottom-1 border-solid border-primary-100 text-base">My
|
|
Profile</a></li>
|
|
<li><a class="py-[10px] px-4 hover:bg-primary-100/50 hover:text-primary-600 text-base">Log
|
|
Out</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<!-- header -->
|
|
<div class="main-wrap py-4 px-5 2xl:px-10">
|
|
<!-- sidebar -->
|
|
<aside class="fixed z-30 w-[265px] left-0 top-0 min-h-screen">
|
|
<div class="logo h-[45px] px-4 py-3 flex justify-start items-start">
|
|
<a href="#">
|
|
<img src="https://static.canva.com/web/images/8439b51bb7a19f6e65ce1064bc37c197.svg"
|
|
alt="logo" />
|
|
</a>
|
|
</div>
|
|
<div class="listing p-4">
|
|
<ul class="flex flex-col gap-[6px]">
|
|
<li>
|
|
<a href="dashboad.html"
|
|
class="flex font-normal gap-2 text-primary-600 rounded-md items-center px-2 py-2 cursor-pointer hover:bg-primary-600 hover:text-white transition-all">
|
|
<i data-lucide="layout-dashboard"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="idCard.html"
|
|
class="flex font-normal gap-2 text-primary-600 rounded-md items-center px-2 py-2 cursor-pointer hover:bg-primary-600 hover:text-white transition-all">
|
|
<i data-lucide="credit-card"></i>
|
|
<span>Id Card Request</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="status.html"
|
|
class="flex font-normal gap-2 text-primary-600 rounded-md bg-primary-600 text-white items-center px-2 py-2 cursor-pointer hover:bg-primary-600 hover:text-white transition-all">
|
|
<i data-lucide="chart-line"></i>
|
|
<span>Id Status</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
<!-- sidebar -->
|
|
<!-- dashboard page -->
|
|
<section class="user__page user_id_page">
|
|
<div class="user__page__header flex items-center gap-2">
|
|
<span class="w-10 h-10 rounded-md grid place-items-center leading-3 icon__box">
|
|
<i data-lucide="chart-line" class="text-white"></i>
|
|
</span>
|
|
<h1 class="text-2xl font-medium text-slate-950 tracking-wider">Status</h1>
|
|
</div>
|
|
<div class="mt-6">
|
|
<div class="tabs_section">
|
|
<div class="tabs-container p-0 !shadow-none">
|
|
<div class="tabs w-[350px]">
|
|
<div class="tab active text-base hover:bg-primary-100/50 transition-all rounded-t-lg cursor-pointer"
|
|
onclick="changeTab(0)">ID Card</div>
|
|
<div class="tab text-base hover:bg-primary-100/50 transition-all rounded-t-lg cursor-pointer"
|
|
onclick="changeTab(1)">Visiting Card</div>
|
|
<div class="indicator"></div>
|
|
</div>
|
|
<div class="tab-contents py-5">
|
|
<div class="tab-content active">
|
|
<div class="status-timeline">
|
|
<ul class="timeline_list">
|
|
<li class="flex timeline active gap-3">
|
|
<div class="flex flex-col">
|
|
<div
|
|
class="icon w-8 h-8 rounded-full bg-primary-200/60 border border-primary-200 border-solid grid place-items-center">
|
|
<i data-lucide="user-round-check"
|
|
class="w-4 h-4 text-white"></i>
|
|
</div>
|
|
<div
|
|
class="hidden my-1 line sm:flex bg-primary-200 ml-[14px] w-[2px] h-[120px] dark:bg-primary-200">
|
|
</div>
|
|
</div>
|
|
<div class="data">
|
|
<h3
|
|
class="text-lg font-semibold text-gray-900 mb-2 dark:text-white">
|
|
Submit Request</h3>
|
|
<time
|
|
class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">December 2, 2021</time>
|
|
<p
|
|
class="text-base font-normal text-gray-500 dark:text-gray-400">
|
|
Begin the process by submitting a request for an ID card. Fill out the required form with accurate details, including your full name, department, employee ID (if applicable), and any necessary supporting documents. Ensure all information is correct to avoid delays in processing.</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex timeline active gap-3">
|
|
<div class="flex flex-col">
|
|
<div
|
|
class="icon w-8 h-8 rounded-full bg-primary-200/60 border border-primary-200 border-solid grid place-items-center">
|
|
<i data-lucide="hourglass"
|
|
class="w-4 h-4 text-primary-700"></i>
|
|
</div>
|
|
<div
|
|
class="hidden my-1 line sm:flex bg-primary-200 ml-[14px] w-[2px] h-[120px] dark:bg-primary-200">
|
|
</div>
|
|
</div>
|
|
<div class="data">
|
|
<h3
|
|
class="text-lg font-semibold text-gray-900 mb-2 dark:text-white">
|
|
HR Approval</h3>
|
|
<time
|
|
class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">December 2, 2021</time>
|
|
<p
|
|
class="text-base font-normal text-gray-500 dark:text-gray-400">
|
|
The HR team will review your request to verify the details provided. They will check for completeness, confirm your eligibility, and validate the submitted documents. If any discrepancies are found, you may be contacted for clarification or additional information.</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex timeline active gap-3">
|
|
<div class="flex flex-col">
|
|
<div
|
|
class="icon w-8 h-8 rounded-full bg-primary-200/60 border border-primary-200 border-solid grid place-items-center">
|
|
<i data-lucide="printer"
|
|
class="w-4 h-4 text-primary-700"></i>
|
|
</div>
|
|
<div
|
|
class="hidden my-1 line sm:flex bg-primary-200 ml-[14px] w-[2px] h-[120px] dark:bg-primary-200">
|
|
</div>
|
|
</div>
|
|
<div class="data">
|
|
<h3
|
|
class="text-lg font-semibold text-gray-900 mb-2 dark:text-white">
|
|
ID Card Printing</h3>
|
|
<time
|
|
class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">December 2, 2021</time>
|
|
<p
|
|
class="text-base font-normal text-gray-500 dark:text-gray-400">
|
|
Once your request is approved, the ID card is sent for printing. The printing process includes embedding security features such as barcodes, QR codes, or RFID chips (if applicable). The printed card is then quality-checked to ensure accuracy and durability before final issuance.</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex active timeline gap-3">
|
|
<div class="flex flex-col">
|
|
<div
|
|
class="icon w-8 h-8 rounded-full bg-primary-200/60 border border-primary-200 border-solid grid place-items-center">
|
|
<i data-lucide="check"
|
|
class="w-4 h-4 text-primary-700"></i>
|
|
</div>
|
|
</div>
|
|
<div class="data">
|
|
<h3
|
|
class="text-lg font-semibold text-gray-900 mb-2 dark:text-white">
|
|
Ready for Collection</h3>
|
|
<time
|
|
class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">December 2, 2021</time>
|
|
<p
|
|
class="text-base font-normal text-gray-500 dark:text-gray-400">
|
|
Your ID card is now ready for pickup. You will receive a notification with collection details, including the location and any required identification documents to present. Visit the security office or designated distribution point to collect your card and confirm receipt.</p>
|
|
</div>
|
|
<!-- <div class="hidden my-1 sm:flex bg-primary-200 ml-[14px] w-[2px] h-[120px] dark:bg-primary-200"></div> -->
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="tab-content">
|
|
<div class="status-timeline">
|
|
<ul class="timeline_list">
|
|
<li class="flex timeline active gap-3">
|
|
<div class="flex flex-col">
|
|
<div
|
|
class="icon w-8 h-8 rounded-full bg-primary-200/60 border border-primary-200 border-solid grid place-items-center">
|
|
<i data-lucide="user-round-check"
|
|
class="w-4 h-4 text-white"></i>
|
|
</div>
|
|
<div
|
|
class="hidden my-1 line sm:flex bg-primary-200 ml-[14px] w-[2px] h-[120px] dark:bg-primary-200">
|
|
</div>
|
|
</div>
|
|
<div class="data">
|
|
<h3
|
|
class="text-lg font-semibold text-gray-900 mb-2 dark:text-white">
|
|
Submit Request</h3>
|
|
<time
|
|
class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">December 2, 2021</time>
|
|
<p
|
|
class="text-base font-normal text-gray-500 dark:text-gray-400">
|
|
Begin the process by submitting a request for an ID card. Fill out the required form with accurate details, including your full name, department, employee ID (if applicable), and any necessary supporting documents. Ensure all information is correct to avoid delays in processing.</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex timeline active gap-3">
|
|
<div class="flex flex-col">
|
|
<div
|
|
class="icon w-8 h-8 rounded-full bg-primary-200/60 border border-primary-200 border-solid grid place-items-center">
|
|
<i data-lucide="hourglass"
|
|
class="w-4 h-4 text-primary-700"></i>
|
|
</div>
|
|
<div
|
|
class="hidden my-1 line sm:flex bg-primary-200 ml-[14px] w-[2px] h-[120px] dark:bg-primary-200">
|
|
</div>
|
|
</div>
|
|
<div class="data">
|
|
<h3
|
|
class="text-lg font-semibold text-gray-900 mb-2 dark:text-white">
|
|
HR Approval</h3>
|
|
<time
|
|
class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">December 2, 2021</time>
|
|
<p
|
|
class="text-base font-normal text-gray-500 dark:text-gray-400">
|
|
The HR team will review your request to verify the details provided. They will check for completeness, confirm your eligibility, and validate the submitted documents. If any discrepancies are found, you may be contacted for clarification or additional information.</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex timeline gap-3">
|
|
<div class="flex flex-col">
|
|
<div
|
|
class="icon w-8 h-8 rounded-full bg-primary-200/60 border border-primary-200 border-solid grid place-items-center">
|
|
<i data-lucide="printer"
|
|
class="w-4 h-4 text-primary-700"></i>
|
|
</div>
|
|
<div
|
|
class="hidden my-1 line sm:flex bg-primary-200 ml-[14px] w-[2px] h-[120px] dark:bg-primary-200">
|
|
</div>
|
|
</div>
|
|
<div class="data">
|
|
<h3
|
|
class="text-lg font-semibold text-gray-900 mb-2 dark:text-white">
|
|
ID Card Printing</h3>
|
|
<time
|
|
class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">December 2, 2021</time>
|
|
<p
|
|
class="text-base font-normal text-gray-500 dark:text-gray-400">
|
|
Once your request is approved, the ID card is sent for printing. The printing process includes embedding security features such as barcodes, QR codes, or RFID chips (if applicable). The printed card is then quality-checked to ensure accuracy and durability before final issuance.</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex timeline gap-3">
|
|
<div class="flex flex-col">
|
|
<div
|
|
class="icon w-8 h-8 rounded-full bg-primary-200/60 border border-primary-200 border-solid grid place-items-center">
|
|
<i data-lucide="check"
|
|
class="w-4 h-4 text-primary-700"></i>
|
|
</div>
|
|
</div>
|
|
<div class="data">
|
|
<h3
|
|
class="text-lg font-semibold text-gray-900 mb-2 dark:text-white">
|
|
Ready for Collection</h3>
|
|
<time
|
|
class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">December 2, 2021</time>
|
|
<p
|
|
class="text-base font-normal text-gray-500 dark:text-gray-400">
|
|
Your ID card is now ready for pickup. You will receive a notification with collection details, including the location and any required identification documents to present. Visit the security office or designated distribution point to collect your card and confirm receipt.</p>
|
|
</div>
|
|
<!-- <div class="hidden my-1 sm:flex bg-primary-200 ml-[14px] w-[2px] h-[120px] dark:bg-primary-200"></div> -->
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- dashboard page -->
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<script src="../js/jquery.min.js"></script>
|
|
<script src="../js/aos.min.js"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="../js/daisyUI.min.js"></script>
|
|
<script src="../js/script.js"></script>
|
|
</body>
|
|
|
|
</html> |