mirror of
https://github.com/xodivorce/infra-xodivorce-in.git
synced 2026-02-04 19:22:23 +05:30
feat(core): restructure auth, routing, and role-based dashboards
This commit is contained in:
@@ -1,83 +1,39 @@
|
||||
<nav class="fixed top-0 left-0 right-0 px-7 pb-1 bg-black z-10 flex justify-between items-center h-[3.8em]">
|
||||
<?php
|
||||
$current_email = $_SESSION['user_email'];
|
||||
$user_initial = strtoupper($current_email[0]);
|
||||
?>
|
||||
|
||||
<div class="flex items-center">
|
||||
<img src="./assets/images/icons/menu.svg" class="h-[1.1rem] -mr-1 w-auto cursor-pointer" id="menu-icon"
|
||||
alt="menu-icon">
|
||||
<img src="./assets/images/logos/steamstube-logo.svg" class="h-8 ml-7 cursor-pointer" alt="steamstube-logo"
|
||||
id="domain-logo">
|
||||
<span class="text-[1.3rem] font-youtube ml-0.5 text-gray-200 cursor-pointer" id="domain-name">
|
||||
<?php echo htmlspecialchars(!empty($_ENV['DOMAIN']) ? $_ENV['DOMAIN'] : 'UNKNOWN DOMAIN'); ?>
|
||||
</span>
|
||||
<?php if (!empty($_ENV['BETA']) && filter_var($_ENV['BETA'], FILTER_VALIDATE_BOOLEAN)): ?>
|
||||
<span
|
||||
class="text-[0.6rem] font-youtube uppercase ml-[0.1rem] -mt-2 px-1 py-0.5 rounded text-pink-700 pointer-events-none">beta</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-1 justify-center items-center px-8 mt-1 ml-auto mr-auto max-[1100px]:justify-start max-[750px]:hidden">
|
||||
<div class="flex items-center w-full max-w-[41rem] border-2 border-neutral-900 rounded-full px-5 py-[0.5rem]">
|
||||
<img src="./assets/images/icons/search.svg" class="h-[1.2rem] mr-2" alt="search-icon">
|
||||
<input type="text"
|
||||
placeholder="Search <?php echo htmlspecialchars(!empty($_ENV['DOMAIN']) ? $_ENV['DOMAIN'] : 'UNKNOWN DOMAIN'); ?> or paste your code..."
|
||||
class="flex-1 placeholder:text-gray-400 font-light text-gray-200 bg-transparent border-none outline-none text-sm tracking-wide truncate min-w-0">
|
||||
<button class="ml-2 cursor-pointer">
|
||||
<img src="./assets/images/icons/search-filter-icon.svg" class="h-5" alt="search-filter-icon">
|
||||
</button>
|
||||
<header class="w-full bg-neutral-900/95 border-b border-neutral-800 px-6 py-4 flex items-center justify-between backdrop-blur-sm sticky top-0 z-20">
|
||||
|
||||
<div class="flex items-center gap-5">
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-blue-500/10 flex items-center justify-center border border-blue-500/20 shadow-[0_0_15px_rgba(59,130,246,0.1)]">
|
||||
<svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-xl font-bold text-white tracking-tight"> <?php echo htmlspecialchars($_ENV['DOMAIN']); ?> Dashboard</h2>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-0 relative">
|
||||
<button class="hidden max-[750px]:inline-flex items-center justify-center cursor-pointer" id="mobileSearchBtn">
|
||||
<img src="./assets/images/icons/mobile-search-icon.svg" class="h-5 w-auto pl-5" alt="mobile-search-icon">
|
||||
</button>
|
||||
<div id="mobileSearchOverlay"
|
||||
class="hidden fixed top-0 left-0 right-0 bg-black px-5 py-3 items-center z-50 transition-transform duration-300 transform -translate-y-full">
|
||||
<div class="flex items-center w-full border-2 border-neutral-900 rounded-full px-4 py-2 bg-black">
|
||||
<input type="text" id="mobileSearchInput"
|
||||
placeholder="Search <?php echo htmlspecialchars(!empty($_ENV['DOMAIN']) ? $_ENV['DOMAIN'] : 'UNKNOWN DOMAIN'); ?> or paste your code..."
|
||||
class="flex-1 text-[1rem] text-gray-200 bg-transparent border-none outline-none tracking-wide placeholder:text-gray-400 placeholder:font-light text-sm placeholder:tracking-normal truncate">
|
||||
<div class="flex items-center gap-4">
|
||||
|
||||
<div class="text-right">
|
||||
<div class="text-sm font-semibold text-white">
|
||||
<?php echo htmlspecialchars($current_email); ?>
|
||||
</div>
|
||||
<div class="text-xs text-neutral-500 font-medium uppercase tracking-wide">
|
||||
<?php echo ($is_admin ?? false) ? 'Administrator' : 'User'; ?>
|
||||
</div>
|
||||
</div>
|
||||
<button class="hidden max-[750px]:inline-flex items-center justify-center -ml-2 relative left-7 cursor-pointer"
|
||||
id="moreOptionsBtn">
|
||||
<img src="./assets/images/icons/more-options-icon.svg" class="h-5 w-auto" alt="more-options-icon">
|
||||
|
||||
<button
|
||||
onclick="window.location.href='./pages/account.php'"
|
||||
class="w-10 h-10 rounded-full bg-neutral-800 border border-neutral-700 hover:border-blue-500/50 hover:shadow-[0_0_15px_rgba(59,130,246,0.3)] transition-all duration-300 flex items-center justify-center text-neutral-300 hover:text-white font-bold text-sm"
|
||||
>
|
||||
<?php echo $user_initial; ?>
|
||||
</button>
|
||||
|
||||
<div class="hidden absolute top-[1.4rem] left-[-4.2rem] bg-black text-gray-200 rounded-xl shadow-2xl shadow-black/40 w-36 py-2 z-50 opacity-0 transform scale-95 transition-all duration-200 ease-out"
|
||||
id="moreOptionsMenu">
|
||||
<button
|
||||
class="flex items-center w-full px-4 py-2 text-base font-light text-gray-200 no-underline cursor-pointer hover:bg-[#332631] hover:rounded-lg max-[56.25rem]:text-sm"><img
|
||||
src="./assets/images/icons/upload.svg" class="h-5 mr-2" alt="upload-icon">
|
||||
<span>Uploads</span>
|
||||
</button>
|
||||
<button
|
||||
class="flex items-center w-full px-4 py-2 text-base font-light text-gray-200 no-underline cursor-pointer hover:bg-[#332631] hover:rounded-lg max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/reminders.svg" class="h-5 mr-2" alt="reminders-icon">
|
||||
<span>Reminders</span>
|
||||
</button>
|
||||
<button
|
||||
class="flex items-center w-full px-4 py-2 text-base font-light text-gray-200 no-underline cursor-pointer hover:bg-[#332631] hover:rounded-lg max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/settings.svg" class="h-5 mr-2" alt="settings-icon">
|
||||
<span>Settings</span>
|
||||
</button>
|
||||
<button onclick="window.location.href='./core/auth/auth_check.php'"
|
||||
class="flex items-center w-full px-4 py-2 text-base font-light text-gray-200 no-underline cursor-pointer hover:bg-[#332631] hover:rounded-lg max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/default-user.png" class="h-5 mr-2" alt="default-user-icon">
|
||||
<span>Account</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center max-[750px]:hidden">
|
||||
<button class="ml-2 cursor-pointer"><img src="./assets/images/icons/upload.svg" class="h-5 w-auto"
|
||||
alt="upload-icon"></button>
|
||||
<button class="ml-8 cursor-pointer"><img src="./assets/images/icons/reminders.svg" class="h-5 w-auto"
|
||||
alt="reminders-icon"></button>
|
||||
<button class="ml-8 cursor-pointer"><img src="./assets/images/icons/settings.svg" class="h-5 w-auto"
|
||||
alt="settings-icon"></button>
|
||||
<button onclick="window.location.href='./core/auth/auth_check.php'" class="ml-8 cursor-pointer"><img
|
||||
src="./assets/images/icons/default-user.png" class="h-5 w-auto" alt="default-user-icon"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
</header>
|
||||
@@ -1,302 +1,71 @@
|
||||
<div
|
||||
class="sidebar group fixed top-[3.6rem] left-0 z-[9999] h-[calc(100vh-3.6rem)] w-[14.375rem] overflow-y-auto overflow-x-hidden bg-black pb-[25%] pr-[0.9375rem] pl-[0.9375rem] pt-[0.3125rem] group-[.small-sidebar]:w-[4.375rem] group-[.small-sidebar]:overflow-y-hidden max-[31.25rem]:group-[.small-sidebar]:hidden">
|
||||
<?php
|
||||
$activeClass = 'bg-blue-500/10 text-blue-400 shadow-[0_0_15px_rgba(59,130,246,0.1)] border border-blue-500/20';
|
||||
$inactiveClass = 'text-neutral-400 hover:text-white hover:bg-neutral-800/60 border border-transparent transition-all duration-200';
|
||||
?>
|
||||
|
||||
<div class="shortcut-links">
|
||||
<button id="home-btn"
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.526rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/home-icon.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/home-fill-icon.svg">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
Home</p>
|
||||
</button>
|
||||
<button id="trending-btn"
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/trending-icon.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/trending-fill-icon.svg">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
Trending</p>
|
||||
</button>
|
||||
<hr
|
||||
class="sidebar-hr my-[0.3125rem] ml-[1%] h-[0.0625rem] w-[99%] border-0 bg-neutral-700 transition-width duration-300 ease-in-out group-[.small-sidebar]:w-full max-[56.25rem]:w-[99%]">
|
||||
</div>
|
||||
<aside class="w-64 bg-neutral-900/95 border-r border-neutral-800 flex flex-col h-screen">
|
||||
|
||||
<div class="shortcut-links">
|
||||
<button id="watched-btn"
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/watched-icon.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/watched-fill-icon.svg">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
Watched</p>
|
||||
</button>
|
||||
<button id="favourites-btn"
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/favourites-icon.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/favourites-fill-icon.svg">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
Favourites</p>
|
||||
</button>
|
||||
<button id="followings-btn"
|
||||
class="icon-btn categories-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/followings-icon.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/followings-fill-icon.svg">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
Followings</p>
|
||||
<div
|
||||
class="right-side absolute right-0 mr-[0.375rem] flex items-center bg-transparent ml-auto group-[.small-sidebar]:hidden">
|
||||
<div class="divider mx-[0.625rem] h-[1.3rem] w-[0.0625rem] bg-neutral-700"></div>
|
||||
<img src="./assets/images/icons/arrow-down.svg" class="arrow-icon h-[1.3rem] w-auto">
|
||||
</div>
|
||||
</button>
|
||||
<div class="dropdown hidden flex-col">
|
||||
<button
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 active:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/users/apple.jpg"
|
||||
class="icon block h-[1.5rem] w-[1.5rem] rounded-full object-cover max-[56.25rem]:h-[1.3rem] max-[56.25rem]:w-[1.3rem]">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
@apple</p>
|
||||
</button>
|
||||
<button
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 active:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/users/cumatozz.jpg"
|
||||
class="icon block h-[1.5rem] w-[1.5rem] rounded-full object-cover max-[56.25rem]:h-[1.3rem] max-[56.25rem]:w-[1.3rem]">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
@cumatozz</p>
|
||||
</button>
|
||||
<button
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 active:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/users/johnny-sins.jpg"
|
||||
class="icon block h-[1.5rem] w-[1.5rem] rounded-full object-cover max-[56.25rem]:h-[1.3rem] max-[56.25rem]:w-[1.3rem]">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
@johnny_sins</p>
|
||||
</button>
|
||||
<button
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 active:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/users/sweetie-fox.jpg"
|
||||
class="icon block h-[1.5rem] w-[1.5rem] rounded-full object-cover max-[56.25rem]:h-[1.3rem] max-[56.25rem]:w-[1.3rem]">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
@sweetie_fox</p>
|
||||
</button>
|
||||
</div>
|
||||
<hr
|
||||
class="sidebar-hr my-[0.3125rem] ml-[1%] h-[0.0625rem] w-[99%] border-0 bg-neutral-700 transition-width duration-300 ease-in-out group-[.small-sidebar]:w-full max-[56.25rem]:w-[99%]">
|
||||
</div>
|
||||
<nav class="flex-1 px-4 py-6 space-y-2 overflow-y-auto" id="sidebar-nav">
|
||||
|
||||
<div class="shortcut-links">
|
||||
<button id="categories-btn"
|
||||
class="icon-btn categories-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/categories-icon.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/categories-fill-icon.svg" alt="Categories icon">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
Categories</p>
|
||||
<div
|
||||
class="right-side absolute right-0 mr-[0.375rem] flex items-center bg-transparent ml-auto group-[.small-sidebar]:hidden">
|
||||
<div class="divider mx-[0.625rem] h-[1.3rem] w-[0.0625rem] bg-neutral-700"></div>
|
||||
<img src="./assets/images/icons/arrow-down.svg" class="arrow-icon h-[1.3rem] w-auto">
|
||||
</div>
|
||||
</button>
|
||||
<div class="dropdown hidden flex-col">
|
||||
<button
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/straight-gender-icon.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/straight-gender-fill-icon.svg" alt="Male icon">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
Straight</p>
|
||||
</button>
|
||||
<button
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/gay-gender-icon.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/gay-gender-fill-icon.svg" alt="Male icon">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
Gay</p>
|
||||
</button>
|
||||
<button
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/trans-gender-icon.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/trans-gender-fill-icon.svg" alt="Female icon">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
Trans</p>
|
||||
</button>
|
||||
<button
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/lesbian-gender-icon.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/lesbian-gender-fill-icon.svg" alt="Female icon">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
Lesbian</p>
|
||||
</button>
|
||||
<button
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/bisexual-gender-icon.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/bisexual-gender-fill-icon.svg" alt="Female icon">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
Bisexual</p>
|
||||
</button>
|
||||
</div>
|
||||
<button id="fan-picks-btn"
|
||||
class="icon-btn categories-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/fan-pick's-icon.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/fan-pick's-fill-icon.svg" alt="Fan Pick's icon">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
Fan Picks’</p>
|
||||
<div
|
||||
class="right-side absolute right-0 mr-[0.375rem] flex items-center bg-transparent ml-auto group-[.small-sidebar]:hidden">
|
||||
<div class="divider mx-[0.625rem] h-[1.3rem] w-[0.0625rem] bg-neutral-700"></div>
|
||||
<img src="./assets/images/icons/arrow-down.svg" class="arrow-icon h-[1.3rem] w-auto">
|
||||
</div>
|
||||
</button>
|
||||
<div class="dropdown fan-picks-dropdown hidden flex-col group-[.small-sidebar]:!hidden">
|
||||
<button
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/fan-pick's-sub-con.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/fan-pick's-sub-fill-icon.svg" alt="Male icon">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
Teen (18+)</p>
|
||||
</button>
|
||||
<button
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/fan-pick's-sub-con.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/fan-pick's-sub-fill-icon.svg" alt="Female icon">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
MILF</p>
|
||||
</button>
|
||||
<button
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/fan-pick's-sub-con.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/fan-pick's-sub-fill-icon.svg" alt="Male icon">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
Anal</p>
|
||||
</button>
|
||||
<button
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/fan-pick's-sub-con.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/fan-pick's-sub-fill-icon.svg" alt="Female icon">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
Hardcore BDSM</p>
|
||||
</button>
|
||||
<button
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/fan-pick's-sub-con.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/fan-pick's-sub-fill-icon.svg" alt="Female icon">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
Threesome</p>
|
||||
</button>
|
||||
<button
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/fan-pick's-sub-con.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/fan-pick's-sub-fill-icon.svg" alt="Female icon">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
Hentai</p>
|
||||
</button>
|
||||
<button
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/fan-pick's-sub-con.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/fan-pick's-sub-fill-icon.svg" alt="Female icon">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
JAV</p>
|
||||
</button>
|
||||
<button
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/fan-pick's-sub-con.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/fan-pick's-sub-fill-icon.svg" alt="Female icon">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
Russian</p>
|
||||
</button>
|
||||
<button
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/fan-pick's-sub-con.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/fan-pick's-sub-fill-icon.svg" alt="Female icon">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
Korean</p>
|
||||
</button>
|
||||
<button
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/fan-pick's-sub-con.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/fan-pick's-sub-fill-icon.svg" alt="Female icon">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
Chinese</p>
|
||||
</button>
|
||||
<button
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/fan-pick's-sub-con.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/fan-pick's-sub-fill-icon.svg" alt="Female icon">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
Indian</p>
|
||||
</button>
|
||||
</div>
|
||||
<hr
|
||||
class="sidebar-hr my-[0.3125rem] ml-[1%] h-[0.0625rem] w-[99%] border-0 bg-neutral-700 transition-width duration-300 ease-in-out group-[.small-sidebar]:w-full max-[56.25rem]:w-[99%]">
|
||||
</div>
|
||||
<?php if (!$is_admin): ?>
|
||||
|
||||
<div class="shortcut-links">
|
||||
<p
|
||||
class="sidebar-title my-1 ml-[0.625rem] whitespace-nowrap text-gray-200 text-base max-[56.25rem]:text-sm group-[.small-sidebar]:hidden">
|
||||
More from <?php echo htmlspecialchars(!empty($_ENV['DOMAIN']) ? $_ENV['DOMAIN'] : 'UNKNOWN DOMAIN'); ?></p>
|
||||
<button id="the-originals-btn"
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/the-st-originals-icon.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/the-st-originals-fill-icon.svg">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
The ST Originals</p>
|
||||
</button>
|
||||
<button id="trust-support-btn"
|
||||
class="icon-btn relative flex w-full cursor-pointer items-center justify-start gap-[0.9375rem] border-none bg-transparent py-[0.525rem] pr-[0.25rem] pl-[0.75rem] text-base font-light text-gray-200 no-underline hover:rounded-[0.625rem] hover:bg-neutral-900 [&.active]:rounded-[0.625rem] [&.active]:bg-neutral-900 group-[.small-sidebar]:w-full group-[.small-sidebar]:justify-center group-[.small-sidebar]:p-[0.75rem] max-[56.25rem]: max-[56.25rem]:text-sm">
|
||||
<img src="./assets/images/icons/trust-icon.svg"
|
||||
class="icon block h-[1.3rem] w-auto bg-transparent max-[56.25rem]:h-[1.125rem]"
|
||||
data-hover="./assets/images/icons/trust-fill-icon.svg">
|
||||
<p
|
||||
class="label m-0 block min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap bg-transparent group-[.small-sidebar]:hidden">
|
||||
Trust & Support</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<a href="?page=overview"
|
||||
class="group flex items-center px-4 py-3 text-sm font-medium rounded-xl <?php echo $page === 'overview' ? $activeClass : $inactiveClass; ?>">
|
||||
<svg class="w-5 h-5 mr-3 <?php echo $page === 'overview' ? 'text-blue-400' : 'text-neutral-500 group-hover:text-white'; ?> transition-colors"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
Overview
|
||||
</a>
|
||||
|
||||
<a href="?page=reports"
|
||||
class="group flex items-center px-4 py-3 text-sm font-medium rounded-xl <?php echo $page === 'reports' ? $activeClass : $inactiveClass; ?>">
|
||||
<svg class="w-5 h-5 mr-3 <?php echo $page === 'reports' ? 'text-blue-400' : 'text-neutral-500 group-hover:text-white'; ?> transition-colors"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
Reports
|
||||
</a>
|
||||
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($is_admin): ?>
|
||||
|
||||
<a href="?page=status-board"
|
||||
class="group flex items-center px-4 py-3 text-sm font-medium rounded-xl <?php echo $page === 'status-board' ? $activeClass : $inactiveClass; ?>">
|
||||
<svg class="w-5 h-5 mr-3 <?php echo $page === 'status-board' ? 'text-blue-400' : 'text-neutral-500 group-hover:text-white'; ?> transition-colors"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
Status Board
|
||||
</a>
|
||||
|
||||
<a href="?page=activity-logs"
|
||||
class="group flex items-center px-4 py-3 text-sm font-medium rounded-xl <?php echo $page === 'activity-logs' ? $activeClass : $inactiveClass; ?>">
|
||||
<svg class="w-5 h-5 mr-3 <?php echo $page === 'activity-logs' ? 'text-blue-400' : 'text-neutral-500 group-hover:text-white'; ?> transition-colors"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Activity Logs
|
||||
</a>
|
||||
|
||||
<a href="?page=admin"
|
||||
class="group flex items-center px-4 py-3 text-sm font-medium rounded-xl <?php echo $page === 'admin' ? $activeClass : $inactiveClass; ?>">
|
||||
<svg class="w-5 h-5 mr-3 <?php echo $page === 'admin' ? 'text-blue-400' : 'text-neutral-500 group-hover:text-white'; ?> transition-colors"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
System Admin
|
||||
</a>
|
||||
|
||||
<?php endif; ?>
|
||||
|
||||
</nav>
|
||||
</aside>
|
||||
244
src/assets/admin/_activity_logs.php
Normal file
244
src/assets/admin/_activity_logs.php
Normal file
@@ -0,0 +1,244 @@
|
||||
<section class="space-y-6">
|
||||
<header>
|
||||
<h1 class="text-2xl font-semibold text-white">Activity Logs</h1>
|
||||
<p class="mt-1 text-sm text-neutral-400">Recent system and user activities</p>
|
||||
</header>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-neutral-400 mb-1.5">Event Type</label>
|
||||
<select class="w-full bg-neutral-900 border border-neutral-700 text-white text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<option>All</option>
|
||||
<option>Reports</option>
|
||||
<option>Status Changes</option>
|
||||
<option>Admin Actions</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-neutral-400 mb-1.5">Severity</label>
|
||||
<select class="w-full bg-neutral-900 border border-neutral-700 text-white text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<option>All</option>
|
||||
<option>Info</option>
|
||||
<option>Warning</option>
|
||||
<option>Critical</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-neutral-400 mb-1.5">Date Range</label>
|
||||
<select class="w-full bg-neutral-900 border border-neutral-700 text-white text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<option>Today</option>
|
||||
<option>Last 7 days</option>
|
||||
<option>Last 30 days</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-neutral-400 mb-1.5">Search</label>
|
||||
<input type="text" placeholder="Search activity…" class="w-full bg-neutral-900 border border-neutral-700 text-white placeholder-neutral-500 text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead class="bg-neutral-900 border-b border-neutral-700">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Timestamp</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Actor</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Action</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Related Entity</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Severity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-700">
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">2025-12-27 14:32:15</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">admin@system</td>
|
||||
<td class="px-6 py-4 text-sm text-neutral-300">Updated service configuration</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">API Gateway - US-East</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-900 text-blue-200">Info</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">2025-12-27 14:28:43</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">System</td>
|
||||
<td class="px-6 py-4 text-sm text-neutral-300">Service health check failed</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">Database - EU-West</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-900 text-yellow-200">Warning</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">2025-12-27 14:15:22</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">john.doe@company.com</td>
|
||||
<td class="px-6 py-4 text-sm text-neutral-300">Generated monthly report</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">Report #1247</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-900 text-blue-200">Info</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">2025-12-27 13:58:09</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">System</td>
|
||||
<td class="px-6 py-4 text-sm text-neutral-300">Critical alert triggered</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">Load Balancer - APAC</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-900 text-red-200">Critical</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">2025-12-27 13:45:31</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">admin@system</td>
|
||||
<td class="px-6 py-4 text-sm text-neutral-300">Modified user permissions</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">User: jane.smith@company.com</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-900 text-blue-200">Info</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">2025-12-27 13:22:17</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">System</td>
|
||||
<td class="px-6 py-4 text-sm text-neutral-300">Backup completed successfully</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">All Services</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-900 text-blue-200">Info</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">2025-12-27 12:58:44</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">mark.wilson@company.com</td>
|
||||
<td class="px-6 py-4 text-sm text-neutral-300">Updated service status</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">CDN - US-West</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-900 text-blue-200">Info</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">2025-12-27 12:31:05</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">System</td>
|
||||
<td class="px-6 py-4 text-sm text-neutral-300">High memory usage detected</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">Cache Server - EU-Central</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-900 text-yellow-200">Warning</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden bg-neutral-800 rounded-lg border border-neutral-700 p-12">
|
||||
<div class="flex flex-col items-center justify-center text-center">
|
||||
<svg class="w-16 h-16 text-neutral-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
<h3 class="text-lg font-medium text-white mb-1">No activity logs available</h3>
|
||||
<p class="text-sm text-neutral-400">System and user actions will appear here</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead class="bg-neutral-900 border-b border-neutral-700">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Timestamp</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Actor</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Action</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Related Entity</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Severity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-700">
|
||||
<tr class="animate-pulse">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-32"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-28"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="h-4 bg-neutral-700 rounded w-48"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-36"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-5 bg-neutral-700 rounded-full w-16"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="animate-pulse">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-32"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-24"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="h-4 bg-neutral-700 rounded w-56"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-40"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-5 bg-neutral-700 rounded-full w-16"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="animate-pulse">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-32"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-36"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="h-4 bg-neutral-700 rounded w-44"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-32"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-5 bg-neutral-700 rounded-full w-16"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="animate-pulse">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-32"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-20"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="h-4 bg-neutral-700 rounded w-52"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-44"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-5 bg-neutral-700 rounded-full w-16"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="animate-pulse">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-32"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-28"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="h-4 bg-neutral-700 rounded w-48"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-40"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-5 bg-neutral-700 rounded-full w-16"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
438
src/assets/admin/_admin.php
Normal file
438
src/assets/admin/_admin.php
Normal file
@@ -0,0 +1,438 @@
|
||||
<section class="space-y-6">
|
||||
<header>
|
||||
<h1 class="text-2xl font-semibold text-white">Admin Panel</h1>
|
||||
<p class="mt-1 text-sm text-neutral-400">System management and administrative controls</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-neutral-400">Total Users</p>
|
||||
<p class="mt-2 text-3xl font-semibold text-white">1,247</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-blue-900 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-blue-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-4 text-xs text-neutral-500">Active: 1,189 | Suspended: 58</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-neutral-400">Pending Reports</p>
|
||||
<p class="mt-2 text-3xl font-semibold text-white">34</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-yellow-900 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-yellow-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-4 text-xs text-neutral-500">High: 8 | Medium: 15 | Low: 11</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-neutral-400">Active Incidents</p>
|
||||
<p class="mt-2 text-3xl font-semibold text-white">7</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-red-900 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-red-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-4 text-xs text-neutral-500">Critical: 2 | Warning: 5</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-neutral-400">System Health</p>
|
||||
<p class="mt-2 text-3xl font-semibold text-green-400">98.5%</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-green-900 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-green-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-4 text-xs text-neutral-500">All services operational</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700">
|
||||
<div class="px-6 py-4 border-b border-neutral-700">
|
||||
<h2 class="text-lg font-semibold text-white">User Management</h2>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead class="bg-neutral-900 border-b border-neutral-700">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
User ID</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Name</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Email</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Role</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Status</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-700">
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">#1001</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">John Anderson</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">john.anderson@company.com</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-900 text-purple-200">Admin</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-200">Active</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<button class="text-blue-400 hover:text-blue-300 mr-3">View</button>
|
||||
<button class="text-red-400 hover:text-red-300">Disable</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">#1002</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">Sarah Mitchell</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">sarah.mitchell@company.com</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-900 text-blue-200">Moderator</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-200">Active</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<button class="text-blue-400 hover:text-blue-300 mr-3">View</button>
|
||||
<button class="text-red-400 hover:text-red-300">Disable</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">#1003</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">Michael Chen</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">michael.chen@company.com</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-neutral-700 text-neutral-300">User</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-200">Active</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<button class="text-blue-400 hover:text-blue-300 mr-3">View</button>
|
||||
<button class="text-red-400 hover:text-red-300">Disable</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">#1004</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">Emily Rodriguez</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">emily.rodriguez@company.com
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-neutral-700 text-neutral-300">User</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-900 text-red-200">Suspended</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<button class="text-blue-400 hover:text-blue-300 mr-3">View</button>
|
||||
<button class="text-green-400 hover:text-green-300">Enable</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">#1005</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">David Thompson</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">david.thompson@company.com</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-900 text-blue-200">Moderator</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-200">Active</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<button class="text-blue-400 hover:text-blue-300 mr-3">View</button>
|
||||
<button class="text-red-400 hover:text-red-300">Disable</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700">
|
||||
<div class="px-6 py-4 border-b border-neutral-700">
|
||||
<h2 class="text-lg font-semibold text-white">Report Moderation</h2>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead class="bg-neutral-900 border-b border-neutral-700">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Report ID</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Title</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Submitted By</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Priority</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Status</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-700">
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">#2045</td>
|
||||
<td class="px-6 py-4 text-sm text-white">Database Connection Issues</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">alex.kim@company.com</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-900 text-red-200">High</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-900 text-yellow-200">Pending</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<button class="text-green-400 hover:text-green-300 mr-2">Approve</button>
|
||||
<button class="text-orange-400 hover:text-orange-300 mr-2">Escalate</button>
|
||||
<button class="text-red-400 hover:text-red-300">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">#2044</td>
|
||||
<td class="px-6 py-4 text-sm text-white">API Response Time Degradation</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">maria.santos@company.com</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-900 text-yellow-200">Medium</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-900 text-yellow-200">Pending</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<button class="text-green-400 hover:text-green-300 mr-2">Approve</button>
|
||||
<button class="text-orange-400 hover:text-orange-300 mr-2">Escalate</button>
|
||||
<button class="text-red-400 hover:text-red-300">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">#2043</td>
|
||||
<td class="px-6 py-4 text-sm text-white">UI Rendering Bug</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">james.wilson@company.com</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-900 text-blue-200">Low</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-900 text-yellow-200">Pending</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<button class="text-green-400 hover:text-green-300 mr-2">Approve</button>
|
||||
<button class="text-orange-400 hover:text-orange-300 mr-2">Escalate</button>
|
||||
<button class="text-red-400 hover:text-red-300">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">#2042</td>
|
||||
<td class="px-6 py-4 text-sm text-white">Memory Leak in Production</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">lisa.park@company.com</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-900 text-red-200">High</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-900 text-yellow-200">Pending</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<button class="text-green-400 hover:text-green-300 mr-2">Approve</button>
|
||||
<button class="text-orange-400 hover:text-orange-300 mr-2">Escalate</button>
|
||||
<button class="text-red-400 hover:text-red-300">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700">
|
||||
<div class="px-6 py-4 border-b border-neutral-700">
|
||||
<h2 class="text-lg font-semibold text-white">System Controls</h2>
|
||||
</div>
|
||||
<div class="p-6 space-y-4">
|
||||
<div class="flex items-center justify-between p-4 bg-neutral-900 rounded-lg border border-neutral-700">
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-white">Maintenance Mode</h3>
|
||||
<p class="mt-1 text-xs text-neutral-400">Enable maintenance mode to perform system updates</p>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" class="sr-only peer">
|
||||
<div
|
||||
class="w-11 h-6 bg-neutral-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-500 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<button
|
||||
class="flex items-center justify-center px-4 py-3 bg-neutral-900 border border-neutral-700 rounded-lg text-sm font-medium text-white hover:bg-neutral-750 transition-colors">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
|
||||
</path>
|
||||
</svg>
|
||||
Clear Cache
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="flex items-center justify-center px-4 py-3 bg-neutral-900 border border-neutral-700 rounded-lg text-sm font-medium text-white hover:bg-neutral-750 transition-colors">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
|
||||
</path>
|
||||
</svg>
|
||||
Force Status Refresh
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="flex items-center justify-center px-4 py-3 bg-yellow-900 border border-yellow-700 rounded-lg text-sm font-medium text-yellow-200 hover:bg-yellow-800 transition-colors">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
|
||||
</path>
|
||||
</svg>
|
||||
Restart Services
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden bg-neutral-800 rounded-lg border border-neutral-700 p-12">
|
||||
<div class="flex flex-col items-center justify-center text-center">
|
||||
<svg class="w-16 h-16 text-neutral-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4">
|
||||
</path>
|
||||
</svg>
|
||||
<h3 class="text-lg font-medium text-white mb-1">No data available</h3>
|
||||
<p class="text-sm text-neutral-400">Administrative data will appear here when available</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead class="bg-neutral-900 border-b border-neutral-700">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
User ID</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Name</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Email</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Role</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Status</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-700">
|
||||
<tr class="animate-pulse">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-16"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-32"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-48"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-5 bg-neutral-700 rounded-full w-16"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-5 bg-neutral-700 rounded-full w-16"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-24"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="animate-pulse">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-16"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-28"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-44"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-5 bg-neutral-700 rounded-full w-16"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-5 bg-neutral-700 rounded-full w-16"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-24"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="animate-pulse">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-16"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-36"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-52"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-5 bg-neutral-700 rounded-full w-16"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-5 bg-neutral-700 rounded-full w-16"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-24"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
296
src/assets/admin/_status_board.php
Normal file
296
src/assets/admin/_status_board.php
Normal file
@@ -0,0 +1,296 @@
|
||||
<div class="space-y-6">
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pb-4 border-b border-neutral-800">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">Status Board</h1>
|
||||
<p class="text-sm text-neutral-400 mt-1">Live infrastructure and service health</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-xs">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
<span class="text-neutral-300">Operational</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-yellow-500"></div>
|
||||
<span class="text-neutral-300">Degraded</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-red-500"></div>
|
||||
<span class="text-neutral-300">Outage</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Global Status Summary -->
|
||||
<section>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-neutral-400">Overall System</span>
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-white">Operational</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-neutral-400">Services Operational</span>
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-white">12/14</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-neutral-400">Active Incidents</span>
|
||||
<div class="w-2 h-2 rounded-full bg-yellow-500"></div>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-white">2</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-neutral-400">Regions Affected</span>
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-white">0/8</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Status Grid -->
|
||||
<section>
|
||||
<h2 class="text-lg font-semibold text-white mb-4">Services Status</h2>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
<h3 class="font-semibold text-white">Power Grid</h3>
|
||||
</div>
|
||||
<span class="px-2 py-1 text-xs font-medium rounded bg-green-500/10 text-green-400 border border-green-500/20">Operational</span>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-400 mb-2">Running normally</p>
|
||||
<p class="text-xs text-neutral-500">Last updated: 2 minutes ago</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
<h3 class="font-semibold text-white">Water Supply</h3>
|
||||
</div>
|
||||
<span class="px-2 py-1 text-xs font-medium rounded bg-green-500/10 text-green-400 border border-green-500/20">Operational</span>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-400 mb-2">Running normally</p>
|
||||
<p class="text-xs text-neutral-500">Last updated: 5 minutes ago</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
|
||||
<h3 class="font-semibold text-white">Network Infrastructure</h3>
|
||||
</div>
|
||||
<span class="px-2 py-1 text-xs font-medium rounded bg-yellow-500/10 text-yellow-400 border border-yellow-500/20">Degraded</span>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-400 mb-2">Partial outage in Zone C</p>
|
||||
<p class="text-xs text-neutral-500">Last updated: 1 minute ago</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
<h3 class="font-semibold text-white">Road Network</h3>
|
||||
</div>
|
||||
<span class="px-2 py-1 text-xs font-medium rounded bg-green-500/10 text-green-400 border border-green-500/20">Operational</span>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-400 mb-2">All routes clear</p>
|
||||
<p class="text-xs text-neutral-500">Last updated: 3 minutes ago</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
||||
<h3 class="font-semibold text-white">Public Transit</h3>
|
||||
</div>
|
||||
<span class="px-2 py-1 text-xs font-medium rounded bg-red-500/10 text-red-400 border border-red-500/20">Outage</span>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-400 mb-2">Service suspended on Line 5</p>
|
||||
<p class="text-xs text-neutral-500">Last updated: 8 minutes ago</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
<h3 class="font-semibold text-white">Emergency Services</h3>
|
||||
</div>
|
||||
<span class="px-2 py-1 text-xs font-medium rounded bg-green-500/10 text-green-400 border border-green-500/20">Operational</span>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-400 mb-2">All systems nominal</p>
|
||||
<p class="text-xs text-neutral-500">Last updated: 1 minute ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Location / Region Status -->
|
||||
<section>
|
||||
<h2 class="text-lg font-semibold text-white mb-4">Regional Status</h2>
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead class="bg-neutral-900 border-b border-neutral-700">
|
||||
<tr>
|
||||
<th class="text-left px-4 py-3 text-xs font-semibold text-neutral-300 uppercase tracking-wider">Region / Area</th>
|
||||
<th class="text-left px-4 py-3 text-xs font-semibold text-neutral-300 uppercase tracking-wider">Affected Services</th>
|
||||
<th class="text-left px-4 py-3 text-xs font-semibold text-neutral-300 uppercase tracking-wider">Status</th>
|
||||
<th class="text-left px-4 py-3 text-xs font-semibold text-neutral-300 uppercase tracking-wider">Last Update</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-700">
|
||||
<tr>
|
||||
<td class="px-4 py-3 text-sm text-white whitespace-nowrap">North District</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">None</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center gap-2 px-2 py-1 text-xs font-medium rounded bg-green-500/10 text-green-400 border border-green-500/20">
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
Operational
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-500 whitespace-nowrap">2 minutes ago</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-3 text-sm text-white whitespace-nowrap">South District</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">None</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center gap-2 px-2 py-1 text-xs font-medium rounded bg-green-500/10 text-green-400 border border-green-500/20">
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
Operational
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-500 whitespace-nowrap">4 minutes ago</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-3 text-sm text-white whitespace-nowrap">East District</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">Network, Transit</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center gap-2 px-2 py-1 text-xs font-medium rounded bg-yellow-500/10 text-yellow-400 border border-yellow-500/20">
|
||||
<div class="w-2 h-2 rounded-full bg-yellow-500"></div>
|
||||
Degraded
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-500 whitespace-nowrap">1 minute ago</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-3 text-sm text-white whitespace-nowrap">West District</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">None</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center gap-2 px-2 py-1 text-xs font-medium rounded bg-green-500/10 text-green-400 border border-green-500/20">
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
Operational
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-500 whitespace-nowrap">3 minutes ago</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-3 text-sm text-white whitespace-nowrap">Central District</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">None</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center gap-2 px-2 py-1 text-xs font-medium rounded bg-green-500/10 text-green-400 border border-green-500/20">
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
Operational
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-500 whitespace-nowrap">5 minutes ago</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Incident Snapshot -->
|
||||
<section>
|
||||
<h2 class="text-lg font-semibold text-white mb-4">Active Incidents</h2>
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 divide-y divide-neutral-700">
|
||||
<div class="p-4">
|
||||
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-2">
|
||||
<h3 class="font-semibold text-white">Network connectivity issues in Zone C</h3>
|
||||
<span class="px-2 py-1 text-xs font-medium rounded bg-yellow-500/10 text-yellow-400 border border-yellow-500/20 self-start">High</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-sm">
|
||||
<span class="px-2 py-1 text-xs font-medium rounded bg-blue-500/10 text-blue-400 border border-blue-500/20">Investigating</span>
|
||||
<span class="text-neutral-500">15 minutes ago</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-2">
|
||||
<h3 class="font-semibold text-white">Transit Line 5 service disruption</h3>
|
||||
<span class="px-2 py-1 text-xs font-medium rounded bg-red-500/10 text-red-400 border border-red-500/20 self-start">Critical</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-sm">
|
||||
<span class="px-2 py-1 text-xs font-medium rounded bg-orange-500/10 text-orange-400 border border-orange-500/20">Identified</span>
|
||||
<span class="text-neutral-500">32 minutes ago</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Loading State (Hidden by default) -->
|
||||
<div class="space-y-6 hidden" data-loading-state>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4 animate-pulse">
|
||||
<div class="h-4 bg-neutral-700 rounded w-1/2 mb-3"></div>
|
||||
<div class="h-8 bg-neutral-700 rounded w-3/4"></div>
|
||||
</div>
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4 animate-pulse">
|
||||
<div class="h-4 bg-neutral-700 rounded w-1/2 mb-3"></div>
|
||||
<div class="h-8 bg-neutral-700 rounded w-3/4"></div>
|
||||
</div>
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4 animate-pulse">
|
||||
<div class="h-4 bg-neutral-700 rounded w-1/2 mb-3"></div>
|
||||
<div class="h-8 bg-neutral-700 rounded w-3/4"></div>
|
||||
</div>
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4 animate-pulse">
|
||||
<div class="h-4 bg-neutral-700 rounded w-1/2 mb-3"></div>
|
||||
<div class="h-8 bg-neutral-700 rounded w-3/4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4 animate-pulse">
|
||||
<div class="h-5 bg-neutral-700 rounded w-1/3 mb-3"></div>
|
||||
<div class="h-4 bg-neutral-700 rounded w-full mb-2"></div>
|
||||
<div class="h-3 bg-neutral-700 rounded w-1/4"></div>
|
||||
</div>
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4 animate-pulse">
|
||||
<div class="h-5 bg-neutral-700 rounded w-1/3 mb-3"></div>
|
||||
<div class="h-4 bg-neutral-700 rounded w-full mb-2"></div>
|
||||
<div class="h-3 bg-neutral-700 rounded w-1/4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="space-y-3">
|
||||
<div class="h-10 bg-neutral-700 rounded animate-pulse"></div>
|
||||
<div class="h-10 bg-neutral-700 rounded animate-pulse"></div>
|
||||
<div class="h-10 bg-neutral-700 rounded animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State for Incidents -->
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-12 text-center hidden" data-empty-incidents>
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-500/10 mb-4">
|
||||
<svg class="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-lg font-semibold text-white mb-1">No active incidents</p>
|
||||
<p class="text-sm text-neutral-400">All systems are operating normally</p>
|
||||
</div>
|
||||
</div>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 43 KiB |
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "SteamsTube",
|
||||
"short_name": "SteamsTube",
|
||||
"name": "Infra-UNI",
|
||||
"short_name": "Infra-UNI",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/web-app-manifest-192x192.png",
|
||||
@@ -15,7 +15,7 @@
|
||||
"purpose": "maskable"
|
||||
}
|
||||
],
|
||||
"theme_color": "#171717",
|
||||
"background_color": "#171717",
|
||||
"theme_color": "#ffffff",
|
||||
"background_color": "#ffffff",
|
||||
"display": "standalone"
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 18 KiB |
Binary file not shown.
BIN
src/assets/images/preview/infra-xodivorce-in-preview.png
Normal file
BIN
src/assets/images/preview/infra-xodivorce-in-preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 612 KiB |
18
src/assets/js/account_config.js
Normal file
18
src/assets/js/account_config.js
Normal file
@@ -0,0 +1,18 @@
|
||||
function copyToClipboard(text, btnId) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
const btn = document.getElementById(btnId);
|
||||
const icon = btn.querySelector('svg');
|
||||
|
||||
// Success State
|
||||
btn.classList.add('bg-green-500/20', 'text-green-400', 'border-green-500/50');
|
||||
btn.classList.remove('text-neutral-400');
|
||||
icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>';
|
||||
|
||||
// Revert
|
||||
setTimeout(() => {
|
||||
btn.classList.remove('bg-green-500/20', 'text-green-400', 'border-green-500/50');
|
||||
btn.classList.add('text-neutral-400');
|
||||
icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>';
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
100
src/assets/js/dashboard_config.js
Normal file
100
src/assets/js/dashboard_config.js
Normal file
@@ -0,0 +1,100 @@
|
||||
async function loadDashboardMetrics() {
|
||||
// TODO: Replace with actual API call
|
||||
// const response = await fetch('/api/dashboard/metrics');
|
||||
// const data = await response.json();
|
||||
|
||||
// Placeholder for future implementation
|
||||
const metricsData = {
|
||||
totalReports: null,
|
||||
activeIssues: null,
|
||||
resolvedIssues: null,
|
||||
criticalAlerts: null,
|
||||
};
|
||||
|
||||
// Update DOM with API data
|
||||
document.querySelector('[data-value="total-reports"]').textContent =
|
||||
metricsData.totalReports !== null ? metricsData.totalReports : "—";
|
||||
document.querySelector('[data-value="active-issues"]').textContent =
|
||||
metricsData.activeIssues !== null ? metricsData.activeIssues : "—";
|
||||
document.querySelector('[data-value="resolved-issues"]').textContent =
|
||||
metricsData.resolvedIssues !== null ? metricsData.resolvedIssues : "—";
|
||||
document.querySelector('[data-value="critical-alerts"]').textContent =
|
||||
metricsData.criticalAlerts !== null ? metricsData.criticalAlerts : "—";
|
||||
}
|
||||
|
||||
async function loadRecentActivity() {
|
||||
// TODO: Replace with actual API call
|
||||
// const response = await fetch('/api/activity/recent');
|
||||
// const activities = await response.json();
|
||||
|
||||
const activities = [];
|
||||
|
||||
const listContainer = document.getElementById("activity-list");
|
||||
const skeleton = document.getElementById("activity-skeleton");
|
||||
const empty = document.getElementById("activity-empty");
|
||||
const items = document.getElementById("activity-items");
|
||||
|
||||
skeleton.classList.add("hidden");
|
||||
|
||||
if (activities.length === 0) {
|
||||
listContainer.setAttribute("data-status", "empty");
|
||||
empty.classList.remove("hidden");
|
||||
} else {
|
||||
listContainer.setAttribute("data-status", "loaded");
|
||||
items.classList.remove("hidden");
|
||||
|
||||
// Render activity items
|
||||
activities.forEach((activity) => {
|
||||
const item = createActivityItem(activity);
|
||||
items.appendChild(item);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function createActivityItem(activity) {
|
||||
const div = document.createElement("div");
|
||||
div.className = "px-6 py-4 flex items-start space-x-4";
|
||||
div.setAttribute("data-activity-id", activity.id);
|
||||
|
||||
const statusColors = {
|
||||
critical: "bg-red-400",
|
||||
warning: "bg-yellow-400",
|
||||
info: "bg-blue-400",
|
||||
success: "bg-green-400",
|
||||
};
|
||||
|
||||
div.innerHTML = `
|
||||
<div class="w-2 h-2 mt-2 rounded-full ${
|
||||
statusColors[activity.severity] || "bg-gray-600"
|
||||
}"></div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm text-gray-200">${activity.message}</p>
|
||||
<div class="mt-1 flex items-center space-x-3">
|
||||
<span class="text-xs text-gray-500">${
|
||||
activity.timestamp
|
||||
}</span>
|
||||
<span class="px-2 py-0.5 text-xs font-medium rounded ${getBadgeClass(
|
||||
activity.status
|
||||
)}">${activity.status}</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return div;
|
||||
}
|
||||
|
||||
function getBadgeClass(status) {
|
||||
const classes = {
|
||||
new: "bg-blue-900/40 text-blue-400",
|
||||
"in-progress": "bg-yellow-900/40 text-yellow-400",
|
||||
resolved: "bg-green-900/40 text-green-400",
|
||||
closed: "bg-gray-800 text-gray-400",
|
||||
};
|
||||
return classes[status] || "bg-gray-800 text-gray-400";
|
||||
}
|
||||
|
||||
// Initialize dashboard on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
loadDashboardMetrics();
|
||||
setTimeout(() => loadRecentActivity(), 500);
|
||||
});
|
||||
96
src/assets/users/_overview.php
Normal file
96
src/assets/users/_overview.php
Normal file
@@ -0,0 +1,96 @@
|
||||
<div class="max-w-6xl mx-auto w-full">
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||||
|
||||
<div class="group bg-neutral-800 rounded-lg border border-neutral-700/50 p-4 shadow-sm hover:border-blue-500/30 transition-all duration-300 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-xs font-semibold text-neutral-400 uppercase tracking-wider group-hover:text-blue-400 transition-colors">Total Reports</h3>
|
||||
<p class="text-2xl font-bold text-white mt-1">128</p>
|
||||
<p class="text-[10px] text-neutral-500 mt-1">All submissions overview</p>
|
||||
</div>
|
||||
<div class="p-3 bg-blue-500/10 rounded-lg group-hover:bg-blue-500/20 transition-colors">
|
||||
<svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-neutral-800 rounded-lg border border-neutral-700/50 p-4 shadow-sm hover:border-yellow-500/30 transition-all duration-300 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-xs font-semibold text-neutral-400 uppercase tracking-wider group-hover:text-yellow-400 transition-colors">Active Issues</h3>
|
||||
<p class="text-2xl font-bold text-white mt-1">42</p>
|
||||
<p class="text-[10px] text-neutral-500 mt-1">In progress / Open</p>
|
||||
</div>
|
||||
<div class="p-3 bg-yellow-500/10 rounded-lg group-hover:bg-yellow-500/20 transition-colors">
|
||||
<svg class="w-6 h-6 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-neutral-800 rounded-lg border border-neutral-700/50 p-4 shadow-sm hover:border-green-500/30 transition-all duration-300 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-xs font-semibold text-neutral-400 uppercase tracking-wider group-hover:text-green-400 transition-colors">Resolved</h3>
|
||||
<p class="text-2xl font-bold text-white mt-1">86</p>
|
||||
<p class="text-[10px] text-neutral-500 mt-1">Successfully closed</p>
|
||||
</div>
|
||||
<div class="p-3 bg-green-500/10 rounded-lg group-hover:bg-green-500/20 transition-colors">
|
||||
<svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden shadow-sm">
|
||||
<div class="px-4 py-3 border-b border-neutral-700 flex items-center justify-between bg-neutral-900/30">
|
||||
<h3 class="text-sm font-semibold text-white">Recent Activity</h3>
|
||||
<button class="text-xs text-blue-400 hover:text-blue-300 font-medium transition-colors">View All</button>
|
||||
</div>
|
||||
|
||||
<div class="divide-y divide-neutral-700/50">
|
||||
|
||||
<div class="px-4 py-3 hover:bg-neutral-700/30 transition-colors flex items-center gap-3">
|
||||
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-green-500/10 border border-green-500/20 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 grid gap-0.5">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm font-medium text-neutral-200 truncate">
|
||||
Issue <span class="text-white hover:underline cursor-pointer">#1231</span> Resolved
|
||||
</p>
|
||||
<span class="text-[10px] text-neutral-500 whitespace-nowrap">2h ago</span>
|
||||
</div>
|
||||
<p class="text-xs text-neutral-500 truncate">Water leakage in park • <span>23/v/kpc-cst/33</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-3 hover:bg-neutral-700/30 transition-colors flex items-center gap-3">
|
||||
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-500/10 border border-blue-500/20 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 grid gap-0.5">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm font-medium text-neutral-200 truncate">Issue 1234 submitted</p>
|
||||
<span class="text-[10px] text-neutral-500 whitespace-nowrap">5h ago</span>
|
||||
</div>
|
||||
<p class="text-xs text-neutral-500 truncate">Pothole on Main Street • <span>23/v/kpc-cst/36</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-3 hover:bg-neutral-700/30 transition-colors flex items-center gap-3">
|
||||
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-yellow-500/10 border border-yellow-500/20 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 grid gap-0.5">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-sm font-medium text-neutral-200 truncate">Status: In Progress</p>
|
||||
<span class="text-[10px] text-neutral-500 whitespace-nowrap">1d ago</span>
|
||||
</div>
|
||||
<p class="text-xs text-neutral-500 truncate">Broken Street Light • <span>23/v/kpc-cst/37</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
511
src/assets/users/_reports.php
Normal file
511
src/assets/users/_reports.php
Normal file
@@ -0,0 +1,511 @@
|
||||
<?php
|
||||
function words($text, $limit = 4) {
|
||||
$w = preg_split('/\s+/', trim($text));
|
||||
return count($w) > $limit
|
||||
? implode(' ', array_slice($w, 0, $limit)) . '…'
|
||||
: $text;
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="max-w-7xl mx-auto space-y-6">
|
||||
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-white tracking-tight">Campus Reports</h1>
|
||||
<p class="mt-1 text-sm text-neutral-400">Manage facility and infrastructure issues</p>
|
||||
</div>
|
||||
<button onclick="document.getElementById('createModal').classList.remove('hidden')"
|
||||
class="w-full sm:w-auto px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-lg shadow-lg shadow-blue-900/20 transition-all flex items-center justify-center gap-2 group">
|
||||
<svg class="w-4 h-4 transition-transform group-hover:rotate-90" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
Create Report
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-xl border border-neutral-700 p-4 shadow-sm">
|
||||
<div class="flex flex-col lg:flex-row gap-4 justify-between">
|
||||
<div class="flex overflow-x-auto pb-2 lg:pb-0 gap-2 no-scrollbar">
|
||||
<button
|
||||
class="px-4 py-2 bg-blue-600/10 text-blue-400 border border-blue-600/20 text-sm font-medium rounded-lg whitespace-nowrap">All
|
||||
Reports</button>
|
||||
<button
|
||||
class="px-4 py-2 hover:bg-neutral-700 text-neutral-400 hover:text-white text-sm font-medium rounded-lg transition-colors whitespace-nowrap">Open</button>
|
||||
<button
|
||||
class="px-4 py-2 hover:bg-neutral-700 text-neutral-400 hover:text-white text-sm font-medium rounded-lg transition-colors whitespace-nowrap">In
|
||||
Progress</button>
|
||||
<button
|
||||
class="px-4 py-2 hover:bg-neutral-700 text-neutral-400 hover:text-white text-sm font-medium rounded-lg transition-colors whitespace-nowrap">Resolved</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-3">
|
||||
<div class="relative min-w-[200px]">
|
||||
<select
|
||||
class="w-full appearance-none px-4 py-2 bg-neutral-900 border border-neutral-700 rounded-lg text-sm text-neutral-300 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all cursor-pointer">
|
||||
<option>Last 7 days</option>
|
||||
<option>Last 30 days</option>
|
||||
<option>Last 90 days</option>
|
||||
<option>All time</option>
|
||||
</select>
|
||||
<svg class="absolute right-3 top-2.5 h-4 w-4 text-neutral-500 pointer-events-none" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="relative w-full sm:w-64">
|
||||
<input type="text" placeholder="Search reports..."
|
||||
class="w-full pl-10 pr-4 py-2 bg-neutral-900 border border-neutral-700 rounded-lg text-sm text-white placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all">
|
||||
<svg class="absolute left-3 top-2.5 h-4 w-4 text-neutral-500" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 md:hidden">
|
||||
<div
|
||||
class="bg-neutral-800 hover:bg-neutral-750 transition-colors duration-200 rounded-xl border border-neutral-700 p-4 space-y-3 group cursor-default">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<span
|
||||
class="text-xs font-mono text-neutral-500 hover:text-blue-400 hover:underline cursor-pointer transition-colors">#1234</span>
|
||||
<h3 class="font-semibold text-white mt-1">Pothole on Main Street</h3>
|
||||
</div>
|
||||
<span
|
||||
class="inline-flex px-2.5 py-1 text-xs font-medium rounded-full bg-blue-900/30 text-blue-400 border border-blue-700/50">Open</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 text-sm text-neutral-400">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
Main St. & 4th Ave
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2 py-2 border-t border-b border-neutral-700/50">
|
||||
<div>
|
||||
<p class="text-xs text-neutral-500">Category</p>
|
||||
<p class="text-sm text-neutral-300">Road Damage</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-neutral-500">Priority</p>
|
||||
<p class="text-sm text-red-400 font-medium">High</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between pt-1">
|
||||
<div class="flex items-center gap-2 text-xs text-neutral-500">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
Dec 15, 2024
|
||||
</div>
|
||||
<button class="text-blue-400 text-sm font-medium hover:text-blue-300 transition-colors">View Details
|
||||
→</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="bg-neutral-800 hover:bg-neutral-750 transition-colors duration-200 rounded-xl border border-neutral-700 p-4 space-y-3 group cursor-default">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<span
|
||||
class="text-xs font-mono text-neutral-500 hover:text-blue-400 hover:underline cursor-pointer transition-colors">#1233</span>
|
||||
<h3 class="font-semibold text-white mt-1">Broken street light</h3>
|
||||
</div>
|
||||
<span
|
||||
class="inline-flex px-2.5 py-1 text-xs font-medium rounded-full bg-yellow-900/30 text-yellow-500 border border-yellow-700/50">In
|
||||
Progress</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 text-sm text-neutral-400">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
Sector 7 Park
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2 py-2 border-t border-b border-neutral-700/50">
|
||||
<div>
|
||||
<p class="text-xs text-neutral-500">Category</p>
|
||||
<p class="text-sm text-neutral-300">Street Lighting</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-neutral-500">Priority</p>
|
||||
<p class="text-sm text-orange-400 font-medium">Medium</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between pt-1">
|
||||
<div class="flex items-center gap-2 text-xs text-neutral-500">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
Dec 14, 2024
|
||||
</div>
|
||||
<button class="text-blue-400 text-sm font-medium hover:text-blue-300 transition-colors">View Details
|
||||
→</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="bg-neutral-800 hover:bg-neutral-750 transition-colors duration-200 rounded-xl border border-neutral-700 p-4 space-y-3 group cursor-default">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<span
|
||||
class="text-xs font-mono text-neutral-500 hover:text-blue-400 hover:underline cursor-pointer transition-colors">#1232</span>
|
||||
<h3 class="font-semibold text-white mt-1">Water leakage in park</h3>
|
||||
</div>
|
||||
<span
|
||||
class="inline-flex px-2.5 py-1 text-xs font-medium rounded-full bg-green-900/30 text-green-400 border border-green-700/50">Resolved</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 text-sm text-neutral-400">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
Central Park Zone B
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2 py-2 border-t border-b border-neutral-700/50">
|
||||
<div>
|
||||
<p class="text-xs text-neutral-500">Category</p>
|
||||
<p class="text-sm text-neutral-300">Water Supply</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-neutral-500">Priority</p>
|
||||
<p class="text-sm text-green-400 font-medium">Low</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between pt-1">
|
||||
<div class="flex items-center gap-2 text-xs text-neutral-500">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
Dec 12, 2024
|
||||
</div>
|
||||
<button class="text-blue-400 text-sm font-medium hover:text-blue-300 transition-colors">View Details
|
||||
→</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden md:block bg-neutral-800 rounded-xl border border-neutral-700 overflow-hidden shadow-sm">
|
||||
<div class="overflow-x-auto custom-scrollbar">
|
||||
<table class="w-full">
|
||||
<thead class="bg-neutral-900/50 border-b border-neutral-700">
|
||||
<tr>
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-neutral-400 uppercase tracking-wider">
|
||||
ID</th>
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-neutral-400 uppercase tracking-wider">
|
||||
Title</th>
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-neutral-400 uppercase tracking-wider">
|
||||
Category</th>
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-neutral-400 uppercase tracking-wider">
|
||||
Status</th>
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-neutral-400 uppercase tracking-wider">
|
||||
Priority</th>
|
||||
<th
|
||||
class="px-6 py-4 text-center text-xs font-semibold text-neutral-400 uppercase tracking-wider">
|
||||
Image</th>
|
||||
<th
|
||||
class="px-6 py-4 text-center text-xs font-semibold text-neutral-400 uppercase tracking-wider">
|
||||
G-Map</th>
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-neutral-400 uppercase tracking-wider">
|
||||
Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-700/50">
|
||||
<tr class="hover:bg-neutral-700/30 transition-colors duration-200 group">
|
||||
<td
|
||||
class="px-6 py-4 text-sm font-mono text-neutral-500 group-hover:text-neutral-300 hover:text-blue-400 hover:underline cursor-pointer transition-colors">
|
||||
#1234</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="text-sm font-medium text-white ">Pothole on Main Street</div>
|
||||
<div class="text-xs text-neutral-500 mt-0.5">Reported by <span>23/v/kpc-cst/36</span></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-neutral-300">Road Damage</td>
|
||||
<td class="px-6 py-4">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 text-xs font-medium rounded-full bg-blue-900/30 text-blue-400 border border-blue-700/50">
|
||||
<span class="w-1.5 h-1.5 mr-1.5 bg-blue-400 rounded-full"></span>
|
||||
Open
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-red-400 font-medium">High</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<button class="p-2 hover:bg-neutral-700 rounded-lg text-neutral-400 hover:text-white transition-colors"
|
||||
title="View Image">
|
||||
<svg class="h-5 w-5 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<button class="p-2 hover:bg-neutral-700 rounded-lg text-blue-500 hover:text-blue-400 transition-colors"
|
||||
title="View Map">
|
||||
<svg class="h-5 w-5 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-neutral-400">Dec 15, 2024</td>
|
||||
</tr>
|
||||
|
||||
<tr class="hover:bg-neutral-700/30 transition-colors duration-200 group">
|
||||
<td
|
||||
class="px-6 py-4 text-sm font-mono text-neutral-500 group-hover:text-neutral-300 hover:text-blue-400 hover:underline cursor-pointer transition-colors">
|
||||
#1233</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="text-sm font-medium text-white">Broken street light</div>
|
||||
<div class="text-xs text-neutral-500 mt-0.5">Reported by <span>23/v/kpc-cst/37</span></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-neutral-300">Street Lighting</td>
|
||||
<td class="px-6 py-4">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 text-xs font-medium rounded-full bg-yellow-900/30 text-yellow-500 border border-yellow-700/50">
|
||||
<span class="w-1.5 h-1.5 mr-1.5 bg-yellow-500 rounded-full animate-pulse"></span>
|
||||
In Progress
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-orange-400 font-medium">Medium</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<button class="p-2 hover:bg-neutral-700 rounded-lg text-neutral-400 hover:text-white transition-colors"
|
||||
title="View Image">
|
||||
<svg class="h-5 w-5 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<button class="p-2 hover:bg-neutral-700 rounded-lg text-blue-500 hover:text-blue-400 transition-colors"
|
||||
title="View Map">
|
||||
<svg class="h-5 w-5 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-neutral-400">Dec 14, 2024</td>
|
||||
</tr>
|
||||
|
||||
<tr class="hover:bg-neutral-700/30 transition-colors duration-200 group">
|
||||
<td
|
||||
class="px-6 py-4 text-sm font-mono text-neutral-500 group-hover:text-neutral-300 hover:text-blue-400 hover:underline cursor-pointer transition-colors">
|
||||
#1232</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="text-sm font-medium text-white">Water leakage in park</div>
|
||||
<div class="text-xs text-neutral-500 mt-0.5">Reported by <span>23/v/kpc-cst/33</span></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-neutral-300">Water Supply</td>
|
||||
<td class="px-6 py-4">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 text-xs font-medium rounded-full bg-green-900/30 text-green-400 border border-green-700/50">
|
||||
<span class="w-1.5 h-1.5 mr-1.5 bg-green-400 rounded-full"></span>
|
||||
Resolved
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-green-400 font-medium">Low</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<button class="p-2 hover:bg-neutral-700 rounded-lg text-neutral-400 hover:text-white transition-colors"
|
||||
title="View Image">
|
||||
<svg class="h-5 w-5 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<button class="p-2 hover:bg-neutral-700 rounded-lg text-blue-500 hover:text-blue-400 transition-colors"
|
||||
title="View Map">
|
||||
<svg class="h-5 w-5 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-neutral-400">Dec 12, 2024</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-900 border-t border-neutral-700 px-6 py-4 flex items-center justify-between">
|
||||
<span class="text-sm text-neutral-400">Showing <span class="text-white font-medium">1-3</span> of <span
|
||||
class="text-white font-medium">128</span></span>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="px-3 py-1 bg-neutral-800 hover:bg-neutral-700 border border-neutral-700 rounded-lg text-sm transition-colors disabled:opacity-50"
|
||||
disabled>Previous</button>
|
||||
<button
|
||||
class="px-3 py-1 bg-neutral-800 hover:bg-neutral-700 border border-neutral-700 rounded-lg text-sm transition-colors">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="createModal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog"
|
||||
aria-modal="true">
|
||||
<div class="flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0">
|
||||
<div class="fixed inset-0 bg-neutral-900/80 backdrop-blur-sm transition-opacity" aria-hidden="true"
|
||||
onclick="document.getElementById('createModal').classList.add('hidden')"></div>
|
||||
|
||||
<div
|
||||
class="relative bg-neutral-800 rounded-2xl border border-neutral-700 text-left shadow-2xl transform transition-all sm:my-8 sm:w-full sm:max-w-2xl">
|
||||
<div class="px-6 py-4 border-b border-neutral-700 flex justify-between items-center">
|
||||
<h2 class="text-xl font-semibold text-white">Create Report</h2>
|
||||
<button onclick="document.getElementById('createModal').classList.add('hidden')"
|
||||
class="text-neutral-400 hover:text-white transition-colors">
|
||||
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="px-6 py-6 space-y-6">
|
||||
<form>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="col-span-1 md:col-span-2">
|
||||
<label class="block text-sm font-medium text-neutral-300 mb-2">Report Title <span class="text-red-500">*</span></label>
|
||||
<input type="text" required
|
||||
class="w-full px-4 py-2.5 bg-neutral-900 border border-neutral-700 rounded-lg text-white placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all"
|
||||
placeholder="E.g., Large pothole near school">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-neutral-300 mb-2">Category <span class="text-red-500">*</span></label>
|
||||
<div class="relative">
|
||||
<select required
|
||||
class="w-full px-4 py-2.5 bg-neutral-900 border border-neutral-700 rounded-lg text-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all cursor-pointer">
|
||||
<option value="" disabled selected>Select a category...</option>
|
||||
<option>WiFi & Network Issue</option>
|
||||
<option>Electrical Issue</option>
|
||||
<option>Water & Plumbing</option>
|
||||
<option>HVAC (AC/Heating)</option>
|
||||
<option>Furniture & Fixtures</option>
|
||||
<option>Cleaning & Janitorial</option>
|
||||
<option>Security & Safety</option>
|
||||
<option>Road & Pathway Damage</option>
|
||||
<option>Other</option>
|
||||
</select>
|
||||
<svg class="absolute right-3 top-3 h-4 w-4 text-neutral-500 pointer-events-none"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-neutral-300 mb-2">Priority <span class="text-red-500">*</span></label>
|
||||
<div class="flex bg-neutral-900 rounded-lg p-1 border border-neutral-700">
|
||||
<label class="flex-1 text-center cursor-pointer">
|
||||
<input type="radio" name="priority" class="sr-only peer">
|
||||
<span
|
||||
class="block px-2 py-1.5 rounded-md text-sm text-neutral-400 peer-checked:bg-neutral-800 peer-checked:text-green-400 peer-checked:shadow-sm transition-all">Low</span>
|
||||
</label>
|
||||
<label class="flex-1 text-center cursor-pointer">
|
||||
<input type="radio" name="priority" class="sr-only peer">
|
||||
<span
|
||||
class="block px-2 py-1.5 rounded-md text-sm text-neutral-400 peer-checked:bg-neutral-800 peer-checked:text-white peer-checked:shadow-sm transition-all">Med</span>
|
||||
</label>
|
||||
<label class="flex-1 text-center cursor-pointer">
|
||||
<input type="radio" name="priority" class="sr-only peer" checked>
|
||||
<span
|
||||
class="block px-2 py-1.5 rounded-md text-sm text-neutral-400 peer-checked:bg-neutral-800 peer-checked:text-white peer-checked:shadow-sm transition-all">High</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<label class="block text-sm font-medium text-neutral-300">Location <span class="text-red-500">*</span></label>
|
||||
<button type="button" class="text-xs text-blue-400 hover:text-blue-300 flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
Use Current Location
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="relative mb-3">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg class="h-4 w-4 text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
|
||||
</svg>
|
||||
</div>
|
||||
<input type="text" required
|
||||
class="w-full pl-10 pr-4 py-2.5 bg-neutral-900 border border-neutral-700 rounded-lg text-white placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all text-sm"
|
||||
placeholder="Paste Google Maps link or enter address...">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<label class="block text-sm font-medium text-neutral-300 mb-2">Evidence <span class="text-red-500">*</span></label>
|
||||
<div class="relative">
|
||||
<input type="file" required id="file-upload" class="hidden">
|
||||
<label for="file-upload"
|
||||
class="block border-2 border-dashed border-neutral-700 rounded-xl p-8 text-center hover:border-blue-500/50 hover:bg-neutral-900/50 transition-all cursor-pointer group">
|
||||
<div
|
||||
class="w-12 h-12 bg-neutral-800 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform">
|
||||
<svg class="h-6 w-6 text-neutral-400 group-hover:text-blue-400" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-300 font-medium">Click to upload or drag and drop</p>
|
||||
<p class="text-xs text-neutral-500 mt-1"> PNG, JPG, JPEG (max. 2MB)</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-6 py-4 border-t border-neutral-700 bg-neutral-800/50 flex flex-col sm:flex-row sm:items-center justify-between gap-4 rounded-b-2xl">
|
||||
<span class="text-xs text-neutral-500 order-2 sm:order-1 text-center sm:text-left">
|
||||
<span class="text-red-500">*</span> All fields marked above are required
|
||||
</span>
|
||||
<div class="flex gap-3 order-1 sm:order-2 w-full sm:w-auto justify-end">
|
||||
<button type="button" onclick="document.getElementById('createModal').classList.add('hidden')"
|
||||
class="px-5 py-2 text-neutral-300 hover:text-white text-sm font-medium transition-colors">Cancel</button>
|
||||
<button type="submit"
|
||||
class="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg shadow-lg shadow-blue-900/20 transition-all">Submit
|
||||
Report</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user