Doctor Appointment Booking System using Laravel 13 React | opencode

Doctor Appointment Booking System using Laravel 13 React | opencode

Source Code : https://github_____________com/cai-ro-coders/Doctor-Appointment-Booking-System-using-Laravel-13-React-opencode Download and Install Opencode
Download Laravel App

https://laravel.com/docs/13.x/installation

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel13DB
DB_USERNAME=root
DB_PASSWORD=root

Database Migration
php artisan migrate

myapp>php artisan migrate
Migration table created successfully.
check database table

AI prompt
AI Prompt

Doctor Appointment Booking System using Laravel 13 React | opencode

A complete Laravel-based React with opencode Doctor Appointment Booking system
Admin Panel
Role-based multi-dashboard system (Admin / Doctor / Patient)
CRUD for doctors, patients, specialties, locations, appointments
Search, filters
Manage global scheduling rules (slot length, buffer, max daily appointments, timezone)
Doctor Dashboard
View/manage appointments (approve/decline/reschedule)
Set date time calendar availability
calendar view (FullCalendar)
Patient Interface
Register/login, profile management
Search doctors by specialty/location, view profiles and available slots
Book/reschedule/cancel appointments, view history and upcoming bookings
Real-time availability checks and soft-hold during booking

Create a Doctor Appointment Booking system – ERD (database schema)
users
id (PK, bigint, unsigned)
role (enum: admin, doctor, patient)
phone (string, nullable)
timezone (string, default UTC)
profile_data (json, nullable) — extra profile fields
email_verified_at (timestamp, nullable)
created_at, updated_at Relationships: doctors.user_id -> users.id (1:1), patients.user_id -> users.id (1:1)

doctors
id (PK)
user_id (FK -> users.id, unique, indexed)
bio (text, nullable)
photo_url (string, nullable)
consultation_fee (decimal, nullable)
is_active (boolean)
created_at, updated_at Relationships: doctors <-> specialties (many-to-many), doctors <-> locations (many-to-many), doctors -> google_calendar_tokens (1:1), doctor_schedules -> doctors.id (1:M), appointments.doctor_id -> doctors.id (1:M)
patients
id (PK)
user_id (FK -> users.id, unique, indexed)
dob (date, nullable)
gender (enum, nullable)
medical_notes (text, nullable)
created_at, updated_at Relationships: appointments.patient_id -> patients.id (1:M)
Lookup / Many-to-Many

specialties
id (PK)
name (string, unique)
description (text, nullable)
created_at, updated_at
doctor_specialty (pivot)
id (PK)
doctor_id (FK -> doctors.id, indexed)
specialty_id (FK -> specialties.id, indexed)
created_at, updated_at Unique index: (doctor_id, specialty_id)
locations
id (PK)
name (string)
address (string, nullable)
city, state, zip (strings, nullable)
latitude, longitude (decimal, nullable)
created_at, updated_at
doctor_location (pivot)
id (PK)
doctor_id (FK -> doctors.id)
location_id (FK -> locations.id)
is_primary (boolean)
created_at, updated_at Unique index: (doctor_id, location_id)

Scheduling

doctor_schedules
id (PK)
doctor_id (FK -> doctors.id, indexed)
date_appointment
start_time (time) — local to doctor's timezone
end_time (time)
location_id
is_active (boolean)
created_at, updated_at Relationships: schedule_exceptions -> doctor_schedule_id

schedule_exceptions
id (PK)
doctor_schedule_id (FK -> doctor_schedules.id, nullable) — nullable for global doctor time-offs
doctor_id (FK -> doctors.id, indexed)
date (date) OR start_datetime, end_datetime (timestamps) — support full-day or range
type (enum: time_off, override, extra_slot)
reason (string, nullable)
created_at, updated_at

Appointments & Booking appointments id (PK) uuid (uuid, unique) doctor_id (FK -> doctors.id, indexed) patient_id (FK -> patients.id, indexed) location_id (FK -> locations.id, nullable) scheduled_start (datetime, indexed) — stored in UTC scheduled_end (datetime) slot_length_minutes (smallint) status (enum: tentative, pending, confirmed, cancelled, completed, no_show) booking_source (enum: web, mobile, admin, api) cancellation_reason (text, nullable) is_reminder_sent (boolean) created_by (FK -> users.id, nullable) — who created/approved created_at, updated_at, cancelled_at Indexes: (doctor_id, scheduled_start), (patient_id, scheduled_start) Constraints: prevent overlapping confirmed/confirmed+pending per doctor (enforced in code + DB unique partial index suggestions) appointment_logs (audit) id (PK) appointment_id (FK -> appointments.id) actor_id (FK -> users.id, nullable) action (string) e.g., created, updated, cancelled, status_changed payload (json, nullable) created_at Integrations & Notifications google_calendar_tokens id (PK) doctor_id (FK -> doctors.id, unique) provider_user_id (string) access_token (text, encrypted) refresh_token (text, encrypted) scopes (string) token_expires_at (timestamp) sync_enabled (boolean) last_synced_at (timestamp, nullable) created_at, updated_at email_notifications (queued tracking) id (PK) job_id (string, nullable) mailable_class (string) to_email (string) payload (json) status (enum: queued, sent, failed) attempts (int) last_attempt_at (timestamp, nullable) created_at, updated_at Settings & Audit settings id (PK) key (string, unique) value (text/json) created_at, updated_at audit_logs id (PK) actor_id (FK -> users.id) action (string) auditable_type (string) auditable_id (bigint) old_values (json, nullable) new_values (json, nullable) ip_address (string, nullable) user_agent (string, nullable) created_at Create a dashboard page (Admin / Doctor / Patient) a role-based multi-dashboard RoleMiddleware with ProtectedRoute Route::middleware('role:admin')->get('/admin/dashboard', function () { return 'Admin Dashboard'; }); Route::middleware('role:doctor')->get('/doctor/dashboard', function () { return 'Doctor Dashboard'; }); Route::middleware('role:patient')->get('/patient/dashboard', function () { return 'Patient Dashboard'; }); fix login if admin user login the admin user redirect to this url http://127.0.0.1:8000/admin/dashboard if doctor login redirect to dashboad page http://127.0.0.1:8000/doctor/dashboard if patient redirect to dashboad page http://127.0.0.1:8000/patient/dashboard generate realistic and structured dummy data General Requirements: Use seeders and factories Maintain data integrity and relationships (foreign keys) Use realistic names, emails, dates, and values Ensure variation in statuses and roles Avoid duplicate unique fields (emails, employee_id) Seed at least 50–100 patients for meaningful data Seeding (appointments,appointment_logs,doctors,doctor_location,doctor_schedules,doctor_specialty,specialties,schedule_exceptions) Create Dashboard Page for dashboad admin http://127.0.0.1:8000/admin/dashboard - Display real-time statistics: - Total Doctors - Total Patients - total of Appointments - total Users - Current appointments in table -Use charts (Chart.js) for dashboard stats Create Dashboard Page for dashboad doctor http://127.0.0.1:8000/doctor/dashboard - Display real-time statistics: - Total Patients - Today Patient - Today Appointments - schedule calendar - Current appointments in table -Use charts (Chart.js) for dashboard stats Create Users Management Page this is for admin role - View all Users (paginated, searchable) - Add Users - Edit Users details - Delete Users Create appointments Management Page this is for admin role - View all appointments (paginated, searchable) - Add appointments - Edit appointments details - Delete appointments Create patients Management Page this is for admin role - View all patients (paginated, searchable) - Add patients - Edit patients details - Delete patients Create doctors Management Page this is for admin role - View all doctors (paginated, searchable) - Add doctors - Edit doctors details - Delete doctors Create doctors schedules Management Page this is for admin role - View all doctors schedules (paginated, searchable) - Add doctors schedules - Edit doctors schedules details - Delete doctors schedules Create doctors specialties Management Page this is for admin role - View all doctors specialties (paginated, searchable) - Add doctors specialties - Edit doctors specialties details - Delete doctors specialties Create doctors locations Management Page this is for admin role - View all doctors locations (paginated, searchable) - Add doctors locations - Edit doctors locations details - Delete doctors locations Create locations Clinic Management Page locations table this is for admin role - View all locations Clinic (paginated, searchable) - Add locations Clinic - Edit locations details Clinic - Delete locations Clinic Create doctors Appointments Management Page this is for doctor role - View all doctors Appointments (paginated, searchable) - Add doctors Appointments - Edit doctors Appointments details - Delete doctors Appointments Create doctors schedules Management Page this is for doctor role - View all doctors schedules (paginated, searchable) - Add doctors schedules - Edit doctors schedules details - Delete doctors schedules Create doctors Profile Page this is for doctor role - Edit profile - add specialties to profile - fields name, email, phone, photo_url, profile_data, bio, Create locations Clinic Management Page locations table this is for doctor role - View all locations Clinic (paginated, searchable) - Add locations Clinic - Edit locations details Clinic - Delete locations Clinic Create Dashboard Page for Patient http://127.0.0.1:8000/patient/dashboard - welcome back name of user patient - Total Available Doctor - choose the category from specialties table - my appointments in table - Choose the doctor in table with photo. -Use charts (Chart.js) for dashboard stats Create Appointments Management Page this is for patient role - View all Appointments (paginated, searchable) - Add Appointments - Edit Appointments details - Delete Appointments Create Available Doctors Management Page this is for patient role - View all Available Doctors (paginated, searchable, box with photo) - add Filter by Specialty like on the dashboad page - View doctors profile in another page doctor profle page COMPLETE WEBSITE DESIGN PROMPT Create a front-page Single Page APP modern healthcare/doctor appointment booking website with: Clean, minimal, and professional medical UI Highly responsive layout (mobile) 🎨 1. DESIGN SYSTEM Color System Use a medical-trust color palette: Primary: #0DE0FE (bright cyan/blue) Secondary: #09E5AB (green for success/health) Accent: #FF9B44 (for highlights / CTA) Background: #F8F9FA (light grey) Text: Dark: #272B41 Muted: #6B7280 👉 Style rules: Use gradients for hero (blue → teal) Buttons: rounded (8px–12px radius) Cards: soft shadow + white background Typography Headings: Poppins / Inter Body: Roboto / Open Sans Font weights: Bold (600–700): headings Regular (400): body ✨ 2. ANIMATION SYSTEM Use subtle, smooth animations: Scroll animations (AOS or Framer Motion) Hover effects: Cards lift (translateY(-5px)) Buttons glow or scale (1.03) Page transitions: fade + slide Counters (stats section) Skeleton loaders for async data 🏠 3. HERO SECTION Layout: Left: Text content Right: Doctor/medical illustration or image Content: Heading:“Consult Best Doctors Your Nearby Location.” Subtext:“Embark on your healing journey with Doccare, where finding trusted doctors, booking appointments, and managing your health” Elements: CTA buttons: “Book an Appointment” Visual: Doctor image / hospital illustration Floating UI cards (appointment preview, doctor rating) 🏥 4. ABOUT US SECTION Layout: Left: Image (hospital / doctors team) Right: Text Content: Title: “About Our Healthcare Platform” Text:“We connect patients with trusted healthcare professionals through a seamless digital experience. Our mission is to make healthcare accessible, efficient, and reliable for everyone.” Add: Bullet points: Verified doctors Easy booking system 24/7 support Stats: 10k+ Patients 500+ Doctors 50+ Clinics 🩺 5. SPECIALTIES SECTION Grid layout (cards) Each card: Icon/image Specialty name Short description Example: Cardiology Neurology Pediatrics Dental Care Orthopedics 👉 Hover: Highlight border Slight zoom 👨‍⚕️ 6. OUR TEAM (DOCTORS) Layout: Grid of doctor cards Card Includes: Doctor image Name Specialty Rating ⭐ Experience “View Profile” button 👉 Extra: Filter by specialty Online/offline badge ⚙️ 7. HOW IT WORKS Step-based UI (horizontal or vertical) Steps: 🔍 Search Doctor“Find specialists by name, location, or category” 👨‍⚕️ Check Profile“View experience, ratings, and availability” 📅 Schedule Booking“Choose date & time instantly” 💊 Get Your Solution“Consult and receive treatment” 👉 Add icons + connecting lines 💬 8. CLIENT REVIEWS / TESTIMONIALS Layout: Carousel slider Card: User image Name Review text Star rating Example text: “Very easy to book appointments and the doctors are highly professional.” 👉 Auto-slide + manual controls 📞 9. FOOTER SECTION Columns: Logo + description Quick Links Services Contact Info Include: Email Phone Address Social media icons Bottom bar: Copyright Terms & Privacy Run php artisan serve and npm run dev myapp>composer run dev
Starting Laravel development server: http://127.0.0.1:8000

