1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
 
 
 
 
 
 
 
 
 
 
 
export default function AuthLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center px-4">
      <div className="bg-white rounded-lg shadow-xl p-8 w-full max-w-md">
        {children}
      </div>
    </div>
  )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
 
 
 
 
 
 
 
 
 
 
 
import { LoginForm } from '@/components/auth/LoginForm';
 
export default function LoginPage() {
  return (
    <div className="flex min-h-full flex-col justify-center px-6 py-12 mb-48">
      <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
        Sign in
      </h2>
      <LoginForm />
    </div>
  );
}
 

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
 
 
 
 
 
 
 
 
 
 
 
import { RegisterForm } from '@/components/auth/RegisterForm';
 
export default function RegisterPage() {
  return (
    <div className="flex min-h-full flex-col justify-center px-6 py-12 mb-48">
      <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
        Register
      </h2>
      <RegisterForm />
    </div>
  );
}
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5x
 
5x
1x
 
 
4x
4x
4x
 
 
 
3x
1x
 
 
2x
 
 
 
 
2x
1x
 
 
1x
 
 
 
 
 
1x
 
1x
 
 
 
 
 
 
 
 
 
1x
1x
 
 
 
 
 
 
 
 
 
4x
 
4x
1x
 
 
3x
3x
3x
 
 
 
2x
1x
 
 
1x
 
1x
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
1x
 
1x
 
 
 
 
 
 
 
 
 
1x
1x
 
 
 
 
1x
1x
 
 
 
5x
 
5x
1x
 
 
4x
4x
 
3x
1x
 
 
2x
2x
 
 
 
 
 
 
 
 
 
2x
 
1x
 
 
'use server'
 
import { cookies } from 'next/headers'
import bcryptjs from 'bcryptjs'
import { getPrisma } from '@/lib/db'
import { loginSchema, registerSchema } from '@/lib/validators'
import { generateToken, verifyToken, setTokenCookie } from '@/lib/auth'
import { redirect } from 'next/navigation'
import { Role, User } from '@prisma/client'
 
type UserSession = Pick<User, 'id' | 'email' | 'name' | 'role'>
 
type AuthResponse =
  | { success: true; user: UserSession }
  | { success: false; error: string; details?: unknown }
 
export async function loginAction(
  email: string,
  password: string
): Promise<AuthResponse> {
  const validated = loginSchema.safeParse({ email, password })
 
  if (!validated.success) {
    return { success: false, error: 'Invalid input', details: validated.error.errors }
  }
 
  try {
    const prisma = getPrisma()
    const user = await prisma.user.findUnique({
      where: { email: validated.data.email }
    })
 
    if (!user) {
      return { success: false, error: 'Invalid email or password' }
    }
 
    const isPasswordValid = await bcryptjs.compare(
      validated.data.password,
      user.password
    )
 
    if (!isPasswordValid) {
      return { success: false, error: 'Invalid email or password' }
    }
 
    const token = await generateToken({
      userId: user.id,
      email: user.email,
      role: user.role
    })
 
    await setTokenCookie(token)
 
    return {
      success: true,
      user: {
        id: user.id,
        email: user.email,
        name: user.name,
        role: user.role
      }
    }
  } catch (error) {
    console.error('Login error:', error)
    return { success: false, error: 'Internal server error' }
  }
}
 
export async function registerAction(
  email: string,
  password: string,
  name: string,
  role: Role
): Promise<AuthResponse> {
  const validated = registerSchema.safeParse({ email, password, name, role })
 
  if (!validated.success) {
    return { success: false, error: 'Validation failed', details: validated.error.errors }
  }
 
  try {
    const prisma = getPrisma()
    const existingUser = await prisma.user.findUnique({
      where: { email: validated.data.email }
    })
 
    if (existingUser) {
      return { success: false, error: 'Email already registered' }
    }
 
    const hashedPassword = await bcryptjs.hash(validated.data.password, 10)
 
    const user = await prisma.user.create({
      data: {
        email: validated.data.email,
        password: hashedPassword,
        name: validated.data.name,
        role: validated.data.role
      }
    })
 
    const token = await generateToken({
      userId: user.id,
      email: user.email,
      role: user.role
    })
 
    await setTokenCookie(token)
 
    return {
      success: true,
      user: {
        id: user.id,
        email: user.email,
        name: user.name,
        role: user.role
      }
    }
  } catch (error) {
    console.error('Registration error:', error)
    return { success: false, error: 'Internal server error' }
  }
}
 
export async function logoutAction(): Promise<never> {
  cookies().delete('auth-token')
  redirect('/login')
}
 
