Add roll-call Start/Stop UX to business and customer dashboards.
Owners/admins can run timed work days, manage tasks in a modal, and stop from the FAB or row control. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
ac287e02cc
commit
c4e846564e
@@ -0,0 +1,279 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { Plus, Trash2, X } from 'lucide-react'
|
||||
import { useLocale } from '@meshkee/dashboard-ui'
|
||||
import { useToast } from '../context/ToastContext'
|
||||
import { useT } from '../i18n/useT'
|
||||
import { ApiError } from '../lib/api'
|
||||
import {
|
||||
createRollCall,
|
||||
updateRollCall,
|
||||
type RollCall,
|
||||
type RollCallInput,
|
||||
} from '../services/rollCallService'
|
||||
import modalStyles from './VariationsModal.module.css'
|
||||
import styles from './RollCallFormModal.module.css'
|
||||
|
||||
interface RollCallFormModalProps {
|
||||
open: boolean
|
||||
rollCall: RollCall | null
|
||||
onClose: () => void
|
||||
onSaved: (rollCall: RollCall) => void
|
||||
}
|
||||
|
||||
const ANIMATION_MS = 220
|
||||
|
||||
function emptyTasks() {
|
||||
return ['']
|
||||
}
|
||||
|
||||
export function RollCallFormModal({
|
||||
open,
|
||||
rollCall,
|
||||
onClose,
|
||||
onSaved,
|
||||
}: RollCallFormModalProps) {
|
||||
const t = useT()
|
||||
const { locale, dir } = useLocale()
|
||||
const { showToast } = useToast()
|
||||
const [mounted, setMounted] = useState(open)
|
||||
const [closing, setClosing] = useState(false)
|
||||
const [workDate, setWorkDate] = useState('')
|
||||
const [startTime, setStartTime] = useState('09:00')
|
||||
const [endTime, setEndTime] = useState('17:00')
|
||||
const [tasks, setTasks] = useState<string[]>(emptyTasks())
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setMounted(true)
|
||||
setClosing(false)
|
||||
setError('')
|
||||
if (rollCall) {
|
||||
setWorkDate(rollCall.workDate)
|
||||
setStartTime(rollCall.startTime)
|
||||
setEndTime(rollCall.endTime)
|
||||
setTasks(
|
||||
rollCall.tasks.length > 0
|
||||
? rollCall.tasks.map((task) => task.title)
|
||||
: emptyTasks(),
|
||||
)
|
||||
} else {
|
||||
setWorkDate(new Date().toISOString().slice(0, 10))
|
||||
setStartTime('09:00')
|
||||
setEndTime('17:00')
|
||||
setTasks(emptyTasks())
|
||||
}
|
||||
} else if (mounted) {
|
||||
setClosing(true)
|
||||
const timer = setTimeout(() => {
|
||||
setMounted(false)
|
||||
setClosing(false)
|
||||
}, ANIMATION_MS)
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [open, mounted, rollCall])
|
||||
|
||||
useEffect(() => {
|
||||
if (!mounted || closing) return
|
||||
|
||||
const prevOverflow = document.body.style.overflow
|
||||
document.body.style.overflow = 'hidden'
|
||||
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose()
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', onKey)
|
||||
return () => {
|
||||
document.body.style.overflow = prevOverflow
|
||||
document.removeEventListener('keydown', onKey)
|
||||
}
|
||||
}, [mounted, closing, onClose])
|
||||
|
||||
if (!mounted) return null
|
||||
|
||||
const isEdit = Boolean(rollCall?.id)
|
||||
|
||||
function updateTask(index: number, value: string) {
|
||||
setTasks((prev) => prev.map((task, i) => (i === index ? value : task)))
|
||||
}
|
||||
|
||||
function addTask() {
|
||||
setTasks((prev) => [...prev, ''])
|
||||
}
|
||||
|
||||
function removeTask(index: number) {
|
||||
setTasks((prev) => {
|
||||
if (prev.length <= 1) return ['']
|
||||
return prev.filter((_, i) => i !== index)
|
||||
})
|
||||
}
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
|
||||
const cleanedTasks = tasks.map((task) => task.trim()).filter(Boolean)
|
||||
if (!workDate || !startTime || !endTime) {
|
||||
setError(t('rollCall.error.incomplete'))
|
||||
return
|
||||
}
|
||||
if (cleanedTasks.length === 0) {
|
||||
setError(t('rollCall.error.tasksRequired'))
|
||||
return
|
||||
}
|
||||
|
||||
const input: RollCallInput = {
|
||||
workDate,
|
||||
startTime,
|
||||
endTime,
|
||||
tasks: cleanedTasks.map((title) => ({ title })),
|
||||
}
|
||||
|
||||
setSaving(true)
|
||||
try {
|
||||
const result = rollCall
|
||||
? await updateRollCall(rollCall.id, input)
|
||||
: await createRollCall(input)
|
||||
onSaved(result.rollCall)
|
||||
showToast(
|
||||
rollCall ? t('rollCall.toast.updated') : t('rollCall.toast.created'),
|
||||
'success',
|
||||
)
|
||||
onClose()
|
||||
} catch (err) {
|
||||
const message =
|
||||
err instanceof ApiError ? err.message : t('rollCall.error.save')
|
||||
setError(message)
|
||||
showToast(message, 'error')
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
className={`${modalStyles.overlay} ${closing ? styles.overlayOut : styles.overlayIn}`}
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className={`${modalStyles.modal} ${styles.modal} ${closing ? styles.modalOut : styles.modalIn}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="roll-call-form-title"
|
||||
lang={locale}
|
||||
dir={dir}
|
||||
>
|
||||
<div className={modalStyles.header}>
|
||||
<div>
|
||||
<h2 id="roll-call-form-title" className={modalStyles.title}>
|
||||
{isEdit ? t('rollCall.modal.editTitle') : t('rollCall.modal.addTitle')}
|
||||
</h2>
|
||||
<p className={modalStyles.subtitle}>{t('rollCall.modal.subtitle')}</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className={modalStyles.closeBtn}
|
||||
onClick={onClose}
|
||||
aria-label={t('common.close')}
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form className={modalStyles.body} onSubmit={handleSubmit}>
|
||||
{error && (
|
||||
<div className={styles.error} role="alert">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={modalStyles.field}>
|
||||
<label htmlFor="roll-call-date">{t('rollCall.field.date')}</label>
|
||||
<input
|
||||
id="roll-call-date"
|
||||
type="date"
|
||||
value={workDate}
|
||||
onChange={(e) => setWorkDate(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.timeRow}>
|
||||
<div className={modalStyles.field}>
|
||||
<label htmlFor="roll-call-start">{t('rollCall.field.startTime')}</label>
|
||||
<input
|
||||
id="roll-call-start"
|
||||
type="time"
|
||||
value={startTime}
|
||||
onChange={(e) => setStartTime(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className={modalStyles.field}>
|
||||
<label htmlFor="roll-call-end">{t('rollCall.field.endTime')}</label>
|
||||
<input
|
||||
id="roll-call-end"
|
||||
type="time"
|
||||
value={endTime}
|
||||
onChange={(e) => setEndTime(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.tasksBlock}>
|
||||
<div className={styles.tasksHeader}>
|
||||
<span className={styles.tasksLabel}>{t('rollCall.field.tasks')}</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.taskList}>
|
||||
{tasks.map((task, index) => (
|
||||
<div key={index} className={styles.taskRow}>
|
||||
<input
|
||||
type="text"
|
||||
value={task}
|
||||
onChange={(e) => updateTask(index, e.target.value)}
|
||||
placeholder={t('rollCall.field.taskPlaceholder')}
|
||||
aria-label={t('rollCall.field.taskN', { n: index + 1 })}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.removeTaskBtn}
|
||||
onClick={() => removeTask(index)}
|
||||
aria-label={t('rollCall.removeTask')}
|
||||
disabled={tasks.length === 1 && !task.trim()}
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button type="button" className={styles.addTaskRowBtn} onClick={addTask}>
|
||||
<Plus size={18} strokeWidth={2.5} />
|
||||
{t('rollCall.addTask')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.actions}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.cancelBtn}
|
||||
onClick={onClose}
|
||||
disabled={saving}
|
||||
>
|
||||
{t('rollCall.cancel')}
|
||||
</button>
|
||||
<button type="submit" className={styles.saveBtn} disabled={saving}>
|
||||
{saving ? t('rollCall.saving') : t('rollCall.save')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user