@hed-hog/operations 0.0.299 → 0.0.301

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

@@ -0,0 +1,256 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Check, ChevronsUpDown, Plus, X } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import type { OperationsCollaborator, OperationsCollaboratorDetails } from '../_lib/types';
+import { fetchOperations } from '../_lib/api';
+import { CollaboratorFormScreen } from './collaborator-form-screen';
+
+type CollaboratorSelectWithCreateProps = {
+  label: string;
+  value?: number | null;
+  initialSelectedLabel?: string;
+  placeholder: string;
+  disabled?: boolean;
+  onChange: (option: OperationsCollaborator | null) => void;
+};
+
+export function CollaboratorSelectWithCreate({
+  label,
+  value,
+  initialSelectedLabel = '',
+  placeholder,
+  disabled = false,
+  onChange,
+}: CollaboratorSelectWithCreateProps) {
+  const { request, currentLocaleCode } = useApp();
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [createOpen, setCreateOpen] = useState(false);
+  const [selectedLabel, setSelectedLabel] = useState(initialSelectedLabel);
+  const parentScrollContainerRef = useRef<HTMLElement | null>(null);
+  const parentScrollTopRef = useRef(0);
+
+  const { data: collaborators = [] } = useQuery<OperationsCollaborator[]>({
+    queryKey: ['operations-inline-collaborators', currentLocaleCode],
+    queryFn: () =>
+      fetchOperations<OperationsCollaborator[]>(request, '/operations/collaborators'),
+    placeholderData: (old) => old ?? [],
+  });
+
+  useEffect(() => {
+    setSelectedLabel(initialSelectedLabel);
+  }, [initialSelectedLabel]);
+
+  useEffect(() => {
+    if (value == null) {
+      setSelectedLabel('');
+      return;
+    }
+
+    const option = collaborators.find((item) => item.id === value);
+    if (option) {
+      setSelectedLabel(option.displayName);
+    }
+  }, [collaborators, value]);
+
+  const filteredOptions = collaborators.filter((item) => {
+    const haystack = [
+      item.displayName,
+      item.code,
+      item.title,
+      item.department,
+    ]
+      .filter(Boolean)
+      .join(' ')
+      .toLowerCase();
+    return haystack.includes(search.trim().toLowerCase());
+  });
+
+  const captureParentScrollPosition = (trigger: HTMLElement) => {
+    const parentSheetContent = trigger.closest(
+      '[data-radix-dialog-content]'
+    ) as HTMLElement | null;
+
+    if (!parentSheetContent) {
+      parentScrollContainerRef.current = null;
+      parentScrollTopRef.current = 0;
+      return;
+    }
+
+    parentScrollContainerRef.current = parentSheetContent;
+    parentScrollTopRef.current = parentSheetContent.scrollTop;
+  };
+
+  const restoreParentScrollPosition = () => {
+    const container =
+      parentScrollContainerRef.current &&
+      document.body.contains(parentScrollContainerRef.current)
+        ? parentScrollContainerRef.current
+        : null;
+
+    if (!container) {
+      return;
+    }
+
+    const restore = () => {
+      container.scrollTop = parentScrollTopRef.current;
+    };
+
+    requestAnimationFrame(restore);
+    setTimeout(restore, 0);
+    setTimeout(restore, 120);
+  };
+
+  return (
+    <div className="space-y-1.5">
+      <label className="text-xs font-medium text-muted-foreground">
+        {label}
+      </label>
+
+      <div className="flex gap-2">
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              type="button"
+              variant="outline"
+              role="combobox"
+              disabled={disabled}
+              className="h-9 flex-1 justify-between overflow-hidden"
+            >
+              <span className="truncate text-left">
+                {selectedLabel || placeholder}
+              </span>
+              <ChevronsUpDown className="size-4 shrink-0 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+            <Command shouldFilter={false}>
+              <CommandInput
+                value={search}
+                onValueChange={setSearch}
+                placeholder="Buscar colaborador..."
+              />
+              <CommandList>
+                <CommandEmpty>Nenhum colaborador encontrado.</CommandEmpty>
+                <CommandGroup>
+                  {filteredOptions.map((option) => (
+                    <CommandItem
+                      key={option.id}
+                      value={String(option.id)}
+                      onSelect={() => {
+                        onChange(option);
+                        setSelectedLabel(option.displayName);
+                        setOpen(false);
+                      }}
+                    >
+                      <Check
+                        className={`mr-2 size-4 ${
+                          value === option.id ? 'opacity-100' : 'opacity-0'
+                        }`}
+                      />
+                      <div className="min-w-0">
+                        <div className="truncate">{option.displayName}</div>
+                        <div className="truncate text-xs text-muted-foreground">
+                          {[option.code, option.title, option.department]
+                            .filter(Boolean)
+                            .join(' • ')}
+                        </div>
+                      </div>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+
+        {value ? (
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            className="h-9 w-9 shrink-0 cursor-pointer"
+            onClick={() => {
+              onChange(null);
+              setSelectedLabel('');
+            }}
+          >
+            <X className="size-4" />
+          </Button>
+        ) : null}
+
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          className="h-9 w-9 shrink-0 cursor-pointer"
+          disabled={disabled}
+          onClick={(event) => {
+            captureParentScrollPosition(event.currentTarget);
+            setCreateOpen(true);
+          }}
+          aria-label={`Criar ${label.toLowerCase()}`}
+        >
+          <Plus className="size-4" />
+        </Button>
+      </div>
+
+      <Sheet
+        open={createOpen}
+        onOpenChange={(nextOpen) => {
+          setCreateOpen(nextOpen);
+          if (!nextOpen) {
+            restoreParentScrollPosition();
+          }
+        }}
+      >
+        <SheetContent className="w-full overflow-y-auto sm:max-w-3xl">
+          <SheetHeader>
+            <SheetTitle>Novo colaborador</SheetTitle>
+            <SheetDescription>
+              Crie o colaborador sem sair do cadastro do contrato.
+            </SheetDescription>
+          </SheetHeader>
+          <CollaboratorFormScreen
+            onCancel={() => setCreateOpen(false)}
+            onSaved={async (collaborator: OperationsCollaboratorDetails) => {
+              onChange({
+                id: collaborator.id,
+                code: collaborator.code,
+                displayName: collaborator.displayName,
+                title: collaborator.title,
+                department: collaborator.department,
+                status: collaborator.status,
+              });
+              setSelectedLabel(collaborator.displayName);
+              setCreateOpen(false);
+            }}
+          />
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+}

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>
+  );
+}