export async function getCurrentUser(): Promise<UserSession | null> {
  const token = cookies().get('auth-token')?.value
  
  if (!token) {
    return null
  }
  
  try {
    const decoded = await verifyToken(token)
 
    if (!decoded) {
      return null
    }
    
    const prisma = getPrisma()
    const user = await prisma.user.findUnique({
      where: { id: decoded.userId },
      select: {
        id: true,
        email: true,
        name: true,
        role: true
      }
    })
    
    return user
  } catch (error) {
    return null
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5x
5x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14x
 
 
 
 
 
 
5x
3x
 
 
 
5x
4x
 
7x
 
 
5x
 
 
 
2x
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4x
 
4x
2x
 
 
 
2x
 
2x
 
 
 
2x
2x
2x
 
 
 
 
 
 
 
 
 
 
1x
1x
 
1x
1x
 
 
 
 
4x
 
4x
1x
 
 
3x
3x
 
 
 
3x
1x
 
 
 
2x
 
2x
 
 
 
2x
 
2x
 
 
 
 
 
 
 
 
2x
 
 
 
 
 
 
 
 
 
 
1x
1x
1x
 
1x
1x
 
 
 
 
4x
 
4x
1x
 
 
3x
3x
 
 
 
3x
1x
 
 
2x
2x
 
 
 
1x
1x
1x
 
1x
1x
 
 
 
 
 
 
 
 
3x
 
3x
2x
 
 
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use server'
 
import { revalidatePath } from 'next/cache'
import { writeFile, unlink } from 'fs/promises'
import path from 'path'
import { getPrisma } from '@/lib/db'
import { restaurantSchema, type RestaurantInput, type SavedPreferences } from '@/lib/validators'
import { type ActionResult } from '@/types/actions'
import { getCurrentUser } from './auth'
import { Restaurant, Review } from '@prisma/client'
import { calculateAverageRating } from '@/lib/utils'
import { type CuisineType, MAX_IMAGE_SIZE, ALLOWED_IMAGE_TYPES, ERROR_MESSAGES } from '@/lib/constants'
 
type RestaurantWithRating = Omit<Restaurant, 'cuisine'> & {
  cuisine: CuisineType[]
  reviews: { rating: number }[]
  owner: { id: string; name: string }
  averageRating: number
  reviewCount: number
}
 
type RestaurantDetail = Omit<Restaurant, 'cuisine'> & {
  cuisine: CuisineType[]
  owner: { id: string; name: string }
  reviews: (Review & {
    user: { id: string; name: string }
  })[]
}
 
export async function getRestaurants(
  filters?: SavedPreferences
): Promise<RestaurantWithRating[]> {
  const prisma = getPrisma()
  const restaurants = await prisma.restaurant.findMany({
    where: {
      ...(filters?.cuisines && filters.cuisines.length > 0 && {
        cuisine: {
          hasSome: filters.cuisines
        }
      }),
      ...(filters?.location && {
        location: {
          contains: filters.location,
          mode: 'insensitive'
        }
      })
    },
    include: {
      reviews: {
        select: {
          rating: true
        }
      },
      owner: {
        select: {
          id: true,
          name: true
        }
      }
    }
  })
 
  // Calculate ratings and review count
  const withRatings = restaurants.map(r => ({
    ...r,
    averageRating: calculateAverageRating(r.reviews),
    reviewCount: r.reviews.length
  }))
 
  // Filter by minimum rating
  let filtered = filters?.minRating
    ? withRatings.filter(r => r.averageRating >= filters.minRating!)
    : withRatings
 
  // Sort
  if (filters?.sort === 'worst') {
    filtered.sort((a, b) => a.averageRating - b.averageRating)
  } else {
    filtered.sort((a, b) => b.averageRating - a.averageRating)
  }
 
  return filtered as RestaurantWithRating[]
}
 
export async function getRestaurant(id: string): Promise<RestaurantDetail | null> {
  const prisma = getPrisma()
  return await prisma.restaurant.findUnique({
    where: { id },
    include: {
      owner: {
        select: {
          id: true,
          name: true
        }
      },
      reviews: {
        include: {
          user: {
            select: {
              id: true,
              name: true
            }
          }
        },
        orderBy: {
          createdAt: 'desc'
        }
      }
    }
  }) as RestaurantDetail | null
}
 
export async function createRestaurant(data: RestaurantInput): Promise<ActionResult<Restaurant>> {
  const user = await getCurrentUser()
 
  if (!user || user.role !== 'OWNER') {
    return { success: false, error: 'Unauthorized' }
  }
 
  // Validate with Zod schema
  const validation = restaurantSchema.safeParse(data)
 
  Iif (!validation.success) {
    return { success: false, error: validation.error.errors[0].message }
  }
 
  try {
    const prisma = getPrisma()
    const restaurant = await prisma.restaurant.create({
      data: {
        title: validation.data.title,
        description: validation.data.description,
        location: validation.data.location,
        cuisine: validation.data.cuisine,
        imageUrl: validation.data.imageUrl || '/restaurant1.jpg',
        ownerId: user.id
      }
    })
 
    revalidatePath('/')
    return { success: true, data: restaurant }
  } catch (error: any) {
    console.error('Create restaurant error:', error)
    return { success: false, error: 'Failed to create restaurant' }
  }
}
 
export async function updateRestaurant(id: string, data: RestaurantInput): Promise<ActionResult<Restaurant>> {
  const user = await getCurrentUser()
 
  if (!user) {
    return { success: false, error: 'Unauthorized' }
  }
 
  const prisma = getPrisma()
  const restaurant = await prisma.restaurant.findUnique({
    where: { id }
  })
 
  if (!restaurant || restaurant.ownerId !== user.id) {
    return { success: false, error: 'Unauthorized' }
  }
 
  // Validate with Zod schema
  const validation = restaurantSchema.safeParse(data)
 
  Iif (!validation.success) {
    return { success: false, error: validation.error.errors[0].message }
  }
 
  try {
    // Delete old image if it's being replaced with a new uploaded image
    Iif (
      validation.data.imageUrl &&
      validation.data.imageUrl !== restaurant.imageUrl &&
      restaurant.imageUrl &&
      restaurant.imageUrl.startsWith('/uploads/')
    ) {
      await deleteImageAction(restaurant.imageUrl)
    }
 
    const updatedRestaurant = await prisma.restaurant.update({
      where: { id },
      data: {
        title: validation.data.title,
        description: validation.data.description,
        location: validation.data.location,
        cuisine: validation.data.cuisine,
        imageUrl: validation.data.imageUrl || restaurant.imageUrl || '/restaurant1.jpg',
      }
    })
 
    revalidatePath(`/owner/my-restaurants`)
    revalidatePath(`/reviewer/restaurants/${id}`)
    return { success: true, data: updatedRestaurant }
  } catch (error: any) {
    console.error('Update restaurant error:', error)
    return { success: false, error: 'Failed to update restaurant' }
  }
}
 
export async function deleteRestaurant(id: string): Promise<ActionResult> {
  const user = await getCurrentUser()
 
  if (!user) {
    return { success: false, error: 'Unauthorized' }
  }
 
  const prisma = getPrisma()
  const restaurant = await prisma.restaurant.findUnique({
    where: { id }
  })
 
  if (!restaurant || restaurant.ownerId !== user.id) {
    return { success: false, error: 'Unauthorized' }
  }
 
  try {
    await prisma.restaurant.delete({
      where: { id }
    })
 
    revalidatePath('/')
    revalidatePath(`/owner/my-restaurants`)
    return { success: true }
  } catch (error) {
    console.error('Delete restaurant error:', error)
    return { success: false, error: 'Failed to delete restaurant' }
  }
}
 
type RestaurantWithReviews = Restaurant & {
  reviews: { rating: number }[]
}
 
export async function getMyRestaurants(): Promise<RestaurantWithReviews[]> {
  const user = await getCurrentUser()
  
  if (!user || user.role !== 'OWNER') {
    return []
  }
 
  const prisma = getPrisma()
  return await prisma.restaurant.findMany({
    where: {
      ownerId: user.id
    },
    include: {
      reviews: {
        select: {
          rating: true
        }
      }
    },
    orderBy: {
      createdAt: 'desc'
    }
  })
}
 
export async function uploadImageAction(formData: FormData): Promise<ActionResult<{ imageUrl: string }>> {
  const user = await getCurrentUser()
 
  if (!user || user.role !== 'OWNER') {
    return { success: false, error: 'Unauthorized' }
  }
 
  const file = formData.get('image') as File
 
  if (!file) {
    return { success: false, error: 'No file provided' }
  }
 
  // Validate file type
  if (!ALLOWED_IMAGE_TYPES.includes(file.type)) {
    return { success: false, error: ERROR_MESSAGES.INVALID_IMAGE_TYPE }
  }
 
  // Validate file size
  if (file.size > MAX_IMAGE_SIZE) {
    return { success: false, error: ERROR_MESSAGES.IMAGE_TOO_LARGE }
  }
 
  try {
    // Generate unique filename
    const timestamp = Date.now()
    const extension = file.name.split('.').pop()
    const filename = `restaurant-${timestamp}.${extension}`
 
    // Convert file to buffer
    const bytes = await file.arrayBuffer()
    const buffer = Buffer.from(bytes)
 
    // Save to public/uploads/ directory
    const uploadDir = path.join(process.cwd(), 'public', 'uploads')
    const uploadPath = path.join(uploadDir, filename)
 
    await writeFile(uploadPath, buffer)
 
    // Return the URL path
    return { success: true, data: { imageUrl: `/uploads/${filename}` } }
  } catch (error) {
    console.error('Image upload error:', error)
    return { success: false, error: 'Failed to upload image' }
  }
}
 
export async function deleteImageAction(imageUrl: string): Promise<ActionResult> {
  const user = await getCurrentUser()
 
  if (!user || user.role !== 'OWNER') {
    return { success: false, error: 'Unauthorized' }
  }
 
  // Don't delete default images
  if (imageUrl.startsWith('/restaurant')) {
    return { success: true }
  }
 
  // Only delete images from /uploads/ directory
  if (!imageUrl.startsWith('/uploads/')) {
    return { success: true }
  }
 
  try {
    const filename = imageUrl.replace('/uploads/', '')
    const filePath = path.join(process.cwd(), 'public', 'uploads', filename)
 
    await unlink(filePath)
 
    return { success: true }
  } catch (error) {
    console.error('Image delete error:', error)
    // Don't fail if file doesn't exist
    return { success: true }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5x
 
5x
 
 
 
5x
 
5x
2x
 
 
3x
 
 
3x
 
 
 
 
 
 
 
 
3x
1x
 
 
2x
2x
 
 
 
 
 
 
 
 
1x
1x
 
1x
1x
 
 
 
 
 
 
 
 
4x
 
4x
 
 
 
4x
 
4x
1x
 
 
3x
3x
 
 
 
3x
1x
 
 
2x
2x
 
 
 
 
 
 
 
1x
1x
 
1x
1x
 
 
 
 
4x
 
4x
1x
 
 
3x
3x
 
 
 
3x
1x
 
 
2x
2x
 
 
 
1x
1x
 
1x
1x
 
 
 
 
3x
 
3x
1x
 
 
2x
2x
 
 
 
 
 
 
 
 
'use server'
 
import { revalidatePath } from 'next/cache'
import { getPrisma } from '@/lib/db'
import { getCurrentUser } from './auth'
import { Review } from '@prisma/client'
import { reviewSchema } from '@/lib/validators'
import { type ActionResult } from '@/types/actions'
 
export async function createReview(
  restaurantId: string,
  rating: number,
  comment?: string
): Promise<ActionResult<Review>> {
  const validated = reviewSchema.safeParse({ rating, comment })
 
  Iif (!validated.success) {
    return { success: false, error: 'Invalid input', details: validated.error.errors }
  }
 
  const user = await getCurrentUser()
 
  if (!user || user.role !== 'REVIEWER') {
    return { success: false, error: 'Unauthorized' }
  }
 
  const prisma = getPrisma()
 
  // Check if user already reviewed this restaurant
  const existingReview = await prisma.review.findUnique({
    where: {
      restaurantId_userId: {
        restaurantId,
        userId: user.id
      }
    }
  })
 
  if (existingReview) {
    return { success: false, error: 'You have already reviewed this restaurant' }
  }
 
  try {
    const review = await prisma.review.create({
      data: {
        rating: validated.data.rating,
        comment: validated.data.comment,
        restaurantId,
        userId: user.id
      }
    })
 
    revalidatePath(`/reviewer/restaurants/${restaurantId}`)
    return { success: true, data: review }
  } catch (error) {
    console.error('Create review error:', error)
    return { success: false, error: 'Failed to create review' }
  }
}
 
export async function updateReview(
  reviewId: string,
  rating: number,
  comment?: string
): Promise<ActionResult<Review>> {
  const validated = reviewSchema.safeParse({ rating, comment })
 
  Iif (!validated.success) {
    return { success: false, error: 'Invalid input', details: validated.error.errors }
  }
 
  const user = await getCurrentUser()
 
  if (!user) {
    return { success: false, error: 'Unauthorized' }
  }
 
  const prisma = getPrisma()
  const review = await prisma.review.findUnique({
    where: { id: reviewId }
  })
 
  if (!review || review.userId !== user.id) {
    return { success: false, error: 'Unauthorized' }
  }
 
  try {
    const updated = await prisma.review.update({
      where: { id: reviewId },
      data: {
        rating: validated.data.rating,
        comment: validated.data.comment
      }
    })
 
    revalidatePath(`/reviewer/restaurants/${review.restaurantId}`)
    return { success: true, data: updated }
  } catch (error) {
    console.error('Update review error:', error)
    return { success: false, error: 'Failed to update review' }
  }
}
 
export async function deleteReview(reviewId: string): Promise<ActionResult> {
  const user = await getCurrentUser()
 
  if (!user) {
    return { success: false, error: 'Unauthorized' }
  }
 
  const prisma = getPrisma()
  const review = await prisma.review.findUnique({
    where: { id: reviewId }
  })
 
  if (!review || review.userId !== user.id) {
    return { success: false, error: 'Unauthorized' }
  }
 
  try {
    await prisma.review.delete({
      where: { id: reviewId }
    })
 
    revalidatePath(`/reviewer/restaurants/${review.restaurantId}`)
    return { success: true }
  } catch (error) {
    console.error('Delete review error:', error)
    return { success: false, error: 'Failed to delete review' }
  }
}
 
export async function getMyReview(restaurantId: string): Promise<Review | null> {
  const user = await getCurrentUser()
 
  if (!user) {
    return null
  }
 
  const prisma = getPrisma()
  return await prisma.review.findUnique({
    where: {
      restaurantId_userId: {
        restaurantId,
        userId: user.id
      }
    }
  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
 
 
 
 
 
 
 
 
3x
3x
 
3x
1x
 
 
 
2x
 
 
 
 
2x
1x
 
 
 
1x
1x
 
 
1x
1x
 
 
 
 
1x
1x
1x
1x
 
 
1x
 
 
 
 
 
1x
1x
 
 
 
'use server'
 
import { writeFile, mkdir } from 'fs/promises'
import { join } from 'path'
import { existsSync } from 'fs'
import { MAX_IMAGE_SIZE, ALLOWED_IMAGE_TYPES, ERROR_MESSAGES } from '@/lib/constants'
import { type ActionResult } from '@/types/actions'
 
export async function uploadImage(formData: FormData): Promise<ActionResult<{ imageUrl: string }>> {
  try {
    const file = formData.get('file') as File
 
    if (!file) {
      return { success: false, error: ERROR_MESSAGES.REQUIRED_FIELD }
    }
 
    // Validate file size
    Iif (file.size > MAX_IMAGE_SIZE) {
      return { success: false, error: ERROR_MESSAGES.IMAGE_TOO_LARGE }
    }
 
    // Validate file type
    if (!ALLOWED_IMAGE_TYPES.includes(file.type)) {
      return { success: false, error: ERROR_MESSAGES.INVALID_IMAGE_TYPE }
    }
 
    // Convert file to buffer
    const bytes = await file.arrayBuffer()
    const buffer = Buffer.from(bytes)
 
    // Create uploads directory if it doesn't exist
    const uploadsDir = join(process.cwd(), 'public', 'uploads')
    Iif (!existsSync(uploadsDir)) {
      await mkdir(uploadsDir, { recursive: true })
    }
 
    // Generate unique filename
    const timestamp = Date.now()
    const extension = file.name.split('.').pop()
    const filename = `restaurant-${timestamp}.${extension}`
    const filepath = join(uploadsDir, filename)
 
    // Write file
    await writeFile(filepath, buffer)
 
    // Return public URL
    const imageUrl = `/uploads/${filename}`
    return { success: true, data: { imageUrl } }
  } catch (error) {
    console.error('Image upload error:', error)
    return { success: false, error: 'Failed to upload image' }
  }
}
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
 
 
 
 
 
 
 
 
 
 
 
9x
 
9x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
'use client'
 
import { useEffect } from 'react'
import { Button } from '@/components/ui'
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // Log error to console or error reporting service
    console.error('Application error:', error)
  }, [error])
 
  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center px-4">
      <div className="max-w-md w-full bg-white rounded-lg shadow-md p-8 text-center">
        <div className="mb-4">
          <span className="material-symbols-outlined text-red-500 text-6xl">error</span>
        </div>
        <h2 className="text-2xl font-bold text-gray-900 mb-2">Something went wrong!</h2>
        <p className="text-gray-600 mb-6">
          We encountered an unexpected error. Please try again.
        </p>
        {error.message && (
          <div className="bg-red-50 border border-red-200 rounded-md p-4 mb-6">
            <p className="text-sm text-red-800 font-mono">{error.message}</p>
          </div>
        )}
        <div className="space-y-2">
          <Button onClick={reset} className="w-full">
            Try again
          </Button>
          <Button
            variant="outline"
            onClick={() => (window.location.href = '/')}
            className="w-full"
          >
            Go to homepage
          </Button>
        </div>
      </div>
    </div>
  )
}
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'
 
import React from 'react'
 
export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <html>
      <body>
        <div className="min-h-screen bg-gray-50 flex items-center justify-center px-4">
          <div className="max-w-md w-full bg-white rounded-lg shadow-md p-8 text-center">
            <h2 className="text-2xl font-bold text-gray-900 mb-2">Application Error</h2>
            <p className="text-gray-600 mb-6">
              A critical error occurred. Please refresh the page.
            </p>
            <button
              onClick={reset}
              className="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700"
            >
              Refresh
            </button>
          </div>
        </div>
      </body>
    </html>
  )
}
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import type { Metadata } from 'next'
import './globals.css'
import { Navigation } from '@/components/Navigation'
 
export const dynamic = 'force-dynamic';
 
export const metadata: Metadata = {
  title: 'Restaurant Reviews',
  description: 'Browse and review restaurants with our community',
}
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=optional"
        />
      </head>
      <body className="antialiased">
        <Navigation />
        {children}
 
        <footer className="bg-gray-800 mt-10 py-8 md:py-10">
          <div className="mx-auto max-w-6xl w-full px-4">
            <div className="text-white text-sm md:text-base mb-3 md:mb-4">Restaurant Reviews Platform</div>
            <div className="text-white text-xs md:text-sm text-gray-300">Discover and share great dining experiences</div>
          </div>
        </footer>
      </body>
    </html>
  )
}
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import Link from 'next/link'
 
