@hed-hog/operations 0.0.319 → 0.0.322

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { EmptyState, Page } from '@/components/entity-list';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import {
@@ -80,7 +81,7 @@ import type {
   OperationsProjectDetails,
   OperationsProjectRole,
 } from '../_lib/types';
-import { formatEnumLabel, getStatusBadgeClass } from '../_lib/utils/format';
+import { formatEnumLabel } from '../_lib/utils/format';
 import {
   normalizePercentInput,
   parseNumberInput,
@@ -126,6 +127,16 @@ type ProjectFormState = {
 
 type ProjectFormValues = ProjectFormState;
 
+function generateProjectCode(name: string): string {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return '';
+  if (words.length === 1) return words[0]!.slice(0, 5).toUpperCase();
+  return words
+    .map((w) => w[0]!.toUpperCase())
+    .join('')
+    .slice(0, 6);
+}
+
 function normalizeDateInputValue(value?: string | null) {
   if (!value) {
     return '';
@@ -272,6 +283,7 @@ type SearchableSelectProps = {
     id: number;
     title: string;
     description?: string | null;
+    avatarUrl?: string | null;
   }>;
   placeholder: string;
   searchPlaceholder: string;
@@ -388,6 +400,25 @@ function SearchableSelect({
                     ) : (
                       <span className="mr-2 h-4 w-4" />
                     )}
+                    {option.avatarUrl !== undefined ? (
+                      <Avatar className="mr-2 h-6 w-6 shrink-0">
+                        {option.avatarUrl ? (
+                          <AvatarImage
+                            src={option.avatarUrl}
+                            alt={option.title}
+                          />
+                        ) : null}
+                        <AvatarFallback className="text-[9px] font-medium">
+                          {option.title
+                            .trim()
+                            .split(' ')
+                            .filter(Boolean)
+                            .slice(0, 2)
+                            .map((w) => w[0]!.toUpperCase())
+                            .join('')}
+                        </AvatarFallback>
+                      </Avatar>
+                    ) : null}
                     <div className="min-w-0">
                       <div className="truncate">{option.title}</div>
                       {option.description ? (
@@ -602,6 +633,7 @@ export function ProjectFormScreen({
   const [assignmentSearch, setAssignmentSearch] = useState('');
   const isSheetMode = Boolean(onCancel);
   const isCreateMode = !projectId;
+  const [codeAutoMode, setCodeAutoMode] = useState(isCreateMode);
 
   const projectFormSchema = useMemo(
     () =>
@@ -682,7 +714,7 @@ export function ProjectFormScreen({
     });
   };
 
-  const { data: collaborators = [] } = useQuery<OperationsCollaborator[]>({
+  const { data: rawCollaborators } = useQuery<OperationsCollaborator[]>({
     queryKey: ['operations-project-form-collaborators', currentLocaleCode],
     enabled: access.isDirector,
     queryFn: () =>
@@ -691,6 +723,12 @@ export function ProjectFormScreen({
         '/operations/collaborators'
       ),
   });
+  // Stable reference prevents the useEffect(reset, [collaborators, project]) from
+  // re-running on every render while the query is still loading (undefined → [] new ref).
+  const collaborators = useMemo(
+    () => rawCollaborators ?? [],
+    [rawCollaborators]
+  );
 
   const { data: contracts = [], refetch: refetchContracts } = useQuery<
     OperationsContract[]
@@ -811,6 +849,11 @@ export function ProjectFormScreen({
         description: [collaborator.department, collaborator.title]
           .filter(Boolean)
           .join(' • '),
+        avatarUrl:
+          typeof collaborator.personAvatarId === 'number' &&
+          collaborator.personAvatarId > 0
+            ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${collaborator.personAvatarId}`
+            : null,
       })),
     [availableCollaborators]
   );
@@ -1041,6 +1084,15 @@ export function ProjectFormScreen({
                     {...field}
                     placeholder={t('placeholders.name')}
                     autoFocus
+                    onChange={(e) => {
+                      field.onChange(e);
+                      if (codeAutoMode) {
+                        formMethods.setValue(
+                          'code',
+                          generateProjectCode(e.target.value)
+                        );
+                      }
+                    }}
                   />
                 </FormControl>
                 <FormMessage />
@@ -1055,7 +1107,14 @@ export function ProjectFormScreen({
                 <FormItem className="min-w-0 lg:col-span-1">
                   <FormLabel>{t('fields.code')}</FormLabel>
                   <FormControl>
-                    <Input {...field} placeholder={t('placeholders.code')} />
+                    <Input
+                      {...field}
+                      placeholder={t('placeholders.code')}
+                      onChange={(e) => {
+                        setCodeAutoMode(false);
+                        field.onChange(e);
+                      }}
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -1388,71 +1447,6 @@ export function ProjectFormScreen({
               </div>
             </section>
 
-            <section className="space-y-3">
-              <div className="space-y-0.5">
-                <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                  {t('sections.contract')}
-                </h3>
-                <p className="text-[11px] text-muted-foreground/80">
-                  {t('sections.contractDescription')}
-                </p>
-              </div>
-
-              <div className="grid min-w-0 gap-3 xl:grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)]">
-                <div className="rounded-lg border px-3 py-3">
-                  <div className="flex items-start justify-between gap-3">
-                    <div className="min-w-0">
-                      <div className="text-sm font-medium text-foreground">
-                        {selectedContract?.name ||
-                          commonT('labels.notAssigned')}
-                      </div>
-                      <div className="mt-1 text-xs text-muted-foreground">
-                        {selectedContract
-                          ? [
-                              selectedContract.code,
-                              selectedContract.clientName,
-                              formatEnumLabel(selectedContract.contractType),
-                            ]
-                              .filter(Boolean)
-                              .join(' • ')
-                          : commonT('labels.notAssigned')}
-                      </div>
-                    </div>
-                    {selectedContract?.status ? (
-                      <span className="shrink-0">
-                        <span
-                          className={`inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium ${getStatusBadgeClass(
-                            selectedContract.status
-                          )}`}
-                        >
-                          {contractT.has(
-                            `options.statuses.${selectedContract.status}`
-                          )
-                            ? contractT(
-                                `options.statuses.${selectedContract.status}`
-                              )
-                            : formatEnumLabel(selectedContract.status)}
-                        </span>
-                      </span>
-                    ) : null}
-                  </div>
-
-                  <div className="mt-3 flex flex-wrap gap-2">
-                    {selectedContract ? (
-                      <Button type="button" variant="outline" size="sm" asChild>
-                        <Link
-                          href={`/operations/contracts?edit=${selectedContract.id}`}
-                        >
-                          <FileText className="size-4" />
-                          {commonT('actions.openContract')}
-                        </Link>
-                      </Button>
-                    ) : null}
-                  </div>
-                </div>
-              </div>
-            </section>
-
             <section className="space-y-3">
               <div className="space-y-0.5">
                 <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">

package/hedhog/frontend/app/_components/task-file-attachments.tsx.ejs

@@ -0,0 +1,388 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { useApp } from '@hed-hog/next-app-provider';
+import {
+  Archive,
+  ExternalLink,
+  File,
+  FileAudio,
+  FileCode,
+  FileImage,
+  FileSpreadsheet,
+  FileText,
+  FileVideo,
+  Loader2,
+  Paperclip,
+  Trash2,
+  UploadCloud,
+} from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type TaskFile = {
+  id: number;
+  file_id: number;
+  filename: string;
+  size: number;
+  mimetype: string;
+  created_at: string;
+};
+
+type UploadingFile = {
+  key: string;
+  filename: string;
+  progress: number;
+  error?: string;
+};
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function formatBytes(bytes: number) {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+
+function getFileIcon(mimetype: string, filename: string) {
+  const ext = filename.split('.').pop()?.toLowerCase() ?? '';
+
+  if (mimetype.startsWith('image/')) return FileImage;
+  if (mimetype.startsWith('video/')) return FileVideo;
+  if (mimetype.startsWith('audio/')) return FileAudio;
+  if (
+    mimetype === 'application/pdf' ||
+    mimetype.includes('word') ||
+    mimetype.includes('document')
+  )
+    return FileText;
+  if (
+    mimetype.includes('spreadsheet') ||
+    mimetype.includes('excel') ||
+    ext === 'xlsx' ||
+    ext === 'xls'
+  )
+    return FileSpreadsheet;
+  if (ext === 'csv') return FileSpreadsheet;
+  if (
+    mimetype.includes('zip') ||
+    mimetype.includes('compressed') ||
+    mimetype.includes('archive') ||
+    ['zip', 'rar', '7z', 'tar', 'gz'].includes(ext)
+  )
+    return Archive;
+  if (
+    [
+      'js',
+      'ts',
+      'tsx',
+      'jsx',
+      'py',
+      'java',
+      'cs',
+      'cpp',
+      'c',
+      'go',
+      'rs',
+      'json',
+      'xml',
+      'html',
+      'css',
+    ].includes(ext) ||
+    mimetype.includes('javascript') ||
+    mimetype.includes('json') ||
+    mimetype.includes('xml') ||
+    mimetype.includes('html')
+  )
+    return FileCode;
+
+  return File;
+}
+
+function getFileOpenUrl(fileId: number) {
+  const base =
+    typeof process !== 'undefined'
+      ? (process.env.NEXT_PUBLIC_API_BASE_URL?.trim().replace(/\/$/, '') ?? '')
+      : '';
+  return `${base}/file/open/${fileId}`;
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+type Props = {
+  taskId: number | null;
+};
+
+export function TaskFileAttachments({ taskId }: Props) {
+  const { request } = useApp();
+
+  const [files, setFiles] = useState<TaskFile[]>([]);
+  const [uploading, setUploading] = useState<UploadingFile[]>([]);
+  const [loadingFiles, setLoadingFiles] = useState(false);
+  const [deletingId, setDeletingId] = useState<number | null>(null);
+  const [isDraggingOver, setIsDraggingOver] = useState(false);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // ── Fetch existing files ──────────────────────────────────────────────────
+
+  const fetchFiles = useCallback(async () => {
+    if (!taskId) return;
+    setLoadingFiles(true);
+    try {
+      const res = await request<TaskFile[]>({
+        url: `/operations/tasks/${taskId}/files`,
+        method: 'GET',
+      });
+      setFiles((res.data as TaskFile[]) ?? []);
+    } catch {
+      // ignore
+    } finally {
+      setLoadingFiles(false);
+    }
+  }, [taskId, request]);
+
+  useEffect(() => {
+    void fetchFiles();
+  }, [fetchFiles]);
+
+  // ── Upload handler ────────────────────────────────────────────────────────
+
+  const uploadFile = useCallback(
+    async (file: File) => {
+      if (!taskId) return;
+
+      const key = `${file.name}-${Date.now()}`;
+      setUploading((prev) => [
+        ...prev,
+        { key, filename: file.name, progress: 0 },
+      ]);
+
+      try {
+        const formData = new FormData();
+        formData.append('file', file);
+
+        const res = await (request as any)({
+          url: `/operations/tasks/${taskId}/files`,
+          method: 'POST',
+          data: formData,
+          headers: { 'Content-Type': 'multipart/form-data' },
+          onUploadProgress: (e: { loaded: number; total?: number }) => {
+            if (!e.total) return;
+            const pct = Math.round((e.loaded * 100) / e.total);
+            setUploading((prev) =>
+              prev.map((u) => (u.key === key ? { ...u, progress: pct } : u))
+            );
+          },
+        });
+
+        if (res?.data) {
+          await fetchFiles();
+        }
+      } catch {
+        setUploading((prev) =>
+          prev.map((u) =>
+            u.key === key ? { ...u, error: 'Erro no upload' } : u
+          )
+        );
+        setTimeout(() => {
+          setUploading((prev) => prev.filter((u) => u.key !== key));
+        }, 3000);
+        return;
+      }
+
+      setUploading((prev) => prev.filter((u) => u.key !== key));
+    },
+    [taskId, request, fetchFiles]
+  );
+
+  const handleFiles = useCallback(
+    (fileList: FileList | null) => {
+      if (!fileList) return;
+      Array.from(fileList).forEach((f) => void uploadFile(f));
+      if (inputRef.current) inputRef.current.value = '';
+    },
+    [uploadFile]
+  );
+
+  // ── Delete handler ────────────────────────────────────────────────────────
+
+  const handleDelete = useCallback(
+    async (relationId: number) => {
+      if (!taskId) return;
+      setDeletingId(relationId);
+      try {
+        await request({
+          url: `/operations/tasks/${taskId}/files/${relationId}`,
+          method: 'DELETE',
+        });
+        setFiles((prev) => prev.filter((f) => f.id !== relationId));
+      } catch {
+        // ignore
+      } finally {
+        setDeletingId(null);
+      }
+    },
+    [taskId, request]
+  );
+
+  // ── Drag and drop ─────────────────────────────────────────────────────────
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDraggingOver(true);
+  };
+
+  const handleDragLeave = () => setIsDraggingOver(false);
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDraggingOver(false);
+    handleFiles(e.dataTransfer.files);
+  };
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  const isEmpty = files.length === 0 && uploading.length === 0;
+
+  return (
+    <div className="space-y-3">
+      {/* Drop zone */}
+      <div
+        role="button"
+        tabIndex={0}
+        aria-label="Clique ou solte arquivos para anexar"
+        className={[
+          'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed px-4 py-5 text-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+          isDraggingOver
+            ? 'border-primary bg-primary/5 text-primary'
+            : 'border-border bg-muted/30 text-muted-foreground hover:border-primary/50 hover:bg-muted/50',
+        ].join(' ')}
+        onClick={() => inputRef.current?.click()}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            inputRef.current?.click();
+          }
+        }}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
+        <UploadCloud className="size-6 shrink-0 opacity-60" />
+        <span className="text-center text-xs leading-relaxed">
+          {isDraggingOver
+            ? 'Solte os arquivos aqui'
+            : 'Clique ou arraste arquivos para anexar'}
+        </span>
+        <input
+          ref={inputRef}
+          type="file"
+          multiple
+          className="hidden"
+          onChange={(e) => handleFiles(e.target.files)}
+        />
+      </div>
+
+      {/* Upload progress items */}
+      {uploading.map((u) => (
+        <div
+          key={u.key}
+          className="flex items-center gap-3 rounded-xl border bg-muted/30 px-3 py-2"
+        >
+          <Loader2 className="size-4 shrink-0 animate-spin text-primary" />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-xs font-medium">{u.filename}</p>
+            {u.error ? (
+              <p className="text-[10px] text-destructive">{u.error}</p>
+            ) : (
+              <div className="mt-1 h-1 w-full overflow-hidden rounded-full bg-muted">
+                <div
+                  className="h-full rounded-full bg-primary transition-all duration-200"
+                  style={{ width: `${u.progress}%` }}
+                />
+              </div>
+            )}
+          </div>
+          <span className="shrink-0 text-[10px] tabular-nums text-muted-foreground">
+            {u.error ? 'Erro' : `${u.progress}%`}
+          </span>
+        </div>
+      ))}
+
+      {/* Loading skeleton */}
+      {loadingFiles && files.length === 0 && uploading.length === 0 ? (
+        <div className="space-y-2">
+          {[1, 2].map((i) => (
+            <div
+              key={i}
+              className="h-12 animate-pulse rounded-xl border bg-muted/30"
+            />
+          ))}
+        </div>
+      ) : null}
+
+      {/* Empty state */}
+      {!loadingFiles && isEmpty ? (
+        <div className="flex items-center gap-2 rounded-xl border border-dashed bg-muted/10 px-3 py-3 text-xs text-muted-foreground">
+          <Paperclip className="size-3.5 shrink-0" />
+          Nenhum arquivo anexado
+        </div>
+      ) : null}
+
+      {/* File list */}
+      {files.map((file) => {
+        const Icon = getFileIcon(file.mimetype, file.filename);
+        const isDeleting = deletingId === file.id;
+        return (
+          <div
+            key={file.id}
+            className="group flex items-center gap-3 rounded-xl border bg-card px-3 py-2 transition hover:border-primary/30 hover:bg-muted/30"
+          >
+            <Icon className="size-5 shrink-0 text-muted-foreground" />
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-xs font-medium leading-tight">
+                {file.filename}
+              </p>
+              <p className="text-[10px] text-muted-foreground">
+                {formatBytes(file.size)}
+              </p>
+            </div>
+            <div className="flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="size-7 rounded-lg"
+                title="Abrir em nova aba"
+                onClick={() =>
+                  window.open(getFileOpenUrl(file.file_id), '_blank')
+                }
+              >
+                <ExternalLink className="size-3.5" />
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="size-7 rounded-lg text-destructive hover:bg-destructive/10 hover:text-destructive"
+                title="Remover arquivo"
+                disabled={isDeleting}
+                onClick={() => void handleDelete(file.id)}
+              >
+                {isDeleting ? (
+                  <Loader2 className="size-3.5 animate-spin" />
+                ) : (
+                  <Trash2 className="size-3.5" />
+                )}
+              </Button>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}