add subcontractor task assign/list for admin and owner feature
This commit is contained in:
Satyam Rastogi
@@ -5,7 +5,8 @@ import { useTheme } from '../context/ThemeContext';
|
||||
import {
|
||||
LayoutDashboard, Map, Calendar, LogOut, User, Home, MessageSquare,
|
||||
ChevronLeft, ChevronRight, Sun, Moon, Trophy, Users, Briefcase,
|
||||
FileText, Menu, X, Calculator, PlusCircle, ClipboardList, Zap, LayoutGrid, Settings
|
||||
FileText, Menu, X, Calculator, PlusCircle, ClipboardList, Zap, LayoutGrid, Settings,
|
||||
HardHat
|
||||
} from 'lucide-react';
|
||||
|
||||
import PageTransition from './PageTransition';
|
||||
@@ -149,6 +150,7 @@ const Layout = () => {
|
||||
{ to: "/owner/estimates", icon: Calculator, label: "Estimates" },
|
||||
{ to: "/admin/schedule", icon: Calendar, label: "Team Schedule" },
|
||||
{ to: "/admin/leaderboard", icon: Trophy, label: "Leaderboard" },
|
||||
{ to: "/owner/subcontractor-tasks", icon: HardHat, label: "Subcontractor Tasks" },
|
||||
{ to: "/owner/settings", icon: Settings, label: "Org Settings" },
|
||||
...commonItems,
|
||||
];
|
||||
@@ -167,6 +169,7 @@ const Layout = () => {
|
||||
label: <span><span className="text-[#fda913]">Pro</span>Canvas</span>
|
||||
},
|
||||
{ to: "/admin/estimates", icon: Calculator, label: "Estimates" },
|
||||
{ to: "/admin/subcontractor-tasks", icon: HardHat, label: "Subcontractor Tasks" },
|
||||
{ to: "/owner/settings", icon: Settings, label: "Org Settings" },
|
||||
...commonItems,
|
||||
];
|
||||
|
||||
@@ -0,0 +1,476 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
X, ClipboardList, MapPin, Calendar, Camera, AlertCircle,
|
||||
Trash2, User, Star, ImagePlus, Loader2,
|
||||
} from 'lucide-react';
|
||||
import { useMockStore } from '../../data/mockStore';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
|
||||
const inputBase = "w-full bg-white dark:bg-[#18181b] border border-zinc-200 dark:border-white/10 rounded-xl px-4 py-2.5 text-sm text-zinc-900 dark:text-white placeholder-zinc-400 dark:placeholder-zinc-600 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all";
|
||||
|
||||
const PRIORITY_STYLES = {
|
||||
low: { activeBg: 'bg-zinc-900 dark:bg-white', activeText: 'text-white dark:text-black', dot: 'bg-zinc-400' },
|
||||
medium: { activeBg: 'bg-blue-600', activeText: 'text-white', dot: 'bg-blue-500' },
|
||||
high: { activeBg: 'bg-red-600', activeText: 'text-white', dot: 'bg-red-500' },
|
||||
};
|
||||
|
||||
const todayIso = () => new Date().toISOString().slice(0, 10);
|
||||
|
||||
const emptyForm = {
|
||||
subcontractorId: '',
|
||||
title: '',
|
||||
location: '',
|
||||
description: '',
|
||||
dueDate: '',
|
||||
priority: 'medium',
|
||||
photos: [],
|
||||
};
|
||||
|
||||
const AssignTaskModal = ({ isOpen, onClose, task = null, defaultSubcontractorId = null }) => {
|
||||
const { user } = useAuth();
|
||||
const { subcontractors, orgSettings, addSubcontractorTask, updateSubcontractorTask, taskPriorities } = useMockStore();
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
const isEdit = Boolean(task);
|
||||
const activeSubs = useMemo(() => subcontractors.filter(s => s.status === 'active'), [subcontractors]);
|
||||
|
||||
const [form, setForm] = useState(emptyForm);
|
||||
const [errors, setErrors] = useState({});
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
// Reset / hydrate when modal opens or task switches
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
if (task) {
|
||||
setForm({
|
||||
subcontractorId: task.subcontractorId,
|
||||
title: task.title,
|
||||
location: task.location,
|
||||
description: task.description || '',
|
||||
dueDate: task.dueDate,
|
||||
priority: task.priority || 'medium',
|
||||
photos: (task.photos || []).map(p => ({ ...p, isExisting: true })),
|
||||
});
|
||||
} else {
|
||||
setForm({
|
||||
...emptyForm,
|
||||
subcontractorId: defaultSubcontractorId || '',
|
||||
});
|
||||
}
|
||||
setErrors({});
|
||||
setSubmitting(false);
|
||||
}, [isOpen, task, defaultSubcontractorId]);
|
||||
|
||||
// Escape key
|
||||
useEffect(() => {
|
||||
const handler = (e) => { if (e.key === 'Escape') onClose(); };
|
||||
if (isOpen) window.addEventListener('keydown', handler);
|
||||
return () => window.removeEventListener('keydown', handler);
|
||||
}, [isOpen, onClose]);
|
||||
|
||||
// Body scroll lock
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
const prev = document.body.style.overflow;
|
||||
document.body.style.overflow = 'hidden';
|
||||
return () => { document.body.style.overflow = prev; };
|
||||
}, [isOpen]);
|
||||
|
||||
// Clean up object URLs we created for newly-picked photos
|
||||
useEffect(() => () => {
|
||||
form.photos.forEach(p => { if (p.objectUrl) URL.revokeObjectURL(p.objectUrl); });
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const setField = (k, v) => {
|
||||
setForm(prev => ({ ...prev, [k]: v }));
|
||||
setErrors(prev => ({ ...prev, [k]: undefined }));
|
||||
};
|
||||
|
||||
const handleFiles = (e) => {
|
||||
const incoming = Array.from(e.target.files || []);
|
||||
if (!incoming.length) return;
|
||||
const next = incoming.map((file, i) => {
|
||||
const objectUrl = URL.createObjectURL(file);
|
||||
return {
|
||||
id: `new_${Date.now()}_${i}`,
|
||||
name: file.name,
|
||||
url: objectUrl,
|
||||
objectUrl,
|
||||
annotation: '',
|
||||
};
|
||||
});
|
||||
setForm(prev => ({ ...prev, photos: [...prev.photos, ...next] }));
|
||||
// reset input so picking the same file again still triggers change
|
||||
e.target.value = '';
|
||||
};
|
||||
|
||||
const removePhoto = (id) => {
|
||||
setForm(prev => {
|
||||
const photo = prev.photos.find(p => p.id === id);
|
||||
if (photo?.objectUrl) URL.revokeObjectURL(photo.objectUrl);
|
||||
return { ...prev, photos: prev.photos.filter(p => p.id !== id) };
|
||||
});
|
||||
};
|
||||
|
||||
const updatePhotoAnnotation = (id, annotation) => {
|
||||
setForm(prev => ({
|
||||
...prev,
|
||||
photos: prev.photos.map(p => p.id === id ? { ...p, annotation } : p),
|
||||
}));
|
||||
};
|
||||
|
||||
const validate = () => {
|
||||
const err = {};
|
||||
if (!form.subcontractorId) err.subcontractorId = 'Select a subcontractor.';
|
||||
if (!form.title.trim()) err.title = 'Task title is required.';
|
||||
if (!form.location.trim()) err.location = 'Location is required.';
|
||||
if (!form.dueDate) err.dueDate = 'Due date is required.';
|
||||
else if (!isEdit && form.dueDate < todayIso()) err.dueDate = 'Due date must be today or later.';
|
||||
setErrors(err);
|
||||
return Object.keys(err).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
if (!validate()) return;
|
||||
|
||||
setSubmitting(true);
|
||||
// Tiny delay to surface the loading state — replace with real API later.
|
||||
await new Promise(r => setTimeout(r, 400));
|
||||
|
||||
const payload = {
|
||||
companyId: 'lynkeduppro',
|
||||
companyName: orgSettings?.orgName || 'Your Company',
|
||||
assignedBy: user?.id || 'unknown',
|
||||
assignedByName: user?.name || 'Unknown',
|
||||
subcontractorId: form.subcontractorId,
|
||||
title: form.title.trim(),
|
||||
location: form.location.trim(),
|
||||
description: form.description.trim(),
|
||||
dueDate: form.dueDate,
|
||||
priority: form.priority,
|
||||
photos: form.photos.map(p => ({
|
||||
id: p.isExisting ? p.id : undefined,
|
||||
name: p.name,
|
||||
url: p.url,
|
||||
annotation: p.annotation || '',
|
||||
})),
|
||||
};
|
||||
|
||||
try {
|
||||
if (isEdit) {
|
||||
updateSubcontractorTask(task.id, {
|
||||
subcontractorId: payload.subcontractorId,
|
||||
title: payload.title,
|
||||
location: payload.location,
|
||||
description: payload.description,
|
||||
dueDate: payload.dueDate,
|
||||
priority: payload.priority,
|
||||
photos: payload.photos,
|
||||
});
|
||||
} else {
|
||||
addSubcontractorTask(payload);
|
||||
}
|
||||
onClose();
|
||||
} catch {
|
||||
toast.error('Something went wrong. Please try again.');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return createPortal(
|
||||
<div className="fixed inset-0 z-[9999] flex items-end sm:items-center justify-center sm:p-6" role="dialog" aria-modal="true">
|
||||
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={submitting ? undefined : onClose} />
|
||||
<div className="relative w-full sm:max-w-2xl h-[92dvh] sm:h-auto sm:max-h-[90vh] bg-white dark:bg-[#121214] rounded-t-2xl sm:rounded-2xl shadow-2xl border border-zinc-200 dark:border-white/10 overflow-hidden flex flex-col animate-in slide-in-from-bottom-10 duration-200">
|
||||
{/* Header */}
|
||||
<div className="px-5 sm:px-6 py-4 sm:py-5 border-b border-zinc-200 dark:border-white/10 flex items-center justify-between bg-zinc-50/50 dark:bg-white/5 shrink-0">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div className="p-2 rounded-xl bg-blue-500/10 text-blue-500 shrink-0">
|
||||
<ClipboardList size={20} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h2 className="text-base sm:text-lg font-bold text-zinc-900 dark:text-white uppercase tracking-wider truncate">
|
||||
{isEdit ? 'Edit Task' : 'Assign Task'}
|
||||
</h2>
|
||||
<p className="text-[11px] text-zinc-500 dark:text-zinc-400 font-mono mt-0.5 truncate">
|
||||
{isEdit ? task.id : 'New subcontractor task'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={submitting}
|
||||
className="p-2 rounded-lg bg-zinc-100 dark:bg-white/10 text-zinc-500 hover:text-red-500 transition-colors disabled:opacity-50"
|
||||
aria-label="Close"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<form onSubmit={handleSubmit} className="flex-1 flex flex-col min-h-0">
|
||||
<div className="flex-1 overflow-y-auto px-5 sm:px-6 py-5 space-y-5 custom-scrollbar">
|
||||
{/* Subcontractor select */}
|
||||
<div className="space-y-1.5">
|
||||
<label htmlFor="sct-subcontractor" className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-400 flex items-center gap-1.5">
|
||||
<User size={12} />
|
||||
Subcontractor <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
id="sct-subcontractor"
|
||||
value={form.subcontractorId}
|
||||
onChange={(e) => setField('subcontractorId', e.target.value)}
|
||||
className={inputBase}
|
||||
aria-invalid={Boolean(errors.subcontractorId)}
|
||||
>
|
||||
<option value="" disabled>Select a subcontractor…</option>
|
||||
{activeSubs.map(s => (
|
||||
<option key={s.id} value={s.id}>
|
||||
{s.name} — {s.tradeType} ({s.companyName})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{/* Preview of selected sub */}
|
||||
{form.subcontractorId && (() => {
|
||||
const sub = activeSubs.find(s => s.id === form.subcontractorId);
|
||||
if (!sub) return null;
|
||||
return (
|
||||
<div className="mt-2 p-3 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/10 flex items-center justify-between gap-3 text-xs">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div className="w-9 h-9 rounded-full bg-blue-500/10 text-blue-500 flex items-center justify-center font-bold shrink-0">
|
||||
{sub.name.charAt(0)}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="font-bold text-zinc-900 dark:text-white truncate">{sub.name}</div>
|
||||
<div className="text-zinc-500 truncate">{sub.email} · {sub.phone}</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="flex items-center gap-1 text-amber-500 font-bold shrink-0">
|
||||
<Star size={12} fill="currentColor" />
|
||||
{sub.rating?.toFixed?.(1) ?? '—'}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
{errors.subcontractorId && <FieldError msg={errors.subcontractorId} />}
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div className="space-y-1.5">
|
||||
<label htmlFor="sct-title" className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-400">
|
||||
Task Title <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="sct-title"
|
||||
type="text"
|
||||
value={form.title}
|
||||
onChange={(e) => setField('title', e.target.value)}
|
||||
className={inputBase}
|
||||
placeholder="e.g. Replace damaged ridge cap"
|
||||
maxLength={120}
|
||||
aria-invalid={Boolean(errors.title)}
|
||||
/>
|
||||
{errors.title && <FieldError msg={errors.title} />}
|
||||
</div>
|
||||
|
||||
{/* Location */}
|
||||
<div className="space-y-1.5">
|
||||
<label htmlFor="sct-location" className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-400 flex items-center gap-1.5">
|
||||
<MapPin size={12} />
|
||||
Location / Address <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="sct-location"
|
||||
type="text"
|
||||
value={form.location}
|
||||
onChange={(e) => setField('location', e.target.value)}
|
||||
className={inputBase}
|
||||
placeholder="2612 Dunwick Dr, Plano, TX 75023"
|
||||
aria-invalid={Boolean(errors.location)}
|
||||
/>
|
||||
{errors.location && <FieldError msg={errors.location} />}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="space-y-1.5">
|
||||
<label htmlFor="sct-description" className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-400">
|
||||
Task Description
|
||||
</label>
|
||||
<textarea
|
||||
id="sct-description"
|
||||
value={form.description}
|
||||
onChange={(e) => setField('description', e.target.value)}
|
||||
className={inputBase}
|
||||
rows={3}
|
||||
placeholder="Scope of work, access notes, materials staged…"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Due date + Priority */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<label htmlFor="sct-due" className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-400 flex items-center gap-1.5">
|
||||
<Calendar size={12} />
|
||||
Due Date <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="sct-due"
|
||||
type="date"
|
||||
value={form.dueDate}
|
||||
min={isEdit ? undefined : todayIso()}
|
||||
onChange={(e) => setField('dueDate', e.target.value)}
|
||||
className={inputBase}
|
||||
aria-invalid={Boolean(errors.dueDate)}
|
||||
/>
|
||||
{errors.dueDate && <FieldError msg={errors.dueDate} />}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-400 block">
|
||||
Priority <span className="text-red-500">*</span>
|
||||
</span>
|
||||
<div className="flex gap-2" role="radiogroup" aria-label="Priority">
|
||||
{taskPriorities.map(p => {
|
||||
const style = PRIORITY_STYLES[p.value] || PRIORITY_STYLES.medium;
|
||||
const active = form.priority === p.value;
|
||||
return (
|
||||
<button
|
||||
key={p.value}
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={active}
|
||||
onClick={() => setField('priority', p.value)}
|
||||
className={`flex-1 flex items-center justify-center gap-2 px-3 py-2.5 rounded-xl text-xs font-bold uppercase tracking-wider border transition-all ${
|
||||
active
|
||||
? `${style.activeBg} ${style.activeText} border-transparent shadow-sm`
|
||||
: 'bg-zinc-100 dark:bg-white/5 text-zinc-500 dark:text-zinc-400 border-zinc-200 dark:border-white/10 hover:bg-zinc-200 dark:hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
<span className={`w-2 h-2 rounded-full ${style.dot}`} />
|
||||
{p.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Photos */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-400 flex items-center gap-1.5">
|
||||
<Camera size={12} />
|
||||
Photos & Annotations
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-wider bg-blue-500/10 text-blue-600 dark:text-blue-400 hover:bg-blue-500/20 transition-colors"
|
||||
>
|
||||
<ImagePlus size={12} />
|
||||
Add Photo
|
||||
</button>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
multiple
|
||||
onChange={handleFiles}
|
||||
className="hidden"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{form.photos.length === 0 ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="w-full border-2 border-dashed border-zinc-300 dark:border-white/10 rounded-xl py-8 flex flex-col items-center justify-center text-zinc-500 hover:border-blue-500/50 hover:bg-blue-500/5 transition-colors"
|
||||
>
|
||||
<Camera size={28} className="mb-2 opacity-60" />
|
||||
<p className="text-xs font-semibold">Click to upload photos</p>
|
||||
<p className="text-[10px] text-zinc-400 mt-1">Add an annotation note for each (e.g. "Paint here")</p>
|
||||
</button>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{form.photos.map((p, idx) => (
|
||||
<div key={p.id} className="flex gap-3 p-2.5 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/10">
|
||||
<div className="w-20 h-20 rounded-lg overflow-hidden bg-zinc-200 dark:bg-zinc-800 shrink-0">
|
||||
<img src={p.url} alt={p.name || `Photo ${idx + 1}`} className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0 flex flex-col gap-1.5">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="text-xs font-mono text-zinc-500 truncate">{p.name}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removePhoto(p.id)}
|
||||
className="p-1.5 rounded-md text-zinc-400 hover:text-red-500 hover:bg-red-500/10 transition-colors shrink-0"
|
||||
aria-label="Remove photo"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={p.annotation}
|
||||
onChange={(e) => updatePhotoAnnotation(p.id, e.target.value)}
|
||||
placeholder='Annotation (e.g. "Paint here", "Repair this corner")'
|
||||
className="w-full bg-white dark:bg-[#18181b] border border-zinc-200 dark:border-white/10 rounded-lg px-2.5 py-1.5 text-xs text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:border-blue-500"
|
||||
maxLength={140}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Status indicator (informational) */}
|
||||
{!isEdit && (
|
||||
<div className="flex items-center gap-2 text-xs text-zinc-500 dark:text-zinc-400 p-3 rounded-xl bg-blue-500/5 border border-blue-500/10">
|
||||
<AlertCircle size={14} className="text-blue-500 shrink-0" />
|
||||
Task will be created with status <span className="font-bold text-zinc-900 dark:text-white">Assigned</span> and the subcontractor will be notified.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="px-5 sm:px-6 py-4 border-t border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/[0.02] flex flex-col-reverse sm:flex-row sm:justify-end gap-2 sm:gap-3 shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={submitting}
|
||||
className="px-5 py-2.5 text-sm font-bold rounded-xl border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/5 hover:text-zinc-900 dark:hover:text-white transition-colors disabled:opacity-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
className="inline-flex items-center justify-center gap-2 px-6 py-2.5 text-sm font-bold rounded-xl bg-blue-600 hover:bg-blue-500 text-white shadow-lg shadow-blue-500/20 transition-all disabled:opacity-60"
|
||||
>
|
||||
{submitting && <Loader2 size={14} className="animate-spin" />}
|
||||
{isEdit ? 'Save Changes' : 'Assign Task'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
);
|
||||
};
|
||||
|
||||
const FieldError = ({ msg }) => (
|
||||
<p className="text-[11px] font-semibold text-red-500 flex items-center gap-1 mt-1">
|
||||
<AlertCircle size={11} />
|
||||
{msg}
|
||||
</p>
|
||||
);
|
||||
|
||||
export default AssignTaskModal;
|
||||
@@ -0,0 +1,89 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { X, Repeat, User, Loader2 } from 'lucide-react';
|
||||
import { useMockStore } from '../../data/mockStore';
|
||||
|
||||
const inputBase = "w-full bg-white dark:bg-[#18181b] border border-zinc-200 dark:border-white/10 rounded-xl px-4 py-2.5 text-sm text-zinc-900 dark:text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all";
|
||||
|
||||
const ReassignTaskModal = ({ isOpen, onClose, task }) => {
|
||||
const { subcontractors, reassignSubcontractorTask } = useMockStore();
|
||||
const [selected, setSelected] = useState('');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const activeSubs = useMemo(
|
||||
() => subcontractors.filter(s => s.status === 'active' && s.id !== task?.subcontractorId),
|
||||
[subcontractors, task],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setSelected('');
|
||||
setSubmitting(false);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e) => { if (e.key === 'Escape') onClose(); };
|
||||
if (isOpen) window.addEventListener('keydown', handler);
|
||||
return () => window.removeEventListener('keydown', handler);
|
||||
}, [isOpen, onClose]);
|
||||
|
||||
if (!isOpen || !task) return null;
|
||||
|
||||
const handleConfirm = async () => {
|
||||
if (!selected) return;
|
||||
setSubmitting(true);
|
||||
await new Promise(r => setTimeout(r, 300));
|
||||
reassignSubcontractorTask(task.id, selected);
|
||||
setSubmitting(false);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return createPortal(
|
||||
<div className="fixed inset-0 z-[9999] flex items-center justify-center p-4" role="dialog" aria-modal="true">
|
||||
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={submitting ? undefined : onClose} />
|
||||
<div className="relative w-full max-w-md bg-white dark:bg-[#121214] rounded-2xl shadow-2xl border border-zinc-200 dark:border-white/10 overflow-hidden animate-in zoom-in-95 duration-200">
|
||||
<div className="px-5 py-4 border-b border-zinc-200 dark:border-white/10 flex items-center justify-between bg-zinc-50/50 dark:bg-white/5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-xl bg-purple-500/10 text-purple-500"><Repeat size={18} /></div>
|
||||
<h2 className="text-base font-bold text-zinc-900 dark:text-white uppercase tracking-wider">Reassign Task</h2>
|
||||
</div>
|
||||
<button onClick={onClose} disabled={submitting} className="p-2 rounded-lg bg-zinc-100 dark:bg-white/10 text-zinc-500 hover:text-red-500 transition-colors disabled:opacity-50">
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-5 space-y-4">
|
||||
<div className="text-sm text-zinc-600 dark:text-zinc-400">
|
||||
Reassign <span className="font-bold text-zinc-900 dark:text-white">{task.title}</span> currently assigned to <span className="font-bold text-zinc-900 dark:text-white">{task.subcontractorName}</span>.
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label htmlFor="reassign-sub" className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-400 flex items-center gap-1.5">
|
||||
<User size={12} /> New Subcontractor
|
||||
</label>
|
||||
<select id="reassign-sub" value={selected} onChange={(e) => setSelected(e.target.value)} className={inputBase}>
|
||||
<option value="" disabled>Select a subcontractor…</option>
|
||||
{activeSubs.map(s => (
|
||||
<option key={s.id} value={s.id}>{s.name} — {s.tradeType}</option>
|
||||
))}
|
||||
</select>
|
||||
{activeSubs.length === 0 && (
|
||||
<p className="text-xs text-zinc-500 mt-1">No other active subcontractors available.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-5 py-4 border-t border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5 flex justify-end gap-2">
|
||||
<button type="button" onClick={onClose} disabled={submitting} className="px-4 py-2 text-sm font-bold rounded-xl border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors disabled:opacity-50">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="button" onClick={handleConfirm} disabled={!selected || submitting} className="inline-flex items-center gap-2 px-5 py-2 text-sm font-bold rounded-xl bg-purple-600 hover:bg-purple-500 text-white shadow-lg shadow-purple-500/20 transition-all disabled:opacity-50">
|
||||
{submitting && <Loader2 size={14} className="animate-spin" />}
|
||||
Reassign
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
);
|
||||
};
|
||||
|
||||
export default ReassignTaskModal;
|
||||
@@ -0,0 +1,132 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { X, ClipboardList, MapPin, Calendar, User, Building2, Camera } from 'lucide-react';
|
||||
|
||||
const PRIORITY_STYLES = {
|
||||
low: { label: 'Low', cls: 'bg-zinc-200 text-zinc-700 dark:bg-zinc-700 dark:text-zinc-300' },
|
||||
medium: { label: 'Medium', cls: 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400' },
|
||||
high: { label: 'High', cls: 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400' },
|
||||
};
|
||||
|
||||
const STATUS_STYLES = {
|
||||
Assigned: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400',
|
||||
'In Progress': 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400',
|
||||
Completed: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400',
|
||||
Cancelled: 'bg-zinc-200 text-zinc-600 dark:bg-zinc-700 dark:text-zinc-300',
|
||||
};
|
||||
|
||||
const formatDate = (iso) => {
|
||||
if (!iso) return '—';
|
||||
try { return new Date(iso).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); }
|
||||
catch { return iso; }
|
||||
};
|
||||
|
||||
const TaskViewModal = ({ isOpen, onClose, task }) => {
|
||||
useEffect(() => {
|
||||
const handler = (e) => { if (e.key === 'Escape') onClose(); };
|
||||
if (isOpen) window.addEventListener('keydown', handler);
|
||||
return () => window.removeEventListener('keydown', handler);
|
||||
}, [isOpen, onClose]);
|
||||
|
||||
if (!isOpen || !task) return null;
|
||||
|
||||
const priority = PRIORITY_STYLES[task.priority] || PRIORITY_STYLES.medium;
|
||||
|
||||
return createPortal(
|
||||
<div className="fixed inset-0 z-[9999] flex items-end sm:items-center justify-center sm:p-6" role="dialog" aria-modal="true">
|
||||
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
|
||||
<div className="relative w-full sm:max-w-2xl h-[90dvh] sm:h-auto sm:max-h-[88vh] bg-white dark:bg-[#121214] rounded-t-2xl sm:rounded-2xl shadow-2xl border border-zinc-200 dark:border-white/10 overflow-hidden flex flex-col animate-in slide-in-from-bottom-10 duration-200">
|
||||
<div className="px-5 sm:px-6 py-4 sm:py-5 border-b border-zinc-200 dark:border-white/10 flex items-center justify-between bg-zinc-50/50 dark:bg-white/5">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div className="p-2 rounded-xl bg-blue-500/10 text-blue-500 shrink-0">
|
||||
<ClipboardList size={20} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h2 className="text-base sm:text-lg font-bold text-zinc-900 dark:text-white uppercase tracking-wider truncate">Task Details</h2>
|
||||
<p className="text-[11px] text-zinc-500 font-mono mt-0.5 truncate">{task.id}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={onClose} className="p-2 rounded-lg bg-zinc-100 dark:bg-white/10 text-zinc-500 hover:text-red-500 transition-colors">
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-5 sm:px-6 py-5 space-y-5 custom-scrollbar">
|
||||
{/* Title + badges */}
|
||||
<div>
|
||||
<h3 className="text-xl sm:text-2xl font-bold text-zinc-900 dark:text-white">{task.title}</h3>
|
||||
<div className="flex flex-wrap items-center gap-2 mt-2">
|
||||
<span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide ${STATUS_STYLES[task.status] || STATUS_STYLES.Assigned}`}>
|
||||
{task.status}
|
||||
</span>
|
||||
<span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide ${priority.cls}`}>
|
||||
{priority.label} priority
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Meta grid */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<Meta icon={User} label="Subcontractor" value={task.subcontractorName} />
|
||||
<Meta icon={Building2} label="Assigned By" value={`${task.assignedByName} · ${task.companyName}`} />
|
||||
<Meta icon={MapPin} label="Location" value={task.location} />
|
||||
<Meta icon={Calendar} label="Due Date" value={formatDate(task.dueDate)} />
|
||||
<Meta icon={Calendar} label="Created" value={formatDate(task.createdAt)} />
|
||||
<Meta icon={Calendar} label="Last Updated" value={formatDate(task.updatedAt)} />
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
{task.description && (
|
||||
<div className="p-4 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/10">
|
||||
<h4 className="text-xs font-bold uppercase tracking-wider text-zinc-500 mb-2">Description</h4>
|
||||
<p className="text-sm text-zinc-700 dark:text-zinc-300 whitespace-pre-line">{task.description}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Photos */}
|
||||
<div>
|
||||
<h4 className="text-xs font-bold uppercase tracking-wider text-zinc-500 mb-2 flex items-center gap-1.5">
|
||||
<Camera size={12} /> Photos ({task.photos?.length || 0})
|
||||
</h4>
|
||||
{(!task.photos || task.photos.length === 0) ? (
|
||||
<p className="text-xs text-zinc-500 italic">No photos attached.</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
|
||||
{task.photos.map((p) => (
|
||||
<div key={p.id} className="rounded-xl overflow-hidden border border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5">
|
||||
<div className="aspect-square bg-zinc-200 dark:bg-zinc-800">
|
||||
<img src={p.url} alt={p.name || 'Task photo'} className="w-full h-full object-cover" />
|
||||
</div>
|
||||
{p.annotation && (
|
||||
<div className="p-2 text-[11px] font-semibold text-zinc-700 dark:text-zinc-300">
|
||||
{p.annotation}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-5 sm:px-6 py-4 border-t border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5 flex justify-end">
|
||||
<button onClick={onClose} className="px-5 py-2 text-sm font-bold rounded-xl border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
);
|
||||
};
|
||||
|
||||
const Meta = ({ icon: MetaIcon, label, value }) => (
|
||||
<div className="p-3 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/10">
|
||||
<div className="text-[10px] font-bold uppercase tracking-wider text-zinc-500 flex items-center gap-1.5 mb-1">
|
||||
<MetaIcon size={12} /> {label}
|
||||
</div>
|
||||
<div className="text-sm font-semibold text-zinc-900 dark:text-white">{value || '—'}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default TaskViewModal;
|
||||
Reference in New Issue
Block a user