Human Resource Management System using Laravel 13 React | opencode

Human Resource Management System using Laravel 13 React | opencode

Source Code : https://github____________com/cai-ro-coders/Human-Resource-Management-System-using-Laravel-13-React-opencode/tree/main Download and Install Opencode
Download Laravel App

https://laravel.com/docs/13.x/installation

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel13DB
DB_USERNAME=root
DB_PASSWORD=root

Database Migration
php artisan migrate

myapp>php artisan migrate
Migration table created successfully.
check database table

AI prompt
AI Prompt

Create a Human Resource Management System – ERD (database schema)

1. Users (Admins / HR Accounts)
- role_id (FK → roles.id)
2. Roles & Permissions
roles
- id (PK)
- name (Admin, HR Manager)
- created_at
- updated_at
permissions
- id (PK)
- name
- created_at
- updated_at

role_permission
- id (PK)
- role_id (FK)
- permission_id (FK)
3. Employees
- id (PK)
- employee_id (unique)
- first_name
- last_name
- email
- phone
- gender
- date_of_birth
- address
- hire_date
- department_id (FK)
- position_id (FK)
- status (active, inactive, terminated)
- profile_photo
- created_at
- updated_at
4. departments
- id (PK)
- name
- description
- created_at
- updated_at
5. positions
- id (PK)
- department_id (FK)
- title
- description
- created_at
- updated_at
6. attendances
- id (PK)
- employee_id (FK)
- date
- check_in
- check_out
- status (present, absent, late)
- created_at
- updated_at
7. Leave Management
leave_types
- id (PK)
- name (Sick Leave, Vacation)
- days_allowed
- created_at
- updated_at

leaves
- id (PK)
- employee_id (FK)
- leave_type_id (FK)
- start_date
- end_date
- reason
- status (pending, approved, rejected)
- approved_by (FK → users.id)
- created_at
- updated_at
8. payrolls
- id (PK)
- employee_id (FK)
- basic_salary
- bonus
- deductions
- net_salary
- pay_date
- created_at
- updated_at
9. payslips
- id (PK)
- payroll_id (FK)
- generated_at
- file_path
- created_at
- updated_at
10. notifications
- id (PK)
- user_id (FK)
- title
- message
- is_read
- created_at
- updated_at
11. activity_logs
- id (PK)
- user_id (FK)
- action
- description
- ip_address
- created_at

Creaate migrations and seeder
11. announcementss
- id (PK)
- user_id (FK)
- title
- content
- created_by
- created_at

Creaate migrations and seeder
11. Projects
- id (PK)
- user_id (FK)
- title
- client
- details
- project_start_date
- project_end_date
- status
- created_at

Key Relationships
users → roles (Many-to-One)
roles ↔ permissions (Many-to-Many)
employees → departments (Many-to-One)
employees → positions (Many-to-One)
positions → departments (Many-to-One)
attendances → employees (Many-to-One)
leaves → employees (Many-to-One)
leaves → leave_types (Many-to-One)
leaves → users (approved_by) (Many-to-One)
payrolls → employees (Many-to-One)
payslips → payrolls (One-to-One / One-to-Many)
notifications → users (Many-to-One)
activity_logs → users (Many-to-One)
can you generate migrations for all tables
generate realistic and structured dummy data
General Requirements:
Use seeders and factories
Maintain data integrity and relationships (foreign keys)
Use realistic names, emails, dates, and values
Ensure variation in statuses and roles
Avoid duplicate unique fields (emails, employee_id)
Seed at least 50–100 employees for meaningful data

Seeding Scope:

1. Roles & Permissions
Create roles:
Admin
HR Manager
Create permissions:
manage_employees
manage_attendance
manage_leaves
manage_payroll
view_reports
Assign all permissions to Admin
Assign limited permissions to HR Manager
2. Users (Admin Accounts)
Seed at least:
1 Super Admin
2 HR Managers
Use realistic emails (e.g., admin@company.com)
Password: hashed (e.g., bcrypt('password'))
3. Departments
Seed 5–10 departments:
Human Resources
IT
Finance
Marketing
Operations
4. Positions
For each department, create 2–4 positions:
Example (IT): Developer, QA Engineer, DevOps
5. Employees
Generate 50–100 employees:
Random Filipino and international names
Unique employee IDs (e.g., EMP0001)
Assign department and position
Random hire dates (past 5 years)
Status distribution:
80% active
15% inactive
5% terminated
6. Attendance
For each employee:
Generate attendance for the last 30 days
Include:
check_in (8:00–9:30 AM)
check_out (5:00–7:00 PM)
Random status:
present (majority)
late
absent (less frequent)
7. Leave Types
Seed:
Sick Leave (10 days)
Vacation Leave (15 days)
Emergency Leave (5 days)
8. Leaves
Generate leave records for ~30% of employees:
Random date ranges
Random status:
pending
approved
rejected
Assign approved_by to Admin users
9. Payroll
For each employee:
Generate salary data:
basic_salary (based on position range)
bonus (optional random)
deductions (tax, absences)
Calculate net_salary = basic + bonus - deductions
Monthly payroll for last 3–6 months
10. Payslips
Generate payslips for each payroll record:
Include file path (dummy PDF path)
11. Notifications
Create notifications for:
Leave approvals/rejections
Payroll generation
Assign to users (admins)
12. Activity Logs
Log actions such as:
"Created employee"
"Approved leave"
"Generated payroll"
Include IP address and timestamps
Technical Instructions:
Use Faker for realistic data generation
Use Carbon for date handling
Follow proper seeder execution order:
Roles & Permissions
Users
Departments & Positions
Employees
Attendance
Leave Types & Leaves
Payroll & Payslips
Notifications & Logs

