Cline rules

1# AI Understanding Guide
2 
3## Project Overview
4 
5This project is a web application built with Next.js and TypeScript. It provides a platform for managing personal finances, including tracking income and expenses, categorizing transactions, and configuring application settings. It also includes various tools for developers.
6 
7## Tech Stack
8 
9- Frontend Framework: Next.js 14.x
10- Language: TypeScript 5.x
11- State Management: @tanstack/react-query v5 (Server State), nuqs (URL State), react-hook-form (Form State)
12- UI Components: Shadcn UI (Base components), Radix UI (Accessibility), TailwindCSS (Styling)
13- Data Display: @tanstack/react-table
14- Validation: Class Validator
15- Form Handling: react-hook-form
16- Routing: Next.js App Router with Parallel Routes
17 
18## Key Features
19 
20- Money Tracking: Allows users to track their income and expenses.
21- Transaction Management: Enables users to create, read, update, and delete transactions.
22- Category Management: Enables users to categorize their transactions.
23- Settings Management: Allows users to configure application settings.
24- Tools: Provides access to various tools.
25 
26## Code Conventions
27 
28- TypeScript for all code.
29- Strong typing with no 'any'.
30- Interfaces over types for object definitions.
31- Const assertions for literals.
32- Discriminated unions for complex states.
33- Functional components only.
34- Props interface for every component.
35- Early returns for conditional rendering.
36- Error boundaries for error handling.
37 
38## Naming Conventions
39 
40- Files/Directories: kebab-case
41- Components: PascalCase
42- Functions/Variables: camelCase
43- Constants: SCREAMING_SNAKE_CASE
44- Types/Interfaces: PascalCase
45 
46## Folder Structure
47 
48```plaintext
49├── app/
50│   ├── api/            # API routes
51│   ├── (dashboard)/    # Dashboard routes group
52│   └── _components/    # Page-specific components
53├── components/
54│   ├── ui/            # Shadcn components
55│   └── shared/        # Shared components
56├── lib/
57│   ├── utils/         # Utility functions
58│   ├── config/        # Configuration
59│   └── types/         # TypeScript types
60├── hooks/             # Custom React hooks
61└── public/            # Static assets
62```
63 
64## Code Conversion Examples
65 
66- Formatting numbers as currency in Vietnamese format using `toCurrency` in `src/utils/format.ts`:
67 
68```typescript
69  import { toCurrency } from "@/utils/format";
70 
71  const amount = 1000000;
72  const formattedAmount = toCurrency(amount); // Output: 1.000.000 ₫
73```
74 
75- Formatting dates to Vietnamese locale string using `formatDate` in `src/utils/format.ts`:
76 
77```typescript
78  import { formatDate } from "@/utils/format";
79 
80  const date = new Date();
81  const formattedDate = formatDate(date); // Output: [Current Date in Vietnamese format]
82```
83 
84- Serializing values to JSON strings using `JSON.stringify` in `src/lib/parsers.ts`:
85 
86```typescript
87  import { serialize } from "@/lib/parsers";
88 
89  const data = { name: "John", age: 30 };
90  const serializedData = JSON.stringify(data); // Output: {"name":"John","age":30}
91```
92 
93- Converting JSON to TypeScript using the tool in `src/app/(dashboard)/(tools)/json-to-typescript/page.tsx`:
94 
95  This feature provides a user interface for converting JSON data to TypeScript interfaces. Users can input JSON data and the tool will generate the corresponding TypeScript interface.
96 
97- Transforming CSS values using `CSS.Translate.toString(transform)` in `src/components/ui/sortable.tsx`:
98 
99```typescript
100  import * as CSS from "csstype";
101 
102  const transform = { x: 10, y: 20 };
103  const cssTransform = CSS.Translate.toString(transform); // Output: translate(10px, 20px)
104```
105