@greatapps/greatauth-ui 0.3.6 → 0.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/greatauth-ui",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -39,6 +39,7 @@
     "next-themes": "*",
     "radix-ui": "^1.4",
     "cmdk": "^1",
+    "react-easy-crop": "^5",
     "sonner": "^2.0.7",
     "vaul": "^1.1.2",
     "input-otp": "^1.4.2"
@@ -49,16 +50,19 @@
     "class-variance-authority": "^0.7"
   },
   "devDependencies": {
-    "tsup": "latest",
-    "typescript": "^5",
-    "react": "^19",
-    "react-dom": "^19",
+    "@tanstack/react-query": "^5.90.21",
+    "@tanstack/react-table": "^8.21.3",
     "@types/react": "latest",
     "@types/react-dom": "latest",
-    "next": "latest",
     "better-auth": "latest",
+    "cmdk": "^1",
+    "date-fns": "^4.1.0",
+    "next": "latest",
     "next-themes": "latest",
     "radix-ui": "^1.4",
-    "cmdk": "^1"
+    "react": "^19",
+    "react-dom": "^19",
+    "tsup": "latest",
+    "typescript": "^5"
   }
 }

package/src/components/entity-avatar.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
+import { cn } from "../lib/utils";
+
+const COLORS = [
+  "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300",
+  "bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300",
+  "bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300",
+  "bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300",
+  "bg-cyan-100 text-cyan-700 dark:bg-cyan-900 dark:text-cyan-300",
+  "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300",
+  "bg-violet-100 text-violet-700 dark:bg-violet-900 dark:text-violet-300",
+  "bg-pink-100 text-pink-700 dark:bg-pink-900 dark:text-pink-300",
+];
+
+const SIZE_MAP = {
+  xs: "h-5 w-5 text-[9px]",
+  sm: "h-6 w-6 text-[10px]",
+  md: "h-8 w-8 text-xs",
+  lg: "h-10 w-10 text-sm",
+  xl: "h-16 w-16 text-lg",
+} as const;
+
+function hashCode(str: string): number {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return Math.abs(hash);
+}
+
+function getInitials(name: string): string {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length >= 2) {
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  }
+  return (name[0] || "?").toUpperCase();
+}
+
+export interface EntityAvatarProps {
+  photo?: string | null;
+  name: string | null;
+  size?: keyof typeof SIZE_MAP;
+  className?: string;
+}
+
+export function EntityAvatar({
+  photo,
+  name,
+  size = "md",
+  className,
+}: EntityAvatarProps) {
+  const displayName = name || "?";
+  const color = COLORS[hashCode(displayName) % COLORS.length];
+  const initials = getInitials(displayName);
+
+  return (
+    <Avatar className={cn(SIZE_MAP[size], className)}>
+      {photo && (
+        <AvatarImage
+          src={photo}
+          alt={displayName}
+          className="object-cover"
+        />
+      )}
+      <AvatarFallback className={cn("font-medium", color)}>
+        {initials}
+      </AvatarFallback>
+    </Avatar>
+  );
+}

package/src/components/image-crop-upload.tsx