Expected Output:
Fully populated database
Relational consistency
Ready-to-use admin dashboard data for testing and demos

Create Dashboard Page
- Display real-time statistics:
- Total employees
- total Employees on leave
- Department count
- Pending approvals (employees & leaves)
- Recent Projects in table (project name, progress, start date)
-Use charts (Chart.js) for dashboard stats

Create Employee Page
- View all employees (paginated, searchable)
- Add employee (auto-approved option)
- Edit employee details
- Delete employees

Create departments Page
- View all departments (paginated, searchable)
- Add departments (auto-approved option)
- Edit departments details
- Delete departments

Create Positions Page
- View all Positions (paginated, searchable)
- Add Positions
- Edit Positions details
- Delete Positions

Create Attendance Page
- View all Attendance (paginated, searchable)
- Add Attendance
- Edit Attendance details
- Delete Attendance

Create Leave Page
- View all Leave (paginated, searchable)
- Add Leave
- Edit Leave details
- Delete Leave

Create payrolls Page
- View all payrolls (paginated, searchable)
- Add payrolls
- Edit payrolls details
- Delete payrolls

Create payslips Page
- View all payslips (paginated, searchable)
- Add payslips
- Edit payslips details
- Delete payslips


Create Projects Page
- View all Projects (paginated, searchable)
- Add Projects
- Edit Projects details
- Delete Projects
Run php artisan serve and npm run dev myapp>composer run dev
Starting Laravel development server: http://127.0.0.1:8000

Claude Code + MiniMax M2.7 Ollama Build and Test a Laravel React SPA

Claude Code + MiniMax M2.7 Ollama Build and Test a Laravel React SPA

Source Code : https://github____com/cai-ro-coders/Claude-Code-MiniMax-M2.7-Ollama-Build-and-Test-a-Laravel-React-SPA Download and Install claudecode and Ollama
Download Laravel App

https://laravel.com/docs/13.x/installation

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel13DB
DB_USERNAME=root
DB_PASSWORD=root

Database Migration
php artisan migrate

myapp>php artisan migrate
Migration table created successfully.
check database table

AI prompt
AI Prompt

Design a modern real estate web application UI with a clean, premium, and minimal aesthetic single-page.

Style:
- Use a professional SaaS look inspired by Zillow and Airbnb
- Emphasize trust, clarity, and usability
- Soft shadows, rounded corners, and glassmorphism where appropriate

Layout:
- Sticky top navigation bar with logo, links (Home, Buy, Rent, Contact), and CTA button
- Hero section with a full-width background image of modern properties
- Prominent search bar (location, price, property type)
- Property listings displayed in a responsive card grid
- Each card includes image, price, location, tags, and hover animation
- Sidebar or top filters with dropdowns and sliders
- Footer with multiple columns and dark theme

