@agenticmail/enterprise 0.5.88 → 0.5.89

package/dist/dashboard/pages/agent-detail.js

@@ -1,5 +1,6 @@
 import { h, useState, useEffect, useCallback, Fragment, useApp, apiCall, engineCall, formatUptime, buildAgentDataMap, renderAgentBadge, showConfirm, getOrgId } from '../components/utils.js';
 import { I } from '../components/icons.js';
+import { TimezoneSelect } from '../components/timezones.js';
 import { DetailModal } from '../components/modal.js';
 import { CULTURES, LANGUAGES, DEFAULT_TRAITS, computeAge, PersonaForm } from '../components/persona-fields.js';
 import { TagInput } from '../components/tag-input.js';
@@ -2239,6 +2240,22 @@ function WorkforceSection(props) {
   var showAddTask = _showAddTask[0]; var setShowAddTask = _showAddTask[1];
   var _taskForm = useState({ title: '', description: '', priority: 'normal', type: 'general' });
   var taskForm = _taskForm[0]; var setTaskForm = _taskForm[1];
+  var _editing = useState(false);
+  var editing = _editing[0]; var setEditing = _editing[1];
+  var _saving = useState(false);
+  var saving = _saving[0]; var setSaving = _saving[1];
+
+  var dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+  var defaultSchedForm = {
+    agentId: agentId, timezone: 'UTC', scheduleType: 'standard',
+    config: { standardHours: { start: '09:00', end: '17:00', daysOfWeek: [1, 2, 3, 4, 5] } },
+    enforceClockIn: true, enforceClockOut: true, autoWakeEnabled: true,
+    offHoursAction: 'pause', gracePeriodMinutes: 5, enabled: true
+  };
+
+  var _schedForm = useState(defaultSchedForm);
+  var schedForm = _schedForm[0]; var setSchedForm = _schedForm[1];
 
   var loadAll = function() {
     setLoading(true);
@@ -2248,7 +2265,8 @@ function WorkforceSection(props) {
       engineCall('/workforce/tasks/' + agentId).catch(function() { return []; }),
       engineCall('/workforce/clock-records/' + agentId).catch(function() { return []; })
     ]).then(function(results) {
-      setSchedule(results[0]);
+      var sched = results[0]?.schedule || results[0];
+      setSchedule(sched);
       setStatus(results[1]);
       setTasks(results[2]?.tasks || results[2] || []);
       setClockRecords(results[3]?.records || results[3] || []);
@@ -2258,6 +2276,69 @@ function WorkforceSection(props) {
 
   useEffect(function() { loadAll(); }, [agentId]);
 
+  var startEdit = function() {
+    if (schedule) {
+      setSchedForm({
+        agentId: agentId,
+        timezone: schedule.timezone || 'UTC',
+        scheduleType: schedule.scheduleType || 'standard',
+        config: schedule.config || { standardHours: { start: '09:00', end: '17:00', daysOfWeek: [1, 2, 3, 4, 5] } },
+        enforceClockIn: schedule.enforceClockIn ?? true,
+        enforceClockOut: schedule.enforceClockOut ?? true,
+        autoWakeEnabled: schedule.autoWakeEnabled ?? true,
+        offHoursAction: schedule.offHoursAction || 'pause',
+        gracePeriodMinutes: schedule.gracePeriodMinutes ?? 5,
+        enabled: schedule.enabled ?? true
+      });
+    } else {
+      setSchedForm(Object.assign({}, defaultSchedForm, { agentId: agentId }));
+    }
+    setEditing(true);
+  };
+
+  var saveSchedule = function() {
+    setSaving(true);
+    var isUpdate = schedule && schedule.id;
+    var method = isUpdate ? 'PUT' : 'POST';
+    var url = isUpdate ? '/workforce/schedules/' + schedule.id : '/workforce/schedules';
+    engineCall(url, { method: method, body: JSON.stringify(schedForm) })
+      .then(function() { toast('Schedule saved', 'success'); setEditing(false); loadAll(); })
+      .catch(function(err) { toast(err.message, 'error'); })
+      .finally(function() { setSaving(false); });
+  };
+
+  var deleteSchedule = function() {
+    if (!schedule) return;
+    engineCall('/workforce/schedules/' + agentId, { method: 'DELETE' })
+      .then(function() { toast('Schedule removed', 'success'); setEditing(false); loadAll(); })
+      .catch(function(err) { toast(err.message, 'error'); });
+  };
+
+  var toggleDay = function(d) {
+    var days = (schedForm.config?.standardHours?.daysOfWeek || []).slice();
+    var idx = days.indexOf(d);
+    if (idx >= 0) days.splice(idx, 1); else days.push(d);
+    days.sort();
+    setSchedForm(Object.assign({}, schedForm, { config: Object.assign({}, schedForm.config, { standardHours: Object.assign({}, schedForm.config?.standardHours, { daysOfWeek: days }) }) }));
+  };
+
+  var addShift = function() {
+    var shifts = (schedForm.config?.shifts || []).concat([{ name: '', start: '09:00', end: '17:00' }]);
+    setSchedForm(Object.assign({}, schedForm, { config: Object.assign({}, schedForm.config, { shifts: shifts }) }));
+  };
+
+  var updateShift = function(idx, key, val) {
+    var shifts = (schedForm.config?.shifts || []).slice();
+    shifts[idx] = Object.assign({}, shifts[idx], (function() { var o = {}; o[key] = val; return o; })());
+    setSchedForm(Object.assign({}, schedForm, { config: Object.assign({}, schedForm.config, { shifts: shifts }) }));
+  };
+
+  var removeShift = function(idx) {
+    var shifts = (schedForm.config?.shifts || []).slice();
+    shifts.splice(idx, 1);
+    setSchedForm(Object.assign({}, schedForm, { config: Object.assign({}, schedForm.config, { shifts: shifts }) }));
+  };
+
   var clockIn = function() {
     engineCall('/workforce/clock-in/' + agentId, { method: 'POST' })
       .then(function() { toast('Agent clocked in', 'success'); loadAll(); })
@@ -2294,6 +2375,20 @@ function WorkforceSection(props) {
       .catch(function(err) { toast(err.message, 'error'); });
   };
 
+  // Helper: format schedule hours display
+  var formatHours = function(s) {
+    if (!s) return '-';
+    if (s.scheduleType === 'standard' && s.config?.standardHours) {
+      return (s.config.standardHours.start || '09:00') + ' - ' + (s.config.standardHours.end || '17:00');
+    }
+    if (s.scheduleType === 'shift' && s.config?.shifts?.length) {
+      return s.config.shifts.map(function(sh) { return (sh.name ? sh.name + ': ' : '') + sh.start + '-' + sh.end; }).join(', ');
+    }
+    return '-';
+  };
+
+  var formatDays = function(days) { return days?.map(function(d) { return dayNames[d]; }).join(', ') || '-'; };
+
   if (loading) {
     return h('div', { style: { padding: 40, textAlign: 'center', color: 'var(--text-muted)' } }, 'Loading workforce data...');
   }
@@ -2321,32 +2416,151 @@ function WorkforceSection(props) {
 
     // ─── Schedule Card ──────────────────────────────────
     h('div', { className: 'card', style: { marginBottom: 20 } },
-      h('div', { className: 'card-header' }, h('span', null, 'Schedule')),
+      h('div', { className: 'card-header', style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
+        h('span', null, 'Schedule'),
+        !editing && h('button', { className: 'btn btn-ghost btn-sm', onClick: startEdit }, I.edit(), schedule ? ' Edit' : ' Configure')
+      ),
       h('div', { className: 'card-body' },
-        schedule
-          ? h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 } },
-              h('div', null,
-                h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Schedule Type'),
-                h('div', { style: { fontSize: 14, fontWeight: 600 } }, schedule.type || schedule.scheduleType || 'Standard')
+        editing
+          ? h(Fragment, null,
+              // Schedule Type
+              h('div', { className: 'form-group' },
+                h('label', { className: 'form-label' }, 'Schedule Type'),
+                h('div', { style: { display: 'flex', gap: 16 } },
+                  ['standard', 'shift', 'custom'].map(function(t) {
+                    return h('label', { key: t, style: { display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer' } },
+                      h('input', { type: 'radio', name: 'schedTypeDetail', checked: schedForm.scheduleType === t, onChange: function() { setSchedForm(Object.assign({}, schedForm, { scheduleType: t })); } }),
+                      t.charAt(0).toUpperCase() + t.slice(1)
+                    );
+                  })
+                )
               ),
-              h('div', null,
-                h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Hours'),
-                h('div', { style: { fontSize: 14, fontWeight: 600 } }, schedule.hours || schedule.workHours || '-')
+              // Standard fields
+              schedForm.scheduleType === 'standard' && h(Fragment, null,
+                h('div', { style: { display: 'flex', gap: 12 } },
+                  h('div', { className: 'form-group', style: { flex: 1 } },
+                    h('label', { className: 'form-label' }, 'Start Time'),
+                    h('input', { className: 'input', type: 'time', value: schedForm.config?.standardHours?.start || '09:00', onChange: function(e) { setSchedForm(Object.assign({}, schedForm, { config: Object.assign({}, schedForm.config, { standardHours: Object.assign({}, schedForm.config?.standardHours, { start: e.target.value }) }) })); } })
+                  ),
+                  h('div', { className: 'form-group', style: { flex: 1 } },
+                    h('label', { className: 'form-label' }, 'End Time'),
+                    h('input', { className: 'input', type: 'time', value: schedForm.config?.standardHours?.end || '17:00', onChange: function(e) { setSchedForm(Object.assign({}, schedForm, { config: Object.assign({}, schedForm.config, { standardHours: Object.assign({}, schedForm.config?.standardHours, { end: e.target.value }) }) })); } })
+                  )
+                ),
+                h('div', { className: 'form-group' },
+                  h('label', { className: 'form-label' }, 'Days of Week'),
+                  h('div', { style: { display: 'flex', gap: 6, flexWrap: 'wrap' } },
+                    [0, 1, 2, 3, 4, 5, 6].map(function(d) {
+                      return h('button', {
+                        key: d, type: 'button',
+                        className: 'btn btn-sm ' + ((schedForm.config?.standardHours?.daysOfWeek || []).includes(d) ? 'btn-primary' : 'btn-ghost'),
+                        onClick: function() { toggleDay(d); }
+                      }, dayNames[d]);
+                    })
+                  )
+                )
               ),
-              h('div', null,
-                h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Timezone'),
-                h('div', { style: { fontSize: 14, fontWeight: 600 } }, schedule.timezone || 'UTC')
+              // Shift fields
+              schedForm.scheduleType === 'shift' && h(Fragment, null,
+                h('div', { className: 'form-group' },
+                  h('label', { className: 'form-label' }, 'Shifts'),
+                  (schedForm.config?.shifts || []).map(function(sh, idx) {
+                    return h('div', { key: idx, style: { display: 'flex', gap: 8, alignItems: 'center', marginBottom: 8, padding: 8, background: 'var(--bg-tertiary)', borderRadius: 6 } },
+                      h('input', { className: 'input', style: { flex: 1 }, placeholder: 'Shift name', value: sh.name, onChange: function(e) { updateShift(idx, 'name', e.target.value); } }),
+                      h('input', { className: 'input', type: 'time', style: { width: 110 }, value: sh.start, onChange: function(e) { updateShift(idx, 'start', e.target.value); } }),
+                      h('input', { className: 'input', type: 'time', style: { width: 110 }, value: sh.end, onChange: function(e) { updateShift(idx, 'end', e.target.value); } }),
+                      h('button', { className: 'btn btn-ghost btn-icon btn-sm', onClick: function() { removeShift(idx); } }, I.x())
+                    );
+                  }),
+                  h('button', { className: 'btn btn-ghost btn-sm', onClick: addShift }, I.plus(), ' Add Shift')
+                )
               ),
-              h('div', null,
-                h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Enforcement'),
-                h('div', { style: { display: 'flex', gap: 6, flexWrap: 'wrap' } },
-                  schedule.enforceStart != null && h('span', { className: schedule.enforceStart ? 'badge badge-success' : 'badge badge-neutral' }, schedule.enforceStart ? 'Enforce Start' : 'Flexible Start'),
-                  schedule.enforceEnd != null && h('span', { className: schedule.enforceEnd ? 'badge badge-success' : 'badge badge-neutral' }, schedule.enforceEnd ? 'Enforce End' : 'Flexible End'),
-                  schedule.enforceBreaks != null && h('span', { className: schedule.enforceBreaks ? 'badge badge-success' : 'badge badge-neutral' }, schedule.enforceBreaks ? 'Enforce Breaks' : 'Flexible Breaks')
+              // Timezone
+              h('div', { className: 'form-group' },
+                h('label', { className: 'form-label' }, 'Timezone'),
+                TimezoneSelect(h, schedForm.timezone, function(e) { setSchedForm(Object.assign({}, schedForm, { timezone: e.target.value })); })
+              ),
+              // Toggles
+              h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 8 } },
+                h('label', { style: { display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer', fontSize: 13 } },
+                  h('input', { type: 'checkbox', checked: schedForm.enforceClockIn, onChange: function(e) { setSchedForm(Object.assign({}, schedForm, { enforceClockIn: e.target.checked })); } }),
+                  'Enforce Clock-In'
+                ),
+                h('label', { style: { display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer', fontSize: 13 } },
+                  h('input', { type: 'checkbox', checked: schedForm.enforceClockOut, onChange: function(e) { setSchedForm(Object.assign({}, schedForm, { enforceClockOut: e.target.checked })); } }),
+                  'Enforce Clock-Out'
+                ),
+                h('label', { style: { display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer', fontSize: 13 } },
+                  h('input', { type: 'checkbox', checked: schedForm.autoWakeEnabled, onChange: function(e) { setSchedForm(Object.assign({}, schedForm, { autoWakeEnabled: e.target.checked })); } }),
+                  'Auto-Wake'
+                ),
+                h('label', { style: { display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer', fontSize: 13 } },
+                  h('input', { type: 'checkbox', checked: schedForm.enabled, onChange: function(e) { setSchedForm(Object.assign({}, schedForm, { enabled: e.target.checked })); } }),
+                  'Enabled'
+                )
+              ),
+              // Off-hours + grace
+              h('div', { style: { display: 'flex', gap: 12, marginTop: 12 } },
+                h('div', { className: 'form-group', style: { flex: 1 } },
+                  h('label', { className: 'form-label' }, 'Off-Hours Action'),
+                  h('select', { className: 'input', value: schedForm.offHoursAction, onChange: function(e) { setSchedForm(Object.assign({}, schedForm, { offHoursAction: e.target.value })); } },
+                    h('option', { value: 'pause' }, 'Pause'), h('option', { value: 'stop' }, 'Stop'), h('option', { value: 'queue' }, 'Queue'))
+                ),
+                h('div', { className: 'form-group', style: { flex: 1 } },
+                  h('label', { className: 'form-label' }, 'Grace Period (min)'),
+                  h('input', { className: 'input', type: 'number', value: schedForm.gracePeriodMinutes, onChange: function(e) { setSchedForm(Object.assign({}, schedForm, { gracePeriodMinutes: parseInt(e.target.value) || 0 })); } })
                 )
+              ),
+              // Actions
+              h('div', { style: { display: 'flex', gap: 8, marginTop: 16, justifyContent: 'space-between' } },
+                h('div', { style: { display: 'flex', gap: 8 } },
+                  h('button', { className: 'btn btn-primary', disabled: saving, onClick: saveSchedule }, saving ? 'Saving...' : 'Save Schedule'),
+                  h('button', { className: 'btn btn-ghost', onClick: function() { setEditing(false); } }, 'Cancel')
+                ),
+                schedule && h('button', { className: 'btn btn-ghost', style: { color: 'var(--danger)' }, onClick: deleteSchedule }, I.x(), ' Remove Schedule')
               )
             )
-          : h('div', { style: { textAlign: 'center', padding: 20, color: 'var(--text-muted)', fontSize: 13 } }, 'No schedule configured.')
+          : schedule
+            ? h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 } },
+                h('div', null,
+                  h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Schedule Type'),
+                  h('div', { style: { fontSize: 14, fontWeight: 600 } }, (schedule.scheduleType || 'standard').charAt(0).toUpperCase() + (schedule.scheduleType || 'standard').slice(1))
+                ),
+                h('div', null,
+                  h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Hours'),
+                  h('div', { style: { fontSize: 14, fontWeight: 600 } }, formatHours(schedule))
+                ),
+                h('div', null,
+                  h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Timezone'),
+                  h('div', { style: { fontSize: 14, fontWeight: 600 } }, schedule.timezone || 'UTC')
+                ),
+                h('div', null,
+                  h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Days'),
+                  h('div', { style: { fontSize: 14, fontWeight: 600 } }, formatDays(schedule.config?.standardHours?.daysOfWeek))
+                ),
+                h('div', null,
+                  h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Enforcement'),
+                  h('div', { style: { display: 'flex', gap: 6, flexWrap: 'wrap' } },
+                    h('span', { className: schedule.enforceClockIn ? 'badge badge-success' : 'badge badge-neutral' }, schedule.enforceClockIn ? 'Clock-In Enforced' : 'Clock-In Flexible'),
+                    h('span', { className: schedule.enforceClockOut ? 'badge badge-success' : 'badge badge-neutral' }, schedule.enforceClockOut ? 'Clock-Out Enforced' : 'Clock-Out Flexible')
+                  )
+                ),
+                h('div', null,
+                  h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Off-Hours'),
+                  h('div', { style: { fontSize: 14, fontWeight: 600 } }, (schedule.offHoursAction || 'pause').charAt(0).toUpperCase() + (schedule.offHoursAction || 'pause').slice(1) + (schedule.gracePeriodMinutes ? ' (' + schedule.gracePeriodMinutes + 'min grace)' : ''))
+                ),
+                h('div', null,
+                  h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Status'),
+                  h('div', { style: { display: 'flex', gap: 6 } },
+                    h('span', { className: schedule.enabled ? 'badge badge-success' : 'badge badge-neutral' }, schedule.enabled ? 'Enabled' : 'Disabled'),
+                    schedule.autoWakeEnabled && h('span', { className: 'badge badge-info' }, 'Auto-Wake')
+                  )
+                )
+              )
+            : h('div', { style: { textAlign: 'center', padding: 20, color: 'var(--text-muted)', fontSize: 13 } },
+                'No schedule configured. ',
+                h('button', { className: 'btn btn-ghost btn-sm', onClick: startEdit }, 'Configure now')
+              )
       )
     ),
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agenticmail/enterprise",
-  "version": "0.5.88",
+  "version": "0.5.89",
   "description": "AgenticMail Enterprise — cloud-hosted AI agent identity, email, auth & compliance for organizations",
   "type": "module",
   "bin": {

package/src/dashboard/pages/agent-detail.js

@@ -1,5 +1,6 @@
 import { h, useState, useEffect, useCallback, Fragment, useApp, apiCall, engineCall, formatUptime, buildAgentDataMap, renderAgentBadge, showConfirm, getOrgId } from '../components/utils.js';
 import { I } from '../components/icons.js';
+import { TimezoneSelect } from '../components/timezones.js';
 import { DetailModal } from '../components/modal.js';
 import { CULTURES, LANGUAGES, DEFAULT_TRAITS, computeAge, PersonaForm } from '../components/persona-fields.js';
 import { TagInput } from '../components/tag-input.js';
@@ -2239,6 +2240,22 @@ function WorkforceSection(props) {
   var showAddTask = _showAddTask[0]; var setShowAddTask = _showAddTask[1];
   var _taskForm = useState({ title: '', description: '', priority: 'normal', type: 'general' });
   var taskForm = _taskForm[0]; var setTaskForm = _taskForm[1];
+  var _editing = useState(false);
+  var editing = _editing[0]; var setEditing = _editing[1];
+  var _saving = useState(false);
+  var saving = _saving[0]; var setSaving = _saving[1];
+
+  var dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+  var defaultSchedForm = {
+    agentId: agentId, timezone: 'UTC', scheduleType: 'standard',
+    config: { standardHours: { start: '09:00', end: '17:00', daysOfWeek: [1, 2, 3, 4, 5] } },
+    enforceClockIn: true, enforceClockOut: true, autoWakeEnabled: true,
+    offHoursAction: 'pause', gracePeriodMinutes: 5, enabled: true
+  };
+
+  var _schedForm = useState(defaultSchedForm);
+  var schedForm = _schedForm[0]; var setSchedForm = _schedForm[1];
 
   var loadAll = function() {
     setLoading(true);
@@ -2248,7 +2265,8 @@ function WorkforceSection(props) {
       engineCall('/workforce/tasks/' + agentId).catch(function() { return []; }),
       engineCall('/workforce/clock-records/' + agentId).catch(function() { return []; })
     ]).then(function(results) {
-      setSchedule(results[0]);
+      var sched = results[0]?.schedule || results[0];
+      setSchedule(sched);
       setStatus(results[1]);
       setTasks(results[2]?.tasks || results[2] || []);
       setClockRecords(results[3]?.records || results[3] || []);
@@ -2258,6 +2276,69 @@ function WorkforceSection(props) {
 
   useEffect(function() { loadAll(); }, [agentId]);
 
+  var startEdit = function() {
+    if (schedule) {
+      setSchedForm({
+        agentId: agentId,
+        timezone: schedule.timezone || 'UTC',
+        scheduleType: schedule.scheduleType || 'standard',
+        config: schedule.config || { standardHours: { start: '09:00', end: '17:00', daysOfWeek: [1, 2, 3, 4, 5] } },
+        enforceClockIn: schedule.enforceClockIn ?? true,
+        enforceClockOut: schedule.enforceClockOut ?? true,
+        autoWakeEnabled: schedule.autoWakeEnabled ?? true,
+        offHoursAction: schedule.offHoursAction || 'pause',
+        gracePeriodMinutes: schedule.gracePeriodMinutes ?? 5,
+        enabled: schedule.enabled ?? true
+      });
+    } else {
+      setSchedForm(Object.assign({}, defaultSchedForm, { agentId: agentId }));
+    }
+    setEditing(true);
+  };
+
+  var saveSchedule = function() {
+    setSaving(true);
+    var isUpdate = schedule && schedule.id;
+    var method = isUpdate ? 'PUT' : 'POST';
+    var url = isUpdate ? '/workforce/schedules/' + schedule.id : '/workforce/schedules';
+    engineCall(url, { method: method, body: JSON.stringify(schedForm) })
+      .then(function() { toast('Schedule saved', 'success'); setEditing(false); loadAll(); })
+      .catch(function(err) { toast(err.message, 'error'); })
+      .finally(function() { setSaving(false); });
+  };
+
+  var deleteSchedule = function() {
+    if (!schedule) return;
+    engineCall('/workforce/schedules/' + agentId, { method: 'DELETE' })
+      .then(function() { toast('Schedule removed', 'success'); setEditing(false); loadAll(); })
+      .catch(function(err) { toast(err.message, 'error'); });
+  };
+
+  var toggleDay = function(d) {
+    var days = (schedForm.config?.standardHours?.daysOfWeek || []).slice();
+    var idx = days.indexOf(d);
+    if (idx >= 0) days.splice(idx, 1); else days.push(d);
+    days.sort();
+    setSchedForm(Object.assign({}, schedForm, { config: Object.assign({}, schedForm.config, { standardHours: Object.assign({}, schedForm.config?.standardHours, { daysOfWeek: days }) }) }));
+  };
+
+  var addShift = function() {
+    var shifts = (schedForm.config?.shifts || []).concat([{ name: '', start: '09:00', end: '17:00' }]);
+    setSchedForm(Object.assign({}, schedForm, { config: Object.assign({}, schedForm.config, { shifts: shifts }) }));
+  };
+
+  var updateShift = function(idx, key, val) {
+    var shifts = (schedForm.config?.shifts || []).slice();
+    shifts[idx] = Object.assign({}, shifts[idx], (function() { var o = {}; o[key] = val; return o; })());
+    setSchedForm(Object.assign({}, schedForm, { config: Object.assign({}, schedForm.config, { shifts: shifts }) }));
+  };
+
+  var removeShift = function(idx) {
+    var shifts = (schedForm.config?.shifts || []).slice();
+    shifts.splice(idx, 1);
+    setSchedForm(Object.assign({}, schedForm, { config: Object.assign({}, schedForm.config, { shifts: shifts }) }));
+  };
+
   var clockIn = function() {
     engineCall('/workforce/clock-in/' + agentId, { method: 'POST' })
       .then(function() { toast('Agent clocked in', 'success'); loadAll(); })
@@ -2294,6 +2375,20 @@ function WorkforceSection(props) {
       .catch(function(err) { toast(err.message, 'error'); });
   };
 
+  // Helper: format schedule hours display
+  var formatHours = function(s) {
+    if (!s) return '-';
+    if (s.scheduleType === 'standard' && s.config?.standardHours) {
+      return (s.config.standardHours.start || '09:00') + ' - ' + (s.config.standardHours.end || '17:00');
+    }
+    if (s.scheduleType === 'shift' && s.config?.shifts?.length) {
+      return s.config.shifts.map(function(sh) { return (sh.name ? sh.name + ': ' : '') + sh.start + '-' + sh.end; }).join(', ');
+    }
+    return '-';
+  };
+
+  var formatDays = function(days) { return days?.map(function(d) { return dayNames[d]; }).join(', ') || '-'; };
+
   if (loading) {
     return h('div', { style: { padding: 40, textAlign: 'center', color: 'var(--text-muted)' } }, 'Loading workforce data...');
   }
@@ -2321,32 +2416,151 @@ function WorkforceSection(props) {
 
     // ─── Schedule Card ──────────────────────────────────
     h('div', { className: 'card', style: { marginBottom: 20 } },
-      h('div', { className: 'card-header' }, h('span', null, 'Schedule')),
+      h('div', { className: 'card-header', style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
+        h('span', null, 'Schedule'),
+        !editing && h('button', { className: 'btn btn-ghost btn-sm', onClick: startEdit }, I.edit(), schedule ? ' Edit' : ' Configure')
+      ),
       h('div', { className: 'card-body' },
-        schedule
-          ? h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 } },
-              h('div', null,
-                h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Schedule Type'),
-                h('div', { style: { fontSize: 14, fontWeight: 600 } }, schedule.type || schedule.scheduleType || 'Standard')
+        editing
+          ? h(Fragment, null,
+              // Schedule Type
+              h('div', { className: 'form-group' },
+                h('label', { className: 'form-label' }, 'Schedule Type'),
+                h('div', { style: { display: 'flex', gap: 16 } },
+                  ['standard', 'shift', 'custom'].map(function(t) {
+                    return h('label', { key: t, style: { display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer' } },
+                      h('input', { type: 'radio', name: 'schedTypeDetail', checked: schedForm.scheduleType === t, onChange: function() { setSchedForm(Object.assign({}, schedForm, { scheduleType: t })); } }),
+                      t.charAt(0).toUpperCase() + t.slice(1)
+                    );
+                  })
+                )
               ),
-              h('div', null,
-                h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Hours'),
-                h('div', { style: { fontSize: 14, fontWeight: 600 } }, schedule.hours || schedule.workHours || '-')
+              // Standard fields
+              schedForm.scheduleType === 'standard' && h(Fragment, null,
+                h('div', { style: { display: 'flex', gap: 12 } },
+                  h('div', { className: 'form-group', style: { flex: 1 } },
+                    h('label', { className: 'form-label' }, 'Start Time'),
+                    h('input', { className: 'input', type: 'time', value: schedForm.config?.standardHours?.start || '09:00', onChange: function(e) { setSchedForm(Object.assign({}, schedForm, { config: Object.assign({}, schedForm.config, { standardHours: Object.assign({}, schedForm.config?.standardHours, { start: e.target.value }) }) })); } })
+                  ),
+                  h('div', { className: 'form-group', style: { flex: 1 } },
+                    h('label', { className: 'form-label' }, 'End Time'),
+                    h('input', { className: 'input', type: 'time', value: schedForm.config?.standardHours?.end || '17:00', onChange: function(e) { setSchedForm(Object.assign({}, schedForm, { config: Object.assign({}, schedForm.config, { standardHours: Object.assign({}, schedForm.config?.standardHours, { end: e.target.value }) }) })); } })
+                  )
+                ),
+                h('div', { className: 'form-group' },
+                  h('label', { className: 'form-label' }, 'Days of Week'),
+                  h('div', { style: { display: 'flex', gap: 6, flexWrap: 'wrap' } },
+                    [0, 1, 2, 3, 4, 5, 6].map(function(d) {
+                      return h('button', {
+                        key: d, type: 'button',
+                        className: 'btn btn-sm ' + ((schedForm.config?.standardHours?.daysOfWeek || []).includes(d) ? 'btn-primary' : 'btn-ghost'),
+                        onClick: function() { toggleDay(d); }
+                      }, dayNames[d]);
+                    })
+                  )
+                )
               ),
-              h('div', null,
-                h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Timezone'),
-                h('div', { style: { fontSize: 14, fontWeight: 600 } }, schedule.timezone || 'UTC')
+              // Shift fields
+              schedForm.scheduleType === 'shift' && h(Fragment, null,
+                h('div', { className: 'form-group' },
+                  h('label', { className: 'form-label' }, 'Shifts'),
+                  (schedForm.config?.shifts || []).map(function(sh, idx) {
+                    return h('div', { key: idx, style: { display: 'flex', gap: 8, alignItems: 'center', marginBottom: 8, padding: 8, background: 'var(--bg-tertiary)', borderRadius: 6 } },
+                      h('input', { className: 'input', style: { flex: 1 }, placeholder: 'Shift name', value: sh.name, onChange: function(e) { updateShift(idx, 'name', e.target.value); } }),
+                      h('input', { className: 'input', type: 'time', style: { width: 110 }, value: sh.start, onChange: function(e) { updateShift(idx, 'start', e.target.value); } }),
+                      h('input', { className: 'input', type: 'time', style: { width: 110 }, value: sh.end, onChange: function(e) { updateShift(idx, 'end', e.target.value); } }),
+                      h('button', { className: 'btn btn-ghost btn-icon btn-sm', onClick: function() { removeShift(idx); } }, I.x())
+                    );
+                  }),
+                  h('button', { className: 'btn btn-ghost btn-sm', onClick: addShift }, I.plus(), ' Add Shift')
+                )
               ),
-              h('div', null,
-                h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Enforcement'),
-                h('div', { style: { display: 'flex', gap: 6, flexWrap: 'wrap' } },
-                  schedule.enforceStart != null && h('span', { className: schedule.enforceStart ? 'badge badge-success' : 'badge badge-neutral' }, schedule.enforceStart ? 'Enforce Start' : 'Flexible Start'),
-                  schedule.enforceEnd != null && h('span', { className: schedule.enforceEnd ? 'badge badge-success' : 'badge badge-neutral' }, schedule.enforceEnd ? 'Enforce End' : 'Flexible End'),
-                  schedule.enforceBreaks != null && h('span', { className: schedule.enforceBreaks ? 'badge badge-success' : 'badge badge-neutral' }, schedule.enforceBreaks ? 'Enforce Breaks' : 'Flexible Breaks')
+              // Timezone
+              h('div', { className: 'form-group' },
+                h('label', { className: 'form-label' }, 'Timezone'),
+                TimezoneSelect(h, schedForm.timezone, function(e) { setSchedForm(Object.assign({}, schedForm, { timezone: e.target.value })); })
+              ),
+              // Toggles
+              h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 8 } },
+                h('label', { style: { display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer', fontSize: 13 } },
+                  h('input', { type: 'checkbox', checked: schedForm.enforceClockIn, onChange: function(e) { setSchedForm(Object.assign({}, schedForm, { enforceClockIn: e.target.checked })); } }),
+                  'Enforce Clock-In'
+                ),
+                h('label', { style: { display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer', fontSize: 13 } },
+                  h('input', { type: 'checkbox', checked: schedForm.enforceClockOut, onChange: function(e) { setSchedForm(Object.assign({}, schedForm, { enforceClockOut: e.target.checked })); } }),
+                  'Enforce Clock-Out'
+                ),
+                h('label', { style: { display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer', fontSize: 13 } },
+                  h('input', { type: 'checkbox', checked: schedForm.autoWakeEnabled, onChange: function(e) { setSchedForm(Object.assign({}, schedForm, { autoWakeEnabled: e.target.checked })); } }),
+                  'Auto-Wake'
+                ),
+                h('label', { style: { display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer', fontSize: 13 } },
+                  h('input', { type: 'checkbox', checked: schedForm.enabled, onChange: function(e) { setSchedForm(Object.assign({}, schedForm, { enabled: e.target.checked })); } }),
+                  'Enabled'
+                )
+              ),
+              // Off-hours + grace
+              h('div', { style: { display: 'flex', gap: 12, marginTop: 12 } },
+                h('div', { className: 'form-group', style: { flex: 1 } },
+                  h('label', { className: 'form-label' }, 'Off-Hours Action'),
+                  h('select', { className: 'input', value: schedForm.offHoursAction, onChange: function(e) { setSchedForm(Object.assign({}, schedForm, { offHoursAction: e.target.value })); } },
+                    h('option', { value: 'pause' }, 'Pause'), h('option', { value: 'stop' }, 'Stop'), h('option', { value: 'queue' }, 'Queue'))
+                ),
+                h('div', { className: 'form-group', style: { flex: 1 } },
+                  h('label', { className: 'form-label' }, 'Grace Period (min)'),
+                  h('input', { className: 'input', type: 'number', value: schedForm.gracePeriodMinutes, onChange: function(e) { setSchedForm(Object.assign({}, schedForm, { gracePeriodMinutes: parseInt(e.target.value) || 0 })); } })
                 )
+              ),
+              // Actions
+              h('div', { style: { display: 'flex', gap: 8, marginTop: 16, justifyContent: 'space-between' } },
+                h('div', { style: { display: 'flex', gap: 8 } },
+                  h('button', { className: 'btn btn-primary', disabled: saving, onClick: saveSchedule }, saving ? 'Saving...' : 'Save Schedule'),
+                  h('button', { className: 'btn btn-ghost', onClick: function() { setEditing(false); } }, 'Cancel')
+                ),
+                schedule && h('button', { className: 'btn btn-ghost', style: { color: 'var(--danger)' }, onClick: deleteSchedule }, I.x(), ' Remove Schedule')
               )
             )
-          : h('div', { style: { textAlign: 'center', padding: 20, color: 'var(--text-muted)', fontSize: 13 } }, 'No schedule configured.')
+          : schedule
+            ? h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 } },
+                h('div', null,
+                  h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Schedule Type'),
+                  h('div', { style: { fontSize: 14, fontWeight: 600 } }, (schedule.scheduleType || 'standard').charAt(0).toUpperCase() + (schedule.scheduleType || 'standard').slice(1))
+                ),
+                h('div', null,
+                  h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Hours'),
+                  h('div', { style: { fontSize: 14, fontWeight: 600 } }, formatHours(schedule))
+                ),
+                h('div', null,
+                  h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Timezone'),
+                  h('div', { style: { fontSize: 14, fontWeight: 600 } }, schedule.timezone || 'UTC')
+                ),
+                h('div', null,
+                  h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Days'),
+                  h('div', { style: { fontSize: 14, fontWeight: 600 } }, formatDays(schedule.config?.standardHours?.daysOfWeek))
+                ),
+                h('div', null,
+                  h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Enforcement'),
+                  h('div', { style: { display: 'flex', gap: 6, flexWrap: 'wrap' } },
+                    h('span', { className: schedule.enforceClockIn ? 'badge badge-success' : 'badge badge-neutral' }, schedule.enforceClockIn ? 'Clock-In Enforced' : 'Clock-In Flexible'),
+                    h('span', { className: schedule.enforceClockOut ? 'badge badge-success' : 'badge badge-neutral' }, schedule.enforceClockOut ? 'Clock-Out Enforced' : 'Clock-Out Flexible')
+                  )
+                ),
+                h('div', null,
+                  h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Off-Hours'),
+                  h('div', { style: { fontSize: 14, fontWeight: 600 } }, (schedule.offHoursAction || 'pause').charAt(0).toUpperCase() + (schedule.offHoursAction || 'pause').slice(1) + (schedule.gracePeriodMinutes ? ' (' + schedule.gracePeriodMinutes + 'min grace)' : ''))
+                ),
+                h('div', null,
+                  h('div', { style: { fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 } }, 'Status'),
+                  h('div', { style: { display: 'flex', gap: 6 } },
+                    h('span', { className: schedule.enabled ? 'badge badge-success' : 'badge badge-neutral' }, schedule.enabled ? 'Enabled' : 'Disabled'),
+                    schedule.autoWakeEnabled && h('span', { className: 'badge badge-info' }, 'Auto-Wake')
+                  )
+                )
+              )
+            : h('div', { style: { textAlign: 'center', padding: 20, color: 'var(--text-muted)', fontSize: 13 } },
+                'No schedule configured. ',
+                h('button', { className: 'btn btn-ghost btn-sm', onClick: startEdit }, 'Configure now')
+              )
       )
     ),