export default function NotFound() {
  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center px-4">
      <div className="max-w-md w-full bg-white rounded-lg shadow-md p-8 text-center">
        <div className="mb-6">
          <h1 className="text-6xl font-bold text-gray-900 mb-2">404</h1>
          <h2 className="text-2xl font-semibold text-gray-800 mb-2">
            Page Not Found
          </h2>
          <p className="text-gray-600">
            The page you&apos;re looking for doesn&apos;t exist or has been moved.
          </p>
        </div>
 
        <div className="space-y-3">
          <Link
            href="/"
            className="block w-full bg-blue-600 text-white px-6 py-3 rounded-md hover:bg-blue-700 font-semibold transition-colors"
          >
            Browse Restaurants
          </Link>
          <Link
            href="/login"
            className="block w-full bg-white text-blue-600 px-6 py-3 rounded-md border-2 border-blue-600 hover:bg-blue-50 font-semibold transition-colors"
          >
            Sign In
          </Link>
        </div>
      </div>
    </div>
  )
}
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { RestaurantForm } from '@/components/restaurants/RestaurantForm'
 
export default function AddRestaurantPage() {
  return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8 max-w-3xl">
        <div className="mb-8">
          <h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-2">Add New Restaurant</h1>
          <p className="text-sm md:text-base text-gray-600">Create a new restaurant listing</p>
        </div>
 
        <div className="bg-white rounded-lg shadow-md p-4 md:p-6">
          <RestaurantForm mode="create" />
        </div>
      </div>
    </div>
  )
}
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
 
 
 
 
 
 
 
 
31x
31x
31x
 