Color palette:
- Primary: deep navy (#0F172A)
- Accent: blue (#3B82F6)
- Secondary accent: green (#22C55E)
- Background: light gray (#F8FAFC)
- Text: dark gray (#111827)

Typography:
- Use Inter or Poppins
- Bold headings, clean readable body text
Animations:
- Smooth hover effects on cards (scale + shadow)
- Fade-in and slide-up animations on scroll
- Navbar background transition on scroll
- Button hover states with subtle glow or color shift

UX:
- Mobile-first responsive design
- Fast, intuitive filtering

- Clear call-to-action buttons
- Minimal clutter, lots of whitespace

Tech hints:
- Use Framer Motion for animations
- Optimize for performance and fast loading

Goal:
Create a visually appealing, high-conversion real estate platform that feels modern, trustworthy, and easy to use.

Run php artisan serve and npm run dev myapp>composer run dev
Starting Laravel development server: http://127.0.0.1:8000

Restaurant Reservation System using Laravel 13 React and opencode

Restaurant Reservation System using Laravel 13 React and opencode

Source Code : https://github_________com/cai-ro-coders/Restaurant-Reservation-System-using-Laravel-13-React-and-opencode Download and Install Opencode
Download Laravel App

https://laravel.com/docs/13.x/installation

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel13DB
DB_USERNAME=root
DB_PASSWORD=root

Database Migration
php artisan migrate

myapp>php artisan migrate
Migration table created successfully.
check database table

AI prompt
AI Prompt

Create a modern, elegant, single-page Restaurant Reservation website (front-end only) for a Restaurant brand called "Asian Food". The design should feel premium and relaxing, inspired by high-end Restaurant. Use a soft, warm color palette (white, cream, beige, gold accents, and dark text), large imagery, and smooth scrolling animations. give me a prompt only

Update the welcome.tsx file resources/js/pages/welcome.tsx and implement these prompt

Design a modern, elegant, single-page restaurant reservation website for a premium brand named “Asian Food.” The visual style should feel calm, luxurious, and inviting, inspired by high-end dining experiences. Use a soft, warm color palette featuring white, cream, beige, subtle gold accents, and dark refined typography. Incorporate large, high-quality food and interior imagery, generous spacing, and a clean, minimalist layout.

The page should include the following sections arranged in smooth scrolling flow:

- A full-screen hero section with a stunning background image of Asian cuisine or a refined restaurant interior, an overlay gradient, the brand name “Asian Food,” a short tagline, and a prominent “Reserve a Table” call-to-action button.

- An “About Us” section with a brief story about the restaurant’s philosophy, emphasizing authenticity, freshness, and premium dining.Restaurant Reservation System using Laravel 13 React and opencode
- A “Menu Highlights” section displaying a curated selection of dishes with elegant cards, subtle hover effects, and refined typography.
- A “Reservation Form” section with fields for name, date, time, number of guests, and contact details, styled with soft borders, rounded corners, and gold-accented focus states.
- A “Gallery” section featuring a grid or masonry layout of high-quality images with smooth hover zoom effects.
- A “Contact & Location” section including address, phone, email, and an embedded map placeholder. A minimal, elegant footer with social media icons and copyright text.

Use modern UI/UX principles: smooth scrolling, subtle fade-in or slide-up animations on scroll, soft shadows, and micro-interactions. Typography should be sophisticated, using a combination of a modern serif for headings and a clean sans-serif for body text. Ensure the design is fully responsive, with a mobile-first approach and fluid layouts.

Overall, the experience should feel serene, upscale, and effortless, encouraging users to make a reservation.

Create a clean, scalable, and production-ready relational database design for a premium restaurant reservation system for a brand called “Asian Food.” The database should support core reservation functionality, customer management, table management, and dynamic content such as menu items and gallery images.

Include the following entities and relationships:

- A Customers table to store guest details such as name, email, and phone number, ensuring unique email constraints and timestamps for record tracking.
- A Reservations table that links to customers and stores booking details including date, time, number of guests, reservation status (pending, confirmed, cancelled, completed), and optional special requests.
- A Tables entity representing physical restaurant tables, including attributes like table number, seating capacity, and location (e.g., indoor, outdoor, VIP).
- A Reservation_Tables junction table to support many-to-many relationships between reservations and tables, allowing flexible table combinations for larger groups.
- A Menu_Items table for managing menu data dynamically, including name, description, price, category, image URL, and a flag for featured items.
- A Gallery table to store images for the website gallery, including image URL, caption, and display order.

Create Dashboard Page
- Display real-time statistics:
- Total today reservation
- total Confirmed
- Total Guests Expected
- total Capacity
- Totay reservation in table
-Use charts (Chart.js) for dashboard stats

Create Reservation Page
- View all Reservation (paginated, searchable)
- Add Reservation (auto-approved option)
- Edit Reservation details
- Delete Reservation

Create Customer Page
- View all Customer (paginated, searchable)
- Add Customer (auto-approved option)
- Edit Customer details
- Delete Customer

update the welcome.tsx resources/js/pages/welcome.tsx for the reservation form http://127.0.0.1:8000/ Submit the form properly reservation then the submited form reservation is save to database for the customer and reservation database table

Create Table Page
- View all Table (paginated, searchable)
- Add Table (auto-approved option)
- Edit Table details
- Delete Table

Run php artisan serve and npm run dev myapp>composer run dev
Starting Laravel development server: http://127.0.0.1:8000

MiniMax M2.7 + OpenCode: Build & Test a Laravel React SPA

MiniMax M2.7 + OpenCode: Build & Test a Laravel React SPA

Source Code : https://github____com/cai-ro-coders/MiniMax-M2.7-OpenCode-Build-Test-a-Laravel-React-SPA Download and Install Opencode
Download Laravel App

https://laravel.com/docs/13.x/installation

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel13DB
DB_USERNAME=root
DB_PASSWORD=root

Database Migration
php artisan migrate

myapp>php artisan migrate
Migration table created successfully.
check database table

AI prompt
AI Prompt

Chatgpt
Create a modern, elegant, single-page hotel website (front-end only) for a luxury hotel brand called "StayEase Hotel". The design should feel premium and relaxing, inspired by high-end resorts. Use a soft, warm color palette (white, cream, beige, gold accents, and dark text), large imagery, and smooth scrolling animations. give me a prompt only
Opencode
The luxury hotel website has been created at resources/js/pages/welcome.tsx. The lint error for unused activeFilter/setActiveFilter is fixed. The build/node_modules errors are environment-related issues unrelated to the code.
What's included:
- Hero Section - Full-screen with hotel image, minimal nav, logo, tagline "Where Comfort Meets Elegance", Book Now button, scroll indicator
- About Section - Hotel philosophy with decorative stats (25+ years, 98 rooms, 12 suites, 5 restaurants)
- Rooms & Suites - 4 room types with large images, prices, descriptions, hover scale effects
- Amenities - 6 features (Spa, Pool, Fine Dining, Fitness, Concierge, Private Beach) with custom SVG icons
- Gallery - 6-image grid with hover overlay effects
- Testimonials - 3 guest reviews with star ratings and avatars
- Location - Address, phone, email with map placeholder
- Contact/Booking - Complete reservation form with all fields
Design features:
- Color palette: white, cream (#FDFCF9), beige (#F5F0E8), gold (#C9A962), charcoal (#2D2D2D)
- Typography: Cormorant Garamond (serif headings) + Inter (body)
- Smooth scroll navigation, fade-in animations on scroll
- Subtle shadows, rounded corners, hover transitions
- Fully responsive for mobile, tablet, desktop

Run php artisan serve and npm run dev myapp>composer run dev
Starting Laravel development server: http://127.0.0.1:8000

Multitenant Hotel Management System using Laravel 13 React and opencode

Multitenant Hotel Management System using Laravel 13 React and opencode

Source Code : https://github______com/cai-ro-coders/Multitenant-Hotel-Management-System-using-Laravel-13-React-and-opencode Download and Install Opencode
Download Laravel App

https://laravel.com/docs/13.x/installation

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel13DB
DB_USERNAME=root
DB_PASSWORD=root

Database Migration
php artisan migrate

myapp>php artisan migrate
Migration table created successfully.
check database table

AI prompt
AI Prompt

I want to build a Multitenant Hotel Management System
Core Modules:
Include tables with proper relationships, constraints, and fields for:
Hotels
Users
Hotel_User (pivot with roles)
Room Types
Rooms
Guests
Bookings
Payments
Services (optional add-ons)
Booking_Services (many-to-many relationship)

RELATIONSHIP OVERVIEW
Users ↔ Hotels → many-to-many (with role)
Hotels → Rooms → Room Types
Hotels→ Guests
Hotels → Bookings
Bookings → Room + Guests
Bookings → Payments

Seeder data (demo hotels, rooms, bookings)

Create Dashboard Page
- Display real-time statistics:
- Total Hotels
- Total Rooms
- Total Guest
- statistics by hotels
-Use charts (Chart.js) for dashboard stats

Create Room Page
- View all Room (paginated, searchable)
- Add, edit and Delete Room

Create Hotel Page
- View all hotel (paginated, searchable)
- Add, edit and Delete hotel

Create Guests Page
- View all Guests (paginated, searchable)
- Add, edit and Delete Guests

Create Bookings Page
- View all Bookings (paginated, searchable)
- Add, edit and Delete Bookings

Run php artisan serve and npm run dev myapp>composer run dev
Starting Laravel development server: http://127.0.0.1:8000

Download and install Claude Code and Use for FREE

Download and install Claude Code and Use for FREE

Download and Install Claude Code https://code.claude____com/docs/en/overview
show hidden folder
open Finder, navigate to any folder (like your Home or Desktop folder), and press the Command (\(\)) + Shift + . (period) keys simultaneously. Hidden items will appear as translucent icons. Press the same shortcut again to hide them.

login to openrouter = https://openrouter____ai/workspaces/default/keys Create api key

Laravel 13 React OpenCode and AwesomeDesign-md Designs

Laravel 13 React OpenCode and AwesomeDesign-md Designs

Download and Install Opencode
Download Laravel App

https://laravel.com/docs/13.x/installation

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel13DB
DB_USERNAME=root
DB_PASSWORD=root

Database Migration
php artisan migrate

myapp>php artisan migrate
Migration table created successfully.
check database table

AI prompt
@DESIGN.md Create a landing page Ecommerce use the design dot MD file in the project root as the visual reference for all styling decision Run php artisan serve and npm run dev myapp>composer run dev
Starting Laravel development server: http://127.0.0.1:8000

Laravel 13 React Employee Management System Complete | AI

Laravel 13 React Employee Management System Complete | AI

Source Code : https://github______com/cai-ro-coders/-Laravel-13-React-Employee-Management-System-Complete-AI/tree/main Download and Install Opencode
Download Laravel App

https://laravel.com/docs/13.x/installation

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel13DB
DB_USERNAME=root
DB_PASSWORD=root

Database Migration
php artisan migrate

myapp>php artisan migrate
Migration table created successfully.
check database table

AI prompt
Employee Management System
========================
🗃️ DATABASE DESIGN
========================

Create migrations and relationships for:

- users (id, role, status)
- departments (id, name, description)
- employees (id, user_id, department_id, position, salary, status)
- leaves (id, employee_id, type, start_date, end_date, reason, status)
- payrolls (id, employee_id, basic_salary, deductions, bonuses, net_salary, status)
- attendances (id, employee_id, date, clock_in, clock_out)
- announcements (id, title, content, created_by)

Define proper relationships:
- User → Employee (1:1)
- Department → Employees (1:N)
- Employee → Leaves, Payrolls, Attendance (1:N)

Create Dashboard Page
- Display real-time statistics:
- Total employees
- Employees on leave today
- Department count
- Pending approvals (employees & leaves)
-Use charts (Chart.js) for dashboard stats

Create Employee Page
- View all employees (paginated, searchable)
- Add employee (auto-approved option)
- Edit employee details
- Delete employees

Create Department Management Page:
- CRUD operations for departments

Create Leave Management Page
- CRUD
- View all leave requests
- Approve or reject requests
- Filter by status/date

Create Payroll Management Page
- Create payroll records
- Assign salary, deductions, bonuses
- Mark payroll as "Paid"
- Generate payslip (PDF)

Create Attendance Management Page
- View all attendance logs
- Manually add/edit attendance
Create Announcements Page
- CRUD announcements

Run php artisan serve and npm run dev myapp>composer run dev
Starting Laravel development server: http://127.0.0.1:8000

Laravel 13 React CRM Customer Relationship Management system Complete | AI

Laravel 13 React CRM Customer Relationship Management system Complete | AI

Source Code : https://github_____com/cai-ro-coders/Laravel-13-React-CRM-Customer-Relationship-Management-system-Complete Download and Install Opencode
Download Laravel App

https://laravel.com/docs/13.x/installation

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel12DB
DB_USERNAME=root
DB_PASSWORD=root

Database Migration
php artisan migrate

myapp>php artisan migrate
Migration table created successfully.
check database table

AI prompt
Create CRM Customer Relationship Management system
Laravel 13 React CRM Customer Relationship Management system Complete | AI

Dashboard
-Total Revenue
Sum of all closed/won deals
-Active Leads
Count of leads currently in pipeline stages (excluding closed/lost)
-Revenue Projection
Line graph showing projected revenue over time (weekly/monthly)
-Deal Velocity
Average time (in days) to close a deal
-Live Activity Feed
Real-time or recent actions (e.g., lead created, deal moved, task completed)

Database

Create migrations/models for:

-Contacts / Leads
-Deals
value, stage, status, expected_close_date
-Pipelines / Stages
-Tasks
-Invoices / Billing
-Activities (for Live Feed)

Relationships:

-User → hasMany Deals, Tasks
-Contact → hasMany Deals
-Deal → belongsTo Stage, Contact
-Deal → hasMany Tasks, Activities

Implement Pages and sidebar navigation

-Pipeline
-Drag-and-drop deals between stages
-Each deal contains:
Name
Value
Contact
Stage
Expected close date
-Lists (Contacts/Leads)
Table view of all contacts/leads
Filters (status, tags, assigned user)
CRUD operations
-Tasks
Task management system:
Assign tasks to users
Due dates
Status (pending, completed)
Link tasks to deals or contacts
-Billing
Manage invoices and payments
Track paid/unpaid invoices
Associate invoices with deals or customers
-Settings
User roles & permissions
Pipeline stage configuration
Company settings
Notification preferences

Run php artisan serve and npm run dev myapp>composer run dev
Starting Laravel development server: http://127.0.0.1:8000

Laravel 13 React Complete Point Of Sale POS using AI opencode

Laravel 13 React Complete Point Of Sale POS using AI opencode

Laravel 13 React Complete Point Of Sale POS using AI opencode

Source Code : https://github___com/cai-ro-coders/Laravel-13-React-Complete-Point-Of-Sale-POS-using-AI-opencode Download and Install Opencode
Download Laravel App

https://laravel.com/docs/13.x/installation

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel12DB
DB_USERNAME=root
DB_PASSWORD=root

Database Migration
php artisan migrate

myapp>php artisan migrate
Migration table created successfully.
check database table

chatgpt prompt
Build a modern POS system for a retail store with inventory management, sales processing, reporting, and user roles.

Implement role-based access:
Admin
Cashier
Manager
Each role should have proper permissions.

Core Modules & Features
1. Authentication & Authorization
Role-based middleware
2. Dashboard
Sales summary (daily, weekly, monthly)
Top-selling products
Low stock alerts
3. Product Management
CRUD products
Categories & brands
Barcode generation
Product variants (size, color)
Stock tracking
4. Inventory Management
Stock in/out
Supplier management
Purchase orders
Inventory history logs
5. POS Interface (IMPORTANT)
Fast product search (barcode + name)
Add to cart
Quantity adjustment
Discounts & taxes
Real-time total calculation
Multiple payment methods
Print receipt (thermal format)
6. Sales Management
Store transactions
View sales history
Refund/returns handlingv 7. Reports
Sales reports
Inventory reports
Profit/loss
Export to CSV/PDF
8. Settings
Store info
Tax configuration
Receipt customization

Database Design
Generate migrations for:

users
roles & permissions
products
categories
brands
orders
order_items
payments
suppliers
inventory_logs
Include relationships and indexes.
Run php artisan serve and npm run dev myapp>composer run dev
Starting Laravel development server: http://127.0.0.1:8000

Create Ecommerce website design similar website using Laravel 13 React and Open Code

Create Ecommerce website design similar website using Laravel 13 React and Open Code

Download and Install Opencode
Download Laravel App

https://laravel.com/docs/12.x/installation

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel12DB
DB_USERNAME=root
DB_PASSWORD=root

Database Migration
php artisan migrate

myapp>php artisan migrate
Migration table created successfully.
check database table

Run php artisan serve and npm run dev myapp>composer run dev
Starting Laravel development server: http://127.0.0.1:8000

How to Install Claude Code and Ollama in VSCode and Use Claude Code FREE

How to Install Claude Code and Ollama in VSCode and Use Claude Code FREE

Install Claude Code code.claude. com/docs/en/quickstart = curl -fsSL https://claude.ai/install.sh | bash
Download Ollama and seach model ollama launch claude --model minimax-m2.5:cloud

Inventory Management System in Laravel 12 React Starter Kit Using Open Code AI

Inventory Management System in Laravel 12 React Starter Kit Using Open Code AI
opencode prompt
create inventory management system
This will include:
1. Authentication
- Register (Admin only can create stuff)
- Role-based middleware
2. Dashboard
- Total Products
- Total Categories
- Low Stock Products
- Total Suppliers
- Recent Transactions
3. Categories Modulev
- Create Category
- Edit Category
- Delete Category
- List Category
- Slug support
4. Products Module
- Product Name
- SKU (unique)
- Category (relationship)
- Supplier (relationship)
- Purchase Price
- Selling Price
- Stock Quantitiy
- Minimum Stock Alert
- Product Image Upload
- Pagination
- Flash message
Download Laravel App

https://laravel.com/docs/12.x/installation

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel12DB
DB_USERNAME=root
DB_PASSWORD=root

Database Migration
php artisan migrate

myapp>php artisan migrate
Migration table created successfully.
check database table

Run php artisan serve and npm run dev myapp>composer run dev
Starting Laravel development server: http://127.0.0.1:8000

Laravel 12 Quiz React | React Starter Kit

Laravel 12 Quiz React | React Starter Kit

Download Laravel App

https://laravel.com/docs/12.x/installation

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel12DB
DB_USERNAME=root
DB_PASSWORD=root

Database Migration
php artisan migrate

myapp>php artisan migrate
Migration table created successfully.
check database table

php artisan make:controller HomeController change it with the following codes:
app\Http\Controllers\HomeController.php

//app\Http\Controllers\HomeController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Inertia\Inertia;
use App\Models\Question;

class HomeController extends Controller
{
    public function get_home_data()
    {
        //$question = Question::latest()->get();
        $question = Question::where('category', "Programming")->latest()->get();
        return Inertia::render('quiz', [
            'questionsitems' => $question,
        ]);

        #return Inertia::render('quiz');
    }
}

Create tables Question Model
php artisan make:model Question -m myapp>php artisan make:model Question -m
Open new Questions migrations yourproject/database/migrations laravelproject\database\migrations\_create_questions_table.php

//laravelproject\database\migrations\_create_questions_table.php
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('questions', function (Blueprint $table) {
            $table->id();
            $table->string('question');
            $table->json('options');
            $table->string('answer');
            $table->string('category');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('questions');
    }
};

myapp>php artisan migrate
Migration table created successfully.
check database table

update Question Model
app/models/Question.php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Question extends Model
{
    protected $fillable = [
        'question',
        'options',
        'answer',
        'category',
    ];

    protected $casts = [
        'options' => 'array', // Automatically casts to/from array/JSON
    ];
}

Frontend with React and InertiaJS
File: pages\quiz.tsx
reactjs\resources\js\pages\quiz.tsx

//reactjs\resources\js\pages\quiz.tsx
'use client';

import { Head } from '@inertiajs/react';
import { useState } from 'react';
import QuestionCard  from "@/components/QuestionCard"
import Confetti from "react-confetti";

interface QuestionItem {
    id: number;
    question: string;
    options: string;
    answer: string;
    category: string;
}
 
interface Props {
    questionsitems: QuestionItem[];
}

export default function quiz({ questionsitems }: Props) {
    //console.log(questionsitems)
    const [currentQuestion, setCurrentQuestion] = useState(0);
    const [selectedAnswer, setSelectedAnswer] = useState(null);
    const [score, setScore] = useState(0);
    const [isFinished, setIsFinished] = useState(false);
    const [showFeedback, setShowFeedback] = useState(false);

    const handleAnswer = (option) => {
        if (showFeedback) return;

        setSelectedAnswer(option);
        setShowFeedback(true);

        if (option === questionsitems[currentQuestion].answer) {
        setScore(score + 1);
        }
    };
    
    const goToNext = () => {
        if (currentQuestion + 1 < questionsitems.length) {
        setCurrentQuestion(currentQuestion + 1);
        setSelectedAnswer(null);
        setShowFeedback(false);
        } else {
        setIsFinished(true);
        }
    };

    const restartQuiz = () => {
        setCurrentQuestion(0);
        setScore(0);
        setSelectedAnswer(null);
        setShowFeedback(false);
        setIsFinished(false);
    };

    const calculateProgress = () => {
        if (isFinished) return 100;
        const baseProgress = (currentQuestion / questionsitems.length) * 100;
        const questionProgress = selectedAnswer ? (1 / questionsitems.length) * 100 : 0;
        return baseProgress + questionProgress;
    };

    const percentage = (score / questionsitems.length) * 100;
    const showConfetti = isFinished && percentage > 50;

    return (
        <div className="min-h-screen">
            <Head title="Quiz"></Head>
            <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-4 ">
            {showConfetti && <Confetti />}    
            <div className="text-center mb-8">
                <h1 className="text-4xl font-bold text-purple-600 mb-2">Laravel 12 Quiz React | React Starter Kit</h1>
                <p className="text-gray-400">Test your knowledge</p>
            </div>
 
            <div className="w-full max-w-xl mb-6">
                <div className="bg-gray-700 h-3 rounded-full overflow-hidden">
                <div
                    className="h-full bg-gradient-to-r from-indigo-500 to-purple-600 duration-500 ease-out transition-all"
                    style={{ width: `${calculateProgress()}%` }}
                ></div>
                </div>
            </div>
           
            {!isFinished ? (
                <>
                <QuestionCard
                    showFeedback={showFeedback}
                    onAnswer={handleAnswer}
                    data={questionsitems[currentQuestion]}
                    current={currentQuestion}
                    total={questionsitems.length}
                    selected={selectedAnswer}
                />
                <div className="mt-6 min-h-[60px]">
                    {showFeedback && (
                    <button
                        className="bg-gradient-to-r from-indigo-600 to-purple-600 py-3 px-6 rounded-lg font-medium shadow-lg cursor-pointer"
                        onClick={goToNext}
                    >
                        {currentQuestion + 1 < questionsitems.length
                        ? "Continue"
                        : "See Results"}
                    </button>
                    )}
                </div>
                </>
            ) : (
                <div className="text-center">
                <h2 className="text-3xl font-bold mb-4">Quiz Completed!</h2>
                <p className="text-xl mb-6">
                    You scored <span>{score}</span> out of{" "}
                    <span className="font-bold">{questionsitems.length}</span> and it is{" "}
                    {Math.round((score / questionsitems.length) * 100)}%
                </p>
                <button
                    className="bg-gradient-to-r from-indigo-600 to-purple-600 py-3 px-6 rounded-lg font-medium shadow-lg cursor-pointer"
                    onClick={restartQuiz}
                >
                    Restart Quiz
                </button>
                </div>
            )}

            </div>
        </div>
    );
}

File: js\components\QuestionCard.tsx
reactjs\resources\js\components\QuestionCard.tsx

//reactjs\resources\js\components\QuestionCard.tsx
const QuestionCard = ({
    data,
    onAnswer,
    showFeedback,
    selected,
    current,
    total,
}) => {
    console.log(data)
    const { question, options, answer } = data;

    const getButtonStyle = (option) => {
        if (!showFeedback) {
        return "bg-indigo-700 hover:bg-indigo-600 hover:scale-[1.01]";
        }
        if (option === answer) return "bg-emerald-600";
        if (option === selected) return "bg-rose-600";
        return "bg-gray-600";
    };

    return (
        <div className="bg-gray-800 p-6 rounded-2xl shadow-lg w-full max-w-xl border border-gray-700">
        <div className="flex justify-between items-center mb-4">
            <h2 className="text-lg font-medium text-gray-300">
            Question {current + 1} of {total}
            </h2>
            <span className="text-sm bg-gray-700 px-3 py-1 rounded-full">
            {selected
                ? Math.round(((current + 1) / total) * 100) + "% complete"
                : Math.round((current / total) * 100) + "% complete"}
            </span>
        </div>
        <p className="text-xl font-medium mb-6">{question}</p>
        <div className="grid gap-3">
            {options.map((option, index) => (
            <button
                className={`${getButtonStyle(
                option
                )} text-left px-4 py-3 cursor-pointer rounded-lg text-white `}
                key={index}
                onClick={() => onAnswer(option)}
                disabled={showFeedback}
            >
                {option}
            </button>
            ))}
        </div>
        </div>
    );
};

export default QuestionCard;

//routes/web.php
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use App\Http\Controllers\HomeController;

Route::get('/', function () {
    return Inertia::render('welcome');
})->name('home');

Route::get('/quiz', [HomeController::class, 'get_home_data'])->name('quiz');

Route::middleware(['auth', 'verified'])->group(function () {
    Route::get('dashboard', function () {
        return Inertia::render('dashboard');
    })->name('dashboard');
    
});

Run php artisan serve and npm run dev myapp>composer run dev
Starting Laravel development server: http://127.0.0.1:8000

Laravel 12 Multiple Upload Fle React | React Starter Kit

Laravel 12 Multiple Upload Fle React | React Starter Kit

Download Laravel App

https://laravel.com/docs/12.x/installation

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel12DB
DB_USERNAME=root
DB_PASSWORD=root

Database Migration
php artisan migrate

myapp>php artisan migrate
Migration table created successfully.
check database table

php artisan make:controller ProductController change it with the following codes:
app\Http\Controllers\ProductController.php

//app\Http\Controllers\ProductController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Inertia\Inertia;
use App\Models\Product;
use Illuminate\Support\Str;

class ProductController extends Controller
{
    public function create()
    {
        return Inertia::render('admin/products/create');
    }

    public function store(Request $request)
    {
        $request->validate([
            'name' => 'string|required|max:255',
            'description' => 'string|nullable',
            'images' => 'nullable|array',
            'images.*' => 'image|max:2048',
        ]);

        //   Slug
        $slug = Str::slug($request->name);
        //   Image
        $images = [];
        if ($request->hasFile('images')) {
            foreach ($request->file('images') as $image) {
                $images[] = $image->store('products/images', 'public');
            }
        }

        $new_product = [
            'name' => $request->name,
            'slug' => $slug,
            'description' => $request->description,
            'price' => $request->price,
            'images' => $images,
        ];

        $prod = Product::create($new_product);
        //dd($prod);
        return redirect()->route('dashboard.products.index')->with('success', 'Product created successfully!');
    }
}

Create tables Product Model
php artisan make:model Product -m myapp>php artisan make:model Product -m
Open new Products migrations yourproject/database/migrations laravelproject\database\migrations\_create_products_table.php

//laravelproject\database\migrations\_create_products_table.php
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('slug')->unique();
            $table->decimal('price', 10, 2)->default(0);
            $table->text('description')->nullable();
            $table->json('images')->nullable();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('products');
    }
};

myapp>php artisan migrate
Migration table created successfully.
check database table

update Product Model
app/models/Product.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    protected $fillable = [
        'name',
        'slug',
        'price',
        'description',
        'images',
    ];

    protected $casts = [
        'images' => 'array',
        'price' => 'decimal:2',
    ];
}

Frontend with React and InertiaJS
Add sidebar menu product mainNavItems from reactjs\rescourses\js\components\app-sidebar.tsx
File: pages\admin\products\create.tsx
reactjs\resources\js\pages\users\create.tsx

//reactjs\resources\js\pages\admin\products\create.tsx
import AppLayout from '@/layouts/app-layout';
import { type BreadcrumbItem } from '@/types';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Textarea } from "@/components/ui/textarea"
import { Head, router, useForm } from '@inertiajs/react';
import { CompactFileInput } from '@/components/ImageUploadInput';
import { useState } from 'react';
import { LoaderCircle } from 'lucide-react';
import InputError from '@/components/input-error';
import { CreateProductItem } from '@/types/products';

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Create Product',
        href: '/dashboard/products/create',
    },
];

