{"id":31669615,"url":"https://github.com/alyssonbarrera/caseflow","last_synced_at":"2026-04-11T01:19:26.181Z","repository":{"id":316746202,"uuid":"1064671254","full_name":"alyssonbarrera/caseflow","owner":"alyssonbarrera","description":"Visual Criminal Investigation Workflow Tool","archived":false,"fork":false,"pushed_at":"2025-09-26T13:24:50.000Z","size":159,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-26T13:30:29.703Z","etag":null,"topics":["css","hookform-resolvers","html","javascript","lucide-react","radix-ui","react","react-dnd","react-hook-form","reactflow","shadcn-ui","sonner","tailwindcss","tanstack-router","typescript","xyflow","zod"],"latest_commit_sha":null,"homepage":"https://caseflow.alyssonbarrera.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alyssonbarrera.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-26T11:31:01.000Z","updated_at":"2025-09-26T13:24:54.000Z","dependencies_parsed_at":"2025-09-26T13:30:40.461Z","dependency_job_id":null,"html_url":"https://github.com/alyssonbarrera/caseflow","commit_stats":null,"previous_names":["alyssonbarrera/caseflow"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/alyssonbarrera/caseflow","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alyssonbarrera%2Fcaseflow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alyssonbarrera%2Fcaseflow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alyssonbarrera%2Fcaseflow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alyssonbarrera%2Fcaseflow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alyssonbarrera","download_url":"https://codeload.github.com/alyssonbarrera/caseflow/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alyssonbarrera%2Fcaseflow/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278877088,"owners_count":26061380,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","hookform-resolvers","html","javascript","lucide-react","radix-ui","react","react-dnd","react-hook-form","reactflow","shadcn-ui","sonner","tailwindcss","tanstack-router","typescript","xyflow","zod"],"created_at":"2025-10-08T01:51:31.912Z","updated_at":"2025-10-08T01:51:42.675Z","avatar_url":"https://github.com/alyssonbarrera.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![CaseFlow Screenshot](.github/print-1.webp)\n\n# 🔍 CaseFlow (English)\n\nVisual criminal investigation workflow tool that allows detectives to create and manipulate investigation flows in a visual analysis board. Built with modern React stack featuring drag-and-drop evidence management, multimedia clue support, and interactive case mapping.\n\n## 🎯 Description\n\nCaseFlow is an internal tool for criminal investigation departments where investigators organize investigation categories and clues within a visual workflow, simulating the reasoning line of an investigation.\n\n**Key Concepts:**\n\n- **Groups (Categories)**: Investigation groupings (e.g., Physical Evidence, Testimonies, Suspects)\n- **Clues**: Items within each Group (e.g., Fingerprint found at crime scene, Witness saw red car, Suspect John)\n- **Connections**: Visual flow between Groups indicating investigation reasoning\n\n## 🚀 Installation\n\n```bash\n$ pnpm install\n```\n\n## 🏃 Running the app\n\n```bash\n# development\n$ pnpm run dev\n\n# alternative start command\n$ pnpm run start\n\n# build for production\n$ pnpm run build\n\n# preview production build\n$ pnpm run serve\n```\n\n## 🧪 Testing\n\n```bash\n# run tests\n$ pnpm run test\n```\n\n## 🛠️ Tech Stack\n\n- **Frontend**: React 19, TypeScript 5.7\n- **Routing**: TanStack Router 1.132\n- **Styling**: Tailwind CSS 4.0, Radix UI, shadcn/ui\n- **Canvas**: ReactFlow 12.8 (infinite canvas with pan/zoom)\n- **Drag \u0026 Drop**: React DND 16.0\n- **Forms**: React Hook Form + Zod validation\n- **State Management**: ReactFlow state + Custom hooks\n- **Build Tool**: Vite 6.3\n- **Package Manager**: pnpm 10.14\n- **Linting**: Biome 2.2 + Ultracite\n- **Git Hooks**: Lefthook\n\n## ✨ Features\n\n### Investigation Workflow\n\n- [x] Create and manage investigation Groups (categories)\n- [x] Infinite canvas with pan and zoom functionality\n- [x] Drag and drop Groups freely on canvas\n- [x] Connect Groups to show investigation flow\n- [x] Visual connection lines between related categories\n\n### Clue Management\n\n- [x] Create clues with multiple media types (Text, Image, Video, Audio)\n- [x] Drag and drop clues between Groups\n- [x] Reorder clues within the same Group\n- [x] Inline editing of clues without leaving the screen\n- [x] Visual feedback during drag operations\n- [x] Placeholder indicators for drop zones\n\n### User Experience\n\n- [x] Responsive design (tablet, notebook, desktop)\n- [x] Intuitive modal-based clue editing\n- [x] Visual drag feedback with custom drag layers\n- [x] Accessibility support with ARIA labels\n- [x] Toast notifications for user actions\n\n### Advanced Features\n\n- [x] **Undo/Redo system** with keyboard shortcuts (Ctrl+Z/Ctrl+Y)\n- [x] **Export workflow** to JSON (Groups, Clues, and connections)\n- [x] **Multimedia preview** inline for images, videos, and audio\n- [x] **Optimistic updates** for immediate UI feedback\n- [x] **Performance optimizations** with React.memo, React.useCallback and React.useMemo\n\n### Performance \u0026 Optimization\n\n- [x] Granular updates (changes in one clue don't re-render all Groups)\n- [x] Component memoization for optimal rendering\n- [x] Bundle optimization with manual chunks\n- [x] Custom hooks for reusable logic\n- [x] TypeScript strict mode for type safety\n\n## 🏗️ Project Structure\n\nThe project follows a **MVVM (Model-View-ViewModel) pattern** with clear separation of concerns:\n\n```\nsrc/\n├── core/                    # Global shared resources\n│   ├── components/ui/       # shadcn/ui components\n│   └── lib/                 # Utility functions\n├── modules/\n│   └── flow/                # Main investigation flow module\n│       ├── components/      # Flow-specific components\n│       ├── contexts/        # React contexts\n│       ├── forms/           # Form components\n│       ├── hooks/           # Custom hooks\n│       ├── nodes/           # ReactFlow node components\n│       ├── schemas/         # Zod validation schemas\n│       ├── screens/         # Screen components\n│       ├── types/           # TypeScript type definitions\n│       └── utils/           # Module utilities\n├── routes/                  # TanStack Router routes\n└── test/                    # Test utilities and factories\n```\n\n## 🎨 Component Pattern\n\nEach complex component follows the **MVVM (Model-View-ViewModel) pattern**:\n\n```typescript\n// Component entry point (ViewModel)\nexport function ClueItem(props) {\n  return \u003cClueItemView {...useClueItemModel(props)} /\u003e;\n}\n\n// Business logic and state management (Model)\nexport function useClueItemModel(props) {\n  // Custom hooks, state management, event handlers\n  return { ... };\n}\n\n// Presentation layer (View)\nexport function ClueItemView(props) {\n  // Pure UI rendering with props\n  return \u003cdiv\u003e...\u003c/div\u003e;\n}\n```\n\n## 🔧 Development\n\nThe project uses modern development tools:\n\n- **Hot Module Replacement** with Vite\n- **TypeScript strict mode** for type safety\n- **Biome** for super-fast linting and formatting\n- **Lefthook** for automated git hooks\n- **Auto-generated** TanStack Router routes\n\n## 🎯 Key Highlights\n\n- **Modern React 19** with latest features\n- **Advanced TypeScript** usage with discriminated unions\n- **Professional drag-and-drop** implementation\n- **Custom undo/redo system** with keyboard shortcuts\n- **Performance-optimized** rendering and state management\n- **Accessibility-first** approach with ARIA support\n- **Production-ready** code structure and optimization\n\n---\n\n# 🔍 CaseFlow (Português)\n\nFerramenta visual de fluxo de investigação criminal que permite aos detetives criar e manipular fluxos de investigação em um quadro de análise visual. Construído com stack React moderna, apresentando gerenciamento de evidências com drag-and-drop, suporte a pistas multimídia e mapeamento interativo de casos.\n\n## 🎯 Descrição\n\nCaseFlow é uma ferramenta interna para departamentos de investigação criminal onde investigadores organizam categorias de investigação e pistas dentro de um fluxo visual, simulando a linha de raciocínio de uma investigação.\n\n**Conceitos Principais:**\n\n- **Grupos (Categorias)**: Agrupamentos de investigação (ex.: Evidências Físicas, Depoimentos, Suspeitos)\n- **Pistas**: Itens dentro de cada Grupo (ex.: Impressão digital encontrada na cena do crime, Testemunha viu carro vermelho, Suspeito João)\n- **Conexões**: Fluxo visual entre Grupos indicando o raciocínio da investigação\n\n## 🚀 Instalação\n\n```bash\n$ pnpm install\n```\n\n## 🏃 Executando a aplicação\n\n```bash\n# desenvolvimento\n$ pnpm run dev\n\n# comando alternativo de start\n$ pnpm run start\n\n# build para produção\n$ pnpm run build\n\n# preview do build de produção\n$ pnpm run serve\n```\n\n## 🧪 Testes\n\n```bash\n# executar testes\n$ pnpm run test\n```\n\n## 🛠️ Stack Tecnológica\n\n- **Frontend**: React 19, TypeScript 5.7\n- **Roteamento**: TanStack Router 1.132\n- **Estilização**: Tailwind CSS 4.0, Radix UI, shadcn/ui\n- **Canvas**: ReactFlow 12.8 (canvas infinito com pan/zoom)\n- **Drag \u0026 Drop**: React DND 16.0\n- **Formulários**: React Hook Form + validação Zod\n- **Gerenciamento de Estado**: Estado do ReactFlow + Hooks customizados\n- **Ferramenta de Build**: Vite 6.3\n- **Gerenciador de Pacotes**: pnpm 10.14\n- **Linting**: Biome 2.2 + Ultracite\n- **Git Hooks**: Lefthook\n\n## ✨ Funcionalidades\n\n### Fluxo de Investigação\n\n- [x] Criar e gerenciar Grupos de investigação (categorias)\n- [x] Canvas infinito com funcionalidade de pan e zoom\n- [x] Arrastar e soltar Grupos livremente no canvas\n- [x] Conectar Grupos para mostrar fluxo de investigação\n- [x] Linhas de conexão visual entre categorias relacionadas\n\n### Gerenciamento de Pistas\n\n- [x] Criar pistas com múltiplos tipos de mídia (Texto, Imagem, Vídeo, Áudio)\n- [x] Arrastar e soltar pistas entre Grupos\n- [x] Reordenar pistas dentro do mesmo Grupo\n- [x] Edição inline de pistas sem sair da tela\n- [x] Feedback visual durante operações de arrastar\n- [x] Indicadores de placeholder para zonas de soltar\n\n### Experiência do Usuário\n\n- [x] Design responsivo (tablet, notebook, desktop)\n- [x] Edição intuitiva de pistas baseada em modal\n- [x] Feedback visual de arrastar com camadas de arrastar customizadas\n- [x] Suporte à acessibilidade com labels ARIA\n- [x] Notificações toast para ações do usuário\n\n### Funcionalidades Avançadas\n\n- [x] **Sistema Desfazer/Refazer** com atalhos de teclado (Ctrl+Z/Ctrl+Y)\n- [x] **Exportar workflow** para JSON (Grupos, Pistas e conexões)\n- [x] **Preview multimídia** inline para imagens, vídeos e áudio\n- [x] **Atualizações otimistas** para feedback imediato da UI\n- [x] **Otimizações de performance** com React.memo, React.useCallback e React.useMemo\n\n### Performance \u0026 Otimização\n\n- [x] Atualizações granulares (mudanças em uma pista não re-renderizam todos os Grupos)\n- [x] Memoização de componentes para renderização otimizada\n- [x] Otimização de bundle com chunks manuais\n- [x] Hooks customizados para lógica reutilizável\n- [x] Modo strict do TypeScript para segurança de tipos\n\n## 🏗️ Estrutura do Projeto\n\nO projeto segue o padrão **MVVM (Model-View-ViewModel)** com clara separação de responsabilidades:\n\n```\nsrc/\n├── core/                    # Recursos globais compartilhados\n│   ├── components/ui/       # Componentes shadcn/ui\n│   └── lib/                 # Funções utilitárias\n├── modules/\n│   └── flow/                # Módulo principal do fluxo de investigação\n│       ├── components/      # Componentes específicos do fluxo\n│       ├── contexts/        # Contextos React\n│       ├── forms/           # Componentes de formulário\n│       ├── hooks/           # Hooks customizados\n│       ├── nodes/           # Componentes de nó do ReactFlow\n│       ├── schemas/         # Schemas de validação Zod\n│       ├── screens/         # Componentes de tela\n│       ├── types/           # Definições de tipos TypeScript\n│       └── utils/           # Utilitários do módulo\n├── routes/                  # Rotas do TanStack Router\n└── test/                    # Utilitários de teste e factories\n```\n\n## 🎨 Padrão de Componentes\n\nCada componente complexo segue o padrão **MVVM (Model-View-ViewModel)**:\n\n```typescript\n// Ponto de entrada do componente (ViewModel)\nexport function ClueItem(props) {\n  return \u003cClueItemView {...useClueItemModel(props)} /\u003e;\n}\n\n// Lógica de negócio e gerenciamento de estado (Model)\nexport function useClueItemModel(props) {\n  // Hooks customizados, gerenciamento de estado, manipuladores de eventos\n  return { ... };\n}\n\n// Camada de apresentação (View)\nexport function ClueItemView(props) {\n  // Renderização pura da UI com props\n  return \u003cdiv\u003e...\u003c/div\u003e;\n}\n```\n\n## 🔧 Desenvolvimento\n\nO projeto usa ferramentas modernas de desenvolvimento:\n\n- **Hot Module Replacement** com Vite\n- **Modo strict do TypeScript** para segurança de tipos\n- **Biome** para linting e formatação super rápidos\n- **Lefthook** para git hooks automatizados\n- **Rotas auto-geradas** do TanStack Router\n\n## 🎯 Principais Destaques\n\n- **React 19 moderno** com recursos mais recentes\n- **Uso avançado do TypeScript** com discriminated unions\n- **Implementação profissional de drag-and-drop**\n- **Sistema customizado de desfazer/refazer** com atalhos de teclado\n- **Renderização e gerenciamento de estado otimizados para performance**\n- **Abordagem accessibility-first** com suporte ARIA\n- **Estrutura de código e otimização prontas para produção**\n\n## Video\n\nhttps://github.com/user-attachments/assets/aa93f14e-a3d9-4d95-ba03-0629bfb6aff2\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falyssonbarrera%2Fcaseflow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falyssonbarrera%2Fcaseflow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falyssonbarrera%2Fcaseflow/lists"}