Initial fullstack scaffold: Events, Guests, Budget, Bookings
- Express backend with PostgreSQL (JWT auth, full CRUD) - React + Vite + TailwindCSS frontend in Hebrew (RTL) - Features: Digital Booking System, Guest Management, Smart Budget Management - Docker Compose with postgres healthcheck - Auto-runs migrations on startup Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Fullstack Developer
13
client/index.html
Normal file
13
client/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="he" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>אירועית - ניהול אירועים</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
31
client/package.json
Normal file
31
client/package.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "airewit-client",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.21.0",
|
||||
"zustand": "^4.4.7",
|
||||
"@tanstack/react-query": "^5.17.0",
|
||||
"axios": "^1.6.3",
|
||||
"lucide-react": "^0.303.0",
|
||||
"clsx": "^2.1.0",
|
||||
"tailwind-merge": "^2.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.43",
|
||||
"@types/react-dom": "^18.2.17",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"postcss": "^8.4.32",
|
||||
"tailwindcss": "^3.4.0",
|
||||
"vite": "^5.0.8"
|
||||
}
|
||||
}
|
||||
6
client/postcss.config.js
Normal file
6
client/postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
39
client/src/App.jsx
Normal file
39
client/src/App.jsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
|
||||
import LoginPage from './pages/LoginPage'
|
||||
import RegisterPage from './pages/RegisterPage'
|
||||
import DashboardPage from './pages/DashboardPage'
|
||||
import EventPage from './pages/EventPage'
|
||||
import GuestsPage from './pages/GuestsPage'
|
||||
import BudgetPage from './pages/BudgetPage'
|
||||
import BookingsPage from './pages/BookingsPage'
|
||||
import Layout from './components/Layout'
|
||||
|
||||
function PrivateRoute({ children }) {
|
||||
const token = localStorage.getItem('token')
|
||||
return token ? children : <Navigate to="/login" replace />
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/register" element={<RegisterPage />} />
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<Layout />
|
||||
</PrivateRoute>
|
||||
}
|
||||
>
|
||||
<Route index element={<DashboardPage />} />
|
||||
<Route path="events/:id" element={<EventPage />} />
|
||||
<Route path="events/:id/guests" element={<GuestsPage />} />
|
||||
<Route path="events/:id/budget" element={<BudgetPage />} />
|
||||
<Route path="events/:id/bookings" element={<BookingsPage />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
25
client/src/api.js
Normal file
25
client/src/api.js
Normal file
@@ -0,0 +1,25 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: '/api',
|
||||
})
|
||||
|
||||
api.interceptors.request.use((config) => {
|
||||
const token = localStorage.getItem('token')
|
||||
if (token) config.headers.Authorization = `Bearer ${token}`
|
||||
return config
|
||||
})
|
||||
|
||||
api.interceptors.response.use(
|
||||
(res) => res,
|
||||
(err) => {
|
||||
if (err.response?.status === 401) {
|
||||
localStorage.removeItem('token')
|
||||
localStorage.removeItem('user')
|
||||
window.location.href = '/login'
|
||||
}
|
||||
return Promise.reject(err)
|
||||
}
|
||||
)
|
||||
|
||||
export default api
|
||||
41
client/src/components/Layout.jsx
Normal file
41
client/src/components/Layout.jsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import { Outlet, Link, useNavigate } from 'react-router-dom'
|
||||
import { CalendarDays, LogOut, Menu } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function Layout() {
|
||||
const navigate = useNavigate()
|
||||
const user = JSON.parse(localStorage.getItem('user') || '{}')
|
||||
const [mobileOpen, setMobileOpen] = useState(false)
|
||||
|
||||
function logout() {
|
||||
localStorage.removeItem('token')
|
||||
localStorage.removeItem('user')
|
||||
navigate('/login')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
<header className="bg-indigo-700 text-white shadow-md">
|
||||
<div className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
|
||||
<Link to="/" className="flex items-center gap-2 text-xl font-bold">
|
||||
<CalendarDays className="w-6 h-6" />
|
||||
אירועית
|
||||
</Link>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-indigo-200 text-sm hidden sm:block">שלום, {user.name}</span>
|
||||
<button
|
||||
onClick={logout}
|
||||
className="flex items-center gap-1 text-sm hover:text-indigo-200 transition-colors"
|
||||
>
|
||||
<LogOut className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">יציאה</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main className="flex-1 max-w-7xl mx-auto w-full px-4 py-6">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
12
client/src/index.css
Normal file
12
client/src/index.css
Normal file
@@ -0,0 +1,12 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
direction: rtl;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
10
client/src/main.jsx
Normal file
10
client/src/main.jsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App'
|
||||
import './index.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
185
client/src/pages/BookingsPage.jsx
Normal file
185
client/src/pages/BookingsPage.jsx
Normal file
@@ -0,0 +1,185 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useParams, Link } from 'react-router-dom'
|
||||
import { Plus, Trash2, Edit, ArrowRight, Phone } from 'lucide-react'
|
||||
import api from '../api'
|
||||
|
||||
const SUPPLIER_TYPES = ['קייטרינג', 'מוזיקה', 'צילום', 'וידאו', 'פרחים', 'אולם', 'הסעות', 'אינסטלציה', 'תאורה', 'אחר']
|
||||
const STATUS_OPTIONS = { pending: 'ממתין', confirmed: 'מאושר', cancelled: 'בוטל', completed: 'הושלם' }
|
||||
const STATUS_COLORS = {
|
||||
pending: 'bg-yellow-100 text-yellow-700',
|
||||
confirmed: 'bg-green-100 text-green-700',
|
||||
cancelled: 'bg-red-100 text-red-600',
|
||||
completed: 'bg-gray-100 text-gray-600',
|
||||
}
|
||||
|
||||
export default function BookingsPage() {
|
||||
const { id } = useParams()
|
||||
const [bookings, setBookings] = useState([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [showForm, setShowForm] = useState(false)
|
||||
const [editBooking, setEditBooking] = useState(null)
|
||||
const [form, setForm] = useState({ supplier_name: '', supplier_type: 'אחר', contact_info: '', cost: '', status: 'pending', notes: '' })
|
||||
|
||||
useEffect(() => { loadBookings() }, [id])
|
||||
|
||||
async function loadBookings() {
|
||||
try {
|
||||
const res = await api.get(`/bookings/event/${id}`)
|
||||
setBookings(res.data)
|
||||
} catch (err) { console.error(err) }
|
||||
finally { setLoading(false) }
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
setEditBooking(null)
|
||||
setForm({ supplier_name: '', supplier_type: 'אחר', contact_info: '', cost: '', status: 'pending', notes: '' })
|
||||
setShowForm(true)
|
||||
}
|
||||
|
||||
function openEdit(b) {
|
||||
setEditBooking(b)
|
||||
setForm({ supplier_name: b.supplier_name, supplier_type: b.supplier_type || 'אחר', contact_info: b.contact_info || '', cost: b.cost || '', status: b.status, notes: b.notes || '' })
|
||||
setShowForm(true)
|
||||
}
|
||||
|
||||
async function saveBooking(e) {
|
||||
e.preventDefault()
|
||||
try {
|
||||
const data = { ...form, cost: parseFloat(form.cost) || 0 }
|
||||
if (editBooking) {
|
||||
await api.put(`/bookings/${editBooking.id}`, data)
|
||||
} else {
|
||||
await api.post('/bookings', { ...data, event_id: id })
|
||||
}
|
||||
setShowForm(false)
|
||||
loadBookings()
|
||||
} catch (err) { console.error(err) }
|
||||
}
|
||||
|
||||
async function deleteBooking(bookingId) {
|
||||
if (!confirm('מחוק הזמנה?')) return
|
||||
try {
|
||||
await api.delete(`/bookings/${bookingId}`)
|
||||
setBookings(bookings.filter(b => b.id !== bookingId))
|
||||
} catch (err) { console.error(err) }
|
||||
}
|
||||
|
||||
const totalCost = bookings.reduce((s, b) => s + parseFloat(b.cost || 0), 0)
|
||||
const confirmedCount = bookings.filter(b => b.status === 'confirmed').length
|
||||
|
||||
if (loading) return <div className="flex justify-center py-20 text-gray-400">טוען...</div>
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-6 text-sm text-gray-500">
|
||||
<Link to="/" className="hover:text-indigo-600 flex items-center gap-1"><ArrowRight className="w-4 h-4" /> הדשבורד</Link>
|
||||
<span>/</span>
|
||||
<Link to={`/events/${id}`} className="hover:text-indigo-600">האירוע</Link>
|
||||
<span>/</span>
|
||||
<span className="text-gray-800 font-medium">הזמנות ספקים</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h1 className="text-2xl font-bold text-gray-900">הזמנות ספקים</h1>
|
||||
<button onClick={openCreate} className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition-colors">
|
||||
<Plus className="w-4 h-4" /> הוסף הזמנה
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-4 mb-6">
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-4 text-center">
|
||||
<p className="text-2xl font-bold text-gray-800">{bookings.length}</p>
|
||||
<p className="text-xs text-gray-500">סה"כ הזמנות</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-4 text-center">
|
||||
<p className="text-2xl font-bold text-green-600">{confirmedCount}</p>
|
||||
<p className="text-xs text-gray-500">מאושרות</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-4 text-center">
|
||||
<p className="text-2xl font-bold text-indigo-600">₪{Number(totalCost).toLocaleString('he-IL')}</p>
|
||||
<p className="text-xs text-gray-500">עלות כוללת</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
{showForm && (
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
|
||||
<h2 className="text-lg font-semibold mb-4">{editBooking ? 'עריכת הזמנה' : 'הוספת הזמנה'}</h2>
|
||||
<form onSubmit={saveBooking} className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">שם ספק *</label>
|
||||
<input required value={form.supplier_name} onChange={e => setForm({ ...form, supplier_name: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">סוג ספק</label>
|
||||
<select value={form.supplier_type} onChange={e => setForm({ ...form, supplier_type: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
{SUPPLIER_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">פרטי קשר</label>
|
||||
<input value={form.contact_info} onChange={e => setForm({ ...form, contact_info: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">עלות (₪)</label>
|
||||
<input type="number" min="0" value={form.cost} onChange={e => setForm({ ...form, cost: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">סטטוס</label>
|
||||
<select value={form.status} onChange={e => setForm({ ...form, status: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
{Object.entries(STATUS_OPTIONS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">הערות</label>
|
||||
<input value={form.notes} onChange={e => setForm({ ...form, notes: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
|
||||
</div>
|
||||
<div className="sm:col-span-2 flex gap-3">
|
||||
<button type="submit" className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg transition-colors">שמור</button>
|
||||
<button type="button" onClick={() => setShowForm(false)} className="border border-gray-300 hover:bg-gray-50 px-6 py-2 rounded-lg transition-colors">ביטול</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Bookings list */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{bookings.length === 0 ? (
|
||||
<div className="col-span-2 text-center py-20 text-gray-400">אין הזמנות ספקים עדיין</div>
|
||||
) : bookings.map(b => (
|
||||
<div key={b.id} className="bg-white rounded-xl border border-gray-200 p-4">
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div>
|
||||
<p className="font-semibold text-gray-900">{b.supplier_name}</p>
|
||||
<p className="text-sm text-gray-500">{b.supplier_type}</p>
|
||||
</div>
|
||||
<span className={`text-xs px-2 py-1 rounded-full font-medium ${STATUS_COLORS[b.status] || 'bg-gray-100 text-gray-600'}`}>
|
||||
{STATUS_OPTIONS[b.status] || b.status}
|
||||
</span>
|
||||
</div>
|
||||
{b.contact_info && (
|
||||
<p className="text-sm text-gray-500 flex items-center gap-1 mb-2">
|
||||
<Phone className="w-3 h-3" /> {b.contact_info}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="font-bold text-indigo-600">₪{Number(b.cost).toLocaleString('he-IL')}</p>
|
||||
<div className="flex gap-1">
|
||||
<button onClick={() => openEdit(b)} className="p-1.5 hover:bg-indigo-50 rounded text-indigo-600"><Edit className="w-4 h-4" /></button>
|
||||
<button onClick={() => deleteBooking(b.id)} className="p-1.5 hover:bg-red-50 rounded text-red-500"><Trash2 className="w-4 h-4" /></button>
|
||||
</div>
|
||||
</div>
|
||||
{b.notes && <p className="text-xs text-gray-400 mt-2">{b.notes}</p>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
195
client/src/pages/BudgetPage.jsx
Normal file
195
client/src/pages/BudgetPage.jsx
Normal file
@@ -0,0 +1,195 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useParams, Link } from 'react-router-dom'
|
||||
import { Plus, Trash2, Edit, ArrowRight, TrendingUp, TrendingDown, AlertTriangle } from 'lucide-react'
|
||||
import api from '../api'
|
||||
|
||||
const CATEGORIES = ['אולם', 'קייטרינג', 'מוזיקה/DJ', 'צילום/וידאו', 'פרחים', 'הזמנות', 'הסעות', 'אחר']
|
||||
const STATUS_OPTIONS = { planned: 'מתוכנן', paid: 'שולם', partial: 'חלקי', cancelled: 'בוטל' }
|
||||
|
||||
export default function BudgetPage() {
|
||||
const { id } = useParams()
|
||||
const [items, setItems] = useState([])
|
||||
const [summary, setSummary] = useState(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [showForm, setShowForm] = useState(false)
|
||||
const [editItem, setEditItem] = useState(null)
|
||||
const [form, setForm] = useState({ category: 'אחר', description: '', estimated_cost: '', actual_cost: '', status: 'planned' })
|
||||
|
||||
useEffect(() => { loadData() }, [id])
|
||||
|
||||
async function loadData() {
|
||||
try {
|
||||
const [itemsRes, summaryRes] = await Promise.all([
|
||||
api.get(`/budget/event/${id}`),
|
||||
api.get(`/budget/event/${id}/summary`),
|
||||
])
|
||||
setItems(itemsRes.data)
|
||||
setSummary(summaryRes.data)
|
||||
} catch (err) { console.error(err) }
|
||||
finally { setLoading(false) }
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
setEditItem(null)
|
||||
setForm({ category: 'אחר', description: '', estimated_cost: '', actual_cost: '', status: 'planned' })
|
||||
setShowForm(true)
|
||||
}
|
||||
|
||||
function openEdit(item) {
|
||||
setEditItem(item)
|
||||
setForm({ category: item.category, description: item.description || '', estimated_cost: item.estimated_cost || '', actual_cost: item.actual_cost || '', status: item.status })
|
||||
setShowForm(true)
|
||||
}
|
||||
|
||||
async function saveItem(e) {
|
||||
e.preventDefault()
|
||||
try {
|
||||
const data = { ...form, estimated_cost: parseFloat(form.estimated_cost) || 0, actual_cost: form.actual_cost ? parseFloat(form.actual_cost) : null }
|
||||
if (editItem) {
|
||||
await api.put(`/budget/${editItem.id}`, data)
|
||||
} else {
|
||||
await api.post('/budget', { ...data, event_id: id })
|
||||
}
|
||||
setShowForm(false)
|
||||
loadData()
|
||||
} catch (err) { console.error(err) }
|
||||
}
|
||||
|
||||
async function deleteItem(itemId) {
|
||||
if (!confirm('מחוק פריט?')) return
|
||||
try {
|
||||
await api.delete(`/budget/${itemId}`)
|
||||
loadData()
|
||||
} catch (err) { console.error(err) }
|
||||
}
|
||||
|
||||
if (loading) return <div className="flex justify-center py-20 text-gray-400">טוען...</div>
|
||||
|
||||
const overBudget = summary?.over_budget
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-6 text-sm text-gray-500">
|
||||
<Link to="/" className="hover:text-indigo-600 flex items-center gap-1"><ArrowRight className="w-4 h-4" /> הדשבורד</Link>
|
||||
<span>/</span>
|
||||
<Link to={`/events/${id}`} className="hover:text-indigo-600">האירוע</Link>
|
||||
<span>/</span>
|
||||
<span className="text-gray-800 font-medium">תקציב</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h1 className="text-2xl font-bold text-gray-900">ניהול תקציב</h1>
|
||||
<button onClick={openCreate} className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition-colors">
|
||||
<Plus className="w-4 h-4" /> הוסף הוצאה
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Summary */}
|
||||
{summary && (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6">
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-4">
|
||||
<p className="text-xs text-gray-500 mb-1">תקציב כולל</p>
|
||||
<p className="text-xl font-bold text-gray-800">₪{Number(summary.event_budget).toLocaleString('he-IL')}</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-4">
|
||||
<p className="text-xs text-gray-500 mb-1">הוצאות מתוכננות</p>
|
||||
<p className="text-xl font-bold text-blue-600">₪{Number(summary.total_estimated).toLocaleString('he-IL')}</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-4">
|
||||
<p className="text-xs text-gray-500 mb-1">הוצאות בפועל</p>
|
||||
<p className="text-xl font-bold text-green-600">₪{Number(summary.total_actual).toLocaleString('he-IL')}</p>
|
||||
</div>
|
||||
<div className={`rounded-xl border p-4 ${overBudget ? 'bg-red-50 border-red-200' : 'bg-green-50 border-green-200'}`}>
|
||||
<p className="text-xs text-gray-500 mb-1">יתרת תקציב</p>
|
||||
<div className="flex items-center gap-1">
|
||||
{overBudget ? <TrendingDown className="w-4 h-4 text-red-500" /> : <TrendingUp className="w-4 h-4 text-green-500" />}
|
||||
<p className={`text-xl font-bold ${overBudget ? 'text-red-600' : 'text-green-600'}`}>
|
||||
₪{Number(Math.abs(summary.remaining_budget)).toLocaleString('he-IL')}
|
||||
</p>
|
||||
</div>
|
||||
{overBudget && <p className="text-xs text-red-500 mt-1 flex items-center gap-1"><AlertTriangle className="w-3 h-3" /> חריגה מהתקציב!</p>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form */}
|
||||
{showForm && (
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
|
||||
<h2 className="text-lg font-semibold mb-4">{editItem ? 'עריכת הוצאה' : 'הוספת הוצאה'}</h2>
|
||||
<form onSubmit={saveItem} className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">קטגוריה *</label>
|
||||
<select required value={form.category} onChange={e => setForm({ ...form, category: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
{CATEGORIES.map(c => <option key={c} value={c}>{c}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">תיאור</label>
|
||||
<input value={form.description} onChange={e => setForm({ ...form, description: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">עלות מוערכת (₪) *</label>
|
||||
<input type="number" min="0" required value={form.estimated_cost} onChange={e => setForm({ ...form, estimated_cost: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">עלות בפועל (₪)</label>
|
||||
<input type="number" min="0" value={form.actual_cost} onChange={e => setForm({ ...form, actual_cost: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">סטטוס</label>
|
||||
<select value={form.status} onChange={e => setForm({ ...form, status: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
{Object.entries(STATUS_OPTIONS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="sm:col-span-2 flex gap-3">
|
||||
<button type="submit" className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg transition-colors">שמור</button>
|
||||
<button type="button" onClick={() => setShowForm(false)} className="border border-gray-300 hover:bg-gray-50 px-6 py-2 rounded-lg transition-colors">ביטול</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Items table */}
|
||||
<div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-gray-50 border-b border-gray-200">
|
||||
<tr>
|
||||
<th className="text-right px-4 py-3 font-medium text-gray-600">קטגוריה</th>
|
||||
<th className="text-right px-4 py-3 font-medium text-gray-600 hidden sm:table-cell">תיאור</th>
|
||||
<th className="text-right px-4 py-3 font-medium text-gray-600">מוערך</th>
|
||||
<th className="text-right px-4 py-3 font-medium text-gray-600">בפועל</th>
|
||||
<th className="text-right px-4 py-3 font-medium text-gray-600 hidden md:table-cell">סטטוס</th>
|
||||
<th className="px-4 py-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{items.length === 0 ? (
|
||||
<tr><td colSpan={6} className="text-center py-8 text-gray-400">אין פריטים בתקציב</td></tr>
|
||||
) : items.map(item => (
|
||||
<tr key={item.id} className="hover:bg-gray-50">
|
||||
<td className="px-4 py-3 font-medium">{item.category}</td>
|
||||
<td className="px-4 py-3 text-gray-500 hidden sm:table-cell">{item.description || '—'}</td>
|
||||
<td className="px-4 py-3 text-blue-600 font-medium">₪{Number(item.estimated_cost).toLocaleString('he-IL')}</td>
|
||||
<td className="px-4 py-3 text-green-600 font-medium">{item.actual_cost ? `₪${Number(item.actual_cost).toLocaleString('he-IL')}` : '—'}</td>
|
||||
<td className="px-4 py-3 hidden md:table-cell">
|
||||
<span className="text-xs px-2 py-1 bg-gray-100 text-gray-600 rounded-full">{STATUS_OPTIONS[item.status] || item.status}</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex gap-1 justify-end">
|
||||
<button onClick={() => openEdit(item)} className="p-1.5 hover:bg-indigo-50 rounded text-indigo-600"><Edit className="w-4 h-4" /></button>
|
||||
<button onClick={() => deleteItem(item.id)} className="p-1.5 hover:bg-red-50 rounded text-red-500"><Trash2 className="w-4 h-4" /></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
203
client/src/pages/DashboardPage.jsx
Normal file
203
client/src/pages/DashboardPage.jsx
Normal file
@@ -0,0 +1,203 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Plus, Calendar, Users, Wallet, Tag } from 'lucide-react'
|
||||
import api from '../api'
|
||||
|
||||
const EVENT_TYPES = {
|
||||
wedding: 'חתונה',
|
||||
bar_mitzvah: 'בר/בת מצווה',
|
||||
birthday: 'יום הולדת',
|
||||
corporate: 'אירוע עסקי',
|
||||
general: 'כללי',
|
||||
}
|
||||
|
||||
const STATUS_LABELS = {
|
||||
planned: 'מתוכנן',
|
||||
active: 'פעיל',
|
||||
completed: 'הסתיים',
|
||||
cancelled: 'בוטל',
|
||||
}
|
||||
|
||||
const STATUS_COLORS = {
|
||||
planned: 'bg-blue-100 text-blue-700',
|
||||
active: 'bg-green-100 text-green-700',
|
||||
completed: 'bg-gray-100 text-gray-600',
|
||||
cancelled: 'bg-red-100 text-red-600',
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const [events, setEvents] = useState([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [showForm, setShowForm] = useState(false)
|
||||
const [form, setForm] = useState({ name: '', date: '', location: '', event_type: 'general', budget: '' })
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
loadEvents()
|
||||
}, [])
|
||||
|
||||
async function loadEvents() {
|
||||
try {
|
||||
const res = await api.get('/events')
|
||||
setEvents(res.data)
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function createEvent(e) {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
setSaving(true)
|
||||
try {
|
||||
await api.post('/events', { ...form, budget: parseFloat(form.budget) || 0 })
|
||||
setForm({ name: '', date: '', location: '', event_type: 'general', budget: '' })
|
||||
setShowForm(false)
|
||||
loadEvents()
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.error || 'שגיאה ביצירת אירוע')
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) return <div className="flex justify-center py-20 text-gray-400">טוען...</div>
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900">האירועים שלי</h1>
|
||||
<button
|
||||
onClick={() => setShowForm(!showForm)}
|
||||
className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
אירוע חדש
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
|
||||
<h2 className="text-lg font-semibold mb-4">יצירת אירוע חדש</h2>
|
||||
{error && <div className="bg-red-50 text-red-600 rounded-lg px-4 py-2 mb-4 text-sm">{error}</div>}
|
||||
<form onSubmit={createEvent} className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">שם האירוע *</label>
|
||||
<input
|
||||
required
|
||||
value={form.name}
|
||||
onChange={e => setForm({ ...form, name: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">תאריך *</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
required
|
||||
value={form.date}
|
||||
onChange={e => setForm({ ...form, date: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">מיקום</label>
|
||||
<input
|
||||
value={form.location}
|
||||
onChange={e => setForm({ ...form, location: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">סוג אירוע</label>
|
||||
<select
|
||||
value={form.event_type}
|
||||
onChange={e => setForm({ ...form, event_type: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
>
|
||||
{Object.entries(EVENT_TYPES).map(([k, v]) => (
|
||||
<option key={k} value={k}>{v}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">תקציב (₪)</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
value={form.budget}
|
||||
onChange={e => setForm({ ...form, budget: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2 flex gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
{saving ? 'שומר...' : 'צור אירוע'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowForm(false)}
|
||||
className="border border-gray-300 hover:bg-gray-50 px-6 py-2 rounded-lg transition-colors"
|
||||
>
|
||||
ביטול
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{events.length === 0 ? (
|
||||
<div className="text-center py-20 text-gray-400">
|
||||
<Calendar className="w-16 h-16 mx-auto mb-4 opacity-30" />
|
||||
<p className="text-lg">אין אירועים עדיין</p>
|
||||
<p className="text-sm mt-1">לחץ על "אירוע חדש" כדי להתחיל</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{events.map(event => (
|
||||
<Link
|
||||
key={event.id}
|
||||
to={`/events/${event.id}`}
|
||||
className="bg-white rounded-xl shadow-sm border border-gray-200 p-5 hover:shadow-md transition-shadow"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<h3 className="font-semibold text-gray-900">{event.name}</h3>
|
||||
<span className={`text-xs px-2 py-1 rounded-full font-medium ${STATUS_COLORS[event.status] || 'bg-gray-100 text-gray-600'}`}>
|
||||
{STATUS_LABELS[event.status] || event.status}
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-1 text-sm text-gray-500">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="w-4 h-4" />
|
||||
{new Date(event.date).toLocaleDateString('he-IL', { dateStyle: 'medium' })}
|
||||
</div>
|
||||
{event.location && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Tag className="w-4 h-4" />
|
||||
{event.location}
|
||||
</div>
|
||||
)}
|
||||
{event.budget > 0 && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Wallet className="w-4 h-4" />
|
||||
₪{Number(event.budget).toLocaleString('he-IL')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-3 pt-3 border-t border-gray-100 text-xs text-indigo-600 font-medium">
|
||||
{EVENT_TYPES[event.event_type] || event.event_type}
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
194
client/src/pages/EventPage.jsx
Normal file
194
client/src/pages/EventPage.jsx
Normal file
@@ -0,0 +1,194 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useParams, Link, useNavigate } from 'react-router-dom'
|
||||
import { Users, Wallet, CalendarDays, Trash2, Edit, ArrowRight, BookOpen } from 'lucide-react'
|
||||
import api from '../api'
|
||||
|
||||
const EVENT_TYPES = {
|
||||
wedding: 'חתונה', bar_mitzvah: 'בר/בת מצווה', birthday: 'יום הולדת',
|
||||
corporate: 'אירוע עסקי', general: 'כללי',
|
||||
}
|
||||
const STATUS_OPTIONS = ['planned', 'active', 'completed', 'cancelled']
|
||||
const STATUS_LABELS = { planned: 'מתוכנן', active: 'פעיל', completed: 'הסתיים', cancelled: 'בוטל' }
|
||||
|
||||
export default function EventPage() {
|
||||
const { id } = useParams()
|
||||
const navigate = useNavigate()
|
||||
const [event, setEvent] = useState(null)
|
||||
const [stats, setStats] = useState(null)
|
||||
const [editing, setEditing] = useState(false)
|
||||
const [form, setForm] = useState({})
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
loadEvent()
|
||||
}, [id])
|
||||
|
||||
async function loadEvent() {
|
||||
try {
|
||||
const [eRes, sRes] = await Promise.all([
|
||||
api.get(`/events/${id}`),
|
||||
api.get(`/events/${id}/stats`),
|
||||
])
|
||||
setEvent(eRes.data)
|
||||
setStats(sRes.data)
|
||||
setForm({
|
||||
name: eRes.data.name,
|
||||
date: eRes.data.date?.slice(0, 16),
|
||||
location: eRes.data.location || '',
|
||||
event_type: eRes.data.event_type,
|
||||
budget: eRes.data.budget,
|
||||
status: eRes.data.status,
|
||||
notes: eRes.data.notes || '',
|
||||
})
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function saveEvent(e) {
|
||||
e.preventDefault()
|
||||
try {
|
||||
const res = await api.put(`/events/${id}`, { ...form, budget: parseFloat(form.budget) || 0 })
|
||||
setEvent(res.data)
|
||||
setEditing(false)
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteEvent() {
|
||||
if (!confirm('האם אתה בטוח שברצונך למחוק את האירוע?')) return
|
||||
try {
|
||||
await api.delete(`/events/${id}`)
|
||||
navigate('/')
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) return <div className="flex justify-center py-20 text-gray-400">טוען...</div>
|
||||
if (!event) return <div className="text-center py-20 text-gray-400">האירוע לא נמצא</div>
|
||||
|
||||
const totalGuests = stats?.guests?.reduce((s, r) => s + parseInt(r.count), 0) || 0
|
||||
const confirmedGuests = stats?.guests?.find(r => r.rsvp_status === 'confirmed')?.count || 0
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-6 text-sm text-gray-500">
|
||||
<Link to="/" className="hover:text-indigo-600 flex items-center gap-1">
|
||||
<ArrowRight className="w-4 h-4" /> הדשבורד
|
||||
</Link>
|
||||
<span>/</span>
|
||||
<span className="text-gray-800 font-medium">{event.name}</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
|
||||
{!editing ? (
|
||||
<div>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">{event.name}</h1>
|
||||
<p className="text-gray-500">{EVENT_TYPES[event.event_type]} · {STATUS_LABELS[event.status]}</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setEditing(true)}
|
||||
className="flex items-center gap-1 text-sm border border-gray-300 hover:bg-gray-50 px-3 py-1.5 rounded-lg"
|
||||
>
|
||||
<Edit className="w-4 h-4" /> עריכה
|
||||
</button>
|
||||
<button
|
||||
onClick={deleteEvent}
|
||||
className="flex items-center gap-1 text-sm border border-red-200 text-red-600 hover:bg-red-50 px-3 py-1.5 rounded-lg"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" /> מחיקה
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm text-gray-600">
|
||||
<div><span className="font-medium block">תאריך</span>{new Date(event.date).toLocaleString('he-IL')}</div>
|
||||
<div><span className="font-medium block">מיקום</span>{event.location || '—'}</div>
|
||||
<div><span className="font-medium block">תקציב</span>₪{Number(event.budget).toLocaleString('he-IL')}</div>
|
||||
{event.notes && <div className="col-span-2"><span className="font-medium block">הערות</span>{event.notes}</div>}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={saveEvent} className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">שם</label>
|
||||
<input required value={form.name} onChange={e => setForm({ ...form, name: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">תאריך</label>
|
||||
<input type="datetime-local" required value={form.date} onChange={e => setForm({ ...form, date: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">מיקום</label>
|
||||
<input value={form.location} onChange={e => setForm({ ...form, location: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">סטטוס</label>
|
||||
<select value={form.status} onChange={e => setForm({ ...form, status: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
{STATUS_OPTIONS.map(s => <option key={s} value={s}>{STATUS_LABELS[s]}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">תקציב (₪)</label>
|
||||
<input type="number" min="0" value={form.budget} onChange={e => setForm({ ...form, budget: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">הערות</label>
|
||||
<input value={form.notes} onChange={e => setForm({ ...form, notes: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
|
||||
</div>
|
||||
<div className="sm:col-span-2 flex gap-3">
|
||||
<button type="submit" className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg transition-colors">שמור</button>
|
||||
<button type="button" onClick={() => setEditing(false)} className="border border-gray-300 hover:bg-gray-50 px-6 py-2 rounded-lg transition-colors">ביטול</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4 mb-6">
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-4 text-center">
|
||||
<p className="text-3xl font-bold text-indigo-600">{totalGuests}</p>
|
||||
<p className="text-sm text-gray-500 mt-1">סה"כ מוזמנים</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-4 text-center">
|
||||
<p className="text-3xl font-bold text-green-600">{confirmedGuests}</p>
|
||||
<p className="text-sm text-gray-500 mt-1">אישרו הגעה</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-4 text-center">
|
||||
<p className="text-3xl font-bold text-orange-600">
|
||||
₪{Number(stats?.budget?.estimated || 0).toLocaleString('he-IL')}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mt-1">הוצאות מתוכננות</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick links */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<Link to={`/events/${id}/guests`} className="bg-white rounded-xl border border-gray-200 p-5 hover:shadow-md transition-shadow flex items-center gap-3">
|
||||
<Users className="w-8 h-8 text-indigo-500" />
|
||||
<div><p className="font-semibold">ניהול מוזמנים</p><p className="text-sm text-gray-500">הוסף, ערוך ונהל מוזמנים</p></div>
|
||||
</Link>
|
||||
<Link to={`/events/${id}/budget`} className="bg-white rounded-xl border border-gray-200 p-5 hover:shadow-md transition-shadow flex items-center gap-3">
|
||||
<Wallet className="w-8 h-8 text-green-500" />
|
||||
<div><p className="font-semibold">ניהול תקציב</p><p className="text-sm text-gray-500">עקוב אחרי הוצאות</p></div>
|
||||
</Link>
|
||||
<Link to={`/events/${id}/bookings`} className="bg-white rounded-xl border border-gray-200 p-5 hover:shadow-md transition-shadow flex items-center gap-3">
|
||||
<BookOpen className="w-8 h-8 text-orange-500" />
|
||||
<div><p className="font-semibold">הזמנות ספקים</p><p className="text-sm text-gray-500">נהל ספקים ושירותים</p></div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
217
client/src/pages/GuestsPage.jsx
Normal file
217
client/src/pages/GuestsPage.jsx
Normal file
@@ -0,0 +1,217 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useParams, Link } from 'react-router-dom'
|
||||
import { Plus, Trash2, Edit, ArrowRight, Search } from 'lucide-react'
|
||||
import api from '../api'
|
||||
|
||||
const RSVP_OPTIONS = { pending: 'ממתין', confirmed: 'אישר', declined: 'סירב', maybe: 'אולי' }
|
||||
const RSVP_COLORS = {
|
||||
pending: 'bg-yellow-100 text-yellow-700',
|
||||
confirmed: 'bg-green-100 text-green-700',
|
||||
declined: 'bg-red-100 text-red-600',
|
||||
maybe: 'bg-blue-100 text-blue-700',
|
||||
}
|
||||
|
||||
const DIETARY = ['ללא', 'צמחוני', 'טבעוני', 'ללא גלוטן', 'כשר מהדרין', 'כשר רגיל', 'ללא לקטוז', 'אחר']
|
||||
|
||||
export default function GuestsPage() {
|
||||
const { id } = useParams()
|
||||
const [guests, setGuests] = useState([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [showForm, setShowForm] = useState(false)
|
||||
const [editGuest, setEditGuest] = useState(null)
|
||||
const [search, setSearch] = useState('')
|
||||
const [form, setForm] = useState({ name: '', phone: '', email: '', rsvp_status: 'pending', table_number: '', seat_number: '', dietary_restriction: '', notes: '' })
|
||||
|
||||
useEffect(() => { loadGuests() }, [id])
|
||||
|
||||
async function loadGuests() {
|
||||
try {
|
||||
const res = await api.get(`/guests/event/${id}`)
|
||||
setGuests(res.data)
|
||||
} catch (err) { console.error(err) }
|
||||
finally { setLoading(false) }
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
setEditGuest(null)
|
||||
setForm({ name: '', phone: '', email: '', rsvp_status: 'pending', table_number: '', seat_number: '', dietary_restriction: '', notes: '' })
|
||||
setShowForm(true)
|
||||
}
|
||||
|
||||
function openEdit(g) {
|
||||
setEditGuest(g)
|
||||
setForm({ name: g.name, phone: g.phone || '', email: g.email || '', rsvp_status: g.rsvp_status, table_number: g.table_number || '', seat_number: g.seat_number || '', dietary_restriction: g.dietary_restriction || '', notes: g.notes || '' })
|
||||
setShowForm(true)
|
||||
}
|
||||
|
||||
async function saveGuest(e) {
|
||||
e.preventDefault()
|
||||
try {
|
||||
if (editGuest) {
|
||||
await api.put(`/guests/${editGuest.id}`, form)
|
||||
} else {
|
||||
await api.post('/guests', { ...form, event_id: id })
|
||||
}
|
||||
setShowForm(false)
|
||||
loadGuests()
|
||||
} catch (err) { console.error(err) }
|
||||
}
|
||||
|
||||
async function deleteGuest(guestId) {
|
||||
if (!confirm('מחוק מוזמן?')) return
|
||||
try {
|
||||
await api.delete(`/guests/${guestId}`)
|
||||
setGuests(guests.filter(g => g.id !== guestId))
|
||||
} catch (err) { console.error(err) }
|
||||
}
|
||||
|
||||
const filtered = guests.filter(g =>
|
||||
g.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
(g.phone || '').includes(search)
|
||||
)
|
||||
|
||||
const stats = {
|
||||
total: guests.length,
|
||||
confirmed: guests.filter(g => g.rsvp_status === 'confirmed').length,
|
||||
pending: guests.filter(g => g.rsvp_status === 'pending').length,
|
||||
declined: guests.filter(g => g.rsvp_status === 'declined').length,
|
||||
}
|
||||
|
||||
if (loading) return <div className="flex justify-center py-20 text-gray-400">טוען...</div>
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-6 text-sm text-gray-500">
|
||||
<Link to="/" className="hover:text-indigo-600 flex items-center gap-1"><ArrowRight className="w-4 h-4" /> הדשבורד</Link>
|
||||
<span>/</span>
|
||||
<Link to={`/events/${id}`} className="hover:text-indigo-600">האירוע</Link>
|
||||
<span>/</span>
|
||||
<span className="text-gray-800 font-medium">מוזמנים</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h1 className="text-2xl font-bold text-gray-900">ניהול מוזמנים</h1>
|
||||
<button onClick={openCreate} className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition-colors">
|
||||
<Plus className="w-4 h-4" /> הוסף מוזמן
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-4 gap-3 mb-6">
|
||||
{[
|
||||
{ label: 'סה"כ', val: stats.total, cls: 'text-gray-700' },
|
||||
{ label: 'אישרו', val: stats.confirmed, cls: 'text-green-600' },
|
||||
{ label: 'ממתינים', val: stats.pending, cls: 'text-yellow-600' },
|
||||
{ label: 'סירבו', val: stats.declined, cls: 'text-red-600' },
|
||||
].map(s => (
|
||||
<div key={s.label} className="bg-white rounded-xl border border-gray-200 p-3 text-center">
|
||||
<p className={`text-2xl font-bold ${s.cls}`}>{s.val}</p>
|
||||
<p className="text-xs text-gray-500">{s.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
{showForm && (
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
|
||||
<h2 className="text-lg font-semibold mb-4">{editGuest ? 'עריכת מוזמן' : 'הוספת מוזמן'}</h2>
|
||||
<form onSubmit={saveGuest} className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">שם *</label>
|
||||
<input required value={form.name} onChange={e => setForm({ ...form, name: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">טלפון</label>
|
||||
<input value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">אימייל</label>
|
||||
<input type="email" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">סטטוס RSVP</label>
|
||||
<select value={form.rsvp_status} onChange={e => setForm({ ...form, rsvp_status: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
{Object.entries(RSVP_OPTIONS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">מספר שולחן</label>
|
||||
<input type="number" min="1" value={form.table_number} onChange={e => setForm({ ...form, table_number: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">הגבלות תזונה</label>
|
||||
<select value={form.dietary_restriction} onChange={e => setForm({ ...form, dietary_restriction: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
{DIETARY.map(d => <option key={d} value={d === 'ללא' ? '' : d}>{d}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">הערות</label>
|
||||
<input value={form.notes} onChange={e => setForm({ ...form, notes: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
|
||||
</div>
|
||||
<div className="sm:col-span-2 flex gap-3">
|
||||
<button type="submit" className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg transition-colors">שמור</button>
|
||||
<button type="button" onClick={() => setShowForm(false)} className="border border-gray-300 hover:bg-gray-50 px-6 py-2 rounded-lg transition-colors">ביטול</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Search */}
|
||||
<div className="relative mb-4">
|
||||
<Search className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<input
|
||||
value={search}
|
||||
onChange={e => setSearch(e.target.value)}
|
||||
placeholder="חיפוש לפי שם או טלפון..."
|
||||
className="w-full border border-gray-300 rounded-lg pr-9 pl-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-gray-50 border-b border-gray-200">
|
||||
<tr>
|
||||
<th className="text-right px-4 py-3 font-medium text-gray-600">שם</th>
|
||||
<th className="text-right px-4 py-3 font-medium text-gray-600 hidden sm:table-cell">טלפון</th>
|
||||
<th className="text-right px-4 py-3 font-medium text-gray-600">סטטוס</th>
|
||||
<th className="text-right px-4 py-3 font-medium text-gray-600 hidden md:table-cell">שולחן</th>
|
||||
<th className="text-right px-4 py-3 font-medium text-gray-600 hidden md:table-cell">תזונה</th>
|
||||
<th className="px-4 py-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{filtered.length === 0 ? (
|
||||
<tr><td colSpan={6} className="text-center py-8 text-gray-400">אין מוזמנים</td></tr>
|
||||
) : filtered.map(g => (
|
||||
<tr key={g.id} className="hover:bg-gray-50">
|
||||
<td className="px-4 py-3 font-medium">{g.name}</td>
|
||||
<td className="px-4 py-3 text-gray-500 hidden sm:table-cell">{g.phone || '—'}</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`text-xs px-2 py-1 rounded-full font-medium ${RSVP_COLORS[g.rsvp_status] || 'bg-gray-100'}`}>
|
||||
{RSVP_OPTIONS[g.rsvp_status] || g.rsvp_status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-gray-500 hidden md:table-cell">{g.table_number || '—'}</td>
|
||||
<td className="px-4 py-3 text-gray-500 hidden md:table-cell">{g.dietary_restriction || '—'}</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex gap-1 justify-end">
|
||||
<button onClick={() => openEdit(g)} className="p-1.5 hover:bg-indigo-50 rounded text-indigo-600"><Edit className="w-4 h-4" /></button>
|
||||
<button onClick={() => deleteGuest(g.id)} className="p-1.5 hover:bg-red-50 rounded text-red-500"><Trash2 className="w-4 h-4" /></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
69
client/src/pages/LoginPage.jsx
Normal file
69
client/src/pages/LoginPage.jsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import { useState } from 'react'
|
||||
import { useNavigate, Link } from 'react-router-dom'
|
||||
import api from '../api'
|
||||
|
||||
export default function LoginPage() {
|
||||
const navigate = useNavigate()
|
||||
const [form, setForm] = useState({ email: '', password: '' })
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await api.post('/auth/login', form)
|
||||
localStorage.setItem('token', res.data.token)
|
||||
localStorage.setItem('user', JSON.stringify(res.data.user))
|
||||
navigate('/')
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.error || 'שגיאת התחברות')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8 w-full max-w-md">
|
||||
<h1 className="text-2xl font-bold text-center text-indigo-700 mb-2">אירועית</h1>
|
||||
<p className="text-center text-gray-500 mb-6">התחברות לחשבון</p>
|
||||
{error && <div className="bg-red-50 text-red-600 rounded-lg px-4 py-2 mb-4 text-sm">{error}</div>}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">אימייל</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={form.email}
|
||||
onChange={e => setForm({ ...form, email: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">סיסמה</label>
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
value={form.password}
|
||||
onChange={e => setForm({ ...form, password: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
{loading ? 'מתחבר...' : 'התחבר'}
|
||||
</button>
|
||||
</form>
|
||||
<p className="text-center text-sm text-gray-500 mt-4">
|
||||
אין לך חשבון?{' '}
|
||||
<Link to="/register" className="text-indigo-600 hover:underline">הרשמה</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
80
client/src/pages/RegisterPage.jsx
Normal file
80
client/src/pages/RegisterPage.jsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import { useState } from 'react'
|
||||
import { useNavigate, Link } from 'react-router-dom'
|
||||
import api from '../api'
|
||||
|
||||
export default function RegisterPage() {
|
||||
const navigate = useNavigate()
|
||||
const [form, setForm] = useState({ email: '', name: '', password: '' })
|
||||
const [error, setError] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await api.post('/auth/register', form)
|
||||
localStorage.setItem('token', res.data.token)
|
||||
localStorage.setItem('user', JSON.stringify(res.data.user))
|
||||
navigate('/')
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.error || 'שגיאת הרשמה')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8 w-full max-w-md">
|
||||
<h1 className="text-2xl font-bold text-center text-indigo-700 mb-2">אירועית</h1>
|
||||
<p className="text-center text-gray-500 mb-6">יצירת חשבון חדש</p>
|
||||
{error && <div className="bg-red-50 text-red-600 rounded-lg px-4 py-2 mb-4 text-sm">{error}</div>}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">שם מלא</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={form.name}
|
||||
onChange={e => setForm({ ...form, name: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">אימייל</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={form.email}
|
||||
onChange={e => setForm({ ...form, email: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">סיסמה</label>
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
minLength={6}
|
||||
value={form.password}
|
||||
onChange={e => setForm({ ...form, password: e.target.value })}
|
||||
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
{loading ? 'נרשם...' : 'הרשמה'}
|
||||
</button>
|
||||
</form>
|
||||
<p className="text-center text-sm text-gray-500 mt-4">
|
||||
יש לך חשבון?{' '}
|
||||
<Link to="/login" className="text-indigo-600 hover:underline">התחבר</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
13
client/tailwind.config.js
Normal file
13
client/tailwind.config.js
Normal file
@@ -0,0 +1,13 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#4F46E5',
|
||||
'primary-dark': '#4338CA',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
17
client/vite.config.js
Normal file
17
client/vite.config.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import path from 'path'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': 'http://localhost:3000',
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user