export default function Dashboard() {
    const [images, setImages] = useState<File[]>([]);
    const { data, setData, processing, errors, reset } = useForm<Required<CreateProductItem>>({
        name: '',
        slug: '',
        image: null,
        description: '',
        price: 0,
        images: null,
    });

    const handleSubmit: React.FormEventHandler = (e) => {
        e.preventDefault();
        data.images = images;
        console.log(data.images);
        router.post('/dashboard/products', data, {
            onFinish: () => {
                reset();
                console.log("success");
            },
        });
    };

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Create Product" />
            <div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
                <div className="flex justify-end">Create New Product</div>
                <div className="p-10 border-sidebar-border/70 dark:border-sidebar-border relative min-h-[100vh] flex-1 overflow-hidden rounded-xl border md:min-h-min">
                <form onSubmit={handleSubmit} className="space-y-4">
                    <div className="grid gap-6">
                        <div className="grid gap-2">
                            <Label htmlFor="title">Product Name</Label>
                            <Input id="name" value={data.name} onChange={(e) => setData('name', e.target.value)} />
                            <InputError message={errors.name} className="mt-2" />
                        </div>
                    </div>
                    <div className="grid gap-6">
                        <div className="grid gap-2">
                            <Label htmlFor="price">Price</Label>
                            <Input id="price" value={data.price} onChange={(e) => setData('price', Number(e.target.value))} />
                            <InputError message={errors.price} className="mt-2" />
                        </div>
                    </div>

                    <div className="grid gap-2">
                        <div className="flex items-center">
                            <Label htmlFor="message">Product Description</Label>
                        </div>
                        <Textarea
                            value={data.description}
                            onChange={(e) => setData('description', e.target.value)}
                            placeholder="Type your description here."
                            id="message"
                        />
                        <InputError message={errors.description} />
                    </div>
 
                    <div className="grid gap-2">
                    <h2 className="mb-3 text-lg font-semibold">Upload product Images</h2>
                        <div className="rounded border p-4">
                            <CompactFileInput multiple={true} maxSizeMB={1} onChange={setImages} />
                        </div>
                    </div>
 
                    <Button type="submit" className="mt-4 w-full" disabled={processing}>
                        {processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
                        Add Product
                    </Button>   
                </form>

                </div>
            </div>
        </AppLayout>
    );
}

