staff chnages and customer chnages

This commit is contained in:
divya abdar
2025-12-23 16:26:33 +05:30
parent 6ccf2cf84e
commit 7362ef6bdc
3 changed files with 1015 additions and 252 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -4,7 +4,47 @@
@section('content')
<style>
/* Hide scrollbar but keep scroll functionality */
html,
body {
overflow-x: hidden !important;
width: 100%;
max-width: 100%;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html, body {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE & Edge */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none; /* Chrome, Safari */
}
/* GLOBAL scrollbar hide keeps scrolling */
html,
body,
.staff-add-container,
.staff-add-card {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE / Edge */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.staff-add-container::-webkit-scrollbar,
.staff-add-card::-webkit-scrollbar {
display: none; /* Chrome / Safari */
}
:root {
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
@@ -15,11 +55,16 @@
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
margin: 0;
padding: clamp(12px, 2vw, 30px);
box-sizing: border-box;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
overflow-x: hidden; /* hide horizontal only */
overflow-y: auto;
}
/* Main Container - FLUID LIKE SHIPMENT PAGE */
.staff-add-container {
@@ -29,16 +74,7 @@
/* Decorative Elements */
.decorative-circle {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: var(--secondary-gradient);
opacity: 0.05;
filter: blur(40px);
z-index: 0;
top: -100px;
right: -100px;
display: none;
}
/* Main Card - FLUID BEHAVIOR */
@@ -950,6 +986,23 @@
font-size: 0.75rem;
}
}
.header-flex {
display: flex;
align-items: center;
gap: 20px;
text-align: left; /* override center */
}
.header-icon {
flex-shrink: 0;
font-size: 48px;
}
.header-text {
display: flex;
flex-direction: column;
}
</style>
<div class="staff-add-container">
@@ -960,13 +1013,18 @@
<div class="staff-add-card">
<!-- Header -->
<div class="staff-add-header">
<div class="header-content">
<div class="header-icon">👨‍💼</div>
<div class="header-content header-flex">
<div class="header-icon">👨‍💼</div>
<div class="header-text">
<h1 class="header-title">Add New Staff Member</h1>
<p class="header-subtitle">Complete all the steps below to add a new staff member to your team</p>
<p class="header-subtitle">
Complete all the steps below to add a new staff member to your team
</p>
</div>
</div>
</div>
<!-- Progress Steps -->
<div class="progress-steps">
<div class="step active" data-step="1">

View File

@@ -11,6 +11,79 @@
--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
}
/* Hide scrollbar but allow scroll */
.hide-scrollbar {
overflow-y: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE & Edge */
}
.hide-scrollbar::-webkit-scrollbar {
display: none; /* Chrome, Safari */
}
/* =========================================== */
/* HORIZONTAL SCROLL FIXES */
/* =========================================== */
html, body {
overflow-x: hidden !important;
scrollbar-width: none;
}
.staff-edit-container,
.staff-edit-card,
.form-section,
.form-grid,
.permissions-container {
max-width: 100%;
overflow-x: hidden;
}
* {
box-sizing: border-box;
}
/* Fix grid overflow issues */
.form-grid,
.permissions-container {
min-width: 0;
}
/* Fix transform hover effects */
.permission-group:hover,
.status-option:hover {
transform: translateY(-2px) !important;
}
.permission-item:hover {
transform: translateX(3px) !important;
}
/* Ensure containers don't exceed viewport */
@media (min-width: 1200px) {
.staff-edit-card {
max-width: 95vw;
}
}
@media (min-width: 1440px) {
.staff-edit-card {
max-width: 97vw;
}
}
@media (min-width: 1600px) {
.staff-edit-card {
max-width: 98vw;
}
}
@media (min-width: 1920px) {
.staff-edit-card {
max-width: 99vw;
}
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
@@ -46,21 +119,26 @@
z-index: 10;
}
/* Fluid Header */
/* =========================================== */
/* UPDATED HEADER LAYOUT */
/* =========================================== */
.staff-header {
display: flex;
align-items: center;
gap: 14px;
text-align: left;
background: var(--primary-gradient);
padding: 30px 25px;
/* padding: 16px 20px; */
color: white;
text-align: center;
position: relative;
flex-wrap: wrap;
}
.staff-avatar {
width: 80px;
height: 80px;
width: 70px;
height: 70px;
border-radius: 50%;
background: white;
margin: 0 auto 15px;
display: flex;
align-items: center;
justify-content: center;
@@ -68,6 +146,7 @@
color: #667eea;
border: 3px solid white;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
flex-shrink: 0;
}
.staff-avatar-initials {
@@ -78,6 +157,11 @@
-webkit-text-fill-color: transparent;
}
.staff-header-content {
flex: 1;
min-width: 0;
}
.staff-title {
font-size: 1.8rem;
font-weight: 700;
@@ -102,6 +186,68 @@
border: 1px solid rgba(255,255,255,0.2);
}
/* Mobile responsive for header */
@media (max-width: 768px) {
.staff-header {
flex-direction: column;
text-align: center;
gap: 15px;
padding: 20px 15px;
}
.staff-avatar {
margin: 0 auto;
}
.staff-header-content {
text-align: center;
}
}
/* Adjust avatar sizes for larger screens */
@media (min-width: 1200px) {
.staff-header {
gap: 30px;
padding: 40px 35px;
}
.staff-avatar {
width: 90px;
height: 90px;
}
}
@media (min-width: 1440px) {
.staff-header {
gap: 35px;
padding: 45px 40px;
}
.staff-avatar {
width: 100px;
height: 100px;
}
}
@media (min-width: 1600px) {
.staff-header {
gap: 40px;
padding: 50px 45px;
}
.staff-avatar {
width: 110px;
height: 110px;
}
}
@media (min-width: 1920px) {
.staff-header {
gap: 45px;
padding: 60px 50px;
}
}
/* Fluid Form Sections */
.form-section {
padding: 25px;
@@ -479,7 +625,7 @@
@media (min-width: 1200px) {
.staff-edit-card {
margin: 0 auto;
max-width: 95%;
max-width: 95vw;
}
.form-grid {
@@ -532,7 +678,7 @@
/* Extra large desktop - 1440px+ */
@media (min-width: 1440px) {
.staff-edit-card {
max-width: 97%;
max-width: 97vw;
}
.form-grid {
@@ -604,7 +750,7 @@
/* Ultra wide desktop - 1600px+ */
@media (min-width: 1600px) {
.staff-edit-card {
max-width: 98%;
max-width: 98vw;
}
.form-grid {
@@ -676,7 +822,7 @@
}
.staff-edit-card {
max-width: 99%;
max-width: 99vw;
}
.form-grid {
@@ -788,9 +934,11 @@
{{ strtoupper(substr($staff->name, 0, 2)) }}
</div>
</div>
<h1 class="staff-title">Edit Staff Profile</h1>
<div class="staff-subtitle">{{ $staff->name }}</div>
<div class="employee-id-badge">{{ $staff->employee_id }}</div>
<div class="staff-header-content">
<h1 class="staff-title">Edit Staff Profile</h1>
<div class="staff-subtitle">{{ $staff->name }}</div>
<div class="employee-id-badge">{{ $staff->employee_id }}</div>
</div>
</div>
<!-- Error Messages -->