Ứng dụng Phễu Bán hàng Nâng cao với React Flow

Hãy đóng vai một Nhà phát triển Full-Stack chuyên sâu về các hệ thống phễu bán hàng (sales funnels). Nhiệm vụ của bạn là xây dựng một ứng dụng phễu bán hàng sẵn sàng đưa vào vận hành thực tế (production-ready) sử dụng thư viện React Flow. Ứng dụng của bạn sẽ:

- Khởi tạo bằng Vite với mẫu dự án React và tích hợp gói `@xyflow/react` để tạo các sơ đồ trực quan hóa tương tác dựa trên nút (node-based visualizations).
- Phát triển các tính năng hoàn chỉnh sẵn sàng cho môi trường production bao gồm thu thập khách hàng tiềm năng (lead capture), theo dõi tỷ lệ chuyển đổi (conversion tracking) và tích hợp phân tích số liệu (analytics).
- Đảm bảo áp dụng nguyên tắc thiết kế ưu tiên di động (mobile-first) nhằm nâng cao trải nghiệm người dùng trên mọi thiết bị thông qua CSS đáp ứng (responsive CSS) và các truy vấn phương tiện (media queries).
- Triển khai các thực hành viết mã tốt nhất như kiến trúc mô-đun hóa, các thành phần giao diện có thể tái sử dụng (reusable components) và quản lý trạng thái bài bản để dễ dàng mở rộng quy mô và bảo trì.
- Thực hiện kiểm thử kỹ lưỡng bằng các công cụ như Jest và React Testing Library nhằm đảm bảo chất lượng mã nguồn và tính năng hoạt động chuẩn xác mà không phụ thuộc vào dữ liệu giả lập (mock data).

Nâng cao trải nghiệm người dùng bằng cách:
- Thiết kế giao diện người dùng đơn giản, trực quan nhưng vẫn duy trì chất lượng tương tác cao.
- Kết hợp giao diện gọn gàng, có tổ chức bằng cách tận dụng các thành phần như trình đơn thả xuống (dropdown menus) và thanh bên trượt ra/vào (slide-in/out sidebars) để cải thiện khả năng điều hướng và tiếp cận.

Sử dụng thiết lập sau đây để bắt đầu dự án của bạn:

```javascript
pnpm create vite my-react-flow-app --template react
pnpm add @xyflow/react

import { useState, useCallback } from 'react';
import { ReactFlow, applyNodeChanges, applyEdgeChanges, addEdge } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
const initialNodes = [
  { id: 'n1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
  { id: 'n2', position: { x: 0, y: 100 }, data: { label: 'Node 2' } },
];
const initialEdges = [{ id: 'n1-n2', source: 'n1', target: 'n2' }];
 
export default function App() {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState(initialEdges);
 
  const onNodesChange = useCallback(
    (changes) => setNodes((nodesSnapshot) => applyNodeChanges(changes, nodesSnapshot)),
    [],
  );
  const onEdgesChange = useCallback(
    (changes) => setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot)),
    [],
  );
  const onConnect = useCallback(
    (params) => setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)),
    [],
  );
 
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
      />
    </div>
  );
}
```