File: js\components\ImageUploadInput.tsx
reactjs\resources\js\components\ImageUploadInput.tsx

//reactjs\resources\js\components\ImageUploadInput.tsx
'use client';
import React, { useState } from 'react';

// Shared types
type ImageFile = {
    id: string;
    file: File;
    preview: string; 
};

type FileInputProps = {
    multiple?: boolean;
    maxSizeMB?: number;
    onChange?: (files: File[]) => void;
    acceptedFileTypes?: string;
};

// Compact File Input Component
export const CompactFileInput: React.FC<FileInputProps> = ({ multiple = false, maxSizeMB = 1, onChange, acceptedFileTypes = 'image/*' }) => {
    const [images, setImages] = useState<ImageFile[]>([]);
    const [error, setError] = useState<string | null>(null);
    const fileInputRef = React.useRef<HTMLInputElement>(null);

    const maxSizeBytes = maxSizeMB * 1024 * 1024; // Convert MB to bytes

    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const selectedFiles = Array.from(e.target.files || []);
        console.log(selectedFiles);
        // Reset error
        setError(null);

        // Validate file size
        const oversizedFiles = selectedFiles.filter((file) => file.size > maxSizeBytes);
        if (oversizedFiles.length > 0) {
            setError(`File(s) exceed the ${maxSizeMB}MB limit`);
            return;
        }

        // Handle single file mode
        if (!multiple && selectedFiles.length > 0) {
            // Remove previous image and URL
            images.forEach((img) => URL.revokeObjectURL(img.preview));

            const file = selectedFiles[0];
            const newImage = {
                id: Math.random().toString(36).substr(2, 9),
                file,
                preview: URL.createObjectURL(file),
            };

            setImages([newImage]);
            onChange?.([file]);
            return;
        }

        // Handle multiple files
        const newImages = selectedFiles.map((file) => ({
            id: Math.random().toString(36).substr(2, 9),
            file,
            preview: URL.createObjectURL(file),
        }));

        setImages((prev) => [...prev, ...newImages]);
        onChange?.(selectedFiles);
    };

    const removeImage = (id: string) => {
        setImages((prev) => {
            const updatedImages = prev.filter((img) => {
                if (img.id === id) {
                    URL.revokeObjectURL(img.preview);
                    return false;
                }
                return true;
            });

            // Notify parent component
            onChange?.(updatedImages.map((img) => img.file));

            return updatedImages;
        });
    };

    const handleBrowseClick = () => {
        fileInputRef.current?.click();
    };

    return (
        <div className="compact-file-input">
            <div className="input-container flex items-center gap-2 rounded border border-gray-300 p-2">
                <button type="button" onClick={handleBrowseClick} className="rounded bg-blue-500 px-3 py-1 text-sm text-white hover:bg-blue-600">
                    Browse
                </button>
                <span className="text-sm text-gray-500">{multiple ? 'Choose images' : 'Choose an image'}</span>
                <input ref={fileInputRef} type="file" accept={acceptedFileTypes} multiple={multiple} onChange={handleFileChange} className="hidden" />
            </div>

            {error && <div className="mt-1 text-xs text-red-500">{error}</div>}

            {images.length > 0 && (
                <div className="image-previews mt-2 flex flex-wrap gap-2">
                    {images.map((img) => (
                        <div key={img.id} className="preview-container relative h-16 w-16 overflow-hidden rounded border">
                            <img src={img.preview} alt="Preview" className="h-full w-full object-cover" />
                            <button
                                type="button"
                                onClick={() => removeImage(img.id)}
                                className="absolute top-0 right-0 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs text-white"
                            >
                                ×
                            </button>
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
};

File: js\components\ui\textarea.tsx
reactjs\resources\js\components\ui\textarea.tsx

//reactjs\resources\js\components\ui\textarea.tsx
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}
    />
  )
}

export { Textarea }

File: js\lib\utils.ts
reactjs\resources\js\lib\utils.ts

import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

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

File: js\types\products.ts
reactjs\resources\js\types\products.ts

export interface ProductItem {
    id: number;
    name: string;
    slug: string;
    price: number;
    description: string;
    images: string | null;
}

//routes/web.php
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use App\Http\Controllers\ProductController;

Route::get('/', function () {
    return Inertia::render('welcome');
})->name('home');

Route::middleware(['auth', 'verified'])->group(function () {
    Route::get('dashboard', function () {
        return Inertia::render('dashboard');
    })->name('dashboard');

    Route::get('/dashboard/products/create', [ProductController::class, 'create'])->name('dashboard.products.create');
    Route::post('/dashboard/products', [ProductController::class, 'store'])->name('dashboard.products.store');
});

require __DIR__.'/settings.php';
require __DIR__.'/auth.php';

Run php artisan serve and npm run dev myapp>composer run dev
Starting Laravel development server: http://127.0.0.1:8000

React + Vite How to Create Portfolios No coding using Lovable AI

React + Vite How to Create Portfolios No coding using Lovable AI

Create react project
Run the following command in your terminal: vite dev/guide/
npm create vite@latest

Update to latest tailwindcss
npm install tailwindcss@latest

React Vite How to Setup Path Aliases | from @/components/Navigation

React Vite How to Setup Path Aliases | from @/components/Navigation

Create react project
Run the following command in your terminal: vite dev/guide/
npm create vite@latest
Install react-router-dom

my-app\src\App.tsx my-app\src\App.tsx

//src\App.tsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Index from "./pages/Index";
import NotFound from "./pages/NotFound";

const App = () => (
  <BrowserRouter>
    <Routes>
        <Route path="/" element={<Index />} />
        <Route path="*" element={<NotFound />} />
    </Routes>
  </BrowserRouter>
);

export default App;

my-app\src\pages\Index.tsx

//pages\Index.tsx
import { Navigation } from "@/components/Navigation";

const Index = () => {
  return (
    <div className="min-h-screen">
      <Navigation />
      <main>
        <div id="home">
          Heror
        </div>
        <h1>About</h1>
        <h1>Skills</h1>
        <h1>Projects</h1>
        <h1>Contact</h1>
      </main>
      Footer
    </div>
  );
};

export default NotFound;

my-app\src\pages\NotFound.tsx

//pages\NotFound.tsx
import { useLocation } from "react-router-dom";
import { useEffect } from "react";

const NotFound = () => {
  const location = useLocation();

  useEffect(() => {
    console.error(
      "404 Error: User attempted to access non-existent route:",
      location.pathname
    );
  }, [location.pathname]);

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <div className="text-center">
        <h1 className="text-4xl font-bold mb-4">404</h1>
        <p className="text-xl text-gray-600 mb-4">Oops! Page not found</p>
        <a href="/" className="text-blue-500 hover:text-blue-700 underline">
          Return to Home
        </a>
      </div>
    </div>
  );
};

export default Navigation;

my-app\src\pages\Navigation.tsx

//pages\Navigation.tsx
import { useState, useEffect } from "react";
import logo from "@/assets/react.svg";

const navLinks = [
  { label: "Home", href: "#home" },
  { label: "About", href: "#about" },
  { label: "Skills", href: "#skills" },
  { label: "Portfolios", href: "#portfolios" },
  { label: "Contact", href: "#contact" },
];

export function Navigation() {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
    
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const scrollToSection = (href: string) => {
    console.log(`Navigating to ${href}`);
  };

  return (
    <nav className={`fixed top-0 left-0 right-0 z-50 transition-smooth ${
      scrolled ? "bg-background/90 backdrop-blur-md shadow-card" : "bg-transparent"
    }`}>
      <div className="container mx-auto max-w-6xl px-4">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <div className="text-2xl font-bold">
              <img 
                src={logo} 
                alt="logo" 
                className="h-[50px]"
              />
          </div>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center space-x-8">
            {navLinks.map((link) => (
              <button
                key={link.label}
                onClick={() => scrollToSection(link.href)}
                className="text-muted-foreground hover:text-primary transition-smooth font-medium"
              >
                {link.label}
              </button>
            ))}
            <button>
              Hire Me
            </button>
          </div>
        </div>
      </div>
    </nav>
  );
}

Update vite.config.ts
my-app\vite.config.ts

//vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@/components': '/src/components',
      '@/assets': '/src/assets',
      '@/lib': '/src/lib',
    },
  },
});