@@ -0,0 +1,253 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+import Cropper from "react-easy-crop";
+import type { Area } from "react-easy-crop";
+import { Button } from "./ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
+import { Slider } from "./ui/slider";
+import { toast } from "sonner";
+import { Camera, Trash2 } from "lucide-react";
+import { EntityAvatar } from "./entity-avatar";
+import {
+  getCroppedImage,
+  validateImageFile,
+  fileToDataUrl,
+} from "../lib/image-utils";
+
+const STORAGE_URL_MAP: Record<string, string> = {
+  users: "https://gauth-r2-storage.greatlabs.workers.dev",
+  agents: "https://gagents-r2-storage.greatlabs.workers.dev",
+  contacts: "https://gchat-r2-storage.greatlabs.workers.dev",
+  professionals: "https://gclinic-r2-storage.greatlabs.workers.dev",
+  patients: "https://gclinic-r2-storage.greatlabs.workers.dev",
+  clinics: "https://gclinic-r2-storage.greatlabs.workers.dev",
+};
+
+const BUCKET_MAP: Record<string, string> = {
+  users: "gauth-r1-storage",
+  agents: "gagents-r1-storage",
+  contacts: "gchat-r1-storage",
+  professionals: "gclinic-r1-storage",
+  patients: "gclinic-r1-storage",
+  clinics: "gclinic-r1-storage",
+};
+
+const DEFAULT_STORAGE_URL = "https://gauth-r2-storage.greatlabs.workers.dev";
+const DEFAULT_BUCKET = "gauth-r1-storage";
+
+export interface ImageCropUploadProps {
+  value?: string | null;
+  onChange: (url: string) => void;
+  onRemove?: () => void;
+  entityType: string;
+  entityId?: number | string;
+  idAccount: number;
+  name?: string | null;
+  disabled?: boolean;
+}
+
+export function ImageCropUpload({
+  value,
+  onChange,
+  onRemove,
+  entityType,
+  entityId,
+  idAccount,
+  name,
+  disabled = false,
+}: ImageCropUploadProps) {
+  const [imageSrc, setImageSrc] = useState<string | null>(null);
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [croppedArea, setCroppedArea] = useState<Area | null>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const onCropComplete = useCallback((_: Area, croppedAreaPixels: Area) => {
+    setCroppedArea(croppedAreaPixels);
+  }, []);
+
+  const handleFileSelect = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+
+      const error = validateImageFile(file);
+      if (error) {
+        toast.error(error);
+        if (inputRef.current) inputRef.current.value = "";
+        return;
+      }
+
+      const dataUrl = await fileToDataUrl(file);
+      setImageSrc(dataUrl);
+      setCrop({ x: 0, y: 0 });
+      setZoom(1);
+      setIsOpen(true);
+      if (inputRef.current) inputRef.current.value = "";
+    },
+    [],
+  );
+
+  const handleConfirmCrop = useCallback(async () => {
+    if (!imageSrc || !croppedArea) return;
+
+    setIsUploading(true);
+
+    try {
+      const base64 = await getCroppedImage(imageSrc, croppedArea);
+      const path = `${entityType}/${idAccount}/${entityId || "temp"}.webp`;
+      const storageUrl = STORAGE_URL_MAP[entityType] || DEFAULT_STORAGE_URL;
+      const bucket = BUCKET_MAP[entityType] || DEFAULT_BUCKET;
+
+      const res = await fetch(storageUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ file: base64, bucket, path }),
+      });
+
+      const data = await res.json();
+
+      if (data.status !== 1) {
+        throw new Error(data.message || "Erro ao enviar imagem");
+      }
+
+      const publicUrl = `${storageUrl}/${path}?t=${Date.now()}`;
+      onChange(publicUrl);
+      toast.success("Imagem atualizada");
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Erro ao enviar imagem",
+      );
+    } finally {
+      setIsUploading(false);
+      setIsOpen(false);
+      setImageSrc(null);
+    }
+  }, [imageSrc, croppedArea, entityType, entityId, idAccount, onChange]);
+
+  const handleRemove = useCallback(async () => {
+    if (!value) return;
+
+    try {
+      const path = `${entityType}/${idAccount}/${entityId || "temp"}.webp`;
+      const storageUrl = STORAGE_URL_MAP[entityType] || DEFAULT_STORAGE_URL;
+      const bucket = BUCKET_MAP[entityType] || DEFAULT_BUCKET;
+
+      await fetch(storageUrl, {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ bucket, path }),
+      });
+
+      onRemove?.();
+      toast.success("Imagem removida");
+    } catch {
+      toast.error("Erro ao remover imagem");
+    }
+  }, [value, entityType, entityId, idAccount, onRemove]);
+
+  return (
+    <div className="flex flex-col items-center gap-2">
+      <div className="relative group">
+        <EntityAvatar photo={value} name={name ?? null} size="xl" />
+        {!disabled && (
+          <button
+            type="button"
+            onClick={() => inputRef.current?.click()}
+            className="absolute inset-0 flex items-center justify-center rounded-full bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
+          >
+            <Camera className="h-5 w-5 text-white" />
+          </button>
+        )}
+      </div>
+
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/png,image/jpeg,image/webp"
+        onChange={handleFileSelect}
+        className="hidden"
+        disabled={disabled}
+      />
+
+      {!disabled && value && (
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={handleRemove}
+          className="text-destructive hover:text-destructive"
+        >
+          <Trash2 className="h-4 w-4 mr-1" />
+          Remover
+        </Button>
+      )}
+
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Recortar imagem</DialogTitle>
+          </DialogHeader>
+
+          <div className="relative w-full h-72 bg-muted rounded-md overflow-hidden">
+            {imageSrc && (
+              <Cropper
+                image={imageSrc}
+                crop={crop}
+                zoom={zoom}
+                aspect={1}
+                onCropChange={setCrop}
+                onZoomChange={setZoom}
+                onCropComplete={onCropComplete}
+                cropShape="round"
+                showGrid={false}
+              />
+            )}
+          </div>
+
+          <div className="flex items-center gap-3 px-1">
+            <span className="text-sm text-muted-foreground whitespace-nowrap">
+              Zoom
+            </span>
+            <Slider
+              value={[zoom]}
+              onValueChange={(v: number[]) => setZoom(v[0])}
+              min={1}
+              max={3}
+              step={0.1}
+              className="flex-1"
+            />
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setIsOpen(false);
+                setImageSrc(null);
+              }}
+              disabled={isUploading}
+            >
+              Cancelar
+            </Button>
+            <Button
+              onClick={handleConfirmCrop}
+              disabled={isUploading || !croppedArea}
+            >
+              {isUploading ? "Enviando..." : "Confirmar"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/src/components/index.ts

@@ -3,3 +3,7 @@ export { AppSidebar } from "./app-sidebar";
 export { AppHeader } from "./app-header";
 export { LoginForm } from "./login-form";
 export { ThemeToggle } from "./theme-toggle";
+export { EntityAvatar } from "./entity-avatar";
+export type { EntityAvatarProps } from "./entity-avatar";
+export { ImageCropUpload } from "./image-crop-upload";
+export type { ImageCropUploadProps } from "./image-crop-upload";

package/src/components/users/data-table.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import {
+  type ColumnDef,
+  type SortingState,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { useState } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../ui/table";
+import { Button } from "../ui/button";
+import { Skeleton } from "../ui/skeleton";
+import { cn } from "../../lib/utils";
+import { ChevronLeft, ChevronRight, ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
+
+export interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  isLoading?: boolean;
+  emptyMessage?: string;
+  total?: number;
+  page?: number;
+  onPageChange?: (page: number) => void;
+  pageSize?: number;
+  onRowClick?: (row: TData) => void;
+  selectedRowId?: string | number | null;
+  getRowId?: (row: TData) => string | number;
+  compact?: boolean;
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  isLoading,
+  emptyMessage = "Nenhum registro encontrado",
+  total,
+  page = 1,
+  onPageChange,
+  pageSize = 15,
+  onRowClick,
+  selectedRowId,
+  getRowId,
+  compact,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    onSortingChange: setSorting,
+    state: { sorting },
+  });
+
+  const totalPages = total ? Math.ceil(total / pageSize) : 1;
+  const showPagination = onPageChange && total && total > pageSize;
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead
+                    key={header.id}
+                    className={cn(compact && "py-1.5 text-xs")}
+                    style={{ width: header.getSize() !== 150 ? header.getSize() : undefined }}
+                  >
+                    {header.isPlaceholder ? null : header.column.getCanSort() ? (
+                      <button
+                        type="button"
+                        className="flex items-center gap-1 hover:text-foreground -ml-1 px-1 py-0.5 rounded cursor-pointer select-none"
+                        onClick={header.column.getToggleSortingHandler()}
+                      >
+                        {flexRender(header.column.columnDef.header, header.getContext())}
+                        {{
+                          asc: <ArrowUp className="h-3.5 w-3.5" />,
+                          desc: <ArrowDown className="h-3.5 w-3.5" />,
+                        }[header.column.getIsSorted() as string] ?? (
+                          <ArrowUpDown className="h-3.5 w-3.5 text-muted-foreground/50" />
+                        )}
+                      </button>
+                    ) : (
+                      flexRender(header.column.columnDef.header, header.getContext())
+                    )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {isLoading ? (
+              Array.from({ length: compact ? 3 : 5 }).map((_, i) => (
+                <TableRow key={i}>
+                  {columns.map((_, j) => (
+                    <TableCell key={j} className={cn(compact && "py-1.5")}>
+                      <Skeleton className="h-4 w-full max-w-[120px]" />
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : table.getRowModel().rows.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className={cn(
+                    "text-center text-muted-foreground",
+                    compact ? "py-4" : "py-8",
+                  )}
+                >
+                  {emptyMessage}
+                </TableCell>
+              </TableRow>
+            ) : (
+              table.getRowModel().rows.map((row) => {
+                const rowId = getRowId ? getRowId(row.original) : undefined;
+                const isSelected = selectedRowId != null && rowId != null && rowId === selectedRowId;
+
+                return (
+                  <TableRow
+                    key={row.id}
+                    className={cn(
+                      onRowClick && "cursor-pointer",
+                      isSelected && "bg-accent",
+                    )}
+                    onClick={() => onRowClick?.(row.original)}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell key={cell.id} className={cn(compact && "py-1.5")}>
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                );
+              })
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {showPagination && (
+        <div className="flex items-center justify-between px-2">
+          <p className="text-sm text-muted-foreground">
+            {total} registro{total !== 1 ? "s" : ""}
+          </p>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPageChange(page - 1)}
+              disabled={page <= 1}
+            >
+              <ChevronLeft className="h-4 w-4" />
+              Anterior
+            </Button>
+            <span className="text-sm text-muted-foreground">
+              {page} de {totalPages}
+            </span>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPageChange(page + 1)}
+              disabled={page >= totalPages}
+            >
+              Próximo
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}