import React, { useState } from 'react'; import { Head, router } from '@inertiajs/react'; import AdminLayout from '@/Layouts/AdminLayout'; import { Plus, Search, GripVertical, Edit2, Trash2, Info, Wrench } from 'lucide-react'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, } from "@/components/ui/dialog"; export default function WorkerSkills({ skills }) { const [searchTerm, setSearchTerm] = useState(''); const [isDialogOpen, setIsDialogOpen] = useState(false); const [editingSkill, setEditingSkill] = useState(null); const [skillName, setSkillName] = useState(''); const [imageFile, setImageFile] = useState(null); const [error, setError] = useState(''); const handleOpenAdd = () => { setEditingSkill(null); setSkillName(''); setImageFile(null); setError(''); setIsDialogOpen(true); }; const handleOpenEdit = (skill) => { setEditingSkill(skill); setSkillName(skill.name); setImageFile(null); setError(''); setIsDialogOpen(true); }; const handleSubmit = (e) => { e.preventDefault(); if (!skillName.trim()) { setError('Skill name is required.'); return; } const formData = { name: skillName.trim() }; if (imageFile) { formData.image = imageFile; } if (editingSkill) { router.post(`/admin/master-data/skills/${editingSkill.id}/update`, formData, { onSuccess: () => { setIsDialogOpen(false); setImageFile(null); }, onError: (err) => { setError(err.name || 'Failed to update skill.'); } }); } else { router.post('/admin/master-data/skills', formData, { onSuccess: () => { setIsDialogOpen(false); setImageFile(null); }, onError: (err) => { setError(err.name || 'Failed to add skill.'); } }); } }; const handleDelete = (id) => { if (confirm('Are you sure you want to delete this skill? It will be removed from all associated worker profiles.')) { router.delete(`/admin/master-data/skills/${id}`); } }; const filteredSkills = skills.filter(skill => skill.name.toLowerCase().includes(searchTerm.toLowerCase()) ); return (

{/* Header Actions */}

setSearchTerm(e.target.value)} className="w-full pl-10 pr-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm font-medium focus:ring-4 focus:ring-teal-500/10 outline-none transition-all" />

{/* Skills Card */}

Worker Skills

Manage skills workers can choose for their profiles

Skill Name Worker Count Status Action {filteredSkills.length > 0 ? ( filteredSkills.map((skill) => (

{skill.image_url ? (

) : (

{skill.name.charAt(0)}

)} {skill.name}

{skill.worker_count} Workers

{skill.status}

)) ) : ( No skills match your search. )}

Tip: These skills are populated in the mobile application configuration so workers can select their specific expertise when setting up or updating their profiles.

{/* Skill Modal */} ); }