Update tsconfig.json
my-app\tsconfig.json

//tsconfig.json
{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "@components/*": ["src/components/*"],
        "@assets/*": ["src/assets/*"],
        "@lib/*": ["src/lib/*"]
    }
  }
}

Run
myapp\my-app> npm run dev

python tkinter chatbot google API Gemini

python tkinter chatbot google API Gemini chatbot.py

 
import tkinter as tk
from tkinter import scrolledtext, Entry, Button
import google.generativeai as genai

class SimpleChatbot:
    def __init__(self, root):
        self.root = root
        self.root.geometry("700x480") #Initial size and position
        self.root.title("Generative AI Chatbot")

        # Configure the Generative AI API with your API key
        genai.configure(api_key='AIzaSyA8ZbJrTvnMnnDOlN3HDT3cnwsZ906321654654WhQY')  # Replace with your actual API key

        # Create a model instance (adjust parameters as per documentation)
        self.model = genai.GenerativeModel(model_name="gemini-2.0-flash")  # Example model name

        # Create a scrolled text area for displaying the conversation
        self.conversation_area = scrolledtext.ScrolledText(root, wrap=tk.WORD, width=90, height=30)
        self.conversation_area.grid(column=0, row=0, padx=10, pady=10, columnspan=2)
        self.conversation_area.insert(tk.INSERT, "Chatbot: Hello! How can I help you today?\n")

        # Create an entry widget for the user to type their message
        self.user_input = Entry(root, width=60)
        self.user_input.grid(column=0, row=1, padx=10, pady=10)

        # Create a button to send the message
        self.send_button = Button(root, text="Send", command=self.send_message)
        self.send_button.grid(column=1, row=1, padx=10, pady=10)

    def send_message(self):
        user_message = self.user_input.get()
        self.conversation_area.insert(tk.INSERT, f"You: {user_message}\n")
        self.user_input.delete(0, tk.END)

        # Call the Generative AI API to get a response
        response = self.model.generate_content(user_message)  # Hypothetical method
        bot_response = f"Chatbot: {response.text}\n"
        self.conversation_area.insert(tk.INSERT, bot_response)

