מפת הזמנות (0)
חדש
משובץ
הושלם
הזמנות
0 תוצאות
טוען הזמנות...
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--primary: #10b981;
--primary-dark: #059669;
--primary-light: #d1fae5;
--accent: #8b5cf6;
--accent-light: #ede9fe;
--warning: #f59e0b;
--warning-light: #fef3c7;
--danger: #ef4444;
--danger-light: #fee2e2;
--blue: #3b82f6;
--blue-light: #dbeafe;
--dark: #1e293b;
--gray: #64748b;
--gray-light: #94a3b8;
--light: #f1f5f9;
--white: #ffffff;
--border: #e2e8f0;
}
html, body { height: 100%; }
body {
font-family: 'Heebo', sans-serif;
background: var(--light);
color: var(--dark);
display: flex;
flex-direction: column;
}
/* Header */
.header {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: white;
padding: 12px 20px;
position: sticky;
top: 0;
z-index: 100;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.header-title {
display: flex;
align-items: center;
gap: 10px;
}
.header-title img {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid white;
}
.header-title h1 { font-size: 20px; font-weight: 700; }
.header-stats {
display: flex;
gap: 20px;
}
.stat-item { text-align: center; }
.stat-value { font-size: 22px; font-weight: 800; }
.stat-label { font-size: 11px; opacity: 0.9; }
.stat-item.warning .stat-value { color: #fef08a; }
.refresh-btn {
padding: 10px 16px;
border-radius: 10px;
border: 2px solid rgba(255,255,255,0.3);
background: rgba(255,255,255,0.1);
color: white;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.2s;
}
.refresh-btn:hover { background: rgba(255,255,255,0.2); }
.refresh-btn.loading svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Main Layout */
.main-content {
flex: 1;
padding: 15px 20px;
display: flex;
flex-direction: column;
gap: 15px;
}
/* Tabs */
.tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.tab {
padding: 10px 16px;
border-radius: 10px;
border: none;
background: white;
color: var(--gray);
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
font-family: inherit;
font-size: 13px;
transition: all 0.2s;
}
.tab:hover { background: var(--primary-light); }
.tab.active {
background: var(--primary);
color: white;
}
.tab .count {
background: rgba(0,0,0,0.1);
padding: 2px 8px;
border-radius: 10px;
font-size: 12px;
}
.tab.active .count { background: rgba(255,255,255,0.2); }
/* Filters */
.filters-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
.search-box {
flex: 1;
min-width: 200px;
position: relative;
}
.search-box input {
width: 100%;
padding: 12px 16px 12px 44px;
border: 2px solid var(--border);
border-radius: 12px;
font-size: 14px;
font-family: inherit;
}
.search-box input:focus {
outline: none;
border-color: var(--primary);
}
.search-box svg {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
fill: var(--gray);
}
[dir="ltr"] .search-box svg { right: auto; left: 14px; }
.filter-select {
padding: 12px 16px;
border: 2px solid var(--border);
border-radius: 12px;
font-size: 14px;
font-family: inherit;
background: white;
min-width: 140px;
}
.filter-select:focus {
outline: none;
border-color: var(--primary);
}
.sort-btn {
padding: 12px 16px;
border: 2px solid var(--border);
border-radius: 12px;
background: white;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
font-family: inherit;
font-size: 13px;
color: var(--dark);
}
.sort-btn:hover { border-color: var(--primary); }
.sort-btn.active { background: var(--primary-light); border-color: var(--primary); }
/* Content Grid */
.content-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 15px;
flex: 1;
min-height: 0;
}
/* Orders List */
.orders-panel {
background: white;
border-radius: 16px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.panel-header {
padding: 15px 20px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.panel-title {
font-size: 16px;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
.orders-list {
flex: 1;
overflow-y: auto;
padding: 10px;
}
/* Order Card */
.order-card {
background: var(--light);
border-radius: 14px;
padding: 15px;
margin-bottom: 10px;
cursor: pointer;
transition: all 0.2s;
border: 2px solid transparent;
}
.order-card:hover { border-color: var(--primary); }
.order-card.selected { border-color: var(--primary); background: var(--primary-light); }
.order-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
}
.order-id {
font-size: 12px;
color: var(--gray);
font-weight: 600;
}
.order-status {
padding: 4px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
}
.status-new { background: var(--warning-light); color: #b45309; }
.status-assigned { background: var(--primary-light); color: var(--primary-dark); }
.status-completed { background: var(--blue-light); color: var(--blue); }
.status-cancelled { background: var(--danger-light); color: var(--danger); }
.order-client {
font-size: 16px;
font-weight: 700;
margin-bottom: 8px;
}
.order-info {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 13px;
color: var(--gray);
}
.order-info-item {
display: flex;
align-items: center;
gap: 5px;
}
.order-info-item svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.order-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed var(--border);
}
.order-price {
font-size: 18px;
font-weight: 800;
color: var(--primary);
}
.order-actions {
display: flex;
gap: 8px;
}
.action-btn {
width: 36px;
height: 36px;
border-radius: 10px;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.action-btn svg { width: 18px; height: 18px; }
.action-btn-whatsapp { background: #25D366; }
.action-btn-whatsapp svg { fill: white; }
.action-btn-map { background: var(--blue-light); }
.action-btn-map svg { fill: var(--blue); }
.action-btn:hover { transform: scale(1.1); }
.order-worker-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--accent-light);
color: var(--accent);
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
/* Sidebar */
.sidebar {
display: flex;
flex-direction: column;
gap: 15px;
}
/* Calendar Card */
.calendar-card {
background: white;
border-radius: 16px;
padding: 15px;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.calendar-title {
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
.calendar-nav {
display: flex;
gap: 5px;
}
.calendar-nav button {
width: 30px;
height: 30px;
border-radius: 8px;
border: 1px solid var(--border);
background: white;
cursor: pointer;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
text-align: center;
}
.calendar-day-name {
font-size: 11px;
color: var(--gray);
font-weight: 600;
padding: 5px;
}
.calendar-day {
padding: 8px 4px;
border-radius: 8px;
font-size: 13px;
cursor: pointer;
position: relative;
}
.calendar-day:hover { background: var(--light); }
.calendar-day.today { background: var(--primary); color: white; font-weight: 700; }
.calendar-day.other-month { color: var(--gray-light); }
.calendar-day.has-orders::after {
content: '';
position: absolute;
bottom: 3px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--primary);
}
.calendar-day.today.has-orders::after { background: white; }
/* Workers Card */
.workers-card {
background: white;
border-radius: 16px;
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.workers-header {
padding: 15px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.workers-search {
padding: 10px 15px;
border-bottom: 1px solid var(--border);
}
.workers-search input {
width: 100%;
padding: 10px 12px;
border: 2px solid var(--border);
border-radius: 10px;
font-size: 13px;
font-family: inherit;
}
.workers-list {
flex: 1;
overflow-y: auto;
padding: 10px;
}
.worker-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s;
margin-bottom: 8px;
}
.worker-item:hover { background: var(--light); }
.worker-item.selected { background: var(--accent-light); }
.worker-item.unavailable { opacity: 0.5; }
.worker-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--accent);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
}
.worker-info { flex: 1; }
.worker-name { font-weight: 600; font-size: 14px; }
.worker-meta { font-size: 12px; color: var(--gray); }
.worker-schedule-badge {
padding: 4px 8px;
border-radius: 6px;
font-size: 10px;
font-weight: 600;
}
.badge-available { background: var(--primary-light); color: var(--primary-dark); }
.badge-busy { background: var(--warning-light); color: #b45309; }
.badge-off { background: var(--light); color: var(--gray); }
/* Order Detail Modal */
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 1000;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
background: white;
border-radius: 20px;
max-width: 600px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
}
.modal-header {
padding: 20px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-title { font-size: 18px; font-weight: 700; }
.modal-close {
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: var(--light);
cursor: pointer;
font-size: 20px;
}
.modal-body { padding: 20px; }
.detail-section {
margin-bottom: 20px;
}
.detail-section-title {
font-size: 14px;
font-weight: 700;
color: var(--gray);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.detail-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.detail-item {
background: var(--light);
padding: 12px;
border-radius: 10px;
}
.detail-label {
font-size: 11px;
color: var(--gray);
margin-bottom: 4px;
}
.detail-value {
font-size: 14px;
font-weight: 600;
}
.map-preview {
width: 100%;
height: 150px;
border-radius: 12px;
overflow: hidden;
margin-bottom: 10px;
background: var(--light);
}
.map-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.map-actions {
display: flex;
gap: 10px;
}
.map-btn {
flex: 1;
padding: 12px;
border-radius: 10px;
border: none;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: inherit;
text-decoration: none;
}
.map-btn-waze { background: #33ccff; color: white; }
.map-btn-google { background: #4285f4; color: white; }
.map-btn svg { width: 18px; height: 18px; fill: white; }
/* Assign Worker Section */
.assign-section {
background: var(--accent-light);
border-radius: 12px;
padding: 15px;
}
.assign-title {
font-weight: 700;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.assign-search {
margin-bottom: 12px;
}
.assign-search input {
width: 100%;
padding: 10px 12px;
border: 2px solid var(--border);
border-radius: 10px;
font-size: 13px;
font-family: inherit;
background: white;
}
.assign-workers-grid {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 250px;
overflow-y: auto;
}
.assign-worker-btn {
padding: 12px;
border-radius: 12px;
border: 2px solid var(--border);
background: white;
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
transition: all 0.2s;
}
.assign-worker-btn:hover { border-color: var(--accent); background: white; }
.assign-worker-btn.selected { border-color: var(--accent); background: var(--accent); }
.assign-worker-btn.selected * { color: white !important; }
.assign-worker-btn.unavailable { opacity: 0.4; cursor: not-allowed; }
.assign-worker-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--accent);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
flex-shrink: 0;
}
.assign-worker-btn.selected .assign-worker-avatar { background: white; color: var(--accent); }
.assign-worker-info { flex: 1; text-align: right; }
.assign-worker-name { font-weight: 600; font-size: 14px; }
.assign-worker-meta { font-size: 12px; color: var(--gray); }
.assign-worker-check {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--primary);
color: white;
display: none;
align-items: center;
justify-content: center;
font-size: 14px;
}
.assign-worker-btn.selected .assign-worker-check { display: flex; background: white; color: var(--accent); }
/* Client Header */
.client-header {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background: var(--light);
border-radius: 12px;
margin-bottom: 15px;
}
.client-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 700;
flex-shrink: 0;
}
.client-info { flex: 1; }
.client-name { font-size: 18px; font-weight: 700; }
.client-phone { font-size: 14px; color: var(--gray); }
.client-stats {
display: flex;
gap: 15px;
}
.client-stat {
text-align: center;
padding: 8px 12px;
background: white;
border-radius: 10px;
}
.client-stat-value { font-size: 18px; font-weight: 800; color: var(--primary); }
.client-stat-label { font-size: 10px; color: var(--gray); }
.client-actions {
display: flex;
gap: 10px;
margin-bottom: 15px;
}
.client-action-btn {
flex: 1;
padding: 10px 15px;
border-radius: 10px;
text-decoration: none !important;
font-weight: 600 !important;
font-size: 13px !important;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.2s;
border: none;
cursor: pointer;
font-family: inherit;
}
.client-action-btn.whatsapp {
background: #25D366 !important;
color: white !important;
}
.client-action-btn.whatsapp svg { fill: white !important; }
.client-action-btn.call {
background: var(--blue) !important;
color: white !important;
}
.client-action-btn.call svg { fill: white !important; }
.client-action-btn:hover { transform: translateY(-2px); }
/* Order History */
.history-list {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 200px;
overflow-y: auto;
}
.history-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
background: var(--light);
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
}
.history-item:hover { background: var(--primary-light); }
.history-item-main {
display: flex;
align-items: center;
gap: 12px;
}
.history-item-id {
font-weight: 700;
font-size: 13px;
color: var(--gray);
}
.history-item-date {
font-size: 13px;
font-weight: 600;
}
.history-item-city {
font-size: 12px;
color: var(--gray);
}
.history-item-end {
display: flex;
align-items: center;
gap: 10px;
}
.history-item-price {
font-weight: 700;
color: var(--primary);
}
.history-more {
text-align: center;
padding: 10px;
color: var(--gray);
font-size: 12px;
}
/* Gamification Styles */
.profile-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20px;
padding: 25px;
color: white;
text-align: center;
margin-bottom: 20px;
}
.profile-card.worker { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.profile-card.client { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.profile-card.top-worker { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.profile-avatar-large {
width: 90px;
height: 90px;
border-radius: 50%;
background: rgba(255,255,255,0.2);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
font-weight: 800;
margin: 0 auto 15px;
border: 4px solid rgba(255,255,255,0.3);
}
.profile-name-large {
font-size: 24px;
font-weight: 800;
margin-bottom: 5px;
}
.profile-title {
font-size: 14px;
opacity: 0.9;
margin-bottom: 15px;
}
.profile-badge-main {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,0.2);
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
}
/* Stats Grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 20px 0;
}
.stat-card {
background: white;
border-radius: 14px;
padding: 15px 10px;
text-align: center;
}
.stat-card-icon {
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.stat-card-icon svg {
width: 28px;
height: 28px;
}
.stat-card-value {
font-size: 22px;
font-weight: 800;
color: var(--dark);
}
.stat-card-label {
font-size: 11px;
color: var(--gray);
}
/* Badges */
.badges-section {
margin: 20px 0;
}
.badges-title {
font-size: 14px;
font-weight: 700;
color: var(--dark);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.badges-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.badge-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px;
background: var(--light);
border-radius: 12px;
min-width: 80px;
transition: all 0.2s;
}
.badge-item.earned {
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}
.badge-item.locked {
opacity: 0.4;
filter: grayscale(1);
}
.badge-icon {
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.badge-icon svg {
width: 28px;
height: 28px;
}
.badge-name {
font-size: 10px;
font-weight: 600;
color: var(--dark);
text-align: center;
}
.badge-progress {
font-size: 9px;
color: var(--gray);
}
/* Level Progress */
.level-section {
background: white;
border-radius: 14px;
padding: 15px;
margin: 15px 0;
}
.level-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.level-title {
font-weight: 700;
font-size: 14px;
}
.level-badge {
background: var(--warning);
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
}
.level-progress-bar {
height: 10px;
background: var(--light);
border-radius: 5px;
overflow: hidden;
}
.level-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--warning) 0%, #f59e0b 100%);
border-radius: 5px;
transition: width 0.5s ease;
}
.level-info {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--gray);
margin-top: 5px;
}
/* Profile Actions */
.profile-actions {
display: flex;
gap: 10px;
margin-top: 20px;
}
.profile-action-btn {
flex: 1;
padding: 12px;
border-radius: 12px;
border: none;
font-weight: 600 !important;
font-size: 13px !important;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: inherit;
transition: all 0.2s;
text-decoration: none !important;
}
.profile-action-btn svg { width: 18px; height: 18px; }
.profile-action-btn.download {
background: var(--dark) !important;
color: white !important;
}
.profile-action-btn.download svg { fill: white !important; }
.profile-action-btn.whatsapp {
background: #25D366 !important;
color: white !important;
}
.profile-action-btn.whatsapp svg { fill: white !important; }
.profile-action-btn:hover { transform: translateY(-2px); }
/* Month Summary */
.month-summary {
background: white;
border-radius: 14px;
padding: 15px;
margin: 15px 0;
}
.month-summary-title {
font-weight: 700;
font-size: 14px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.month-summary-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.month-summary-item {
background: var(--light);
padding: 12px;
border-radius: 10px;
text-align: center;
}
.month-summary-value {
font-size: 20px;
font-weight: 800;
color: var(--primary);
}
.month-summary-label {
font-size: 11px;
color: var(--gray);
}
/* Worker of Month Banner */
.wotm-banner {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
border-radius: 14px;
padding: 15px;
color: white;
text-align: center;
margin-bottom: 15px;
}
.wotm-crown {
margin-bottom: 5px;
display: flex;
justify-content: center;
}
.wotm-crown svg {
width: 40px;
height: 40px;
}
.wotm-title {
font-size: 16px;
font-weight: 800;
}
.wotm-subtitle {
font-size: 12px;
opacity: 0.9;
}
.modal-footer {
padding: 20px;
border-top: 1px solid var(--border);
display: flex;
gap: 10px;
}
.modal-btn {
flex: 1;
padding: 14px;
border-radius: 12px;
border: none;
font-weight: 700;
cursor: pointer;
font-family: inherit;
font-size: 14px;
transition: all 0.2s;
}
.modal-btn-primary {
background: var(--primary) !important;
color: white !important;
}
.modal-btn-primary svg { fill: white !important; }
.modal-btn-danger {
background: var(--danger) !important;
color: white !important;
}
.modal-btn-secondary {
background: var(--light) !important;
color: var(--dark) !important;
}
/* Worker Detail Modal */
.worker-detail-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--accent);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
font-weight: 700;
margin: 0 auto 15px;
}
.worker-detail-name {
text-align: center;
font-size: 22px;
font-weight: 700;
margin-bottom: 5px;
}
.worker-detail-phone {
text-align: center;
color: var(--gray);
margin-bottom: 20px;
}
.worker-schedule-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.schedule-day-item {
background: var(--light);
padding: 10px;
border-radius: 10px;
text-align: center;
}
.schedule-day-name { font-size: 12px; color: var(--gray); }
.schedule-day-status { font-size: 11px; font-weight: 600; margin-top: 4px; }
.schedule-day-status.available { color: var(--primary); }
.schedule-day-status.busy { color: var(--warning); }
.schedule-day-status.off { color: var(--gray); }
/* Empty State */
.empty-state {
text-align: center;
padding: 40px 20px;
color: var(--gray);
}
.empty-state svg {
width: 60px;
height: 60px;
fill: var(--gray-light);
margin-bottom: 15px;
}
/* Loading */
.loading {
text-align: center;
padding: 40px;
color: var(--gray);
}
.spinner {
width: 40px;
height: 40px;
border: 3px solid var(--border);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 15px;
}
/* Toast */
.toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: var(--dark);
color: white;
padding: 14px 24px;
border-radius: 12px;
font-weight: 600;
opacity: 0;
transition: all 0.3s;
z-index: 2000;
}
.toast.show {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.toast.success { background: var(--primary); }
.toast.error { background: var(--danger); }
/* Map Section */
.map-section {
background: white;
border-radius: 16px;
overflow: hidden;
margin-bottom: 15px;
}
.map-header {
padding: 12px 20px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.map-title {
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
.map-toggle-btn {
padding: 6px 12px;
border-radius: 8px;
border: 1px solid var(--border);
background: white;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
}
.map-toggle-btn:hover { background: var(--light); }
.map-container {
height: 300px;
width: 100%;
display: none;
}
.map-container.visible { display: block; }
.map-legend {
padding: 10px 15px;
display: flex;
gap: 15px;
flex-wrap: wrap;
font-size: 12px;
border-top: 1px solid var(--border);
display: none;
}
.map-legend.visible { display: flex; }
.legend-item {
display: flex;
align-items: center;
gap: 5px;
}
.legend-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.legend-dot.new { background: #f59e0b; }
.legend-dot.assigned { background: #10b981; }
.legend-dot.completed { background: #3b82f6; }
/* Map Info Window */
.map-info-window {
padding: 5px;
max-width: 200px;
}
.map-info-title {
font-weight: 700;
font-size: 14px;
margin-bottom: 5px;
}
.map-info-detail {
font-size: 12px;
color: #666;
margin-bottom: 3px;
}
.map-info-btn {
display: inline-block;
margin-top: 8px;
padding: 6px 12px;
background: #10b981;
color: white;
border-radius: 6px;
text-decoration: none;
font-size: 11px;
font-weight: 600;
}
/* Responsive */
@media (max-width: 900px) {
.content-grid {
grid-template-columns: 1fr;
}
.sidebar { display: none; }
.header-stats { display: none; }
}
Cleaner4You CRM
0
הזמנות
0
ללא עובד
0
משובצים
0
היום
// ============================================
// CONFIGURATION
// ============================================
const WEBHOOK_URL = 'https://n8n.srv1129246.hstgr.cloud/webhook/cleaner-crm';
const GOOGLE_MAPS_API_KEY = 'AIzaSyDMjVgA7IyJjtC6cxEOn9b_05KKePA-k0s';
// ============================================
// STATE
// ============================================
let orders = [];
let workers = [];
let schedules = [];
let filteredOrders = [];
let filteredWorkers = [];
let currentTab = 'all';
let currentMonth = new Date();
let sortOrder = 'desc';
let selectedOrder = null;
let selectedWorkerForAssign = null;
// Map state
let map = null;
let markers = [];
let infoWindow = null;
let mapVisible = false;
let geocoder = null;
const statusMap = {
'NEW ORDER': { label: 'חדש', class: 'status-new' },
'Worker Assigend': { label: 'משובץ', class: 'status-assigned' },
'Order Completed': { label: 'הושלם', class: 'status-completed' },
'Order Cancelled': { label: 'בוטל', class: 'status-cancelled' }
};
const hebrewMonths = ['ינואר','פברואר','מרץ','אפריל','מאי','יוני','יולי','אוגוסט','ספטמבר','אוקטובר','נובמבר','דצמבר'];
const hebrewDays = ['א׳','ב׳','ג׳','ד׳','ה׳','ו׳','ש׳'];
// ============================================
// INIT
// ============================================
document.addEventListener('DOMContentLoaded', () => {
loadAllData();
renderCalendar();
});
// Initialize Google Map (called by API callback)
function initMap() {
// Default center: Israel
const israelCenter = { lat: 32.0853, lng: 34.7818 };
map = new google.maps.Map(document.getElementById('mapContainer'), {
zoom: 8,
center: israelCenter,
mapTypeControl: false,
streetViewControl: false,
fullscreenControl: true,
styles: [
{ featureType: "poi", stylers: [{ visibility: "off" }] }
]
});
infoWindow = new google.maps.InfoWindow();
geocoder = new google.maps.Geocoder();
console.log('Google Maps initialized');
}
function toggleMap() {
mapVisible = !mapVisible;
const container = document.getElementById('mapContainer');
const legend = document.getElementById('mapLegend');
const toggleText = document.getElementById('mapToggleText');
container.classList.toggle('visible', mapVisible);
legend.classList.toggle('visible', mapVisible);
toggleText.textContent = mapVisible ? 'הסתר מפה' : 'הצג מפה';
if (mapVisible && map) {
// Trigger resize and update markers
google.maps.event.trigger(map, 'resize');
updateMapMarkers();
}
}
function updateMapMarkers() {
if (!map) return;
// Clear existing markers
markers.forEach(m => m.setMap(null));
markers = [];
// Get orders with coordinates from Airtable
const ordersWithLocation = filteredOrders.filter(o => {
const lat = o.latitude || o.Latitude || o.lat;
const lng = o.longitude || o.Longitude || o.lng;
return lat && lng && !isNaN(parseFloat(lat)) && !isNaN(parseFloat(lng));
});
document.getElementById('mapOrdersCount').textContent = `(${ordersWithLocation.length}/${filteredOrders.length})`;
if (ordersWithLocation.length === 0) {
console.log('No orders with coordinates, trying geocoding...');
geocodeOrdersAndAddMarkers();
return;
}
const bounds = new google.maps.LatLngBounds();
ordersWithLocation.forEach(order => {
const lat = parseFloat(order.latitude || order.Latitude || order.lat);
const lng = parseFloat(order.longitude || order.Longitude || order.lng);
const position = { lat, lng };
const marker = createOrderMarker(order, position);
markers.push(marker);
bounds.extend(position);
});
if (markers.length > 0) {
map.fitBounds(bounds);
// Don't zoom too much for single marker
if (markers.length === 1) {
map.setZoom(14);
}
}
console.log(`Map: ${markers.length} markers added`);
}
function geocodeOrdersAndAddMarkers() {
if (!geocoder) return;
const bounds = new google.maps.LatLngBounds();
let geocodedCount = 0;
// Take first 10 orders without coords to avoid API limits
const ordersToGeocode = filteredOrders.slice(0, 10).filter(o => {
const city = o.city || o['עיר'] || '';
const address = o.address || o['כתובת - שם רחוב ומספר בית'] || '';
return (city || address) && !(o.latitude || o.lat);
});
if (ordersToGeocode.length === 0) return;
document.getElementById('mapOrdersCount').textContent = `(טוען...)`;
ordersToGeocode.forEach((order, index) => {
const city = order.city || order['עיר'] || '';
const address = order.address || order['כתובת - שם רחוב ומספר בית'] || '';
const fullAddress = `${address}, ${city}, Israel`;
// Delay geocoding to avoid rate limits
setTimeout(() => {
geocoder.geocode({ address: fullAddress }, (results, status) => {
geocodedCount++;
if (status === 'OK' && results[0]) {
const position = results[0].geometry.location;
const marker = createOrderMarker(order, position);
markers.push(marker);
bounds.extend(position);
if (geocodedCount === ordersToGeocode.length) {
document.getElementById('mapOrdersCount').textContent = `(${markers.length})`;
if (markers.length > 0) {
map.fitBounds(bounds);
if (markers.length === 1) map.setZoom(14);
}
}
}
});
}, index * 200); // 200ms delay between requests
});
}
function createOrderMarker(order, position) {
const isAssigned = order.WorkerAssigned || order['Worker Assigned'] || false;
const status = order.OrderStatus || order['Order Status'] || 'NEW ORDER';
// Marker color based on status
let markerColor = '#f59e0b'; // Orange - new
if (isAssigned || status === 'Worker Assigend') {
markerColor = '#10b981'; // Green - assigned
} else if (status === 'Order Completed') {
markerColor = '#3b82f6'; // Blue - completed
} else if (status === 'Order Cancelled') {
markerColor = '#ef4444'; // Red - cancelled
}
const marker = new google.maps.Marker({
position: position,
map: map,
title: order.Name || 'הזמנה',
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10,
fillColor: markerColor,
fillOpacity: 1,
strokeColor: '#ffffff',
strokeWeight: 2
}
});
// Info window content
const date = order.date || order['בחרו תאריך לביצוע הניקיון'] || '';
const time = order.time || order['בחרו שעה לניקיון'] || '';
const city = order.city || order['עיר'] || '';
const address = order.address || order['כתובת - שם רחוב ומספר בית'] || '';
const price = order.price || order['total-price'] || 0;
const orderId = order.order_id || order.id?.slice(-6) || '';
const workerNames = getWorkerNames(order.Workers || []);
const infoContent = `
`;
marker.addListener('click', () => {
infoWindow.setContent(infoContent);
infoWindow.open(map, marker);
});
return marker;
}
// ============================================
// DATA LOADING - SINGLE REQUEST
// ============================================
async function loadAllData() {
const btn = document.getElementById('refreshBtn');
btn.classList.add('loading');
document.getElementById('ordersList').innerHTML = '
`;
document.getElementById('ordersCount').textContent = '0 תוצאות';
return;
}
document.getElementById('ordersCount').textContent = `${filteredOrders.length} תוצאות`;
container.innerHTML = filteredOrders.map(order => {
const status = statusMap[order.OrderStatus || order['Order Status']] || statusMap['NEW ORDER'];
const isAssigned = order.WorkerAssigned || order['Worker Assigned'] || false;
const workerNames = getWorkerNames(order.Workers || []);
const phone = order.phone || '';
const date = order.date || order['בחרו תאריך לביצוע הניקיון'] || '';
const time = order.time || order['בחרו שעה לניקיון'] || '';
const city = order.city || order['עיר'] || '';
const price = order.price || order['total-price'] || 0;
const orderId = order.order_id || order.id?.slice(-6) || '';
return `
${isAssigned && workerNames ? `
`;
}).join('');
}
function renderWorkers() {
const container = document.getElementById('workersList');
document.getElementById('workersCount').textContent = workers.length;
if (filteredWorkers.length === 0) {
container.innerHTML = '
`;
}).join('');
}
function renderCalendar() {
const grid = document.getElementById('calendarGrid');
const year = currentMonth.getFullYear();
const month = currentMonth.getMonth();
document.getElementById('calendarMonth').textContent = `${hebrewMonths[month]} ${year}`;
// Day names
let html = hebrewDays.map(d => `
${mapLink ? `
` : ''}
${otherOrders.length > 0 ? `
` : ''}
`;
modal.classList.add('open');
}
function renderAssignWorkers(availableWorkers, searchTerm = '') {
let filteredList = workers;
if (searchTerm) {
filteredList = workers.filter(w =>
(w.Name || '').toLowerCase().includes(searchTerm.toLowerCase())
);
}
return filteredList.map(w => {
const isAvailable = availableWorkers.includes(w.id);
const ordersCount = (w.Orders || []).length;
return `
${isAvailable ? '
`;
}).join('');
}
function filterAssignWorkers(searchTerm) {
const date = selectedOrder?.date || selectedOrder?.['בחרו תאריך לביצוע הניקיון'] || '';
const availableWorkers = getAvailableWorkersForDate(date);
document.getElementById('assignWorkersGrid').innerHTML = renderAssignWorkers(availableWorkers, searchTerm);
}
function getClientOrderHistory(phone, name) {
if (!phone && !name) return [];
return orders.filter(order => {
const orderPhone = order.phone || '';
const orderName = order.Name || '';
// Match by phone (primary) or by exact name match
if (phone && orderPhone) {
const cleanPhone1 = phone.replace(/[^0-9]/g, '');
const cleanPhone2 = orderPhone.replace(/[^0-9]/g, '');
if (cleanPhone1 === cleanPhone2) return true;
}
if (name && orderName && name.toLowerCase() === orderName.toLowerCase()) {
return true;
}
return false;
}).sort((a, b) => {
const dateA = a.date || a['בחרו תאריך לביצוע הניקיון'] || '';
const dateB = b.date || b['בחרו תאריך לביצוע הניקיון'] || '';
return dateB.localeCompare(dateA); // Newest first
});
}
function getClientBadges(totalOrders, totalSpent) {
return [
{
svg: '',
name: 'לקוח חדש',
earned: totalOrders >= 1,
progress: ''
},
{
svg: '',
name: 'לקוח חוזר',
earned: totalOrders >= 3,
progress: totalOrders >= 3 ? '' : `${totalOrders}/3`
},
{
svg: '',
name: 'לקוח VIP',
earned: totalOrders >= 10,
progress: totalOrders >= 10 ? '' : `${totalOrders}/10`
},
{
svg: '',
name: 'לקוח פלטינום',
earned: totalOrders >= 20,
progress: totalOrders >= 20 ? '' : `${totalOrders}/20`
},
{
svg: '',
name: '1000₪',
earned: totalSpent >= 1000,
progress: totalSpent >= 1000 ? '' : `${totalSpent}/1000`
},
{
svg: '',
name: '5000₪',
earned: totalSpent >= 5000,
progress: totalSpent >= 5000 ? '' : `${totalSpent}/5000`
}
];
}
function getClientLevel(totalOrders) {
if (totalOrders >= 20) return { level: 4, title: 'פלטינום', color: '#9333ea' };
if (totalOrders >= 10) return { level: 3, title: 'VIP', color: '#f59e0b' };
if (totalOrders >= 3) return { level: 2, title: 'חוזר', color: '#10b981' };
return { level: 1, title: 'חדש', color: '#6b7280' };
}
function closeOrderModal() {
document.getElementById('orderModal').classList.remove('open');
selectedOrder = null;
selectedWorkerForAssign = null;
}
function selectWorkerForAssign(workerId, element) {
selectedWorkerForAssign = workerId;
document.querySelectorAll('.assign-worker-btn').forEach(btn => btn.classList.remove('selected'));
element.classList.add('selected');
}
async function assignSelectedWorker() {
if (!selectedOrder || !selectedWorkerForAssign) {
showToast('בחר עובד לשיבוץ', 'error');
return;
}
const btn = document.getElementById('modalAssignBtn');
btn.disabled = true;
btn.textContent = 'משבץ...';
try {
await fetch(WEBHOOK_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
action: 'assignWorker',
orderId: selectedOrder.id,
workerId: selectedWorkerForAssign
})
});
showToast('העובד שובץ בהצלחה', 'success');
closeOrderModal();
loadAllData();
} catch (error) {
console.error('Error assigning worker:', error);
showToast('שגיאה בשיבוץ', 'error');
}
btn.disabled = false;
btn.textContent = 'שבץ עובד';
}
function openWorkerModal(workerId) {
const worker = workers.find(w => w.id === workerId);
if (!worker) return;
const modal = document.getElementById('workerModal');
const body = document.getElementById('workerModalBody');
const whatsappBtn = document.getElementById('workerWhatsappBtn');
const initial = (worker.Name || '?')[0].toUpperCase();
const phone = worker.phone || '';
const workerOrders = orders.filter(o => (o.Workers || []).includes(workerId));
const completedOrders = workerOrders.filter(o =>
(o.OrderStatus || o['Order Status']) === 'Order Completed'
);
// Calculate stats (will come from Airtable later)
const totalOrders = workerOrders.length;
const totalCompleted = completedOrders.length;
const totalHours = completedOrders.reduce((sum, o) => sum + (parseFloat(o.hours) || 4), 0);
const totalEarnings = totalHours * 65; // 65₪ per hour
const avgRating = 4.8; // Will come from Airtable
const thisMonthOrders = completedOrders.filter(o => {
const d = o.date || o['בחרו תאריך לביצוע הניקיון'] || '';
const orderDate = parseDateString(d);
const now = new Date();
return orderDate.getMonth() === now.getMonth() && orderDate.getFullYear() === now.getFullYear();
}).length;
const thisMonthHours = thisMonthOrders * 4;
const thisMonthEarnings = thisMonthHours * 65;
// Calculate level
const level = Math.floor(totalCompleted / 10) + 1;
const levelProgress = (totalCompleted % 10) * 10;
const nextLevelOrders = 10 - (totalCompleted % 10);
// Check badges
const badges = getWorkerBadges(totalCompleted, totalHours, totalEarnings, avgRating);
// Check if worker of the month (most orders this month)
const isWorkerOfMonth = checkWorkerOfMonth(workerId);
whatsappBtn.href = `https://wa.me/${phone.replace(/[^0-9]/g, '')}`;
body.innerHTML = `
`;
modal.classList.add('open');
}
function getWorkerBadges(orders, hours, earnings, rating) {
return [
{
svg: '',
name: 'מתחילה',
earned: orders >= 1,
progress: orders >= 1 ? '' : '0/1'
},
{
svg: '',
name: '10 הזמנות',
earned: orders >= 10,
progress: orders >= 10 ? '' : `${orders}/10`
},
{
svg: '',
name: '50 הזמנות',
earned: orders >= 50,
progress: orders >= 50 ? '' : `${orders}/50`
},
{
svg: '',
name: '100 הזמנות',
earned: orders >= 100,
progress: orders >= 100 ? '' : `${orders}/100`
},
{
svg: '',
name: '100 שעות',
earned: hours >= 100,
progress: hours >= 100 ? '' : `${hours}/100`
},
{
svg: '',
name: '5000₪',
earned: earnings >= 5000,
progress: earnings >= 5000 ? '' : `${earnings}/5000`
},
{
svg: '',
name: 'דירוג 5',
earned: rating >= 4.9,
progress: rating >= 4.9 ? '' : `${rating}/5`
},
{
svg: '',
name: 'עובדת החודש',
earned: checkWorkerOfMonth(null),
progress: ''
}
];
}
function getLevelTitle(level) {
const titles = {
1: 'מתחילה',
2: 'מתקדמת',
3: 'מקצועית',
4: 'מומחית',
5: 'אלופה',
6: 'מאסטר',
7: 'אגדה',
8: 'סופר סטאר',
9: 'אייקון',
10: 'מלכה'
};
return titles[Math.min(level, 10)] || 'מלכה';
}
function checkWorkerOfMonth(workerId) {
// Calculate who has most hours this month
const thisMonth = new Date().toISOString().slice(0, 7);
const monthlyStats = {};
orders.forEach(order => {
const date = order.date || order['בחרו תאריך לביצוע הניקיון'] || '';
if (!date.startsWith(thisMonth)) return;
if ((order.OrderStatus || order['Order Status']) !== 'Order Completed') return;
const workerIds = order.Workers || [];
workerIds.forEach(wId => {
if (!monthlyStats[wId]) monthlyStats[wId] = 0;
monthlyStats[wId] += parseFloat(order.hours) || 4;
});
});
const topWorker = Object.entries(monthlyStats).sort((a, b) => b[1] - a[1])[0];
if (workerId) {
return topWorker && topWorker[0] === workerId;
}
return topWorker ? topWorker[0] : null;
}
// Download profile as image
async function downloadProfileImage(elementId, name) {
try {
showToast('מכין תמונה...', '');
// Use html2canvas library
if (typeof html2canvas === 'undefined') {
// Load library dynamically
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js';
script.onload = () => captureAndDownload(elementId, name);
document.head.appendChild(script);
} else {
captureAndDownload(elementId, name);
}
} catch (error) {
console.error('Error downloading image:', error);
showToast('שגיאה בשמירת תמונה', 'error');
}
}
function captureAndDownload(elementId, name) {
const element = document.getElementById(elementId);
html2canvas(element, {
backgroundColor: '#f1f5f9',
scale: 2
}).then(canvas => {
const link = document.createElement('a');
link.download = `${name || 'profile'}-cleaner4you.png`;
link.href = canvas.toDataURL('image/png');
link.click();
showToast('התמונה נשמרה!', 'success');
});
}
// Share profile via WhatsApp
function shareProfileWhatsApp(phone, name, type) {
const message = type === 'worker'
? `היי ${name}! ????\nצפי בהישגים שלך ב-Cleaner4You!\nאת עושה עבודה מדהימה! ????`
: `היי ${name}! ????\nתודה שאתה לקוח של Cleaner4You!\nאנחנו מעריכים אותך! ❤️`;
const url = `https://wa.me/${phone.replace(/[^0-9]/g, '')}?text=${encodeURIComponent(message)}`;
window.open(url, '_blank');
}
function closeWorkerModal() {
document.getElementById('workerModal').classList.remove('open');
}
function openClientProfileModal(phone, name) {
const modal = document.getElementById('clientModal');
const body = document.getElementById('clientModalBody');
const clientHistory = getClientOrderHistory(phone, name);
const totalOrders = clientHistory.length;
const completedOrders = clientHistory.filter(o =>
(o.OrderStatus || o['Order Status']) === 'Order Completed'
).length;
const totalSpent = clientHistory.reduce((sum, o) =>
sum + (parseFloat(o.price || o['total-price']) || 0), 0
);
const totalHours = clientHistory.reduce((sum, o) =>
sum + (parseFloat(o.hours) || 4), 0
);
const clientLevel = getClientLevel(totalOrders);
const clientBadges = getClientBadges(totalOrders, totalSpent);
const initial = (name || '?')[0].toUpperCase();
// Level progress
const levelThresholds = [1, 3, 10, 20];
const currentThreshold = levelThresholds[clientLevel.level - 1] || 1;
const nextThreshold = levelThresholds[clientLevel.level] || 50;
const levelProgress = Math.min(100, ((totalOrders - currentThreshold) / (nextThreshold - currentThreshold)) * 100);
body.innerHTML = `
`;
modal.classList.add('open');
}
function closeClientModal() {
document.getElementById('clientModal').classList.remove('open');
}
// ============================================
// HELPERS
// ============================================
function updateStats() {
const now = new Date();
const todayDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const total = orders.length;
const unassigned = orders.filter(o => !(o.WorkerAssigned || o['Worker Assigned'])).length;
const assigned = orders.filter(o => (o.WorkerAssigned || o['Worker Assigned'])).length;
const todayOrders = orders.filter(o => {
const orderDate = parseDateString(o.date || o['בחרו תאריך לביצוע הניקיון'] || '');
return orderDate.toDateString() === todayDate.toDateString();
}).length;
document.getElementById('statTotal').textContent = total;
document.getElementById('statUnassigned').textContent = unassigned;
document.getElementById('statAssigned').textContent = assigned;
document.getElementById('statToday').textContent = todayOrders;
}
function updateTabCounts() {
const now = new Date();
const todayDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const weekFromNow = new Date(todayDate.getTime() + 7 * 24 * 60 * 60 * 1000);
document.getElementById('tabAll').textContent = orders.length;
document.getElementById('tabUnassigned').textContent = orders.filter(o => !(o.WorkerAssigned || o['Worker Assigned'])).length;
document.getElementById('tabAssigned').textContent = orders.filter(o => (o.WorkerAssigned || o['Worker Assigned'])).length;
document.getElementById('tabToday').textContent = orders.filter(o => {
const orderDate = parseDateString(o.date || o['בחרו תאריך לביצוע הניקיון'] || '');
return orderDate.toDateString() === todayDate.toDateString();
}).length;
document.getElementById('tabWeek').textContent = orders.filter(o => {
const orderDate = parseDateString(o.date || o['בחרו תאריך לביצוע הניקיון'] || '');
return orderDate >= todayDate && orderDate <= weekFromNow;
}).length;
}
function getWorkerNames(workerIds) {
if (!workerIds || workerIds.length === 0) return '';
return workerIds.map(id => {
const w = workers.find(w => w.id === id);
return w ? w.Name : '';
}).filter(Boolean).join(', ');
}
function getAvailableWorkersForDate(dateStr) {
// If no schedules loaded, return all workers as available
if (!schedules || schedules.length === 0) {
console.log('No schedules, returning all workers');
return workers.map(w => w.id);
}
// Parse the order date
const orderDate = new Date(dateStr);
const dayOfWeek = orderDate.getDay(); // 0=Sunday, 1=Monday...
// Find the week string (format: "01-07/01" or similar)
// For now, get current week's schedules
const currentWeekSchedules = schedules; // You can filter by Week field if needed
const availableIds = [];
currentWeekSchedules.forEach(schedule => {
const scheduleOptions = schedule.Schedule || [];
const workerIds = schedule.Workers || [];
// Check if worker has shifts (not just Free Day)
const hasWorkingShifts = scheduleOptions.some(opt =>
opt.includes('Morning') ||
opt.includes('Afternoon') ||
opt.includes('All Day') ||
opt.includes('8:00') ||
opt.includes('14:00')
);
const isFreeDay = scheduleOptions.some(opt =>
opt.toLowerCase().includes('free') ||
opt.includes('חופש') ||
opt.includes('יום חופשי')
);
if (hasWorkingShifts && !isFreeDay) {
// Add all workers from this schedule
workerIds.forEach(wId => {
if (!availableIds.includes(wId)) {
availableIds.push(wId);
}
});
}
});
console.log(`Available workers for ${dateStr}:`, availableIds.length);
// If no available workers found in schedules, return all as fallback
if (availableIds.length === 0) {
return workers.map(w => w.id);
}
return availableIds;
}
function getWorkerSchedule(workerId) {
// Return array of 6 days with availability status
// This is simplified - adjust based on your data structure
return ['available', 'available', 'off', 'available', 'busy', 'off'];
}
function formatDate(dateStr) {
if (!dateStr) return '';
// Already in D/M/YYYY format - just return D/M
if (dateStr.includes('/')) {
const parts = dateStr.split('/');
return `${parts[0]}/${parts[1]}`; // D/M
}
// ISO format YYYY-MM-DD
if (dateStr.includes('-')) {
const [year, month, day] = dateStr.split('-');
return `${parseInt(day)}/${parseInt(month)}`; // D/M
}
return dateStr;
}
function showToast(message, type = '') {
const toast = document.getElementById('toast');
toast.textContent = message;
toast.className = `toast ${type} show`;
setTimeout(() => {
toast.classList.remove('show');
}, 3000);
}
#${orderId} - ${order.Name || 'ללא שם'}
???? ${formatDate(date)} ${time}
???? ${address}, ${city}
???? ${price}₪
${workerNames ? `???? ${workerNames}
` : ''}
פתח הזמנה טוען נתונים...
';
try {
// Single request to get all data
const response = await fetch(WEBHOOK_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action: 'getAllData' })
});
const data = await response.json();
console.log('Response:', data);
// Check response format
if (data && data.orders && Array.isArray(data.orders)) {
// getAllData response: { orders: [], workers: [], schedules: [] }
orders = data.orders;
workers = data.workers || [];
schedules = data.schedules || [];
console.log(`getAllData: ${orders.length} orders, ${workers.length} workers, ${schedules.length} schedules`);
} else if (Array.isArray(data)) {
// Fallback: getOrders response (just array of orders)
orders = data;
workers = [];
schedules = [];
console.log(`getOrders fallback: ${orders.length} orders`);
} else {
throw new Error('Invalid response format');
}
// Render everything
filterOrders();
filteredWorkers = [...workers];
renderWorkers();
updateStats();
renderCalendar();
if (mapVisible && map) {
updateMapMarkers();
}
} catch (error) {
console.error('Error loading data:', error);
showToast('שגיאה בטעינת נתונים', 'error');
document.getElementById('ordersList').innerHTML = 'שגיאה בטעינת נתונים
בדוק את החיבור ל-n8n
';
}
btn.classList.remove('loading');
}
// NO SEPARATE FALLBACK CALLS - only single request above
// Old separate load functions removed - now using getAllData
// ============================================
// FILTERING & SORTING
// ============================================
function filterOrders() {
const search = document.getElementById('searchInput').value.toLowerCase();
const city = document.getElementById('cityFilter').value;
const status = document.getElementById('statusFilter').value;
// Get today and week dates for comparison
const now = new Date();
const todayDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const weekFromNow = new Date(todayDate.getTime() + 7 * 24 * 60 * 60 * 1000);
filteredOrders = orders.filter(order => {
// Search filter
if (search) {
const name = (order.Name || '').toLowerCase();
const phone = (order.phone || '').toLowerCase();
const orderId = (order.order_id || '').toString().toLowerCase();
if (!name.includes(search) && !phone.includes(search) && !orderId.includes(search)) {
return false;
}
}
// City filter
if (city && order.city !== city && order['עיר'] !== city) {
return false;
}
// Status filter
if (status && order.OrderStatus !== status && order['Order Status'] !== status) {
return false;
}
// Tab filter
const orderDateStr = order.date || order['בחרו תאריך לביצוע הניקיון'] || '';
const orderDate = parseDateString(orderDateStr);
const isAssigned = order.WorkerAssigned || order['Worker Assigned'] || false;
switch (currentTab) {
case 'unassigned':
return !isAssigned;
case 'assigned':
return isAssigned;
case 'today':
return orderDate.toDateString() === todayDate.toDateString();
case 'week':
return orderDate >= todayDate && orderDate <= weekFromNow;
default:
return true;
}
});
// Sort - UNASSIGNED FIRST, then by date (newest first)
filteredOrders.sort((a, b) => {
const aAssigned = a.WorkerAssigned || a['Worker Assigned'] || false;
const bAssigned = b.WorkerAssigned || b['Worker Assigned'] || false;
// Unassigned orders always first
if (!aAssigned && bAssigned) return -1;
if (aAssigned && !bAssigned) return 1;
// Then sort by date - parse D/M/YYYY format
const dateA = parseDateString(a.date || a['בחרו תאריך לביצוע הניקיון'] || '');
const dateB = parseDateString(b.date || b['בחרו תאריך לביצוע הניקיון'] || '');
if (sortOrder === 'desc') {
return dateB - dateA; // Newest first
} else {
return dateA - dateB; // Oldest first
}
});
}
// Parse date string in D/M/YYYY or DD/MM/YYYY format
function parseDateString(dateStr) {
if (!dateStr) return new Date(0);
// Try D/M/YYYY or DD/MM/YYYY format (Israeli format)
const parts = dateStr.split('/');
if (parts.length === 3) {
const day = parseInt(parts[0], 10);
const month = parseInt(parts[1], 10) - 1; // JS months are 0-indexed
const year = parseInt(parts[2], 10);
return new Date(year, month, day);
}
// Try ISO format YYYY-MM-DD
if (dateStr.includes('-')) {
return new Date(dateStr);
}
return new Date(dateStr);
}
renderOrders();
updateTabCounts();
// Update map if visible
if (mapVisible && map) {
updateMapMarkers();
}
}
function toggleSort() {
sortOrder = sortOrder === 'desc' ? 'asc' : 'desc';
document.getElementById('sortLabel').textContent = sortOrder === 'desc' ? 'תאריך ↓' : 'תאריך ↑';
document.getElementById('sortBtn').classList.toggle('active', sortOrder === 'asc');
filterOrders();
}
function setTab(tab) {
currentTab = tab;
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
document.querySelector(`.tab[data-tab="${tab}"]`).classList.add('active');
filterOrders();
}
function filterWorkers() {
const search = document.getElementById('workerSearchInput').value.toLowerCase();
filteredWorkers = workers.filter(w => {
const name = (w.Name || '').toLowerCase();
const phone = (w.phone || '').toLowerCase();
return name.includes(search) || phone.includes(search);
});
renderWorkers();
}
// ============================================
// RENDERING
// ============================================
function renderOrders() {
const container = document.getElementById('ordersList');
if (filteredOrders.length === 0) {
container.innerHTML = `
בדוק את החיבור ל-n8n
אין הזמנות להצגה
#${orderId}
${status.label}
${order.Name || 'ללא שם'}
${formatDate(date)} ${time}
${city}
???? ${workerNames}
` : ''}
אין עובדים
';
return;
}
container.innerHTML = filteredWorkers.map(worker => {
const initial = (worker.Name || '?')[0].toUpperCase();
const ordersCount = (worker.Orders || []).length;
return `
${initial}
${worker.Name || 'ללא שם'}
${d}
`).join('');
// First day of month
const firstDay = new Date(year, month, 1).getDay();
const daysInMonth = new Date(year, month + 1, 0).getDate();
const today = new Date().toISOString().split('T')[0];
// Previous month days
const prevMonthDays = new Date(year, month, 0).getDate();
for (let i = firstDay - 1; i >= 0; i--) {
html += `${prevMonthDays - i}
`;
}
// Current month days
for (let day = 1; day <= daysInMonth; day++) {
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
const isToday = dateStr === today;
const hasOrders = orders.some(o => (o.date || o['בחרו תאריך לביצוע הניקיון']) === dateStr);
html += `${day}
`;
}
// Next month days
const totalCells = Math.ceil((firstDay + daysInMonth) / 7) * 7;
for (let i = 1; i <= totalCells - firstDay - daysInMonth; i++) {
html += `${i}
`;
}
grid.innerHTML = html;
}
function changeMonth(delta) {
currentMonth.setMonth(currentMonth.getMonth() + delta);
renderCalendar();
}
function filterByDate(dateStr) {
document.getElementById('searchInput').value = dateStr;
filterOrders();
}
// ============================================
// MODALS
// ============================================
function openOrderModal(orderId) {
selectedOrder = orders.find(o => o.id === orderId);
if (!selectedOrder) return;
selectedWorkerForAssign = null;
const modal = document.getElementById('orderModal');
const body = document.getElementById('modalBody');
const status = statusMap[selectedOrder.OrderStatus || selectedOrder['Order Status']] || statusMap['NEW ORDER'];
const phone = selectedOrder.phone || '';
const date = selectedOrder.date || selectedOrder['בחרו תאריך לביצוע הניקיון'] || '';
const time = selectedOrder.time || selectedOrder['בחרו שעה לניקיון'] || '';
const hours = selectedOrder.hours || selectedOrder['לכמה שעות תרצו להזמין ניקיון?'] || 4;
const city = selectedOrder.city || selectedOrder['עיר'] || '';
const address = selectedOrder.address || selectedOrder['כתובת - שם רחוב ומספר בית'] || '';
const price = selectedOrder.price || selectedOrder['total-price'] || 0;
const mapLink = selectedOrder.mapLink || selectedOrder['Google Map Link'] || '';
const orderId_display = selectedOrder.order_id || selectedOrder.id?.slice(-6) || '';
document.getElementById('modalOrderId').textContent = `הזמנה #${orderId_display}`;
// Get available workers for this date
const availableWorkers = getAvailableWorkersForDate(date);
// Get client order history (by phone or name)
const clientHistory = getClientOrderHistory(phone, selectedOrder.Name);
const otherOrders = clientHistory.filter(o => o.id !== orderId);
// Calculate client stats
const totalOrders = clientHistory.length;
const completedOrders = clientHistory.filter(o =>
(o.OrderStatus || o['Order Status']) === 'Order Completed'
).length;
const totalSpent = clientHistory.reduce((sum, o) =>
sum + (parseFloat(o.price || o['total-price']) || 0), 0
);
// Get client level and badges
const clientLevel = getClientLevel(totalOrders);
const clientBadges = getClientBadges(totalOrders, totalSpent);
const earnedBadges = clientBadges.filter(b => b.earned);
body.innerHTML = `
פרטי לקוח
${clientLevel.title}
${(selectedOrder.Name || '?')[0].toUpperCase()}
${selectedOrder.Name || 'ללא שם'}
${phone}
${earnedBadges.slice(0, 4).map(b => `${b.icon}`).join('')}
${totalOrders}
הזמנות
${completedOrders}
הושלמו
${totalSpent}₪
סה״כ
פרטי הזמנה נוכחית
${status.label}
תאריך
${formatDate(date)} ${time}
שעות
${hours} שעות
עיר
${city}
מחיר
${price}₪
כתובת
${address}
היסטוריית הזמנות (${otherOrders.length})
${otherOrders.slice(0, 5).map(order => {
const oStatus = statusMap[order.OrderStatus || order['Order Status']] || statusMap['NEW ORDER'];
const oDate = order.date || order['בחרו תאריך לביצוע הניקיון'] || '';
const oPrice = order.price || order['total-price'] || 0;
const oCity = order.city || order['עיר'] || '';
const oId = order.order_id || order.id?.slice(-6) || '';
return `
`;
}).join('')}
${otherOrders.length > 5 ? `
#${oId} ${formatDate(oDate)} ${oCity}
${oPrice}₪ ${oStatus.label}
+ עוד ${otherOrders.length - 5} הזמנות
` : ''}
שיבוץ עובד
${availableWorkers.length} זמינים
${renderAssignWorkers(availableWorkers)}
${(w.Name || '?')[0].toUpperCase()}
${w.Name}
✓
' : ''}
${isWorkerOfMonth ? `
` : ''}
${initial}
${worker.Name || 'ללא שם'}
מנקה מקצועית
${avgRating} דירוג
${totalCompleted}
הזמנות הושלמו
${totalHours}
שעות עבודה
${totalEarnings}₪
סה״כ הכנסות
רמה ${level}
${getLevelTitle(level)}
${totalCompleted % 10}/10 הזמנות עוד ${nextLevelOrders} לרמה הבאה
הישגים
${badges.map(b => `
`).join('')}
${b.name}
${!b.earned ? `${b.progress}
` : ''}
סיכום החודש
${thisMonthOrders}
הזמנות
${thisMonthHours}
שעות
${thisMonthEarnings}₪
הכנסות
${avgRating}
דירוג
${initial}
${name || 'לקוח'}
לקוח ${clientLevel.title}
${totalOrders} הזמנות
${totalOrders}
הזמנות
${completedOrders}
הושלמו
${totalSpent}₪
סה״כ
סטטוס: ${clientLevel.title}
רמה ${clientLevel.level}
${totalOrders} הזמנות ${clientLevel.level < 4 ? `עוד ${nextThreshold - totalOrders} לרמה הבאה` : 'רמה מקסימלית!'}
הישגים
${clientBadges.map(b => `
`).join('')}
${b.name}
${!b.earned && b.progress ? `${b.progress}
` : ''}
סיכום
${totalHours}
שעות ניקיון
${Math.round(totalSpent / Math.max(totalOrders, 1))}₪
ממוצע להזמנה
