# Find all page files (adjust path based on routing: pages/ or app/)
find . -path "*/pages/**/*.{tsx,jsx,ts,js}" -o -path "*/app/**/*.{tsx,jsx,ts,js}"

# Find all component files
find . -path "*/components/**/*.{tsx,jsx}" -o -path "*/src/components/**/*.{tsx,jsx}"

# Check for API route handlers
find . -path "*/pages/api/**/*.{ts,js}" -o -path "*/app/api/**/*.{ts,js}"

# Find utility/helper files
find . -path "*/lib/**/*.{ts,js}" -o -path "*/utils/**/*.{ts,js}" -o -path "*/helpers/**/*.{ts,js}"

# Find all component files
find . -path "*/src/**/*.{tsx,jsx}" -not -path "*/node_modules/*"

# Check for API/service files
find . -path "*/services/**/*.{ts,js}" -o -path "*/api/**/*.{ts,js}"

// ❌ BAD: Direct ID input
<input type="number" value={deviceId} onChange={...} />
<input placeholder="Enter device ID" />

// ❌ BAD: ID display in tables
<td>{report.deviceId}</td>
<td>Device #{item.deviceId}</td>

// ❌ BAD: ID in dropdown value without label
<select value={filters.deviceId}>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

// ✅ GOOD: Device name dropdown
<select value={filters.deviceId}>
  <option value="">All Devices</option>
  {devices.map(device => (
    <option key={device.id} value={device.id.toString()}>
      {device.deviceName}
    </option>
  ))}
</select>

// ✅ GOOD: ID to name mapping
{devices.find(d => d.id === item.deviceId)?.deviceName || `Device #${item.deviceId}`}

// ✅ GOOD: Fetched device name display
<td>{item.deviceName || devices.find(d => d.id === item.deviceId)?.deviceName}</td>

// ❌ BAD: Only fetches first page
const [devices, setDevices] = useState([]);
useEffect(() => {
  fetch('/api/devices?page=1&pageSize=10')
    .then(res => res.json())
    .then(data => setDevices(data.data.list));
}, []);

// ✅ GOOD: Fetches all pages via helper function
// Import path may vary: ../lib/fetchHelper, ../../utils/api, etc.
import { fetchAllDevices } from '../lib/fetchHelper';
// or
import { fetchAllDevices } from '@/utils/api';

useEffect(() => {
  fetchDevices();
}, []);

const fetchDevices = async () => {
  const allDevices = await fetchAllDevices(); // Handles pagination internally
  setDevices(allDevices);
};

// ✅ GOOD: Pagination loop in utility file
// Location: lib/fetchHelper.ts, utils/api.ts, or similar
export async function fetchAllItems<T>(url: string, pageSize = 100): Promise<T[]> {
  const allItems: T[] = [];
  let page = 1;
  let hasMore = true;

  while (hasMore) {
    const response = await fetch(`${url}?page=${page}&pageSize=${pageSize}`);

    if (!response.ok) {
      console.warn(`API ${url} returned ${response.status}, stopping pagination`);
      break;
    }

    const data = await response.json();
    if (data.code === 0) {  // Check success status
      const list = data.data.list || [];
      allItems.push(...list);

      if (allItems.length >= data.data.total || list.length === 0) {
        hasMore = false;
      } else {
        page++;
      }
    }
  }
  return allItems;
}

// ✅ GOOD: Three-tier fallback
const itemName = item.name ||
  items.find(i => i.id === item.itemId)?.name ||
  `Item #${item.itemId}`;

// ✅ GOOD: Auto-enrich fetched data
const listWithNames = data.data.list.map((report) => ({
  ...report,
  deviceName: report.deviceName ||
    devices.find(d => d.id === report.deviceId)?.deviceName ||
    `Device #${report.deviceId}`
}));

{
  "dependencies": {
    "dayjs": "^1.11.19",     // ✅ Recommended
    "date-fns": "^2.30.0",   // ✅ Good alternative
    "luxon": "^3.4.0"        // ✅ Good alternative
  }
}

