8.9 פרויקטים פרויקט

פרויקט - בניית דשבורד ניהולי מלא¶

בפרויקט זה תבנו דשבורד ניהולי מלא באמצעות Mantine, Framer Motion, וכל הטכניקות שלמדנו בפרק. הדשבורד כולל ניווט, כרטיסי סטטיסטיקות, טבלת נתונים, מודאלים לפעולות CRUD, מצב כהה, עיצוב רספונסיבי ואנימציות מעברים.

דרישות הפרויקט¶

מבנה כללי¶

שימוש ב-AppShell של Mantine עם header, sidebar ותוכן
עיצוב רספונסיבי שעובד בטלפון, טאבלט ודסקטופ
מצב כהה עם כפתור החלפה ושמירת העדפה
Theme מותאם עם צבעים וברירות מחדל
אנימציות מעבר בין חלקי הממשק

חלק 1 - Theme והגדרות¶

צרו קובץ theme.ts עם:
- צבע ראשי מותאם (סקלת 10 גוונים)
- פונטים בעברית (Rubik לטקסט, Heebo לכותרות)
- ברירות מחדל לקומפוננטות (Button, TextInput, Paper, Card)
- CSSVariablesResolver עם משתנים מותאמים לבהיר ולכהה

- sidebar-width
- header-height
- card-bg
- card-hover-bg
- text-primary
- text-secondary
- border-color
- success-color
- warning-color
- danger-color

חלק 2 - Layout ראשי¶

לוגו בצד ימין
כפתור Burger לטלפון
כפתור החלפת מצב כהה/בהיר (ActionIcon)
אווטאר משתמש עם Menu (פרופיל, הגדרות, התנתק)

NavLink עם 5 קישורים: דשבורד, משתמשים, מוצרים, הזמנות, הגדרות
קישור "הגדרות" עם תת-קישורים: כללי, אבטחה, התראות
הקישור הפעיל מודגש
הסיידבר מתכווץ בטלפון ומופיע עם Burger
בתחתית הסיידבר: מידע על המשתמש המחובר

טקסט זכויות יוצרים
קישורים: תנאי שימוש, פרטיות, צור קשר

חלק 3 - דף דשבורד ראשי¶

כרטיסי סטטיסטיקות¶

4 כרטיסים ב-SimpleGrid רספונסיבי (1/2/4 לפי גודל מסך)
כל כרטיס מציג: כותרת, ערך מספרי, אחוז שינוי (צבע ירוק/אדום)
אנימציית כניסה עם Framer Motion (stagger)
hover effect (הרמה + צל)

נתונים לדוגמה:

משתמשים: 2,345 (+12.5%)
הזמנות: 789 (-3.2%)
הכנסות: 156,789 ש"ח (+18.7%)
שיעור המרה: 4.8% (+2.1%)

גרף placeholder¶

Paper עם כותרת "מגמת הכנסות - 12 חודשים אחרונים"
תוכן placeholder (רשימת ערכים או טקסט "גרף יוצג כאן")
רוחב מלא

טבלת נתונים¶

Table של Mantine עם: striped, highlightOnHover, withTableBorder
עמודות: שם, אימייל, תפקיד, סטטוס (Badge), תאריך הצטרפות, פעולות (Menu)
לפחות 5 שורות נתונים
Menu פעולות: עריכה, צפייה, מחיקה
Pagination בתחתית
כפתור "הוסף משתמש" שפותח Modal

חלק 4 - מודאלים לפעולות CRUD¶

מודאל הוספה/עריכה¶

Modal של Mantine עם useDisclosure
טופס עם useForm:
שם מלא (TextInput, חובה, מינימום 2 תווים)
אימייל (TextInput, חובה, פורמט תקין)
תפקיד (Select: מנהל, מפתח, מעצב, QA, שיווק)
סטטוס (Radio: פעיל, לא פעיל, מושהה)
ולידציה על blur ועל שינוי
כפתורי שמירה וביטול

