ff:"ExplicitChatIdProvider" 100:I[903690,["$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$7d","$7e","$7f","$80","$79","$7a","$7b","$81","$82"],"$ff"] 101:I[838238,["$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$7d","$7e","$7f","$80","$79","$7a","$7b","$81","$82"],"SWRDataProvider"] 103:[] 104:[["b_7CxLB2J3sYJ",null]] 105:[["b_7CxLB2J3sYJ",{"templateVersionId":null,"templateCanonId":null}]] 106:[["b_M6VUcDQbgx2","$D2025-11-16T14:45:10.699Z"],["b_LnHQj58SCPR","$D2025-11-16T14:55:40.085Z"],["b_RL74CzVf9Lz","$D2025-11-16T14:57:12.449Z"],["b_JRn1ZSM1emf","$D2025-11-16T15:00:03.650Z"],["b_RAkXn9kzoB3","$D2025-11-16T15:01:13.602Z"],["b_BVLBu7U5NCB","$D2025-11-16T15:02:14.003Z"],["b_SoRdwGSTA13","$D2025-11-16T15:04:44.365Z"],["b_Z2b3xujGnPX","$D2025-11-16T15:08:42.316Z"],["b_NAkFEKrmczL","$D2025-11-16T18:00:58.131Z"],["b_VAUv94GroO3","$D2025-11-16T20:10:45.054Z"],["b_cdZnR3JMIov","$D2025-11-16T20:47:38.222Z"],["b_eeHmubdS79R","$D2025-11-16T20:48:24.101Z"],["b_aTn734Ntuac","$D2025-11-16T21:17:17.196Z"],["b_GjXQSuk3APL","$D2025-11-16T21:18:47.480Z"],["b_piku3g5YcdO","$D2025-11-16T21:21:22.336Z"],["b_R45DOri7nIQ","$D2025-11-16T21:27:30.296Z"],["b_geLT9NrVbu2","$D2025-11-16T21:30:21.826Z"],["b_u6ZP1DmR1m9","$D2025-11-16T21:31:11.723Z"],["b_oHM5Ac2pVla","$D2025-11-16T21:32:16.868Z"],["b_nsb8BoHVsdQ","$D2025-11-16T21:34:53.194Z"],["b_E8fS1yMPtZn","$D2025-11-16T21:38:29.821Z"],["b_FMyPZpPxOka","$D2025-11-16T21:39:26.583Z"],["b_kbXiFmFL3Pm","$D2025-11-16T21:44:01.428Z"],["b_jKvmO0IrosX","$D2025-11-16T21:45:29.274Z"],["b_5jIdNb9G7xB","$D2025-11-16T22:00:20.023Z"],["b_eXvRtXl8ZWd","$D2025-11-16T22:03:02.349Z"],["b_asdF2AONe9B","$D2025-11-16T22:04:52.419Z"],["b_mSDxzDli1TI","$D2025-11-16T22:07:36.053Z"],["b_Tx9TL6Ox2ka","$D2025-11-16T22:10:09.979Z"],["b_9r2GBFP9Uoq","$D2025-11-16T22:11:47.363Z"],["b_rklgjaAZOud","$D2025-11-16T22:12:59.653Z"],["b_s0Fk6HXJjgv","$D2025-11-16T22:15:50.238Z"],["b_ZFSfNKhKD9y","$D2025-11-16T22:18:34.154Z"],["b_egLoV0NGi2e","$D2025-11-16T22:19:23.095Z"],["b_DQPbpva6ydW","$D2025-11-16T22:30:06.381Z"],["b_A26ytIRbgHL","$D2025-11-16T22:32:16.510Z"],["b_vDUyt0HBFvy","$D2025-11-16T22:33:33.117Z"],["b_Gn8rzCWjakP","$D2025-11-16T22:34:08.150Z"],["b_GK7xY1JxR4W","$D2025-11-16T22:34:46.090Z"],["b_J5HmlWMLekR","$D2025-11-16T22:35:23.751Z"],["b_XmkncP2Lajr","$D2025-11-16T22:35:41.979Z"],["b_UVZWEM9teaK","$D2025-11-16T22:36:18.014Z"],["b_1fdgqk7U4Nz","$D2025-11-16T22:53:38.831Z"],["b_2dOIzvHhdN7","$D2025-11-16T22:57:54.797Z"],["b_esHKNx6fbd3","$D2025-11-16T23:00:45.797Z"],["b_g3uQL0Z8AH0","$D2025-11-16T23:01:56.455Z"],["b_tGKyHOCmjiz","$D2025-11-16T23:03:27.844Z"],["b_hPkEf3OgP1V","$D2025-11-16T23:23:04.348Z"],["b_DrYAh2gW27N","$D2025-11-16T23:27:00.774Z"],["b_62z2JmkyO2H","$D2025-11-16T23:28:16.423Z"],["b_A6uSHok1ybB","$D2025-11-16T23:38:13.189Z"],["b_fgDRjPduVPP","$D2025-11-16T23:43:05.569Z"],["b_2maISi0u613","$D2025-11-16T23:49:18.349Z"],["b_4uA1OrsbDVv","$D2025-11-16T23:51:52.672Z"],["b_AptS0FhnXxC","$D2025-11-16T23:53:49.164Z"],["b_QhAnHYHVAtf","$D2025-11-16T23:58:04.086Z"],["b_dwN0lqdzWMr","$D2025-11-16T23:59:45.251Z"],["b_8HK9LDD6I9M","$D2025-11-17T00:01:39.767Z"],["b_7g3efT4ci7q","$D2025-11-17T00:07:52.691Z"],["b_9ovXNMhSh8w","$D2025-11-17T00:10:01.438Z"],["b_ULKBAetF0i7","$D2025-11-17T00:11:01.441Z"],["b_ux7Kj4fn4yx","$D2025-11-17T00:12:07.114Z"],["b_X9vShjtVL5O","$D2025-11-17T00:12:52.480Z"],["b_otDfSmExAdD","$D2025-11-17T00:13:40.046Z"],["b_I5B7pwbqor3","$D2025-11-17T00:14:22.362Z"],["b_4btT0vSeAHw","$D2025-11-17T00:18:29.876Z"],["b_3AIBbB9VRNB","$D2025-11-17T00:29:18.046Z"],["b_90xzrgpxVNq","$D2025-11-17T00:31:35.114Z"],["b_hGPYB9tVu6J","$D2025-11-17T00:32:40.201Z"],["b_4hwwhfP6l4D","$D2025-11-17T00:34:10.158Z"],["b_Tp3pxSModLu","$D2025-11-17T00:41:43.190Z"],["b_Hj2q7AL7QYJ","$D2025-11-17T00:47:14.264Z"],["b_V2JfRPZzQNY","$D2025-11-17T00:57:32.944Z"],["b_0fXNy6C9X3b","$D2025-11-17T00:59:16.692Z"],["b_2d8n6MuHzk7","$D2025-11-17T01:00:17.699Z"],["b_TiAb7q8Qs4r","$D2025-11-17T01:04:10.831Z"],["b_Ky3fV8WubW5","$D2025-11-17T01:08:48.153Z"],["b_4y5pSNvjjMF","$D2025-11-17T01:16:27.347Z"],["b_UvmTPMxmod0","$D2025-11-17T01:20:27.176Z"],["b_VlbrKelWy7Y","$D2025-11-17T01:23:09.670Z"],["b_QPLGoM6YYP1","$D2025-11-17T01:24:32.219Z"],["b_78uakzUhcU2","$D2025-11-17T01:28:17.215Z"],["b_x9UYpgsvFGX","$D2025-11-17T01:30:07.271Z"],["b_Qy1RlccyP8E","$D2025-11-17T01:32:28.851Z"],["b_SGfUkPlZmNg","$D2025-11-17T01:35:42.078Z"],["b_E9E5LptgVv8","$D2025-11-17T01:36:49.266Z"],["b_0gr9IqgREOe","$D2025-11-17T01:37:47.049Z"],["b_WacxivNTf48","$D2025-11-17T01:39:51.213Z"],["b_q3lxBAdMSPL","$D2025-11-17T01:43:17.938Z"],["b_tWvvOqEDgYF","$D2025-11-17T01:44:16.632Z"],["b_TLqsJcoKTBu","$D2025-11-17T01:51:36.569Z"],["b_YkNoU5tGx2b","$D2025-11-17T09:43:08.453Z"],["b_0TXvELL2ylW","$D2025-11-17T09:44:00.048Z"],["b_OoYbME3M04O","$D2025-11-17T09:45:50.862Z"],["b_XXuHyjilrmn","$D2025-11-17T09:46:34.473Z"],["b_tKSi8jOxZgT","$D2025-11-17T09:49:28.788Z"],["b_ZDqKIVbCzui","$D2025-11-17T09:56:12.177Z"],["b_O8VF3THwcVT","$D2025-11-17T10:06:19.273Z"],["b_LHcyosQmWi9","$D2025-11-17T10:14:55.087Z"],["b_UEYiaAxu3Nz","$D2025-11-17T10:18:35.789Z"],["b_xjdxqm7jf5g","$D2025-11-17T10:23:06.059Z"],["b_x0AiKgNyQQb","$D2025-11-17T10:25:29.951Z"],["b_UthdGrbOMgK","$D2025-11-17T10:26:12.966Z"],["b_Y5q2JZpyAOR","$D2025-11-17T10:27:57.453Z"],["b_w6BTd5dexgV","$D2025-11-17T10:29:28.029Z"],["b_c14YDIsc18b","$D2025-11-17T10:33:14.752Z"],["b_ew9tNQ0Otlo","$D2025-11-17T10:34:48.917Z"],["b_LZ1xloUCejm","$D2025-11-17T10:36:45.657Z"],["b_uPrxvC6fBDk","$D2025-11-17T10:38:15.306Z"],["b_MtFc5j3Im6F","$D2025-11-17T10:41:38.505Z"],["b_L7OcF0m9dDw","$D2025-11-21T15:02:03.718Z"],["b_kMVL0XOEgD4","$D2025-11-21T15:05:43.682Z"],["b_EJ5spcYcyL6","$D2025-11-21T15:06:28.892Z"],["b_LWynaRCPr8W","$D2025-11-21T15:24:11.731Z"],["b_vhI58NETOVm","$D2025-11-21T15:25:26.163Z"],["b_cJKdRumTLSR","$D2025-11-21T15:28:42.506Z"],["b_ttIZldkZ1dB","$D2025-11-21T15:32:34.533Z"],["b_jUyKrlJxEHu","$D2025-11-21T15:56:12.445Z"],["b_VwRXqibIha3","$D2025-11-21T15:59:31.336Z"],["b_VXNxgnkTBrJ","$D2025-11-21T16:00:01.559Z"],["b_V6x2CnAjIGm","$D2025-11-21T16:04:40.106Z"],["b_5k4AWNQb8ac","$D2025-11-21T16:06:07.380Z"],["b_t9L5KKHcsBj","$D2025-11-21T16:10:21.626Z"],["b_KOQcb77NiUr","$D2025-11-21T17:20:26.300Z"],["b_Lhi3pcte5SX","$D2025-11-21T18:35:12.739Z"],["b_WGHBFOPSTp8","$D2025-11-21T18:48:34.611Z"],["b_1xCy3hMVXJa","$D2025-11-21T19:00:36.989Z"],["b_Q3l1OGv9co5","$D2025-11-21T19:03:23.080Z"],["b_RPz6Rnf5IXA","$D2025-11-21T19:18:25.028Z"],["b_0CjQqSNBUuW","$D2025-11-21T19:28:55.932Z"],["b_bjV27iPmP3a","$D2025-11-21T19:34:59.997Z"],["b_CZ0FIV4N2fP","$D2025-11-21T19:44:53.278Z"],["b_mx7NPInhjEI","$D2025-11-21T19:47:08.055Z"],["b_XPwcBqA7jvF","$D2025-11-21T19:52:00.630Z"],["b_whihyZBtK4X","$D2025-11-21T20:06:58.926Z"],["b_xiz1Vw5X08f","$D2025-11-21T20:08:41.702Z"],["b_1XlrXLLuZEc","$D2025-11-21T20:27:12.040Z"],["b_rta2TDLRG4m","$D2025-11-21T20:32:03.994Z"],["b_bqePkHbAXn9","$D2025-11-21T20:35:25.170Z"],["b_5EnT1Tmc0Gn","$D2025-11-21T20:35:37.246Z"],["b_JGyeJvZNrsc","$D2025-11-21T20:36:03.107Z"],["b_lSEbkbhdsiq","$D2025-11-21T20:43:33.404Z"],["b_GvHAHyLnE7H","$D2025-11-21T20:48:39.702Z"],["b_bW7sbWleABC","$D2025-11-21T20:56:35.039Z"],["b_qkaXkZaWt3C","$D2025-11-21T21:09:54.470Z"],["b_UkEJC1jqBVL","$D2025-11-21T21:16:24.374Z"],["b_qF6h13ClEOi","$D2025-11-21T21:16:57.125Z"],["b_26fHznjsDZK","$D2025-11-21T21:17:26.274Z"],["b_nec6Y2Sm44q","$D2025-11-21T21:20:27.772Z"],["b_C4Zn23r0x85","$D2025-11-21T21:21:37.820Z"],["b_wChzdM4quES","$D2025-11-21T21:25:34.539Z"],["b_RYBHwbZHD8y","$D2025-11-21T21:30:03.719Z"],["b_yg7AE2EqFvG","$D2025-11-21T21:31:13.341Z"],["b_FM0StfStrxp","$D2025-11-21T21:32:58.097Z"],["b_PgoUcif8dqq","$D2025-11-21T21:44:57.861Z"],["b_rUzNZxHjRkO","$D2025-11-21T22:38:27.368Z"],["b_Ic43eqW1bQ7","$D2025-11-21T22:40:41.933Z"],["b_RkXwp38HUIB","$D2025-11-21T22:59:01.580Z"],["b_vWDmSPoQiQ0","$D2025-11-21T23:00:27.594Z"],["b_PgcE2Yz2Erv","$D2025-11-21T23:00:50.677Z"],["b_v4KPYdY3JIz","$D2025-11-21T23:05:51.517Z"],["b_5XMFgpOuU09","$D2026-06-15T21:54:39.937Z"],["b_7CxLB2J3sYJ","$D2026-06-15T23:13:46.320Z"]] 107:[["b_7CxLB2J3sYJ",false]] 108:[["b_7CxLB2J3sYJ","$undefined"]] 109:[["b_7CxLB2J3sYJ",null]] 10a:[["b_7CxLB2J3sYJ",true]] 10b:[["b_7CxLB2J3sYJ",true]] 10c:[] 10d:T6f62e,[V0_FILE]markdown:file="README.md" isMerged="true" # Social support platform *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/mayssar33prod-2425s-projects/v0-social-support-platform) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/pzpLfFm1DrL) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/mayssar33prod-2425s-projects/v0-social-support-platform](https://vercel.com/mayssar33prod-2425s-projects/v0-social-support-platform)** ## Build your app Continue building your app on: **[https://v0.app/chat/pzpLfFm1DrL](https://v0.app/chat/pzpLfFm1DrL)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/calendar/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { Card } from "@/components/ui/card" import { Users, Bell, CalendarIcon, Activity } from "lucide-react" import { createBrowserClient } from "@supabase/ssr" import { formatArabicDate } from "@/lib/utils" interface CalendarEvent { id: string title: string event_date: string event_time: string event_type: string color_gradient: string } export default function CalendarPage() { const [events, setEvents] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { loadEvents() }, []) const loadEvents = async () => { const supabase = createBrowserClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, ) const { data, error } = await supabase .from("calendar_events") .select("*") .eq("is_active", true) .order("event_date", { ascending: true }) if (error) { console.error("Error loading events:", error) } else { setEvents(data || []) } setLoading(false) } return (

{/* الشريط الجانبي */}

{/* المحتوى */}

الفعاليات والمناسبات

التقويم الشهري

{loading ? (

جاري تحميل الفعاليات...

) : events.length === 0 ? (

لا توجد فعاليات مجدولة حالياً

) : (

{events.map((event) => (

{formatArabicDate(event.event_date)} {event.event_type}

{event.title}

الوقت: {event.event_time}

))}

)} {/* معلومات إضافية */}

سيتم إرسال تذكير قبل كل فعالية بيوم واحد. يمكنكم الاشتراك في الأنشطة عبر الأقسام المخصصة.

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { Card } from "@/components/ui/card" import { Users, UserCircle, Bell, Calendar, Activity, TrendingUp, BarChart3, Heart } from "lucide-react" import { createBrowserClient } from "@supabase/ssr" interface DashboardStat { id: string stat_label: string stat_value: string icon: string color_gradient: string } const iconMap: Record = { users: Users, activity: Activity, heart: Heart, "user-circle": UserCircle, bell: Bell, "trending-up": TrendingUp, calendar: Calendar, "message-square": Bell, } export default function DashboardPage() { const [stats, setStats] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { loadStats() }, []) const loadStats = async () => { const supabase = createBrowserClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, ) const { data, error } = await supabase .from("dashboard_statistics") .select("*") .eq("is_visible", true) .order("display_order", { ascending: true }) if (error) { console.error("Error loading stats:", error) } else { setStats(data || []) } setLoading(false) } return (

{/* الشريط الجانبي */}

{/* المحتوى */}

لوحة القيادة

إحصائيات الأنشطة

{loading ? (

جاري تحميل الإحصائيات...

) : stats.length === 0 ? (

لا توجد إحصائيات متوفرة حالياً

) : (

{stats.map((stat) => { const IconComponent = iconMap[stat.icon] || Activity return (

{stat.stat_label}

{stat.stat_value}

) })}

)}

) } [V0_FILE]typescriptreact:file="app/faq/page.tsx" isMerged="true" 'use client' import { useState } from 'react' import Link from 'next/link' import { Card } from '@/components/ui/card' import { Input } from '@/components/ui/input' import { Users, UserCircle, Bell, Calendar, Activity, HelpCircle, ChevronDown, Search } from 'lucide-react' const generalFaqs = [ { q: 'ما هي أهداف المنصة؟', a: 'توفير فضاء آمن للتلاميذ للتعبير عن أنفسهم، وتعزيز التواصل بين المدرسة والأسرة، ودعم النمو الاجتماعي والعاطفي للتلاميذ.' }, { q: 'كيف يمكن الوصول إلى المنصة؟', a: 'يمكن الوصول للمنصة من أي جهاز متصل بالإنترنت عبر الرابط المخصص الذي يوفره المختص الاجتماعي.' }, { q: 'هل المنصة آمنة؟', a: 'نعم، المنصة تستخدم أحدث بروتوكولات الأمان لحماية بيانات التلاميذ وأولياء الأمور. جميع المعلومات سرية ومحمية.' }, { q: 'كيف يمكن التواصل مع المختص الاجتماعي؟', a: 'يمكن التواصل عبر قسم "التواصل" في ركن أولياء الأمور، أو حجز موعد مباشر من خلال قسم "حجز جلسة".' }, { q: 'ماذا أفعل إذا واجهت مشكلة تقنية؟', a: 'يرجى التواصل مع المختص الاجتماعي عبر البريد الإلكتروني أو الهاتف المدرسي لحل أي مشكلة تقنية.' } ] export default function GeneralFAQPage() { const [searchTerm, setSearchTerm] = useState('') const [openIndex, setOpenIndex] = useState(null) const filteredFaqs = generalFaqs.filter(item => item.q.toLowerCase().includes(searchTerm.toLowerCase()) || item.a.toLowerCase().includes(searchTerm.toLowerCase()) ) return (

{/* الشريط الجانبي */}

{/* المحتوى */}

مركز المساعدة

الأسئلة الشائعة

{/* بحث */}

ابحث عن إجابة

setSearchTerm(e.target.value)} className="h-12 text-base rounded-2xl border-2 focus:border-primary" /> {/* الأسئلة */}

{filteredFaqs.length > 0 ? ( filteredFaqs.map((item, index) => { const isOpen = openIndex === index return ( {isOpen && (

{item.a}

)} ) }) ) : (

لم نجد نتائج لبحثك. جرب كلمات مفتاحية أخرى.

)}

{/* روابط سريعة */}

ركن التلاميذ

الأنشطة والدعم والاقتراحات

ركن أولياء الأمور

التواصل والاستشارات

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); /* تحديث الألوان لتطابق التصميم البنفسجي/الوردي من الصورة */ :root { --background: #C8D1E1; --foreground: #4F4F4F; --card: #FFFFFF; --card-foreground: #4F4F4F; --popover: #FFFFFF; --popover-foreground: #4F4F4F; --primary: #7C6FDC; --primary-foreground: #FFFFFF; --secondary: #F06292; --secondary-foreground: #FFFFFF; --muted: #E8EEF5; --muted-foreground: #6B7280; --accent: #F06292; --accent-foreground: #FFFFFF; --destructive: #EF4444; --destructive-foreground: #FFFFFF; --border: #E0E7EF; --input: #E0E7EF; --ring: #7C6FDC; --chart-1: #7C6FDC; --chart-2: #F06292; --chart-3: #9B8AE3; --chart-4: #F48FB1; --chart-5: #B39DDB; --radius: 1.5rem; --sidebar: #6758B8; --sidebar-foreground: #FFFFFF; --sidebar-primary: #FFFFFF; --sidebar-primary-foreground: #6758B8; --sidebar-accent: rgba(255, 255, 255, 0.1); --sidebar-accent-foreground: #FFFFFF; --sidebar-border: rgba(255, 255, 255, 0.1); --sidebar-ring: #FFFFFF; } .dark { --background: #1F2937; --foreground: #F3F4F6; --card: #374151; --card-foreground: #F3F4F6; --popover: #374151; --popover-foreground: #F3F4F6; --primary: #9B8AE3; --primary-foreground: #FFFFFF; --secondary: #F48FB1; --secondary-foreground: #FFFFFF; --muted: #4B5563; --muted-foreground: #D1D5DB; --accent: #F48FB1; --accent-foreground: #FFFFFF; --destructive: #DC2626; --destructive-foreground: #FFFFFF; --border: #4B5563; --input: #4B5563; --ring: #9B8AE3; --chart-1: #9B8AE3; --chart-2: #F48FB1; --chart-3: #B39DDB; --chart-4: #F8BBD0; --chart-5: #CE93D8; --sidebar: #4C3F8A; --sidebar-foreground: #F3F4F6; --sidebar-primary: #F3F4F6; --sidebar-primary-foreground: #4C3F8A; --sidebar-accent: rgba(255, 255, 255, 0.1); --sidebar-accent-foreground: #F3F4F6; --sidebar-border: rgba(255, 255, 255, 0.1); --sidebar-ring: #F3F4F6; } @theme inline { --font-sans: 'Cairo', 'Cairo Fallback', sans-serif; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const badgeVariants = cva( 'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden', { variants: { variant: { default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90', secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90', destructive: 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground', }, }, defaultVariants: { variant: 'default', }, }, ) function Badge({ className, variant, asChild = false, ...props }: React.ComponentProps<'span'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'span' return ( ) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', link: 'text-primary underline-offset-4 hover:underline', }, size: { default: 'h-9 px-4 py-2 has-[>svg]:px-3', sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5', lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', icon: 'size-9', 'icon-sm': 'size-8', 'icon-lg': 'size-10', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ) function Button({ className, variant, size, asChild = false, ...props }: React.ComponentProps<'button'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'button' return ( ) } export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true" import * as React from 'react' import { cn } from '@/lib/utils' function Card({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardTitle({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardDescription({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardAction({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardContent({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

) } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } [V0_FILE]typescriptreact:file="components/ui/checkbox.tsx" isMerged="true" 'use client' import * as React from 'react' import * as CheckboxPrimitive from '@radix-ui/react-checkbox' import { CheckIcon } from 'lucide-react' import { cn } from '@/lib/utils' function Checkbox({ className, ...props }: React.ComponentProps) { return ( ) } export { Checkbox } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from 'react' import { cn } from '@/lib/utils' function Input({ className, type, ...props }: React.ComponentProps<'input'>) { return ( ) } export { Input } [V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true" 'use client' import * as React from 'react' import * as LabelPrimitive from '@radix-ui/react-label' import { cn } from '@/lib/utils' function Label({ className, ...props }: React.ComponentProps) { return ( ) } export { Label } [V0_FILE]typescriptreact:file="components/ui/progress.tsx" isMerged="true" 'use client' import * as React from 'react' import * as ProgressPrimitive from '@radix-ui/react-progress' import { cn } from '@/lib/utils' function Progress({ className, value, ...props }: React.ComponentProps) { return ( ) } export { Progress } [V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" isMerged="true" 'use client' import * as React from 'react' import * as RadioGroupPrimitive from '@radix-ui/react-radio-group' import { CircleIcon } from 'lucide-react' import { cn } from '@/lib/utils' function RadioGroup({ className, ...props }: React.ComponentProps) { return ( ) } function RadioGroupItem({ className, ...props }: React.ComponentProps) { return ( ) } export { RadioGroup, RadioGroupItem } [V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true" 'use client' import * as React from 'react' import * as SelectPrimitive from '@radix-ui/react-select' import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react' import { cn } from '@/lib/utils' function Select({ ...props }: React.ComponentProps) { return } function SelectGroup({ ...props }: React.ComponentProps) { return } function SelectValue({ ...props }: React.ComponentProps) { return } function SelectTrigger({ className, size = 'default', children, ...props }: React.ComponentProps & { size?: 'sm' | 'default' }) { return ( {children} ) } function SelectContent({ className, children, position = 'popper', ...props }: React.ComponentProps) { return ( {children} ) } function SelectLabel({ className, ...props }: React.ComponentProps) { return ( ) } function SelectItem({ className, children, ...props }: React.ComponentProps) { return ( {children} ) } function SelectSeparator({ className, ...props }: React.ComponentProps) { return ( ) } function SelectScrollUpButton({ className, ...props }: React.ComponentProps) { return ( ) } function SelectScrollDownButton({ className, ...props }: React.ComponentProps) { return ( ) } export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true" import * as React from 'react' import { cn } from '@/lib/utils' function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) { return (

)
}

export { Textarea }
[V0_FILE]javascript:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "eslint .",
    "start": "next start"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "latest",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.76",
    "@supabase/ssr": "0.7.0",
    "jspdf": "3.0.4"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs" isMerged="true"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

export default config
[V0_FILE]css:file="styles/globals.css" isMerged="true"
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: 'Geist', 'Geist Fallback';
  --font-mono: 'Geist Mono', 'Geist Mono Fallback';
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]json:file="tsconfig.json" isMerged="true"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_9JdEdw5ap1mkJactr8cUKP06l3zX/IbCKqe8aOyKCr3C9s15usz/public/apple-icon.png" isMerged="true"
[V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_9JdEdw5ap1mkJactr8cUKP06l3zX/_NLAIkeVwoL6vEzK2uSXmZ/public/icon-dark-32x32.png" isMerged="true"
[V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_9JdEdw5ap1mkJactr8cUKP06l3zX/DVnRdScnZe8NA9byc6_b4H/public/icon-light-32x32.png" isMerged="true"
[V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_9JdEdw5ap1mkJactr8cUKP06l3zX/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg" isMerged="true"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_9JdEdw5ap1mkJactr8cUKP06l3zX/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" isMerged="true"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_9JdEdw5ap1mkJactr8cUKP06l3zX/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_9JdEdw5ap1mkJactr8cUKP06l3zX/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_9JdEdw5ap1mkJactr8cUKP06l3zX/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" isMerged="true"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_9JdEdw5ap1mkJactr8cUKP06l3zX/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isMerged="true"
[V0_FILE]png:file="public/logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WISSAL-zct90sguB6oXtyFhIfdIQrhK4d6IJa.png" isMerged="true"
[V0_FILE]png:file="public/images/wissal.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WISSAL-st2zrCSgBeng0jEDEVSTEFvPkQG6kN.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/faq/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="min-h-screen bg-background flex items-center justify-center">
      <div className="text-center">
        <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent mb-4"></div>
        <p className="text-muted-foreground">جاري التحميل...</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/parents/faq/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="min-h-screen bg-background flex items-center justify-center">
      <div className="text-center">
        <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent mb-4"></div>
        <p className="text-muted-foreground">جاري التحميل...</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="min-h-screen bg-background flex items-center justify-center">
      <div className="text-center">
        <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent mb-4"></div>
        <p className="text-muted-foreground">جاري التحميل...</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/calendar/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="min-h-screen bg-background flex items-center justify-center">
      <div className="text-center">
        <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent mb-4"></div>
        <p className="text-muted-foreground">جاري التحميل...</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/students/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="min-h-screen bg-background flex items-center justify-center">
      <div className="text-center">
        <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent mb-4"></div>
        <p className="text-muted-foreground">جاري التحميل...</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/parents/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="min-h-screen bg-background flex items-center justify-center">
      <div className="text-center">
        <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent mb-4"></div>
        <p className="text-muted-foreground">جاري التحميل...</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/page-layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
'use client'

import { SidebarNav } from './sidebar-nav'
import { Card } from './ui/card'

interface PageLayoutProps {
  children: React.ReactNode
  title: string
  subtitle?: string
  navItems: Array<{
    href: string
    icon: React.ElementType
    label: string
  }>
  showSwitcher?: boolean
  currentSection?: 'students' | 'parents'
}

export function PageLayout({ children, title, subtitle, navItems, showSwitcher = false, currentSection }: PageLayoutProps) {
  return (
    <div className="min-h-screen bg-background flex items-center justify-center p-2 sm:p-4 md:p-8">
      <div className="w-full max-w-7xl">
        <Card className="bg-card border-none shadow-2xl rounded-2xl sm:rounded-3xl overflow-hidden">
          <div className="flex flex-col md:flex-row min-h-[500px] sm:min-h-[600px]">
            {/* الشريط الجانبي - في الأعلى للهواتف وعلى اليمين للشاشات الكبيرة */}
            <SidebarNav items={navItems} showSwitcher={showSwitcher} currentSection={currentSection} />

{/* المحتوى الرئيسي */}
            <div className="flex-1 p-4 sm:p-6 md:p-8 lg:p-12 overflow-y-auto max-h-[calc(100vh-2rem)] sm:max-h-[calc(100vh-4rem)] order-2 pt-20 md:pt-4 sm:pt-6 lg:pt-12">
              <div className="mb-6 sm:mb-8">
                {subtitle && (
                  <p className="text-xs sm:text-sm text-muted-foreground mb-1">{subtitle}</p>
                )}
                <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-foreground">
                  {title}
                </h1>
              </div>
              {children}
            </div>
          </div>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/students/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
'use client'

import Link from 'next/link'
import { PageLayout } from '@/components/page-layout'
import { Card } from '@/components/ui/card'
import { Home, Users, Heart, Bell, MessageSquare, Drama, Lightbulb, Shield, Star } from 'lucide-react'

const navItems = [
  { href: '/students', icon: Home, label: 'الرئيسية' },
  { href: '/students/club', icon: Drama, label: 'النادي' },
  { href: '/students/support', icon: Heart, label: 'الدعم' },
  { href: '/students/announcements', icon: Bell, label: 'الإعلانات' },
  { href: '/students/suggestions', icon: Lightbulb, label: 'الاقتراحات' },
]

export default function StudentsPage() {
  return (
    <PageLayout 
      title="ركن التلاميذ والتلميذات" 
      subtitle="اختر القسم المناسب"
      navItems={navItems}
      showSwitcher={true}
      currentSection="students"
    >
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* نادي الأنشطة */}
        <Link href="/students/club">
          <Card className="relative overflow-hidden border-none h-56 bg-gradient-to-br from-primary via-primary to-chart-3 hover:shadow-xl transition-all duration-300 hover:scale-[1.02] cursor-pointer rounded-3xl group">
            <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
            <div className="relative h-full p-6 flex flex-col justify-between">
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="text-2xl font-bold text-white mb-2">النادي السوسيوثقافي</h3>
                  <p className="text-white/80 text-sm">انضم إلينا الآن! </p>
                </div>
                <div className="h-14 w-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
                  <Drama className="h-7 w-7 text-white" />
                </div>
              </div>
              <div className="flex items-center gap-2 text-white">
                <span className="text-sm">الإنخراط في النادي</span>
                <svg className="h-4 w-4 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                </svg>
              </div>
            </div>
          </Card>
        </Link>

{/* صندوق الدعم */}
        <Link href="/students/support">
          <Card className="relative overflow-hidden border-none h-56 bg-gradient-to-br from-secondary via-secondary to-chart-4 hover:shadow-xl transition-all duration-300 hover:scale-[1.02] cursor-pointer rounded-3xl group">
            <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
            <div className="relative h-full p-6 flex flex-col justify-between">
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="text-2xl font-bold text-white mb-2">{"فضاء الدعم النفسي"}</h3>
                  <p className="text-white/80 text-sm">شارك مشاكلك</p>
                </div>
                <div className="h-14 w-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
                  <Heart className="h-7 w-7 text-white" />
                </div>
              </div>
              <div className="flex items-center gap-2 text-white">
                <span className="text-sm">أرسل رسالة</span>
                <svg className="h-4 w-4 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                </svg>
              </div>
            </div>
          </Card>
        </Link>

<Link href="/students/bullying-report">
          <Card className="relative overflow-hidden border-none h-56 bg-gradient-to-br from-chart-2 via-chart-1 to-primary hover:shadow-xl transition-all duration-300 hover:scale-[1.02] cursor-pointer rounded-3xl group">
            <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
            <div className="relative h-full p-6 flex flex-col justify-between">
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="text-2xl font-bold text-white mb-2">الإبلاغ عن التنمر</h3>
                  <p className="text-white/80 text-sm">بسرية تامة</p>
                </div>
                <div className="h-14 w-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
                  <Shield className="h-7 w-7 text-white" />
                </div>
              </div>
              <div className="flex items-center gap-2 text-white">
                <span className="text-sm">أبلغ الآن</span>
                <svg className="h-4 w-4 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                </svg>
              </div>
            </div>
          </Card>
        </Link>

<Link href="/students/points">
          <Card className="relative overflow-hidden border-none h-56 bg-gradient-to-br from-chart-5 via-chart-3 to-secondary hover:shadow-xl transition-all duration-300 hover:scale-[1.02] cursor-pointer rounded-3xl group">
            <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
            <div className="relative h-full p-6 flex flex-col justify-between">
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="text-2xl font-bold text-white mb-2">نظام النقاط</h3>
                  <p className="text-white/80 text-sm">تابع إنجازاتك</p>
                </div>
                <div className="h-14 w-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
                  <Star className="h-7 w-7 text-white" />
                </div>
              </div>
              <div className="flex items-center gap-2 text-white">
                <span className="text-sm">عرض النقاط</span>
                <svg className="h-4 w-4 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                </svg>
              </div>
            </div>
          </Card>
        </Link>

{/* لوحة الإعلانات */}
        <Link href="/students/announcements">
          <Card className="relative overflow-hidden border-none h-56 bg-gradient-to-br from-chart-3 via-chart-5 to-primary hover:shadow-xl transition-all duration-300 hover:scale-[1.02] cursor-pointer rounded-3xl group">
            <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
            <div className="relative h-full p-6 flex flex-col justify-between">
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="text-2xl font-bold text-white mb-2">لوحة الإعلانات</h3>
                  <p className="text-white/80 text-sm">آخر الأخبار</p>
                </div>
                <div className="h-14 w-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
                  <Bell className="h-7 w-7 text-white" />
                </div>
              </div>
              <div className="flex items-center gap-2 text-white">
                <span className="text-sm">شاهد الإعلانات</span>
                <svg className="h-4 w-4 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                </svg>
              </div>
            </div>
          </Card>
        </Link>

{/* صندوق الاقتراحات */}
        <Link href="/students/suggestions">
          <Card className="relative overflow-hidden border-none h-56 bg-gradient-to-br from-chart-4 via-secondary to-chart-2 hover:shadow-xl transition-all duration-300 hover:scale-[1.02] cursor-pointer rounded-3xl group">
            <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
            <div className="relative h-full p-6 flex flex-col justify-between">
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="text-2xl font-bold text-white mb-2">صندوق الاقتراحات</h3>
                  <p className="text-white/80 text-sm">شارك أفكارك</p>
                </div>
                <div className="h-14 w-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
                  <Lightbulb className="h-7 w-7 text-white" />
                </div>
              </div>
              <div className="flex items-center gap-2 text-white">
                <span className="text-sm">أرسل اقتراحك</span>
                <svg className="h-4 w-4 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                </svg>
              </div>
            </div>
          </Card>
        </Link>
      </div>
    </PageLayout>
  )
}
[V0_FILE]typescriptreact:file="app/parents/profile/page.tsx" isMerged="true"
'use client'

import { PageLayout } from '@/components/page-layout'
import { Card } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Home, Bell, MessageCircle, FileText, UserCircle, Edit } from 'lucide-react'

const navItems = [
  { href: '/parents', icon: Home, label: 'الرئيسية' },
  { href: '/parents/announcements', icon: Bell, label: 'الإعلانات' },
  { href: '/parents/communication', icon: MessageCircle, label: 'التواصل' },
  { href: '/parents/documents', icon: FileText, label: 'الوثائق' },
  { href: '/parents/profile', icon: UserCircle, label: 'الملف الشخصي', active: true },
]

export default function ProfilePage() {
  return (
    <PageLayout 
      title="الملف الشخصي" 
      subtitle="معلوماتك وبيانات الطالب"
      navItems={navItems}
      showSwitcher={true}
      currentSection="parents"
    >
      <div className="space-y-6">
        <Card className="p-6">
          <div className="flex items-center justify-between mb-6">
            <h3 className="text-xl font-bold text-foreground">معلومات ولي الأمر</h3>
            <Button variant="outline" size="sm" className="gap-2">
              <Edit className="h-4 w-4" />
              تعديل
            </Button>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="text-sm font-semibold text-muted-foreground">الاسم الكامل</label>
              <p className="text-base text-foreground mt-1">أحمد محمد السالم</p>
            </div>
            <div>
              <label className="text-sm font-semibold text-muted-foreground">البريد الإلكتروني</label>
              <p className="text-base text-foreground mt-1">ahmad.salem@email.com</p>
            </div>
            <div>
              <label className="text-sm font-semibold text-muted-foreground">رقم الهاتف</label>
              <p className="text-base text-foreground mt-1">+966 50 123 4567</p>
            </div>
            <div>
              <label className="text-sm font-semibold text-muted-foreground">العلاقة بالطالب</label>
              <p className="text-base text-foreground mt-1">الأب</p>
            </div>
          </div>
        </Card>

<Card className="p-6">
          <div className="flex items-center justify-between mb-6">
            <h3 className="text-xl font-bold text-foreground">معلومات الطالب</h3>
            <Button variant="outline" size="sm" className="gap-2">
              <Edit className="h-4 w-4" />
              تعديل
            </Button>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="text-sm font-semibold text-muted-foreground">اسم الطالب</label>
              <p className="text-base text-foreground mt-1">محمد أحمد السالم</p>
            </div>
            <div>
              <label className="text-sm font-semibold text-muted-foreground">الصف</label>
              <p className="text-base text-foreground mt-1">الخامس الابتدائي</p>
            </div>
            <div>
              <label className="text-sm font-semibold text-muted-foreground">تاريخ الميلاد</label>
              <p className="text-base text-foreground mt-1">15/03/2014</p>
            </div>
            <div>
              <label className="text-sm font-semibold text-muted-foreground">رقم الطالب</label>
              <p className="text-base text-foreground mt-1">2024-0157</p>
            </div>
          </div>
        </Card>

<Card className="p-6 bg-primary/5 border-primary/20">
          <h3 className="text-lg font-bold text-foreground mb-3">ملاحظات مهمة</h3>
          <ul className="space-y-2 text-sm text-muted-foreground">
            <li>• يرجى تحديث معلومات الاتصال في حال تغييرها</li>
            <li>• تأكد من صحة البيانات الصحية للطالب</li>
            <li>• للاستفسارات، تواصل مع إدارة المدرسة</li>
          </ul>
        </Card>
      </div>
    </PageLayout>
  )
}
[V0_FILE]png:file="public/images/design-mode/WISSAL%202.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/WISSAL%202-HOWB4kAqWcIFRXAjTDPNGqx9JGu56h.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/sidebar-nav.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
'use client'

import Link from 'next/link'
import Image from 'next/image'
import { usePathname, useRouter } from 'next/navigation'
import { cn } from '@/lib/utils'
import { ArrowLeftRight } from 'lucide-react'

interface NavItem {
  href: string
  icon: React.ElementType
  label: string
}

interface SidebarNavProps {
  items: NavItem[]
  showSwitcher?: boolean
  currentSection?: 'students' | 'parents'
}

export function SidebarNav({ items, showSwitcher = false, currentSection }: SidebarNavProps) {
  const pathname = usePathname()
  const router = useRouter()

const handleSwitchSection = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault()
    e.stopPropagation()
    router.push('/')
  }

return (
    <div className="w-full md:w-20 bg-sidebar flex flex-row md:flex-col items-center justify-between md:justify-center gap-2 sm:gap-3 md:gap-4 p-3 sm:p-4 md:py-8 rounded-b-2xl sm:rounded-b-3xl md:rounded-e-3xl md:rounded-b-none order-1 sticky md:static top-0 z-50 md:z-auto shadow-lg md:shadow-none">
      <div className="flex flex-row md:flex-col items-center gap-2 sm:gap-3 md:gap-4">
        <Link href="/" className="mb-0 md:mb-2">
          <div className="h-10 w-10 sm:h-12 sm:w-12 md:h-14 md:w-14 flex items-center justify-center hover:scale-110 transition-transform cursor-pointer">
            <Image 
              src="/logo.png" 
              alt="شعار وصال" 
              width={40} 
              height={40}
              className="sm:w-12 sm:h-12 md:w-14 md:h-14 object-contain brightness-0 invert"
            />
          </div>
        </Link>
        
        {showSwitcher && (
          <button
            type="button"
            onClick={handleSwitchSection}
            className="h-10 w-10 sm:h-12 sm:w-12 rounded-xl sm:rounded-2xl bg-white/20 hover:bg-white flex items-center justify-center transition-all duration-200 cursor-pointer group"
            title="العودة لاختيار الركن"
          >
            <ArrowLeftRight className="h-5 w-5 sm:h-6 sm:w-6 text-white group-hover:text-[#6758B8] transition-colors duration-200" strokeWidth={2} />
          </button>
        )}
      </div>
      
      <div className="flex flex-row md:flex-col gap-2 sm:gap-3">
        {items.map((item) => {
          const Icon = item.icon
          const isActive = pathname === item.href
          
          return (
            <Link 
              key={item.href} 
              href={item.href} 
              title={item.label}
              className={cn(
                "group h-10 w-10 sm:h-12 sm:w-12 rounded-xl sm:rounded-2xl flex items-center justify-center transition-all duration-200 cursor-pointer",
                isActive
                  ? "bg-white shadow-lg"
                  : "bg-white/10 hover:bg-white hover:scale-105"
              )}
            >
              <Icon 
                className={cn(
                  "h-5 w-5 sm:h-6 sm:w-6 transition-colors duration-200",
                  isActive 
                    ? "text-[#6758B8]" 
                    : "text-white group-hover:text-[#6758B8]"
                )} 
                strokeWidth={2}
              />
            </Link>
          )
        })}
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/supabase/server.ts" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { cookies } from "next/headers"

export async function createClient() {
  const cookieStore = await cookies()

return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            )
          } catch {
            // Ignore if called from Server Component
          }
        },
      },
    }
  )
}
[V0_FILE]typescript:file="lib/supabase/middleware.ts" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { NextResponse, type NextRequest } from "next/server"

export async function updateSession(request: NextRequest) {
  let supabaseResponse = NextResponse.next({
    request,
  })

const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) =>
            request.cookies.set(name, value)
          )
          supabaseResponse = NextResponse.next({
            request,
          })
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          )
        },
      },
    }
  )

const {
    data: { user },
  } = await supabase.auth.getUser()

if (
    request.nextUrl.pathname.startsWith("/admin") &&
    request.nextUrl.pathname !== "/admin/login"
  ) {
    if (!user) {
      const url = request.nextUrl.clone()
      url.pathname = "/admin/login"
      return NextResponse.redirect(url)
    }
    
    const { data: adminData } = await supabase
      .from("admins")
      .select("*")
      .eq("user_id", user.id)
      .single()
    
    if (!adminData) {
      const url = request.nextUrl.clone()
      url.pathname = "/"
      return NextResponse.redirect(url)
    }
  }

return supabaseResponse
}
[V0_FILE]sql:file="scripts/001_create_tables.sql" isMerged="true"
-- إنشاء جداول قاعدة البيانات

-- جدول المشرفين
CREATE TABLE IF NOT EXISTS public.admins (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  username TEXT UNIQUE NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- جدول الرسائل من التلاميذ
CREATE TABLE IF NOT EXISTS public.student_messages (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  student_name TEXT,
  student_class TEXT,
  message_type TEXT NOT NULL, -- 'support', 'bullying', 'suggestion'
  subject TEXT,
  message TEXT NOT NULL,
  is_anonymous BOOLEAN DEFAULT false,
  status TEXT DEFAULT 'pending', -- 'pending', 'in_progress', 'resolved'
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- جدول حجوزات أولياء الأمور
CREATE TABLE IF NOT EXISTS public.parent_bookings (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  parent_name TEXT NOT NULL,
  parent_email TEXT,
  parent_phone TEXT,
  student_name TEXT NOT NULL,
  student_class TEXT NOT NULL,
  booking_type TEXT NOT NULL, -- 'consultation', 'meeting'
  preferred_date DATE NOT NULL,
  preferred_time TEXT NOT NULL,
  notes TEXT,
  status TEXT DEFAULT 'pending', -- 'pending', 'confirmed', 'cancelled'
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- جدول أسئلة أولياء الأمور
CREATE TABLE IF NOT EXISTS public.parent_questions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  parent_name TEXT NOT NULL,
  parent_email TEXT,
  question_category TEXT NOT NULL,
  question TEXT NOT NULL,
  answer TEXT,
  status TEXT DEFAULT 'pending', -- 'pending', 'answered'
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- جدول الإشعارات
CREATE TABLE IF NOT EXISTS public.announcements (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  title TEXT NOT NULL,
  content TEXT NOT NULL,
  target_audience TEXT NOT NULL, -- 'students', 'parents', 'all'
  is_active BOOLEAN DEFAULT true,
  created_by UUID REFERENCES public.admins(id) ON DELETE SET NULL,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- جدول نقاط التلاميذ
CREATE TABLE IF NOT EXISTS public.student_points (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  student_name TEXT NOT NULL,
  student_class TEXT NOT NULL,
  points INTEGER DEFAULT 0,
  achievements TEXT[],
  last_updated TIMESTAMPTZ DEFAULT NOW()
);

-- تفعيل RLS للأمان
ALTER TABLE public.student_messages ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.parent_bookings ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.parent_questions ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.announcements ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.student_points ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.admins ENABLE ROW LEVEL SECURITY;

-- سياسات RLS: السماح للجميع بالإدراج (للنماذج العامة)
CREATE POLICY "allow_insert_student_messages" ON public.student_messages
  FOR INSERT WITH CHECK (true);

CREATE POLICY "allow_insert_parent_bookings" ON public.parent_bookings
  FOR INSERT WITH CHECK (true);

CREATE POLICY "allow_insert_parent_questions" ON public.parent_questions
  FOR INSERT WITH CHECK (true);

-- سياسات RLS: السماح للجميع بقراءة الإشعارات النشطة
CREATE POLICY "allow_read_active_announcements" ON public.announcements
  FOR SELECT USING (is_active = true);

-- سياسات RLS: السماح للمشرفين بكل شيء
CREATE POLICY "allow_admin_all_student_messages" ON public.student_messages
  FOR ALL USING (
    EXISTS (
      SELECT 1 FROM public.admins WHERE user_id = auth.uid()
    )
  );

CREATE POLICY "allow_admin_all_parent_bookings" ON public.parent_bookings
  FOR ALL USING (
    EXISTS (
      SELECT 1 FROM public.admins WHERE user_id = auth.uid()
    )
  );

CREATE POLICY "allow_admin_all_parent_questions" ON public.parent_questions
  FOR ALL USING (
    EXISTS (
      SELECT 1 FROM public.admins WHERE user_id = auth.uid()
    )
  );

CREATE POLICY "allow_admin_all_announcements" ON public.announcements
  FOR ALL USING (
    EXISTS (
      SELECT 1 FROM public.admins WHERE user_id = auth.uid()
    )
  );

CREATE POLICY "allow_admin_all_student_points" ON public.student_points
  FOR ALL USING (
    EXISTS (
      SELECT 1 FROM public.admins WHERE user_id = auth.uid()
    )
  );

CREATE POLICY "allow_admin_read_admins" ON public.admins
  FOR SELECT USING (
    EXISTS (
      SELECT 1 FROM public.admins WHERE user_id = auth.uid()
    )
  );

-- إنشاء دالة لتحديث updated_at تلقائياً
CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = NOW();
    RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- إضافة triggers لتحديث updated_at
CREATE TRIGGER update_student_messages_updated_at BEFORE UPDATE ON public.student_messages
  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_parent_bookings_updated_at BEFORE UPDATE ON public.parent_bookings
  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_parent_questions_updated_at BEFORE UPDATE ON public.parent_questions
  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_announcements_updated_at BEFORE UPDATE ON public.announcements
  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
[V0_FILE]sql:file="scripts/002_insert_admin.sql" isMerged="true"
-- إضافة مستخدم الإدارة الافتراضي

-- ملاحظة: يجب تسجيل المستخدم أولاً من خلال واجهة تسجيل الدخول
-- هذا السكربت يضيف صلاحيات الإدارة لمستخدم موجود

-- إدراج مستخدم إدارة (سيتم ربطه بعد التسجيل)
-- سنستخدم username فقط هنا، وسيتم ربط user_id عند أول تسجيل دخول
INSERT INTO public.admins (username)
VALUES ('Mayssar')
ON CONFLICT (username) DO NOTHING;
[V0_FILE]typescript:file="middleware.ts" isEdit="true" isMerged="true"
import { NextResponse, type NextRequest } from "next/server"

export async function middleware(request: NextRequest) {
  // السماح بالوصول لجميع الصفحات
  return NextResponse.next()
}

export const config = {
  matcher: [
    "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
  ],
}
[V0_FILE]typescriptreact:file="app/admin/login/page.tsx" isEdit="true" isMerged="true"
'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import Image from 'next/image'

export default function AdminLoginPage() {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setError(null)

console.log('[v0] محاولة تسجيل دخول بالبيانات:', { username, password })

if (username === 'Mayssar' && password === 'Black33jaguar') {
      console.log('[v0] البيانات صحيحة، حفظ في localStorage')
      
      // حفظ session في localStorage
      localStorage.setItem('admin_logged_in', 'true')
      localStorage.setItem('admin_username', username)
      localStorage.setItem('admin_timestamp', Date.now().toString())
      
      console.log('[v0] تم الحفظ، التوجيه إلى dashboard')
      
      // الانتقال لصفحة الإدارة
      setTimeout(() => {
        router.push('/admin/dashboard')
      }, 100)
    } else {
      console.log('[v0] البيانات غير صحيحة')
      setError('اسم المستخدم أو كلمة المرور غير صحيحة')
      setIsLoading(false)
    }
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-background via-muted to-background flex items-center justify-center p-4">
      <Card className="w-full max-w-md shadow-2xl rounded-3xl overflow-hidden">
        <div className="bg-gradient-to-br from-sidebar to-sidebar-accent p-8 text-white text-center">
          <div className="flex justify-center mb-4">
            <Image
              src="/images/wissal.png"
              alt="شعار وصال"
              width={80}
              height={80}
              className="brightness-0 invert"
            />
          </div>
          <h1 className="text-3xl font-bold mb-2">لوحة تحكم وصال</h1>
          <p className="text-sm opacity-90">تسجيل دخول المشرف</p>
        </div>

<form onSubmit={handleLogin} className="p-8">
          <div className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="username">اسم المستخدم</Label>
              <Input
                id="username"
                type="text"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                placeholder="أدخل اسم المستخدم"
                required
                className="text-lg"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="password">كلمة المرور</Label>
              <Input
                id="password"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="أدخل كلمة المرور"
                required
                className="text-lg"
              />
            </div>

{error && (
              <div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg text-sm">
                {error}
              </div>
            )}

<Button
              type="submit"
              disabled={isLoading}
              className="w-full bg-gradient-to-r from-sidebar to-sidebar-accent hover:opacity-90 text-lg py-6"
            >
              {isLoading ? 'جاري تسجيل الدخول...' : 'تسجيل الدخول'}
            </Button>
          </div>
        </form>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true"
'use client'

import { useEffect } from 'react'
import { useRouter } from 'next/navigation'

export default function AdminPage() {
  const router = useRouter()

useEffect(() => {
    console.log('[v0] Checking admin auth status')
    const isLoggedIn = localStorage.getItem('admin_logged_in') === 'true'
    
    if (isLoggedIn) {
      console.log('[v0] Admin is logged in, redirecting to dashboard')
      router.push('/admin/dashboard')
    } else {
      console.log('[v0] Admin not logged in, redirecting to login')
      router.push('/admin/login')
    }
  }, [router])

return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-sidebar via-secondary to-chart-4">
      <div className="text-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto"></div>
        <p className="text-white mt-4">جاري التحميل...</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/settings/page.tsx" isMerged="true"
'use client'

import { useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { Card } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { ArrowRight, Settings } from 'lucide-react'
import Link from 'next/link'

export default function SettingsPage() {
  const router = useRouter()

useEffect(() => {
    const isLoggedIn = localStorage.getItem('admin_logged_in')
    if (!isLoggedIn) {
      router.push('/admin/login')
    }
  }, [router])

return (
    <div className="min-h-screen bg-gradient-to-br from-background via-muted to-background p-6">
      <div className="max-w-4xl mx-auto">
        <div className="mb-6">
          <Link href="/admin/dashboard">
            <Button variant="ghost" className="gap-2 mb-4">
              <ArrowRight className="h-4 w-4" />
              العودة للوحة التحكم
            </Button>
          </Link>
          
          <div className="flex items-center gap-3">
            <div className="h-12 w-12 rounded-2xl bg-gradient-to-br from-gray-500 to-gray-600 flex items-center justify-center">
              <Settings className="h-6 w-6 text-white" />
            </div>
            <div>
              <h1 className="text-3xl font-bold">الإعدادات</h1>
              <p className="text-muted-foreground">إدارة إعدادات الموقع</p>
            </div>
          </div>
        </div>

<Card className="p-6">
          <h3 className="font-bold text-lg mb-4">إعدادات النظام</h3>
          <p className="text-muted-foreground">ستتوفر إعدادات متقدمة قريباً...</p>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/003_add_content_tables.sql" isMerged="true"
-- جداول إدارة المحتوى للأركان

-- جدول أنشطة النادي
CREATE TABLE IF NOT EXISTS public.club_activities (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  title TEXT NOT NULL,
  description TEXT NOT NULL,
  activity_type TEXT NOT NULL,
  date DATE,
  is_active BOOLEAN DEFAULT true,
  image_url TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- جدول محتوى صفحات الأركان
CREATE TABLE IF NOT EXISTS public.section_content (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  section TEXT NOT NULL, -- 'students', 'parents'
  content_type TEXT NOT NULL, -- 'card', 'announcement', 'info'
  title TEXT NOT NULL,
  description TEXT,
  icon TEXT,
  href TEXT,
  is_visible BOOLEAN DEFAULT true,
  display_order INTEGER DEFAULT 0,
  gradient_colors TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- تفعيل RLS
ALTER TABLE public.club_activities ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.section_content ENABLE ROW LEVEL SECURITY;

-- سماح القراءة للجميع
CREATE POLICY "allow_read_active_activities" ON public.club_activities
  FOR SELECT USING (is_active = true);

CREATE POLICY "allow_read_visible_content" ON public.section_content
  FOR SELECT USING (is_visible = true);

-- سماح التحكم الكامل للمشرفين
CREATE POLICY "allow_admin_all_activities" ON public.club_activities
  FOR ALL USING (
    EXISTS (SELECT 1 FROM public.admins WHERE user_id = auth.uid())
  );

CREATE POLICY "allow_admin_all_section_content" ON public.section_content
  FOR ALL USING (
    EXISTS (SELECT 1 FROM public.admins WHERE user_id = auth.uid())
  );

-- Triggers للتحديث التلقائي
CREATE TRIGGER update_club_activities_updated_at BEFORE UPDATE ON public.club_activities
  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_section_content_updated_at BEFORE UPDATE ON public.section_content
  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
[V0_FILE]sql:file="scripts/004_fix_rls_policies.sql" isMerged="true"
-- حذف جميع السياسات القديمة التي تسبب التكرار اللانهائي
DROP POLICY IF EXISTS "allow_admin_all_student_messages" ON public.student_messages;
DROP POLICY IF EXISTS "allow_admin_all_parent_bookings" ON public.parent_bookings;
DROP POLICY IF EXISTS "allow_admin_all_parent_questions" ON public.parent_questions;
DROP POLICY IF EXISTS "allow_admin_all_announcements" ON public.announcements;
DROP POLICY IF EXISTS "allow_admin_all_student_points" ON public.student_points;
DROP POLICY IF EXISTS "allow_admin_read_admins" ON public.admins;

-- تعطيل RLS على جدول admins لمنع التكرار اللانهائي
ALTER TABLE public.admins DISABLE ROW LEVEL SECURITY;

-- سياسات مبسطة: السماح للجميع بالقراءة والكتابة (لأننا نستخدم localStorage للمصادقة)
-- في بيئة إنتاجية، يجب استخدام مصادقة أفضل

-- السماح بقراءة جميع البيانات
CREATE POLICY "allow_read_all_student_messages" ON public.student_messages
  FOR SELECT USING (true);

CREATE POLICY "allow_read_all_parent_bookings" ON public.parent_bookings
  FOR SELECT USING (true);

CREATE POLICY "allow_read_all_parent_questions" ON public.parent_questions
  FOR SELECT USING (true);

CREATE POLICY "allow_read_all_announcements" ON public.announcements
  FOR SELECT USING (true);

CREATE POLICY "allow_read_all_student_points" ON public.student_points
  FOR SELECT USING (true);

-- السماح بالتعديل والحذف للجميع (مؤقتاً للإدارة)
CREATE POLICY "allow_update_all_student_messages" ON public.student_messages
  FOR UPDATE USING (true);

CREATE POLICY "allow_delete_all_student_messages" ON public.student_messages
  FOR DELETE USING (true);

CREATE POLICY "allow_update_all_parent_bookings" ON public.parent_bookings
  FOR UPDATE USING (true);

CREATE POLICY "allow_delete_all_parent_bookings" ON public.parent_bookings
  FOR DELETE USING (true);

CREATE POLICY "allow_update_all_parent_questions" ON public.parent_questions
  FOR UPDATE USING (true);

CREATE POLICY "allow_delete_all_parent_questions" ON public.parent_questions
  FOR DELETE USING (true);

CREATE POLICY "allow_insert_all_announcements" ON public.announcements
  FOR INSERT WITH CHECK (true);

CREATE POLICY "allow_update_all_announcements" ON public.announcements
  FOR UPDATE USING (true);

CREATE POLICY "allow_delete_all_announcements" ON public.announcements
  FOR DELETE USING (true);

CREATE POLICY "allow_insert_all_student_points" ON public.student_points
  FOR INSERT WITH CHECK (true);

CREATE POLICY "allow_update_all_student_points" ON public.student_points
  FOR UPDATE USING (true);

CREATE POLICY "allow_delete_all_student_points" ON public.student_points
  FOR DELETE USING (true);
[V0_FILE]sql:file="scripts/005_content_management_tables.sql" isMerged="true"
-- جدول الإعلانات
CREATE TABLE IF NOT EXISTS public.announcements (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  title TEXT NOT NULL,
  description TEXT NOT NULL,
  date DATE DEFAULT CURRENT_DATE,
  type TEXT NOT NULL DEFAULT 'general', -- 'important', 'activity', 'update', 'general'
  icon TEXT DEFAULT 'Bell',
  is_visible BOOLEAN DEFAULT true,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- جدول الأسئلة والأجوبة
CREATE TABLE IF NOT EXISTS public.faqs (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  category TEXT NOT NULL,
  question TEXT NOT NULL,
  answer TEXT NOT NULL,
  display_order INTEGER DEFAULT 0,
  is_visible BOOLEAN DEFAULT true,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- جدول الوثائق
CREATE TABLE IF NOT EXISTS public.documents (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  title TEXT NOT NULL,
  description TEXT NOT NULL,
  document_type TEXT DEFAULT 'document', -- 'form', 'guide', 'document'
  icon TEXT DEFAULT 'FileText',
  drive_link TEXT,
  date DATE DEFAULT CURRENT_DATE,
  is_visible BOOLEAN DEFAULT true,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- تفعيل RLS
ALTER TABLE public.announcements ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.faqs ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.documents ENABLE ROW LEVEL SECURITY;

-- سياسات القراءة للجميع (المحتوى المرئي فقط)
CREATE POLICY "allow_read_visible_announcements" ON public.announcements
  FOR SELECT USING (is_visible = true);

CREATE POLICY "allow_read_visible_faqs" ON public.faqs
  FOR SELECT USING (is_visible = true);

CREATE POLICY "allow_read_visible_documents" ON public.documents
  FOR SELECT USING (is_visible = true);

-- سياسات التحكم الكامل للإدارة (بدون التحقق من auth)
CREATE POLICY "allow_all_announcements" ON public.announcements
  FOR ALL USING (true);

CREATE POLICY "allow_all_faqs" ON public.faqs
  FOR ALL USING (true);

CREATE POLICY "allow_all_documents" ON public.documents
  FOR ALL USING (true);
[V0_FILE]typescriptreact:file="app/admin/bookings/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

export const dynamic = "force-dynamic"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowRight, Calendar, Phone, Mail } from "lucide-react"
import { createBrowserClient } from "@/lib/supabase/client"
import Link from "next/link"
import { formatArabicDate, formatArabicDateTime } from "@/lib/utils"

interface Booking {
  id: string
  parent_name: string
  phone: string
  email: string | null
  preferred_date: string
  preferred_time: string
  reason: string
  status: string
  created_at: string
}

export default function BookingsPage() {
  const router = useRouter()
  const [bookings, setBookings] = useState<Booking[]>([])
  const [loading, setLoading] = useState(true)
  const [selectedStatus, setSelectedStatus] = useState<string>("all")

useEffect(() => {
    const checkAuth = () => {
      const isLoggedIn = localStorage.getItem("admin_logged_in")
      if (!isLoggedIn) {
        router.push("/admin/login")
        return false
      }
      return true
    }

const fetchBookings = async () => {
      if (!checkAuth()) return

try {
        const supabase = createBrowserClient()

let query = supabase.from("parent_bookings").select("*").order("created_at", { ascending: false })

if (selectedStatus !== "all") {
          query = query.eq("status", selectedStatus)
        }

const { data, error } = await query

if (error) {
          console.error("[v0] Error fetching bookings:", error)
          return
        }

setBookings(data || [])
      } catch (error) {
        console.error("[v0] Error:", error)
      } finally {
        setLoading(false)
      }
    }

fetchBookings()
  }, [router, selectedStatus])

const updateStatus = async (id: string, newStatus: string) => {
    try {
      const supabase = createBrowserClient()
      const { error } = await supabase.from("parent_bookings").update({ status: newStatus }).eq("id", id)

if (error) throw error

setBookings(bookings.map((b) => (b.id === id ? { ...b, status: newStatus } : b)))
    } catch (error) {
      console.error("[v0] Error updating status:", error)
    }
  }

const getStatusBadge = (status: string) => {
    const variants: Record<string, "default" | "secondary" | "destructive"> = {
      pending: "destructive",
      confirmed: "default",
      cancelled: "secondary",
    }

const labels: Record<string, string> = {
      pending: "قيد الانتظار",
      confirmed: "مؤكد",
      cancelled: "ملغي",
    }

return <Badge variant={variants[status] || "default"}>{labels[status] || status}</Badge>
  }

if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin h-12 w-12 border-4 border-primary border-t-transparent rounded-full mx-auto mb-4"></div>
          <p className="text-muted-foreground">جاري التحميل...</p>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-background via-muted to-background p-6">
      <div className="max-w-6xl mx-auto">
        <div className="mb-6">
          <Link href="/admin/dashboard">
            <Button variant="ghost" className="gap-2 mb-4">
              <ArrowRight className="h-4 w-4" />
              العودة للوحة التحكم
            </Button>
          </Link>

<div className="flex items-center gap-3 mb-6">
            <div className="h-12 w-12 rounded-2xl bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center">
              <Calendar className="h-6 w-6 text-white" />
            </div>
            <div>
              <h1 className="text-3xl font-bold">حجوزات الأولياء</h1>
              <p className="text-muted-foreground">إدارة مواعيد الأولياء</p>
            </div>
          </div>

<div className="flex gap-2">
            <Button variant={selectedStatus === "all" ? "default" : "outline"} onClick={() => setSelectedStatus("all")}>
              الكل ({bookings.length})
            </Button>
            <Button
              variant={selectedStatus === "pending" ? "default" : "outline"}
              onClick={() => setSelectedStatus("pending")}
            >
              قيد الانتظار
            </Button>
            <Button
              variant={selectedStatus === "confirmed" ? "default" : "outline"}
              onClick={() => setSelectedStatus("confirmed")}
            >
              مؤكد
            </Button>
          </div>
        </div>

<div className="space-y-4">
          {bookings.map((booking) => (
            <Card key={booking.id} className="p-6 hover:shadow-lg transition-shadow">
              <div className="flex items-start justify-between mb-4">
                <div className="flex-1">
                  <div className="flex items-center gap-3 mb-3">
                    <h3 className="font-bold text-lg">{booking.parent_name}</h3>
                    {getStatusBadge(booking.status)}
                  </div>

<div className="space-y-2 text-sm">
                    <div className="flex items-center gap-2 text-muted-foreground">
                      <Phone className="h-4 w-4" />
                      {booking.phone}
                    </div>
                    {booking.email && (
                      <div className="flex items-center gap-2 text-muted-foreground">
                        <Mail className="h-4 w-4" />
                        {booking.email}
                      </div>
                    )}
                    <div className="flex items-center gap-2 text-muted-foreground">
                      <Calendar className="h-4 w-4" />
                      {formatArabicDate(booking.preferred_date)} - {booking.preferred_time}
                    </div>
                  </div>

<p className="text-muted-foreground mt-3">{booking.reason}</p>
                </div>

<div className="flex gap-2">
                  {booking.status === "pending" && (
                    <>
                      <Button
                        size="sm"
                        onClick={() => updateStatus(booking.id, "confirmed")}
                        className="bg-green-600 hover:bg-green-700"
                      >
                        تأكيد
                      </Button>
                      <Button size="sm" variant="outline" onClick={() => updateStatus(booking.id, "cancelled")}>
                        إلغاء
                      </Button>
                    </>
                  )}
                </div>
              </div>
              <div className="text-xs text-muted-foreground">
                تم الإنشاء: {formatArabicDateTime(booking.created_at)}
              </div>
            </Card>
          ))}

{bookings.length === 0 && (
            <Card className="p-12 text-center">
              <Calendar className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
              <p className="text-muted-foreground">لا توجد حجوزات</p>
            </Card>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/questions/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

export const dynamic = "force-dynamic"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { ArrowRight, HelpCircle, Send } from "lucide-react"
import { createBrowserClient } from "@/lib/supabase/client"
import Link from "next/link"
import { formatArabicDate } from "@/lib/utils"

interface Question {
  id: string
  parent_name: string
  email: string
  question: string
  answer: string | null
  status: string
  created_at: string
}

export default function QuestionsPage() {
  const router = useRouter()
  const [questions, setQuestions] = useState<Question[]>([])
  const [loading, setLoading] = useState(true)
  const [answeringId, setAnsweringId] = useState<string | null>(null)
  const [answer, setAnswer] = useState("")

const fetchQuestions = async () => {
      if (!checkAuth()) return

try {
        const supabase = createBrowserClient()
        const { data, error } = await supabase
          .from("parent_questions")
          .select("*")
          .order("created_at", { ascending: false })

if (error) throw error
        setQuestions(data || [])
      } catch (error) {
        console.error("[v0] Error fetching questions:", error)
      } finally {
        setLoading(false)
      }
    }

fetchQuestions()
  }, [router])

const submitAnswer = async (id: string) => {
    try {
      const supabase = createBrowserClient()
      const { error } = await supabase.from("parent_questions").update({ answer, status: "answered" }).eq("id", id)

if (error) throw error

setQuestions(questions.map((q) => (q.id === id ? { ...q, answer, status: "answered" } : q)))
      setAnsweringId(null)
      setAnswer("")
    } catch (error) {
      console.error("[v0] Error submitting answer:", error)
    }
  }

<div className="flex items-center gap-3">
            <div className="h-12 w-12 rounded-2xl bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center">
              <HelpCircle className="h-6 w-6 text-white" />
            </div>
            <div>
              <h1 className="text-3xl font-bold">أسئلة الأولياء</h1>
              <p className="text-muted-foreground">الإجابة على استفسارات الأولياء</p>
            </div>
          </div>
        </div>

<div className="space-y-4">
          {questions.map((question) => (
            <Card key={question.id} className="p-6">
              <div className="mb-4">
                <div className="flex items-center justify-between mb-3">
                  <h3 className="font-bold text-lg">{question.parent_name}</h3>
                  <Badge variant={question.status === "answered" ? "default" : "destructive"}>
                    {question.status === "answered" ? "تمت الإجابة" : "قيد الانتظار"}
                  </Badge>
                </div>
                <p className="text-sm text-muted-foreground mb-2">{question.email}</p>
                <p className="text-foreground mb-4">{question.question}</p>

{question.answer ? (
                  <div className="bg-muted p-4 rounded-lg">
                    <p className="text-sm font-semibold mb-2">الإجابة:</p>
                    <p className="text-muted-foreground">{question.answer}</p>
                  </div>
                ) : answeringId === question.id ? (
                  <div className="space-y-3">
                    <Textarea
                      value={answer}
                      onChange={(e) => setAnswer(e.target.value)}
                      placeholder="اكتب الإجابة هنا..."
                      rows={4}
                    />
                    <div className="flex gap-2">
                      <Button onClick={() => submitAnswer(question.id)} className="gap-2">
                        <Send className="h-4 w-4" />
                        إرسال الإجابة
                      </Button>
                      <Button variant="outline" onClick={() => setAnsweringId(null)}>
                        إلغاء
                      </Button>
                    </div>
                  </div>
                ) : (
                  <Button onClick={() => setAnsweringId(question.id)}>الإجابة على السؤال</Button>
                )}
              </div>
              <div className="text-xs text-muted-foreground">{formatArabicDate(question.created_at)}</div>
            </Card>
          ))}

{questions.length === 0 && (
            <Card className="p-12 text-center">
              <HelpCircle className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
              <p className="text-muted-foreground">لا توجد أسئلة</p>
            </Card>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/students/bullying-report/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
'use client'

import { useState } from 'react'
import { PageLayout } from '@/components/page-layout'
import { Card } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'
import { Home, Drama, Heart, Bell, Lightbulb, Shield, CheckCircle2 } from 'lucide-react'
import { createBrowserClient } from '@/lib/supabase/client'

export default function BullyingReportPage() {
  const [report, setReport] = useState('')
  const [submitted, setSubmitted] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    
    try {
      const supabase = createBrowserClient()
      
      const { error } = await supabase
        .from('student_messages')
        .insert({
          message_type: 'bullying',
          subject: 'بلاغ تنمر',
          message: report,
          is_anonymous: true,
          status: 'pending'
        })

if (error) {
        console.error('[v0] Error inserting bullying report:', error)
        alert('حدث خطأ أثناء إرسال البلاغ. يرجى المحاولة مرة أخرى.')
        return
      }

setSubmitted(true)
      setTimeout(() => {
        setReport('')
        setSubmitted(false)
      }, 3000)
    } catch (error) {
      console.error('[v0] Error:', error)
      alert('حدث خطأ أثناء إرسال البلاغ.')
    }
  }

return (
    <PageLayout 
      title="الإبلاغ عن التنمر" 
      subtitle="بلاغك سري وآمن"
      navItems={navItems}
    >
      <div className="max-w-3xl mx-auto">
        <Card className="p-6 md:p-8 border-none shadow-lg rounded-3xl bg-gradient-to-br from-card via-card to-muted/20">
          <div className="flex items-center gap-3 mb-6">
            <div className="h-12 w-12 rounded-2xl bg-gradient-to-br from-chart-2 to-primary flex items-center justify-center">
              <Shield className="h-6 w-6 text-white" />
            </div>
            <div>
              <h3 className="text-xl font-bold text-foreground">إبلاغ مجهول وآمن</h3>
              <p className="text-sm text-muted-foreground">هويتك محمية بالكامل</p>
            </div>
          </div>

{submitted ? (
            <div className="text-center py-12">
              <div className="h-16 w-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-4">
                <CheckCircle2 className="h-8 w-8 text-green-600" />
              </div>
              <h3 className="text-xl font-bold text-foreground mb-2">تم إرسال البلاغ بنجاح</h3>
              <p className="text-muted-foreground">شكراً لك، سنتعامل مع الموضوع بسرية تامة</p>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-6">
              <div className="bg-muted/50 p-4 rounded-2xl">
                <p className="text-sm text-muted-foreground leading-relaxed">
                  💙 التنمر ليس من حقك أن تتعرض له. يمكنك الإبلاغ هنا بسرية تامة دون أن يعرف أحد هويتك. 
                  نحن هنا لحمايتك ودعمك.
                </p>
              </div>

<div className="space-y-3">
                <Label htmlFor="report" className="text-base font-semibold">
                  ما الذي حدث؟
                </Label>
                <Textarea
                  id="report"
                  value={report}
                  onChange={(e) => setReport(e.target.value)}
                  placeholder="اكتب ما حدث معك هنا... لا تقلق، لن يعرف أحد أنك من أرسل هذا البلاغ"
                  className="min-h-[200px] resize-none text-base rounded-2xl border-2 focus:border-primary"
                  required
                />
              </div>

<Button 
                type="submit" 
                className="w-full bg-gradient-to-r from-chart-2 to-primary hover:opacity-90 text-white h-12 text-base rounded-2xl font-semibold"
              >
                إرسال البلاغ بسرية
              </Button>

<div className="flex items-start gap-2 text-sm text-muted-foreground bg-muted/30 p-4 rounded-2xl">
                <Shield className="h-5 w-5 flex-shrink-0 mt-0.5" />
                <p className="leading-relaxed">
                  جميع البلاغات سرية 100%. لن نشارك معلوماتك مع أي شخص ما عدا المختص الاجتماعي الذي سيساعدك.
                </p>
              </div>
            </form>
          )}
        </Card>
      </div>
    </PageLayout>
  )
}
[V0_FILE]typescriptreact:file="app/students/suggestions/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
'use client'

import { useState } from 'react'
import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Home, Users, Heart, Bell, Lightbulb, CheckCircle } from 'lucide-react'
import { createBrowserClient } from '@/lib/supabase/client'

export default function SuggestionsPage() {
  const [submitted, setSubmitted] = useState(false)
  const [formData, setFormData] = useState({
    category: '',
    suggestion: '',
  })

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    
    try {
      const supabase = createBrowserClient()
      
      const { error } = await supabase
        .from('student_messages')
        .insert({
          message_type: 'suggestion',
          subject: formData.category,
          message: formData.suggestion,
          is_anonymous: true,
          status: 'pending'
        })

if (error) {
        console.error('[v0] Error inserting suggestion:', error)
        alert('حدث خطأ أثناء إرسال الاقتراح. يرجى المحاولة مرة أخرى.')
        return
      }

setSubmitted(true)
    } catch (error) {
      console.error('[v0] Error:', error)
      alert('حدث خطأ أثناء إرسال الاقتراح.')
    }
  }

if (submitted) {
    return (
      <div className="min-h-screen bg-[#C8D1E1] flex items-center justify-center p-4">
        <Card className="max-w-md w-full text-center p-8 bg-card border-none shadow-2xl rounded-3xl">
          <div className="flex justify-center mb-6">
            <div className="h-20 w-20 rounded-full bg-primary/10 flex items-center justify-center">
              <CheckCircle className="h-12 w-12 text-primary" />
            </div>
          </div>
          <CardTitle className="text-2xl mb-4">شكراً على اقتراحك!</CardTitle>
          <CardDescription className="text-lg mb-8">
            تم استلام اقتراحك بنجاح. سيتم دراسته من قبل إدارة المدرسة.
          </CardDescription>
          <Link href="/students">
            <Button className="w-full">العودة إلى الصفحة الرئيسية</Button>
          </Link>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-[#C8D1E1] p-6">
      <div className="max-w-7xl mx-auto">
        <Card className="bg-card border-none shadow-2xl rounded-3xl overflow-hidden">
          <div className="flex flex-col md:flex-row min-h-[600px]">
            {/* القائمة الجانبية */}
            <div className="w-full md:w-20 bg-sidebar flex md:flex-col items-center justify-start md:justify-center gap-4 p-4 md:py-8 rounded-e-3xl">
              <div className="flex md:flex-col gap-3">
                <Link href="/students" className="group">
                  <div className="h-12 w-12 rounded-2xl bg-sidebar-accent group-hover:bg-white flex items-center justify-center transition-all cursor-pointer">
                    <Home className="h-6 w-6 text-white group-hover:text-[#6758B8]" />
                  </div>
                </Link>
                <Link href="/students/club" className="group">
                  <div className="h-12 w-12 rounded-2xl bg-sidebar-accent group-hover:bg-white flex items-center justify-center transition-all cursor-pointer">
                    <Users className="h-6 w-6 text-white group-hover:text-[#6758B8]" />
                  </div>
                </Link>
                <Link href="/students/support" className="group">
                  <div className="h-12 w-12 rounded-2xl bg-sidebar-accent group-hover:bg-white flex items-center justify-center transition-all cursor-pointer">
                    <Heart className="h-6 w-6 text-white group-hover:text-[#6758B8]" />
                  </div>
                </Link>
                <Link href="/students/announcements" className="group">
                  <div className="h-12 w-12 rounded-2xl bg-sidebar-accent group-hover:bg-white flex items-center justify-center transition-all cursor-pointer">
                    <Bell className="h-6 w-6 text-white group-hover:text-[#6758B8]" />
                  </div>
                </Link>
                <Link href="/students/suggestions">
                  <div className="h-12 w-12 rounded-2xl bg-white flex items-center justify-center cursor-pointer shadow-lg">
                    <Lightbulb className="h-6 w-6 text-[#6758B8]" />
                  </div>
                </Link>
              </div>
            </div>

{/* المحتوى الرئيسي */}
            <div className="flex-1 p-8">
              <div className="mb-6 flex items-center gap-3">
                <Lightbulb className="h-8 w-8 text-primary" />
                <div>
                  <h1 className="text-3xl font-bold text-foreground">قسم المقترحات</h1>
                  <p className="text-muted-foreground">شارك أفكارك معنا</p>
                </div>
              </div>

<Card className="bg-white border-none shadow-lg rounded-2xl max-w-2xl mx-auto">
                <CardContent className="p-6">
                  <p className="text-muted-foreground mb-6 leading-relaxed">
                    أفكارك مهمة! ساعدنا في تحسين المدرسة من خلال مقترحاتك البناءة.
                  </p>

<form onSubmit={handleSubmit} className="space-y-6">
                    <div className="space-y-2">
                      <Label htmlFor="category">المجال</Label>
                      <Select
                        value={formData.category}
                        onValueChange={(value) => setFormData({ ...formData, category: value })}
                        required
                      >
                        <SelectTrigger id="category">
                          <SelectValue placeholder="اختر المجال المناسب" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="cleaning">النظافة</SelectItem>
                          <SelectItem value="activity">الأنشطة</SelectItem>
                          <SelectItem value="support">الدعم النفسي والاجتماعي</SelectItem>
                          <SelectItem value="supplies">الأدوات المدرسية</SelectItem>
                          <SelectItem value="other">آخر</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="suggestion">نص الاقتراح</Label>
                      <Textarea
                        id="suggestion"
                        required
                        value={formData.suggestion}
                        onChange={(e) => setFormData({ ...formData, suggestion: e.target.value })}
                        placeholder="اكتب اقتراحك بالتفصيل..."
                        className="min-h-[200px] resize-none"
                      />
                    </div>

<Button type="submit" className="w-full" size="lg">
                      إرسال الاقتراح
                    </Button>
                  </form>
                </CardContent>
              </Card>
            </div>
          </div>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/students/support/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
'use client'

import { useState } from 'react'
import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Label } from '@/components/ui/label'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
import { Textarea } from '@/components/ui/textarea'
import { Input } from '@/components/ui/input'
import { Home, Users, Heart, Bell, Lightbulb, CheckCircle, ShieldCheck } from 'lucide-react'
import { createBrowserClient } from '@/lib/supabase/client'

export default function SupportPage() {
  const [submitted, setSubmitted] = useState(false)
  const [formData, setFormData] = useState({
    type: 'anonymous',
    name: '',
    message: '',
  })

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    
    try {
      const supabase = createBrowserClient()
      
      const { error } = await supabase
        .from('student_messages')
        .insert({
          student_name: formData.type === 'named' ? formData.name : null,
          message_type: 'support',
          subject: 'طلب دعم',
          message: formData.message,
          is_anonymous: formData.type === 'anonymous',
          status: 'pending'
        })

if (error) {
        console.error('[v0] Error inserting support message:', error)
        alert('حدث خطأ أثناء إرسال الرسالة. يرجى المحاولة مرة أخرى.')
        return
      }

setSubmitted(true)
    } catch (error) {
      console.error('[v0] Error:', error)
      alert('حدث خطأ أثناء إرسال الرسالة.')
    }
  }

if (submitted) {
    return (
      <div className="min-h-screen bg-[#C8D1E1] flex items-center justify-center p-4">
        <Card className="max-w-md w-full text-center p-8 bg-card border-none shadow-2xl rounded-3xl">
          <div className="flex justify-center mb-6">
            <div className="h-20 w-20 rounded-full bg-secondary/10 flex items-center justify-center">
              <CheckCircle className="h-12 w-12 text-secondary" />
            </div>
          </div>
          <CardTitle className="text-2xl mb-4">تم إرسال رسالتك بنجاح!</CardTitle>
          <CardDescription className="text-lg mb-8">
            شكراً لثقتك. سيقوم المختص الاجتماعي بالتواصل معك أو معالجة الموضوع في أقرب وقت.
          </CardDescription>
          <Link href="/students">
            <Button className="w-full">العودة إلى الصفحة الرئيسية</Button>
          </Link>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-[#C8D1E1] p-6">
      <div className="max-w-7xl mx-auto">
        <Card className="bg-card border-none shadow-2xl rounded-3xl overflow-hidden">
          <div className="flex flex-col md:flex-row min-h-[600px]">
            {/* القائمة الجانبية */}
            <div className="w-full md:w-20 bg-sidebar flex md:flex-col items-center justify-start md:justify-center gap-4 p-4 md:py-8 rounded-e-3xl">
              <div className="flex md:flex-col gap-3">
                <Link href="/students" className="group">
                  <div className="h-12 w-12 rounded-2xl bg-sidebar-accent group-hover:bg-white flex items-center justify-center transition-all cursor-pointer">
                    <Home className="h-6 w-6 text-white group-hover:text-[#6758B8]" />
                  </div>
                </Link>
                <Link href="/students/club" className="group">
                  <div className="h-12 w-12 rounded-2xl bg-sidebar-accent group-hover:bg-white flex items-center justify-center transition-all cursor-pointer">
                    <Users className="h-6 w-6 text-white group-hover:text-[#6758B8]" />
                  </div>
                </Link>
                <Link href="/students/support">
                  <div className="h-12 w-12 rounded-2xl bg-white flex items-center justify-center cursor-pointer shadow-lg">
                    <Heart className="h-6 w-6 text-[#6758B8]" />
                  </div>
                </Link>
                <Link href="/students/announcements" className="group">
                  <div className="h-12 w-12 rounded-2xl bg-sidebar-accent group-hover:bg-white flex items-center justify-center transition-all cursor-pointer">
                    <Bell className="h-6 w-6 text-white group-hover:text-[#6758B8]" />
                  </div>
                </Link>
                <Link href="/students/suggestions" className="group">
                  <div className="h-12 w-12 rounded-2xl bg-sidebar-accent group-hover:bg-white flex items-center justify-center transition-all cursor-pointer">
                    <Lightbulb className="h-6 w-6 text-white group-hover:text-[#6758B8]" />
                  </div>
                </Link>
              </div>
            </div>

{/* المحتوى الرئيسي */}
            <div className="flex-1 p-8">
              <div className="mb-6 flex items-center gap-3">
                <ShieldCheck className="h-8 w-8 text-secondary" />
                <div>
                  <h1 className="text-3xl font-bold text-foreground">إحكِ للمختص</h1>
                  <p className="text-muted-foreground">مساحة آمنة للتعبير</p>
                </div>
              </div>

<Card className="bg-white border-none shadow-lg rounded-2xl">
                <CardContent className="p-6">
                  <p className="text-muted-foreground mb-6 leading-relaxed">
                    هذه مساحة آمنة وسرية تماماً. شارك معنا ما يقلقك أو أي مشكلة تواجهها، وسيقوم المختص الاجتماعي بمساعدتك بكل احترام وسرية.
                  </p>
                  
                  <form onSubmit={handleSubmit} className="space-y-6">
                    <div className="space-y-4">
                      <Label>نوع الإرسال</Label>
                      <RadioGroup
                        value={formData.type}
                        onValueChange={(value) => setFormData({ ...formData, type: value })}
                      >
                        <div className="flex items-center gap-3">
                          <RadioGroupItem value="anonymous" id="anonymous" />
                          <Label htmlFor="anonymous" className="cursor-pointer text-base">
                            مجهول (لن يتم معرفة هويتك)
                          </Label>
                        </div>
                        <div className="flex items-center gap-3">
                          <RadioGroupItem value="named" id="named" />
                          <Label htmlFor="named" className="cursor-pointer text-base">
                            بالاسم (سيتم التواصل معك مباشرة)
                          </Label>
                        </div>
                      </RadioGroup>
                    </div>

{formData.type === 'named' && (
                      <div className="space-y-2">
                        <Label htmlFor="name">الاسم الكامل</Label>
                        <Input
                          id="name"
                          required
                          value={formData.name}
                          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                          placeholder="أدخل اسمك الكامل"
                        />
                      </div>
                    )}

<div className="space-y-2">
                      <Label htmlFor="message">وصف المشكلة</Label>
                      <Textarea
                        id="message"
                        required
                        value={formData.message}
                        onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                        placeholder="اكتب هنا ما تريد مشاركته مع المختص الاجتماعي..."
                        className="min-h-[200px] resize-none"
                      />
                      <p className="text-sm text-muted-foreground">
                        تذكر: كل ما تكتبه هنا سري تماماً ولن يطلع عليه إلا المختص الاجتماعي
                      </p>
                    </div>

<Button type="submit" className="w-full" size="lg">
                      إرسال الرسالة
                    </Button>
                  </form>
                </CardContent>
              </Card>
            </div>
          </div>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/manage-faqs/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
'use client'

export const dynamic = 'force-dynamic'

import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { Card } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { createBrowserClient } from '@/lib/supabase/client'
import { ArrowRight, Plus, Edit, Trash2, Eye, EyeOff } from 'lucide-react'
import Link from 'next/link'

export default function ManageFAQsPage() {
  const router = useRouter()
  const [loading, setLoading] = useState(true)
  const [faqs, setFaqs] = useState<any[]>([])
  const [showForm, setShowForm] = useState(false)
  const [editingId, setEditingId] = useState<string | null>(null)
  const [formData, setFormData] = useState({
    category: '',
    question: '',
    answer: '',
    display_order: 0
  })

useEffect(() => {
    const isLoggedIn = localStorage.getItem('admin_logged_in')
    if (!isLoggedIn) {
      router.push('/admin/login')
      return
    }
    loadFAQs()
  }, [])

const loadFAQs = async () => {
    try {
      const supabase = createBrowserClient()
      if (!supabase) {
        console.error('Supabase client not available')
        return
      }
      
      const { data, error } = await supabase
        .from('faqs')
        .select('*')
        .order('category')
        .order('display_order')

if (error) throw error
      setFaqs(data || [])
    } catch (error) {
      console.error('Error loading FAQs:', error)
      alert('حدث خطأ أثناء تحميل الأسئلة')
    } finally {
      setLoading(false)
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    
    try {
      const supabase = createBrowserClient()
      if (!supabase) {
        alert('خطأ في الاتصال بقاعدة البيانات')
        return
      }
      
      if (editingId) {
        const { error } = await supabase
          .from('faqs')
          .update(formData)
          .eq('id', editingId)
        if (error) throw error
      } else {
        const { error } = await supabase
          .from('faqs')
          .insert([formData])
        if (error) throw error
      }

setFormData({ category: '', question: '', answer: '', display_order: 0 })
      setShowForm(false)
      setEditingId(null)
      loadFAQs()
    } catch (error) {
      console.error('Error saving:', error)
      alert('حدث خطأ أثناء الحفظ: ' + (error as any).message)
    }
  }

const toggleVisibility = async (id: string, currentVisibility: boolean) => {
    try {
      const supabase = createBrowserClient()
      if (!supabase) return
      
      const { error } = await supabase
        .from('faqs')
        .update({ is_visible: !currentVisibility })
        .eq('id', id)
      
      if (error) throw error
      loadFAQs()
    } catch (error) {
      console.error('Error toggling visibility:', error)
    }
  }

const handleDelete = async (id: string) => {
    if (!confirm('هل أنت متأكد من الحذف؟')) return
    
    try {
      const supabase = createBrowserClient()
      if (!supabase) return
      
      const { error } = await supabase
        .from('faqs')
        .delete()
        .eq('id', id)
      
      if (error) throw error
      loadFAQs()
    } catch (error) {
      console.error('Error deleting:', error)
    }
  }

if (loading) {
    return <div className="flex items-center justify-center min-h-screen">جاري التحميل...</div>
  }

return (
    <div className="min-h-screen bg-background p-6">
      <div className="max-w-7xl mx-auto">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-4">
            <Link href="/admin/parents-section">
              <Button variant="outline" size="icon">
                <ArrowRight className="h-5 w-5" />
              </Button>
            </Link>
            <h1 className="text-3xl font-bold">إدارة الأسئلة والأجوبة</h1>
          </div>
          <Button onClick={() => setShowForm(!showForm)} className="gap-2">
            <Plus className="h-5 w-5" />
            إضافة سؤال جديد
          </Button>
        </div>

{showForm && (
          <Card className="p-6 mb-6">
            <h2 className="text-xl font-bold mb-4">{editingId ? 'تعديل السؤال' : 'إضافة سؤال جديد'}</h2>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="block text-sm font-medium mb-2">التصنيف</label>
                <Input
                  value={formData.category}
                  onChange={(e) => setFormData({ ...formData, category: e.target.value })}
                  placeholder="مثال: التواصل، السلوك، الأنشطة"
                  required
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">السؤال</label>
                <Textarea
                  value={formData.question}
                  onChange={(e) => setFormData({ ...formData, question: e.target.value })}
                  required
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">الإجابة</label>
                <Textarea
                  value={formData.answer}
                  onChange={(e) => setFormData({ ...formData, answer: e.target.value })}
                  className="min-h-[100px]"
                  required
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">ترتيب العرض</label>
                <Input
                  type="number"
                  value={formData.display_order}
                  onChange={(e) => setFormData({ ...formData, display_order: parseInt(e.target.value) })}
                />
              </div>
              <div className="flex gap-2">
                <Button type="submit">حفظ</Button>
                <Button type="button" variant="outline" onClick={() => {
                  setShowForm(false)
                  setEditingId(null)
                  setFormData({ category: '', question: '', answer: '', display_order: 0 })
                }}>
                  إلغاء
                </Button>
              </div>
            </form>
          </Card>
        )}

<div className="space-y-4">
          {faqs.map((faq) => (
            <Card key={faq.id} className="p-4">
              <div className="flex items-start justify-between mb-3">
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-2">
                    <span className="px-2 py-1 rounded text-xs bg-primary/10 text-primary font-medium">
                      {faq.category}
                    </span>
                    <span className={`px-2 py-1 rounded text-xs ${faq.is_visible ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>
                      {faq.is_visible ? 'مرئي' : 'مخفي'}
                    </span>
                  </div>
                  <h3 className="font-bold text-lg mb-2">{faq.question}</h3>
                  <p className="text-sm text-muted-foreground">{faq.answer}</p>
                </div>
              </div>
              <div className="flex gap-2">
                <Button size="sm" variant="outline" onClick={() => {
                  setEditingId(faq.id)
                  setFormData({
                    category: faq.category,
                    question: faq.question,
                    answer: faq.answer,
                    display_order: faq.display_order
                  })
                  setShowForm(true)
                }}>
                  <Edit className="h-4 w-4" />
                </Button>
                <Button size="sm" variant="outline" onClick={() => toggleVisibility(faq.id, faq.is_visible)}>
                  {faq.is_visible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                </Button>
                <Button size="sm" variant="outline" onClick={() => handleDelete(faq.id)}>
                  <Trash2 className="h-4 w-4 text-red-500" />
                </Button>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/007_student_points_system.sql" isMerged="true"
-- تحديث جدول student_points لإضافة رمز التلميذ
ALTER TABLE student_points ADD COLUMN IF NOT EXISTS student_code TEXT UNIQUE;
ALTER TABLE student_points ADD COLUMN IF NOT EXISTS created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW();
ALTER TABLE student_points ADD COLUMN IF NOT EXISTS updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW();

-- جدول فئات النقاط (المتغيرات المعتمدة)
CREATE TABLE IF NOT EXISTS point_categories (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  description TEXT,
  points_value INTEGER DEFAULT 1,
  color TEXT DEFAULT 'from-primary to-chart-3',
  is_active BOOLEAN DEFAULT true,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- جدول سجل النقاط (تفاصيل كل نقطة)
CREATE TABLE IF NOT EXISTS point_transactions (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  student_code TEXT NOT NULL,
  category_id UUID REFERENCES point_categories(id),
  points INTEGER NOT NULL,
  reason TEXT,
  created_by UUID,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Enable RLS
ALTER TABLE point_categories ENABLE ROW LEVEL SECURITY;
ALTER TABLE point_transactions ENABLE ROW LEVEL SECURITY;

-- السياسات
CREATE POLICY IF NOT EXISTS "allow_read_active_categories"
  ON point_categories FOR SELECT
  USING (is_active = true);

CREATE POLICY IF NOT EXISTS "allow_admin_all_categories"
  ON point_categories FOR ALL
  USING (true);

CREATE POLICY IF NOT EXISTS "allow_read_own_transactions"
  ON point_transactions FOR SELECT
  USING (true);

CREATE POLICY IF NOT EXISTS "allow_admin_all_transactions"
  ON point_transactions FOR ALL
  USING (true);

-- إدراج فئات افتراضية
INSERT INTO point_categories (name, description, points_value, color) VALUES
('التعاون مع الزملاء', 'مساعدة الزملاء والعمل الجماعي', 25, 'from-primary to-chart-3'),
('المشاركة في النشاط', 'المشاركة الفعالة في الأنشطة المدرسية', 30, 'from-secondary to-chart-4'),
('السلوك الإيجابي', 'التصرف بأدب واحترام', 20, 'from-chart-5 to-chart-3'),
('مساعدة زميل', 'تقديم المساعدة للآخرين', 15, 'from-chart-2 to-primary'),
('الالتزام بالمواعيد', 'الحضور في الوقت المناسب', 10, 'from-primary to-secondary'),
('النظافة', 'المحافظة على نظافة المدرسة', 15, 'from-chart-3 to-chart-5')
ON CONFLICT DO NOTHING;
[V0_FILE]typescriptreact:file="app/students/points/page.tsx" isEdit="true" isMerged="true"
'use client'

import { useState } from 'react'
import { PageLayout } from '@/components/page-layout'
import { Card } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Progress } from '@/components/ui/progress'
import { Home, Drama, Heart, Bell, Lightbulb, Star, Trophy, TrendingUp, Award, Calendar } from 'lucide-react'
import { createBrowserClient } from '@/lib/supabase/client'

export default function PointsPage() {
  const [studentCode, setStudentCode] = useState('')
  const [isLoggedIn, setIsLoggedIn] = useState(false)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')
  const [studentData, setStudentData] = useState<any>(null)

const handleLogin = async () => {
    if (!studentCode || studentCode.length !== 10) {
      setError('الرجاء إدخال رمز صحيح (حرف + 9 أرقام)')
      return
    }

setLoading(true)
    setError('')

try {
      const supabase = createBrowserClient()
      
      if (!supabase) {
        throw new Error('فشل إنشاء اتصال Supabase')
      }
      
      const { data: student, error: studentError } = await supabase
        .from('student_points')
        .select('*')
        .eq('student_code', studentCode.toUpperCase())
        .single()

if (studentError || !student) {
        setError('رمز التلميذ غير صحيح أو غير مسجل')
        setLoading(false)
        return
      }

setStudentData(student)
      setIsLoggedIn(true)
    } catch (err) {
      console.error('[v0] Error:', err)
      setError('حدث خطأ، الرجاء المحاولة مرة أخرى')
    } finally {
      setLoading(false)
    }
  }

const handleLogout = () => {
    setIsLoggedIn(false)
    setStudentCode('')
    setStudentData(null)
    setError('')
  }

if (!isLoggedIn) {
    return (
      <PageLayout 
        title="نظام النقاط والإنجازات" 
        subtitle="تابع تقدمك ونجاحاتك"
        navItems={navItems}
      >
        <div className="max-w-md mx-auto">
          <Card className="p-8 border-none shadow-xl rounded-3xl bg-gradient-to-br from-card to-muted/20">
            <div className="text-center mb-6">
              <div className="h-20 w-20 rounded-3xl bg-gradient-to-br from-primary to-chart-3 mx-auto mb-4 flex items-center justify-center">
                <Trophy className="h-10 w-10 text-white" />
              </div>
              <h2 className="text-2xl font-bold mb-2">تسجيل الدخول</h2>
              <p className="text-muted-foreground">أدخل رمزك للاطلاع على نقاطك</p>
            </div>

<div className="space-y-4">
              <div>
                <label className="text-sm font-medium mb-2 block">رمز التلميذ</label>
                <Input
                  type="text"
                  placeholder="أدخل الرمز الذي منحك المختص الاجتماعي"
                  value={studentCode}
                  onChange={(e) => {
                    setStudentCode(e.target.value.toUpperCase())
                    setError('')
                  }}
                  maxLength={10}
                  className="text-center text-lg tracking-wider"
                  dir="ltr"
                />
                <p className="text-xs text-muted-foreground mt-2 text-center leading-relaxed">
                  إن لم تتوفر على رمزك الخاص، تواصل مع المختص الاجتماعي
                </p>
              </div>

{error && (
                <div className="p-3 bg-destructive/10 border border-destructive/20 rounded-lg text-destructive text-sm text-center">
                  {error}
                </div>
              )}

<Button
                onClick={handleLogin}
                disabled={loading || studentCode.length !== 10}
                className="w-full"
                size="lg"
              >
                {loading ? 'جاري التحميل...' : 'عرض نقاطي'}
              </Button>
            </div>
          </Card>
        </div>
      </PageLayout>
    )
  }

const totalPoints = studentData?.points || 0
  const nextLevel = Math.ceil(totalPoints / 100) * 100 + 100
  const progress = (totalPoints / nextLevel) * 100
  const achievements = studentData?.achievements || []

return (
    <PageLayout 
      title="نظام النقاط والإنجازات" 
      subtitle={`مرحباً ${studentData?.student_name || ''}`}
      navItems={navItems}
    >
      <div className="space-y-6">
        {/* بطاقة النقاط الكلية */}
        <Card className="relative overflow-hidden border-none shadow-xl rounded-3xl bg-gradient-to-br from-primary via-chart-3 to-chart-5 p-8">
          <div className="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full -mr-20 -mt-20"></div>
          <div className="absolute bottom-0 left-0 w-32 h-32 bg-white/10 rounded-full -ml-16 -mb-16"></div>
          
          <div className="relative flex items-center justify-between mb-6">
            <div>
              <h3 className="text-white/80 text-sm mb-1">مجموع نقاطك</h3>
              <p className="text-5xl font-bold text-white">{totalPoints}</p>
              <p className="text-white/70 text-sm mt-1">{studentData?.student_class}</p>
            </div>
            <div className="h-20 w-20 rounded-3xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
              <Trophy className="h-10 w-10 text-white" />
            </div>
          </div>

<div className="relative space-y-2">
            <div className="flex justify-between text-white text-sm">
              <span>المستوى التالي</span>
              <span className="font-semibold">{nextLevel} نقطة</span>
            </div>
            <Progress value={progress} className="h-3 bg-white/20" />
            <p className="text-white/80 text-xs">
              تحتاج {nextLevel - totalPoints} نقطة للوصول للمستوى التالي
            </p>
          </div>

<div className="relative mt-6">
            <Button
              onClick={handleLogout}
              variant="secondary"
              size="sm"
              className="bg-white/20 hover:bg-white/30 text-white border-white/30"
            >
              تسجيل الخروج
            </Button>
          </div>
        </Card>

{/* إحصائيات سريعة */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <Card className="p-6 border-none shadow-lg rounded-3xl bg-gradient-to-br from-card to-muted/20">
            <div className="flex items-center gap-4">
              <div className="h-12 w-12 rounded-2xl bg-gradient-to-br from-primary to-chart-3 flex items-center justify-center">
                <Star className="h-6 w-6 text-white" />
              </div>
              <div>
                <p className="text-2xl font-bold text-foreground">{achievements.length}</p>
                <p className="text-sm text-muted-foreground">إنجاز مسجل</p>
              </div>
            </div>
          </Card>

<Card className="p-6 border-none shadow-lg rounded-3xl bg-gradient-to-br from-card to-muted/20">
            <div className="flex items-center gap-4">
              <div className="h-12 w-12 rounded-2xl bg-gradient-to-br from-secondary to-chart-4 flex items-center justify-center">
                <Award className="h-6 w-6 text-white" />
              </div>
              <div>
                <p className="text-2xl font-bold text-foreground">{Math.floor(totalPoints / 10)}</p>
                <p className="text-sm text-muted-foreground">مستوى الإنجاز</p>
              </div>
            </div>
          </Card>

<Card className="p-6 border-none shadow-lg rounded-3xl bg-gradient-to-br from-card to-muted/20">
            <div className="flex items-center gap-4">
              <div className="h-12 w-12 rounded-2xl bg-gradient-to-br from-chart-5 to-chart-3 flex items-center justify-center">
                <TrendingUp className="h-6 w-6 text-white" />
              </div>
              <div>
                <p className="text-2xl font-bold text-foreground">{totalPoints}</p>
                <p className="text-sm text-muted-foreground">نقاط إيجابية</p>
              </div>
            </div>
          </Card>
        </div>

{/* سجل النقاط */}
        <Card className="p-6 md:p-8 border-none shadow-lg rounded-3xl">
          <h3 className="text-xl font-bold text-foreground mb-6">سجل الإنجازات والنقاط</h3>
          <div className="space-y-4">
            {achievements.length > 0 ? (
              achievements.map((achievement: string, index: number) => (
                <div key={index} className="flex items-center gap-4 p-4 bg-muted/30 rounded-2xl hover:bg-muted/50 transition-colors">
                  <div className="h-12 w-12 rounded-2xl bg-gradient-to-br from-primary to-chart-3 flex items-center justify-center flex-shrink-0">
                    <Star className="h-6 w-6 text-white" />
                  </div>
                  <div className="flex-1">
                    <p className="text-sm text-foreground">{achievement}</p>
                  </div>
                </div>
              ))
            ) : (
              <div className="text-center py-12 text-muted-foreground">
                <Star className="h-16 w-16 mx-auto mb-4 opacity-20" />
                <p>لا توجد نقاط مسجلة بعد</p>
                <p className="text-sm mt-2">ابدأ بتحقيق إنجازاتك لكسب النقاط!</p>
              </div>
            )}
          </div>
        </Card>
      </div>
    </PageLayout>
  )
}
[V0_FILE]typescriptreact:file="app/admin/points/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-muted to-background">
      <div className="text-center">
        <div className="animate-spin h-12 w-12 border-4 border-primary border-t-transparent rounded-full mx-auto mb-4"></div>
        <p className="text-muted-foreground">جاري تحميل نظام النقاط...</p>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/009_club_registrations.sql" isMerged="true"
-- إنشاء جدول تسجيلات النادي السوسيوثقافي
CREATE TABLE IF NOT EXISTS club_registrations (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  student_name TEXT NOT NULL,
  student_level TEXT NOT NULL,
  assigned_teacher TEXT NOT NULL,
  interests TEXT[] NOT NULL,
  committee TEXT NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- تفعيل RLS
ALTER TABLE club_registrations ENABLE ROW LEVEL SECURITY;

-- السماح للجميع بإضافة التسجيلات
CREATE POLICY allow_insert_club_registrations ON club_registrations
  FOR INSERT WITH CHECK (true);

-- السماح للمشرفين بقراءة جميع التسجيلات
CREATE POLICY allow_read_all_club_registrations ON club_registrations
  FOR SELECT USING (true);

-- السماح للمشرفين بحذف التسجيلات
CREATE POLICY allow_delete_all_club_registrations ON club_registrations
  FOR DELETE USING (true);

-- إنشاء index لتسريع البحث
CREATE INDEX idx_club_registrations_created_at ON club_registrations(created_at DESC);
CREATE INDEX idx_club_registrations_committee ON club_registrations(committee);
[V0_FILE]typescriptreact:file="app/admin/club-registrations/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/club-activities/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/club-activities/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { formatArabicDate } from "@/lib/utils"

import { useState, useEffect } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Calendar, Plus, Edit, Trash2, ImageIcon, Activity } from "lucide-react"
import { createBrowserClient } from "@/lib/supabase/client"

interface ClubActivity {
  id: string
  title: string
  description: string
  activity_type: string
  date: string | null
  is_active: boolean
  image_url: string | null
  created_at: string
}

export default function ClubActivitiesPage() {
  const [activities, setActivities] = useState<ClubActivity[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [editingId, setEditingId] = useState<string | null>(null)
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    activity_type: "",
    date: "",
    image_url: "",
  })

useEffect(() => {
    fetchActivities()
  }, [])

const fetchActivities = async () => {
    try {
      const supabase = createBrowserClient()
      if (!supabase) throw new Error("Supabase client not initialized")

const { data, error } = await supabase.from("club_activities").select("*").order("date", { ascending: false })

if (error) throw error
      setActivities(data || [])
    } catch (error) {
      console.error("Error fetching activities:", error)
    } finally {
      setIsLoading(false)
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

try {
      const supabase = createBrowserClient()

if (editingId) {
        const { error } = await supabase
          .from("club_activities")
          .update({
            ...formData,
            date: formData.date || null,
            updated_at: new Date().toISOString(),
          })
          .eq("id", editingId)

if (error) throw error
      } else {
        const { error } = await supabase.from("club_activities").insert([
          {
            ...formData,
            date: formData.date || null,
            is_active: true,
          },
        ])

if (error) throw error
      }

setFormData({ title: "", description: "", activity_type: "", date: "", image_url: "" })
      setEditingId(null)
      fetchActivities()
    } catch (error) {
      console.error("Error saving activity:", error)
      alert("حدث خطأ أثناء الحفظ")
    } finally {
      setIsSubmitting(false)
    }
  }

const handleEdit = (activity: ClubActivity) => {
    setEditingId(activity.id)
    setFormData({
      title: activity.title,
      description: activity.description,
      activity_type: activity.activity_type,
      date: activity.date || "",
      image_url: activity.image_url || "",
    })
  }

const handleDelete = async (id: string) => {
    if (!confirm("هل أنت متأكد من حذف هذا النشاط؟")) return

try {
      const supabase = createBrowserClient()
      const { error } = await supabase.from("club_activities").delete().eq("id", id)

if (error) throw error
      fetchActivities()
    } catch (error) {
      console.error("Error deleting activity:", error)
      alert("حدث خطأ أثناء الحذف")
    }
  }

const toggleActive = async (id: string, currentStatus: boolean) => {
    try {
      const supabase = createBrowserClient()
      const { error } = await supabase.from("club_activities").update({ is_active: !currentStatus }).eq("id", id)

if (error) throw error
      fetchActivities()
    } catch (error) {
      console.error("Error toggling status:", error)
    }
  }

if (isLoading) {
    return <div className="flex items-center justify-center min-h-screen">جاري التحميل...</div>
  }

return (
    <div className="min-h-screen bg-background p-6">
      <div className="max-w-7xl mx-auto">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-foreground mb-2">إدارة أنشطة النادي السوسيوثقافي</h1>
          <p className="text-muted-foreground">إضافة وتعديل وحذف أنشطة النادي</p>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Form */}
          <Card className="p-6">
            <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
              {editingId ? <Edit className="h-5 w-5" /> : <Plus className="h-5 w-5" />}
              {editingId ? "تعديل النشاط" : "إضافة نشاط جديد"}
            </h2>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <Label>عنوان النشاط</Label>
                <Input
                  value={formData.title}
                  onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                  placeholder="مثال: ورشة الرسم"
                  required
                />
              </div>

<div>
                <Label>الوصف</Label>
                <Textarea
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  placeholder="وصف تفصيلي للنشاط"
                  rows={4}
                  required
                />
              </div>

<div>
                <Label>نوع النشاط</Label>
                <Input
                  value={formData.activity_type}
                  onChange={(e) => setFormData({ ...formData, activity_type: e.target.value })}
                  placeholder="مثال: فني، رياضي، ثقافي"
                  required
                />
              </div>

<div>
                <Label>التاريخ (اختياري)</Label>
                <Input
                  type="date"
                  value={formData.date}
                  onChange={(e) => setFormData({ ...formData, date: e.target.value })}
                />
              </div>

<div>
                <Label>رابط الصورة (اختياري)</Label>
                <Input
                  type="url"
                  value={formData.image_url}
                  onChange={(e) => setFormData({ ...formData, image_url: e.target.value })}
                  placeholder="https://example.com/image.jpg"
                />
              </div>

<div className="flex gap-2">
                <Button type="submit" disabled={isSubmitting} className="flex-1">
                  {isSubmitting ? "جاري الحفظ..." : editingId ? "تحديث" : "إضافة"}
                </Button>
                {editingId && (
                  <Button
                    type="button"
                    variant="outline"
                    onClick={() => {
                      setEditingId(null)
                      setFormData({ title: "", description: "", activity_type: "", date: "", image_url: "" })
                    }}
                  >
                    إلغاء
                  </Button>
                )}
              </div>
            </form>
          </Card>

{/* Activities List */}
          <div className="space-y-4">
            <h2 className="text-xl font-bold">الأنشطة الحالية ({activities.length})</h2>
            {activities.length === 0 ? (
              <Card className="p-8 text-center text-muted-foreground">لا توجد أنشطة بعد. قم بإضافة نشاط جديد</Card>
            ) : (
              activities.map((activity) => (
                <Card key={activity.id} className="p-4">
                  <div className="flex items-start gap-4">
                    {activity.image_url ? (
                      <img
                        src={activity.image_url || "/placeholder.svg"}
                        alt={activity.title}
                        className="w-20 h-20 object-cover rounded-lg"
                      />
                    ) : (
                      <div className="w-20 h-20 bg-muted rounded-lg flex items-center justify-center">
                        <ImageIcon className="h-8 w-8 text-muted-foreground" />
                      </div>
                    )}

<div className="flex-1">
                      <h3 className="font-bold text-lg">{activity.title}</h3>
                      <p className="text-sm text-muted-foreground mb-2">{activity.description}</p>
                      <div className="flex items-center gap-4 text-xs text-muted-foreground">
                        <span className="flex items-center gap-1">
                          <Activity className="h-3 w-3" />
                          {activity.activity_type}
                        </span>
                        {activity.date && (
                          <span className="flex items-center gap-1">
                            <Calendar className="h-3 w-3" />
                            {formatArabicDate(activity.date)}
                          </span>
                        )}
                        <span
                          className={`px-2 py-1 rounded ${activity.is_active ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`}
                        >
                          {activity.is_active ? "نشط" : "معطل"}
                        </span>
                      </div>
                    </div>

<div className="flex flex-col gap-2">
                      <Button size="sm" variant="outline" onClick={() => handleEdit(activity)}>
                        <Edit className="h-4 w-4" />
                      </Button>
                      <Button size="sm" variant="outline" onClick={() => toggleActive(activity.id, activity.is_active)}>
                        {activity.is_active ? "✓" : "✗"}
                      </Button>
                      <Button size="sm" variant="destructive" onClick={() => handleDelete(activity.id)}>
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                </Card>
              ))
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/club-registrations/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Search, Download, Calendar, GraduationCap, User } from "lucide-react"
import { createBrowserClient } from "@/lib/supabase/client"
import { formatArabicDate } from "@/lib/utils"

interface ClubRegistration {
  id: string
  student_name: string
  student_level: string
  assigned_teacher: string
  committee: string
  interests: string[]
  created_at: string
}

export default function ClubRegistrationsPage() {
  const [registrations, setRegistrations] = useState<ClubRegistration[]>([])
  const [filteredRegistrations, setFilteredRegistrations] = useState<ClubRegistration[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedCommittee, setSelectedCommittee] = useState<string>("all")

const committees = [
    "لجنة الإبداع والإبتكار",
    "لجنة الأنشطة الفنية والثقافية",
    "لجنة البيئة والتنمية المستدامة",
    "لجنة الإعلام والتواصل",
    "لجنة التطوع والخدمة الاجتماعية",
    "لجنة الترفيه والرياضة",
  ]

useEffect(() => {
    fetchRegistrations()
  }, [])

useEffect(() => {
    filterRegistrations()
  }, [searchTerm, selectedCommittee, registrations])

const fetchRegistrations = async () => {
    try {
      const supabase = createBrowserClient()
      if (!supabase) throw new Error("Supabase client not initialized")

const { data, error } = await supabase
        .from("club_registrations")
        .select("*")
        .order("created_at", { ascending: false })

if (error) throw error
      setRegistrations(data || [])
    } catch (error) {
      console.error("Error fetching registrations:", error)
    } finally {
      setIsLoading(false)
    }
  }

const filterRegistrations = () => {
    let filtered = registrations

if (searchTerm) {
      filtered = filtered.filter(
        (reg) =>
          reg.student_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
          reg.student_level.toLowerCase().includes(searchTerm.toLowerCase()) ||
          reg.assigned_teacher.toLowerCase().includes(searchTerm.toLowerCase()),
      )
    }

if (selectedCommittee !== "all") {
      filtered = filtered.filter((reg) => reg.committee === selectedCommittee)
    }

setFilteredRegistrations(filtered)
  }

const exportToCSV = () => {
    const headers = ["الاسم", "المستوى", "الأستاذ", "اللجنة", "الميولات", "تاريخ التسجيل"]
    const rows = filteredRegistrations.map((reg) => [
      reg.student_name,
      reg.student_level,
      reg.assigned_teacher,
      reg.committee,
      reg.interests.join(", "),
      formatArabicDate(reg.created_at),
    ])

const csvContent = [headers.join(","), ...rows.map((row) => row.join(","))].join("\n")

const blob = new Blob(["\ufeff" + csvContent], { type: "text/csv;charset=utf-8;" })
    const link = document.createElement("a")
    link.href = URL.createObjectURL(blob)
    link.download = `club_registrations_${new Date().toISOString().split("T")[0]}.csv`
    link.click()
  }

const getCommitteeStats = () => {
    return committees.map((committee) => ({
      name: committee,
      count: registrations.filter((reg) => reg.committee === committee).length,
    }))
  }

if (isLoading) {
    return <div className="flex items-center justify-center min-h-screen">جاري التحميل...</div>
  }

return (
    <div className="min-h-screen bg-background p-6">
      <div className="max-w-7xl mx-auto">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-foreground mb-2">طلبات الانخراط في النادي</h1>
          <p className="text-muted-foreground">عرض وإدارة طلبات انخراط التلاميذ</p>
        </div>

{/* Stats */}
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
          {getCommitteeStats().map((stat, index) => (
            <Card key={index} className="p-4 text-center">
              <div className="text-2xl font-bold text-primary">{stat.count}</div>
              <div className="text-xs text-muted-foreground mt-1">{stat.name}</div>
            </Card>
          ))}
        </div>

{/* Filters */}
        <Card className="p-4 mb-6">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="flex-1 relative">
              <Search className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                placeholder="البحث بالاسم أو المستوى أو الأستاذ..."
                className="pr-10"
              />
            </div>
            <select
              value={selectedCommittee}
              onChange={(e) => setSelectedCommittee(e.target.value)}
              className="px-4 py-2 border rounded-md bg-background"
            >
              <option value="all">جميع اللجان</option>
              {committees.map((committee) => (
                <option key={committee} value={committee}>
                  {committee}
                </option>
              ))}
            </select>
            <Button onClick={exportToCSV} variant="outline" className="gap-2 bg-transparent">
              <Download className="h-4 w-4" />
              تصدير CSV
            </Button>
          </div>
        </Card>

{/* Registrations List */}
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <h2 className="text-xl font-bold">الطلبات ({filteredRegistrations.length})</h2>
          </div>

{filteredRegistrations.length === 0 ? (
            <Card className="p-8 text-center text-muted-foreground">لا توجد طلبات مطابقة</Card>
          ) : (
            filteredRegistrations.map((registration) => (
              <Card key={registration.id} className="p-6">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div>
                    <div className="flex items-center gap-2 mb-2">
                      <User className="h-4 w-4 text-primary" />
                      <span className="font-bold">{registration.student_name}</span>
                    </div>
                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                      <GraduationCap className="h-4 w-4" />
                      {registration.student_level}
                    </div>
                  </div>

<div>
                    <div className="text-sm text-muted-foreground mb-1">الأستاذ المكلف</div>
                    <div className="font-semibold">{registration.assigned_teacher}</div>
                    <div className="text-sm text-muted-foreground mt-2">اللجنة المختارة</div>
                    <Badge className="mt-1">{registration.committee}</Badge>
                  </div>

<div>
                    <div className="text-sm text-muted-foreground mb-2">الميولات</div>
                    <div className="flex flex-wrap gap-1">
                      {registration.interests.map((interest, idx) => (
                        <Badge key={idx} variant="outline" className="text-xs">
                          {interest}
                        </Badge>
                      ))}
                    </div>
                    <div className="flex items-center gap-2 text-xs text-muted-foreground mt-3">
                      <Calendar className="h-3 w-3" />
                      {formatArabicDate(registration.created_at)}
                    </div>
                  </div>
                </div>
              </Card>
            ))
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/manage-documents/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

export const dynamic = "force-dynamic"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { createBrowserClient } from "@/lib/supabase/client"
import { ArrowRight, Plus, Edit, Trash2, Eye, EyeOff } from "lucide-react"
import Link from "next/link"

export default function ManageDocumentsPage() {
  const router = useRouter()
  const [loading, setLoading] = useState(true)
  const [documents, setDocuments] = useState<any[]>([])
  const [showForm, setShowForm] = useState(false)
  const [editingId, setEditingId] = useState<string | null>(null)
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    document_type: "document",
    icon: "FileText",
    drive_link: "",
    date: new Date().toISOString().split("T")[0],
  })

useEffect(() => {
    const isLoggedIn = localStorage.getItem("admin_logged_in")
    if (!isLoggedIn) {
      router.push("/admin/login")
      return
    }
    loadDocuments()
  }, [])

const loadDocuments = async () => {
    try {
      const supabase = createBrowserClient()
      if (!supabase) {
        console.error("Supabase client not available")
        return
      }

const { data, error } = await supabase
        .from("parent_documents")
        .select("*")
        .order("created_at", { ascending: false })

if (error) throw error
      setDocuments(data || [])
    } catch (error) {
      console.error("Error loading documents:", error)
      alert("حدث خطأ أثناء تحميل الوثائق. تأكد من اتصال الإنترنت.")
    } finally {
      setLoading(false)
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

try {
      const supabase = createBrowserClient()
      if (!supabase) {
        alert("خطأ في الاتصال بقاعدة البيانات")
        return
      }

if (editingId) {
        const { error } = await supabase
          .from("parent_documents")
          .update({
            title: formData.title,
            description: formData.description,
            document_type: formData.document_type,
            icon: formData.icon,
            drive_url: formData.drive_link,
          })
          .eq("id", editingId)
        if (error) throw error
      } else {
        const { error } = await supabase.from("parent_documents").insert([
          {
            title: formData.title,
            description: formData.description,
            document_type: formData.document_type,
            icon: formData.icon,
            drive_url: formData.drive_link,
            is_visible: true,
          },
        ])
        if (error) throw error
      }

setFormData({
        title: "",
        description: "",
        document_type: "document",
        icon: "FileText",
        drive_link: "",
        date: new Date().toISOString().split("T")[0],
      })
      setShowForm(false)
      setEditingId(null)
      loadDocuments()
    } catch (error) {
      console.error("Error saving:", error)
      alert("حدث خطأ أثناء الحفظ: " + (error as any).message)
    }
  }

const toggleVisibility = async (id: string, currentVisibility: boolean) => {
    try {
      const supabase = createBrowserClient()
      if (!supabase) return

const { error } = await supabase.from("parent_documents").update({ is_visible: !currentVisibility }).eq("id", id)

if (error) throw error
      loadDocuments()
    } catch (error) {
      console.error("Error toggling visibility:", error)
      alert("حدث خطأ أثناء تغيير حالة الظهور")
    }
  }

const handleDelete = async (id: string) => {
    if (!confirm("هل أنت متأكد من الحذف؟")) return

try {
      const supabase = createBrowserClient()
      if (!supabase) return

const { error } = await supabase.from("parent_documents").delete().eq("id", id)

if (error) throw error
      loadDocuments()
    } catch (error) {
      console.error("Error deleting:", error)
      alert("حدث خطأ أثناء الحذف")
    }
  }

if (loading) {
    return <div className="flex items-center justify-center min-h-screen">جاري التحميل...</div>
  }

return (
    <div className="min-h-screen bg-background p-6">
      <div className="max-w-7xl mx-auto">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-4">
            <Link href="/admin/parents-section">
              <Button variant="outline" size="icon">
                <ArrowRight className="h-5 w-5" />
              </Button>
            </Link>
            <h1 className="text-3xl font-bold">إدارة الوثائق</h1>
          </div>
          <Button onClick={() => setShowForm(!showForm)} className="gap-2">
            <Plus className="h-5 w-5" />
            إضافة وثيقة جديدة
          </Button>
        </div>

{showForm && (
          <Card className="p-6 mb-6">
            <h2 className="text-xl font-bold mb-4">{editingId ? "تعديل الوثيقة" : "إضافة وثيقة جديدة"}</h2>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="block text-sm font-medium mb-2">العنوان</label>
                <Input
                  value={formData.title}
                  onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                  required
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">الوصف</label>
                <Textarea
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  required
                />
              </div>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <label className="block text-sm font-medium mb-2">النوع</label>
                  <select
                    value={formData.document_type}
                    onChange={(e) => setFormData({ ...formData, document_type: e.target.value })}
                    className="w-full h-10 rounded-md border border-input bg-background px-3"
                  >
                    <option value="document">وثيقة</option>
                    <option value="form">استمارة</option>
                    <option value="guide">دليل</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium mb-2">الأيقونة</label>
                  <Input
                    value={formData.icon}
                    onChange={(e) => setFormData({ ...formData, icon: e.target.value })}
                    placeholder="FileText, FileCheck, File"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-2">التاريخ</label>
                  <Input
                    type="date"
                    value={formData.date}
                    onChange={(e) => setFormData({ ...formData, date: e.target.value })}
                  />
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">رابط Google Drive</label>
                <Input
                  type="url"
                  value={formData.drive_link}
                  onChange={(e) => setFormData({ ...formData, drive_link: e.target.value })}
                  placeholder="https://drive.google.com/..."
                />
              </div>
              <div className="flex gap-2">
                <Button type="submit">حفظ</Button>
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => {
                    setShowForm(false)
                    setEditingId(null)
                    setFormData({
                      title: "",
                      description: "",
                      document_type: "document",
                      icon: "FileText",
                      drive_link: "",
                      date: new Date().toISOString().split("T")[0],
                    })
                  }}
                >
                  إلغاء
                </Button>
              </div>
            </form>
          </Card>
        )}

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {documents.map((doc) => (
            <Card key={doc.id} className="p-4">
              <div className="flex items-start justify-between mb-3">
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-1">
                    <h3 className="font-bold text-lg">{doc.title}</h3>
                    <span
                      className={`px-2 py-0.5 rounded text-xs ${
                        doc.document_type === "form"
                          ? "bg-blue-100 text-blue-800"
                          : doc.document_type === "guide"
                            ? "bg-purple-100 text-purple-800"
                            : "bg-gray-100 text-gray-800"
                      }`}
                    >
                      {doc.document_type === "form" ? "استمارة" : doc.document_type === "guide" ? "دليل" : "وثيقة"}
                    </span>
                  </div>
                  <p className="text-sm text-muted-foreground mb-2">{doc.description}</p>
                  <p className="text-xs text-muted-foreground">
                    التاريخ: {doc.created_at?.split("T")[0] || new Date().toISOString().split("T")[0]}
                  </p>
                  {doc.drive_url && (
                    <a
                      href={doc.drive_url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-xs text-primary hover:underline"
                    >
                      عرض في Google Drive
                    </a>
                  )}
                </div>
                <div
                  className={`px-2 py-1 rounded text-xs ${doc.is_visible ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`}
                >
                  {doc.is_visible ? "مرئي" : "مخفي"}
                </div>
              </div>
              <div className="flex gap-2">
                <Button
                  size="sm"
                  variant="outline"
                  onClick={() => {
                    setEditingId(doc.id)
                    setFormData({
                      title: doc.title,
                      description: doc.description,
                      document_type: doc.document_type,
                      icon: doc.icon,
                      drive_link: doc.drive_url || "",
                      date: doc.created_at?.split("T")[0] || new Date().toISOString().split("T")[0],
                    })
                    setShowForm(true)
                  }}
                >
                  <Edit className="h-4 w-4" />
                </Button>
                <Button size="sm" variant="outline" onClick={() => toggleVisibility(doc.id, doc.is_visible)}>
                  {doc.is_visible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                </Button>
                <Button size="sm" variant="outline" onClick={() => handleDelete(doc.id)}>
                  <Trash2 className="h-4 w-4 text-red-500" />
                </Button>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/utils/date.ts" isMerged="true"
// دالة لتحويل التاريخ إلى صيغة عربية (مثل: 21 نونبر، 2025)
export function formatArabicDate(date: string | Date): string {
  const d = typeof date === "string" ? new Date(date) : date

const arabicMonths = [
    "يناير",
    "فبراير",
    "مارس",
    "أبريل",
    "ماي",
    "يونيو",
    "يوليوز",
    "غشت",
    "شتنبر",
    "أكتوبر",
    "نونبر",
    "دجنبر",
  ]

const day = d.getDate()
  const month = arabicMonths[d.getMonth()]
  const year = d.getFullYear()

return `${day} ${month}، ${year}`
}

// دالة لتحويل التاريخ إلى صيغة عربية مع الوقت
export function formatArabicDateTime(date: string | Date): string {
  const d = typeof date === "string" ? new Date(date) : date

const arabicDate = formatArabicDate(d)
  const hours = d.getHours().toString().padStart(2, "0")
  const minutes = d.getMinutes().toString().padStart(2, "0")

return `${arabicDate} - ${hours}:${minutes}`
}
[V0_FILE]typescript:file="lib/utils.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

export function formatArabicDate(date: string | Date): string {
  const d = typeof date === "string" ? new Date(date) : date

const day = d.getDate()
  const month = arabicMonths[d.getMonth()]
  const year = d.getFullYear()

return `${day} ${month}، ${year}`
}

export function formatArabicDateTime(date: string | Date): string {
  const d = typeof date === "string" ? new Date(date) : date

const arabicDate = formatArabicDate(d)
  const hours = d.getHours().toString().padStart(2, "0")
  const minutes = d.getMinutes().toString().padStart(2, "0")

return `${arabicDate} - ${hours}:${minutes}`
}
[V0_FILE]typescriptreact:file="app/admin/messages/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

export const dynamic = "force-dynamic"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowRight, MessageSquare, Eye } from "lucide-react"
import { createBrowserClient } from "@/lib/supabase/client"
import { formatArabicDateTime } from "@/lib/utils"
import Link from "next/link"

interface Message {
  id: string
  student_name: string | null
  student_class: string | null
  message_type: string
  subject: string
  message: string
  is_anonymous: boolean
  status: string
  created_at: string
}

export default function MessagesPage() {
  const router = useRouter()
  const [messages, setMessages] = useState<Message[]>([])
  const [loading, setLoading] = useState(true)
  const [selectedType, setSelectedType] = useState<string>("all")

const fetchMessages = async () => {
      if (!checkAuth()) return

try {
        const supabase = createBrowserClient()

let query = supabase.from("student_messages").select("*").order("created_at", { ascending: false })

if (selectedType !== "all") {
          query = query.eq("message_type", selectedType)
        }

const { data, error } = await query

if (error) {
          console.error("[v0] Error fetching messages:", error)
          return
        }

setMessages(data || [])
      } catch (error) {
        console.error("[v0] Error:", error)
      } finally {
        setLoading(false)
      }
    }

fetchMessages()
  }, [router, selectedType])

const getStatusBadge = (status: string) => {
    const variants: Record<string, "default" | "secondary" | "destructive"> = {
      pending: "destructive",
      in_progress: "secondary",
      resolved: "default",
    }

const labels: Record<string, string> = {
      pending: "قيد الانتظار",
      in_progress: "قيد المعالجة",
      resolved: "تم الحل",
    }

return <Badge variant={variants[status] || "default"}>{labels[status] || status}</Badge>
  }

const getTypeBadge = (type: string) => {
    const labels: Record<string, string> = {
      support: "طلب دعم",
      bullying: "بلاغ تنمر",
      suggestion: "اقتراح",
    }

return labels[type] || type
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-background via-muted to-background p-6">
      <div className="max-w-6xl mx-auto">
        {/* Header */}
        <div className="mb-6">
          <Link href="/admin/dashboard">
            <Button variant="ghost" className="gap-2 mb-4">
              <ArrowRight className="h-4 w-4" />
              العودة للوحة التحكم
            </Button>
          </Link>

<div className="flex items-center gap-3 mb-6">
            <div className="h-12 w-12 rounded-2xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
              <MessageSquare className="h-6 w-6 text-white" />
            </div>
            <div>
              <h1 className="text-3xl font-bold">رسائل التلاميذ</h1>
              <p className="text-muted-foreground">إدارة جميع الرسائل والبلاغات</p>
            </div>
          </div>

{/* Filters */}
          <div className="flex gap-2">
            <Button variant={selectedType === "all" ? "default" : "outline"} onClick={() => setSelectedType("all")}>
              الكل ({messages.length})
            </Button>
            <Button
              variant={selectedType === "support" ? "default" : "outline"}
              onClick={() => setSelectedType("support")}
            >
              طلبات دعم
            </Button>
            <Button
              variant={selectedType === "bullying" ? "default" : "outline"}
              onClick={() => setSelectedType("bullying")}
            >
              بلاغات تنمر
            </Button>
            <Button
              variant={selectedType === "suggestion" ? "default" : "outline"}
              onClick={() => setSelectedType("suggestion")}
            >
              اقتراحات
            </Button>
          </div>
        </div>

{/* Messages List */}
        <div className="space-y-4">
          {messages.map((message) => (
            <Card key={message.id} className="p-6 hover:shadow-lg transition-shadow">
              <div className="flex items-start justify-between mb-4">
                <div className="flex-1">
                  <div className="flex items-center gap-3 mb-2">
                    <h3 className="font-bold text-lg">
                      {message.is_anonymous ? "رسالة مجهولة" : message.student_name || "بدون اسم"}
                    </h3>
                    <Badge>{getTypeBadge(message.message_type)}</Badge>
                    {getStatusBadge(message.status)}
                  </div>
                  {message.student_class && (
                    <p className="text-sm text-muted-foreground mb-2">الصف: {message.student_class}</p>
                  )}
                  <p className="text-sm font-semibold text-foreground mb-2">{message.subject}</p>
                  <p className="text-muted-foreground line-clamp-2">{message.message}</p>
                </div>
                <Button size="sm" variant="outline" className="gap-2 bg-transparent">
                  <Eye className="h-4 w-4" />
                  عرض
                </Button>
              </div>
              <div className="text-xs text-muted-foreground">{formatArabicDateTime(message.created_at)}</div>
            </Card>
          ))}

import { useEffect, useState } from "react"
import { PageLayout } from "@/components/page-layout"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Home, Bell, MessageCircle, FileText, UserCircle, Download, FileCheck } from "lucide-react"
import { createBrowserClient } from "@/lib/supabase/client"
import { formatArabicDate } from "@/lib/utils"

const navItems = [
  { href: "/parents", icon: Home, label: "الرئيسية" },
  { href: "/parents/announcements", icon: Bell, label: "الإعلانات" },
  { href: "/parents/communication", icon: MessageCircle, label: "التواصل" },
  { href: "/parents/documents", icon: FileText, label: "الوثائق", active: true },
  { href: "/parents/profile", icon: UserCircle, label: "الملف الشخصي" },
]

export default function DocumentsPage() {
  const [documents, setDocuments] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    loadDocuments()
  }, [])

const loadDocuments = async () => {
    try {
      const supabase = createBrowserClient()
      if (!supabase) {
        console.error("Supabase client not available")
        setLoading(false)
        return
      }

const { data, error } = await supabase
        .from("parent_documents")
        .select("*")
        .eq("is_visible", true)
        .order("created_at", { ascending: false })

if (error) throw error
      setDocuments(data || [])
    } catch (error) {
      console.error("Error loading documents:", error)
    } finally {
      setLoading(false)
    }
  }

const handleDownload = (driveUrl: string | null) => {
    if (!driveUrl) {
      alert("رابط الوثيقة غير متوفر")
      return
    }
    window.open(driveUrl, "_blank")
  }

return (
    <PageLayout
      title="الوثائق والاستمارات"
      subtitle="جميع المستندات المهمة في مكان واحد"
      navItems={navItems}
      showSwitcher={true}
      currentSection="parents"
    >
      {loading ? (
        <div className="text-center py-8">جاري تحميل الوثائق...</div>
      ) : documents.length === 0 ? (
        <div className="text-center py-8 text-muted-foreground">لا توجد وثائق متاحة حالياً</div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {documents.map((doc) => (
            <Card key={doc.id} className="p-6 hover:shadow-lg transition-shadow">
              <div className="flex items-start gap-4">
                <div className="h-12 w-12 rounded-xl bg-secondary/10 flex items-center justify-center flex-shrink-0">
                  <FileCheck className="h-6 w-6 text-secondary" />
                </div>
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-2">
                    <h3 className="text-lg font-bold text-foreground">{doc.title}</h3>
                    <span
                      className={`px-2 py-0.5 rounded text-xs ${
                        doc.document_type === "form"
                          ? "bg-blue-100 text-blue-800"
                          : doc.document_type === "guide"
                            ? "bg-purple-100 text-purple-800"
                            : "bg-gray-100 text-gray-800"
                      }`}
                    >
                      {doc.document_type === "form" ? "استمارة" : doc.document_type === "guide" ? "دليل" : "وثيقة"}
                    </span>
                  </div>
                  <p className="text-sm text-muted-foreground mb-3">{doc.description}</p>
                  <div className="flex items-center justify-between">
                    <span className="text-xs text-muted-foreground">{formatArabicDate(doc.created_at)}</span>
                    <Button
                      size="sm"
                      variant="outline"
                      className="gap-2 bg-transparent"
                      onClick={() => handleDownload(doc.drive_url)}
                    >
                      <Download className="h-4 w-4" />
                      {doc.drive_url ? "تحميل" : "غير متوفر"}
                    </Button>
                  </div>
                </div>
              </div>
            </Card>
          ))}
        </div>
      )}
    </PageLayout>
  )
}
[V0_FILE]typescriptreact:file="app/parents/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { PageLayout } from "@/components/page-layout"
import { Card } from "@/components/ui/card"
import { Home, Bell, MessageCircle, FileText, GraduationCap, UserCircle, HelpCircle, Calendar } from "lucide-react"

const navItems = [
  { href: "/parents", icon: Home, label: "الرئيسية" },
  { href: "/parents/announcements", icon: Bell, label: "الإعلانات" },
  { href: "/parents/communication", icon: MessageCircle, label: "التواصل" },
  { href: "/parents/documents", icon: FileText, label: "الوثائق" },
  { href: "/parents/profile", icon: UserCircle, label: "الملف الشخصي" },
]

export default function ParentsPage() {
  return (
    <PageLayout
      title="ركن أولياء الأمور"
      subtitle="شاركوا في العملية التربوية"
      navItems={navItems}
      showSwitcher={true}
      currentSection="parents"
    >
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* الوثائق */}
        <Link href="/parents/documents">
          <Card className="relative overflow-hidden border-none h-56 bg-gradient-to-br from-chart-4 via-secondary to-chart-2 hover:shadow-xl transition-all duration-300 hover:scale-[1.02] cursor-pointer rounded-3xl group">
            <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
            <div className="relative h-full p-6 flex flex-col justify-between">
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="text-2xl font-bold text-white mb-2">الوثائق</h3>
                  <p className="text-white/80 text-sm">واستمارات مهمة</p>
                </div>
                <div className="h-14 w-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
                  <FileText className="h-7 w-7 text-white" />
                </div>
              </div>
              <div className="flex items-center gap-2 text-white">
                <span className="text-sm">عرض الوثائق</span>
                <svg
                  className="h-4 w-4 transform group-hover:translate-x-1 transition-transform"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                </svg>
              </div>
            </div>
          </Card>
        </Link>

{/* تتبع الإعلانات */}
        <Link href="/parents/announcements">
          <Card className="relative overflow-hidden border-none h-56 bg-gradient-to-br from-primary via-primary to-chart-3 hover:shadow-xl transition-all duration-300 hover:scale-[1.02] cursor-pointer rounded-3xl group">
            <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
            <div className="relative h-full p-6 flex flex-col justify-between">
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="text-2xl font-bold text-white mb-2">تتبع الإعلانات</h3>
                  <p className="text-white/80 text-sm">آخر الأخبار المدرسية</p>
                </div>
                <div className="h-14 w-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
                  <Bell className="h-7 w-7 text-white" />
                </div>
              </div>
              <div className="flex items-center gap-2 text-white">
                <span className="text-sm">عرض الإعلانات</span>
                <svg
                  className="h-4 w-4 transform group-hover:translate-x-1 transition-transform"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                </svg>
              </div>
            </div>
          </Card>
        </Link>

{/* التواصل مع المختص */}
        <Link href="/parents/communication">
          <Card className="relative overflow-hidden border-none h-56 bg-gradient-to-br from-secondary via-secondary to-chart-4 hover:shadow-xl transition-all duration-300 hover:scale-[1.02] cursor-pointer rounded-3xl group">
            <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
            <div className="relative h-full p-6 flex flex-col justify-between">
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="text-2xl font-bold text-white mb-2">التواصل</h3>
                  <p className="text-white/80 text-sm">مع المختص الاجتماعي</p>
                </div>
                <div className="h-14 w-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
                  <MessageCircle className="h-7 w-7 text-white" />
                </div>
              </div>
              <div className="flex items-center gap-2 text-white">
                <span className="text-sm">إرسال رسالة</span>
                <svg
                  className="h-4 w-4 transform group-hover:translate-x-1 transition-transform"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                </svg>
              </div>
            </div>
          </Card>
        </Link>

<Link href="/parents/faq">
          <Card className="relative overflow-hidden border-none h-56 bg-gradient-to-br from-chart-2 via-chart-1 to-primary hover:shadow-xl transition-all duration-300 hover:scale-[1.02] cursor-pointer rounded-3xl group">
            <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
            <div className="relative h-full p-6 flex flex-col justify-between">
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="text-2xl font-bold text-white mb-2">الأسئلة والأجوبة</h3>
                  <p className="text-white/80 text-sm">إجابات لأسئلتكم</p>
                </div>
                <div className="h-14 w-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
                  <HelpCircle className="h-7 w-7 text-white" />
                </div>
              </div>
              <div className="flex items-center gap-2 text-white">
                <span className="text-sm">تصفح الأسئلة</span>
                <svg
                  className="h-4 w-4 transform group-hover:translate-x-1 transition-transform"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                </svg>
              </div>
            </div>
          </Card>
        </Link>

<Link href="/parents/booking">
          <Card className="relative overflow-hidden border-none h-56 bg-gradient-to-br from-chart-5 via-chart-3 to-secondary hover:shadow-xl transition-all duration-300 hover:scale-[1.02] cursor-pointer rounded-3xl group">
            <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
            <div className="relative h-full p-6 flex flex-col justify-between">
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="text-2xl font-bold text-white mb-2">حجز جلسة</h3>
                  <p className="text-white/80 text-sm">استشارة مع المختص</p>
                </div>
                <div className="h-14 w-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
                  <Calendar className="h-7 w-7 text-white" />
                </div>
              </div>
              <div className="flex items-center gap-2 text-white">
                <span className="text-sm">احجز موعد</span>
                <svg
                  className="h-4 w-4 transform group-hover:translate-x-1 transition-transform"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                </svg>
              </div>
            </div>
          </Card>
        </Link>

{/* تقديم ملاحظات */}
        <Link href="/parents/communication">
          <Card className="relative overflow-hidden border-none h-56 bg-gradient-to-br from-chart-3 via-chart-5 to-primary hover:shadow-xl transition-all duration-300 hover:scale-[1.02] cursor-pointer rounded-3xl group">
            <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
            <div className="relative h-full p-6 flex flex-col justify-between">
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="text-2xl font-bold text-white mb-2">تقديم ملاحظات</h3>
                  <p className="text-white/80 text-sm">شاركونا آراءكم</p>
                </div>
                <div className="h-14 w-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
                  <GraduationCap className="h-7 w-7 text-white" />
                </div>
              </div>
              <div className="flex items-center gap-2 text-white">
                <span className="text-sm">إضافة ملاحظة</span>
                <svg
                  className="h-4 w-4 transform group-hover:translate-x-1 transition-transform"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                </svg>
              </div>
            </div>
          </Card>
        </Link>
      </div>
    </PageLayout>
  )
}
[V0_FILE]png:file="public/images/tsr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/TSR-NukTAjusqUSEFoqBTCoNVfybV4oZu9.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Users, UserCircle, Bell, Calendar, Activity } from "lucide-react"
import { RatingSection } from "@/components/rating-section"

export default function HomePage() {
  return (
    <div className="min-h-screen bg-background">
      <div className="flex items-center justify-center min-h-screen p-2 sm:p-4 md:p-8">
        <div className="w-full max-w-7xl">
          {/* البطاقة الرئيسية مع حواف دائرية كبيرة وظل ناعم */}
          <Card className="bg-card border-none shadow-2xl rounded-2xl sm:rounded-3xl overflow-hidden">
            <div className="flex flex-col md:flex-row min-h-[500px] sm:min-h-[600px]">
              {/* الشريط الجانبي الأيمن */}
              <div className="hidden sm:flex w-full sm:w-auto md:w-20 bg-sidebar flex-row sm:flex-row md:flex-col items-center justify-center gap-2 sm:gap-3 md:gap-4 p-3 sm:p-4 md:py-8 rounded-b-2xl sm:rounded-e-3xl order-2 md:order-1">
                <Link href="/" className="mb-0 md:mb-4 hover:scale-110 transition-transform">
                  <Image
                    src="/logo.png"
                    alt="شعار وصال"
                    width={40}
                    height={40}
                    className="sm:w-12 sm:h-12 md:w-14 md:h-14 object-contain brightness-0 invert"
                  />
                </Link>
                {/* الأيقونات */}
                <div className="flex flex-row md:flex-col gap-2 sm:gap-3">
                  <Link href="/dashboard">
                    <div className="h-10 w-10 sm:h-12 sm:w-12 rounded-xl sm:rounded-2xl bg-sidebar-accent flex items-center justify-center hover:bg-sidebar-primary transition-all cursor-pointer">
                      <Activity className="h-5 w-5 sm:h-6 sm:w-6 text-sidebar-foreground" />
                    </div>
                  </Link>
                  <Link href="/calendar">
                    <div className="h-10 w-10 sm:h-12 sm:w-12 rounded-xl sm:rounded-2xl bg-sidebar-accent flex items-center justify-center hover:bg-sidebar-primary transition-all cursor-pointer">
                      <Calendar className="h-5 w-5 sm:h-6 sm:w-6 text-sidebar-foreground" />
                    </div>
                  </Link>
                  <div className="h-10 w-10 sm:h-12 sm:w-12 rounded-xl sm:rounded-2xl bg-sidebar-primary flex items-center justify-center">
                    <Users className="h-5 w-5 sm:h-6 sm:w-6 text-sidebar-primary-foreground" />
                  </div>
                  <Link href="/faq">
                    <div className="h-10 w-10 sm:h-12 sm:w-12 rounded-xl sm:rounded-2xl bg-sidebar-accent flex items-center justify-center hover:bg-sidebar-primary transition-all cursor-pointer">
                      <Bell className="h-5 w-5 sm:h-6 sm:w-6 text-sidebar-foreground" />
                    </div>
                  </Link>
                </div>
              </div>

{/* المحتوى الرئيسي */}
              <div className="flex-1 p-4 sm:p-6 md:p-8 lg:p-12 order-1 md:order-2">
                <div className="mb-6 sm:mb-8"></div>

<h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-foreground mb-3 sm:mb-4 leading-relaxed text-center px-2">
                    مرحباً بكم في منصة وصال للدعم الاجتماعي والنفسي.
                  </h2>
                  <p className="text-sm sm:text-base md:text-lg text-muted-foreground leading-relaxed max-w-2xl text-center mx-auto px-4">
                    من تطوير المختص الاجتماعي ذ. اوعليت محمد | مدرسة المتنبي | مديرية طنجة أصيلة
                  </p>
                </div>

{/* البطاقات الرئيسية */}
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
                  {/* بطاقة ركن التلاميذ - بنفسجية */}
                  <Link href="/students" className="block group">
                    <Card className="relative overflow-hidden border-none h-52 sm:h-60 md:h-64 bg-gradient-to-br from-primary via-primary to-chart-3 hover:shadow-2xl transition-all duration-300 hover:scale-[1.02] cursor-pointer rounded-2xl sm:rounded-3xl">
                      <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
                      <div className="relative h-full p-5 sm:p-6 md:p-8 flex flex-col justify-between">
                        <div className="flex justify-between items-start">
                          <div>
                            <h3 className="text-xl sm:text-2xl md:text-3xl font-bold text-white mb-1 sm:mb-2">
                              ركن التلاميذ
                            </h3>
                            <p className="text-white/90 text-sm sm:text-base">والتلميذات</p>
                          </div>
                          <div className="h-12 w-12 sm:h-14 sm:w-14 md:h-16 md:w-16 rounded-xl sm:rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
                            <Users className="h-6 w-6 sm:h-7 sm:w-7 md:h-8 md:w-8 text-white" />
                          </div>
                        </div>
                        <div>
                          <p className="text-white/80 text-xs sm:text-sm mb-3 sm:mb-4">
                            انضم إلى الأنشطة، شارك مشاكلك، وقدم اقتراحاتك
                          </p>
                          <div className="flex items-center gap-2 text-white">
                            <span className="text-xs sm:text-sm">اضغط للدخول</span>
                            <svg
                              className="h-4 w-4 sm:h-5 sm:w-5 transform group-hover:translate-x-1 transition-transform"
                              fill="none"
                              viewBox="0 0 24 24"
                              stroke="currentColor"
                            >
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                            </svg>
                          </div>
                        </div>
                      </div>
                    </Card>
                  </Link>

{/* بطاقة ركن أولياء الأمور - وردية */}
                  <Link href="/parents" className="block group">
                    <Card className="relative overflow-hidden border-none h-52 sm:h-60 md:h-64 bg-gradient-to-br from-secondary via-secondary to-chart-4 hover:shadow-2xl transition-all duration-300 hover:scale-[1.02] cursor-pointer rounded-2xl sm:rounded-3xl">
                      <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
                      <div className="relative h-full p-5 sm:p-6 md:p-8 flex flex-col justify-between">
                        <div className="flex justify-between items-start">
                          <div>
                            <h3 className="text-xl sm:text-2xl md:text-3xl font-bold text-white mb-1 sm:mb-2">
                              ركن أولياء الأمور
                            </h3>
                            <p className="text-white/90 text-sm sm:text-base">والتواصل</p>
                          </div>
                          <div className="h-12 w-12 sm:h-14 sm:w-14 md:h-16 md:w-16 rounded-xl sm:rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
                            <UserCircle className="h-6 w-6 sm:h-7 sm:w-7 md:h-8 md:w-8 text-white" />
                          </div>
                        </div>
                        <div>
                          <p className="text-white/80 text-xs sm:text-sm mb-3 sm:mb-4">
                            تواصل مع المختص، تتبع الإعلانات، وشارك في العملية التربوية
                          </p>
                          <div className="flex items-center gap-2 text-white">
                            <span className="text-xs sm:text-sm">اضغط للدخول</span>
                            <svg
                              className="h-4 w-4 sm:h-5 sm:w-5 transform group-hover:translate-x-1 transition-transform"
                              fill="none"
                              viewBox="0 0 24 24"
                              stroke="currentColor"
                            >
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                            </svg>
                          </div>
                        </div>
                      </div>
                    </Card>
                  </Link>
                </div>

<div className="sm:hidden mt-6 flex justify-center gap-3">
                  <Link href="/dashboard">
                    <Button variant="outline" size="sm" className="rounded-full bg-transparent">
                      <Activity className="h-4 w-4 ml-2" />
                      لوحة القيادة
                    </Button>
                  </Link>
                  <Link href="/calendar">
                    <Button variant="outline" size="sm" className="rounded-full bg-transparent">
                      <Calendar className="h-4 w-4 ml-2" />
                      التقويم
                    </Button>
                  </Link>
                </div>

{/* معلومات إضافية */}
                <div className="mt-6 sm:mt-8 text-center">
                  <p className="text-xs sm:text-sm text-muted-foreground">© 2025 منصة وصال - جميع الحقوق محفوظة</p>
                </div>

<div className="mt-6 sm:mt-8">
                  <Image
                    src="/images/tsr.png"
                    alt="شركاء منصة وصال"
                    width={1920}
                    height={200}
                    className="w-full h-auto object-contain bg-transparent opacity-40 hover:opacity-100 active:opacity-100 transition-opacity duration-300 cursor-pointer"
                    priority={false}
                  />
                </div>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/008_add_student_code.sql" isEdit="true" isMerged="true"
-- إضافة حقل student_code إلى جدول student_points
DO $$ 
BEGIN
  IF NOT EXISTS (
    SELECT 1 FROM information_schema.columns 
    WHERE table_name = 'student_points' AND column_name = 'student_code'
  ) THEN
    ALTER TABLE student_points ADD COLUMN student_code TEXT UNIQUE;
  END IF;
END $$;

-- إنشاء index لتسريع البحث برمز التلميذ
CREATE INDEX IF NOT EXISTS idx_student_code ON student_points(student_code);

-- حذف policy القديم إن وجد
DROP POLICY IF EXISTS "allow_read_student_points_by_code" ON student_points;

-- تحديث RLS policies لتسمح بالقراءة حسب student_code
CREATE POLICY "allow_read_student_points_by_code" 
ON student_points 
FOR SELECT 
USING (student_code IS NOT NULL);
[V0_FILE]sql:file="scripts/010_fix_student_code.sql" isMerged="true"
-- تحقق من وجود الجدول وأضف الحقل
ALTER TABLE student_points 
ADD COLUMN IF NOT EXISTS student_code TEXT;

-- إضافة UNIQUE constraint إذا لم يكن موجوداً
DO $$ 
BEGIN
  IF NOT EXISTS (
    SELECT 1 FROM pg_constraint 
    WHERE conname = 'student_points_student_code_key'
  ) THEN
    ALTER TABLE student_points ADD CONSTRAINT student_points_student_code_key UNIQUE (student_code);
  END IF;
END $$;

-- إنشاء index
CREATE INDEX IF NOT EXISTS idx_student_code ON student_points(student_code);

-- تحديث RLS
DROP POLICY IF EXISTS "allow_read_student_points_by_code" ON student_points;
CREATE POLICY "allow_read_student_points_by_code" 
ON student_points FOR SELECT 
USING (true);

DROP POLICY IF EXISTS "allow_insert_student_points" ON student_points;
CREATE POLICY "allow_insert_student_points" 
ON student_points FOR INSERT 
WITH CHECK (true);

DROP POLICY IF EXISTS "allow_update_student_points" ON student_points;
CREATE POLICY "allow_update_student_points" 
ON student_points FOR UPDATE 
USING (true);

DROP POLICY IF EXISTS "allow_delete_student_points" ON student_points;
CREATE POLICY "allow_delete_student_points" 
ON student_points FOR DELETE 
USING (true);
[V0_FILE]sql:file="scripts/011_add_student_code_simple.sql" isMerged="true"
-- إضافة حقل student_code إلى جدول student_points
-- إذا كان الحقل موجوداً، سيظهر خطأ لكن يمكن تجاهله

ALTER TABLE student_points 
ADD COLUMN student_code VARCHAR(10) UNIQUE;

-- إنشاء index للبحث السريع
CREATE INDEX idx_student_code ON student_points(student_code);

-- تحديث RLS policies
ALTER TABLE student_points ENABLE ROW LEVEL SECURITY;

DROP POLICY IF EXISTS "Enable read for all users" ON student_points;
CREATE POLICY "Enable read for all users" 
ON student_points FOR SELECT 
USING (true);

DROP POLICY IF EXISTS "Enable insert for all users" ON student_points;
CREATE POLICY "Enable insert for all users" 
ON student_points FOR INSERT 
WITH CHECK (true);

DROP POLICY IF EXISTS "Enable update for all users" ON student_points;
CREATE POLICY "Enable update for all users" 
ON student_points FOR UPDATE 
USING (true);

DROP POLICY IF EXISTS "Enable delete for all users" ON student_points;
CREATE POLICY "Enable delete for all users" 
ON student_points FOR DELETE 
USING (true);
[V0_FILE]png:file="public/favicon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WISSAL%202-8jCmcJhF7fhG0i6ctS2SHiYMixHyCl.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Cairo } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import "./globals.css"

const cairo = Cairo({ subsets: ["arabic", "latin"] })

export const metadata: Metadata = {
  title: "وصال - منصة الدعم الاجتماعي",
  description: "منصة وصال للمختص الاجتماعي - فضاء تفاعلي للدعم النفسي والاجتماعي",
  generator: "v0.app",
  icons: {
    icon: "/favicon.png",
    apple: "/favicon.png",
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="ar" dir="rtl">
      <body className={`${cairo.className} font-sans antialiased`}>
        {children}
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]typescript:file="lib/supabase/client.ts" isEdit="true" isMerged="true"
import { createBrowserClient as createSupabaseBrowserClient } from "@supabase/ssr"

export function createBrowserClient() {
  if (typeof window === "undefined") {
    return null
  }

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
  const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

if (!supabaseUrl || !supabaseAnonKey) {
    console.error("[v0] Missing Supabase environment variables")
    console.error("[v0] NEXT_PUBLIC_SUPABASE_URL:", supabaseUrl ? "SET" : "MISSING")
    console.error("[v0] NEXT_PUBLIC_SUPABASE_ANON_KEY:", supabaseAnonKey ? "SET" : "MISSING")

throw new Error(
      "متغيرات بيئة Supabase مفقودة.\n\n" +
        "لحل المشكلة:\n" +
        "1. افتح لوحة تحكم Netlify\n" +
        "2. اذهب إلى: Site settings → Environment variables\n" +
        "3. أضف المتغيرات التالية:\n" +
        "   - NEXT_PUBLIC_SUPABASE_URL\n" +
        "   - NEXT_PUBLIC_SUPABASE_ANON_KEY\n" +
        "4. أعد النشر (Redeploy)\n\n" +
        "يمكنك نسخ قيم المتغيرات من قسم 'Vars' في v0",
    )
  }

return createSupabaseBrowserClient(supabaseUrl, supabaseAnonKey)
}

export function createClient() {
  return createBrowserClient()
}
[V0_FILE]typescriptreact:file="app/admin/points/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { ArrowRight, Award, Plus, Trash2, Search, Users, Key } from "lucide-react"
import { createBrowserClient } from "@/lib/supabase/client"
import Link from "next/link"
import { formatArabicDate } from "@/lib/utils"

interface Student {
  id: string
  student_name: string
  student_class: string
  student_code: string | null
  points: number
  achievements: string[]
  last_updated: string
}

export default function PointsPage() {
  const router = useRouter()
  const [students, setStudents] = useState<Student[]>([])
  const [selectedStudent, setSelectedStudent] = useState<Student | null>(null)
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")

const [showAddStudent, setShowAddStudent] = useState(false)
  const [newStudentName, setNewStudentName] = useState("")
  const [newStudentClass, setNewStudentClass] = useState("")
  const [newStudentCode, setNewStudentCode] = useState("")

const [showAddPoint, setShowAddPoint] = useState(false)
  const [pointsChange, setPointsChange] = useState(0)
  const [pointReason, setPointReason] = useState("")

const [showEditCode, setShowEditCode] = useState(false)
  const [editCode, setEditCode] = useState("")

const fetchData = async () => {
      if (!checkAuth()) return

try {
        const supabase = createBrowserClient()

if (!supabase) {
          throw new Error("فشل إنشاء اتصال Supabase")
        }

const { data: studentsData, error: studentsError } = await supabase
          .from("student_points")
          .select("*")
          .order("student_name")

if (studentsError) {
          console.error("[v0] Error fetching data:", studentsError)
          throw studentsError
        }
        setStudents(studentsData || [])
      } catch (error) {
        console.error("[v0] Error fetching data:", error)
      } finally {
        setLoading(false)
      }
    }

fetchData()
  }, [router])

const selectStudent = (student: Student) => {
    setSelectedStudent(student)
    setEditCode(student.student_code || "")
  }

const generateStudentCode = () => {
    const letter = String.fromCharCode(65 + Math.floor(Math.random() * 26)) // حرف عشوائي A-Z
    const numbers = Math.floor(100000000 + Math.random() * 900000000) // 9 أرقام عشوائية
    return `${letter}${numbers}`
  }

const addStudent = async () => {
    if (!newStudentName || !newStudentClass) {
      alert("يرجى إدخال الاسم والصف")
      return
    }

const studentCode = newStudentCode || generateStudentCode()

try {
      const supabase = createBrowserClient()

if (!supabase) {
        throw new Error("فشل إنشاء اتصال Supabase")
      }

const { data, error } = await supabase
        .from("student_points")
        .insert([
          {
            student_name: newStudentName,
            student_class: newStudentClass,
            student_code: studentCode,
            points: 0,
            achievements: [],
          },
        ])
        .select()

if (error) throw error

if (data && data.length > 0) {
        setStudents([...students, data[0]])
        setNewStudentName("")
        setNewStudentClass("")
        setNewStudentCode("")
        setShowAddStudent(false)
        alert(`تم إضافة التلميذ بنجاح\nرمز الدخول: ${studentCode}`)
      }
    } catch (error) {
      console.error("[v0] Error adding student:", error)
      alert("حدث خطأ: " + (error as Error).message)
    }
  }

const updateStudentCode = async () => {
    if (!selectedStudent || !editCode) {
      alert("يرجى إدخال رمز صحيح")
      return
    }

if (editCode.length !== 10) {
      alert("الرمز يجب أن يتكون من 10 أحرف (حرف واحد و9 أرقام)")
      return
    }

try {
      const supabase = createBrowserClient()

if (!supabase) {
        throw new Error("فشل إنشاء اتصال Supabase")
      }

const { error: updateError } = await supabase
        .from("student_points")
        .update({ student_code: editCode.toUpperCase() })
        .eq("id", selectedStudent.id)

if (updateError) throw updateError

const updatedStudent = {
        ...selectedStudent,
        student_code: editCode.toUpperCase(),
      }

setSelectedStudent(updatedStudent)
      setStudents(students.map((s) => (s.id === selectedStudent.id ? updatedStudent : s)))

setShowEditCode(false)
      alert("تم تحديث رمز الدخول بنجاح")
    } catch (error) {
      console.error("[v0] Error updating code:", error)
      alert("حدث خطأ: " + (error as Error).message)
    }
  }

const addPoint = async () => {
    if (!selectedStudent || !pointReason || pointsChange === 0) {
      alert("يرجى ملء جميع الحقول")
      return
    }

try {
      const supabase = createBrowserClient()

if (!supabase) {
        throw new Error("فشل إنشاء اتصال Supabase")
      }

const newPoints = selectedStudent.points + pointsChange
      const newAchievements = [
        ...(selectedStudent.achievements || []),
        `${pointsChange > 0 ? "+" : ""}${pointsChange} - ${pointReason} (${formatArabicDate(new Date())})`,
      ]

const { error: updateError } = await supabase
        .from("student_points")
        .update({
          points: newPoints,
          achievements: newAchievements,
          last_updated: new Date().toISOString(),
        })
        .eq("id", selectedStudent.id)

if (updateError) throw updateError

const updatedStudent = {
        ...selectedStudent,
        points: newPoints,
        achievements: newAchievements,
      }

setSelectedStudent(updatedStudent)

setStudents(students.map((s) => (s.id === selectedStudent.id ? updatedStudent : s)))

setPointsChange(0)
      setPointReason("")
      setShowAddPoint(false)

alert("تم تحديث النقاط بنجاح")
    } catch (error) {
      console.error("[v0] Error adding point:", error)
      alert("حدث خطأ: " + (error as Error).message)
    }
  }

const deleteStudent = async (studentId: string) => {
    if (!confirm("هل أنت متأكد من حذف هذا التلميذ؟")) return

try {
      const supabase = createBrowserClient()

if (!supabase) {
        throw new Error("فشل إنشاء اتصال Supabase")
      }

const { error } = await supabase.from("student_points").delete().eq("id", studentId)

if (error) throw error

setStudents(students.filter((s) => s.id !== studentId))
      if (selectedStudent?.id === studentId) {
        setSelectedStudent(null)
      }

alert("تم حذف التلميذ بنجاح")
    } catch (error) {
      console.error("[v0] Error deleting student:", error)
      alert("حدث خطأ: " + (error as Error).message)
    }
  }

const filteredStudents = students.filter(
    (s) =>
      s.student_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      s.student_class.toLowerCase().includes(searchTerm.toLowerCase()) ||
      (s.student_code && s.student_code.toLowerCase().includes(searchTerm.toLowerCase())),
  )

return (
    <div className="min-h-screen bg-gradient-to-br from-background via-muted to-background p-6" dir="rtl">
      <div className="max-w-7xl mx-auto">
        {/* العنوان */}
        <div className="mb-6">
          <Link href="/admin/dashboard">
            <Button variant="ghost" className="gap-2 mb-4">
              <ArrowRight className="h-4 w-4" />
              العودة للوحة التحكم
            </Button>
          </Link>

<div className="flex items-center gap-3 mb-6">
            <div className="h-12 w-12 rounded-2xl bg-gradient-to-br from-yellow-500 to-yellow-600 flex items-center justify-center">
              <Award className="h-6 w-6 text-white" />
            </div>
            <div>
              <h1 className="text-3xl font-bold">نظام إدارة نقاط التلاميذ</h1>
              <p className="text-muted-foreground">إدارة نقاط السلوك الإيجابي للتلاميذ</p>
            </div>
          </div>
        </div>

<div className="grid md:grid-cols-3 gap-6">
          {/* القسم الأيمن: البحث وقائمة التلاميذ */}
          <div className="md:col-span-1 space-y-4">
            {/* بحث */}
            <Card className="p-4">
              <h3 className="font-bold mb-3 flex items-center gap-2">
                <Search className="h-5 w-5" />
                البحث عن تلميذ
              </h3>
              <Input
                placeholder="ابحث بالاسم أو الصف أو الرمز..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </Card>

{/* إضافة تلميذ جديد */}
            <Card className="p-4">
              <Button onClick={() => setShowAddStudent(!showAddStudent)} variant="outline" className="w-full gap-2">
                <Plus className="h-4 w-4" />
                إضافة تلميذ جديد
              </Button>

{showAddStudent && (
                <div className="mt-4 space-y-3">
                  <div>
                    <Label>اسم التلميذ</Label>
                    <Input
                      placeholder="الاسم الكامل"
                      value={newStudentName}
                      onChange={(e) => setNewStudentName(e.target.value)}
                    />
                  </div>
                  <div>
                    <Label>الصف</Label>
                    <Input
                      placeholder="مثال: المستوى الرابع ابتدائي"
                      value={newStudentClass}
                      onChange={(e) => setNewStudentClass(e.target.value)}
                    />
                  </div>
                  <div>
                    <Label>رمز الدخول (اختياري - سيتم توليده تلقائياً)</Label>
                    <Input
                      placeholder="مثال: P123456789"
                      value={newStudentCode}
                      onChange={(e) => setNewStudentCode(e.target.value.toUpperCase())}
                      maxLength={10}
                      dir="ltr"
                    />
                    <p className="text-xs text-muted-foreground mt-1">اتركه فارغاً لتوليد رمز تلقائي</p>
                  </div>
                  <Button onClick={addStudent} className="w-full">
                    حفظ
                  </Button>
                </div>
              )}
            </Card>

{/* قائمة التلاميذ */}
            <Card className="p-4">
              <h3 className="font-bold mb-3 flex items-center gap-2">
                <Users className="h-5 w-5" />
                جميع التلاميذ ({filteredStudents.length})
              </h3>
              <div className="space-y-2 max-h-96 overflow-y-auto">
                {filteredStudents.map((student) => (
                  <button
                    key={student.id}
                    onClick={() => selectStudent(student)}
                    className={`w-full text-right p-3 rounded-lg border transition-colors ${
                      selectedStudent?.id === student.id
                        ? "bg-primary text-primary-foreground border-primary"
                        : "hover:bg-muted border-border"
                    }`}
                  >
                    <div className="font-semibold">{student.student_name}</div>
                    <div className="text-sm opacity-80">{student.student_class}</div>
                    <div className="text-xs mt-1 flex items-center gap-2 justify-between">
                      <span>النقاط: {student.points}</span>
                      {student.student_code && (
                        <span className="font-mono" dir="ltr">
                          {student.student_code}
                        </span>
                      )}
                    </div>
                  </button>
                ))}
                {filteredStudents.length === 0 && (
                  <p className="text-center text-muted-foreground py-4">لا توجد نتائج</p>
                )}
              </div>
            </Card>
          </div>

{/* القسم الأيسر: تفاصيل التلميذ المحدد */}
          <div className="md:col-span-2">
            {selectedStudent ? (
              <div className="space-y-4">
                {/* معلومات التلميذ */}
                <Card className="p-6 bg-gradient-to-br from-yellow-50 to-orange-50 dark:from-yellow-950/20 dark:to-orange-950/20">
                  <div className="flex justify-between items-start">
                    <div className="flex-1">
                      <h2 className="text-2xl font-bold mb-2">{selectedStudent.student_name}</h2>
                      <p className="text-muted-foreground mb-1">الصف: {selectedStudent.student_class}</p>
                      <div className="flex items-center gap-2 mt-2">
                        <Key className="h-4 w-4 text-muted-foreground" />
                        <span className="font-mono text-sm" dir="ltr">
                          {selectedStudent.student_code || "لم يتم تعيين رمز"}
                        </span>
                      </div>
                    </div>
                    <div className="flex gap-2">
                      <div className="text-center bg-white dark:bg-gray-800 rounded-lg p-4">
                        <div className="text-4xl font-bold text-yellow-600">{selectedStudent.points}</div>
                        <div className="text-sm text-muted-foreground">إجمالي النقاط</div>
                      </div>
                      <Button size="sm" variant="destructive" onClick={() => deleteStudent(selectedStudent.id)}>
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                </Card>

<Card className="p-4">
                  <Button onClick={() => setShowEditCode(!showEditCode)} variant="outline" className="w-full gap-2">
                    <Key className="h-4 w-4" />
                    {selectedStudent.student_code ? "تعديل رمز الدخول" : "تعيين رمز دخول"}
                  </Button>

{showEditCode && (
                    <div className="mt-4 space-y-3">
                      <div>
                        <Label>رمز الدخول (حرف واحد + 9 أرقام)</Label>
                        <Input
                          placeholder="مثال: P123456789"
                          value={editCode}
                          onChange={(e) => setEditCode(e.target.value.toUpperCase())}
                          maxLength={10}
                          dir="ltr"
                          className="text-center font-mono"
                        />
                        <p className="text-xs text-muted-foreground mt-1">
                          سيستخدم التلميذ هذا الرمز لتسجيل الدخول والاطلاع على نقاطه
                        </p>
                      </div>
                      <div className="flex gap-2">
                        <Button onClick={updateStudentCode} className="flex-1">
                          حفظ الرمز
                        </Button>
                        <Button onClick={() => setEditCode(generateStudentCode())} variant="outline">
                          توليد رمز تلقائي
                        </Button>
                      </div>
                    </div>
                  )}
                </Card>

{/* إضافة/تعديل نقطة */}
                <Card className="p-4">
                  <Button
                    onClick={() => setShowAddPoint(!showAddPoint)}
                    className="w-full gap-2 bg-green-600 hover:bg-green-700"
                  >
                    <Plus className="h-4 w-4" />
                    إضافة أو تعديل نقطة
                  </Button>

{showAddPoint && (
                    <div className="mt-4 space-y-3">
                      <div>
                        <Label>عدد النقاط (موجب للإضافة، سالب للخصم)</Label>
                        <Input
                          type="number"
                          placeholder="مثال: 10 أو -5"
                          value={pointsChange || ""}
                          onChange={(e) => setPointsChange(Number.parseInt(e.target.value) || 0)}
                        />
                      </div>
                      <div>
                        <Label>السبب / الملاحظة</Label>
                        <Input
                          placeholder="أدخل سبب التغيير..."
                          value={pointReason}
                          onChange={(e) => setPointReason(e.target.value)}
                        />
                      </div>
                      <Button onClick={addPoint} className="w-full">
                        حفظ التعديل
                      </Button>
                    </div>
                  )}
                </Card>

{/* سجل الإنجازات */}
                <Card className="p-4">
                  <h3 className="font-bold mb-4">سجل الإنجازات والتعديلات</h3>
                  <div className="space-y-2 max-h-96 overflow-y-auto">
                    {selectedStudent.achievements && selectedStudent.achievements.length > 0 ? (
                      selectedStudent.achievements.map((achievement, index) => (
                        <div key={index} className="p-3 border rounded-lg bg-muted/50">
                          <div className="text-sm">{achievement}</div>
                        </div>
                      ))
                    ) : (
                      <div className="text-center py-8 text-muted-foreground">لا توجد سجلات لهذا التلميذ</div>
                    )}
                  </div>
                </Card>
              </div>
            ) : (
              <Card className="p-12 text-center">
                <Award className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
                <p className="text-muted-foreground">اختر تلميذاً من القائمة</p>
              </Card>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/students/club/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog"
import { CheckCircle, Home, Users, Heart, Bell, Lightbulb, Printer } from "lucide-react"
import { createBrowserClient } from "@/lib/supabase/client"

export default function ClubPage() {
  const [showSuccessDialog, setShowSuccessDialog] = useState(false)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const printRef = useRef<HTMLDivElement>(null)
  const [formData, setFormData] = useState({
    studentName: "",
    studentLevel: "",
    assignedTeacher: "",
    interests: [] as string[],
    committee: "",
  })

const interestCategories = [
    {
      category: "الميولات الفنية والإبداعية",
      icon: "🎨",
      items: [
        "الرسم والتشكيل",
        "التصوير الفوتوغرافي",
        "صناعة الفيديو والمونتاج",
        "الخط العربي",
        "الديكور والأعمال اليدوية (DIY)",
        "المسرح والتمثيل",
        "التصميم الرقمي (Graphic Design)",
        "الموسيقى (عزف/غناء)",
        "الرقص الفني",
      ],
    },
    {
      category: "الميولات الثقافية والمعرفية",
      icon: "📚",
      items: [
        "القراءة (روايات، أدب، فكر)",
        "اللغات والتواصل",
        "الكتابة الإبداعية",
        "التاريخ والتراث",
        "النقاشات الثقافية",
        "الصحافة المدرسية / الإعلام المدرسي",
        "نادي المناظرات",
      ],
    },
    {
      category: "الميولات الاجتماعية",
      icon: "🤝",
      items: [
        "العمل التطوعي",
        "الوساطة وحل النزاعات",
        "الأنشطة التضامنية",
        "مبادرات الدعم الاجتماعي",
        "القيادة والتأطير",
        "الأنشطة التنظيمية للأحداث المدرسية",
      ],
    },
    {
      category: "الميولات العلمية والتقنية",
      icon: "🧠",
      items: [
        "الروبوتيك والبرمجة",
        "التجارب العلمية",
        "الفضاء والاكتشاف",
        "التكنولوجيا الحديثة",
        "الذكاء الاصطناعي",
        "الطاقة والبيئة",
        "نادي الابتكار",
      ],
    },
    {
      category: "الميولات الرياضية",
      icon: "⚽",
      items: [
        "كرة القدم",
        "كرة السلة",
        "ألعاب القوى",
        "الشطرنج",
        "اليوغا",
        "اللياقة البدنية",
        "السباحة (إن توفرت)",
        "ركوب الدراجات",
      ],
    },
    {
      category: "الميولات البيئية",
      icon: "🌿",
      items: ["التشجير", "تدوير النفايات", "العناية بالمساحات الخضراء", "الحملات البيئية", "الطاقة النظيفة"],
    },
    {
      category: "الميولات الترفيهية",
      icon: "🎉",
      items: ["الرحلات والاستكشاف", "ألعاب الذكاء", "الأنشطة الجماعية", "ورش الطهي", "الألعاب التقليدية"],
    },
  ]

const committees = [
    "لجنة الإبداع والابتكار",
    "لجنة الأنشطة الفنية والثقافية",
    "لجنة البيئة والتنمية المستدامة",
    "لجنة الإعلام والتواصل",
    "لجنة التطوع والخدمة الاجتماعية",
    "لجنة الترفيه والرياضة",
  ]

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

try {
      const supabase = createBrowserClient()
      if (!supabase) {
        alert("حدث خطأ في الاتصال بقاعدة البيانات")
        return
      }

const { error } = await supabase.from("club_registrations").insert([
        {
          student_name: formData.studentName,
          student_level: formData.studentLevel,
          assigned_teacher: formData.assignedTeacher,
          interests: formData.interests,
          committee: formData.committee,
        },
      ])

if (error) {
        console.error("[v0] Error submitting registration:", error)
        alert("حدث خطأ أثناء إرسال الطلب. يرجى المحاولة مرة أخرى.")
        return
      }

setShowSuccessDialog(true)
    } catch (error) {
      console.error("[v0] Error:", error)
      alert("حدث خطأ أثناء إرسال الطلب. يرجى المحاولة مرة أخرى.")
    } finally {
      setIsSubmitting(false)
    }
  }

const handleInterestChange = (interest: string, checked: boolean) => {
    if (checked) {
      setFormData({ ...formData, interests: [...formData.interests, interest] })
    } else {
      setFormData({ ...formData, interests: formData.interests.filter((i) => i !== interest) })
    }
  }

const handlePrint = () => {
    const printContent = printRef.current
    if (!printContent) return

const printWindow = window.open("", "", "width=800,height=600")
    if (!printWindow) return

printWindow.document.write(`
      <!DOCTYPE html>
      <html dir="rtl">
        <head>
          <meta charset="utf-8">
          <title>طلب الانخراط في النادي السوسيوثقافي</title>
          <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">
          <style>
            @page {
              size: A4;
              margin: 2cm;
            }
            body {
              font-family: 'Cairo', sans-serif;
              direction: rtl;
              line-height: 1.8;
              color: #333;
              padding: 20px;
            }
            .header {
              text-align: center;
              border-bottom: 3px solid #6758B8;
              padding-bottom: 20px;
              margin-bottom: 30px;
            }
            h1 {
              color: #6758B8;
              font-size: 28px;
              margin-bottom: 10px;
            }
            .section {
              margin-bottom: 25px;
            }
            .section-title {
              font-size: 18px;
              font-weight: 700;
              color: #6758B8;
              margin-bottom: 10px;
              border-right: 4px solid #6758B8;
              padding-right: 10px;
            }
            .field {
              margin-bottom: 15px;
            }
            .label {
              font-weight: 600;
              color: #555;
            }
            .value {
              color: #000;
              margin-right: 10px;
            }
            .interests-list {
              display: flex;
              flex-wrap: wrap;
              gap: 10px;
              margin-top: 10px;
            }
            .interest-badge {
              background: #f0f0f0;
              padding: 5px 15px;
              border-radius: 20px;
              font-size: 14px;
            }
            .footer {
              margin-top: 50px;
              text-align: center;
              color: #666;
              font-size: 14px;
            }
          </style>
        </head>
        <body>
          ${printContent.innerHTML}
        </body>
      </html>
    `)
    printWindow.document.close()
    printWindow.focus()
    setTimeout(() => {
      printWindow.print()
      printWindow.close()
    }, 250)
  }

return (
    <div className="min-h-screen bg-[#C8D1E1] p-6">
      <div className="max-w-7xl mx-auto">
        <Card className="bg-card border-none shadow-2xl rounded-3xl overflow-hidden">
          <div className="flex flex-col md:flex-row min-h-[600px]">
            {/* القائمة الجانبية */}
            <div className="w-full md:w-20 bg-sidebar flex md:flex-col items-center justify-start md:justify-center gap-4 p-4 md:py-8 rounded-e-3xl">
              <div className="flex md:flex-col gap-3">
                <Link href="/students" className="group">
                  <div className="h-12 w-12 rounded-2xl bg-sidebar-accent group-hover:bg-white flex items-center justify-center transition-all cursor-pointer">
                    <Home className="h-6 w-6 text-white group-hover:text-[#6758B8]" />
                  </div>
                </Link>
                <Link href="/students/club">
                  <div className="h-12 w-12 rounded-2xl bg-white flex items-center justify-center cursor-pointer shadow-lg">
                    <Users className="h-6 w-6 text-[#6758B8]" />
                  </div>
                </Link>
                <Link href="/students/support" className="group">
                  <div className="h-12 w-12 rounded-2xl bg-sidebar-accent group-hover:bg-white flex items-center justify-center transition-all cursor-pointer">
                    <Heart className="h-6 w-6 text-white group-hover:text-[#6758B8]" />
                  </div>
                </Link>
                <Link href="/students/announcements" className="group">
                  <div className="h-12 w-12 rounded-2xl bg-sidebar-accent group-hover:bg-white flex items-center justify-center transition-all cursor-pointer">
                    <Bell className="h-6 w-6 text-white group-hover:text-[#6758B8]" />
                  </div>
                </Link>
                <Link href="/students/suggestions" className="group">
                  <div className="h-12 w-12 rounded-2xl bg-sidebar-accent group-hover:bg-white flex items-center justify-center transition-all cursor-pointer">
                    <Lightbulb className="h-6 w-6 text-white group-hover:text-[#6758B8]" />
                  </div>
                </Link>
              </div>
            </div>

{/* المحتوى الرئيسي */}
            <div className="flex-1 p-8 overflow-y-auto max-h-[calc(100vh-100px)]">
              <div className="mb-6">
                <h1 className="text-3xl font-bold text-foreground mb-2">الانخراط في النادي السوسيوثقافي</h1>
                <p className="text-muted-foreground">املأ البيانات التالية للانخراط في النادي</p>
              </div>

<Card className="bg-white border-none shadow-lg rounded-2xl">
                <CardContent className="p-6">
                  <form onSubmit={handleSubmit} className="space-y-6">
                    <div className="space-y-2">
                      <Label htmlFor="studentName">الاسم الكامل للتلميذ(ة) *</Label>
                      <Input
                        id="studentName"
                        required
                        value={formData.studentName}
                        onChange={(e) => setFormData({ ...formData, studentName: e.target.value })}
                        placeholder="أدخل الاسم الكامل"
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="studentLevel">المستوى الدراسي *</Label>
                      <Input
                        id="studentLevel"
                        required
                        value={formData.studentLevel}
                        onChange={(e) => setFormData({ ...formData, studentLevel: e.target.value })}
                        placeholder="مثال: المستوى الرابع ابتدائي"
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="assignedTeacher">الأستاذ(ة) المكلف(ة) *</Label>
                      <Input
                        id="assignedTeacher"
                        required
                        value={formData.assignedTeacher}
                        onChange={(e) => setFormData({ ...formData, assignedTeacher: e.target.value })}
                        placeholder="اسم الأستاذ(ة) المكلف(ة)"
                      />
                    </div>

<div className="space-y-4">
                      <Label className="text-lg font-semibold">الميولات (يمكن اختيار أكثر من واحد) *</Label>
                      <div className="space-y-6">
                        {interestCategories.map((category) => (
                          <div key={category.category} className="space-y-3">
                            <h3 className="text-md font-semibold text-primary flex items-center gap-2">
                              <span>{category.icon}</span>
                              <span>{category.category}</span>
                            </h3>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 pr-6">
                              {category.items.map((interest) => (
                                <div key={interest} className="flex items-center gap-3">
                                  <Checkbox
                                    id={interest}
                                    checked={formData.interests.includes(interest)}
                                    onCheckedChange={(checked) => handleInterestChange(interest, checked as boolean)}
                                  />
                                  <Label htmlFor={interest} className="cursor-pointer text-sm">
                                    {interest}
                                  </Label>
                                </div>
                              ))}
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="committee">اختر اللجنة التي تريد الانضمام إليها *</Label>
                      <Select
                        value={formData.committee}
                        onValueChange={(value) => setFormData({ ...formData, committee: value })}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="اختر لجنة" />
                        </SelectTrigger>
                        <SelectContent>
                          {committees.map((committee) => (
                            <SelectItem key={committee} value={committee}>
                              {committee}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

<Button
                      type="submit"
                      className="w-full"
                      size="lg"
                      disabled={isSubmitting || formData.interests.length === 0}
                    >
                      {isSubmitting ? "جاري الإرسال..." : "إرسال الطلب"}
                    </Button>
                  </form>
                </CardContent>
              </Card>
            </div>
          </div>
        </Card>
      </div>

<Dialog open={showSuccessDialog} onOpenChange={setShowSuccessDialog}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <div className="flex justify-center mb-4">
              <div className="h-20 w-20 rounded-full bg-primary/10 flex items-center justify-center">
                <CheckCircle className="h-12 w-12 text-primary" />
              </div>
            </div>
            <DialogTitle className="text-center text-2xl">تم إرسال الطلب بنجاح!</DialogTitle>
            <DialogDescription className="text-center text-lg">
              شكراً لانخراطك في النادي السوسيوثقافي. سيتم التواصل معك قريباً.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter className="flex gap-2 sm:justify-center">
            <Button onClick={handlePrint} variant="outline" className="gap-2 bg-transparent">
              <Printer className="h-4 w-4" />
              طباعة الطلب
            </Button>
            <Link href="/students">
              <Button>العودة إلى الصفحة الرئيسية</Button>
            </Link>
          </DialogFooter>
        </DialogContent>
      </Dialog>

<div ref={printRef} style={{ display: "none" }}>
        <div className="header">
          <h1>طلب الانخراط في النادي السوسيوثقافي</h1>
          <p>المؤسسة التعليمية</p>
        </div>

<div className="section">
          <div className="section-title">المعلومات الشخصية</div>
          <div className="field">
            <span className="label">الاسم الكامل:</span>
            <span className="value">{formData.studentName}</span>
          </div>
          <div className="field">
            <span className="label">المستوى الدراسي:</span>
            <span className="value">{formData.studentLevel}</span>
          </div>
          <div className="field">
            <span className="label">الأستاذ(ة) المكلف(ة):</span>
            <span className="value">{formData.assignedTeacher}</span>
          </div>
        </div>

<div className="section">
          <div className="section-title">اللجنة المختارة</div>
          <div className="field">
            <span className="value">{formData.committee}</span>
          </div>
        </div>

<div className="section">
          <div className="section-title">الميولات</div>
          <div className="interests-list">
            {formData.interests.map((interest) => (
              <span key={interest} className="interest-badge">
                {interest}
              </span>
            ))}
          </div>
        </div>

<div className="footer">
          <p>تاريخ التسجيل: {new Date().toLocaleDateString("ar-MA")}</p>
          <p>شكراً لانضمامك إلى النادي السوسيوثقافي</p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/012_add_icon_to_announcements.sql" isMerged="true"
-- Add icon column to announcements table if not exists
ALTER TABLE announcements ADD COLUMN IF NOT EXISTS icon TEXT DEFAULT 'Bell';

-- Update existing announcements to have default icon
UPDATE announcements SET icon = 'Bell' WHERE icon IS NULL;
[V0_FILE]typescriptreact:file="app/admin/manage-announcements/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import React from "react"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { createBrowserClient } from "@/lib/supabase/client"
import {
  ArrowRight,
  Plus,
  Edit,
  Trash2,
  Eye,
  EyeOff,
  Bell,
  AlertCircle,
  Info,
  Star,
  Megaphone,
  Calendar,
  Heart,
  Lightbulb,
} from "lucide-react"
import Link from "next/link"

export const dynamic = "force-dynamic"

const iconOptions = [
  { value: "Bell", label: "جرس", icon: Bell },
  { value: "AlertCircle", label: "تنبيه", icon: AlertCircle },
  { value: "Info", label: "معلومات", icon: Info },
  { value: "Star", label: "نجمة", icon: Star },
  { value: "Megaphone", label: "مكبر صوت", icon: Megaphone },
  { value: "Calendar", label: "تقويم", icon: Calendar },
  { value: "Heart", label: "قلب", icon: Heart },
  { value: "Lightbulb", label: "فكرة", icon: Lightbulb },
]

export default function ManageAnnouncementsPage() {
  const router = useRouter()
  const [loading, setLoading] = useState(true)
  const [announcements, setAnnouncements] = useState<any[]>([])
  const [showForm, setShowForm] = useState(false)
  const [editingId, setEditingId] = useState<string | null>(null)
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    target_audience: "students",
    icon: "Bell",
  })

useEffect(() => {
    const isLoggedIn = localStorage.getItem("admin_logged_in")
    if (!isLoggedIn) {
      router.push("/admin/login")
      return
    }
    loadAnnouncements()
  }, [])

const loadAnnouncements = async () => {
    try {
      const supabase = createBrowserClient()
      if (!supabase) {
        console.error("Supabase client not available")
        return
      }

const { data, error } = await supabase.from("announcements").select("*").order("created_at", { ascending: false })

if (error) throw error
      setAnnouncements(data || [])
    } catch (error) {
      console.error("Error loading announcements:", error)
      alert("حدث خطأ أثناء تحميل الإعلانات")
    } finally {
      setLoading(false)
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

try {
      const supabase = createBrowserClient()
      if (!supabase) {
        alert("خطأ في الاتصال بقاعدة البيانات")
        return
      }

if (editingId) {
        const { error } = await supabase
          .from("announcements")
          .update({
            title: formData.title,
            content: formData.description,
            target_audience: formData.target_audience,
            icon: formData.icon,
          })
          .eq("id", editingId)
        if (error) throw error
      } else {
        const { error } = await supabase.from("announcements").insert([
          {
            title: formData.title,
            content: formData.description,
            target_audience: formData.target_audience,
            icon: formData.icon,
          },
        ])
        if (error) throw error
      }

setFormData({ title: "", description: "", target_audience: "students", icon: "Bell" })
      setShowForm(false)
      setEditingId(null)
      loadAnnouncements()
    } catch (error) {
      console.error("Error saving:", error)
      alert("حدث خطأ أثناء الحفظ: " + (error as any).message)
    }
  }

const toggleVisibility = async (id: string, currentVisibility: boolean) => {
    try {
      const supabase = createBrowserClient()
      const { error } = await supabase.from("announcements").update({ is_active: !currentVisibility }).eq("id", id)

if (error) throw error
      loadAnnouncements()
    } catch (error) {
      console.error("Error toggling visibility:", error)
    }
  }

const handleDelete = async (id: string) => {
    if (!confirm("هل أنت متأكد من الحذف؟")) return

try {
      const supabase = createBrowserClient()
      const { error } = await supabase.from("announcements").delete().eq("id", id)

if (error) throw error
      loadAnnouncements()
    } catch (error) {
      console.error("Error deleting:", error)
    }
  }

if (loading) {
    return <div className="flex items-center justify-center min-h-screen">جاري التحميل...</div>
  }

return (
    <div className="min-h-screen bg-background p-6">
      <div className="max-w-7xl mx-auto">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-4">
            <Link href="/admin/dashboard">
              <Button variant="outline" size="icon">
                <ArrowRight className="h-5 w-5" />
              </Button>
            </Link>
            <h1 className="text-3xl font-bold">إدارة الإعلانات</h1>
          </div>
          <Button onClick={() => setShowForm(!showForm)} className="gap-2">
            <Plus className="h-5 w-5" />
            إضافة إعلان جديد
          </Button>
        </div>

{showForm && (
          <Card className="p-6 mb-6">
            <h2 className="text-xl font-bold mb-4">{editingId ? "تعديل الإعلان" : "إضافة إعلان جديد"}</h2>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="block text-sm font-medium mb-2">العنوان</label>
                <Input
                  value={formData.title}
                  onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                  required
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">الوصف</label>
                <Textarea
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  required
                  rows={4}
                />
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium mb-2">الجمهور المستهدف</label>
                  <select
                    value={formData.target_audience}
                    onChange={(e) => setFormData({ ...formData, target_audience: e.target.value })}
                    className="w-full h-10 rounded-md border border-input bg-background px-3"
                  >
                    <option value="students">التلاميذ</option>
                    <option value="parents">أولياء الأمور</option>
                    <option value="all">الجميع</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium mb-2">الأيقونة</label>
                  <select
                    value={formData.icon}
                    onChange={(e) => setFormData({ ...formData, icon: e.target.value })}
                    className="w-full h-10 rounded-md border border-input bg-background px-3"
                  >
                    {iconOptions.map((option) => (
                      <option key={option.value} value={option.value}>
                        {option.label}
                      </option>
                    ))}
                  </select>
                </div>
              </div>
              <div className="flex items-center gap-2 p-4 bg-muted rounded-lg">
                <span className="text-sm text-muted-foreground">معاينة الأيقونة:</span>
                {iconOptions.find((opt) => opt.value === formData.icon)?.icon &&
                  React.createElement(iconOptions.find((opt) => opt.value === formData.icon)!.icon, {
                    className: "h-8 w-8 text-primary",
                  })}
              </div>
              <div className="flex gap-2">
                <Button type="submit">حفظ</Button>
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => {
                    setShowForm(false)
                    setEditingId(null)
                    setFormData({ title: "", description: "", target_audience: "students", icon: "Bell" })
                  }}
                >
                  إلغاء
                </Button>
              </div>
            </form>
          </Card>
        )}

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {announcements.map((announcement) => {
            const IconComponent = iconOptions.find((opt) => opt.value === announcement.icon)?.icon || Bell
            return (
              <Card key={announcement.id} className="p-4">
                <div className="flex items-start justify-between mb-3">
                  <div className="flex items-start gap-3 flex-1">
                    <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                      <IconComponent className="h-5 w-5 text-primary" />
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-1">
                        <h3 className="font-bold text-lg">{announcement.title}</h3>
                        <span
                          className={`px-2 py-0.5 rounded text-xs ${
                            announcement.target_audience === "students"
                              ? "bg-blue-100 text-blue-800"
                              : announcement.target_audience === "parents"
                                ? "bg-green-100 text-green-800"
                                : "bg-purple-100 text-purple-800"
                          }`}
                        >
                          {announcement.target_audience === "students"
                            ? "التلاميذ"
                            : announcement.target_audience === "parents"
                              ? "الأولياء"
                              : "الجميع"}
                        </span>
                      </div>
                      <p className="text-sm text-muted-foreground mb-2">{announcement.content}</p>
                    </div>
                  </div>
                  <div
                    className={`px-2 py-1 rounded text-xs ${announcement.is_active ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`}
                  >
                    {announcement.is_active ? "مرئي" : "مخفي"}
                  </div>
                </div>
                <div className="flex gap-2">
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => {
                      setEditingId(announcement.id)
                      setFormData({
                        title: announcement.title,
                        description: announcement.content,
                        target_audience: announcement.target_audience,
                        icon: announcement.icon || "Bell",
                      })
                      setShowForm(true)
                    }}
                  >
                    <Edit className="h-4 w-4" />
                  </Button>
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => toggleVisibility(announcement.id, announcement.is_active)}
                  >
                    {announcement.is_active ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                  </Button>
                  <Button size="sm" variant="outline" onClick={() => handleDelete(announcement.id)}>
                    <Trash2 className="h-4 w-4 text-red-500" />
                  </Button>
                </div>
              </Card>
            )
          })}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/students/announcements/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Home, Users, Heart, Bell, Lightbulb, Calendar, AlertCircle, Info, Star, Megaphone } from "lucide-react"
import { formatArabicDate } from "@/lib/utils"
import { createBrowserClient } from "@/lib/supabase/client"

const iconMap: { [key: string]: any } = {
  Bell,
  AlertCircle,
  Info,
  Star,
  Megaphone,
  Calendar,
  Heart,
  Lightbulb,
}

export default function AnnouncementsPage() {
  const [announcements, setAnnouncements] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    loadAnnouncements()
  }, [])

const loadAnnouncements = async () => {
    try {
      const supabase = createBrowserClient()
      if (!supabase) {
        console.error("Supabase client not available")
        setLoading(false)
        return
      }

const { data, error } = await supabase
        .from("announcements")
        .select("*")
        .eq("is_active", true)
        .in("target_audience", ["students", "all"])
        .order("created_at", { ascending: false })

if (error) throw error

setAnnouncements(data || [])
    } catch (error) {
      console.error("Error loading announcements:", error)
    } finally {
      setLoading(false)
    }
  }

const getTypeColor = (type: string) => {
    switch (type) {
      case "important":
        return "bg-destructive text-destructive-foreground"
      case "activity":
        return "bg-primary text-primary-foreground"
      case "update":
        return "bg-secondary text-secondary-foreground"
      default:
        return "bg-muted text-muted-foreground"
    }
  }

const getTypeLabel = (type: string) => {
    switch (type) {
      case "important":
        return "مهم"
      case "activity":
        return "نشاط"
      case "update":
        return "تحديث"
      default:
        return "إعلان"
    }
  }

return (
    <div className="min-h-screen bg-[#C8D1E1] p-6">
      <div className="max-w-7xl mx-auto">
        <Card className="bg-card border-none shadow-2xl rounded-3xl overflow-hidden">
          <div className="flex flex-col md:flex-row min-h-[600px]">
            {/* القائمة الجانبية */}
            <div className="w-full md:w-20 bg-sidebar flex md:flex-col items-center justify-start md:justify-center gap-4 p-4 md:py-8 rounded-e-3xl">
              <div className="flex md:flex-col gap-3">
                <Link href="/students" className="group">
                  <div className="h-12 w-12 rounded-2xl bg-sidebar-accent group-hover:bg-white flex items-center justify-center transition-all cursor-pointer">
                    <Home className="h-6 w-6 text-white group-hover:text-[#6758B8]" />
                  </div>
                </Link>
                <Link href="/students/club" className="group">
                  <div className="h-12 w-12 rounded-2xl bg-sidebar-accent group-hover:bg-white flex items-center justify-center transition-all cursor-pointer">
                    <Users className="h-6 w-6 text-white group-hover:text-[#6758B8]" />
                  </div>
                </Link>
                <Link href="/students/support" className="group">
                  <div className="h-12 w-12 rounded-2xl bg-sidebar-accent group-hover:bg-white flex items-center justify-center transition-all cursor-pointer">
                    <Heart className="h-6 w-6 text-white group-hover:text-[#6758B8]" />
                  </div>
                </Link>
                <Link href="/students/announcements">
                  <div className="h-12 w-12 rounded-2xl bg-white flex items-center justify-center cursor-pointer shadow-lg">
                    <Bell className="h-6 w-6 text-[#6758B8]" />
                  </div>
                </Link>
                <Link href="/students/suggestions" className="group">
                  <div className="h-12 w-12 rounded-2xl bg-sidebar-accent group-hover:bg-white flex items-center justify-center transition-all cursor-pointer">
                    <Lightbulb className="h-6 w-6 text-white group-hover:text-[#6758B8]" />
                  </div>
                </Link>
              </div>
            </div>

{/* المحتوى الرئيسي */}
            <div className="flex-1 p-8 overflow-y-auto">
              <div className="mb-8 text-center">
                <h1 className="text-3xl font-bold text-foreground mb-3">الإعلانات والإشعارات</h1>
                <p className="text-muted-foreground text-lg">تابع آخر الأخبار والأنشطة المدرسية</p>
              </div>

{loading ? (
                <div className="text-center py-8">جاري التحميل...</div>
              ) : announcements.length === 0 ? (
                <div className="text-center py-8 text-muted-foreground">لا توجد إعلانات حالياً</div>
              ) : (
                <div className="space-y-4 max-w-3xl mx-auto">
                  {announcements.map((announcement) => {
                    const Icon = iconMap[announcement.icon] || Bell
                    return (
                      <Card
                        key={announcement.id}
                        className="hover:shadow-lg transition-shadow bg-white border-none rounded-2xl"
                      >
                        <CardHeader>
                          <div className="flex items-start justify-between gap-4">
                            <div className="flex items-start gap-4 flex-1">
                              <div
                                className={`h-12 w-12 rounded-xl ${getTypeColor(announcement.target_audience || "general")} flex items-center justify-center flex-shrink-0`}
                              >
                                <Icon className="h-6 w-6" />
                              </div>
                              <div className="flex-1">
                                <div className="flex items-center gap-3 mb-2">
                                  <CardTitle className="text-xl">{announcement.title}</CardTitle>
                                  <Badge className={getTypeColor(announcement.target_audience || "general")}>
                                    {getTypeLabel(announcement.target_audience || "general")}
                                  </Badge>
                                </div>
                                <CardDescription className="text-base">{announcement.content}</CardDescription>
                              </div>
                            </div>
                          </div>
                        </CardHeader>
                        <CardContent>
                          <div className="flex items-center gap-2 text-sm text-muted-foreground">
                            <Calendar className="h-4 w-4" />
                            <span>{formatArabicDate(announcement.created_at)}</span>
                          </div>
                        </CardContent>
                      </Card>
                    )
                  })}
                </div>
              )}
            </div>
          </div>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/parents/announcements/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { PageLayout } from "@/components/page-layout"
import { Card } from "@/components/ui/card"
import { Home, Bell, MessageCircle, FileText, UserCircle, AlertCircle, Info, Star, Megaphone } from "lucide-react"
import { createBrowserClient } from "@/lib/supabase/client"
import { formatArabicDate } from "@/lib/utils"

const navItems = [
  { href: "/parents", icon: Home, label: "الرئيسية" },
  { href: "/parents/announcements", icon: Bell, label: "الإعلانات", active: true },
  { href: "/parents/communication", icon: MessageCircle, label: "التواصل" },
  { href: "/parents/documents", icon: FileText, label: "الوثائق" },
  { href: "/parents/profile", icon: UserCircle, label: "الملف الشخصي" },
]

const iconMap: { [key: string]: any } = {
  Bell,
  AlertCircle,
  Info,
  Star,
  Megaphone,
}

export default function AnnouncementsPage() {
  const [announcements, setAnnouncements] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    loadAnnouncements()
  }, [])

const { data, error } = await supabase
        .from("announcements")
        .select("*")
        .eq("is_active", true)
        .in("target_audience", ["parents", "all"])
        .order("created_at", { ascending: false })

if (error) throw error

setAnnouncements(data || [])
    } catch (error) {
      console.error("Error loading announcements:", error)
    } finally {
      setLoading(false)
    }
  }

const getTypeLabel = (type: string) => {
    switch (type) {
      case "important":
        return "مهم"
      case "activity":
        return "فعالية"
      case "update":
        return "تحديث"
      default:
        return "إعلان"
    }
  }

return (
    <PageLayout
      title="الإعلانات"
      subtitle="آخر الأخبار والتحديثات المدرسية"
      navItems={navItems}
      showSwitcher={true}
      currentSection="parents"
    >
      {loading ? (
        <div className="text-center py-8">جاري التحميل...</div>
      ) : announcements.length === 0 ? (
        <div className="text-center py-8 text-muted-foreground">لا توجد إعلانات حالياً</div>
      ) : (
        <div className="space-y-4">
          {announcements.map((announcement) => {
            const Icon = iconMap[announcement.icon] || Bell
            return (
              <Card key={announcement.id} className="p-6 hover:shadow-lg transition-shadow">
                <div className="flex items-start gap-4">
                  <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                    <Icon className="h-6 w-6 text-primary" />
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-2">
                      <h3 className="text-xl font-bold text-foreground">{announcement.title}</h3>
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full font-semibold">
                        {getTypeLabel(announcement.target_audience || "general")}
                      </span>
                    </div>
                    <p className="text-sm text-muted-foreground mb-3">{formatArabicDate(announcement.created_at)}</p>
                    <p className="text-base text-foreground leading-relaxed">{announcement.content}</p>
                  </div>
                </div>
              </Card>
            )
          })}
        </div>
      )}
    </PageLayout>
  )
}
[V0_FILE]typescriptreact:file="app/admin/students-section/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

export const dynamic = "force-dynamic"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { createBrowserClient } from "@/lib/supabase/client"
import { ArrowRight, Edit, Trash2, Eye, EyeOff } from "lucide-react"
import Link from "next/link"

export default function StudentsSection() {
  const router = useRouter()
  const [loading, setLoading] = useState(true)
  const [contents, setContents] = useState<any[]>([])
  const [showForm, setShowForm] = useState(false)
  const [editingId, setEditingId] = useState<string | null>(null)
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    icon: "",
    href: "",
    gradient_colors: "from-primary via-primary to-chart-3",
  })

useEffect(() => {
    const isLoggedIn = localStorage.getItem("admin_logged_in")
    if (!isLoggedIn) {
      router.push("/admin/login")
      return
    }
    loadContent()
  }, [])

const loadContent = async () => {
    try {
      const supabase = createBrowserClient()
      const { data, error } = await supabase
        .from("section_content")
        .select("*")
        .eq("section", "students")
        .order("display_order")

if (error) throw error
      setContents(data || [])
    } catch (error) {
      console.error("Error loading content:", error)
    } finally {
      setLoading(false)
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

try {
      const supabase = createBrowserClient()
      const data = {
        section: "students",
        content_type: "card",
        ...formData,
        display_order: contents.length,
      }

if (editingId) {
        const { error } = await supabase.from("section_content").update(data).eq("id", editingId)
        if (error) throw error
      } else {
        const { error } = await supabase.from("section_content").insert([data])
        if (error) throw error
      }

setFormData({
        title: "",
        description: "",
        icon: "",
        href: "",
        gradient_colors: "from-primary via-primary to-chart-3",
      })
      setShowForm(false)
      setEditingId(null)
      loadContent()
    } catch (error) {
      console.error("Error saving:", error)
      alert("حدث خطأ أثناء الحفظ")
    }
  }

const toggleVisibility = async (id: string, currentVisibility: boolean) => {
    try {
      const supabase = createBrowserClient()
      const { error } = await supabase.from("section_content").update({ is_visible: !currentVisibility }).eq("id", id)

if (error) throw error
      loadContent()
    } catch (error) {
      console.error("Error toggling visibility:", error)
    }
  }

const handleDelete = async (id: string) => {
    if (!confirm("هل أنت متأكد من الحذف؟")) return

try {
      const supabase = createBrowserClient()
      const { error } = await supabase.from("section_content").delete().eq("id", id)

if (error) throw error
      loadContent()
    } catch (error) {
      console.error("Error deleting:", error)
    }
  }

if (loading) {
    return <div className="flex items-center justify-center min-h-screen">جاري التحميل...</div>
  }

return (
    <div className="min-h-screen bg-background p-6">
      <div className="max-w-7xl mx-auto">
        <div className="flex items-center gap-4 mb-6">
          <Link href="/admin/dashboard">
            <Button variant="outline" size="icon">
              <ArrowRight className="h-5 w-5" />
            </Button>
          </Link>
          <h1 className="text-3xl font-bold">إدارة ركن التلاميذ</h1>
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {contents.map((content) => (
            <Card key={content.id} className="p-4">
              <div className="flex items-start justify-between mb-3">
                <div className="flex-1">
                  <h3 className="font-bold text-lg">{content.title}</h3>
                  <p className="text-sm text-muted-foreground">{content.description}</p>
                  <p className="text-xs text-muted-foreground mt-1">رابط: {content.href || "غير محدد"}</p>
                </div>
                <div
                  className={`px-2 py-1 rounded text-xs ${content.is_visible ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`}
                >
                  {content.is_visible ? "مرئي" : "مخفي"}
                </div>
              </div>
              <div className="flex gap-2">
                <Button
                  size="sm"
                  variant="outline"
                  onClick={() => {
                    setEditingId(content.id)
                    setFormData({
                      title: content.title,
                      description: content.description,
                      icon: content.icon || "",
                      href: content.href || "",
                      gradient_colors: content.gradient_colors,
                    })
                    setShowForm(true)
                  }}
                >
                  <Edit className="h-4 w-4" />
                </Button>
                <Button size="sm" variant="outline" onClick={() => toggleVisibility(content.id, content.is_visible)}>
                  {content.is_visible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                </Button>
                <Button size="sm" variant="outline" onClick={() => handleDelete(content.id)}>
                  <Trash2 className="h-4 w-4 text-red-500" />
                </Button>
              </div>
            </Card>
          ))}
        </div>

{showForm && (
          <Card className="p-6 mb-6">
            <h2 className="text-xl font-bold mb-4">{editingId ? "تعديل العنصر" : "إضافة عنصر جديد"}</h2>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="block text-sm font-medium mb-2">العنوان</label>
                <Input
                  value={formData.title}
                  onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                  required
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">الوصف</label>
                <Textarea
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  required
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">الأيقونة (اسم Lucide icon)</label>
                <Input
                  value={formData.icon}
                  onChange={(e) => setFormData({ ...formData, icon: e.target.value })}
                  placeholder="مثال: Heart, Bell, Star"
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">الرابط</label>
                <Input
                  value={formData.href}
                  onChange={(e) => setFormData({ ...formData, href: e.target.value })}
                  placeholder="/students/..."
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">ألوان التدرج</label>
                <Input
                  value={formData.gradient_colors}
                  onChange={(e) => setFormData({ ...formData, gradient_colors: e.target.value })}
                  placeholder="from-primary via-primary to-chart-3"
                />
              </div>
              <div className="flex gap-2">
                <Button type="submit">حفظ</Button>
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => {
                    setShowForm(false)
                    setEditingId(null)
                    setFormData({
                      title: "",
                      description: "",
                      icon: "",
                      href: "",
                      gradient_colors: "from-primary via-primary to-chart-3",
                    })
                  }}
                >
                  إلغاء
                </Button>
              </div>
            </form>
          </Card>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/parents-section/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

export const dynamic = "force-dynamic"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { createBrowserClient } from "@/lib/supabase/client"
import { ArrowRight, Edit, Trash2, Eye, EyeOff, HelpCircle, FileText } from "lucide-react"
import Link from "next/link"

export default function ParentsSection() {
  const router = useRouter()
  const [loading, setLoading] = useState(true)
  const [contents, setContents] = useState<any[]>([])
  const [showForm, setShowForm] = useState(false)
  const [editingId, setEditingId] = useState<string | null>(null)
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    icon: "",
    href: "",
    gradient_colors: "from-primary via-primary to-chart-3",
  })

useEffect(() => {
    const isLoggedIn = localStorage.getItem("admin_logged_in")
    if (!isLoggedIn) {
      router.push("/admin/login")
      return
    }
    loadContent()
  }, [])

const loadContent = async () => {
    try {
      const supabase = createBrowserClient()
      const { data, error } = await supabase
        .from("section_content")
        .select("*")
        .eq("section", "parents")
        .order("display_order")

if (error) throw error
      setContents(data || [])
    } catch (error) {
      console.error("Error loading content:", error)
    } finally {
      setLoading(false)
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

try {
      const supabase = createBrowserClient()
      const data = {
        section: "parents",
        content_type: "card",
        ...formData,
        display_order: contents.length,
      }

if (error) throw error
      loadContent()
    } catch (error) {
      console.error("Error toggling visibility:", error)
    }
  }

const handleDelete = async (id: string) => {
    if (!confirm("هل أنت متأكد من الحذف؟")) return

try {
      const supabase = createBrowserClient()
      const { error } = await supabase.from("section_content").delete().eq("id", id)

if (error) throw error
      loadContent()
    } catch (error) {
      console.error("Error deleting:", error)
    }
  }

if (loading) {
    return <div className="flex items-center justify-center min-h-screen">جاري التحميل...</div>
  }

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <Link href="/admin/manage-faqs">
            <Card className="p-6 hover:shadow-xl transition-all cursor-pointer border-2 hover:border-primary">
              <div className="flex items-center gap-4">
                <div className="h-16 w-16 rounded-2xl bg-gradient-to-br from-chart-2 to-primary flex items-center justify-center">
                  <HelpCircle className="h-8 w-8 text-white" />
                </div>
                <div>
                  <h2 className="text-xl font-bold mb-1">إدارة الأسئلة والأجوبة</h2>
                  <p className="text-sm text-muted-foreground">إضافة وتعديل وحذف الأسئلة الشائعة</p>
                </div>
              </div>
            </Card>
          </Link>

<Link href="/admin/manage-documents">
            <Card className="p-6 hover:shadow-xl transition-all cursor-pointer border-2 hover:border-primary">
              <div className="flex items-center gap-4">
                <div className="h-16 w-16 rounded-2xl bg-gradient-to-br from-secondary to-chart-4 flex items-center justify-center">
                  <FileText className="h-8 w-8 text-white" />
                </div>
                <div>
                  <h2 className="text-xl font-bold mb-1">إدارة الوثائق</h2>
                  <p className="text-sm text-muted-foreground">إضافة وتعديل وثائق Google Drive</p>
                </div>
              </div>
            </Card>
          </Link>

{contents.map((content) => (
            <Card key={content.id} className="p-4">
              <div className="flex items-start justify-between mb-3">
                <div className="flex-1">
                  <h3 className="font-bold text-lg">{content.title}</h3>
                  <p className="text-sm text-muted-foreground">{content.description}</p>
                  <p className="text-xs text-muted-foreground mt-1">رابط: {content.href || "غير محدد"}</p>
                </div>
                <div
                  className={`px-2 py-1 rounded text-xs ${content.is_visible ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`}
                >
                  {content.is_visible ? "مرئي" : "مخفي"}
                </div>
              </div>
              <div className="flex gap-2">
                <Button
                  size="sm"
                  variant="outline"
                  onClick={() => {
                    setEditingId(content.id)
                    setFormData({
                      title: content.title,
                      description: content.description,
                      icon: content.icon || "",
                      href: content.href || "",
                      gradient_colors: content.gradient_colors,
                    })
                    setShowForm(true)
                  }}
                >
                  <Edit className="h-4 w-4" />
                </Button>
                <Button size="sm" variant="outline" onClick={() => toggleVisibility(content.id, content.is_visible)}>
                  {content.is_visible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                </Button>
                <Button size="sm" variant="outline" onClick={() => handleDelete(content.id)}>
                  <Trash2 className="h-4 w-4 text-red-500" />
                </Button>
              </div>
            </Card>
          ))}
        </div>

{showForm && (
          <Card className="p-6 mb-6">
            <h2 className="text-xl font-bold mb-4">{editingId ? "تعديل العنصر" : "إضافة عنصر جديد"}</h2>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="block text-sm font-medium mb-2">العنوان</label>
                <Input
                  value={formData.title}
                  onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                  required
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">الوصف</label>
                <Textarea
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  required
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">الأيقونة (اسم Lucide icon)</label>
                <Input
                  value={formData.icon}
                  onChange={(e) => setFormData({ ...formData, icon: e.target.value })}
                  placeholder="مثال: Heart, Bell, Star"
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">الرابط</label>
                <Input
                  value={formData.href}
                  onChange={(e) => setFormData({ ...formData, href: e.target.value })}
                  placeholder="/parents/..."
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">ألوان التدرج</label>
                <Input
                  value={formData.gradient_colors}
                  onChange={(e) => setFormData({ ...formData, gradient_colors: e.target.value })}
                  placeholder="from-primary via-primary to-chart-3"
                />
              </div>
              <div className="flex gap-2">
                <Button type="submit">حفظ</Button>
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => {
                    setShowForm(false)
                    setEditingId(null)
                    setFormData({
                      title: "",
                      description: "",
                      icon: "",
                      href: "",
                      gradient_colors: "from-primary via-primary to-chart-3",
                    })
                  }}
                >
                  إلغاء
                </Button>
              </div>
            </form>
          </Card>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/parents/faq/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useEffect, useState } from "react"
import { PageLayout } from "@/components/page-layout"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Home, Bell, MessageCircle, FileText, UserCircle, HelpCircle, ChevronDown, Send } from "lucide-react"
import { createBrowserClient } from "@/lib/supabase/client"

const navItems = [
  { href: "/parents", icon: Home, label: "الرئيسية" },
  { href: "/parents/announcements", icon: Bell, label: "الإعلانات" },
  { href: "/parents/communication", icon: MessageCircle, label: "التواصل" },
  { href: "/parents/documents", icon: FileText, label: "الوثائق" },
  { href: "/parents/profile", icon: UserCircle, label: "الملف الشخصي" },
]

export default function FAQPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [openIndex, setOpenIndex] = useState<string | null>(null)
  const [showQuestionForm, setShowQuestionForm] = useState(false)
  const [parentName, setParentName] = useState("")
  const [parentEmail, setParentEmail] = useState("")
  const [questionCategory, setQuestionCategory] = useState("")
  const [question, setQuestion] = useState("")
  const [questionSubmitted, setQuestionSubmitted] = useState(false)
  const [faqs, setFaqs] = useState<{ category: string; questions: { q: string; a: string }[] }[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    loadFAQs()
  }, [])

const loadFAQs = async () => {
    try {
      const supabase = createBrowserClient()
      const { data, error } = await supabase
        .from("faqs")
        .select("*")
        .eq("is_visible", true)
        .order("category")
        .order("display_order")

if (error) throw error

// تنظيم البيانات حسب التصنيف
      const groupedFaqs: { [key: string]: { q: string; a: string }[] } = {}
      data?.forEach((faq) => {
        if (!groupedFaqs[faq.category]) {
          groupedFaqs[faq.category] = []
        }
        groupedFaqs[faq.category].push({
          q: faq.question,
          a: faq.answer,
        })
      })

// تحويل إلى array
      const faqsArray = Object.entries(groupedFaqs).map(([category, questions]) => ({
        category,
        questions,
      }))

setFaqs(faqsArray)
    } catch (error) {
      console.error("Error loading FAQs:", error)
    } finally {
      setLoading(false)
    }
  }

const filteredFaqs = faqs
    .map((category) => ({
      ...category,
      questions: category.questions.filter(
        (item) =>
          item.q.toLowerCase().includes(searchTerm.toLowerCase()) ||
          item.a.toLowerCase().includes(searchTerm.toLowerCase()),
      ),
    }))
    .filter((category) => category.questions.length > 0)

const handleQuestionSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

try {
      const supabase = createBrowserClient()

const { error } = await supabase.from("parent_questions").insert({
        parent_name: parentName,
        parent_email: parentEmail,
        question_category: questionCategory,
        question: question,
        status: "pending",
      })

if (error) {
        console.error("Error inserting question:", error)
        alert("حدث خطأ أثناء إرسال السؤال. يرجى المحاولة مرة أخرى.")
        return
      }

setQuestionSubmitted(true)
      setTimeout(() => {
        setParentName("")
        setParentEmail("")
        setQuestionCategory("")
        setQuestion("")
        setShowQuestionForm(false)
        setQuestionSubmitted(false)
      }, 3000)
    } catch (error) {
      console.error("Error:", error)
      alert("حدث خطأ أثناء إرسال السؤال.")
    }
  }

if (loading) {
    return (
      <PageLayout
        title="الأسئلة والأجوبة"
        subtitle="إجابات لأكثر الأسئلة شيوعاً"
        navItems={navItems}
        showSwitcher={true}
        currentSection="parents"
      >
        <div className="flex items-center justify-center min-h-[400px]">
          <p className="text-muted-foreground">جاري التحميل...</p>
        </div>
      </PageLayout>
    )
  }

return (
    <PageLayout
      title="الأسئلة والأجوبة"
      subtitle="إجابات لأكثر الأسئلة شيوعاً"
      navItems={navItems}
      showSwitcher={true}
      currentSection="parents"
    >
      <div className="max-w-4xl mx-auto space-y-6">
        {/* بطاقة البحث */}
        <Card className="p-6 border-none shadow-lg rounded-3xl bg-gradient-to-br from-card to-muted/20">
          <div className="flex items-center gap-3 mb-4">
            <div className="h-12 w-12 rounded-2xl bg-gradient-to-br from-chart-2 to-primary flex items-center justify-center">
              <HelpCircle className="h-6 w-6 text-white" />
            </div>
            <h3 className="text-xl font-bold text-foreground">ابحث عن إجابة</h3>
          </div>
          <Input
            type="text"
            placeholder="اكتب سؤالك أو كلمة مفتاحية..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="h-12 text-base rounded-2xl border-2 focus:border-primary"
          />
        </Card>

{/* الأسئلة حسب التصنيف */}
        {filteredFaqs.map((category, catIndex) => (
          <Card key={catIndex} className="p-6 border-none shadow-lg rounded-3xl">
            <h3 className="text-lg font-bold text-primary mb-4">{category.category}</h3>
            <div className="space-y-3">
              {category.questions.map((item, qIndex) => {
                const itemId = `${catIndex}-${qIndex}`
                const isOpen = openIndex === itemId

return (
                  <div key={qIndex} className="border-b border-border/50 pb-3 last:border-0">
                    <button
                      onClick={() => setOpenIndex(isOpen ? null : itemId)}
                      className="w-full text-right flex items-start justify-between gap-3 group"
                    >
                      <span className="font-semibold text-foreground group-hover:text-primary transition-colors">
                        {item.q}
                      </span>
                      <ChevronDown
                        className={`h-5 w-5 text-muted-foreground flex-shrink-0 transition-transform ${isOpen ? "rotate-180" : ""}`}
                      />
                    </button>
                    {isOpen && <p className="mt-3 text-muted-foreground leading-relaxed pr-4">{item.a}</p>}
                  </div>
                )
              })}
            </div>
          </Card>
        ))}

{filteredFaqs.length === 0 && (
          <Card className="p-12 border-none shadow-lg rounded-3xl text-center">
            <HelpCircle className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
            <p className="text-muted-foreground">لم نجد نتائج لبحثك. جرب كلمات مفتاحية أخرى.</p>
          </Card>
        )}

{/* بطاقة طرح سؤال جديد */}
        <Card className="p-6 border-none shadow-lg rounded-3xl bg-gradient-to-br from-primary/10 to-secondary/10">
          {questionSubmitted ? (
            <div className="text-center py-6">
              <HelpCircle className="h-12 w-12 text-primary mx-auto mb-3" />
              <h3 className="font-bold text-foreground mb-2">تم إرسال سؤالك بنجاح!</h3>
              <p className="text-sm text-muted-foreground">سيتم الإجابة على سؤالك من قبل المختص الاجتماعي قريباً.</p>
            </div>
          ) : showQuestionForm ? (
            <form onSubmit={handleQuestionSubmit} className="space-y-4">
              <h3 className="font-bold text-foreground mb-4">اطرح سؤالك</h3>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="parentName">الاسم</Label>
                  <Input
                    id="parentName"
                    value={parentName}
                    onChange={(e) => setParentName(e.target.value)}
                    placeholder="اسمك الكامل"
                    required
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="parentEmail">البريد الإلكتروني (اختياري)</Label>
                  <Input
                    id="parentEmail"
                    type="email"
                    value={parentEmail}
                    onChange={(e) => setParentEmail(e.target.value)}
                    placeholder="example@email.com"
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="questionCategory">التصنيف</Label>
                <Input
                  id="questionCategory"
                  value={questionCategory}
                  onChange={(e) => setQuestionCategory(e.target.value)}
                  placeholder="مثال: التواصل، السلوك، الأنشطة"
                  required
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="question">السؤال</Label>
                <Textarea
                  id="question"
                  value={question}
                  onChange={(e) => setQuestion(e.target.value)}
                  placeholder="اكتب سؤالك هنا..."
                  className="min-h-[100px]"
                  required
                />
              </div>

<div className="flex gap-3">
                <Button type="submit" className="flex-1 gap-2">
                  <Send className="h-4 w-4" />
                  إرسال السؤال
                </Button>
                <Button type="button" variant="outline" onClick={() => setShowQuestionForm(false)}>
                  إلغاء
                </Button>
              </div>
            </form>
          ) : (
            <>
              <h3 className="font-bold text-foreground mb-2">لم تجد إجابتك؟</h3>
              <p className="text-sm text-muted-foreground mb-4">
                اطرح سؤالك وسيتم الإجابة عليه من قبل المختص الاجتماعي.
              </p>
              <Button onClick={() => setShowQuestionForm(true)} className="gap-2">
                <HelpCircle className="h-4 w-4" />
                طرح سؤال جديد
              </Button>
            </>
          )}
        </Card>
      </div>
    </PageLayout>
  )
}
[V0_FILE]sql:file="scripts/013_create_faqs_table.sql" isEdit="true" isMerged="true"
-- إنشاء جدول الأسئلة الشائعة (FAQs)
CREATE TABLE IF NOT EXISTS faqs (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  category TEXT NOT NULL,
  question TEXT NOT NULL,
  answer TEXT NOT NULL,
  display_order INTEGER DEFAULT 0,
  is_visible BOOLEAN DEFAULT true,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- إضافة index للبحث السريع
CREATE INDEX IF NOT EXISTS idx_faqs_category ON faqs(category);
CREATE INDEX IF NOT EXISTS idx_faqs_display_order ON faqs(display_order);
CREATE INDEX IF NOT EXISTS idx_faqs_is_visible ON faqs(is_visible);

-- تفعيل RLS
ALTER TABLE faqs ENABLE ROW LEVEL SECURITY;

-- سياسات RLS - السماح للجميع بقراءة الأسئلة المرئية
DROP POLICY IF EXISTS "Allow public read visible faqs" ON faqs;
CREATE POLICY "Allow public read visible faqs" ON faqs
  FOR SELECT
  USING (is_visible = true);

-- السماح لأي شخص بإدارة FAQs (يمكن تقييدها لاحقاً)
DROP POLICY IF EXISTS "Allow all operations on faqs" ON faqs;
CREATE POLICY "Allow all operations on faqs" ON faqs
  FOR ALL
  USING (true)
  WITH CHECK (true);

-- حذف جميع الأسئلة الافتراضية - الجدول فارغ جاهز لإضافة الأسئلة من لوحة الأدمن
[V0_FILE]typescriptreact:file="app/parents/booking/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { PageLayout } from "@/components/page-layout"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Home, Bell, MessageCircle, FileText, UserCircle, Calendar, Clock, CheckCircle2 } from "lucide-react"
import { createBrowserClient } from "@/lib/supabase/client"

const navItems = [
  { href: "/parents", icon: Home, label: "الرئيسية" },
  { href: "/parents/announcements", icon: Bell, label: "الإعلانات" },
  { href: "/parents/communication", icon: MessageCircle, label: "التواصل" },
  { href: "/parents/documents", icon: FileText, label: "الوثائق" },
  { href: "/parents/profile", icon: UserCircle, label: "الملف الشخصي" },
]

const availableTimes = [
  "8:00 - 9:00",
  "9:00 - 10:00",
  "10:00 - 11:00",
  "11:00 - 12:00",
  "14:00 - 15:00",
  "15:00 - 16:00",
  "16:00 - 17:00",
]

export default function BookingPage() {
  const [parentName, setParentName] = useState("")
  const [studentName, setStudentName] = useState("")
  const [phone, setPhone] = useState("")
  const [selectedDate, setSelectedDate] = useState("")
  const [selectedTime, setSelectedTime] = useState("")
  const [reason, setReason] = useState("")
  const [studentClass, setStudentClass] = useState("")
  const [submitted, setSubmitted] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

try {
      const supabase = createBrowserClient()

const { error } = await supabase.from("parent_bookings").insert({
        parent_name: parentName,
        parent_phone: phone,
        student_name: studentName,
        student_class: studentClass || "غير محدد",
        booking_type: "consultation",
        preferred_date: selectedDate,
        preferred_time: selectedTime,
        notes: reason || null,
        status: "pending",
      })

if (error) {
        console.error("[v0] Error inserting booking:", error)
        alert(`حدث خطأ أثناء الحجز: ${error.message}`)
        return
      }

setSubmitted(true)
      setTimeout(() => {
        setParentName("")
        setStudentName("")
        setPhone("")
        setStudentClass("")
        setSelectedDate("")
        setSelectedTime("")
        setReason("")
        setSubmitted(false)
      }, 4000)
    } catch (error) {
      console.error("[v0] Error:", error)
      alert("حدث خطأ أثناء الحجز.")
    }
  }

const getFormattedDate = () => {
    if (!selectedDate) return ""
    const date = new Date(selectedDate)
    const days = ["الأحد", "الإثنين", "الثلاثاء", "الأربعاء", "الخميس", "الجمعة", "السبت"]
    return `${days[date.getDay()]} ${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`
  }

return (
    <PageLayout
      title="حجز جلسة استشارية"
      subtitle="احجز موعد مع المختص الاجتماعي"
      navItems={navItems}
      showSwitcher={true}
      currentSection="parents"
    >
      <div className="max-w-4xl mx-auto">
        {submitted ? (
          <Card className="p-12 border-none shadow-lg rounded-3xl text-center">
            <div className="h-20 w-20 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-6">
              <CheckCircle2 className="h-10 w-10 text-green-600" />
            </div>
            <h3 className="text-2xl font-bold text-foreground mb-3">تم حجز الموعد بنجاح</h3>
            <p className="text-muted-foreground mb-2">
              موعدكم: <span className="font-semibold text-foreground">{getFormattedDate()}</span> من{" "}
              <span className="font-semibold text-foreground">{selectedTime}</span>
            </p>
            <p className="text-sm text-muted-foreground">سيتم إرسال تذكير قبل الموعد بيوم واحد</p>
          </Card>
        ) : (
          <form onSubmit={handleSubmit} className="space-y-6">
            <Card className="p-6 md:p-8 border-none shadow-lg rounded-3xl">
              <div className="flex items-center gap-3 mb-6">
                <div className="h-12 w-12 rounded-2xl bg-gradient-to-br from-chart-5 to-secondary flex items-center justify-center">
                  <Calendar className="h-6 w-6 text-white" />
                </div>
                <div>
                  <h3 className="text-xl font-bold text-foreground">معلومات الحجز</h3>
                  <p className="text-sm text-muted-foreground">املأ البيانات المطلوبة</p>
                </div>
              </div>

<div className="space-y-5">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                  <div className="space-y-2">
                    <Label htmlFor="parentName">اسم ولي الأمر</Label>
                    <Input
                      id="parentName"
                      value={parentName}
                      onChange={(e) => setParentName(e.target.value)}
                      placeholder="أدخل اسمك الكامل"
                      className="h-11 rounded-2xl"
                      required
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="studentName">اسم التلميذ/ة</Label>
                    <Input
                      id="studentName"
                      value={studentName}
                      onChange={(e) => setStudentName(e.target.value)}
                      placeholder="اسم ابنكم/ابنتكم"
                      className="h-11 rounded-2xl"
                      required
                    />
                  </div>
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                  <div className="space-y-2">
                    <Label htmlFor="phone">رقم الهاتف</Label>
                    <Input
                      id="phone"
                      type="tel"
                      value={phone}
                      onChange={(e) => setPhone(e.target.value)}
                      placeholder="مثال: 0612345678"
                      className="h-11 rounded-2xl"
                      required
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="studentClass">المستوى</Label>
                    <Input
                      id="studentClass"
                      value={studentClass}
                      onChange={(e) => setStudentClass(e.target.value)}
                      placeholder="مثال: المستوى الثالث"
                      className="h-11 rounded-2xl"
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="reason">سبب الاستشارة (اختياري)</Label>
                  <Textarea
                    id="reason"
                    value={reason}
                    onChange={(e) => setReason(e.target.value)}
                    placeholder="يمكنكم ذكر الموضوع الذي ترغبون في مناقشته..."
                    className="min-h-[100px] resize-none rounded-2xl"
                  />
                </div>
              </div>
            </Card>

<Card className="p-6 md:p-8 border-none shadow-lg rounded-3xl">
              <div className="flex items-center gap-3 mb-6">
                <div className="h-12 w-12 rounded-2xl bg-gradient-to-br from-primary to-chart-3 flex items-center justify-center">
                  <Clock className="h-6 w-6 text-white" />
                </div>
                <div>
                  <h3 className="text-xl font-bold text-foreground">اختر الموعد المناسب</h3>
                  <p className="text-sm text-muted-foreground">حدد التاريخ والوقت</p>
                </div>
              </div>

<div className="space-y-5">
                <div className="space-y-2">
                  <Label htmlFor="date">التاريخ المفضل</Label>
                  <Input
                    id="date"
                    type="date"
                    value={selectedDate}
                    onChange={(e) => setSelectedDate(e.target.value)}
                    min={new Date().toISOString().split("T")[0]}
                    className="h-11 rounded-2xl"
                    required
                  />
                </div>

<div className="space-y-3">
                  <Label>الوقت المفضل</Label>
                  <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
                    {availableTimes.map((slot, index) => {
                      const isSelected = selectedTime === slot
                      return (
                        <button
                          key={index}
                          type="button"
                          onClick={() => setSelectedTime(slot)}
                          className={`p-3 rounded-2xl border-2 transition-all text-sm font-medium ${
                            isSelected
                              ? "bg-primary text-white border-primary"
                              : "bg-muted/20 text-foreground border-border hover:border-primary/50"
                          }`}
                        >
                          {slot}
                        </button>
                      )
                    })}
                  </div>
                </div>
              </div>
            </Card>

<Button
              type="submit"
              disabled={!selectedDate || !selectedTime}
              className="w-full bg-gradient-to-r from-chart-5 to-secondary hover:opacity-90 text-white h-12 text-base rounded-2xl font-semibold"
            >
              تأكيد الحجز
            </Button>
          </form>
        )}
      </div>
    </PageLayout>
  )
}
[V0_FILE]typescriptreact:file="app/admin/reports/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowRight, FileText, Download } from "lucide-react"
import Link from "next/link"
import { createBrowserClient } from "@/lib/supabase/client"
import jsPDF from "jspdf"
import { formatArabicDate } from "@/lib/utils"

export default function ReportsPage() {
  const router = useRouter()
  const [isGenerating, setIsGenerating] = useState<string | null>(null)
  const [stats, setStats] = useState({
    messages: 0,
    bookings: 0,
    questions: 0,
    points: 0,
    clubRegistrations: 0,
  })

useEffect(() => {
    const isLoggedIn = localStorage.getItem("admin_logged_in")
    if (!isLoggedIn) {
      router.push("/admin/login")
    }
    fetchStats()
  }, [router])

const fetchStats = async () => {
    try {
      const supabase = createBrowserClient()

const [messages, bookings, questions, points, clubRegistrations] = await Promise.all([
        supabase.from("student_messages").select("*", { count: "exact", head: true }),
        supabase.from("parent_bookings").select("*", { count: "exact", head: true }),
        supabase.from("parent_questions").select("*", { count: "exact", head: true }),
        supabase.from("student_points").select("*", { count: "exact", head: true }),
        supabase.from("club_registrations").select("*", { count: "exact", head: true }),
      ])

setStats({
        messages: messages.count || 0,
        bookings: bookings.count || 0,
        questions: questions.count || 0,
        points: points.count || 0,
        clubRegistrations: clubRegistrations.count || 0,
      })
    } catch (error) {
      console.error("Error fetching stats:", error)
    }
  }

const generateMessagesReport = async () => {
    setIsGenerating("messages")
    try {
      const supabase = createBrowserClient()
      const { data, error } = await supabase
        .from("student_messages")
        .select("*")
        .order("created_at", { ascending: false })

if (error) throw error

const doc = new jsPDF()
      doc.text("تقرير الرسائل", 105, 20, { align: "center" })
      doc.text(`إجمالي الرسائل: ${data?.length || 0}`, 20, 40)
      doc.text(`تاريخ التقرير: ${formatArabicDate(new Date())}`, 20, 50)

let yPos = 70
      data?.slice(0, 20).forEach((msg: any, index: number) => {
        if (yPos > 270) {
          doc.addPage()
          yPos = 20
        }
        doc.text(`${index + 1}. ${msg.student_name} - ${msg.subject}`, 20, yPos)
        yPos += 10
      })

doc.save(`messages_report_${new Date().toISOString().split("T")[0]}.pdf`)
    } catch (error) {
      console.error("Error generating report:", error)
      alert("حدث خطأ أثناء إنشاء التقرير")
    } finally {
      setIsGenerating(null)
    }
  }

const generateBookingsReport = async () => {
    setIsGenerating("bookings")
    try {
      const supabase = createBrowserClient()
      const { data, error } = await supabase
        .from("parent_bookings")
        .select("*")
        .order("created_at", { ascending: false })

if (error) throw error

const doc = new jsPDF()
      doc.text("تقرير الحجوزات", 105, 20, { align: "center" })
      doc.text(`إجمالي الحجوزات: ${data?.length || 0}`, 20, 40)
      doc.text(`تاريخ التقرير: ${formatArabicDate(new Date())}`, 20, 50)

let yPos = 70
      data?.slice(0, 20).forEach((booking: any, index: number) => {
        if (yPos > 270) {
          doc.addPage()
          yPos = 20
        }
        doc.text(`${index + 1}. ${booking.parent_name} - ${booking.booking_type}`, 20, yPos)
        yPos += 10
      })

doc.save(`bookings_report_${new Date().toISOString().split("T")[0]}.pdf`)
    } catch (error) {
      console.error("Error generating report:", error)
      alert("حدث خطأ أثناء إنشاء التقرير")
    } finally {
      setIsGenerating(null)
    }
  }

const generatePointsReport = async () => {
    setIsGenerating("points")
    try {
      const supabase = createBrowserClient()
      const { data, error } = await supabase.from("student_points").select("*").order("points", { ascending: false })

if (error) throw error

const doc = new jsPDF()
      doc.text("تقرير النقاط", 105, 20, { align: "center" })
      doc.text(`عدد التلاميذ: ${data?.length || 0}`, 20, 40)
      doc.text(`تاريخ التقرير: ${formatArabicDate(new Date())}`, 20, 50)

let yPos = 70
      data?.slice(0, 30).forEach((student: any, index: number) => {
        if (yPos > 270) {
          doc.addPage()
          yPos = 20
        }
        doc.text(`${index + 1}. ${student.student_name} - ${student.points} نقطة`, 20, yPos)
        yPos += 10
      })

doc.save(`points_report_${new Date().toISOString().split("T")[0]}.pdf`)
    } catch (error) {
      console.error("Error generating report:", error)
      alert("حدث خطأ أثناء إنشاء التقرير")
    } finally {
      setIsGenerating(null)
    }
  }

const generateMonthlyReport = async () => {
    setIsGenerating("monthly")
    try {
      const doc = new jsPDF()
      doc.text("التقرير الشهري الشامل", 105, 20, { align: "center" })
      doc.text(`تاريخ التقرير: ${formatArabicDate(new Date())}`, 20, 40)

doc.text("الإحصائيات:", 20, 60)
      doc.text(`رسائل التلاميذ: ${stats.messages}`, 30, 75)
      doc.text(`حجوزات الأولياء: ${stats.bookings}`, 30, 85)
      doc.text(`أسئلة الأولياء: ${stats.questions}`, 30, 95)
      doc.text(`التلاميذ المسجلين في النقاط: ${stats.points}`, 30, 105)
      doc.text(`طلبات الانخراط في النادي: ${stats.clubRegistrations}`, 30, 115)

doc.save(`monthly_report_${new Date().toISOString().split("T")[0]}.pdf`)
    } catch (error) {
      console.error("Error generating report:", error)
      alert("حدث خطأ أثناء إنشاء التقرير")
    } finally {
      setIsGenerating(null)
    }
  }

<div className="flex items-center gap-3">
            <div className="h-12 w-12 rounded-2xl bg-gradient-to-br from-pink-500 to-pink-600 flex items-center justify-center">
              <FileText className="h-6 w-6 text-white" />
            </div>
            <div>
              <h1 className="text-3xl font-bold">التقارير</h1>
              <p className="text-muted-foreground">تصدير وعرض التقارير الإحصائية</p>
            </div>
          </div>
        </div>

<div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
          <Card className="p-4 text-center">
            <div className="text-2xl font-bold text-primary">{stats.messages}</div>
            <div className="text-xs text-muted-foreground">رسالة</div>
          </Card>
          <Card className="p-4 text-center">
            <div className="text-2xl font-bold text-primary">{stats.bookings}</div>
            <div className="text-xs text-muted-foreground">حجز</div>
          </Card>
          <Card className="p-4 text-center">
            <div className="text-2xl font-bold text-primary">{stats.questions}</div>
            <div className="text-xs text-muted-foreground">سؤال</div>
          </Card>
          <Card className="p-4 text-center">
            <div className="text-2xl font-bold text-primary">{stats.points}</div>
            <div className="text-xs text-muted-foreground">تلميذ</div>
          </Card>
          <Card className="p-4 text-center">
            <div className="text-2xl font-bold text-primary">{stats.clubRegistrations}</div>
            <div className="text-xs text-muted-foreground">طلب انخراط</div>
          </Card>
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <Card className="p-6 hover:shadow-lg transition-shadow">
            <h3 className="font-bold text-lg mb-2">تقرير الرسائل</h3>
            <p className="text-muted-foreground mb-4">تقرير شامل لجميع الرسائل والبلاغات</p>
            <Button onClick={generateMessagesReport} disabled={isGenerating === "messages"} className="w-full gap-2">
              <Download className="h-4 w-4" />
              {isGenerating === "messages" ? "جاري الإنشاء..." : "تصدير PDF"}
            </Button>
          </Card>

<Card className="p-6 hover:shadow-lg transition-shadow">
            <h3 className="font-bold text-lg mb-2">تقرير الحجوزات</h3>
            <p className="text-muted-foreground mb-4">تقرير بجميع حجوزات الأولياء</p>
            <Button onClick={generateBookingsReport} disabled={isGenerating === "bookings"} className="w-full gap-2">
              <Download className="h-4 w-4" />
              {isGenerating === "bookings" ? "جاري الإنشاء..." : "تصدير PDF"}
            </Button>
          </Card>

<Card className="p-6 hover:shadow-lg transition-shadow">
            <h3 className="font-bold text-lg mb-2">تقرير النقاط</h3>
            <p className="text-muted-foreground mb-4">تقرير إنجازات التلاميذ ونقاطهم</p>
            <Button onClick={generatePointsReport} disabled={isGenerating === "points"} className="w-full gap-2">
              <Download className="h-4 w-4" />
              {isGenerating === "points" ? "جاري الإنشاء..." : "تصدير PDF"}
            </Button>
          </Card>

<Card className="p-6 hover:shadow-lg transition-shadow">
            <h3 className="font-bold text-lg mb-2">تقرير شهري شامل</h3>
            <p className="text-muted-foreground mb-4">تقرير شامل بجميع الإحصائيات</p>
            <Button onClick={generateMonthlyReport} disabled={isGenerating === "monthly"} className="w-full gap-2">
              <Download className="h-4 w-4" />
              {isGenerating === "monthly" ? "جاري الإنشاء..." : "تصدير PDF"}
            </Button>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/014_create_parent_messages.sql" isMerged="true"
-- إنشاء جدول رسائل أولياء الأمور
CREATE TABLE IF NOT EXISTS parent_messages (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  parent_name TEXT NOT NULL,
  parent_email TEXT,
  parent_phone TEXT,
  message_type TEXT NOT NULL, -- communication, feedback
  subject TEXT NOT NULL,
  message TEXT NOT NULL,
  status TEXT DEFAULT 'pending', -- pending, in_progress, resolved
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- إنشاء index للبحث السريع
CREATE INDEX IF NOT EXISTS idx_parent_messages_created_at ON parent_messages(created_at DESC);
CREATE INDEX IF NOT EXISTS idx_parent_messages_status ON parent_messages(status);
CREATE INDEX IF NOT EXISTS idx_parent_messages_type ON parent_messages(message_type);

-- تفعيل Row Level Security
ALTER TABLE parent_messages ENABLE ROW LEVEL SECURITY;

-- سياسة للسماح بقراءة جميع الرسائل
CREATE POLICY IF NOT EXISTS allow_read_all_parent_messages ON parent_messages
  FOR SELECT USING (true);

-- سياسة للسماح بإضافة رسائل جديدة
CREATE POLICY IF NOT EXISTS allow_insert_parent_messages ON parent_messages
  FOR INSERT WITH CHECK (true);

-- سياسة للسماح بتحديث جميع الرسائل
CREATE POLICY IF NOT EXISTS allow_update_all_parent_messages ON parent_messages
  FOR UPDATE USING (true);

-- سياسة للسماح بحذف جميع الرسائل
CREATE POLICY IF NOT EXISTS allow_delete_all_parent_messages ON parent_messages
  FOR DELETE USING (true);
[V0_FILE]typescriptreact:file="app/admin/parent-messages/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowRight, MessageSquare, Eye, Mail } from "lucide-react"
import { createBrowserClient } from "@/lib/supabase/client"
import { formatArabicDateTime } from "@/lib/utils"
import Link from "next/link"

interface ParentMessage {
  id: string
  parent_name: string
  parent_email: string | null
  parent_phone: string | null
  message_type: string
  subject: string
  message: string
  status: string
  created_at: string
}

export default function ParentMessagesPage() {
  const router = useRouter()
  const [messages, setMessages] = useState<ParentMessage[]>([])
  const [loading, setLoading] = useState(true)
  const [selectedType, setSelectedType] = useState<string>("all")

const fetchMessages = async () => {
      if (!checkAuth()) return

try {
        const supabase = createBrowserClient()

let query = supabase.from("parent_messages").select("*").order("created_at", { ascending: false })

if (selectedType !== "all") {
          query = query.eq("message_type", selectedType)
        }

const { data, error } = await query

if (error) {
          console.error("[v0] Error fetching parent messages:", error)
          return
        }

setMessages(data || [])
      } catch (error) {
        console.error("[v0] Error:", error)
      } finally {
        setLoading(false)
      }
    }

fetchMessages()
  }, [router, selectedType])

const labels: Record<string, string> = {
      pending: "قيد الانتظار",
      in_progress: "قيد المعالجة",
      resolved: "تم الحل",
    }

return <Badge variant={variants[status] || "default"}>{labels[status] || status}</Badge>
  }

const getTypeBadge = (type: string) => {
    const labels: Record<string, string> = {
      communication: "تواصل",
      feedback: "ملاحظات",
    }

return labels[type] || type
  }

<div className="flex items-center gap-3 mb-6">
            <div className="h-12 w-12 rounded-2xl bg-gradient-to-br from-secondary to-chart-4 flex items-center justify-center">
              <Mail className="h-6 w-6 text-white" />
            </div>
            <div>
              <h1 className="text-3xl font-bold">رسائل أولياء الأمور</h1>
              <p className="text-muted-foreground">إدارة جميع الرسائل والملاحظات</p>
            </div>
          </div>

<div className="flex gap-2">
            <Button variant={selectedType === "all" ? "default" : "outline"} onClick={() => setSelectedType("all")}>
              الكل ({messages.length})
            </Button>
            <Button
              variant={selectedType === "communication" ? "default" : "outline"}
              onClick={() => setSelectedType("communication")}
            >
              التواصل
            </Button>
            <Button
              variant={selectedType === "feedback" ? "default" : "outline"}
              onClick={() => setSelectedType("feedback")}
            >
              الملاحظات
            </Button>
          </div>
        </div>

<div className="space-y-4">
          {messages.map((msg) => (
            <Card key={msg.id} className="p-6 hover:shadow-lg transition-shadow">
              <div className="flex items-start justify-between mb-4">
                <div className="flex-1">
                  <div className="flex items-center gap-3 mb-2">
                    <h3 className="font-bold text-lg">{msg.parent_name}</h3>
                    <Badge>{getTypeBadge(msg.message_type)}</Badge>
                    {getStatusBadge(msg.status)}
                  </div>
                  {(msg.parent_email || msg.parent_phone) && (
                    <div className="text-sm text-muted-foreground mb-2">
                      {msg.parent_email && <span>البريد: {msg.parent_email}</span>}
                      {msg.parent_email && msg.parent_phone && <span> | </span>}
                      {msg.parent_phone && <span>الهاتف: {msg.parent_phone}</span>}
                    </div>
                  )}
                  <p className="text-sm font-semibold text-foreground mb-2">{msg.subject}</p>
                  <p className="text-muted-foreground line-clamp-2">{msg.message}</p>
                </div>
                <Button size="sm" variant="outline" className="gap-2 bg-transparent">
                  <Eye className="h-4 w-4" />
                  عرض
                </Button>
              </div>
              <div className="text-xs text-muted-foreground">{formatArabicDateTime(msg.created_at)}</div>
            </Card>
          ))}

{messages.length === 0 && (
            <Card className="p-12 text-center">
              <MessageSquare className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
              <p className="text-muted-foreground">لا توجد رسائل</p>
            </Card>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/parent-messages/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="text-center">
        <div className="animate-spin h-12 w-12 border-4 border-primary border-t-transparent rounded-full mx-auto mb-4"></div>
        <p className="text-muted-foreground">جاري التحميل...</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/bullying-reports/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { createBrowserClient } from "@/lib/supabase/client"
import { Shield, AlertTriangle, CheckCircle, Clock, ArrowRight } from "lucide-react"
import Link from "next/link"
import { formatArabicDate } from "@/lib/utils"

interface BullyingReport {
  id: string
  student_name: string | null
  student_class: string | null
  subject: string
  message: string
  status: string
  is_anonymous: boolean
  created_at: string
  updated_at: string
}

export default function BullyingReportsPage() {
  const router = useRouter()
  const [reports, setReports] = useState<BullyingReport[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [filter, setFilter] = useState<"all" | "pending" | "in_progress" | "resolved">("all")

useEffect(() => {
    const isLoggedIn = localStorage.getItem("admin_logged_in")
    if (!isLoggedIn || isLoggedIn !== "true") {
      router.push("/admin/login")
      return
    }

fetchReports()
  }, [router])

const fetchReports = async () => {
    try {
      const supabase = createBrowserClient()

const { data, error } = await supabase
        .from("student_messages")
        .select("*")
        .eq("message_type", "bullying")
        .order("created_at", { ascending: false })

if (error) {
        console.error("[v0] Error fetching bullying reports:", error)
        return
      }

setReports(data || [])
    } catch (error) {
      console.error("[v0] Error:", error)
    } finally {
      setIsLoading(false)
    }
  }

const updateStatus = async (id: string, newStatus: string) => {
    try {
      const supabase = createBrowserClient()

const { error } = await supabase
        .from("student_messages")
        .update({ status: newStatus, updated_at: new Date().toISOString() })
        .eq("id", id)

if (error) {
        console.error("[v0] Error updating status:", error)
        alert("حدث خطأ أثناء تحديث الحالة")
        return
      }

fetchReports()
    } catch (error) {
      console.error("[v0] Error:", error)
    }
  }

const deleteReport = async (id: string) => {
    if (!confirm("هل أنت متأكد من حذف هذا البلاغ؟")) return

try {
      const supabase = createBrowserClient()

const { error } = await supabase.from("student_messages").delete().eq("id", id)

if (error) {
        console.error("[v0] Error deleting report:", error)
        alert("حدث خطأ أثناء الحذف")
        return
      }

fetchReports()
    } catch (error) {
      console.error("[v0] Error:", error)
    }
  }

const filteredReports = reports.filter((report) => {
    if (filter === "all") return true
    return report.status === filter
  })

const getStatusBadge = (status: string) => {
    switch (status) {
      case "pending":
        return (
          <Badge variant="secondary" className="gap-1">
            <Clock className="h-3 w-3" />
            قيد الانتظار
          </Badge>
        )
      case "in_progress":
        return (
          <Badge variant="default" className="gap-1 bg-blue-500">
            <AlertTriangle className="h-3 w-3" />
            قيد المعالجة
          </Badge>
        )
      case "resolved":
        return (
          <Badge variant="default" className="gap-1 bg-green-500">
            <CheckCircle className="h-3 w-3" />
            تم الحل
          </Badge>
        )
      default:
        return <Badge variant="secondary">{status}</Badge>
    }
  }

const stats = {
    total: reports.length,
    pending: reports.filter((r) => r.status === "pending").length,
    in_progress: reports.filter((r) => r.status === "in_progress").length,
    resolved: reports.filter((r) => r.status === "resolved").length,
  }

if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-primary"></div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-background via-muted to-background p-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-4">
            <div className="h-12 w-12 rounded-2xl bg-gradient-to-br from-red-500 to-red-600 flex items-center justify-center">
              <Shield className="h-6 w-6 text-white" />
            </div>
            <div>
              <h1 className="text-3xl font-bold text-foreground">إبلاغات التنمر</h1>
              <p className="text-muted-foreground">إدارة ومتابعة إبلاغات التنمر من التلاميذ</p>
            </div>
          </div>
          <Link href="/admin/dashboard">
            <Button variant="outline" className="gap-2 bg-transparent">
              <ArrowRight className="h-4 w-4" />
              العودة للوحة التحكم
            </Button>
          </Link>
        </div>

{/* Stats */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
          <Card className="p-4">
            <div className="text-sm text-muted-foreground mb-1">إجمالي الإبلاغات</div>
            <div className="text-3xl font-bold text-foreground">{stats.total}</div>
          </Card>
          <Card className="p-4 cursor-pointer hover:shadow-lg transition-shadow" onClick={() => setFilter("pending")}>
            <div className="text-sm text-muted-foreground mb-1">قيد الانتظار</div>
            <div className="text-3xl font-bold text-orange-500">{stats.pending}</div>
          </Card>
          <Card
            className="p-4 cursor-pointer hover:shadow-lg transition-shadow"
            onClick={() => setFilter("in_progress")}
          >
            <div className="text-sm text-muted-foreground mb-1">قيد المعالجة</div>
            <div className="text-3xl font-bold text-blue-500">{stats.in_progress}</div>
          </Card>
          <Card className="p-4 cursor-pointer hover:shadow-lg transition-shadow" onClick={() => setFilter("resolved")}>
            <div className="text-sm text-muted-foreground mb-1">تم الحل</div>
            <div className="text-3xl font-bold text-green-500">{stats.resolved}</div>
          </Card>
        </div>

{/* Filters */}
        <div className="flex gap-2 mb-6">
          <Button variant={filter === "all" ? "default" : "outline"} onClick={() => setFilter("all")}>
            الكل ({stats.total})
          </Button>
          <Button variant={filter === "pending" ? "default" : "outline"} onClick={() => setFilter("pending")}>
            قيد الانتظار ({stats.pending})
          </Button>
          <Button variant={filter === "in_progress" ? "default" : "outline"} onClick={() => setFilter("in_progress")}>
            قيد المعالجة ({stats.in_progress})
          </Button>
          <Button variant={filter === "resolved" ? "default" : "outline"} onClick={() => setFilter("resolved")}>
            تم الحل ({stats.resolved})
          </Button>
        </div>

{/* Reports List */}
        {filteredReports.length === 0 ? (
          <Card className="p-12 text-center">
            <Shield className="h-16 w-16 text-muted-foreground mx-auto mb-4 opacity-50" />
            <h3 className="text-xl font-bold text-foreground mb-2">لا توجد إبلاغات</h3>
            <p className="text-muted-foreground">
              {filter === "all"
                ? "لم يتم استلام أي إبلاغات بعد"
                : `لا توجد إبلاغات ${filter === "pending" ? "قيد الانتظار" : filter === "in_progress" ? "قيد المعالجة" : "محلولة"}`}
            </p>
          </Card>
        ) : (
          <div className="space-y-4">
            {filteredReports.map((report) => (
              <Card key={report.id} className="p-6">
                <div className="flex items-start justify-between mb-4">
                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-2">
                      <h3 className="text-xl font-bold text-foreground">{report.subject}</h3>
                      {getStatusBadge(report.status)}
                      {report.is_anonymous && (
                        <Badge variant="outline" className="gap-1">
                          <Shield className="h-3 w-3" />
                          بلاغ مجهول
                        </Badge>
                      )}
                    </div>
                    {!report.is_anonymous && report.student_name && (
                      <div className="text-sm text-muted-foreground mb-2">
                        <span className="font-semibold">الاسم:</span> {report.student_name}
                        {report.student_class && <span> - {report.student_class}</span>}
                      </div>
                    )}
                    <div className="text-sm text-muted-foreground mb-3">
                      <span className="font-semibold">تاريخ الإبلاغ:</span> {formatArabicDate(report.created_at)}
                    </div>
                  </div>
                </div>

<div className="bg-muted/50 p-4 rounded-xl mb-4">
                  <p className="text-foreground leading-relaxed whitespace-pre-wrap">{report.message}</p>
                </div>

<div className="flex gap-2">
                  {report.status === "pending" && (
                    <Button
                      onClick={() => updateStatus(report.id, "in_progress")}
                      variant="default"
                      className="bg-blue-500 hover:bg-blue-600"
                    >
                      بدء المعالجة
                    </Button>
                  )}
                  {report.status === "in_progress" && (
                    <Button
                      onClick={() => updateStatus(report.id, "resolved")}
                      variant="default"
                      className="bg-green-500 hover:bg-green-600"
                    >
                      تم الحل
                    </Button>
                  )}
                  {report.status === "resolved" && (
                    <Button onClick={() => updateStatus(report.id, "in_progress")} variant="outline">
                      إعادة فتح
                    </Button>
                  )}
                  <Button onClick={() => deleteReport(report.id)} variant="destructive">
                    حذف
                  </Button>
                </div>
              </Card>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/bullying-reports/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-muted to-background">
      <div className="text-center">
        <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-primary mx-auto mb-4"></div>
        <p className="text-lg text-muted-foreground">جاري تحميل الإبلاغات...</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/parents/communication/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { PageLayout } from "@/components/page-layout"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Home, Bell, MessageCircle, FileText, UserCircle, Send, Mail, Phone } from "lucide-react"
import { useState } from "react"
import { createBrowserClient } from "@/lib/supabase/client"

const navItems = [
  { href: "/parents", icon: Home, label: "الرئيسية" },
  { href: "/parents/announcements", icon: Bell, label: "الإعلانات" },
  { href: "/parents/communication", icon: MessageCircle, label: "التواصل", active: true },
  { href: "/parents/documents", icon: FileText, label: "الوثائق" },
  { href: "/parents/profile", icon: UserCircle, label: "الملف الشخصي" },
]

export default function CommunicationPage() {
  const [parentName, setParentName] = useState("")
  const [parentPhone, setParentPhone] = useState("")
  const [messageType, setMessageType] = useState("communication")
  const [subject, setSubject] = useState("")
  const [message, setMessage] = useState("")
  const [loading, setLoading] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      const supabase = createBrowserClient()

const { error } = await supabase.from("parent_messages").insert({
        parent_name: parentName,
        parent_phone: parentPhone || null,
        message_type: messageType,
        subject,
        message,
        status: "pending",
      })

if (error) {
        console.error("[v0] Error submitting message:", error)
        alert("حدث خطأ أثناء إرسال الرسالة. يرجى المحاولة مرة أخرى.")
        return
      }

alert("تم إرسال رسالتك بنجاح! سنتواصل معك قريباً.")

// إعادة تعيين النموذج
      setParentName("")
      setParentPhone("")
      setSubject("")
      setMessage("")
      setMessageType("communication")
    } catch (error) {
      console.error("[v0] Error:", error)
      alert("حدث خطأ أثناء إرسال الرسالة.")
    } finally {
      setLoading(false)
    }
  }

return (
    <PageLayout
      title={messageType === "communication" ? "التواصل مع المختص" : "تقديم ملاحظات"}
      subtitle="نحن هنا للإجابة على أسئلتكم والاستماع لآرائكم"
      navItems={navItems}
      showSwitcher={true}
      currentSection="parents"
    >
      <Card className="p-6 md:p-8">
        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <label className="block text-sm font-semibold text-foreground mb-2">نوع الرسالة</label>
            <div className="flex gap-4">
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="radio"
                  value="communication"
                  checked={messageType === "communication"}
                  onChange={(e) => setMessageType(e.target.value)}
                  className="w-4 h-4"
                />
                <span>تواصل مع المختص</span>
              </label>
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="radio"
                  value="feedback"
                  checked={messageType === "feedback"}
                  onChange={(e) => setMessageType(e.target.value)}
                  className="w-4 h-4"
                />
                <span>تقديم ملاحظات</span>
              </label>
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label htmlFor="parentName" className="block text-sm font-semibold text-foreground mb-2">
                اسم ولي الأمر *
              </label>
              <input
                type="text"
                id="parentName"
                value={parentName}
                onChange={(e) => setParentName(e.target.value)}
                className="w-full px-4 py-3 rounded-xl border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
                placeholder="الاسم الكامل"
                required
              />
            </div>

<div>
              <label htmlFor="parentPhone" className="block text-sm font-semibold text-foreground mb-2">
                رقم الهاتف
              </label>
              <input
                type="tel"
                id="parentPhone"
                value={parentPhone}
                onChange={(e) => setParentPhone(e.target.value)}
                className="w-full px-4 py-3 rounded-xl border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
                placeholder="0600000000"
              />
            </div>
          </div>

<div>
            <label htmlFor="subject" className="block text-sm font-semibold text-foreground mb-2">
              الموضوع *
            </label>
            <input
              type="text"
              id="subject"
              value={subject}
              onChange={(e) => setSubject(e.target.value)}
              className="w-full px-4 py-3 rounded-xl border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
              placeholder="ما هو موضوع رسالتك؟"
              required
            />
          </div>

<div>
            <label htmlFor="message" className="block text-sm font-semibold text-foreground mb-2">
              الرسالة *
            </label>
            <textarea
              id="message"
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              rows={8}
              className="w-full px-4 py-3 rounded-xl border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary resize-none"
              placeholder="اكتب رسالتك هنا..."
              required
            />
          </div>

<Button
            type="submit"
            disabled={loading}
            className="w-full md:w-auto px-8 py-6 text-lg rounded-xl bg-primary hover:bg-primary/90 flex items-center gap-2"
          >
            {loading ? (
              <span>جاري الإرسال...</span>
            ) : (
              <>
                <Send className="h-5 w-5" />
                إرسال الرسالة
              </>
            )}
          </Button>
        </form>

<div className="mt-8 pt-8 border-t border-border">
          <h3 className="text-lg font-bold text-foreground mb-4">طرق التواصل الأخرى</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card className="p-4 bg-primary/5 border-primary/20 hover:bg-primary/10 transition-colors">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center">
                  <Mail className="h-5 w-5 text-primary" />
                </div>
                <div>
                  <p className="text-sm font-semibold text-foreground mb-1">البريد الإلكتروني</p>
                  <p className="text-sm text-muted-foreground">Mr.medoualit@gmail.com</p>
                </div>
              </div>
            </Card>
            <Card className="p-4 bg-primary/5 border-primary/20 hover:bg-primary/10 transition-colors">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center">
                  <Phone className="h-5 w-5 text-primary" />
                </div>
                <div>
                  <p className="text-sm font-semibold text-foreground mb-1">رقم الهاتف</p>
                  <p className="text-sm text-muted-foreground" dir="ltr">
                    0693216598
                  </p>
                </div>
              </div>
            </Card>
          </div>
        </div>
      </Card>
    </PageLayout>
  )
}
[V0_FILE]sql:file="scripts/015_parent_messages_simple.sql" isMerged="true"
-- حذف الجدول إذا كان موجوداً وإعادة إنشائه
DROP TABLE IF EXISTS parent_messages CASCADE;

-- إنشاء جدول رسائل أولياء الأمور
CREATE TABLE parent_messages (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  parent_name TEXT NOT NULL,
  parent_email TEXT,
  parent_phone TEXT,
  message_type TEXT NOT NULL,
  subject TEXT NOT NULL,
  message TEXT NOT NULL,
  status TEXT DEFAULT 'pending',
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- إنشاء indexes للبحث السريع
CREATE INDEX idx_parent_messages_created_at ON parent_messages(created_at DESC);
CREATE INDEX idx_parent_messages_status ON parent_messages(status);
CREATE INDEX idx_parent_messages_type ON parent_messages(message_type);

-- تفعيل Row Level Security
ALTER TABLE parent_messages ENABLE ROW LEVEL SECURITY;

-- سياسات الأمان
DROP POLICY IF EXISTS allow_read_all_parent_messages ON parent_messages;
CREATE POLICY allow_read_all_parent_messages ON parent_messages
  FOR SELECT USING (true);

DROP POLICY IF EXISTS allow_insert_parent_messages ON parent_messages;
CREATE POLICY allow_insert_parent_messages ON parent_messages
  FOR INSERT WITH CHECK (true);

DROP POLICY IF EXISTS allow_update_all_parent_messages ON parent_messages;
CREATE POLICY allow_update_all_parent_messages ON parent_messages
  FOR UPDATE USING (true);

DROP POLICY IF EXISTS allow_delete_all_parent_messages ON parent_messages;
CREATE POLICY allow_delete_all_parent_messages ON parent_messages
  FOR DELETE USING (true);
[V0_FILE]typescriptreact:file="app/admin/database-cleanup/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { AlertCircle, Database, Trash2, ArrowLeft } from "lucide-react"
import { createBrowserClient } from "@supabase/ssr"
import Link from "next/link"

const TABLES = [
  { name: "announcements", label: "الإعلانات", description: "جميع إعلانات التلاميذ والأولياء" },
  { name: "club_activities", label: "أنشطة النادي", description: "أنشطة النادي السوسيوثقافي" },
  { name: "club_registrations", label: "طلبات الانخراط", description: "طلبات انخراط التلاميذ في النادي" },
  { name: "faqs", label: "الأسئلة الشائعة", description: "أسئلة وأجوبة شائعة" },
  { name: "parent_bookings", label: "حجوزات الأولياء", description: "مواعيد الأولياء مع المختصين" },
  { name: "parent_documents", label: "وثائق الأولياء", description: "وثائق مخصصة للأولياء" },
  { name: "parent_messages", label: "رسائل الأولياء", description: "رسائل التواصل والملاحظات" },
  { name: "parent_questions", label: "أسئلة الأولياء", description: "أسئلة الأولياء للإدارة" },
  { name: "section_content", label: "محتوى الأركان", description: "محتوى أركان التلاميذ والأولياء" },
  { name: "student_messages", label: "رسائل التلاميذ", description: "رسائل التلاميذ وإبلاغات التنمر" },
  { name: "student_points", label: "نقاط التلاميذ", description: "نظام النقاط والإنجازات" },
]

const CONFIRMATION_TEXT = "حذف دون رجعة"

export default function DatabaseCleanupPage() {
  const [selectedTables, setSelectedTables] = useState<string[]>([])
  const [confirmationText, setConfirmationText] = useState("")
  const [isDeleting, setIsDeleting] = useState(false)
  const [showSuccess, setShowSuccess] = useState(false)
  const [error, setError] = useState("")
  const [tableCounts, setTableCounts] = useState<Record<string, number>>({})
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
  }, [])

useEffect(() => {
    if (!mounted) return
    fetchTableCounts()
  }, [mounted])

const fetchTableCounts = async () => {
    if (typeof window === "undefined") return

try {
      const supabase = createBrowserClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
      )

const counts: Record<string, number> = {}

for (const table of TABLES) {
        const { count, error } = await supabase.from(table.name).select("*", { count: "exact", head: true })

if (!error && count !== null) {
          counts[table.name] = count
        }
      }

setTableCounts(counts)
    } catch (err) {
      console.error("[v0] Error fetching table counts:", err)
    }
  }

const handleTableToggle = (tableName: string) => {
    setSelectedTables((prev) => (prev.includes(tableName) ? prev.filter((t) => t !== tableName) : [...prev, tableName]))
  }

const handleSelectAll = () => {
    if (selectedTables.length === TABLES.length) {
      setSelectedTables([])
    } else {
      setSelectedTables(TABLES.map((t) => t.name))
    }
  }

const handleDelete = async () => {
    if (confirmationText !== CONFIRMATION_TEXT) {
      setError(`يرجى كتابة "${CONFIRMATION_TEXT}" بالضبط للتأكيد`)
      return
    }

if (selectedTables.length === 0) {
      setError("يرجى تحديد جدول واحد على الأقل")
      return
    }

if (!confirm(`هل أنت متأكد من حذف ${selectedTables.length} جدول؟ هذا الإجراء لا يمكن التراجع عنه!`)) {
      return
    }

setIsDeleting(true)
    setError("")

try {
      const supabase = createBrowserClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
      )

let successCount = 0
      let failCount = 0

for (const tableName of selectedTables) {
        try {
          const { error } = await supabase.from(tableName).delete().neq("id", "00000000-0000-0000-0000-000000000000")

if (error) {
            console.error(`[v0] Error deleting from ${tableName}:`, error)
            failCount++
          } else {
            successCount++
          }
        } catch (err) {
          console.error(`[v0] Exception deleting from ${tableName}:`, err)
          failCount++
        }
      }

if (failCount === 0) {
        setShowSuccess(true)
        setSelectedTables([])
        setConfirmationText("")
        fetchTableCounts()
        setTimeout(() => setShowSuccess(false), 5000)
      } else {
        setError(`تم حذف ${successCount} جداول، فشل حذف ${failCount} جداول`)
      }
    } catch (err) {
      setError("حدث خطأ أثناء عملية الحذف")
      console.error("[v0] Delete error:", err)
    } finally {
      setIsDeleting(false)
    }
  }

const isConfirmationValid = confirmationText === CONFIRMATION_TEXT
  const canDelete = selectedTables.length > 0 && isConfirmationValid

return (
    <div className="min-h-screen bg-gradient-to-br from-background via-muted to-background p-6">
      <div className="max-w-5xl mx-auto">
        <Link href="/admin/dashboard">
          <Button variant="ghost" className="mb-6 gap-2">
            <ArrowLeft className="h-4 w-4" />
            العودة للوحة القيادة
          </Button>
        </Link>

<Card className="p-8 border-2 border-destructive/20">
          <div className="flex items-center gap-4 mb-6">
            <div className="p-4 rounded-2xl bg-gradient-to-br from-destructive to-red-700 text-white">
              <Database className="h-10 w-10" />
            </div>
            <div>
              <h1 className="text-3xl font-bold text-foreground">حذف شامل لقاعدة البيانات</h1>
              <p className="text-muted-foreground">تنبيه: هذا الإجراء خطير ولا يمكن التراجع عنه</p>
            </div>
          </div>

<div className="bg-destructive/10 border border-destructive/20 rounded-lg p-4 mb-6 flex items-start gap-3">
            <AlertCircle className="h-6 w-6 text-destructive flex-shrink-0 mt-0.5" />
            <div className="text-sm">
              <p className="font-bold text-destructive mb-2">تحذير شديد الأهمية:</p>
              <ul className="list-disc list-inside space-y-1 text-muted-foreground">
                <li>سيتم حذف جميع البيانات من الجداول المحددة بشكل نهائي</li>
                <li>لا يمكن استرجاع البيانات بعد الحذف</li>
                <li>يُنصح بأخذ نسخة احتياطية قبل المتابعة</li>
                <li>هذا الإجراء مخصص للمطورين فقط</li>
              </ul>
            </div>
          </div>

<div className="mb-6">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-xl font-bold">اختر الجداول المراد حذفها</h2>
              <Button variant="outline" size="sm" onClick={handleSelectAll}>
                {selectedTables.length === TABLES.length ? "إلغاء تحديد الكل" : "تحديد الكل"}
              </Button>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {TABLES.map((table) => (
                <Card
                  key={table.name}
                  className={`p-4 cursor-pointer transition-all hover:shadow-md ${
                    selectedTables.includes(table.name) ? "border-destructive border-2 bg-destructive/5" : ""
                  }`}
                  onClick={() => handleTableToggle(table.name)}
                >
                  <div className="flex items-start gap-3">
                    <Checkbox
                      checked={selectedTables.includes(table.name)}
                      onCheckedChange={() => handleTableToggle(table.name)}
                      className="mt-1"
                    />
                    <div className="flex-1">
                      <div className="flex items-center justify-between mb-1">
                        <h3 className="font-bold">{table.label}</h3>
                        {tableCounts[table.name] !== undefined && (
                          <span className="text-sm text-muted-foreground">({tableCounts[table.name]} سجل)</span>
                        )}
                      </div>
                      <p className="text-sm text-muted-foreground">{table.description}</p>
                    </div>
                  </div>
                </Card>
              ))}
            </div>
          </div>

{selectedTables.length > 0 && (
            <div className="mb-6">
              <label className="block text-sm font-bold mb-2">
                للتأكيد، اكتب "{CONFIRMATION_TEXT}" في الحقل أدناه:
              </label>
              <Input
                value={confirmationText}
                onChange={(e) => setConfirmationText(e.target.value)}
                placeholder={`اكتب "${CONFIRMATION_TEXT}" للتأكيد`}
                className={`text-center font-bold ${
                  confirmationText && !isConfirmationValid ? "border-destructive" : ""
                }`}
                disabled={isDeleting}
              />
              {confirmationText && !isConfirmationValid && (
                <p className="text-sm text-destructive mt-2">النص غير مطابق، يرجى الكتابة بدقة</p>
              )}
            </div>
          )}

{error && (
            <div className="mb-6 p-4 bg-destructive/10 border border-destructive rounded-lg">
              <p className="text-destructive text-sm">{error}</p>
            </div>
          )}

{showSuccess && (
            <div className="mb-6 p-4 bg-green-500/10 border border-green-500 rounded-lg">
              <p className="text-green-600 dark:text-green-400 text-sm font-bold">
                تم حذف البيانات بنجاح من {selectedTables.length} جداول
              </p>
            </div>
          )}

<div className="flex gap-4">
            <Button
              onClick={handleDelete}
              disabled={!canDelete || isDeleting}
              className="flex-1 bg-destructive hover:bg-destructive/90 gap-2"
            >
              <Trash2 className="h-5 w-5" />
              {isDeleting ? "جاري الحذف..." : `حذف ${selectedTables.length} جداول`}
            </Button>
            <Link href="/admin/dashboard" className="flex-1">
              <Button variant="outline" className="w-full bg-transparent">
                إلغاء
              </Button>
            </Link>
          </div>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/database-cleanup/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/016_create_events_and_stats.sql" isMerged="true"
-- إنشاء جدول الفعاليات والأحداث في التقويم
CREATE TABLE IF NOT EXISTS calendar_events (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL,
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL,
  title TEXT NOT NULL,
  event_date DATE NOT NULL,
  event_time TEXT NOT NULL,
  event_type TEXT NOT NULL, -- نشاط، اجتماع، فعالية، ندوة، احتفال
  description TEXT,
  color_gradient TEXT DEFAULT 'from-primary to-chart-3',
  is_active BOOLEAN DEFAULT true,
  display_order INTEGER DEFAULT 0
);

-- إنشاء جدول الإحصائيات
CREATE TABLE IF NOT EXISTS dashboard_statistics (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL,
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL,
  stat_key TEXT UNIQUE NOT NULL, -- total_students, active_activities, support_cases, etc.
  stat_label TEXT NOT NULL,
  stat_value TEXT NOT NULL,
  icon TEXT NOT NULL, -- users, activity, heart, etc.
  color_gradient TEXT DEFAULT 'from-primary to-chart-3',
  display_order INTEGER DEFAULT 0,
  is_visible BOOLEAN DEFAULT true
);

-- RLS للفعاليات
ALTER TABLE calendar_events ENABLE ROW LEVEL SECURITY;

DROP POLICY IF EXISTS allow_read_active_events ON calendar_events;
CREATE POLICY allow_read_active_events ON calendar_events
  FOR SELECT USING (is_active = true);

DROP POLICY IF EXISTS allow_admin_all_events ON calendar_events;
CREATE POLICY allow_admin_all_events ON calendar_events
  FOR ALL USING (true);

-- RLS للإحصائيات
ALTER TABLE dashboard_statistics ENABLE ROW LEVEL SECURITY;

DROP POLICY IF EXISTS allow_read_visible_stats ON dashboard_statistics;
CREATE POLICY allow_read_visible_stats ON dashboard_statistics
  FOR SELECT USING (is_visible = true);

DROP POLICY IF EXISTS allow_admin_all_stats ON dashboard_statistics;
CREATE POLICY allow_admin_all_stats ON dashboard_statistics
  FOR ALL USING (true);

-- Indexes لتسريع الاستعلامات
CREATE INDEX IF NOT EXISTS idx_calendar_events_date ON calendar_events(event_date);
CREATE INDEX IF NOT EXISTS idx_calendar_events_active ON calendar_events(is_active);
CREATE INDEX IF NOT EXISTS idx_dashboard_statistics_key ON dashboard_statistics(stat_key);
CREATE INDEX IF NOT EXISTS idx_dashboard_statistics_visible ON dashboard_statistics(is_visible);
[V0_FILE]typescriptreact:file="app/admin/calendar-events/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { createBrowserClient } from "@supabase/ssr"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Calendar, Plus, Edit, Trash2, Eye, EyeOff } from "lucide-react"
import { formatArabicDate } from "@/lib/utils"

interface CalendarEvent {
  id: string
  title: string
  event_date: string
  event_time: string
  event_type: string
  description?: string
  color_gradient: string
  is_active: boolean
  display_order: number
}

const eventTypes = [
  { value: "نشاط", label: "نشاط" },
  { value: "اجتماع", label: "اجتماع" },
  { value: "فعالية", label: "فعالية" },
  { value: "ندوة", label: "ندوة" },
  { value: "احتفال", label: "احتفال" },
]

const colorGradients = [
  { value: "from-primary to-chart-3", label: "أزرق" },
  { value: "from-secondary to-chart-4", label: "أخضر" },
  { value: "from-chart-5 to-chart-3", label: "برتقالي" },
  { value: "from-chart-2 to-primary", label: "بنفسجي" },
  { value: "from-chart-3 to-chart-5", label: "وردي" },
  { value: "from-chart-4 to-secondary", label: "أصفر" },
]

export default function CalendarEventsPage() {
  const [events, setEvents] = useState<CalendarEvent[]>([])
  const [loading, setLoading] = useState(true)
  const [showForm, setShowForm] = useState(false)
  const [editingEvent, setEditingEvent] = useState<CalendarEvent | null>(null)
  const [formData, setFormData] = useState({
    title: "",
    event_date: "",
    event_time: "",
    event_type: "نشاط",
    description: "",
    color_gradient: "from-primary to-chart-3",
    display_order: 0,
  })

useEffect(() => {
    loadEvents()
  }, [])

const loadEvents = async () => {
    const supabase = createBrowserClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    )

const { data, error } = await supabase.from("calendar_events").select("*").order("event_date", { ascending: true })

if (error) {
      console.error("Error loading events:", error)
    } else {
      setEvents(data || [])
    }
    setLoading(false)
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    const supabase = createBrowserClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    )

if (editingEvent) {
      const { error } = await supabase
        .from("calendar_events")
        .update({
          ...formData,
          updated_at: new Date().toISOString(),
        })
        .eq("id", editingEvent.id)

if (error) {
        alert("حدث خطأ أثناء التعديل")
        console.error(error)
      } else {
        alert("تم التعديل بنجاح")
        resetForm()
        loadEvents()
      }
    } else {
      const { error } = await supabase.from("calendar_events").insert([{ ...formData, is_active: true }])

if (error) {
        alert("حدث خطأ أثناء الإضافة")
        console.error(error)
      } else {
        alert("تمت الإضافة بنجاح")
        resetForm()
        loadEvents()
      }
    }
  }

const resetForm = () => {
    setFormData({
      title: "",
      event_date: "",
      event_time: "",
      event_type: "نشاط",
      description: "",
      color_gradient: "from-primary to-chart-3",
      display_order: 0,
    })
    setEditingEvent(null)
    setShowForm(false)
  }

const handleEdit = (event: CalendarEvent) => {
    setEditingEvent(event)
    setFormData({
      title: event.title,
      event_date: event.event_date,
      event_time: event.event_time,
      event_type: event.event_type,
      description: event.description || "",
      color_gradient: event.color_gradient,
      display_order: event.display_order,
    })
    setShowForm(true)
  }

const handleDelete = async (id: string) => {
    if (!confirm("هل أنت متأكد من حذف هذه الفعالية؟")) return

const supabase = createBrowserClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    )

const { error } = await supabase.from("calendar_events").delete().eq("id", id)

if (error) {
      alert("حدث خطأ أثناء الحذف")
    } else {
      alert("تم الحذف بنجاح")
      loadEvents()
    }
  }

const toggleActive = async (event: CalendarEvent) => {
    const supabase = createBrowserClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    )

const { error } = await supabase.from("calendar_events").update({ is_active: !event.is_active }).eq("id", event.id)

if (error) {
      alert("حدث خطأ")
    } else {
      loadEvents()
    }
  }

if (loading) return <div className="p-8">جاري التحميل...</div>

return (
    <div className="min-h-screen bg-background p-8">
      <div className="max-w-7xl mx-auto">
        <div className="flex items-center justify-between mb-8">
          <div>
            <h1 className="text-3xl font-bold text-foreground">إدارة فعاليات التقويم</h1>
            <p className="text-muted-foreground">إضافة وتعديل فعاليات التقويم الشهري</p>
          </div>
          <Button onClick={() => setShowForm(!showForm)} className="gap-2">
            <Plus className="h-4 w-4" />
            {showForm ? "إلغاء" : "إضافة فعالية جديدة"}
          </Button>
        </div>

{showForm && (
          <Card className="p-6 mb-8">
            <h2 className="text-xl font-bold mb-4">{editingEvent ? "تعديل الفعالية" : "إضافة فعالية جديدة"}</h2>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="title">عنوان الفعالية</Label>
                  <Input
                    id="title"
                    value={formData.title}
                    onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                    required
                    placeholder="مثال: ورشة الفنون والإبداع"
                  />
                </div>

<div>
                  <Label htmlFor="event_type">نوع الفعالية</Label>
                  <select
                    id="event_type"
                    value={formData.event_type}
                    onChange={(e) => setFormData({ ...formData, event_type: e.target.value })}
                    className="w-full rounded-md border border-input bg-background px-3 py-2"
                  >
                    {eventTypes.map((type) => (
                      <option key={type.value} value={type.value}>
                        {type.label}
                      </option>
                    ))}
                  </select>
                </div>

<div>
                  <Label htmlFor="event_date">التاريخ</Label>
                  <Input
                    id="event_date"
                    type="date"
                    value={formData.event_date}
                    onChange={(e) => setFormData({ ...formData, event_date: e.target.value })}
                    required
                  />
                </div>

<div>
                  <Label htmlFor="event_time">الوقت</Label>
                  <Input
                    id="event_time"
                    value={formData.event_time}
                    onChange={(e) => setFormData({ ...formData, event_time: e.target.value })}
                    required
                    placeholder="مثال: 10:00 صباحاً"
                  />
                </div>

<div>
                  <Label htmlFor="color_gradient">اللون</Label>
                  <select
                    id="color_gradient"
                    value={formData.color_gradient}
                    onChange={(e) => setFormData({ ...formData, color_gradient: e.target.value })}
                    className="w-full rounded-md border border-input bg-background px-3 py-2"
                  >
                    {colorGradients.map((color) => (
                      <option key={color.value} value={color.value}>
                        {color.label}
                      </option>
                    ))}
                  </select>
                </div>

<div>
                  <Label htmlFor="display_order">ترتيب العرض</Label>
                  <Input
                    id="display_order"
                    type="number"
                    value={formData.display_order}
                    onChange={(e) => setFormData({ ...formData, display_order: Number.parseInt(e.target.value) })}
                  />
                </div>
              </div>

<div>
                <Label htmlFor="description">وصف إضافي (اختياري)</Label>
                <Textarea
                  id="description"
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  placeholder="تفاصيل إضافية عن الفعالية..."
                  rows={3}
                />
              </div>

<div className="flex gap-2">
                <Button type="submit">{editingEvent ? "حفظ التعديلات" : "إضافة الفعالية"}</Button>
                <Button type="button" variant="outline" onClick={resetForm}>
                  إلغاء
                </Button>
              </div>
            </form>
          </Card>
        )}

<div className="space-y-4">
          {events.map((event) => (
            <Card
              key={event.id}
              className={`p-6 relative overflow-hidden bg-gradient-to-br ${event.color_gradient} ${!event.is_active ? "opacity-50" : ""}`}
            >
              <div className="flex items-center justify-between">
                <div className="flex-1 text-white">
                  <div className="flex items-center gap-3 mb-2">
                    <span className="text-sm font-semibold bg-white/20 px-3 py-1 rounded-full">
                      {formatArabicDate(event.event_date)}
                    </span>
                    <span className="text-xs bg-white/20 px-2 py-1 rounded-full">{event.event_type}</span>
                  </div>
                  <h3 className="text-xl font-bold mb-1">{event.title}</h3>
                  <p className="text-white/80 text-sm">الوقت: {event.event_time}</p>
                  {event.description && <p className="text-white/70 text-sm mt-2">{event.description}</p>}
                </div>
                <div className="flex gap-2">
                  <Button size="icon" variant="secondary" onClick={() => toggleActive(event)}>
                    {event.is_active ? <Eye className="h-4 w-4" /> : <EyeOff className="h-4 w-4" />}
                  </Button>
                  <Button size="icon" variant="secondary" onClick={() => handleEdit(event)}>
                    <Edit className="h-4 w-4" />
                  </Button>
                  <Button size="icon" variant="destructive" onClick={() => handleDelete(event.id)}>
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </Card>
          ))}

{events.length === 0 && (
            <Card className="p-12 text-center">
              <Calendar className="h-16 w-16 mx-auto mb-4 text-muted-foreground" />
              <p className="text-muted-foreground">لا توجد فعاليات مضافة بعد</p>
            </Card>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/calendar-events/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <div className="text-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
        <p className="text-muted-foreground">جاري تحميل الفعاليات...</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/dashboard-statistics/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { createBrowserClient } from "@supabase/ssr"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { BarChart3, Plus, Edit, Trash2, Eye, EyeOff } from "lucide-react"

interface DashboardStat {
  id: string
  stat_key: string
  stat_label: string
  stat_value: string
  icon: string
  color_gradient: string
  display_order: number
  is_visible: boolean
}

const availableIcons = [
  { value: "users", label: "مستخدمون" },
  { value: "activity", label: "نشاط" },
  { value: "heart", label: "قلب" },
  { value: "user-circle", label: "مستخدم واحد" },
  { value: "bell", label: "جرس" },
  { value: "trending-up", label: "تصاعدي" },
  { value: "calendar", label: "تقويم" },
  { value: "message-square", label: "رسالة" },
]

const colorGradients = [
  { value: "from-primary via-primary to-chart-3", label: "أزرق" },
  { value: "from-secondary via-secondary to-chart-4", label: "أخضر" },
  { value: "from-chart-5 via-chart-3 to-chart-2", label: "برتقالي" },
  { value: "from-chart-2 via-chart-1 to-primary", label: "بنفسجي" },
  { value: "from-chart-3 via-chart-5 to-primary", label: "وردي" },
  { value: "from-chart-4 via-secondary to-chart-2", label: "أصفر" },
]

export default function DashboardStatisticsPage() {
  const [stats, setStats] = useState<DashboardStat[]>([])
  const [loading, setLoading] = useState(true)
  const [showForm, setShowForm] = useState(false)
  const [editingStat, setEditingStat] = useState<DashboardStat | null>(null)
  const [formData, setFormData] = useState({
    stat_key: "",
    stat_label: "",
    stat_value: "",
    icon: "users",
    color_gradient: "from-primary via-primary to-chart-3",
    display_order: 0,
  })

useEffect(() => {
    loadStats()
  }, [])

const loadStats = async () => {
    const supabase = createBrowserClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    )

const { data, error } = await supabase
      .from("dashboard_statistics")
      .select("*")
      .order("display_order", { ascending: true })

if (error) {
      console.error("Error loading stats:", error)
    } else {
      setStats(data || [])
    }
    setLoading(false)
  }

if (editingStat) {
      const { error } = await supabase
        .from("dashboard_statistics")
        .update({
          ...formData,
          updated_at: new Date().toISOString(),
        })
        .eq("id", editingStat.id)

if (error) {
        alert("حدث خطأ أثناء التعديل")
        console.error(error)
      } else {
        alert("تم التعديل بنجاح")
        resetForm()
        loadStats()
      }
    } else {
      const { error } = await supabase.from("dashboard_statistics").insert([{ ...formData, is_visible: true }])

if (error) {
        alert("حدث خطأ أثناء الإضافة")
        console.error(error)
      } else {
        alert("تمت الإضافة بنجاح")
        resetForm()
        loadStats()
      }
    }
  }

const resetForm = () => {
    setFormData({
      stat_key: "",
      stat_label: "",
      stat_value: "",
      icon: "users",
      color_gradient: "from-primary via-primary to-chart-3",
      display_order: 0,
    })
    setEditingStat(null)
    setShowForm(false)
  }

const handleEdit = (stat: DashboardStat) => {
    setEditingStat(stat)
    setFormData({
      stat_key: stat.stat_key,
      stat_label: stat.stat_label,
      stat_value: stat.stat_value,
      icon: stat.icon,
      color_gradient: stat.color_gradient,
      display_order: stat.display_order,
    })
    setShowForm(true)
  }

const handleDelete = async (id: string) => {
    if (!confirm("هل أنت متأكد من حذف هذه الإحصائية؟")) return

const supabase = createBrowserClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    )

const { error } = await supabase.from("dashboard_statistics").delete().eq("id", id)

if (error) {
      alert("حدث خطأ أثناء الحذف")
    } else {
      alert("تم الحذف بنجاح")
      loadStats()
    }
  }

const toggleVisible = async (stat: DashboardStat) => {
    const supabase = createBrowserClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    )

const { error } = await supabase
      .from("dashboard_statistics")
      .update({ is_visible: !stat.is_visible })
      .eq("id", stat.id)

if (error) {
      alert("حدث خطأ")
    } else {
      loadStats()
    }
  }

if (loading) return <div className="p-8">جاري التحميل...</div>

return (
    <div className="min-h-screen bg-background p-8">
      <div className="max-w-7xl mx-auto">
        <div className="flex items-center justify-between mb-8">
          <div>
            <h1 className="text-3xl font-bold text-foreground">إدارة إحصائيات لوحة القيادة</h1>
            <p className="text-muted-foreground">التحكم في البطاقات الإحصائية المعروضة</p>
          </div>
          <Button onClick={() => setShowForm(!showForm)} className="gap-2">
            <Plus className="h-4 w-4" />
            {showForm ? "إلغاء" : "إضافة إحصائية جديدة"}
          </Button>
        </div>

{showForm && (
          <Card className="p-6 mb-8">
            <h2 className="text-xl font-bold mb-4">{editingStat ? "تعديل الإحصائية" : "إضافة إحصائية جديدة"}</h2>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="stat_key">المفتاح (فريد)</Label>
                  <Input
                    id="stat_key"
                    value={formData.stat_key}
                    onChange={(e) => setFormData({ ...formData, stat_key: e.target.value })}
                    required
                    disabled={!!editingStat}
                    placeholder="مثال: total_students"
                  />
                </div>

<div>
                  <Label htmlFor="stat_label">العنوان</Label>
                  <Input
                    id="stat_label"
                    value={formData.stat_label}
                    onChange={(e) => setFormData({ ...formData, stat_label: e.target.value })}
                    required
                    placeholder="مثال: إجمالي التلاميذ"
                  />
                </div>

<div>
                  <Label htmlFor="stat_value">القيمة</Label>
                  <Input
                    id="stat_value"
                    value={formData.stat_value}
                    onChange={(e) => setFormData({ ...formData, stat_value: e.target.value })}
                    required
                    placeholder="مثال: 1634 أو +23%"
                  />
                </div>

<div>
                  <Label htmlFor="icon">الأيقونة</Label>
                  <select
                    id="icon"
                    value={formData.icon}
                    onChange={(e) => setFormData({ ...formData, icon: e.target.value })}
                    className="w-full rounded-md border border-input bg-background px-3 py-2"
                  >
                    {availableIcons.map((icon) => (
                      <option key={icon.value} value={icon.value}>
                        {icon.label}
                      </option>
                    ))}
                  </select>
                </div>

<div className="flex gap-2">
                <Button type="submit">{editingStat ? "حفظ التعديلات" : "إضافة الإحصائية"}</Button>
                <Button type="button" variant="outline" onClick={resetForm}>
                  إلغاء
                </Button>
              </div>
            </form>
          </Card>
        )}

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {stats.map((stat) => (
            <Card
              key={stat.id}
              className={`relative overflow-hidden h-44 bg-gradient-to-br ${stat.color_gradient} p-6 ${!stat.is_visible ? "opacity-50" : ""}`}
            >
              <div className="absolute top-2 right-2 flex gap-2">
                <Button size="sm" variant="secondary" onClick={() => toggleVisible(stat)}>
                  {stat.is_visible ? <Eye className="h-3 w-3" /> : <EyeOff className="h-3 w-3" />}
                </Button>
                <Button size="sm" variant="secondary" onClick={() => handleEdit(stat)}>
                  <Edit className="h-3 w-3" />
                </Button>
                <Button size="sm" variant="destructive" onClick={() => handleDelete(stat.id)}>
                  <Trash2 className="h-3 w-3" />
                </Button>
              </div>
              <div className="flex flex-col justify-between h-full text-white pt-8">
                <p className="text-sm opacity-80">{stat.stat_label}</p>
                <p className="text-4xl font-bold">{stat.stat_value}</p>
              </div>
            </Card>
          ))}

{stats.length === 0 && (
            <Card className="col-span-full p-12 text-center">
              <BarChart3 className="h-16 w-16 mx-auto mb-4 text-muted-foreground" />
              <p className="text-muted-foreground">لا توجد إحصائيات مضافة بعد</p>
            </Card>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/dashboard-statistics/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <div className="text-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
        <p className="text-muted-foreground">جاري تحميل الإحصائيات...</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/admin-dashboard.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import {
  MessageSquare,
  Calendar,
  HelpCircle,
  Megaphone,
  Award,
  FileText,
  LogOut,
  Settings,
  Users,
  GraduationCap,
  Activity,
  ClipboardList,
  Mail,
  Shield,
  Database,
  Star,
} from "lucide-react"
import Image from "next/image"
import { useRouter } from "next/navigation"
import Link from "next/link"

interface AdminDashboardProps {
  stats: {
    messages: number
    bookings: number
    questions: number
    announcements: number
    parentMessages: number
    bullyingReports: number // إضافة نوع bullyingReports
    ratings?: number // إضافة عدد التقييمات
  }
}

export default function AdminDashboard({ stats }: AdminDashboardProps) {
  const router = useRouter()
  const [isLoggingOut, setIsLoggingOut] = useState(false)

const handleLogout = async () => {
    setIsLoggingOut(true)
    localStorage.removeItem("admin_logged_in")
    localStorage.removeItem("admin_username")
    router.push("/admin/login")
  }

const menuItems = [
    {
      title: "رسائل التلاميذ",
      icon: MessageSquare,
      count: stats.messages,
      href: "/admin/messages",
      color: "from-blue-500 to-blue-600",
    },
    {
      title: "رسائل أولياء الأمور",
      icon: Mail,
      count: stats.parentMessages,
      href: "/admin/parent-messages",
      color: "from-teal-500 to-teal-600",
    },
    {
      title: "إبلاغات التنمر",
      icon: Shield,
      count: stats.bullyingReports,
      href: "/admin/bullying-reports",
      color: "from-red-500 to-red-600",
    },
    {
      title: "حجوزات الأولياء",
      icon: Calendar,
      count: stats.bookings,
      href: "/admin/bookings",
      color: "from-green-500 to-green-600",
    },
    {
      title: "أسئلة الأولياء",
      icon: HelpCircle,
      count: stats.questions,
      href: "/admin/questions",
      color: "from-purple-500 to-purple-600",
    },
    {
      title: "تقييمات المنصة",
      icon: Star,
      count: stats.ratings || 0,
      href: "/admin/ratings",
      color: "from-amber-500 to-amber-600",
    },
    {
      title: "إدارة الإعلانات",
      icon: Megaphone,
      count: stats.announcements,
      href: "/admin/manage-announcements",
      color: "from-orange-500 to-orange-600",
    },
    {
      title: "نقاط التلاميذ",
      icon: Award,
      href: "/admin/points",
      color: "from-yellow-500 to-yellow-600",
    },
    {
      title: "التقارير",
      icon: FileText,
      href: "/admin/reports",
      color: "from-pink-500 to-pink-600",
    },
  ]

const sectionControls = [
    {
      title: "إدارة ركن التلاميذ",
      icon: GraduationCap,
      href: "/admin/students-section",
      color: "from-primary to-chart-3",
    },
    {
      title: "إدارة ركن الأولياء",
      icon: Users,
      href: "/admin/parents-section",
      color: "from-secondary to-chart-4",
    },
  ]

const clubManagement = [
    {
      title: "أنشطة النادي",
      description: "إدارة أنشطة النادي السوسيوثقافي",
      icon: Activity,
      href: "/admin/club-activities",
      color: "from-cyan-500 to-cyan-600",
    },
    {
      title: "طلبات الانخراط",
      description: "عرض وإدارة طلبات التلاميذ",
      icon: ClipboardList,
      href: "/admin/club-registrations",
      color: "from-indigo-500 to-indigo-600",
    },
  ]

const contentManagement = [
    {
      title: "إدارة فعاليات التقويم",
      description: "التحكم في فعاليات التقويم الشهري",
      icon: Calendar,
      href: "/admin/calendar-events",
      color: "from-violet-500 to-violet-600",
    },
    {
      title: "إدارة الإحصائيات",
      description: "التحكم في بطاقات الإحصائيات",
      icon: Activity,
      href: "/admin/dashboard-statistics",
      color: "from-emerald-500 to-emerald-600",
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-background via-muted to-background">
      {/* Header */}
      <div className="bg-gradient-to-r from-sidebar to-sidebar-accent text-white p-6 shadow-lg">
        <div className="max-w-7xl mx-auto flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Image src="/images/wissal.png" alt="شعار وصال" width={60} height={60} className="brightness-0 invert" />
            <div>
              <h1 className="text-3xl font-bold">لوحة تحكم وصال</h1>
              <p className="text-sm opacity-90">مرحباً بك في لوحة التحكم</p>
            </div>
          </div>
          <Button onClick={handleLogout} disabled={isLoggingOut} variant="secondary" className="gap-2">
            <LogOut className="h-5 w-5" />
            تسجيل الخروج
          </Button>
        </div>
      </div>

{/* Main Content */}
      <div className="max-w-7xl mx-auto p-6">
        {/* Section Controls */}
        <div className="mb-8">
          <h2 className="text-2xl font-bold mb-4 text-foreground">إدارة الأركان</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {sectionControls.map((section) => (
              <Link key={section.title} href={section.href}>
                <Card className="p-8 hover:shadow-xl transition-all cursor-pointer group relative overflow-hidden border-2">
                  <div
                    className={`absolute inset-0 bg-gradient-to-br ${section.color} opacity-5 group-hover:opacity-10 transition-opacity`}
                  ></div>
                  <div className="relative flex items-center justify-between">
                    <div>
                      <h3 className="text-2xl font-bold text-foreground mb-2">{section.title}</h3>
                      <p className="text-muted-foreground">تحكم كامل في المحتوى والعناصر</p>
                    </div>
                    <div
                      className={`p-4 rounded-2xl bg-gradient-to-br ${section.color} text-white group-hover:scale-110 transition-transform`}
                    >
                      <section.icon className="h-10 w-10" />
                    </div>
                  </div>
                </Card>
              </Link>
            ))}
          </div>
        </div>

<div className="mb-8">
          <h2 className="text-2xl font-bold mb-4 text-foreground">النادي السوسيوثقافي</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {clubManagement.map((item) => (
              <Link key={item.title} href={item.href}>
                <Card className="p-6 hover:shadow-xl transition-all cursor-pointer group">
                  <div className="flex items-start justify-between mb-4">
                    <div
                      className={`p-4 rounded-2xl bg-gradient-to-br ${item.color} text-white group-hover:scale-110 transition-transform`}
                    >
                      <item.icon className="h-8 w-8" />
                    </div>
                  </div>
                  <h3 className="text-xl font-bold text-foreground mb-1">{item.title}</h3>
                  <p className="text-sm text-muted-foreground">{item.description}</p>
                </Card>
              </Link>
            ))}
          </div>
        </div>

<div className="mb-8">
          <h2 className="text-2xl font-bold mb-4 text-foreground">إدارة المحتوى</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {contentManagement.map((item) => (
              <Link key={item.title} href={item.href}>
                <Card className="p-6 hover:shadow-xl transition-all cursor-pointer group">
                  <div className="flex items-start justify-between mb-4">
                    <div
                      className={`p-4 rounded-2xl bg-gradient-to-br ${item.color} text-white group-hover:scale-110 transition-transform`}
                    >
                      <item.icon className="h-8 w-8" />
                    </div>
                  </div>
                  <h3 className="text-xl font-bold text-foreground mb-1">{item.title}</h3>
                  <p className="text-sm text-muted-foreground">{item.description}</p>
                </Card>
              </Link>
            ))}
          </div>
        </div>

{/* Stats Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
          {menuItems.map((item) => (
            <Link key={item.title} href={item.href}>
              <Card className="p-6 hover:shadow-xl transition-all cursor-pointer group">
                <div className="flex items-start justify-between mb-4">
                  <div
                    className={`p-4 rounded-2xl bg-gradient-to-br ${item.color} text-white group-hover:scale-110 transition-transform`}
                  >
                    <item.icon className="h-8 w-8" />
                  </div>
                  {item.count !== undefined && <div className="text-3xl font-bold text-sidebar">{item.count}</div>}
                </div>
                <h3 className="text-xl font-bold text-foreground mb-1">{item.title}</h3>
                <p className="text-sm text-muted-foreground">انقر للعرض والإدارة</p>
              </Card>
            </Link>
          ))}
        </div>

{/* Quick Actions */}
        <Card className="p-6">
          <h2 className="text-2xl font-bold mb-4 text-foreground">إجراءات سريعة</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Link href="/admin/reports">
              <Button variant="outline" className="w-full gap-2 bg-transparent">
                <FileText className="h-5 w-5" />
                عرض التقارير
              </Button>
            </Link>
            <Link href="/admin/settings">
              <Button variant="outline" className="w-full gap-2 bg-transparent">
                <Settings className="h-5 w-5" />
                الإعدادات
              </Button>
            </Link>
            <Link href="/admin/database-cleanup">
              <Button
                variant="outline"
                className="w-full gap-2 bg-transparent border-destructive text-destructive hover:bg-destructive hover:text-white"
              >
                <Database className="h-5 w-5" />
                حذف قاعدة البيانات
              </Button>
            </Link>
          </div>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/017_create_ratings_table.sql" isMerged="true"
-- إنشاء جدول التقييمات
CREATE TABLE IF NOT EXISTS public.ratings (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_name TEXT,
  user_type TEXT CHECK (user_type IN ('student', 'parent', 'visitor')),
  rating INTEGER CHECK (rating >= 1 AND rating <= 5),
  feedback_message TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  is_reviewed BOOLEAN DEFAULT false,
  admin_notes TEXT
);

-- تفعيل RLS
ALTER TABLE public.ratings ENABLE ROW LEVEL SECURITY;

-- السماح للجميع بالإضافة
CREATE POLICY "allow_insert_ratings" ON public.ratings
  FOR INSERT
  WITH CHECK (true);

-- السماح للأدمن بالقراءة
CREATE POLICY "allow_read_all_ratings" ON public.ratings
  FOR SELECT
  USING (true);

-- السماح للأدمن بالتحديث
CREATE POLICY "allow_update_all_ratings" ON public.ratings
  FOR UPDATE
  USING (true);

-- السماح للأدمن بالحذف
CREATE POLICY "allow_delete_all_ratings" ON public.ratings
  FOR DELETE
  USING (true);

-- إنشاء index لتسريع الاستعلامات
CREATE INDEX IF NOT EXISTS ratings_created_at_idx ON public.ratings(created_at DESC);
CREATE INDEX IF NOT EXISTS ratings_rating_idx ON public.ratings(rating);
CREATE INDEX IF NOT EXISTS ratings_is_reviewed_idx ON public.ratings(is_reviewed);
[V0_FILE]typescriptreact:file="components/rating-section.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Star, Send } from "lucide-react"
import { createBrowserClient } from "@/lib/supabase/client"

export function RatingSection() {
  const [rating, setRating] = useState(0)
  const [hoveredRating, setHoveredRating] = useState(0)
  const [userName, setUserName] = useState("")
  const [userType, setUserType] = useState<"student" | "parent" | "visitor">("visitor")
  const [feedback, setFeedback] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [showSuccess, setShowSuccess] = useState(false)

const handleSubmit = async () => {
    if (rating === 0) {
      alert("الرجاء اختيار تقييمك بالنجوم")
      return
    }

setIsSubmitting(true)

try {
      const supabase = createBrowserClient()
      const { error } = await supabase.from("ratings").insert({
        user_name: userName || "مستخدم مجهول",
        user_type: userType,
        rating: rating,
        feedback_message: feedback,
      })

if (error) throw error

setShowSuccess(true)
      setRating(0)
      setUserName("")
      setFeedback("")

setTimeout(() => {
        setShowSuccess(false)
      }, 3000)
    } catch (error) {
      console.error("[v0] Error submitting rating:", error)
      alert("حدث خطأ أثناء إرسال التقييم")
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Card className="p-6 sm:p-8 bg-gradient-to-br from-accent/5 to-accent/10 border-accent/20">
      <div className="text-center mb-6">
        <h3 className="text-xl sm:text-2xl font-bold text-foreground mb-2">قيّم تجربتك مع منصة وصال</h3>
        <p className="text-sm text-muted-foreground">رأيك يهمنا لتحسين خدماتنا</p>
      </div>

{showSuccess ? (
        <div className="text-center py-8">
          <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4">
            <svg className="w-8 h-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
            </svg>
          </div>
          <h4 className="text-lg font-semibold text-foreground mb-2">شكراً لك!</h4>
          <p className="text-muted-foreground">تم إرسال تقييمك بنجاح</p>
        </div>
      ) : (
        <div className="space-y-4">
          {/* تقييم النجوم */}
          <div className="flex justify-center gap-2">
            {[1, 2, 3, 4, 5].map((star) => (
              <button
                key={star}
                type="button"
                onClick={() => setRating(star)}
                onMouseEnter={() => setHoveredRating(star)}
                onMouseLeave={() => setHoveredRating(0)}
                className="transition-transform hover:scale-110 focus:outline-none"
              >
                <Star
                  className={`w-8 h-8 sm:w-10 sm:h-10 transition-colors ${
                    star <= (hoveredRating || rating)
                      ? "fill-yellow-400 text-yellow-400"
                      : "fill-gray-200 text-gray-200"
                  }`}
                />
              </button>
            ))}
          </div>

{rating > 0 && (
            <p className="text-center text-sm text-muted-foreground">
              {rating === 5 && "ممتاز! شكراً لتقييمك الرائع"}
              {rating === 4 && "جيد جداً! نقدر تقييمك"}
              {rating === 3 && "جيد، سنعمل على التحسين"}
              {rating === 2 && "نأسف لعدم رضاك، سنحسن خدماتنا"}
              {rating === 1 && "نعتذر عن التجربة السيئة، سنعمل على التطوير"}
            </p>
          )}

{/* الاسم */}
          <div className="space-y-2">
            <Label htmlFor="userName">الاسم (اختياري)</Label>
            <Input id="userName" value={userName} onChange={(e) => setUserName(e.target.value)} placeholder="اسمك" />
          </div>

{/* نوع المستخدم */}
          <div className="space-y-2">
            <Label htmlFor="userType">أنت</Label>
            <select
              id="userType"
              value={userType}
              onChange={(e) => setUserType(e.target.value as any)}
              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            >
              <option value="student">تلميذ/ة</option>
              <option value="parent">ولي أمر</option>
              <option value="visitor">زائر</option>
            </select>
          </div>

{/* رسالة قصيرة */}
          <div className="space-y-2">
            <Label htmlFor="feedback">رسالتك (اختياري)</Label>
            <Textarea
              id="feedback"
              value={feedback}
              onChange={(e) => setFeedback(e.target.value)}
              placeholder="شاركنا رأيك أو اقتراحاتك..."
              rows={3}
              maxLength={500}
            />
            <p className="text-xs text-muted-foreground text-left">{feedback.length}/500</p>
          </div>

{/* زر الإرسال */}
          <Button onClick={handleSubmit} disabled={isSubmitting || rating === 0} className="w-full" size="lg">
            {isSubmitting ? (
              "جاري الإرسال..."
            ) : (
              <>
                <Send className="w-4 h-4 ml-2" />
                إرسال التقييم
              </>
            )}
          </Button>
        </div>
      )}
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/admin/ratings/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Star, MessageSquare, TrendingUp, Users, CheckCircle } from "lucide-react"
import { createBrowserClient } from "@/lib/supabase/client"
import { formatArabicDate } from "@/lib/utils"

interface Rating {
  id: string
  user_name: string
  user_type: string
  rating: number
  feedback_message: string
  created_at: string
  is_reviewed: boolean
  admin_notes: string
}

export default function RatingsPage() {
  const [ratings, setRatings] = useState<Rating[]>([])
  const [loading, setLoading] = useState(true)
  const [filter, setFilter] = useState<"all" | "reviewed" | "pending">("all")
  const [stats, setStats] = useState({
    total: 0,
    average: 0,
    fiveStars: 0,
    fourStars: 0,
    threeStars: 0,
    twoStars: 0,
    oneStar: 0,
  })

useEffect(() => {
    loadRatings()
  }, [])

const loadRatings = async () => {
    try {
      const supabase = createBrowserClient()
      const { data, error } = await supabase.from("ratings").select("*").order("created_at", { ascending: false })

if (error) throw error

setRatings(data || [])
      calculateStats(data || [])
    } catch (error) {
      console.error("[v0] Error loading ratings:", error)
    } finally {
      setLoading(false)
    }
  }

const calculateStats = (data: Rating[]) => {
    const total = data.length
    const sum = data.reduce((acc, r) => acc + r.rating, 0)
    const average = total > 0 ? (sum / total).toFixed(1) : "0"

setStats({
      total,
      average: Number.parseFloat(average),
      fiveStars: data.filter((r) => r.rating === 5).length,
      fourStars: data.filter((r) => r.rating === 4).length,
      threeStars: data.filter((r) => r.rating === 3).length,
      twoStars: data.filter((r) => r.rating === 2).length,
      oneStar: data.filter((r) => r.rating === 1).length,
    })
  }

const toggleReviewed = async (id: string, currentStatus: boolean) => {
    try {
      const supabase = createBrowserClient()
      const { error } = await supabase.from("ratings").update({ is_reviewed: !currentStatus }).eq("id", id)

if (error) throw error

await loadRatings()
    } catch (error) {
      console.error("[v0] Error updating rating:", error)
      alert("حدث خطأ أثناء التحديث")
    }
  }

const deleteRating = async (id: string) => {
    if (!confirm("هل أنت متأكد من حذف هذا التقييم؟")) return

try {
      const supabase = createBrowserClient()
      const { error } = await supabase.from("ratings").delete().eq("id", id)

if (error) throw error

await loadRatings()
    } catch (error) {
      console.error("[v0] Error deleting rating:", error)
      alert("حدث خطأ أثناء الحذف")
    }
  }

const filteredRatings = ratings.filter((r) => {
    if (filter === "reviewed") return r.is_reviewed
    if (filter === "pending") return !r.is_reviewed
    return true
  })

const getUserTypeLabel = (type: string) => {
    switch (type) {
      case "student":
        return "تلميذ/ة"
      case "parent":
        return "ولي أمر"
      case "visitor":
        return "زائر"
      default:
        return type
    }
  }

if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
          <p className="text-muted-foreground">جاري تحميل التقييمات...</p>
        </div>
      </div>
    )
  }

return (
    <div className="container mx-auto p-6 max-w-7xl" dir="rtl">
      <div className="mb-6">
        <h1 className="text-3xl font-bold mb-2">تقييمات المنصة</h1>
        <p className="text-muted-foreground">إدارة ومراجعة تقييمات المستخدمين</p>
      </div>

{/* الإحصائيات */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <Card className="p-6 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-950 dark:to-blue-900 border-blue-200">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-muted-foreground">إجمالي التقييمات</p>
              <p className="text-3xl font-bold">{stats.total}</p>
            </div>
            <Users className="w-8 h-8 text-blue-600" />
          </div>
        </Card>

<Card className="p-6 bg-gradient-to-br from-yellow-50 to-yellow-100 dark:from-yellow-950 dark:to-yellow-900 border-yellow-200">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-muted-foreground">المتوسط</p>
              <div className="flex items-center gap-2">
                <p className="text-3xl font-bold">{stats.average}</p>
                <Star className="w-6 h-6 fill-yellow-400 text-yellow-400" />
              </div>
            </div>
            <TrendingUp className="w-8 h-8 text-yellow-600" />
          </div>
        </Card>

<Card className="p-6 bg-gradient-to-br from-green-50 to-green-100 dark:from-green-950 dark:to-green-900 border-green-200">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-muted-foreground">5 نجوم</p>
              <p className="text-3xl font-bold">{stats.fiveStars}</p>
            </div>
            <Star className="w-8 h-8 fill-green-600 text-green-600" />
          </div>
        </Card>

<Card className="p-6 bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-950 dark:to-purple-900 border-purple-200">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-muted-foreground">مع رسائل</p>
              <p className="text-3xl font-bold">{ratings.filter((r) => r.feedback_message).length}</p>
            </div>
            <MessageSquare className="w-8 h-8 text-purple-600" />
          </div>
        </Card>
      </div>

{/* توزيع النجوم */}
      <Card className="p-6 mb-6">
        <h3 className="text-lg font-semibold mb-4">توزيع التقييمات</h3>
        <div className="space-y-3">
          {[5, 4, 3, 2, 1].map((stars) => {
            const count = stats[
              `${["five", "four", "three", "two", "one"][5 - stars]}Stars` as keyof typeof stats
            ] as number
            const percentage = stats.total > 0 ? (count / stats.total) * 100 : 0

return (
              <div key={stars} className="flex items-center gap-3">
                <div className="flex items-center gap-1 w-20">
                  <span className="text-sm font-medium">{stars}</span>
                  <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                </div>
                <div className="flex-1 bg-gray-200 rounded-full h-3 overflow-hidden">
                  <div
                    className="bg-yellow-400 h-full transition-all duration-500"
                    style={{ width: `${percentage}%` }}
                  />
                </div>
                <span className="text-sm text-muted-foreground w-16 text-left">
                  {count} ({percentage.toFixed(0)}%)
                </span>
              </div>
            )
          })}
        </div>
      </Card>

{/* الفلاتر */}
      <div className="flex gap-2 mb-6">
        <Button variant={filter === "all" ? "default" : "outline"} onClick={() => setFilter("all")}>
          الكل ({ratings.length})
        </Button>
        <Button variant={filter === "pending" ? "default" : "outline"} onClick={() => setFilter("pending")}>
          قيد المراجعة ({ratings.filter((r) => !r.is_reviewed).length})
        </Button>
        <Button variant={filter === "reviewed" ? "default" : "outline"} onClick={() => setFilter("reviewed")}>
          تمت المراجعة ({ratings.filter((r) => r.is_reviewed).length})
        </Button>
      </div>

{/* قائمة التقييمات */}
      <div className="space-y-4">
        {filteredRatings.length === 0 ? (
          <Card className="p-12 text-center">
            <p className="text-muted-foreground">لا توجد تقييمات</p>
          </Card>
        ) : (
          filteredRatings.map((rating) => (
            <Card key={rating.id} className="p-6">
              <div className="flex items-start justify-between mb-4">
                <div className="flex-1">
                  <div className="flex items-center gap-3 mb-2">
                    <h3 className="font-semibold">{rating.user_name}</h3>
                    <Badge variant="secondary">{getUserTypeLabel(rating.user_type)}</Badge>
                    {rating.is_reviewed && (
                      <Badge variant="outline" className="gap-1">
                        <CheckCircle className="w-3 h-3" />
                        تمت المراجعة
                      </Badge>
                    )}
                  </div>
                  <div className="flex items-center gap-2 mb-2">
                    {[1, 2, 3, 4, 5].map((star) => (
                      <Star
                        key={star}
                        className={`w-5 h-5 ${
                          star <= rating.rating ? "fill-yellow-400 text-yellow-400" : "fill-gray-200 text-gray-200"
                        }`}
                      />
                    ))}
                  </div>
                  <p className="text-sm text-muted-foreground">{formatArabicDate(rating.created_at)}</p>
                </div>
                <div className="flex gap-2">
                  <Button variant="outline" size="sm" onClick={() => toggleReviewed(rating.id, rating.is_reviewed)}>
                    {rating.is_reviewed ? "إلغاء المراجعة" : "وضع علامة"}
                  </Button>
                  <Button variant="destructive" size="sm" onClick={() => deleteRating(rating.id)}>
                    حذف
                  </Button>
                </div>
              </div>

{rating.feedback_message && (
                <div className="bg-muted/50 rounded-lg p-4 mb-4">
                  <p className="text-sm">{rating.feedback_message}</p>
                </div>
              )}
            </Card>
          ))
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/ratings/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <div className="text-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
        <p className="text-muted-foreground">جاري تحميل التقييمات...</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/dashboard/page.tsx" isEdit="true" isMerged="true"
"use client"

export const dynamic = "force-dynamic"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import AdminDashboard from "@/components/admin/admin-dashboard"
import { createBrowserClient } from "@/lib/supabase/client"

export default function AdminDashboardPage() {
  const router = useRouter()
  const [stats, setStats] = useState({
    messages: 0,
    bookings: 0,
    questions: 0,
    announcements: 0,
    parentMessages: 0,
    bullyingReports: 0,
    ratings: 0, // إضافة عداد التقييمات
  })
  const [isLoading, setIsLoading] = useState(true)
  const [isAuthenticated, setIsAuthenticated] = useState(false)

useEffect(() => {
    const checkAuthAndFetchData = async () => {
      console.log("[v0] التحقق من المصادقة")

const isLoggedIn = localStorage.getItem("admin_logged_in")
      const timestamp = localStorage.getItem("admin_timestamp")

console.log("[v0] حالة تسجيل الدخول:", { isLoggedIn, timestamp })

if (!isLoggedIn || isLoggedIn !== "true") {
        console.log("[v0] غير مسجل، التوجيه للتسجيل")
        router.push("/admin/login")
        return
      }

console.log("[v0] مسجل بنجاح، عرض لوحة التحكم")
      setIsAuthenticated(true)

try {
        const supabase = createBrowserClient()

const [
          messagesResult,
          bookingsResult,
          questionsResult,
          announcementsResult,
          parentMessagesResult,
          bullyingReportsResult,
          ratingsResult,
        ] = await Promise.all([
          supabase.from("student_messages").select("id", { count: "exact", head: true }),
          supabase.from("parent_bookings").select("id", { count: "exact", head: true }),
          supabase.from("parent_questions").select("id", { count: "exact", head: true }),
          supabase.from("announcements").select("id", { count: "exact", head: true }),
          supabase.from("parent_messages").select("id", { count: "exact", head: true }),
          supabase.from("student_messages").select("id", { count: "exact", head: true }).eq("message_type", "bullying"),
          supabase.from("ratings").select("id", { count: "exact", head: true }),
        ])

setStats({
          messages: messagesResult.count || 0,
          bookings: bookingsResult.count || 0,
          questions: questionsResult.count || 0,
          announcements: announcementsResult.count || 0,
          parentMessages: parentMessagesResult.count || 0,
          bullyingReports: bullyingReportsResult.count || 0,
          ratings: ratingsResult.count || 0, // تعيين عدد التقييمات
        })
      } catch (error) {
        console.error("[v0] Error fetching stats:", error)
        setStats({
          messages: 0,
          bookings: 0,
          questions: 0,
          announcements: 0,
          parentMessages: 0,
          bullyingReports: 0,
          ratings: 0,
        })
      }

setIsLoading(false)
    }

checkAuthAndFetchData()
  }, [router])

if (!isAuthenticated || isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-muted to-background">
        <div className="text-center">
          <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-sidebar mx-auto mb-4"></div>
          <p className="text-lg text-muted-foreground">جاري التحميل...</p>
        </div>
      </div>
    )
  }

return <AdminDashboard stats={stats} />
}
[V0_FILE]sql:file="scripts/018_ratings_simple.sql" isMerged="true"
-- حذف الجدول إذا كان موجوداً
DROP TABLE IF EXISTS public.ratings CASCADE;

-- إنشاء جدول التقييمات
CREATE TABLE public.ratings (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_name TEXT,
  user_type TEXT CHECK (user_type IN ('student', 'parent', 'visitor')),
  rating INTEGER CHECK (rating >= 1 AND rating <= 5),
  feedback_message TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  is_reviewed BOOLEAN DEFAULT false,
  admin_notes TEXT
);

-- تفعيل RLS
ALTER TABLE public.ratings ENABLE ROW LEVEL SECURITY;

-- حذف السياسات القديمة إن وجدت
DROP POLICY IF EXISTS "allow_insert_ratings" ON public.ratings;
DROP POLICY IF EXISTS "allow_read_all_ratings" ON public.ratings;
DROP POLICY IF EXISTS "allow_update_all_ratings" ON public.ratings;
DROP POLICY IF EXISTS "allow_delete_all_ratings" ON public.ratings;

-- السماح للجميع بالإضافة
CREATE POLICY "allow_insert_ratings" ON public.ratings
  FOR INSERT
  WITH CHECK (true);

-- السماح للجميع بالقراءة
CREATE POLICY "allow_read_all_ratings" ON public.ratings
  FOR SELECT
  USING (true);

-- السماح بالتحديث
CREATE POLICY "allow_update_all_ratings" ON public.ratings
  FOR UPDATE
  USING (true);

-- السماح بالحذف
CREATE POLICY "allow_delete_all_ratings" ON public.ratings
  FOR DELETE
  USING (true);

-- إنشاء indexes لتسريع الاستعلامات
CREATE INDEX ratings_created_at_idx ON public.ratings(created_at DESC);
CREATE INDEX ratings_rating_idx ON public.ratings(rating);
CREATE INDEX ratings_is_reviewed_idx ON public.ratings(is_reviewed);
[V0_FILE]sql:file="tmp/co-create/scripts/000_reset_database.sql"
-- ============================================
-- Reset Database Script - Delete All Tables
-- ============================================

-- Disable all foreign key constraints temporarily
ALTER TABLE IF EXISTS point_transactions DISABLE TRIGGER ALL;
ALTER TABLE IF EXISTS club_registrations DISABLE TRIGGER ALL;
ALTER TABLE IF EXISTS parent_bookings DISABLE TRIGGER ALL;
ALTER TABLE IF EXISTS parent_questions DISABLE TRIGGER ALL;
ALTER TABLE IF EXISTS parent_documents DISABLE TRIGGER ALL;
ALTER TABLE IF EXISTS parent_messages DISABLE TRIGGER ALL;
ALTER TABLE IF EXISTS student_messages DISABLE TRIGGER ALL;
ALTER TABLE IF EXISTS announcements DISABLE TRIGGER ALL;
ALTER TABLE IF EXISTS club_activities DISABLE TRIGGER ALL;
ALTER TABLE IF EXISTS student_points DISABLE TRIGGER ALL;
ALTER TABLE IF EXISTS calendar_events DISABLE TRIGGER ALL;
ALTER TABLE IF EXISTS dashboard_statistics DISABLE TRIGGER ALL;
ALTER TABLE IF EXISTS ratings DISABLE TRIGGER ALL;
ALTER TABLE IF EXISTS faqs DISABLE TRIGGER ALL;

-- Drop all tables if they exist
DROP TABLE IF EXISTS point_transactions CASCADE;
DROP TABLE IF EXISTS club_registrations CASCADE;
DROP TABLE IF EXISTS parent_bookings CASCADE;
DROP TABLE IF EXISTS parent_questions CASCADE;
DROP TABLE IF EXISTS parent_documents CASCADE;
DROP TABLE IF EXISTS parent_messages CASCADE;
DROP TABLE IF EXISTS student_messages CASCADE;
DROP TABLE IF EXISTS announcements CASCADE;
DROP TABLE IF EXISTS club_activities CASCADE;
DROP TABLE IF EXISTS student_points CASCADE;
DROP TABLE IF EXISTS calendar_events CASCADE;
DROP TABLE IF EXISTS dashboard_statistics CASCADE;
DROP TABLE IF EXISTS ratings CASCADE;
DROP TABLE IF EXISTS faqs CASCADE;

-- Drop sequences if they exist
DROP SEQUENCE IF EXISTS point_transactions_id_seq CASCADE;
DROP SEQUENCE IF EXISTS club_registrations_id_seq CASCADE;
DROP SEQUENCE IF EXISTS parent_bookings_id_seq CASCADE;
DROP SEQUENCE IF EXISTS parent_questions_id_seq CASCADE;
DROP SEQUENCE IF EXISTS parent_documents_id_seq CASCADE;
DROP SEQUENCE IF EXISTS parent_messages_id_seq CASCADE;
DROP SEQUENCE IF EXISTS student_messages_id_seq CASCADE;
DROP SEQUENCE IF EXISTS announcements_id_seq CASCADE;
DROP SEQUENCE IF EXISTS club_activities_id_seq CASCADE;
DROP SEQUENCE IF EXISTS student_points_id_seq CASCADE;
DROP SEQUENCE IF EXISTS calendar_events_id_seq CASCADE;
DROP SEQUENCE IF EXISTS dashboard_statistics_id_seq CASCADE;
DROP SEQUENCE IF EXISTS ratings_id_seq CASCADE;
DROP SEQUENCE IF EXISTS faqs_id_seq CASCADE;

-- Commit the cleanup
COMMIT;10e:T6f62e,[V0_FILE]markdown:file="README.md" isMerged="true"
# Social support platform

*Automatically synced with your [v0.app](https://v0.app) deployments*

[![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/mayssar33prod-2425s-projects/v0-social-support-platform)
[![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/pzpLfFm1DrL)

## Overview

This repository will stay in sync with your deployed chats on [v0.app](https://v0.app).
Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app).

## Deployment

Your project is live at:

**[https://vercel.com/mayssar33prod-2425s-projects/v0-social-support-platform](https://vercel.com/mayssar33prod-2425s-projects/v0-social-support-platform)**

## Build your app

Continue building your app on:

**[https://v0.app/chat/pzpLfFm1DrL](https://v0.app/chat/pzpLfFm1DrL)**

## How It Works

1. Create and modify your project using [v0.app](https://v0.app)
2. Deploy your chats from the v0 interface
3. Changes are automatically pushed to this repository
4. Vercel deploys the latest version from this repository
[V0_FILE]typescriptreact:file="app/calendar/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Card } from "@/components/ui/card"
import { Users, Bell, CalendarIcon, Activity } from "lucide-react"
import { createBrowserClient } from "@supabase/ssr"
import { formatArabicDate } from "@/lib/utils"

interface CalendarEvent {
  id: string
  title: string
  event_date: string
  event_time: string
  event_type: string
  color_gradient: string
}

export default function CalendarPage() {
  const [events, setEvents] = useState<CalendarEvent[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    loadEvents()
  }, [])

const loadEvents = async () => {
    const supabase = createBrowserClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    )

const { data, error } = await supabase
      .from("calendar_events")
      .select("*")
      .eq("is_active", true)
      .order("event_date", { ascending: true })

if (error) {
      console.error("Error loading events:", error)
    } else {
      setEvents(data || [])
    }
    setLoading(false)
  }

return (
    <div className="min-h-screen bg-background">
      <div className="flex items-center justify-center min-h-screen p-4 md:p-8">
        <div className="w-full max-w-7xl">
          <Card className="bg-card border-none shadow-2xl rounded-3xl overflow-hidden">
            <div className="flex flex-col md:flex-row min-h-[600px]">
              {/* الشريط الجانبي */}
              <div className="w-full md:w-20 bg-sidebar flex md:flex-col items-center justify-start md:justify-center gap-4 p-4 md:py-8 rounded-e-3xl">
                <div className="flex md:flex-col gap-3">
                  <Link href="/dashboard">
                    <div className="h-12 w-12 rounded-2xl bg-sidebar-accent flex items-center justify-center hover:bg-sidebar-primary transition-all cursor-pointer">
                      <Activity className="h-6 w-6 text-sidebar-foreground" />
                    </div>
                  </Link>
                  <div className="h-12 w-12 rounded-2xl bg-sidebar-primary flex items-center justify-center">
                    <CalendarIcon className="h-6 w-6 text-sidebar-primary-foreground" />
                  </div>
                  <Link href="/">
                    <div className="h-12 w-12 rounded-2xl bg-sidebar-accent flex items-center justify-center hover:bg-sidebar-primary transition-all cursor-pointer">
                      <Users className="h-6 w-6 text-sidebar-foreground" />
                    </div>
                  </Link>
                  <Link href="/faq">
                    <div className="h-12 w-12 rounded-2xl bg-sidebar-accent flex items-center justify-center hover:bg-sidebar-primary transition-all cursor-pointer">
                      <Bell className="h-6 w-6 text-sidebar-foreground" />
                    </div>
                  </Link>
                </div>
              </div>

{/* المحتوى */}
              <div className="flex-1 p-6 md:p-10 lg:p-12">
                <div className="mb-8">
                  <p className="text-sm text-muted-foreground mb-1">الفعاليات والمناسبات</p>
                  <h1 className="text-3xl md:text-4xl font-bold text-foreground">التقويم الشهري</h1>
                </div>

{loading ? (
                  <div className="text-center py-12">
                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
                    <p className="text-muted-foreground">جاري تحميل الفعاليات...</p>
                  </div>
                ) : events.length === 0 ? (
                  <Card className="p-12 text-center border-none shadow-lg rounded-3xl bg-muted/20">
                    <CalendarIcon className="h-16 w-16 mx-auto mb-4 text-muted-foreground" />
                    <p className="text-muted-foreground">لا توجد فعاليات مجدولة حالياً</p>
                  </Card>
                ) : (
                  <div className="space-y-4">
                    {events.map((event) => (
                      <Card
                        key={event.id}
                        className={`relative overflow-hidden border-none rounded-3xl bg-gradient-to-br ${event.color_gradient} p-6 hover:shadow-xl transition-all duration-300 hover:scale-[1.01]`}
                      >
                        <div className="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full -mr-20 -mt-20"></div>
                        <div className="relative flex items-center justify-between">
                          <div className="flex-1">
                            <div className="flex items-center gap-3 mb-2">
                              <span className="text-white/90 text-sm font-semibold bg-white/20 px-3 py-1 rounded-full">
                                {formatArabicDate(event.event_date)}
                              </span>
                              <span className="text-white/80 text-xs bg-white/20 px-2 py-1 rounded-full">
                                {event.event_type}
                              </span>
                            </div>
                            <h3 className="text-xl md:text-2xl font-bold text-white mb-1">{event.title}</h3>
                            <p className="text-white/80 text-sm">الوقت: {event.event_time}</p>
                          </div>
                          <div className="h-14 w-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
                            <CalendarIcon className="h-7 w-7 text-white" />
                          </div>
                        </div>
                      </Card>
                    ))}
                  </div>
                )}

{/* معلومات إضافية */}
                <Card className="mt-8 p-6 border-none shadow-lg rounded-3xl bg-gradient-to-br from-muted/50 to-muted/20">
                  <p className="text-sm text-muted-foreground text-center leading-relaxed">
                    سيتم إرسال تذكير قبل كل فعالية بيوم واحد. يمكنكم الاشتراك في الأنشطة عبر الأقسام المخصصة.
                  </p>
                </Card>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Card } from "@/components/ui/card"
import { Users, UserCircle, Bell, Calendar, Activity, TrendingUp, BarChart3, Heart } from "lucide-react"
import { createBrowserClient } from "@supabase/ssr"

interface DashboardStat {
  id: string
  stat_label: string
  stat_value: string
  icon: string
  color_gradient: string
}

const iconMap: Record<string, any> = {
  users: Users,
  activity: Activity,
  heart: Heart,
  "user-circle": UserCircle,
  bell: Bell,
  "trending-up": TrendingUp,
  calendar: Calendar,
  "message-square": Bell,
}

export default function DashboardPage() {
  const [stats, setStats] = useState<DashboardStat[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    loadStats()
  }, [])

const loadStats = async () => {
    const supabase = createBrowserClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    )

const { data, error } = await supabase
      .from("dashboard_statistics")
      .select("*")
      .eq("is_visible", true)
      .order("display_order", { ascending: true })

if (error) {
      console.error("Error loading stats:", error)
    } else {
      setStats(data || [])
    }
    setLoading(false)
  }

return (
    <div className="min-h-screen bg-background">
      <div className="flex items-center justify-center min-h-screen p-4 md:p-8">
        <div className="w-full max-w-7xl">
          <Card className="bg-card border-none shadow-2xl rounded-3xl overflow-hidden">
            <div className="flex flex-col md:flex-row min-h-[600px]">
              {/* الشريط الجانبي */}
              <div className="w-full md:w-20 bg-sidebar flex md:flex-col items-center justify-start md:justify-center gap-4 p-4 md:py-8 rounded-e-3xl">
                <div className="flex md:flex-col gap-3">
                  <div className="h-12 w-12 rounded-2xl bg-sidebar-primary flex items-center justify-center">
                    <Activity className="h-6 w-6 text-sidebar-primary-foreground" />
                  </div>
                  <Link href="/calendar">
                    <div className="h-12 w-12 rounded-2xl bg-sidebar-accent flex items-center justify-center hover:bg-sidebar-primary transition-all cursor-pointer">
                      <Calendar className="h-6 w-6 text-sidebar-foreground" />
                    </div>
                  </Link>
                  <Link href="/">
                    <div className="h-12 w-12 rounded-2xl bg-sidebar-accent flex items-center justify-center hover:bg-sidebar-primary transition-all cursor-pointer">
                      <Users className="h-6 w-6 text-sidebar-foreground" />
                    </div>
                  </Link>
                  <Link href="/faq">
                    <div className="h-12 w-12 rounded-2xl bg-sidebar-accent flex items-center justify-center hover:bg-sidebar-primary transition-all cursor-pointer">
                      <Bell className="h-6 w-6 text-sidebar-foreground" />
                    </div>
                  </Link>
                </div>
              </div>

{/* المحتوى */}
              <div className="flex-1 p-6 md:p-10 lg:p-12">
                <div className="mb-8">
                  <p className="text-sm text-muted-foreground mb-1">لوحة القيادة</p>
                  <h1 className="text-3xl md:text-4xl font-bold text-foreground">إحصائيات الأنشطة</h1>
                </div>

{loading ? (
                  <div className="text-center py-12">
                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
                    <p className="text-muted-foreground">جاري تحميل الإحصائيات...</p>
                  </div>
                ) : stats.length === 0 ? (
                  <Card className="p-12 text-center border-none shadow-lg rounded-3xl bg-muted/20">
                    <BarChart3 className="h-16 w-16 mx-auto mb-4 text-muted-foreground" />
                    <p className="text-muted-foreground">لا توجد إحصائيات متوفرة حالياً</p>
                  </Card>
                ) : (
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {stats.map((stat) => {
                      const IconComponent = iconMap[stat.icon] || Activity
                      return (
                        <Card
                          key={stat.id}
                          className={`relative overflow-hidden border-none h-44 bg-gradient-to-br ${stat.color_gradient} rounded-3xl p-6`}
                        >
                          <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16"></div>
                          <div className="relative flex flex-col justify-between h-full">
                            <div className="h-12 w-12 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
                              <IconComponent className="h-6 w-6 text-white" />
                            </div>
                            <div>
                              <p className="text-white/80 text-sm mb-1">{stat.stat_label}</p>
                              <p className="text-4xl font-bold text-white">{stat.stat_value}</p>
                            </div>
                          </div>
                        </Card>
                      )
                    })}
                  </div>
                )}
              </div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/faq/page.tsx" isMerged="true"
'use client'

import { useState } from 'react'
import Link from 'next/link'
import { Card } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Users, UserCircle, Bell, Calendar, Activity, HelpCircle, ChevronDown, Search } from 'lucide-react'

const generalFaqs = [
  {
    q: 'ما هي أهداف المنصة؟',
    a: 'توفير فضاء آمن للتلاميذ للتعبير عن أنفسهم، وتعزيز التواصل بين المدرسة والأسرة، ودعم النمو الاجتماعي والعاطفي للتلاميذ.'
  },
  {
    q: 'كيف يمكن الوصول إلى المنصة؟',
    a: 'يمكن الوصول للمنصة من أي جهاز متصل بالإنترنت عبر الرابط المخصص الذي يوفره المختص الاجتماعي.'
  },
  {
    q: 'هل المنصة آمنة؟',
    a: 'نعم، المنصة تستخدم أحدث بروتوكولات الأمان لحماية بيانات التلاميذ وأولياء الأمور. جميع المعلومات سرية ومحمية.'
  },
  {
    q: 'كيف يمكن التواصل مع المختص الاجتماعي؟',
    a: 'يمكن التواصل عبر قسم "التواصل" في ركن أولياء الأمور، أو حجز موعد مباشر من خلال قسم "حجز جلسة".'
  },
  {
    q: 'ماذا أفعل إذا واجهت مشكلة تقنية؟',
    a: 'يرجى التواصل مع المختص الاجتماعي عبر البريد الإلكتروني أو الهاتف المدرسي لحل أي مشكلة تقنية.'
  }
]

export default function GeneralFAQPage() {
  const [searchTerm, setSearchTerm] = useState('')
  const [openIndex, setOpenIndex] = useState<number | null>(null)

const filteredFaqs = generalFaqs.filter(item =>
    item.q.toLowerCase().includes(searchTerm.toLowerCase()) ||
    item.a.toLowerCase().includes(searchTerm.toLowerCase())
  )

return (
    <div className="min-h-screen bg-background">
      <div className="flex items-center justify-center min-h-screen p-4 md:p-8">
        <div className="w-full max-w-7xl">
          <Card className="bg-card border-none shadow-2xl rounded-3xl overflow-hidden">
            <div className="flex flex-col md:flex-row min-h-[600px]">
              {/* الشريط الجانبي */}
              <div className="w-full md:w-20 bg-sidebar flex md:flex-col items-center justify-start md:justify-center gap-4 p-4 md:py-8 rounded-e-3xl">
                <div className="flex md:flex-col gap-3">
                  <Link href="/dashboard">
                    <div className="h-12 w-12 rounded-2xl bg-sidebar-accent flex items-center justify-center hover:bg-sidebar-primary transition-all cursor-pointer">
                      <Activity className="h-6 w-6 text-sidebar-foreground" />
                    </div>
                  </Link>
                  <Link href="/calendar">
                    <div className="h-12 w-12 rounded-2xl bg-sidebar-accent flex items-center justify-center hover:bg-sidebar-primary transition-all cursor-pointer">
                      <Calendar className="h-6 w-6 text-sidebar-foreground" />
                    </div>
                  </Link>
                  <Link href="/">
                    <div className="h-12 w-12 rounded-2xl bg-sidebar-accent flex items-center justify-center hover:bg-sidebar-primary transition-all cursor-pointer">
                      <Users className="h-6 w-6 text-sidebar-foreground" />
                    </div>
                  </Link>
                  <div className="h-12 w-12 rounded-2xl bg-sidebar-primary flex items-center justify-center">
                    <Bell className="h-6 w-6 text-sidebar-primary-foreground" />
                  </div>
                </div>
              </div>

{/* المحتوى */}
              <div className="flex-1 p-6 md:p-10 lg:p-12">
                <div className="mb-8">
                  <p className="text-sm text-muted-foreground mb-1">مركز المساعدة</p>
                  <h1 className="text-3xl md:text-4xl font-bold text-foreground">
                    الأسئلة الشائعة
                  </h1>
                </div>

{/* بحث */}
                <Card className="p-6 mb-6 border-none shadow-lg rounded-3xl bg-gradient-to-br from-card to-muted/20">
                  <div className="flex items-center gap-3 mb-3">
                    <div className="h-12 w-12 rounded-2xl bg-gradient-to-br from-primary to-chart-3 flex items-center justify-center">
                      <Search className="h-6 w-6 text-white" />
                    </div>
                    <h3 className="text-lg font-bold text-foreground">ابحث عن إجابة</h3>
                  </div>
                  <Input
                    type="text"
                    placeholder="اكتب سؤالك أو كلمة مفتاحية..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="h-12 text-base rounded-2xl border-2 focus:border-primary"
                  />
                </Card>

{/* الأسئلة */}
                <div className="space-y-3">
                  {filteredFaqs.length > 0 ? (
                    filteredFaqs.map((item, index) => {
                      const isOpen = openIndex === index
                      
                      return (
                        <Card key={index} className="p-5 border-none shadow-sm rounded-2xl bg-muted/20 hover:bg-muted/30 transition-colors">
                          <button
                            onClick={() => setOpenIndex(isOpen ? null : index)}
                            className="w-full text-right flex items-start justify-between gap-3 group"
                          >
                            <span className="font-semibold text-foreground group-hover:text-primary transition-colors text-base">
                              {item.q}
                            </span>
                            <ChevronDown 
                              className={`h-5 w-5 text-muted-foreground flex-shrink-0 transition-transform ${isOpen ? 'rotate-180' : ''}`}
                            />
                          </button>
                          {isOpen && (
                            <p className="mt-3 text-muted-foreground leading-relaxed text-sm pr-4">
                              {item.a}
                            </p>
                          )}
                        </Card>
                      )
                    })
                  ) : (
                    <Card className="p-12 border-none shadow-lg rounded-3xl text-center">
                      <HelpCircle className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
                      <p className="text-muted-foreground">لم نجد نتائج لبحثك. جرب كلمات مفتاحية أخرى.</p>
                    </Card>
                  )}
                </div>

{/* روابط سريعة */}
                <div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-4">
                  <Link href="/students">
                    <Card className="p-5 border-none shadow-sm rounded-2xl bg-gradient-to-br from-primary/20 to-chart-3/20 hover:shadow-lg transition-all cursor-pointer">
                      <h4 className="font-semibold text-foreground mb-1">ركن التلاميذ</h4>
                      <p className="text-sm text-muted-foreground">الأنشطة والدعم والاقتراحات</p>
                    </Card>
                  </Link>
                  <Link href="/parents">
                    <Card className="p-5 border-none shadow-sm rounded-2xl bg-gradient-to-br from-secondary/20 to-chart-4/20 hover:shadow-lg transition-all cursor-pointer">
                      <h4 className="font-semibold text-foreground mb-1">ركن أولياء الأمور</h4>
                      <p className="text-sm text-muted-foreground">التواصل والاستشارات</p>
                    </Card>
                  </Link>
                </div>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

/* تحديث الألوان لتطابق التصميم البنفسجي/الوردي من الصورة */
:root {
  --background: #C8D1E1;
  --foreground: #4F4F4F;
  --card: #FFFFFF;
  --card-foreground: #4F4F4F;
  --popover: #FFFFFF;
  --popover-foreground: #4F4F4F;
  --primary: #7C6FDC;
  --primary-foreground: #FFFFFF;
  --secondary: #F06292;
  --secondary-foreground: #FFFFFF;
  --muted: #E8EEF5;
  --muted-foreground: #6B7280;
  --accent: #F06292;
  --accent-foreground: #FFFFFF;
  --destructive: #EF4444;
  --destructive-foreground: #FFFFFF;
  --border: #E0E7EF;
  --input: #E0E7EF;
  --ring: #7C6FDC;
  --chart-1: #7C6FDC;
  --chart-2: #F06292;
  --chart-3: #9B8AE3;
  --chart-4: #F48FB1;
  --chart-5: #B39DDB;
  --radius: 1.5rem;
  --sidebar: #6758B8;
  --sidebar-foreground: #FFFFFF;
  --sidebar-primary: #FFFFFF;
  --sidebar-primary-foreground: #6758B8;
  --sidebar-accent: rgba(255, 255, 255, 0.1);
  --sidebar-accent-foreground: #FFFFFF;
  --sidebar-border: rgba(255, 255, 255, 0.1);
  --sidebar-ring: #FFFFFF;
}

.dark {
  --background: #1F2937;
  --foreground: #F3F4F6;
  --card: #374151;
  --card-foreground: #F3F4F6;
  --popover: #374151;
  --popover-foreground: #F3F4F6;
  --primary: #9B8AE3;
  --primary-foreground: #FFFFFF;
  --secondary: #F48FB1;
  --secondary-foreground: #FFFFFF;
  --muted: #4B5563;
  --muted-foreground: #D1D5DB;
  --accent: #F48FB1;
  --accent-foreground: #FFFFFF;
  --destructive: #DC2626;
  --destructive-foreground: #FFFFFF;
  --border: #4B5563;
  --input: #4B5563;
  --ring: #9B8AE3;
  --chart-1: #9B8AE3;
  --chart-2: #F48FB1;
  --chart-3: #B39DDB;
  --chart-4: #F8BBD0;
  --chart-5: #CE93D8;
  --sidebar: #4C3F8A;
  --sidebar-foreground: #F3F4F6;
  --sidebar-primary: #F3F4F6;
  --sidebar-primary-foreground: #4C3F8A;
  --sidebar-accent: rgba(255, 255, 255, 0.1);
  --sidebar-accent-foreground: #F3F4F6;
  --sidebar-border: rgba(255, 255, 255, 0.1);
  --sidebar-ring: #F3F4F6;
}

@theme inline {
  --font-sans: 'Cairo', 'Cairo Fallback', sans-serif;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]json:file="components.json" isMerged="true"
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const badgeVariants = cva(
  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
  {
    variants: {
      variant: {
        default:
          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
        secondary:
          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
        destructive:
          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function Badge({
  className,
  variant,
  asChild = false,
  ...props
}: React.ComponentProps<'span'> &
  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'span'

return (
    <Comp
      data-slot="badge"
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive:
          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        secondary:
          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost:
          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
        icon: 'size-9',
        'icon-sm': 'size-8',
        'icon-lg': 'size-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<'button'> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Card({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card"
      className={cn(
        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
        className,
      )}
      {...props}
    />
  )
}

function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
        className,
      )}
      {...props}
    />
  )
}

function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-title"
      className={cn('leading-none font-semibold', className)}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
        className,
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-content"
      className={cn('px-6', className)}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-footer"
      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
      {...props}
    />
  )
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
}
[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
import { CheckIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function Checkbox({
  className,
  ...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="flex items-center justify-center text-current transition-none"
      >
        <CheckIcon className="size-3.5" />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  )
}

export { Checkbox }
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
        className,
      )}
      {...props}
    />
  )
}

export { Input }
[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'

import { cn } from '@/lib/utils'

function Label({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
        className,
      )}
      {...props}
    />
  )
}

export { Label }
[V0_FILE]typescriptreact:file="components/ui/progress.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as ProgressPrimitive from '@radix-ui/react-progress'

import { cn } from '@/lib/utils'

function Progress({
  className,
  value,
  ...props
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      className={cn(
        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
        className,
      )}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className="bg-primary h-full w-full flex-1 transition-all"
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressPrimitive.Root>
  )
}

export { Progress }
[V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
import { CircleIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function RadioGroup({
  className,
  ...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
  return (
    <RadioGroupPrimitive.Root
      data-slot="radio-group"
      className={cn('grid gap-3', className)}
      {...props}
    />
  )
}

function RadioGroupItem({
  className,
  ...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
  return (
    <RadioGroupPrimitive.Item
      data-slot="radio-group-item"
      className={cn(
        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator
        data-slot="radio-group-indicator"
        className="relative flex items-center justify-center"
      >
        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
}

export { RadioGroup, RadioGroupItem }
[V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as SelectPrimitive from '@radix-ui/react-select'
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function Select({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
  return <SelectPrimitive.Root data-slot="select" {...props} />
}

function SelectGroup({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
  return <SelectPrimitive.Group data-slot="select-group" {...props} />
}

function SelectValue({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
  return <SelectPrimitive.Value data-slot="select-value" {...props} />
}

function SelectTrigger({
  className,
  size = 'default',
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
  size?: 'sm' | 'default'
}) {
  return (
    <SelectPrimitive.Trigger
      data-slot="select-trigger"
      data-size={size}
      className={cn(
        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      {children}
      <SelectPrimitive.Icon asChild>
        <ChevronDownIcon className="size-4 opacity-50" />
      </SelectPrimitive.Icon>
    </SelectPrimitive.Trigger>
  )
}

function SelectContent({
  className,
  children,
  position = 'popper',
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
  return (
    <SelectPrimitive.Portal>
      <SelectPrimitive.Content
        data-slot="select-content"
        className={cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
          position === 'popper' &&
            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
          className,
        )}
        position={position}
        {...props}
      >
        <SelectScrollUpButton />
        <SelectPrimitive.Viewport
          className={cn(
            'p-1',
            position === 'popper' &&
              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
          )}
        >
          {children}
        </SelectPrimitive.Viewport>
        <SelectScrollDownButton />
      </SelectPrimitive.Content>
    </SelectPrimitive.Portal>
  )
}

function SelectLabel({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
  return (
    <SelectPrimitive.Label
      data-slot="select-label"
      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
      {...props}
    />
  )
}

function SelectItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
  return (
    <SelectPrimitive.Item
      data-slot="select-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
        className,
      )}
      {...props}
    >
      <span className="absolute right-2 flex size-3.5 items-center justify-center">
        <SelectPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </SelectPrimitive.ItemIndicator>
      </span>
      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
    </SelectPrimitive.Item>
  )
}

function SelectSeparator({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
  return (
    <SelectPrimitive.Separator
      data-slot="select-separator"
      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
      {...props}
    />
  )
}

function SelectScrollUpButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
  return (
    <SelectPrimitive.ScrollUpButton
      data-slot="select-scroll-up-button"
      className={cn(
        'flex cursor-default items-center justify-center py-1',
        className,
      )}
      {...props}
    >
      <ChevronUpIcon className="size-4" />
    </SelectPrimitive.ScrollUpButton>
  )
}

function SelectScrollDownButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
  return (
    <SelectPrimitive.ScrollDownButton
      data-slot="select-scroll-down-button"
      className={cn(
        'flex cursor-default items-center justify-center py-1',
        className,
      )}
      {...props}
    >
      <ChevronDownIcon className="size-4" />
    </SelectPrimitive.ScrollDownButton>
  )
}

export {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectScrollDownButton,
  SelectScrollUpButton,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
}
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        className,
      )}
      {...props}
    />
  )
}