@hed-hog/operations 0.0.332 → 0.0.347

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

@@ -96,7 +96,6 @@ export function ProjectAssignmentsTab({
     0
   );
 
-  // When editing, show projected total
   const editingProject =
     editingId != null ? projects.find((p) => p.id === editingId) : null;
   const projectedTotal =
@@ -157,7 +156,6 @@ export function ProjectAssignmentsTab({
         }
       );
 
-      // Auto-rebalance: distribute remaining % among other projects
       if (autoRebalance && newPercent != null) {
         const others = projects.filter((p) => p.id !== projectId);
         if (others.length > 0) {
@@ -177,7 +175,6 @@ export function ProjectAssignmentsTab({
               } 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)
@@ -271,7 +268,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">
@@ -304,7 +300,6 @@ export function ProjectAssignmentsTab({
           </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">
@@ -316,7 +311,6 @@ export function ProjectAssignmentsTab({
                   className="scale-75"
                 />
               </div>
-              {/* Distribute equally */}
               <Button
                 type="button"
                 variant="outline"

package/hedhog/frontend/app/_components/project-cost-report-screen.tsx.ejs

@@ -112,22 +112,22 @@ export function ProjectCostReportScreen({ projectId }: Props) {
       isReimbursable !== 'all' ? isReimbursable === 'true' : undefined,
   };
 
-  const { data: report, isLoading } = useQuery<ProjectCostReport>({
-    queryKey: ['project-cost-report', projectId, filters],
-    queryFn: () =>
-      getProjectCostReport(request, projectId, filters) as Promise<ProjectCostReport>,
-  });
-
-  const { data: categories = [] } = useQuery<ProjectCostCategory[]>({
-    queryKey: ['project-cost-categories-list'],
-    queryFn: () =>
-      listProjectCostCategories(request, {}) as Promise<ProjectCostCategory[]>,
-  });
-
-  const { data: costTypes = [] } = useQuery<ProjectCostType[]>({
-    queryKey: ['project-cost-types-list'],
-    queryFn: () => listProjectCostTypes(request, {}) as Promise<ProjectCostType[]>,
-  });
+  const { data: report, isLoading } = useQuery<ProjectCostReport>({
+    queryKey: ['project-cost-report', projectId, filters],
+    queryFn: () =>
+      getProjectCostReport(request, projectId, filters) as Promise<ProjectCostReport>,
+  });
+
+  const { data: categories = [] } = useQuery<ProjectCostCategory[]>({
+    queryKey: ['project-cost-categories-list'],
+    queryFn: () =>
+      listProjectCostCategories(request, {}) as Promise<ProjectCostCategory[]>,
+  });
+
+  const { data: costTypes = [] } = useQuery<ProjectCostType[]>({
+    queryKey: ['project-cost-types-list'],
+    queryFn: () => listProjectCostTypes(request, {}) as Promise<ProjectCostType[]>,
+  });
 
   const fmt = (v: number) =>
     formatCurrency(v, getSettingValue, currentLocaleCode);
@@ -423,13 +423,13 @@ export function ProjectCostReportScreen({ projectId }: Props) {
                         ))}
                       </Pie>
                       <ChartTooltip
-                        content={({ active, payload }) => {
-                          if (!active || !payload?.length) return null;
-                          const d = payload[0]?.payload;
-                          if (!d) return null;
-
-                          return (
-                            <div className="rounded-md bg-background px-3 py-2 text-sm shadow-md border">
+                        content={({ active, payload }) => {
+                          if (!active || !payload?.length) return null;
+                          const d = payload[0]?.payload;
+                          if (!d) return null;
+
+                          return (
+                            <div className="rounded-md bg-background px-3 py-2 text-sm shadow-md border">
                               <p className="font-medium">
                                 {d.category_name ?? '—'}
                               </p>

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

@@ -396,7 +396,7 @@ function getInitials(value?: string | null) {
 function getPersonAvatarUrl(avatarId?: number | null) {
   return typeof avatarId === 'number' && avatarId > 0
     ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
-    : undefined;
+    : '/placeholder.png';
 }
 
 function getUserPhotoUrl(photoId?: number | null) {
@@ -1309,8 +1309,6 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
     useState(false);
   const [timesheetPrefill, setTimesheetPrefill] =
     useState<TimesheetEntryPrefill | null>(null);
-
-  // Assignment management state
   const [assignmentSheetOpen, setAssignmentSheetOpen] = useState(false);
   const [editingAssignment, setEditingAssignment] = useState<
     OperationsProjectDetails['assignments'][0] | null
@@ -2414,13 +2412,13 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
             <TooltipTrigger asChild>
               <div className="flex cursor-default items-center gap-1.5 border-r px-3 py-2 transition hover:bg-muted/30">
                 <Avatar className="size-5 shrink-0 border bg-muted">
-                    <AvatarImage
-                      src={
-                        getUserPhotoUrl(project.clientUserPhotoId) ||
-                        getPersonAvatarUrl(project.clientAvatarId)
-                      }
-                      alt={project.clientName || ''}
-                    />
+                  <AvatarImage
+                    src={
+                      getUserPhotoUrl(project.clientUserPhotoId) ||
+                      getPersonAvatarUrl(project.clientAvatarId)
+                    }
+                    alt={project.clientName || ''}
+                  />
                   <AvatarFallback className="text-[9px]">
                     {getInitials(project.clientName)}
                   </AvatarFallback>
@@ -2521,12 +2519,11 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
               <div className="flex cursor-default items-center gap-2 border-r px-3 py-2 transition hover:bg-muted/30">
                 <Gauge className="size-3.5 shrink-0 text-muted-foreground" />
                 <div className="flex items-center gap-1.5">
-                  <div className="h-1.5 w-20 overflow-hidden rounded-full bg-muted">
-                    <motion.div
-                      initial={{ width: 0 }}
-                      animate={{ width: `${displayedProgress}%` }}
-                      transition={{ duration: 0.7, ease: 'easeOut' }}
-                      className="h-full rounded-full bg-primary"
+                  <div className="h-1.5 w-20 overflow-hidden rounded-full bg-muted">
+                    <motion.div
+                      animate={{ width: `${displayedProgress}%` }}
+                      transition={{ duration: 0.7, ease: 'easeOut' }}
+                      className="h-full rounded-full bg-primary"
                     />
                   </div>
                   <span className="w-8 text-right font-semibold tabular-nums">
@@ -2739,10 +2736,7 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                       <div className="flex items-center gap-2">
                         <Avatar className="h-8 w-8 border border-border/60 bg-muted">
                           <AvatarImage
-                            src={
-                              getUserPhotoUrl(project.clientUserPhotoId) ||
-                              getPersonAvatarUrl(project.clientAvatarId)
-                            }
+                            src={getPersonAvatarUrl(project.clientAvatarId)}
                             alt={project.clientName || commonT('labels.client')}
                           />
                           <AvatarFallback className="bg-muted text-xs font-semibold text-foreground">
@@ -2884,32 +2878,13 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
                           <div className="font-medium">
                             {project.relatedContract.name}
                           </div>
-                          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                            <span className="truncate">
-                              {project.relatedContract.code || '—'}
-                            </span>
-                            {project.relatedContract.clientName ? (
-                              <>
-                                <span>•</span>
-                                <Avatar className="h-4 w-4 shrink-0">
-                                  <AvatarImage
-                                    src={
-                                      getUserPhotoUrl(project.clientUserPhotoId) ||
-                                      getPersonAvatarUrl(project.clientAvatarId)
-                                    }
-                                    alt={project.relatedContract.clientName}
-                                  />
-                                  <AvatarFallback className="text-[8px] font-medium">
-                                    {getInitials(
-                                      project.relatedContract.clientName
-                                    )}
-                                  </AvatarFallback>
-                                </Avatar>
-                                <span className="truncate">
-                                  {project.relatedContract.clientName}
-                                </span>
-                              </>
-                            ) : null}
+                          <div className="text-sm text-muted-foreground">
+                            {[
+                              project.relatedContract.code,
+                              project.relatedContract.clientName,
+                            ]
+                              .filter(Boolean)
+                              .join(' • ') || commonT('labels.notAvailable')}
                           </div>
                         </div>
                         <div className="flex items-center gap-3">
@@ -3381,7 +3356,7 @@ export function ProjectDetailsScreen({ 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'
@@ -3424,7 +3399,7 @@ export function ProjectDetailsScreen({ 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}>
                               {filteredTaskColumns[column.id].map((task) => {
                                 const tags = getTaskTags(task);
@@ -4600,7 +4575,6 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
         }
       />
 
-      {/* Assignment Add/Edit Sheet */}
       <Sheet
         open={assignmentSheetOpen}
         onOpenChange={(open) => {
@@ -4910,7 +4884,6 @@ export function ProjectDetailsScreen({ projectId }: { projectId: number }) {
         </SheetContent>
       </Sheet>
 
-      {/* Remove Assignment Confirm Dialog */}
       <Dialog
         open={removingAssignmentId !== null}
         onOpenChange={(open) => {