// ❌ BAD: Raw timestamp display
<td>{report.createTime}</td>
<span>{item.timestamp}</span>

// ❌ BAD: Manual formatting
{new Date(item.createTime).toLocaleDateString()}

// ✅ GOOD: Using dayjs (recommended)
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/zh-cn';  // Or other locales

dayjs.extend(relativeTime);
dayjs.locale('zh-cn');

// Absolute format
<td>{dayjs(report.createTime).format('YYYY-MM-DD HH:mm:ss')}</td>
<span>{dayjs(item.timestamp).fromNow()}</span>  // "2 hours ago"

// ✅ GOOD: Using date-fns
import { format, formatDistanceToNow } from 'date-fns';
import { zhCN } from 'date-fns/locale';

<td>{format(new Date(report.createTime), 'yyyy-MM-dd HH:mm:ss')}</td>
<span>{formatDistanceToNow(new Date(item.timestamp), { addSuffix: true, locale: zhCN })}</span>

// ✅ GOOD: Using luxon
import { DateTime } from 'luxon';

<td>{DateTime.fromISO(report.createTime).toFormat('yyyy-MM-dd HH:mm:ss')}</td>
<span>{DateTime.fromISO(item.timestamp).toRelative()}</span>

# AutoPaddle App Review Report

## Summary
- **Files Reviewed**: X
- **Issues Found**: Y
- **Critical**: Z
- **Warnings**: W
- **Passed Checks**: V

## Critical Issues

### 1. Direct ID Input in Filter/Form
**File**: `<path-to-component-file>:<line_number>`
**Issue**: Users input ID directly via number/text input instead of dropdown selection
**Current**:
```typescript
<input type="number" value={filters.deviceId} />
// or
<input type="text" placeholder="Enter ID" />

<select value={filters.deviceId}>
  <option value="">All Items</option>
  {items.map(item => (
    <option key={item.id} value={item.id.toString()}>
      {item.name}  {/* or itemName, displayName, label, etc. */}
    </option>
  ))}
</select>

import dayjs from 'dayjs';
{dayjs(item.timestamp).format('YYYY-MM-DD HH:mm:ss')}
// or for relative time:
{dayjs(item.timestamp).fromNow()}  // "5 minutes ago"

### Step 7: Fix Issues Using AutoPaddle Builder

After generating the review report and identifying issues, use the `autopaddle-nextjs-builder` skill to automatically fix the identified problems:

**When to use this step:**
- After completing the review and generating the report
- When critical or high-priority issues are found
- When the user confirms they want the issues fixed

**How to invoke the builder:**

1. **Summarize the issues** - Prepare a concise summary of all issues found, organized by priority:

2. **Call the autopaddle-nextjs-builder skill** with the application path and issue summary:

**What the builder will do:**

The `autopaddle-nextjs-builder` skill will:
- ✅ Add dayjs imports to all relevant pages
- ✅ Replace raw timestamp displays with `dayjs().format()`
- ✅ Convert direct ID inputs to dropdown selects
- ✅ Implement or fix `fetchAllItems()` helper functions
- ✅ Add three-tier fallback ID-to-name mappings
- ✅ Update filter states to use dropdowns instead of text inputs
- ✅ Ensure all data fetching uses pagination loops

**Example workflow:**

```markdown
## Review Complete - 3 Issues Found

### Issues:
1. ❌ **Critical**: Raw timestamps in all pages (dayjs installed but not used)
   - Files: pages/list.tsx, pages/detail.tsx, components/DataTable.tsx
2. ⚠️ **High**: Entity filter uses text input instead of dropdown
   - File: components/FilterForm.tsx:45
3. ⚠️ **Medium**: Dropdown data only fetches first page
   - File: pages/dashboard.tsx:78

### Next Step:
Would you like me to use the autopaddle-nextjs-builder skill to automatically fix these issues?

[If user confirms]
Invoking autopaddle-nextjs-builder skill to fix:
- Import dayjs and format all timestamps across all pages
- Convert entity text input to dropdown with fetchAllEntities()
- Implement complete pagination data fetching for all dropdowns