موقع حجز كامل في طلب واحد
طلب كامل لموقع حجز فيه عملاء ولوحة إدارة وفنيون، مع ثلاثة طلبات متابعة.
هذا طلب طويل لأداة تبني مشاريع حقيقية. يسألك خمسة أسئلة أولاً، ثم يبني في ست خطوات ويتوقف بعد كل خطوة لتختبر. بدّل الأجزاء التي بين [أقواس مربعة] بنشاطك أنت. أضف في أول الرسالة: أجب بالعربية.
الطلب الكامل لموقع الحجز
اعرض الطلب كاملاً
GOAL
Build a booking website for [BUSINESS TYPE, for example a home cleaning and laundry service] called [BRAND NAME], in English and Arabic with full right-to-left layout.
SETTINGS (use these everywhere)
Country [Kuwait]. Time zone [Asia/Kuwait]: show every date and time in this zone, never in UTC. Currency [KWD]. Working days and hours [Sunday to Thursday, 9:00 to 18:00]. Each booking takes [60 minutes]. One technician can do one job at a time. The customer does NOT pick a technician. The admin assigns one.
WHO USES IT
1. Customer (phone first, no account): picks a service, date and time, enters name, phone and address, and gets a booking code. They see their booking on a tracking page by typing the booking code and their phone number. They can cancel there until the job starts.
2. Admin (laptop, login): sees all bookings, filters by status, date and technician, assigns a technician, edits services and prices, working hours, logo and colours, adds and disables technicians, and exports a list.
3. Technician (phone, login): sees only their own jobs, today and upcoming. Taps On the way, Arrived, Done. Can add a note and a photo, and can see the photo they added.
STACK
Next.js with TypeScript, Tailwind CSS, Supabase for database, login and file storage, deployed on Vercel. No other paid services.
If I have not given you Supabase keys yet, use a local file store behind the same functions so I can run and test everything. Say clearly that you did this, and keep the switch to Supabase to one file.
PAGES
Customer: home, services, booking (4 steps), confirmation with the code, track my booking.
Admin: login, dashboard (today, pending, completed), bookings list and detail with a status timeline, technicians, services and prices, settings (logo, colours, working hours).
Technician: login, my jobs, job detail with status buttons.
DATA
Tables: services, bookings, customers, technicians, booking_status_history. Each booking has a status: pending, confirmed, assigned, on_the_way, in_progress, done, cancelled.
RULES
- Customers see only the booking that matches their code and phone. Technicians see only jobs assigned to them. Admins see everything. With Supabase use row level security on every table, and test it.
- Validate every form on the server too.
- Never allow two bookings in the same slot for one technician, and never let a customer book a time that has passed.
- All secrets in environment variables. Give me a `.env.example`. The app must refuse to start if the session secret is missing. Never put a secret in browser code.
- Hash passwords. Use secure cookies. Rate limit login and the tracking page. Booking codes are long and random.
- Use sample data only. No real customer data.
- Arabic and right-to-left from the very first screen, not at the end.
- Every screen works at phone width 390 pixels and has loading, empty and error states.
- Colours, logo and brand name come from ONE config file and from the admin Settings page.
BEFORE YOU START
Ask me up to 5 questions, and give a default answer to each so I can just reply "defaults". Then, if I want Supabase, tell me click by click how to create the project, where to paste the keys, and how to run your SQL and make my first admin user.
BUILD IN THIS ORDER
1. Project setup and the database tables, with sample data
2. Customer booking flow
3. Admin login and bookings list
4. Technician login and jobs
5. Status changes, history, cancel
6. Tests for the booking flow, then a final security review
After EACH step: stop, tell me the exact command to run, the page to open, and what I should see. Keep a README with the run command.
DONE WHEN
I can book as a customer, see it as admin, assign it, finish it as the technician, and the customer sees "Done". All on a phone and on a laptop, in English and in Arabic.متابعة: لوحة الإدارة فقط
Add an admin area to the existing project. Pages: dashboard with today's numbers, bookings table with filters (status, date, technician), booking detail with a status timeline, assign technician, edit services and prices. Only users with role "admin" can open it. Show me the file list first.متابعة: واجهة الفني فقط
Add a technician area for phones. After login the technician sees only jobs assigned to them for today, sorted by time. Job detail shows address with a map link, phone with a call button, and big buttons: On the way, Started, Done. Done asks for a note and an optional photo. Every change is saved with a time in the status history. A technician must never see another technician's jobs.متابعة: افحص الأمان
Check this project for security problems: exposed keys, tables without row level security, routes without a login check, forms without server validation. List each with the file and the fix.تريد شيئاً أسرع أولاً؟ افتح صفحة القوالب: قالب الصالون فيه تدفق حجز جاهز تجرّبه في دقيقة.
الطلبات مكتوبة بالإنجليزية لأن أدوات الذكاء الاصطناعي تتبعها أفضل. يمكنك أن تطلب من الأداة الإجابة بالعربية.
جرّب الآن
اصنع موقعاً في الاستوديو: اختر نشاطاً وغيّر الكلمات والألوان واحصل على موقعك.