מודאל אישור מחיקה¶

Modal קטן עם אזהרה
כפתור "מחק" אדום וכפתור "ביטול"
טקסט: "האם אתה בטוח שברצונך למחוק את [שם]?"

Drawer לצפייה בפרטים¶

Drawer שנפתח מצד שמאל
מציג את כל פרטי המשתמש
אווטאר גדול, שם, תפקיד, סטטוס
פעילות אחרונה (רשימה)
כפתורי "עריכה" ו"סגור"

חלק 5 - אנימציות¶

השתמשו ב-Framer Motion עבור:

אנימציית כניסה - כרטיסי הסטטיסטיקות נכנסים ב-stagger (אחד אחרי השני)
אנימציית hover - כרטיסיות עם whileHover (הרמה + צל)
אנימציית רשימה - שורות בטבלה עם AnimatePresence (כניסה/יציאה)
אנימציית מעבר - כשמוחקים שורה, אנימציית יציאה (slide + fade)
אנימציית מודאל - המודאלים נפתחים עם אנימציית scale + fade (Mantine מספקת את זה מחוץ לקופסה, אבל אפשר להוסיף Framer Motion לתוכן הפנימי)

חלק 6 - רספונסיביות¶

וודאו שהדשבורד עובד בכל גודל מסך:

טלפון (< 768px):
סיידבר מוסתר, Burger בheader
כרטיסי סטטיסטיקות: עמודה אחת
טבלה: גלילה אופקית או תצוגת כרטיסים
מודאלים: fullScreen
טאבלט (768px - 1024px):
סיידבר קבוע
כרטיסי סטטיסטיקות: 2 בשורה
טבלה רגילה
דסקטופ (> 1024px):
סיידבר קבוע
כרטיסי סטטיסטיקות: 4 בשורה
טבלה מלאה

חלק 7 - מצב כהה¶

כפתור החלפה ב-header (ActionIcon)
שמירת העדפה אוטומטית (Mantine מטפלת)
כל הקומפוננטות מגיבות אוטומטית
CSS Modules שמשתמשים ב-var(--card-bg) וכו' מה-CSSVariablesResolver
Transition חלק במעבר (transition: background-color 0.3s)

בונוס¶

הוסיפו Tabs לדף הדשבורד: סקירה כללית, הזמנות אחרונות, ביצועים
הוסיפו Skeleton loading כשה"נתונים נטענים"
הוסיפו Notification על פעולות (שמירה, מחיקה, עדכון)
הוסיפו Breadcrumbs בראש התוכן
הוסיפו חיפוש גלובלי עם Spotlight (Ctrl+K)

מבנה קבצים מומלץ¶

src/
  components/
    Layout/
      AppLayout.tsx
      Header.tsx
      Sidebar.tsx
      Footer.tsx
    Dashboard/
      StatsCards.tsx
      DataTable.tsx
      ChartPlaceholder.tsx
    Modals/
      UserFormModal.tsx
      DeleteConfirmModal.tsx
    UserDrawer.tsx
  hooks/
    useUsers.ts
  theme/
    theme.ts
    cssVariables.ts
  types/
    user.ts
  App.tsx
  main.tsx

דגשים לבדיקה¶

[ ] הדשבורד מציג נתונים נכון
[ ] אפשר להוסיף, לערוך ולמחוק משתמשים דרך מודאלים
[ ] הטבלה כוללת Pagination תקין
[ ] מצב כהה עובד על כל הקומפוננטות
[ ] העדפת מצב נשמרת אחרי רענון
[ ] הדשבורד רספונסיבי (טלפון, טאבלט, דסקטופ)
[ ] הסיידבר מתכווץ בטלפון
[ ] אנימציות חלקות ולא חוסמות
[ ] ולידציית טפסים עובדת
[ ] הקוד מאורגן בקבצים ברורים
[ ] TypeScript ללא שגיאות
[ ] אין emojis בקוד