T024: add function_type and group start/end dates to function groups UI

frontend/src/components/FunctionGroupEditor.tsx

@@ -17,12 +17,15 @@ interface FunctionGroupItem {
   name: string;
   project_id: string;
   sort_order: number;
+  start_date: string | null;
+  end_date: string | null;
 }
 
 interface FunctionItem {
   id: string;
   name: string;
   function_group_id: string;
+  function_type: string;
   quantity: number;
   daily_costs: number;
   total_costs: number;
@@ -49,18 +52,24 @@ export default function FunctionGroupEditor({
   const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
   const [editingGroupId, setEditingGroupId] = useState<string | null>(null);
   const [editingGroupName, setEditingGroupName] = useState('');
+  const [editingGroupStartDate, setEditingGroupStartDate] = useState('');
+  const [editingGroupEndDate, setEditingGroupEndDate] = useState('');
   const [editingFuncId, setEditingFuncId] = useState<string | null>(null);
   const [editingFuncData, setEditingFuncData] = useState<{
     name: string;
+    function_type: string;
     quantity: number;
     daily_costs: number;
     total_costs: number;
   } | null>(null);
   const [newGroupName, setNewGroupName] = useState('');
+  const [newGroupStartDate, setNewGroupStartDate] = useState('');
+  const [newGroupEndDate, setNewGroupEndDate] = useState('');
   const [showNewGroup, setShowNewGroup] = useState(false);
   const [newFuncMap, setNewFuncMap] = useState<Record<string, boolean>>({});
   const [newFuncData, setNewFuncData] = useState<Record<string, {
     name: string;
+    function_type: string;
     quantity: number;
     daily_costs: number;
     total_costs: number;
@@ -82,11 +91,15 @@ export default function FunctionGroupEditor({
   const startEditGroup = (fg: FunctionGroupItem) => {
     setEditingGroupId(fg.id);
     setEditingGroupName(fg.name);
+    setEditingGroupStartDate(fg.start_date ? fg.start_date.split('T')[0] : '');
+    setEditingGroupEndDate(fg.end_date ? fg.end_date.split('T')[0] : '');
   };
 
   const cancelEditGroup = () => {
     setEditingGroupId(null);
     setEditingGroupName('');
+    setEditingGroupStartDate('');
+    setEditingGroupEndDate('');
   };
 
   const saveGroup = async (fgId: string) => {
@@ -95,6 +108,8 @@ export default function FunctionGroupEditor({
     try {
       await api.put(`/projects/${projectId}/function-groups/${fgId}`, {
         name: editingGroupName.trim(),
+        start_date: editingGroupStartDate || null,
+        end_date: editingGroupEndDate || null,
       });
       setEditingGroupId(null);
       onReload();
@@ -128,6 +143,7 @@ export default function FunctionGroupEditor({
     setEditingFuncId(fn.id);
     setEditingFuncData({
       name: fn.name,
+      function_type: fn.function_type || 'crew',
       quantity: fn.quantity,
       daily_costs: fn.daily_costs,
       total_costs: fn.total_costs,
@@ -145,6 +161,7 @@ export default function FunctionGroupEditor({
     try {
       await api.put(`/projects/${projectId}/function-groups/${fgId}/functions/${funcId}`, {
         name: editingFuncData.name.trim(),
+        function_type: editingFuncData.function_type,
         quantity: editingFuncData.quantity,
         daily_costs: editingFuncData.daily_costs,
         total_costs: editingFuncData.total_costs,
@@ -179,8 +196,12 @@ export default function FunctionGroupEditor({
       await api.post(`/projects/${projectId}/function-groups`, {
         name: newGroupName.trim(),
         sort_order: functionGroups.length,
+        start_date: newGroupStartDate || null,
+        end_date: newGroupEndDate || null,
       });
       setNewGroupName('');
+      setNewGroupStartDate('');
+      setNewGroupEndDate('');
       setShowNewGroup(false);
       onReload();
     } catch (err: any) {
@@ -194,7 +215,7 @@ export default function FunctionGroupEditor({
     setNewFuncMap(prev => ({ ...prev, [fgId]: true }));
     setNewFuncData(prev => ({
       ...prev,
-      [fgId]: { name: '', quantity: 1, daily_costs: 0, total_costs: 0 },
+      [fgId]: { name: '', function_type: 'crew', quantity: 1, daily_costs: 0, total_costs: 0 },
     }));
   };
 
@@ -218,6 +239,7 @@ export default function FunctionGroupEditor({
     try {
       await api.post(`/projects/${projectId}/function-groups/${fgId}/functions`, {
         name: data.name.trim(),
+        function_type: data.function_type,
         quantity: data.quantity,
         daily_costs: data.daily_costs,
         total_costs: data.total_costs,
@@ -241,40 +263,58 @@ export default function FunctionGroupEditor({
       {canWrite && (
         <div className="flex justify-end">
           {showNewGroup ? (
-            <div className="flex items-center gap-2 w-full">
-              <input
-                type="text"
-                value={newGroupName}
-                onChange={e => setNewGroupName(e.target.value)}
-                placeholder="New function group name..."
-                className={inputClass}
-                autoFocus
-                onKeyDown={e => {
-                  if (e.key === 'Enter') addNewGroup();
-                  if (e.key === 'Escape') {
+            <div className="flex flex-col gap-2 w-full">
+              <div className="flex items-center gap-2">
+                <input
+                  type="text"
+                  value={newGroupName}
+                  onChange={e => setNewGroupName(e.target.value)}
+                  placeholder="New function group name..."
+                  className={inputClass}
+                  autoFocus
+                  onKeyDown={e => {
+                    if (e.key === 'Enter') addNewGroup();
+                    if (e.key === 'Escape') {
+                      setShowNewGroup(false);
+                      setNewGroupName('');
+                    }
+                  }}
+                />
+                <input
+                  type="date"
+                  value={newGroupStartDate}
+                  onChange={e => setNewGroupStartDate(e.target.value)}
+                  className={inputClass + ' w-auto'}
+                  title="Start date"
+                />
+                <input
+                  type="date"
+                  value={newGroupEndDate}
+                  onChange={e => setNewGroupEndDate(e.target.value)}
+                  className={inputClass + ' w-auto'}
+                  title="End date"
+                />
+                <button
+                  onClick={addNewGroup}
+                  disabled={saving || !newGroupName.trim()}
+                  className="flex items-center gap-1 px-3 py-1.5 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors text-xs disabled:opacity-50"
+                >
+                  <Save size={14} />
+                  Save
+                </button>
+                <button
+                  onClick={() => {
                     setShowNewGroup(false);
                     setNewGroupName('');
-                  }
-                }}
-              />
-              <button
-                onClick={addNewGroup}
-                disabled={saving || !newGroupName.trim()}
-                className="flex items-center gap-1 px-3 py-1.5 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors text-xs disabled:opacity-50"
-              >
-                <Save size={14} />
-                Save
-              </button>
-              <button
-                onClick={() => {
-                  setShowNewGroup(false);
-                  setNewGroupName('');
-                }}
-                className="flex items-center gap-1 px-3 py-1.5 bg-surface border border-border rounded-lg hover:bg-gray-50 text-xs"
-              >
-                <X size={14} />
-                Cancel
-              </button>
+                    setNewGroupStartDate('');
+                    setNewGroupEndDate('');
+                  }}
+                  className="flex items-center gap-1 px-3 py-1.5 bg-surface border border-border rounded-lg hover:bg-gray-50 text-xs"
+                >
+                  <X size={14} />
+                  Cancel
+                </button>
+              </div>
             </div>
           ) : (
             <button
@@ -311,7 +351,7 @@ export default function FunctionGroupEditor({
               <FolderOpen size={18} className="text-primary flex-shrink-0" />
 
               {isEditingGroup ? (
-                <div className="flex items-center gap-2 flex-1">
+                <div className="flex items-center gap-2 flex-1 flex-wrap">
                   <input
                     type="text"
                     value={editingGroupName}
@@ -323,6 +363,20 @@ export default function FunctionGroupEditor({
                       if (e.key === 'Escape') cancelEditGroup();
                     }}
                   />
+                  <input
+                    type="date"
+                    value={editingGroupStartDate}
+                    onChange={e => setEditingGroupStartDate(e.target.value)}
+                    className={inputClass + ' w-auto'}
+                    title="Start date"
+                  />
+                  <input
+                    type="date"
+                    value={editingGroupEndDate}
+                    onChange={e => setEditingGroupEndDate(e.target.value)}
+                    className={inputClass + ' w-auto'}
+                    title="End date"
+                  />
                   <button
                     onClick={() => saveGroup(fg.id)}
                     disabled={saving || !editingGroupName.trim()}
@@ -338,7 +392,16 @@ export default function FunctionGroupEditor({
                   </button>
                 </div>
               ) : (
-                <span className="font-medium text-text-primary text-sm flex-1">{fg.name}</span>
+                <>
+                  <span className="font-medium text-text-primary text-sm flex-1">{fg.name}</span>
+                  {(fg.start_date || fg.end_date) && (
+                    <span className="text-xs text-text-secondary ml-2">
+                      {fg.start_date && new Date(fg.start_date).toLocaleDateString('de-DE', {day:'2-digit', month:'2-digit', year:'numeric'})}
+                      {fg.start_date && fg.end_date && ' – '}
+                      {fg.end_date && new Date(fg.end_date).toLocaleDateString('de-DE', {day:'2-digit', month:'2-digit', year:'numeric'})}
+                    </span>
+                  )}
+                </>
               )}
 
               <span className="text-xs text-text-secondary">Sort: {fg.sort_order}</span>
@@ -384,7 +447,7 @@ export default function FunctionGroupEditor({
                           className="px-4 py-3 flex items-center justify-between hover:bg-gray-50"
                         >
                           {isEditingFunc && editingFuncData ? (
-                            <div className="flex-1 grid grid-cols-4 gap-2 items-end">
+                            <div className="flex-1 grid grid-cols-5 gap-2 items-end">
                               <div>
                                 <label className={labelClass}>Name</label>
                                 <input
@@ -403,6 +466,22 @@ export default function FunctionGroupEditor({
                                   }}
                                 />
                               </div>
+                              <div>
+                                <label className={labelClass}>Type</label>
+                                <select
+                                  value={editingFuncData.function_type}
+                                  onChange={e =>
+                                    setEditingFuncData(prev =>
+                                      prev ? { ...prev, function_type: e.target.value } : prev
+                                    )
+                                  }
+                                  className={inputClass}
+                                >
+                                  <option value="crew">Crew</option>
+                                  <option value="equipment">Equipment</option>
+                                  <option value="transport">Transport</option>
+                                </select>
+                              </div>
                               <div>
                                 <label className={labelClass}>Qty</label>
                                 <input
@@ -457,7 +536,7 @@ export default function FunctionGroupEditor({
                                   className={inputClass}
                                 />
                               </div>
-                              <div className="col-span-4 flex items-center gap-2 mt-1">
+                              <div className="col-span-5 flex items-center gap-2 mt-1">
                                 <button
                                   onClick={() => saveFunc(fg.id, fn.id)}
                                   disabled={saving || !editingFuncData.name.trim()}
@@ -479,10 +558,15 @@ export default function FunctionGroupEditor({
                             <>
                               <div className="flex items-center gap-3 flex-1">
                                 <ListChecks size={16} className="text-text-secondary flex-shrink-0" />
-                                <div className="grid grid-cols-4 gap-4 flex-1">
+                                <div className="grid grid-cols-5 gap-4 flex-1">
                                   <div>
                                     <p className="text-sm text-text-primary">{fn.name}</p>
                                   </div>
+                                  <div>
+                                    <span className="inline-block px-2 py-0.5 text-xs rounded-full bg-blue-100 text-blue-800">
+                                      {fn.function_type}
+                                    </span>
+                                  </div>
                                   <div>
                                     <p className="text-xs text-text-secondary">
                                       Qty: {fn.quantity}
@@ -538,7 +622,7 @@ export default function FunctionGroupEditor({
                 {/* Add new function form */}
                 {isAddingFunc && (
                   <div className="px-4 py-3 border-t border-border bg-gray-50">
-                    <div className="grid grid-cols-4 gap-2 items-end mb-2">
+                    <div className="grid grid-cols-5 gap-2 items-end mb-2">
                       <div>
                         <label className={labelClass}>Name</label>
                         <input
@@ -558,6 +642,26 @@ export default function FunctionGroupEditor({
                           autoFocus
                         />
                       </div>
+                      <div>
+                        <label className={labelClass}>Type</label>
+                        <select
+                          value={newFuncData[fg.id]?.function_type || 'crew'}
+                          onChange={e =>
+                            setNewFuncData(prev => ({
+                              ...prev,
+                              [fg.id]: {
+                                ...prev[fg.id],
+                                function_type: e.target.value,
+                              },
+                            }))
+                          }
+                          className={inputClass}
+                        >
+                          <option value="crew">Crew</option>
+                          <option value="equipment">Equipment</option>
+                          <option value="transport">Transport</option>
+                        </select>
+                      </div>
                       <div>
                         <label className={labelClass}>Qty</label>
                         <input

frontend/src/pages/ProjectDetail.tsx

@@ -33,12 +33,15 @@ interface FunctionGroupItem {
   name: string;
   project_id: string;
   sort_order: number;
+  start_date: string | null;
+  end_date: string | null;
 }
 
 interface FunctionItem {
   id: string;
   name: string;
   function_group_id: string;
+  function_type: string;
   quantity: number;
   daily_costs: number;
   total_costs: number;