if __name__ == "__main__":
    root = tk.Tk()
    chatbot = SimpleChatbot(root)
    root.mainloop()

Laravel 12 Simple Inertia React Pagination Components | React Starter Kit

Laravel 12 Simple Inertia React Pagination Components | React Starter Kit

Download Laravel App

https://laravel.com/docs/12.x/installation

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel12dev
DB_USERNAME=root
DB_PASSWORD=root

Database Migration
php artisan migrate

myapp>php artisan migrate
Migration table created successfully.
check database table

php artisan make:controller UsersController change it with the following codes:
app\Http\Controllers\UsersController.php

//app\Http\Controllers\UsersController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Inertia\Inertia;
use App\Models\User;

class UsersController extends Controller
{
    public function home()
    {
        $query = User::select('id', 'name', 'email', 'created_at')->latest();

        // Handle search
        if (request()->has('search')) {
            $search = request('search');
            $query->where(function ($q) use ($search) {
                $q->where('name', 'like', "%{$search}%")
                    ->orWhere('email', 'like', "%{$search}%");
            });
        }

        $users = $query->paginate(10);

        return Inertia::render('users/index', [
            'users' => $users,
            'filters' => [
                'search' => request('search', ''),
            ]
        ]);
    }
}

Frontend with React and InertiaJS
Add sidebar menu product mainNavItems from reactjs\rescourses\js\components\app-sidebar.tsx
File: pages\users\index.tsx
reactjs\resources\js\pages\users\index.tsx

//reactjs\resources\js\pages\users\index.tsx
import AppLayout from '@/layouts/app-layout';
import { type BreadcrumbItem } from '@/types';
import { Head, router } from '@inertiajs/react';
import { Search } from 'lucide-react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import Pagination from '@/components/Pagination'; 
import { useState } from 'react';

interface User {
    id: number;
    name: string;
    email: string;
    created_at: string;
}

interface Props {
    users: {
        data: User[];
        current_page: number;
        last_page: number;
        per_page: number;
        total: number;
        from: number;
        to: number;
    };
    filters: {
        search: string;
        filter: string;
    };
}

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Laravel 12 Simple Inertia React Pagination Components | React Starter Kit',
        href: '/admin/users',
    },
];

export default function UsersIndex({ users, filters }: Props) {
    //console.log(users); 
    const [searchTerm, setSearchTerm] = useState(filters.search);

    const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        router.get(route('users.home'), {
            search: searchTerm,
        }, {
            preserveState: true,
            preserveScroll: true,
        });
    };
    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Users" />
            <div className="flex h-full flex-1 flex-col gap-6 rounded-xl p-6 bg-gradient-to-br from-background to-muted/20">
                <div className="flex gap-4 mb-4">
                    <form onSubmit={handleSearch} className="relative flex-1">
                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                        <Input placeholder="Search name or email..."
                            value={searchTerm}
                            onChange={(e) => setSearchTerm(e.target.value)}
                            className="pl-10 bg-gray-200  text-black"
                        />
                    </form>                                     
                </div>
                <div className="rounded-md border">
                    <div className="relative w-full overflow-auto">
                        <table className="w-full caption-bottom text-sm  bg-white rounded-lg">
                            <thead>
                                <tr className="bg-gray-200 text-black">
                                    <th className="py-2 px-4 text-left border-b">ID</th>
                                    <th className="py-2 px-4 text-left border-b">Name</th>
                                    <th className="py-2 px-4 text-left border-b">Email</th>
                                    <th className="py-2 px-4 text-left border-b">Created At</th>                                   
                                    <th className="py-2 px-4 text-right border-b">Actions</th>                                
                                </tr>                            
                            </thead>   
                            <tbody>
                                {users.data.map((user) => (
                                    <tr key={user.id} className="hover:bg-gray-50 text-black">
                                        <td className="p-4 align-middle font-medium border-b">{user.id}</td>
                                        <td className="p-4 align-middle font-medium border-b">{user.name}</td>
                                        <td className="p-4 align-middle font-medium border-b">{user.email}</td>
                                        <td className="p-4 align-middle font-medium border-b">{new Date(user.created_at).toLocaleDateString()}</td>
                                        <td className="p-4 align-middle text-right border-b">
                                            <div className="flex justify-end gap-2">
                                                <Button variant="ghost"
                                                    className="w-full sm:w-auto bg-blue-600 text-white rounded-lg px-4 py-2 hover:bg-blue-700"
                                                >
                                                    Edit
                                                </Button>                                                
                                                <Button variant="ghost"
                                                    className="w-full sm:w-auto bg-red-600 text-white rounded-lg px-4 py-2 hover:bg-red-700 transition transition ml-2"
                                                >
                                                    Delete
                                                </Button>                                            
                                            </div>
                                        </td>
                                    </tr>
                                ))}
                                {users.total === 0 && (
                                    <tr>
                                        <td colSpan={6} className="p-4 text-center text-muted-foreground">
                                            No users Found                                        
                                        </td>
                                    </tr>
                                )}
                            </tbody> 
                        </table>              
                    </div>                
                </div>
                {/* Pagination */}
                <div className="flex items-center justify-between px-2">
                    <div className="text-sm text-muted-foreground">
                        Showing {users.from} to {users.to} of {users.total} results  
                    </div>                    
                    <div className="flex items-center space-x-2">
                    <Pagination links={users.links}/>                  
                    </div>                
                </div> 
            </div>
        </AppLayout>
    );
}

File: js\components\Pagination.tsx
reactjs\resources\js\components\Pagination.tsx

//reactjs\resources\js\components\Pagination.tsx
import { Link } from '@inertiajs/react'

export default function Pagination({ links }) {
    console.log(links);
    return (
        <div className="flex flex-wrap items-center space-x-1 mt-4">
            {links.map((link, index) => (
                <Link 
                    key={index}    
                    href={link.url ?? '#'}
                    dangerouslySetInnerHTML={{ __html: link.label}}
                    className={`text-lg rounded-lg px-4 py-2 border gap-2
                        ${link.active ? 'border-t-blue-600 text-white  bg-blue-600' : 'bg-white text-gray-700'}
                        ${!link.url ? 'opacity-50 pointer-events-none' : 'hover:bg-gray-100'}`}
                />
            ))}
        </div>
    )
}

php artisan tinker
User::factory()->count(1000)->create()
Routes
routes/web.php

//routes/web.php
<?php

use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use App\Http\Controllers\UsersController;

Route::get('/', function () {
    return Inertia::render('welcome');
})->name('home');

Route::middleware(['auth', 'verified'])->group(function () {
    Route::get('dashboard', function () {
        return Inertia::render('dashboard');
    })->name('dashboard');

    Route::get('/admin/users-pagination-search', [UsersController::class, 'home'])->name('users.home');
});

require __DIR__.'/settings.php';
require __DIR__.'/auth.php';

Run php artisan serve and npm run dev myapp>composer run dev
Starting Laravel development server: http://127.0.0.1:8000