@hed-hog/operations 0.0.332 → 0.0.338

package/hedhog/frontend/app/_components/collaborator-timesheets-tab.tsx.ejs

@@ -82,12 +82,12 @@ export function CollaboratorTimesheetsTab({
     if (!timesheet.approvalId) return;
     setApprovingId(timesheet.id);
     try {
-      await mutateOperations(
-        request,
-        `/operations/approvals/${timesheet.approvalId}/approve`,
-        'POST',
-        {}
-      );
+      await mutateOperations(
+        request,
+        `/operations/approvals/${timesheet.approvalId}/approve`,
+        'POST',
+        {}
+      );
       void refetch();
     } finally {
       setApprovingId(null);

package/hedhog/frontend/app/_components/contract-content-editor.tsx.ejs

@@ -0,0 +1,258 @@
+'use client';
+
+import { RichTextEditor } from '@/components/rich-text-editor';
+import { Button } from '@/components/ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Textarea } from '@/components/ui/textarea';
+import { useApp } from '@hed-hog/next-app-provider';
+import { LoaderCircle, Sparkles } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import { mutateOperations } from '../_lib/api';
+import { SectionCard } from './section-card';
+
+type ContractContentEditorProps = {
+  value: string;
+  onChange: (value: string) => void;
+  editorTitle: string;
+  editorDescription: string;
+  previewTitle: string;
+  previewDescription: string;
+  previewFallbackHtml?: string;
+  promptContext?: Record<string, string | number | boolean | null | undefined>;
+  compact?: boolean;
+  descriptionMode?: 'inline' | 'tooltip';
+  layout?: 'split' | 'tabs';
+  showPreview?: boolean;
+  chrome?: 'card' | 'plain';
+};
+
+export function ContractContentEditor({
+  value,
+  onChange,
+  editorTitle,
+  editorDescription,
+  previewTitle,
+  previewDescription,
+  previewFallbackHtml,
+  promptContext,
+  compact = false,
+  descriptionMode = 'inline',
+  layout = 'split',
+  showPreview = true,
+  chrome = 'card',
+}: ContractContentEditorProps) {
+  const t = useTranslations('operations.ContractContentEditor');
+  const { request, showToastHandler, getSettingValue } = useApp();
+  const [prompt, setPrompt] = useState('');
+  const [isGenerating, setIsGenerating] = useState(false);
+
+  const hasOpenAi = Boolean(getSettingValue('ai-openai-api-key-enabled'));
+  const hasGemini = Boolean(getSettingValue('ai-gemini-api-key-enabled'));
+  const provider = hasOpenAi ? 'openai' : hasGemini ? 'gemini' : null;
+  const providerLabel = provider === 'openai' ? 'OpenAI' : 'Gemini';
+
+  const promptContextSummary = useMemo(
+    () =>
+      Object.entries(promptContext ?? {})
+        .filter(
+          ([, rawValue]) =>
+            rawValue !== null &&
+            rawValue !== undefined &&
+            String(rawValue).trim()
+        )
+        .map(([key, rawValue]) => `${key}: ${String(rawValue)}`)
+        .join('\n'),
+    [promptContext]
+  );
+
+  const fillSuggestedPrompt = () => {
+    setPrompt(
+      t('suggestedPrompt', {
+        subject: String(
+          promptContext?.name ||
+            promptContext?.project_name ||
+            promptContext?.client_name ||
+            'contrato'
+        ),
+      })
+    );
+  };
+
+  const generateWithAi = async () => {
+    if (!provider) {
+      showToastHandler?.('error', t('messages.missingConfiguration'));
+      return;
+    }
+
+    const trimmedPrompt = prompt.trim();
+    if (!trimmedPrompt) {
+      showToastHandler?.('error', t('messages.missingPrompt'));
+      return;
+    }
+
+    setIsGenerating(true);
+
+    try {
+      const response = await mutateOperations<{ content?: string }>(
+        request,
+        '/ai/chat',
+        'POST',
+        {
+          provider,
+          message: trimmedPrompt,
+          systemPrompt: [
+            'You are drafting professional business contract content for a back-office operations system.',
+            'Return ONLY clean HTML suitable for a rich text editor preview.',
+            'Do not include Markdown fences, explanations, or commentary.',
+            'When useful, keep placeholders like {{client_name}}, {{project_name}}, {{project_code}}, {{start_date}}, {{end_date}}, {{budget_amount}}, and {{monthly_hour_cap}} in the generated content.',
+            'Prefer short sections, headings, bullet points, and concise legal-style language.',
+            value?.trim()
+              ? `Current HTML content to improve or rewrite:\n${value}`
+              : 'There is no current contract content yet.',
+            promptContextSummary
+              ? `Context:\n${promptContextSummary}`
+              : 'No extra context was provided.',
+          ].join('\n\n'),
+        }
+      );
+
+      const generatedHtml = String(response?.content ?? '').trim();
+      if (!generatedHtml) {
+        throw new Error('Empty AI response');
+      }
+
+      onChange(generatedHtml);
+      showToastHandler?.(
+        'success',
+        t('messages.generateSuccess', { provider: providerLabel })
+      );
+    } catch {
+      showToastHandler?.('error', t('messages.generateError'));
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const renderSection = (
+    title: string,
+    description: string,
+    content: React.ReactNode
+  ) => {
+    if (chrome === 'plain') {
+      return (
+        <div className="space-y-3">
+          <div className="space-y-1">
+            <h3 className="text-lg font-semibold">{title}</h3>
+            <p className="text-sm text-muted-foreground">{description}</p>
+          </div>
+          {content}
+        </div>
+      );
+    }
+
+    return (
+      <SectionCard
+        title={title}
+        description={description}
+        compact={compact}
+        descriptionMode={descriptionMode}
+      >
+        {content}
+      </SectionCard>
+    );
+  };
+
+  const editorSection = renderSection(
+    editorTitle,
+    editorDescription,
+    <RichTextEditor value={value} onChange={onChange} />
+  );
+
+  const previewSection = renderSection(
+    previewTitle,
+    previewDescription,
+    <div
+      className="prose prose-sm max-w-none rounded-lg border p-4"
+      dangerouslySetInnerHTML={{
+        __html: value || previewFallbackHtml || `<p>${t('emptyPreview')}</p>`,
+      }}
+    />
+  );
+
+  return (
+    <div className="space-y-4">
+      {provider ? (
+        <div className="rounded-lg border border-dashed px-3 py-3">
+          <div className="flex flex-wrap items-start justify-between gap-3">
+            <div className="space-y-1">
+              <div className="flex items-center gap-2 text-sm font-medium">
+                <Sparkles className="size-4 text-primary" />
+                <span>{t('assistantTitle')}</span>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                {t('assistantDescription', { provider: providerLabel })}
+              </p>
+            </div>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="cursor-pointer"
+              onClick={fillSuggestedPrompt}
+            >
+              {t('actions.useSuggestion')}
+            </Button>
+          </div>
+
+          <div className="mt-3 space-y-2">
+            <Textarea
+              rows={compact ? 2 : 3}
+              value={prompt}
+              placeholder={t('promptPlaceholder')}
+              onChange={(event) => setPrompt(event.target.value)}
+            />
+            <div className="flex flex-wrap gap-2">
+              <Button
+                type="button"
+                size="sm"
+                className="cursor-pointer"
+                disabled={isGenerating}
+                onClick={() => void generateWithAi()}
+              >
+                {isGenerating ? (
+                  <LoaderCircle className="size-4 animate-spin" />
+                ) : (
+                  <Sparkles className="size-4" />
+                )}
+                {t('actions.generate')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      {!showPreview ? (
+        editorSection
+      ) : layout === 'tabs' ? (
+        <Tabs defaultValue="editor" className="w-full">
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="editor">{editorTitle}</TabsTrigger>
+            <TabsTrigger value="preview">{previewTitle}</TabsTrigger>
+          </TabsList>
+          <TabsContent value="editor" className="mt-4">
+            {editorSection}
+          </TabsContent>
+          <TabsContent value="preview" className="mt-4">
+            {previewSection}
+          </TabsContent>
+        </Tabs>
+      ) : (
+        <div className="grid gap-4 xl:grid-cols-2">
+          {editorSection}
+          {previewSection}
+        </div>
+      )}
+    </div>
+  );
+}

package/hedhog/frontend/app/_components/my-project-summary-screen.tsx.ejs

@@ -1,7 +1,6 @@
 'use client';
 
 import { EmptyState, Page } from '@/components/entity-list';
-import { RichTextEditor } from '@/components/rich-text-editor';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import {
@@ -37,6 +36,7 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { RichTextEditor } from '@/components/rich-text-editor';
 import {
   closestCenter,
   DndContext,
@@ -85,8 +85,8 @@ import { OperationsHeader } from './operations-header';
 import { SectionCard } from './section-card';
 import { StatusBadge } from './status-badge';
 import {
-  TaskCommentsSection,
   TaskDetailSheet,
+  TaskCommentsSection,
   type TaskDetailSheetData,
 } from './task-detail-sheet';
 import { TaskFileAttachments } from './task-file-attachments';
@@ -834,7 +834,7 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
                 {(isOver) => (
                   <div
                     className={[
-                      'flex min-h-48 max-h-160 flex-col rounded-3xl border bg-linear-to-b p-3 transition-all',
+                      'flex min-h-128 flex-col overflow-hidden rounded-3xl border bg-linear-to-b p-3 transition-all',
                       getColumnClassName(column.id),
                       isOver
                         ? 'border-primary shadow-lg ring-2 ring-primary/15'
@@ -870,7 +870,7 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
                       </div>
                     </div>
 
-                    <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto pb-1 pr-0.5">
+                    <div className="flex flex-1 flex-col gap-2">
                       <AnimatePresence initial={false}>
                         {taskColumns[column.id].map((task) => {
                           const tags = getTaskTags(task);
@@ -1309,6 +1309,7 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
         }}
       />
 
+
       <Sheet
         open={taskFormOpen}
         onOpenChange={(open) => {

package/hedhog/frontend/app/_components/person-select-with-create.tsx.ejs

@@ -0,0 +1 @@
+export { PersonPicker as PersonSelectWithCreate } from '../../contact/_components/person-picker';

package/hedhog/frontend/app/_components/project-assignments-tab.tsx.ejs

@@ -10,17 +10,9 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
-import { Switch } from '@/components/ui/switch';
-import {
-  Check,
-  Loader2,
-  Pencil,
-  Plus,
-  SlidersHorizontal,
-  X,
-} from 'lucide-react';
+import { Check, Loader2, Pencil, Plus, X } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { fetchOperations, mutateOperations } from '../_lib/api';
 import type {
   OperationsCollaboratorDetails,
@@ -37,7 +29,6 @@ import { ProjectFormScreen } from './project-form-screen';
 import { StatusBadge } from './status-badge';
 
 const PAGE_SIZE = 10;
-const LS_AUTO_REBALANCE_KEY = 'operations.projectAllocation.autoRebalance';
 
 type AssignmentEditState = {
   roleLabel: string;
@@ -62,26 +53,14 @@ export function ProjectAssignmentsTab({
 }: ProjectAssignmentsTabProps) {
   const commonT = useTranslations('operations.Common');
   const detailsT = useTranslations('operations.CollaboratorDetailsPage');
-  const allocT = useTranslations(
-    'operations.CollaboratorFormPage.projectAllocation'
-  );
 
   const [page, setPage] = useState(0);
   const [editingId, setEditingId] = useState<number | null>(null);
   const [editState, setEditState] = useState<AssignmentEditState | null>(null);
   const [saving, setSaving] = useState(false);
-  const [distributing, setDistributing] = useState(false);
   const [adding, setAdding] = useState(false);
   const [createSheetOpen, setCreateSheetOpen] = useState(false);
   const [pickerKey, setPickerKey] = useState(0);
-  const [autoRebalance, setAutoRebalance] = useState(() => {
-    if (typeof window === 'undefined') return false;
-    return localStorage.getItem(LS_AUTO_REBALANCE_KEY) === 'true';
-  });
-
-  useEffect(() => {
-    localStorage.setItem(LS_AUTO_REBALANCE_KEY, String(autoRebalance));
-  }, [autoRebalance]);
 
   const projects = collaborator?.assignedProjects ?? [];
   const assignedIds = new Set(projects.map((p) => p.id));
@@ -91,29 +70,6 @@ export function ProjectAssignmentsTab({
     (page + 1) * PAGE_SIZE
   );
 
-  const savedTotal = projects.reduce(
-    (sum, p) => sum + (p.allocationPercent ?? 0),
-    0
-  );
-
-  // When editing, show projected total
-  const editingProject =
-    editingId != null ? projects.find((p) => p.id === editingId) : null;
-  const projectedTotal =
-    editState && editingProject
-      ? projects.reduce((sum, p) => {
-          if (p.id === editingId) {
-            return sum + (parseNumberInput(editState.allocationPercent) ?? 0);
-          }
-          return sum + (p.allocationPercent ?? 0);
-        }, 0)
-      : savedTotal;
-
-  const displayTotal = editState ? projectedTotal : savedTotal;
-
-  const allocationWarning =
-    displayTotal < 100 ? 'idle' : displayTotal > 100 ? 'overloaded' : null;
-
   const startEditing = (
     project: OperationsCollaboratorDetails['assignedProjects'][number]
   ) => {
@@ -142,8 +98,6 @@ export function ProjectAssignmentsTab({
     if (!collaborator || !editState) return;
     setSaving(true);
     try {
-      const newPercent = parseNumberInput(editState.allocationPercent);
-
       await mutateOperations(
         request,
         `/operations/collaborators/${collaborator.id}/projects/${projectId}`,
@@ -151,66 +105,11 @@ export function ProjectAssignmentsTab({
         {
           roleLabel: trimToNull(editState.roleLabel),
           weeklyHours: parseNumberInput(editState.weeklyHours),
-          allocationPercent: newPercent,
+          allocationPercent: parseNumberInput(editState.allocationPercent),
           startDate: trimToNull(editState.startDate),
           endDate: trimToNull(editState.endDate),
         }
       );
-
-      // Auto-rebalance: distribute remaining % among other projects
-      if (autoRebalance && newPercent != null) {
-        const others = projects.filter((p) => p.id !== projectId);
-        if (others.length > 0) {
-          const remaining = 100 - newPercent;
-          const othersTotal = others.reduce(
-            (sum, p) => sum + (p.allocationPercent ?? 0),
-            0
-          );
-          await Promise.all(
-            others.map((p, idx) => {
-              let newValue: number;
-              if (othersTotal > 0) {
-                newValue =
-                  Math.round(
-                    ((p.allocationPercent ?? 0) / othersTotal) * remaining * 100
-                  ) / 100;
-              } else {
-                newValue = Math.round((remaining / others.length) * 100) / 100;
-              }
-              // Ensure the last item corrects rounding drift
-              if (idx === others.length - 1) {
-                const alreadyAssigned = others
-                  .slice(0, idx)
-                  .reduce((sum, op) => {
-                    if (othersTotal > 0) {
-                      return (
-                        sum +
-                        Math.round(
-                          ((op.allocationPercent ?? 0) / othersTotal) *
-                            remaining *
-                            100
-                        ) /
-                          100
-                      );
-                    }
-                    return (
-                      sum + Math.round((remaining / others.length) * 100) / 100
-                    );
-                  }, 0);
-                newValue =
-                  Math.round((remaining - alreadyAssigned) * 100) / 100;
-              }
-              return mutateOperations(
-                request,
-                `/operations/collaborators/${collaborator.id}/projects/${p.id}`,
-                'PATCH',
-                { allocationPercent: newValue }
-              );
-            })
-          );
-        }
-      }
-
       setEditingId(null);
       setEditState(null);
       onUpdated();
@@ -221,37 +120,6 @@ export function ProjectAssignmentsTab({
     }
   };
 
-  const distributeEqually = async () => {
-    if (!collaborator) return;
-    const activeProjects = projects.filter((p) => p.status === 'active');
-    const targetProjects =
-      activeProjects.length > 0 ? activeProjects : projects;
-    if (targetProjects.length === 0) return;
-    setDistributing(true);
-    try {
-      const equalShare = Math.floor((100 / targetProjects.length) * 100) / 100;
-      const remainder =
-        Math.round((100 - equalShare * (targetProjects.length - 1)) * 100) /
-        100;
-      await Promise.all(
-        targetProjects.map((p, idx) =>
-          mutateOperations(
-            request,
-            `/operations/collaborators/${collaborator.id}/projects/${p.id}`,
-            'PATCH',
-            {
-              allocationPercent:
-                idx === targetProjects.length - 1 ? remainder : equalShare,
-            }
-          )
-        )
-      );
-      onUpdated();
-    } finally {
-      setDistributing(false);
-    }
-  };
-
   const assignProject = async (projectId: number) => {
     if (!collaborator) return;
     setAdding(true);
@@ -271,72 +139,6 @@ export function ProjectAssignmentsTab({
 
   return (
     <div className="space-y-3">
-      {/* Allocation summary bar */}
-      {projects.length > 0 && (
-        <div className="flex flex-wrap items-center justify-between gap-2 rounded-lg border px-3 py-2">
-          <div className="flex items-center gap-3">
-            <span className="text-xs text-muted-foreground">
-              {allocT('total')}:
-            </span>
-            <span
-              className={`text-sm font-semibold ${
-                allocationWarning === 'overloaded'
-                  ? 'text-destructive'
-                  : allocationWarning === 'idle'
-                    ? 'text-amber-600 dark:text-amber-400'
-                    : 'text-green-600 dark:text-green-400'
-              }`}
-            >
-              {displayTotal}%
-            </span>
-            {allocationWarning === 'overloaded' && (
-              <span className="rounded-full bg-destructive/10 px-2 py-0.5 text-[10px] font-medium text-destructive">
-                {allocT('overloaded')} +
-                {Math.round((displayTotal - 100) * 100) / 100}%
-              </span>
-            )}
-            {allocationWarning === 'idle' && (
-              <span className="rounded-full bg-amber-500/10 px-2 py-0.5 text-[10px] font-medium text-amber-600 dark:text-amber-400">
-                {allocT('idle')} -{Math.round((100 - displayTotal) * 100) / 100}
-                %
-              </span>
-            )}
-          </div>
-          {!disabled && (
-            <div className="flex items-center gap-3">
-              {/* Auto-rebalance toggle */}
-              <div className="flex items-center gap-1.5">
-                <SlidersHorizontal className="size-3 text-muted-foreground" />
-                <span className="text-[11px] text-muted-foreground">
-                  {allocT('autoRebalance')}
-                </span>
-                <Switch
-                  checked={autoRebalance}
-                  onCheckedChange={setAutoRebalance}
-                  className="scale-75"
-                />
-              </div>
-              {/* Distribute equally */}
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="h-6 px-2 text-[11px]"
-                disabled={distributing || projects.length === 0}
-                onClick={() => void distributeEqually()}
-              >
-                {distributing ? (
-                  <Loader2 className="mr-1 size-3 animate-spin" />
-                ) : null}
-                {distributing
-                  ? allocT('distributing')
-                  : allocT('distributeEqually')}
-              </Button>
-            </div>
-          )}
-        </div>
-      )}
-
       {!disabled ? (
         <div className="flex items-center gap-2">
           <div className="min-w-0 flex-1">
@@ -359,7 +161,8 @@ export function ProjectAssignmentsTab({
                 return {
                   items: res.data.filter((proj) => !assignedIds.has(proj.id)),
                   hasMore:
-                    (res.page ?? p) * (res.pageSize ?? ps) < (res.total ?? 0),
+                    (res.page ?? p) * (res.pageSize ?? ps) <
+                    (res.total ?? 0),
                 };
               }}
               getOptionValue={(opt) => opt.id}
@@ -391,9 +194,7 @@ export function ProjectAssignmentsTab({
       ) : null}
 
       {projects.length === 0 ? (
-        <p className="text-sm text-muted-foreground">
-          {detailsT('noProjects')}
-        </p>
+        <p className="text-sm text-muted-foreground">{detailsT('noProjects')}</p>
       ) : (
         <>
           <div className="space-y-2">
@@ -442,13 +243,8 @@ export function ProjectAssignmentsTab({
                         />
                       </div>
                       <div className="space-y-1">
-                        <div className="flex items-center gap-1 text-[10px] uppercase tracking-wide text-muted-foreground">
+                        <div className="text-[10px] uppercase tracking-wide text-muted-foreground">
                           {commonT('labels.allocationPercent')}
-                          {autoRebalance && (
-                            <span className="rounded bg-primary/10 px-1 text-[9px] text-primary">
-                              auto
-                            </span>
-                          )}
                         </div>
                         <div className="relative">
                           <Input
@@ -574,9 +370,7 @@ export function ProjectAssignmentsTab({
                         onClick={() => startEditing(project)}
                       >
                         <Pencil className="size-3" />
-                        <span className="sr-only">
-                          {commonT('actions.edit')}
-                        </span>
+                        <span className="sr-only">{commonT('actions.edit')}</span>
                       </Button>
                     ) : null}
                   </div>
@@ -623,9 +417,7 @@ export function ProjectAssignmentsTab({
         <SheetContent className="w-full overflow-x-hidden overflow-y-auto sm:max-w-[min(92vw,64rem)]">
           <SheetHeader>
             <SheetTitle>{detailsT('createProject')}</SheetTitle>
-            <SheetDescription>
-              {detailsT('createProjectDescription')}
-            </SheetDescription>
+            <SheetDescription>{detailsT('createProjectDescription')}</SheetDescription>
           </SheetHeader>
           <ProjectFormScreen
             onCancel={() => setCreateSheetOpen(false)}
@@ -640,4 +432,4 @@ export function ProjectAssignmentsTab({
       </Sheet>
     </div>
   );
-}
+}