31x
5x
 
3x
3x
 
 
2x
 
 
 
 
31x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
7x
 
 
 
 
 
 
'use client'
 
import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { deleteRestaurant } from '@/app/actions/restaurants'
import { Button, ErrorMessage } from '@/components/ui'
import { useAsyncAction } from '@/hooks/useAsyncAction';
 
export function DeleteRestaurantButton({ restaurantId }: { restaurantId: string }) {
  const router = useRouter()
  const [showConfirm, setShowConfirm] = useState(false)
  const { error, isPending, execute } = useAsyncAction(deleteRestaurant)
 
  const handleDelete = () => {
    execute({
      onSuccess: () => {
        router.refresh();
        setShowConfirm(false)
      },
      onError: () => {
        setShowConfirm(false);
      }
    })(restaurantId)
  }
 
  if (showConfirm) {
    return (
      <div className="flex gap-2">
        <Button
          size="sm"
          variant="danger"
          onClick={handleDelete}
          isLoading={isPending}
          disabled={isPending}
        >
          Confirm
        </Button>
        <Button
          size="sm"
          variant="outline"
          onClick={() => setShowConfirm(false)}
          disabled={isPending}
        >
          Cancel
        </Button>
      </div>
    )
  }
 
  return (
    <div className="flex flex-col gap-2">
      {error && <ErrorMessage message={error} />}
      <Button size="sm" variant="danger" onClick={() => setShowConfirm(true)}>
        Delete
      </Button>
    </div>
  )
}
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import Link from 'next/link'
import Image from 'next/image'
import { getMyRestaurants } from '@/app/actions/restaurants'
import { Button, StarRating } from '@/components/ui'
import { DeleteRestaurantButton } from './DeleteRestaurantButton'
import { calculateAverageRating } from '@/lib/utils'
 
