ebd476/bpmn-task-assigner-wizard
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>BPMN Task Assigner</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script src="https://unpkg.com/react@18/umd/react.development.js"></script>12 <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>13 <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>14</head>15<body class="bg-gray-100">16 <div id="root" class="min-h-screen flex items-center justify-center p-4"></div>17 18 <!-- React Modal Component -->19 <script type="text/babel" data-presets="react">20 const { useState } = React;21 22 function AssigneeModal() {23 const [isOpen, setIsOpen] = useState(false);24 const [assignee, setAssignee] = useState('');25 const [searchTerm, setSearchTerm] = useState('');26 const [users, setUsers] = useState([27 { id: 1, name: 'John Doe', email: 'john@example.com' },28 { id: 2, name: 'Jane Smith', email: 'jane@example.com' },29 { id: 3, name: 'Bob Johnson', email: 'bob@example.com' },30 { id: 4, name: 'Alice Williams', email: 'alice@example.com' },31 ]);32 33 const filteredUsers = users.filter(user =>34 user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||35 user.email.toLowerCase().includes(searchTerm.toLowerCase())36 );37 38 const handleAssign = (userId) => {39 const selectedUser = users.find(user => user.id === userId);40 setAssignee(selectedUser.name);41 setIsOpen(false);42 };43 44 return (45 <div className="w-full max-w-md">46 <button47 onClick={() => setIsOpen(true)}48 className="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-lg shadow-md transition duration-200 flex items-center justify-center"49 >50 <i data-feather="user-plus" className="mr-2"></i>51 {assignee || 'Assign Task'}52 </button>53 54 {isOpen && (55 <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">56 <div className="bg-white rounded-lg shadow-xl w-full max-w-md">57 <div className="p-6">58 <div className="flex justify-between items-center mb-4">59 <h3 className="text-lg font-semibold text-gray-800">Assign Task</h3>60 <button 61 onClick={() => setIsOpen(false)}62 className="text-gray-500 hover:text-gray-700"63 >64 <i data-feather="x"></i>65 </button>66 </div>67 68 <div className="mb-4 relative">69 <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">70 <i data-feather="search" className="text-gray-400"></i>71 </div>72 <input73 type="text"74 placeholder="Search users..."75 className="pl-10 w-full border border-gray-300 rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"76 value={searchTerm}77 onChange={(e) => setSearchTerm(e.target.value)}78 />79 </div>80 81 <div className="max-h-64 overflow-y-auto border rounded-lg">82 {filteredUsers.length > 0 ? (83 <ul className="divide-y">84 {filteredUsers.map(user => (85 <li key={user.id} className="p-3 hover:bg-gray-50 cursor-pointer">86 <div 87 className="flex items-center"88 onClick={() => handleAssign(user.id)}89 >90 <div className="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">91 <i data-feather="user" className="text-indigo-600"></i>92 </div>93 <div>94 <p className="font-medium text-gray-800">{user.name}</p>95 <p className="text-sm text-gray-500">{user.email}</p>96 </div>97 </div>98 </li>99 ))}100 </ul>101 ) : (102 <div className="p-4 text-center text-gray-500">103 No users found104 </div>105 )}106 </div>107 108 <div className="mt-4 flex justify-end">109 <button110 onClick={() => setIsOpen(false)}111 className="mr-2 px-4 py-2 text-gray-600 hover:text-gray-800"112 >113 Cancel114 </button>115 <button116 onClick={() => setIsOpen(false)}117 className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"118 >119 Assign120 </button>121 </div>122 </div>123 </div>124 </div>125 )}126 </div>127 );128 }129 130 function App() {131 return (132 <div className="bg-white p-8 rounded-xl shadow-md w-full max-w-lg">133 <h1 className="text-2xl font-bold text-gray-800 mb-6 flex items-center">134 <i data-feather="activity" className="mr-2 text-indigo-600"></i>135 BPMN Task Assignment136 </h1>137 <p className="text-gray-600 mb-6">Select a user to assign this task in your BPMN workflow.</p>138 <AssigneeModal />139 </div>140 );141 }142 143 const root = ReactDOM.createRoot(document.getElementById('root'));144 root.render(<App />);145 </script>146 147 <script>148 feather.replace();149 </script>150<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>151</body>152</html>