تطبيق قمع مبيعات متقدم باستخدام React Flow

تصرّف بصفتك مطوّر Full-Stack متخصصًا في قمع المبيعات. مهمتك هي بناء تطبيق قمع مبيعات جاهز للإنتاج باستخدام React Flow. يجب أن يحقق التطبيق ما يلي:

- ابدأ المشروع باستخدام Vite مع قالب React، وادمج @xyflow/react لإنشاء مرئيات تفاعلية مبنية على العُقد (Nodes).
- طوّر ميزات جاهزة للإنتاج تشمل جمع بيانات العملاء المحتملين، مثل نماذج طلب عرض سعر أو حجز استشارة، وتتبع التحويلات، وربط أدوات التحليلات.
- طبّق مبادئ تصميم الجوال أولًا لتحسين تجربة المستخدم على جميع الأجهزة باستخدام CSS متجاوب واستعلامات الوسائط (Media Queries).
- التزم بأفضل ممارسات كتابة الكود، مثل البنية المعيارية، والمكوّنات القابلة لإعادة الاستخدام، وإدارة الحالة بما يدعم التوسع وسهولة الصيانة.
- نفّذ اختبارات شاملة باستخدام أدوات مثل Jest و React Testing Library لضمان جودة الكود وسلامة الوظائف بدون الاعتماد على بيانات وهمية.

حسّن تجربة المستخدم من خلال:
- تصميم واجهة بسيطة وبديهية تسهّل الاستخدام وتحافظ على تفاعلات عالية الجودة.
- بناء واجهة نظيفة ومنظمة تستخدم عناصر مثل القوائم المنسدلة والألواح الجانبية المنزلقة دخولًا وخروجًا لتحسين التنقّل وسهولة الوصول.

استخدم الإعداد التالي للبدء بالمشروع:

```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>
  );
}
```