export default async function MyRestaurantsPage() {
  const restaurants = await getMyRestaurants()
 
  // Calculate ratings for each restaurant
  const restaurantsWithRatings = restaurants.map((restaurant) => ({
    ...restaurant,
    averageRating: calculateAverageRating(restaurant.reviews),
    reviewCount: restaurant.reviews.length,
  }))
 
  return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8">
        <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-8 gap-4">
          <div>
            <h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-2">My Restaurants</h1>
            <p className="text-gray-600">Manage your restaurant listings</p>
          </div>
          <Link href="/owner/create">
            <Button>Create New Restaurant</Button>
          </Link>
        </div>
 
        {restaurantsWithRatings.length === 0 ? (
          <div className="bg-white rounded-lg shadow-md p-12 text-center">
            <p className="text-gray-500 text-lg mb-4">You haven&apos;t created any restaurants yet</p>
            <Link href="/owner/create">
              <Button>Create Your First Restaurant</Button>
            </Link>
          </div>
        ) : (
          <div className="grid grid-cols-1 gap-6">
            {restaurantsWithRatings.map((restaurant) => (
              <div
                key={restaurant.id}
                className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
              >
                <div className="md:flex">
                  {restaurant.imageUrl && (
                    <div className="md:w-48 h-48 relative overflow-hidden bg-gray-200">
                      <Image
                        src={restaurant.imageUrl}
                        alt={restaurant.title}
                        fill
                        className="object-cover"
                        sizes="(max-width: 768px) 100vw, 192px"
                      />
                    </div>
                  )}
                  <div className="flex-1 p-6">
                    <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start mb-4 gap-4">
                      <div className="flex-1">
                        <h2 className="text-xl md:text-2xl font-semibold mb-2">{restaurant.title}</h2>
                        <p className="text-gray-600 mb-2">{restaurant.description}</p>
                        <p className="text-sm text-gray-500">
                          <span className="material-symbols-outlined text-sm align-middle">
                            location_on
                          </span>{' '}
                          {restaurant.location}
                        </p>
                      </div>
                      <div className="flex gap-2 flex-shrink-0">
                        <Link href={`/owner/${restaurant.id}/edit`}>
                          <Button size="sm" variant="secondary">
                            Edit
                          </Button>
                        </Link>
                        <DeleteRestaurantButton restaurantId={restaurant.id} />
                      </div>
                    </div>
 
                    <div className="flex flex-wrap gap-2 mb-4">
                      {restaurant.cuisine.map((c) => (
                        <span
                          key={c}
                          className="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full"
                        >
                          {c}
                        </span>
                      ))}
                    </div>
 
                    <div className="flex items-center justify-between">
                      <StarRating
                        rating={restaurant.averageRating}
                        size="sm"
                        showRating
                        reviewCount={restaurant.reviewCount}
                      />
 
                      <Link href={`/owner/${restaurant.id}/reviews`}>
                        <Button size="sm" variant="outline">
                          View Reviews
                        </Button>
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { notFound } from 'next/navigation'
import { getRestaurant } from '@/app/actions/restaurants'
import { getCurrentUser } from '@/app/actions/auth'
import { RestaurantForm } from '@/components/restaurants/RestaurantForm'
 
export default async function EditRestaurantPage({ params }: { params: { id: string } }) {
  const [restaurant, user] = await Promise.all([
    getRestaurant(params.id),
    getCurrentUser(),
  ])
 
  if (!restaurant) {
    notFound()
  }
 
  // Verify ownership
  if (!user || restaurant.ownerId !== user.id) {
    notFound()
  }
 
  return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8 max-w-3xl">
        <div className="mb-8">
          <h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-2">Edit Restaurant</h1>
          <p className="text-sm md:text-base text-gray-600">Update your restaurant information</p>
        </div>
 
        <div className="bg-white rounded-lg shadow-md p-4 md:p-6">
          <RestaurantForm
            mode="edit"
            restaurantId={restaurant.id}
            initialData={{
              title: restaurant.title,
              description: restaurant.description,
              location: restaurant.location,
              cuisine: restaurant.cuisine,
              imageUrl: restaurant.imageUrl || '',
            }}
          />
        </div>
      </div>
    </div>
  )
}
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { notFound } from 'next/navigation'
import Link from 'next/link'
import { getRestaurant } from '@/app/actions/restaurants'
import { getCurrentUser } from '@/app/actions/auth'
import { Button, StarRating } from '@/components/ui'
import { formatRelativeTime, calculateAverageRating } from '@/lib/utils'
 
export default async function RestaurantReviewsPage({ params }: { params: { id: string } }) {
  const [restaurant, user] = await Promise.all([
    getRestaurant(params.id),
    getCurrentUser(),
  ])
 
  if (!restaurant) {
    notFound()
  }
 
  // Verify ownership
  if (!user || restaurant.ownerId !== user.id) {
    notFound()
  }
 
  const averageRating = calculateAverageRating(restaurant.reviews)
 
  return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8 max-w-4xl">
        <div className="mb-8">
          <Link href="/owner/my-restaurants">
            <Button variant="outline" size="sm">
              ← Back to My Restaurants
            </Button>
          </Link>
        </div>
 
        <div className="bg-white rounded-lg shadow-md p-6 mb-8">
          <h1 className="text-2xl md:text-3xl font-bold text-gray-900 mb-2">{restaurant.title}</h1>
          <p className="text-gray-600 mb-4">{restaurant.description}</p>
 
          <div className="flex items-center gap-4 mb-4">
            <StarRating
              rating={averageRating}
              size="lg"
              showRating
              reviewCount={restaurant.reviews.length}
            />
          </div>
        </div>
 
        <div className="space-y-4">
          <h2 className="text-xl md:text-2xl font-bold text-gray-900 mb-4">Customer Reviews</h2>
 
          {restaurant.reviews.length === 0 ? (
            <div className="bg-white rounded-lg shadow-md p-12 text-center">
              <p className="text-gray-500 text-lg">No reviews yet</p>
              <p className="text-gray-400 text-sm mt-2">
                Your restaurant will receive reviews from customers
              </p>
            </div>
          ) : (
            restaurant.reviews.map((review) => (
              <div key={review.id} className="bg-white rounded-lg shadow-md p-6">
                <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start mb-3 gap-2">
                  <div className="flex-1">
                    <h3 className="font-semibold text-gray-900">{review.user.name}</h3>
                    <p className="text-sm text-gray-500">
                      {formatRelativeTime(review.createdAt)}
                    </p>
                  </div>
                  <div className="flex-shrink-0">
                    <StarRating rating={review.rating} size="sm" showRating />
                  </div>
                </div>
 
                {review.comment && (
                  <p className="text-gray-700 leading-relaxed">{review.comment}</p>
                )}
              </div>
            ))
          )}
        </div>
      </div>
    </div>
  )
}
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { RestaurantGrid } from '@/components/restaurants/RestaurantGrid';
import { FilterPanel } from '@/components/filters/FilterPanel';
import { getRestaurants } from '@/app/actions/restaurants';
import { type CuisineType, type SortOrder } from '@/lib/constants';
 
export const dynamic = 'force-dynamic';
 
interface HomePageProps {
  searchParams: {
    cuisine?: string;
    minRating?: string;
    sort?: string;
    location?: string;
  };
}
 
export default async function HomePage({ searchParams }: HomePageProps) {
  // Parse filters from URL
  const cuisines = searchParams.cuisine?.split(',').filter(Boolean) as CuisineType[] | undefined;
  const minRating = searchParams.minRating ? Number(searchParams.minRating) : undefined;
  const sort: SortOrder | undefined =
    searchParams.sort === 'best' || searchParams.sort === 'worst'
      ? searchParams.sort
      : undefined;
  const location = searchParams.location || undefined;
 
  // Fetch restaurants using server action
  const restaurants = await getRestaurants({
    cuisines,
    minRating,
    sort,
    location
  });
 
  return (
    <div className="container mx-auto px-4 py-8">
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
        {/* Sidebar with filters */}
        <aside className="lg:col-span-1">
          <FilterPanel
            initialCuisines={cuisines ?? []}
            initialMinRating={minRating ?? 0}
            initialSort={sort ?? 'best'}
            initialLocation={location ?? ''}
          />
        </aside>
 
        {/* Main content */}
        <main className="lg:col-span-3">
          <RestaurantGrid restaurants={restaurants} />
        </main>
      </div>
    </div>
  );
}
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import Image from 'next/image';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { getRestaurant } from '@/app/actions/restaurants';
import { getCurrentUser } from '@/app/actions/auth';
import { getMyReview } from '@/app/actions/reviews';
import ReviewForm from '@/components/reviews/ReviewForm';
import { Button, StarRating } from '@/components/ui';
import { calculateAverageRating } from '@/lib/utils';
 
export default async function RestaurantDetailsPage({
  params
}: {
  params: { id: string }
}) {
  const [restaurant, user, myReview] = await Promise.all([
    getRestaurant(params.id),
    getCurrentUser(),
    getCurrentUser().then(u => u ? getMyReview(params.id) : null)
  ]);
 
  if (!restaurant) {
    notFound();
  }
 
  const averageRating = calculateAverageRating(restaurant.reviews);
 
  const isOwner = user?.role === 'OWNER' && user.id === restaurant.ownerId;
 
  return (
    <div className="px-4">
      <div className="mx-auto max-w-6xl mt-8 md:mt-16 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
          <h2 className="font-bold text-2xl md:text-3xl text-gray-800">{restaurant.title}</h2>
          <div>
            <StarRating rating={averageRating} />
          </div>
        </div>
        {isOwner && (
          <div className="flex gap-2 flex-wrap">
            <Link href={`/owner/${restaurant.id}/edit`}>
              <Button size="sm" variant="secondary">Edit Restaurant</Button>
            </Link>
            <Link href={`/owner/${restaurant.id}/reviews`}>
              <Button size="sm" variant="outline">View All Reviews</Button>
            </Link>
          </div>
        )}
      </div>
 
      <div className="mx-auto max-w-6xl text-gray-500 text-sm mb-4 font-semibold">
        {restaurant.location}
      </div>
 
      <div className="mx-auto max-w-6xl grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
        <div className="order-2 md:order-1">
          <p className="text-justify text-gray-800">
            {restaurant.description}
          </p>
        </div>
        <div className="order-1 md:order-2">
          <Image
            src={restaurant.imageUrl ?? '/restaurant1.jpg'}
            alt={restaurant.title}
            width={600}
            height={400}
            className="rounded-lg shadow-lg w-full h-auto"
          />
        </div>
      </div>
 
      <div className="mx-auto max-w-6xl my-6">
        <h2 className="font-semibold text-xl md:text-2xl text-gray-700 mb-4">Reviews</h2>
 
        {user?.role === 'REVIEWER' && (
          <ReviewForm
            restaurantId={params.id}
            existingReview={myReview}
          />
        )}
 
        <div className="my-6">
          {restaurant.reviews.map((review) => (
            <div key={review.id} className="p-4 my-3 shadow-sm">
              <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2">
                <div className="leading-loose">
                  <div className="select-none">
                    <StarRating rating={review.rating} />
                  </div>
                </div>
 
                <div className="leading-loose text-xs sm:text-sm text-gray-600">
                  By <strong>{review.user.name}</strong> on{' '}
                  {new Date(review.createdAt).toLocaleDateString()}
                </div>
              </div>
 
              <div className="mt-2">
                {review.comment || 'No comment provided'}
              </div>
            </div>
          ))}
 
          { restaurant.reviews.length === 0 && (
            <div className="text-gray-500 py-8">
              No reviews yet.
            </div>
          )}
 
        </div>
      </div>
    </div>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
 
 
 
 
 
 
 
 
 
 
28x
28x
 
 
 
 
 
 
28x
 
 
 
 
 
 
 
 
 
28x
3x
3x
 
3x
1x
 
2x
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';
 
import Link from 'next/link';
import { useTransition } from 'react';
import { useRouter } from 'next/navigation';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { loginSchema, type LoginInput } from '@/lib/validators';
import { loginAction } from '@/app/actions/auth';
 
export function LoginForm() {
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
 
  const {
    register,
    handleSubmit,
    formState: { errors },
    setError,
  } = useForm<LoginInput>({
    resolver: zodResolver(loginSchema),
    mode: 'onBlur',
    reValidateMode: 'onChange',
    defaultValues: {
      email: '',
      password: '',
    },
  });
 
  const onSubmit = (data: LoginInput) => {
    startTransition(async () => {
      const result = await loginAction(data.email, data.password);
 
      if ('error' in result) {
        setError('root', { message: result.error });
      } else {
        router.push('/');
        router.refresh();
      }
    });
  };
 
  return (
    <div className="mt-10 max-w-md mx-auto w-full shadow-2xl p-6 rounded-lg">
      <form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
        {errors.root && (
          <div className="text-red-600 text-sm text-center">{errors.root.message}</div>
        )}
 
        <div>
          <label htmlFor="email" className="block text-gray-800 text-sm font-semibold">
            Email
          </label>
          <div className="mt-2">
            <input
              id="email"
              type="email"
              autoComplete="email"
              disabled={isPending}
              {...register('email')}
              className="block w-full rounded-md border-0 px-3 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600"
            />
            {errors.email && (
              <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>
            )}
          </div>
        </div>
 
        <div>
          <label htmlFor="password" className="block text-gray-800 text-sm font-semibold">
            Password
          </label>
          <div className="mt-2">
            <input
              id="password"
              type="password"
              autoComplete="current-password"
              disabled={isPending}
              {...register('password')}
              className="block w-full rounded-md border-0 px-3 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600"
            />
            {errors.password && (
              <p className="mt-1 text-sm text-red-600">{errors.password.message}</p>
            )}
          </div>
        </div>
 
        <div>
          <button
            type="submit"
            disabled={isPending}
            className="flex w-full justify-center rounded-md bg-blue-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white disabled:opacity-50 hover:bg-blue-500 transition-colors"
          >
            {isPending ? 'Signing in...' : 'Sign in'}
          </button>
        </div>
      </form>
 
      <p className="mt-10 text-center text-sm text-gray-500">
        Don&apos;t have an account?{' '}
        <Link
          href="/register"
          className="font-semibold leading-6 text-blue-600 hover:text-blue-500"
        >
          Register
        </Link>
      </p>
    </div>
  );
}
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
 
 
 
 
 
 
9x
9x
 
9x
2x
2x
2x
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'
 
import { useTransition } from 'react'
import { useRouter } from 'next/navigation'
import { logoutAction } from '@/app/actions/auth'
 
export function LogoutButton() {
  const router = useRouter()
  const [isPending, startTransition] = useTransition()
 
  const handleLogout = () => {
    startTransition(async () => {
      await logoutAction()
      router.push('/login')
      router.refresh()
    })
  }
 
  return (
    <button
      onClick={handleLogout}
      disabled={isPending}
      className="text-sm font-semibold text-red-600 hover:text-red-700 disabled:opacity-50"
    >
      {isPending ? 'Signing out...' : 'Sign out'}
    </button>
  )
}
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
 
 
 
 
 
 
 
 
 
 
 
34x
34x
 
 
 
 
 
 
34x
 
 
 
 
 
 
 
 
 
 
 
34x
3x
3x
 
3x
1x
 
2x
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';
 
import Link from 'next/link';
import { useTransition } from 'react';
import { useRouter } from 'next/navigation';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { registerSchema, type RegisterInput } from '@/lib/validators';
import { registerAction } from '@/app/actions/auth';
 
export function RegisterForm() {
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
 
  const {
    register,
    handleSubmit,
    formState: { errors },
    setError,
  } = useForm<RegisterInput>({
    resolver: zodResolver(registerSchema),
    mode: 'onBlur',
    reValidateMode: 'onChange',
    defaultValues: {
      name: '',
      email: '',
      password: '',
      role: 'REVIEWER',
    },
  });
 
  const onSubmit = (data: RegisterInput) => {
    startTransition(async () => {
      const result = await registerAction(data.email, data.password, data.name, data.role);
 
      if ('error' in result) {
        setError('root', { message: result.error });
      } else {
        router.push('/');
        router.refresh();
      }
    });
  };
 
  return (
    <div className="mt-10 max-w-md mx-auto w-full shadow-2xl p-6 rounded-lg">
      <form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
        {errors.root && (
          <div className="text-red-600 text-sm text-center">{errors.root.message}</div>
        )}
 
        <div>
          <label htmlFor="name" className="block text-gray-800 text-sm font-semibold">
            Name
          </label>
          <div className="mt-2">
            <input
              id="name"
              type="text"
              autoComplete="name"
              disabled={isPending}
              {...register('name')}
              className="block w-full rounded-md border-0 px-3 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600"
            />
            {errors.name && (
              <p className="mt-1 text-sm text-red-600">{errors.name.message}</p>
            )}
          </div>
        </div>
 
        <div>
          <label htmlFor="email" className="block text-gray-800 text-sm font-semibold">
            Email
          </label>
          <div className="mt-2">
            <input
              id="email"
              type="email"
              autoComplete="email"
              disabled={isPending}
              {...register('email')}
              className="block w-full rounded-md border-0 px-3 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600"
            />
            {errors.email && (
              <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>
            )}
          </div>
        </div>
 
        <div>
          <label htmlFor="password" className="block text-gray-800 text-sm font-semibold">
            Password
          </label>
          <div className="mt-2">
            <input
              id="password"
              type="password"
              autoComplete="new-password"
              disabled={isPending}
              {...register('password')}
              className="block w-full rounded-md border-0 px-3 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600"
            />
            {errors.password && (
              <p className="mt-1 text-sm text-red-600">{errors.password.message}</p>
            )}
            <p className="mt-1 text-xs text-gray-500">
              Must be at least 8 characters with uppercase, lowercase, and number
            </p>
          </div>
        </div>
 
        <div>
          <label htmlFor="role" className="block text-gray-800 text-sm font-semibold">
            Role
          </label>
          <div className="mt-2">
            <select
              id="role"
              disabled={isPending}
              {...register('role')}
              className="block w-full rounded-md border-0 px-3 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600"
            >
              <option value="REVIEWER">Reviewer</option>
              <option value="OWNER">Restaurant Owner</option>
            </select>
            {errors.role && (
              <p className="mt-1 text-sm text-red-600">{errors.role.message}</p>
            )}
          </div>
        </div>
 
        <div>
          <button
            type="submit"
            disabled={isPending}
            className="flex w-full justify-center rounded-md bg-blue-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white disabled:opacity-50 hover:bg-blue-500 transition-colors"
          >
            {isPending ? 'Registering...' : 'Register'}
          </button>
        </div>
      </form>
 
      <p className="mt-10 text-center text-sm text-gray-500">
        Already have an account?{' '}
        <Link
          href="/login"
          className="font-semibold leading-6 text-blue-600 hover:text-blue-500"
        >
          Sign in
        </Link>
      </p>
    </div>
  );
}
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
74x
74x
 
 
74x
23x
23x
23x
3x
3x
 
1x
 
 
 
74x
74x
74x
74x
 
 
74x
 
 
35x
 
35x
23x
23x
 
 
2x
 
 
 
 
2x
 
2x
2x
2x
2x
 
 
2x
 
2x
2x
 
2x
2x
 
2x
2x
 
2x
2x
 
 
 
2x
2x
2x
 
 
 
 
 
 
 
74x
10x
10x
1x
 
 
 
 
74x
 
5x
 
 
 
 
 
5x
 
5x
5x
5x
4x
 
5x
2x
 
5x
2x
 
5x
 
5x
5x
 
 
 
74x
3x
3x
3x
3x
 
3x
 
3x
3x
 
 
 
74x
 
 
 
 
 
 
 
 
 
 
 
 
 
3x
 
 
 
 
 
 
 
 
 
 
 
 
6x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'
 
import { useState, useTransition, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { CUISINE_TYPES, MIN_RATING_FILTERS, SORT_OPTIONS, CITIES, SortOrder, CuisineType } from '@/lib/constants'
import { Button } from '@/components/ui'
import { savedPreferencesSchema } from '@/lib/validators';
 
const FILTER_PREFERENCES_KEY = 'restaurant_filter_preferences'
 
export interface FilterPanelProps {
  initialCuisines?: CuisineType[]
  initialMinRating?: number
  initialSort?: SortOrder,
  initialLocation?: string
}
 
interface SavedFilterPreferences {
  cuisines?: CuisineType[]
  minRating?: number
  sort?: SortOrder
  location?: string
}
 
export function FilterPanel({
  initialCuisines = [],
  initialMinRating = 0,
  initialSort = 'best',
  initialLocation = '',
}: FilterPanelProps) {
  const router = useRouter()
  const [isPending, startTransition] = useTransition()
 
  // Load saved filter preferences from localStorage
  const getSavedPreferences = (): SavedFilterPreferences | null => {
    try {
      const saved = localStorage.getItem(FILTER_PREFERENCES_KEY)
      if(!saved) return null;
      const parsed = savedPreferencesSchema.safeParse(JSON.parse(saved))
      return parsed.success ? parsed.data : null
    } catch {
      return null
    }
  }
 
  const [selectedCuisines, setSelectedCuisines] = useState<CuisineType[]>(initialCuisines)
  const [minRating, setMinRating] = useState(initialMinRating)
  const [sortOrder, setSortOrder] = useState<SortOrder>(initialSort)
  const [selectedLocation, setSelectedLocation] = useState(initialLocation)
 
  // Load filter preferences on mount and apply them if no URL params present
  useEffect(() => {
 
    // Only load from localStorage if no URL params are present
    const hasUrlParams = initialCuisines.length > 0 || initialMinRating > 0 || initialSort !== 'best' || initialLocation !== ''
 
    if (!hasUrlParams) {
      const saved = getSavedPreferences()
      if (saved) {
        // Check if saved preferences exist
        const hasSavedPreferences =
          (saved.cuisines && saved.cuisines.length > 0) ||
          (saved.minRating && saved.minRating > 0) ||
          saved.sort ||
          saved.location
 
        Eif (hasSavedPreferences) {
          // Update local state with saved preferences
          Eif (saved.cuisines) setSelectedCuisines(saved.cuisines)
          Eif (saved.minRating) setMinRating(saved.minRating)
          Eif (saved.sort) setSortOrder(saved.sort)
          Eif (saved.location) setSelectedLocation(saved.location)
 
          // Build URL params from saved preferences
          const params = new URLSearchParams()
 
          Eif (saved.cuisines && saved.cuisines.length > 0) {
            params.set('cuisine', saved.cuisines.join(','))
          }
          Eif (saved.minRating && saved.minRating > 0) {
            params.set('minRating', saved.minRating.toString())
          }
          Eif (saved.location) {
            params.set('location', saved.location)
          }
          Eif (saved.sort) {
            params.set('sort', saved.sort)
          }
 
          // Navigate to URL with saved filters (only once on mount)
          const queryString = params.toString()
          Eif (queryString) {
            router.push(`/?${queryString}`)
          }
        }
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []) // Only run once on mount
 
  const handleCuisineToggle = (cuisine: CuisineType) => {
    setSelectedCuisines((prev) =>
      prev.includes(cuisine)
        ? prev.filter((c) => c !== cuisine)
        : [...prev, cuisine]
    )
  }
 
  const handleApplyFilters = () => {
    // Save all filter preferences to localStorage
    const preferences: SavedFilterPreferences = {
        cuisines: selectedCuisines,
        minRating,
        sort: sortOrder,
        location: selectedLocation,
    }
    localStorage.setItem(FILTER_PREFERENCES_KEY, JSON.stringify(preferences))
 
    startTransition(() => {
      const params = new URLSearchParams()
      if (selectedCuisines.length > 0) {
        params.set('cuisine', selectedCuisines.join(','))
      }
      if (minRating > 0) {
        params.set('minRating', minRating.toString())
      }
      if (selectedLocation) {
        params.set('location', selectedLocation)
      }
      params.set('sort', sortOrder)
 
      const queryString = params.toString()
      router.push(queryString ? `/?${queryString}` : '/')
    })
  }
 
  const handleReset = () => {
    setSelectedCuisines([])
    setMinRating(0)
    setSortOrder('best')
    setSelectedLocation('')
 
    localStorage.removeItem(FILTER_PREFERENCES_KEY)
 
    startTransition(() => {
      router.push('/')
    })
  }
 
  const hasActiveFilters = selectedCuisines.length > 0 || minRating > 0 || selectedLocation !== ''
 
  return (
    <div className="bg-white rounded-lg shadow-md p-6 space-y-6">
      <div>
        <h3 className="text-base md:text-lg font-semibold mb-3">Sort By</h3>
        <div className="space-y-2">
          {SORT_OPTIONS.map((option) => (
            <label key={option.value} className="flex items-center cursor-pointer">
              <input
                type="radio"
                name="sort"
                value={option.value}
                checked={sortOrder === option.value}
                onChange={(e) => setSortOrder(e.target.value as SortOrder)}
                className="mr-2"
              />
              <span>{option.label}</span>
            </label>
          ))}
        </div>
      </div>
 
      <div>
        <h3 className="text-base md:text-lg font-semibold mb-3">Minimum Rating</h3>
        <select
          value={minRating}
          onChange={(e) => setMinRating(Number(e.target.value))}
          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        >
          {MIN_RATING_FILTERS.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
 
      <div>
        <h3 className="text-base md:text-lg font-semibold mb-3">Location</h3>
        <select
          value={selectedLocation}
          onChange={(e) => setSelectedLocation(e.target.value)}
          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        >
          <option value="">All Locations</option>
          {CITIES.map((city) => (
            <option key={city} value={city}>
              {city}
            </option>
          ))}
        </select>
      </div>
 
      <div>
        <h3 className="text-base md:text-lg font-semibold mb-3">Cuisine</h3>
        <div className="space-y-2 max-h-64 overflow-y-auto">
          {CUISINE_TYPES.map((cuisine) => (
            <label key={cuisine} className="flex items-center cursor-pointer">
              <input
                type="checkbox"
                checked={selectedCuisines.includes(cuisine)}
                onChange={() => handleCuisineToggle(cuisine)}
                className="mr-2"
              />
              <span>{cuisine}</span>
            </label>
          ))}
        </div>
      </div>
 
      <div className="pt-4 space-y-2">
        <Button
          onClick={handleApplyFilters}
          className="w-full"
          isLoading={isPending}
          disabled={isPending}
        >
          Apply Filters
        </Button>
        {hasActiveFilters && (
          <Button
            onClick={handleReset}
            variant="outline"
            className="w-full"
            disabled={isPending}
          >
            Reset Filters
          </Button>
        )}
      </div>
    </div>
  )
}