projects:
  GIRO-D:
    path: GIRO/apps/desktop/src/
    stack: React 18 + TypeScript + TailwindCSS + Tauri 2.0
    purpose: PDV retail and Enterprise EPC desktop app
  DASH:
    path: giro-license-server/dashboard/
    stack: Next.js 14 + TailwindCSS + shadcn/ui
    purpose: License administration dashboard
  WEB:
    path: giro-license-server/giro-website/
    stack: Next.js + TailwindCSS
    purpose: Marketing website

shared_patterns:
  - TailwindCSS + shadcn/ui components
  - Zustand for client state
  - TanStack Query for server state
  - Zod for validation

apps/desktop/src/
├── components/
│   ├── ui/              # Shadcn components
│   ├── layout/          # Shell, Sidebar, Header
│   ├── pdv/             # PDV específicos
│   ├── products/        # Produtos
│   └── common/          # Compartilhados
├── pages/
│   ├── pdv/
│   ├── products/
│   └── reports/
├── hooks/
│   ├── useProducts.ts
│   ├── usePDV.ts
│   └── useAuth.ts
├── stores/
│   ├── authStore.ts
│   └── pdvStore.ts
├── services/
│   └── tauri.ts         # Wrappers para commands
├── types/
│   └── index.ts
└── lib/
    └── utils.ts

'use client'; // Apenas se usar hooks

import { type FC, useState, useCallback } from 'react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';

interface ProductCardProps {
  product: Product;
  onSelect?: (product: Product) => void;
  className?: string;
}

export const ProductCard: FC<ProductCardProps> = ({ product, onSelect, className }) => {
  const handleClick = useCallback(() => {
    onSelect?.(product);
  }, [product, onSelect]);

  return (
    <div
      className={cn('p-4 rounded-lg border hover:shadow-md transition-shadow', className)}
      onClick={handleClick}
      role="button"
      tabIndex={0}
      aria-label={`Selecionar ${product.name}`}
    >
      <h3 className="font-semibold">{product.name}</h3>
      <p className="text-2xl font-bold text-primary">{formatCurrency(product.salePrice)}</p>
    </div>
  );
};

import { invoke } from '@tauri-apps/api/core';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

export function useProducts(filter?: ProductFilter) {
  return useQuery({
    queryKey: ['products', filter],
    queryFn: () => invoke<Product[]>('get_products', { filter }),
    staleTime: 1000 * 60 * 5, // 5 minutos
  });
}

export function useCreateProduct() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (input: CreateProductInput) => invoke<Product>('create_product', { input }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['products'] });
    },
  });
}

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface PDVStore {
  items: SaleItem[];
  customer: Customer | null;
  addItem: (product: Product, quantity: number) => void;
  removeItem: (index: number) => void;
  clear: () => void;
  total: () => number;
}

export const usePDVStore = create<PDVStore>()(
  persist(
    (set, get) => ({
      items: [],
      customer: null,

      addItem: (product, quantity) => {
        set((state) => ({
          items: [...state.items, { product, quantity }],
        }));
      },

      removeItem: (index) => {
        set((state) => ({
          items: state.items.filter((_, i) => i !== index),
        }));
      },

      clear: () => set({ items: [], customer: null }),

      total: () => {
        const { items } = get();
        return items.reduce((sum, item) => sum + item.product.salePrice * item.quantity, 0);
      },
    }),
    { name: 'pdv-storage' }
  )
);

/* Cores GIRO */
--primary: #2563eb; /* Blue 600 */
--primary-hover: #1d4ed8; /* Blue 700 */
--success: #16a34a; /* Green 600 */
--warning: #ea580c; /* Orange 600 */
--error: #dc2626; /* Red 600 */
--background: #f8fafc; /* Slate 50 */
--foreground: #0f172a; /* Slate 900 */