@hed-hog/operations 0.0.331 → 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

@@ -3,40 +3,40 @@
 import { EmptyState, Page } from '@/components/entity-list';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Progress } from '@/components/ui/progress';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import {
-  Table,
-  TableBody,
-  TableCell,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Progress } from '@/components/ui/progress';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
   TableHead,
   TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { RichTextEditor } from '@/components/rich-text-editor';
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { RichTextEditor } from '@/components/rich-text-editor';
 import {
   closestCenter,
   DndContext,
@@ -67,13 +67,13 @@ import {
   Timer,
   Trash2,
 } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useCallback, useMemo, useState } from 'react';
-import { fetchOperations, mutateOperations } from '../_lib/api';
-import { useMentionItems } from '../_lib/hooks/use-mention-items';
-import type {
-  OperationsMyProjectSummary,
-  OperationsTaskOption,
+import { useTranslations } from 'next-intl';
+import { useCallback, useMemo, useState } from 'react';
+import { fetchOperations, mutateOperations } from '../_lib/api';
+import { useMentionItems } from '../_lib/hooks/use-mention-items';
+import type {
+  OperationsMyProjectSummary,
+  OperationsTaskOption,
   PaginatedResponse,
 } from '../_lib/types';
 import {
@@ -84,13 +84,13 @@ import {
 import { OperationsHeader } from './operations-header';
 import { SectionCard } from './section-card';
 import { StatusBadge } from './status-badge';
-import {
-  TaskDetailSheet,
-  TaskCommentsSection,
-  type TaskDetailSheetData,
-} from './task-detail-sheet';
-import { TaskFileAttachments } from './task-file-attachments';
-import { TimesheetEntryCreateSheet } from './timesheet-entry-create-sheet';
+import {
+  TaskDetailSheet,
+  TaskCommentsSection,
+  type TaskDetailSheetData,
+} from './task-detail-sheet';
+import { TaskFileAttachments } from './task-file-attachments';
+import { TimesheetEntryCreateSheet } from './timesheet-entry-create-sheet';
 
 type BoardColumnId = 'todo' | 'doing' | 'review' | 'done';
 
@@ -106,12 +106,12 @@ type BoardTask = {
   assigneeCollaboratorId: number | null;
   assigneeName: string | null;
   assigneeUserPhotoId: number | null;
-  assigneePersonAvatarId: number | null;
-  commentCount: number;
-  fileCount: number;
-  doingStartedAt: string | null;
-  totalDoingMinutes: number;
-};
+  assigneePersonAvatarId: number | null;
+  commentCount: number;
+  fileCount: number;
+  doingStartedAt: string | null;
+  totalDoingMinutes: number;
+};
 
 type TaskFormState = {
   name: string;
@@ -171,26 +171,26 @@ function parseTaskId(value: UniqueIdentifier | null | undefined) {
   return match ? Number(match[1]) : null;
 }
 
-function parseColumnId(
-  value: UniqueIdentifier | null | undefined
-): BoardColumnId | null {
-  if (!value) return null;
-  const match = String(value).match(/^col-(.+)$/);
-  const id = match?.[1];
-  return KANBAN_COLUMNS.some((c) => c.id === id) ? (id as BoardColumnId) : null;
-}
-
-function normalizeDateInputValue(value?: string | null) {
-  if (!value) return '';
-  const match = String(value)
-    .trim()
-    .match(/^\d{4}-\d{2}-\d{2}/);
-  return match?.[0] ?? '';
-}
-
-function apiTaskToBoardTask(
-  row: OperationsMyProjectSummary['tasks'][number] | OperationsTaskOption
-): BoardTask {
+function parseColumnId(
+  value: UniqueIdentifier | null | undefined
+): BoardColumnId | null {
+  if (!value) return null;
+  const match = String(value).match(/^col-(.+)$/);
+  const id = match?.[1];
+  return KANBAN_COLUMNS.some((c) => c.id === id) ? (id as BoardColumnId) : null;
+}
+
+function normalizeDateInputValue(value?: string | null) {
+  if (!value) return '';
+  const match = String(value)
+    .trim()
+    .match(/^\d{4}-\d{2}-\d{2}/);
+  return match?.[0] ?? '';
+}
+
+function apiTaskToBoardTask(
+  row: OperationsMyProjectSummary['tasks'][number] | OperationsTaskOption
+): BoardTask {
   const status = KANBAN_COLUMNS.some((c) => c.id === row.status)
     ? (row.status as BoardColumnId)
     : 'todo';
@@ -377,12 +377,12 @@ function DroppableColumn({
 
 export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
   const t = useTranslations('operations.ProjectDetailsPage');
-  const commonT = useTranslations('operations.Common');
-  const formT = useTranslations('operations.ProjectFormPage');
-  const { request, currentLocaleCode, getSettingValue } = useApp();
-  const mentionItems = useMentionItems(request);
-
-  const getProjectStatusLabel = (value?: string | null) => {
+  const commonT = useTranslations('operations.Common');
+  const formT = useTranslations('operations.ProjectFormPage');
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+  const mentionItems = useMentionItems(request);
+
+  const getProjectStatusLabel = (value?: string | null) => {
     if (!value) return commonT('labels.notAvailable');
     try {
       return formT(`options.statuses.${value}`);
@@ -569,10 +569,10 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
     setActiveDragTask(task ?? null);
   };
 
-  const openCreateTaskForm = useCallback(
-    (defaultStatus: BoardColumnId = 'todo') => {
-      setEditingTaskId(null);
-      setTaskFormData({
+  const openCreateTaskForm = useCallback(
+    (defaultStatus: BoardColumnId = 'todo') => {
+      setEditingTaskId(null);
+      setTaskFormData({
         ...EMPTY_TASK_FORM,
         status: defaultStatus,
         assigneeCollaboratorId:
@@ -1310,10 +1310,10 @@ export function MyProjectSummaryScreen({ projectId }: { projectId: number }) {
       />
 
 
-      <Sheet
-        open={taskFormOpen}
-        onOpenChange={(open) => {
-          if (!open) {
+      <Sheet
+        open={taskFormOpen}
+        onOpenChange={(open) => {
+          if (!open) {
             setTaskFormOpen(false);
             setEditingTaskId(null);
           }

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-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

@@ -154,10 +154,10 @@ import {
   TaskDetailSheet,
   type TaskDetailSheetData,
 } from './task-detail-sheet';
-import { ProjectFileAttachments } from './project-file-attachments';
-import { TaskFileAttachments } from './task-file-attachments';
-import { TaskFormSheet } from './task-form-sheet';
-import { TimesheetEntryCreateSheet } from './timesheet-entry-create-sheet';
+import { ProjectFileAttachments } from './project-file-attachments';
+import { TaskFileAttachments } from './task-file-attachments';
+import { TaskFormSheet } from './task-form-sheet';
+import { TimesheetEntryCreateSheet } from './timesheet-entry-create-sheet';
 
 type BoardColumnId = 'todo' | 'doing' | 'review' | 'done';