109:"ExplicitChatIdProvider" 10a:I[903690,["$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$82","$83","$84","$7d","$85","$86","$87","$88","$7e","$7f","$89","$8a","$8b","$8c"],"$109"] 10b:I[838238,["$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$82","$83","$84","$7d","$85","$86","$87","$88","$7e","$7f","$89","$8a","$8b","$8c"],"SWRDataProvider"] 10d:[] 10e:[["b_vlb9vYMyDJM",null],["b_J2nZg59fxo9",null]] 10f:[["b_vlb9vYMyDJM",{"templateVersionId":null,"templateCanonId":null}],["b_J2nZg59fxo9",{"templateVersionId":null,"templateCanonId":null}]] 110:[["b_3Kw6FYlEhG4","$D2025-10-03T12:02:03.092Z"],["b_P3VZnvtx7nS","$D2025-10-03T12:06:00.243Z"],["b_o4qmbqEMwTu","$D2025-10-03T12:09:35.329Z"],["b_gr7SP0rYEFZ","$D2025-10-03T12:12:55.344Z"],["b_Uh9QJK7pzOP","$D2025-10-03T12:14:23.796Z"],["b_bQTJYcUqBxd","$D2025-10-03T12:16:49.826Z"],["b_udb5ux26HEo","$D2025-10-03T12:18:12.581Z"],["b_AGZT3I8733B","$D2025-10-03T12:18:42.913Z"],["b_4SGvZ9VNtTu","$D2025-10-03T12:24:09.100Z"],["b_VG6qtMZyxzj","$D2025-10-03T12:35:22.240Z"],["b_Av9Z1w70pyD","$D2025-10-03T13:26:50.396Z"],["b_vC1SkUB6bMD","$D2025-10-03T13:41:01.395Z"],["b_PTW0LdOwcgU","$D2025-10-04T07:27:25.217Z"],["b_CIk1ITh49zT","$D2025-10-04T07:30:04.759Z"],["b_I1Z5yxDTuvh","$D2025-10-04T07:32:55.728Z"],["b_1fsAxpZkCVS","$D2025-10-04T07:35:04.538Z"],["b_tQmUuIqo5hA","$D2025-10-04T07:35:36.872Z"],["b_l54FH7VyJmz","$D2025-10-04T07:37:06.842Z"],["b_X8ljm3BgkJu","$D2025-10-04T07:40:37.229Z"],["b_a79cxhtb4rr","$D2025-10-04T07:45:10.276Z"],["b_SHizcXSHMii","$D2025-10-04T08:15:48.266Z"],["b_2wts6gvTqO2","$D2025-10-04T08:18:31.843Z"],["b_fjfB96NDlBA","$D2025-10-04T08:58:59.690Z"],["b_Dsv881Mb2kB","$D2025-10-04T09:02:14.572Z"],["b_0qhUvBdRc8F","$D2025-10-04T09:03:25.594Z"],["b_NgyrnSLCraF","$D2025-10-04T09:11:09.288Z"],["b_FqImJF1n1Ri","$D2025-10-04T09:20:48.238Z"],["b_IfUm5mVmZY4","$D2025-10-04T09:27:25.897Z"],["b_LQvWTRMa8ck","$D2025-10-06T07:33:53.436Z"],["b_XF8gCHoHfgf","$D2025-10-06T07:43:23.069Z"],["b_URe6SUjNRKr","$D2025-10-06T07:48:05.775Z"],["b_yr6S7oYvTnj","$D2025-10-06T07:49:22.663Z"],["b_jnPdjjX4Udc","$D2025-10-06T07:50:58.956Z"],["b_m0xgVxfQJ1D","$D2025-10-06T07:56:17.381Z"],["b_OuKDpmhwYbH","$D2025-10-06T08:01:55.614Z"],["b_G8LLjoqew9p","$D2025-10-06T08:03:21.055Z"],["b_MM1HgaEyGkG","$D2025-10-06T08:03:27.898Z"],["b_Lr29jIbbg4s","$D2025-10-06T08:05:09.154Z"],["b_9x4VQeZq78z","$D2025-10-06T08:11:27.967Z"],["b_WPQm92nyz7P","$D2025-10-06T08:43:36.787Z"],["b_0PRnzeH6LX2","$D2025-10-06T08:44:45.970Z"],["b_6z3tR9zr8pj","$D2025-10-06T08:48:59.668Z"],["b_6c6rMtGddyq","$D2025-10-06T08:57:46.863Z"],["b_LMUAMlDemxN","$D2025-10-06T09:42:23.180Z"],["b_LjpZn04sOb7","$D2025-10-06T09:45:36.935Z"],["b_CCOFS2rQtCV","$D2025-10-06T09:46:26.928Z"],["b_qBPCTiLPUpS","$D2025-10-06T09:48:48.818Z"],["b_Hgy03X0Vygc","$D2025-10-06T09:49:27.897Z"],["b_JrBg3eSdUKV","$D2025-10-06T10:05:10.154Z"],["b_mwrjIgfel6i","$D2025-10-06T10:12:05.079Z"],["b_a0Sdho5dzdr","$D2025-10-06T10:28:42.664Z"],["b_sRhdbrAZ3nX","$D2025-10-06T10:30:04.411Z"],["b_KV2f1Hu8AL7","$D2025-10-06T11:01:47.747Z"],["b_iPyAObO8Lqz","$D2025-10-06T11:16:38.471Z"],["b_BVFxwdNJUEp","$D2025-10-06T11:27:52.243Z"],["b_VW5PvCancEb","$D2025-10-06T11:28:27.850Z"],["b_t5OY4YKVTHE","$D2025-10-06T11:28:49.857Z"],["b_eL3OgQJVrKs","$D2025-10-06T11:30:37.379Z"],["b_z1xqnAXW885","$D2025-10-06T11:47:14.210Z"],["b_9X42ZAbzMb3","$D2025-10-06T11:48:47.433Z"],["b_oo4swEXHcRP","$D2025-10-06T11:50:50.947Z"],["b_y0LmWNIyIvV","$D2025-10-06T11:52:30.175Z"],["b_ybgBfUP10xH","$D2025-10-06T11:55:11.676Z"],["b_1bBjI33QNHc","$D2025-10-06T11:55:56.417Z"],["b_twRJtdFuynb","$D2025-10-06T12:08:18.715Z"],["b_j7nq5c3eFM1","$D2025-10-06T12:11:18.983Z"],["b_Di87LHRv7ME","$D2025-10-06T13:11:26.053Z"],["b_JZfTSduDulE","$D2025-10-06T13:34:52.359Z"],["b_bhFv4IhTfKd","$D2025-10-06T13:35:10.389Z"],["b_Ge3cxSjin7U","$D2025-10-06T13:35:51.881Z"],["b_rRJR1IMKAJM","$D2025-10-06T13:38:25.950Z"],["b_Mkl69PRT5jc","$D2025-10-06T13:49:57.022Z"],["b_tP2fKLnsgvt","$D2025-10-06T13:50:05.184Z"],["b_0cfvSElSGct","$D2025-10-07T06:42:05.537Z"],["b_M3VKgWWrtbk","$D2025-10-07T06:46:37.852Z"],["b_P50rH1CCJuk","$D2025-10-07T06:49:06.389Z"],["b_OKcIjSziRKZ","$D2025-10-07T06:51:24.331Z"],["b_ofWTa0TJ0Fm","$D2025-10-07T06:51:41.233Z"],["b_wWgs5kixr42","$D2025-10-07T06:52:51.895Z"],["b_Xxsw0HUrjot","$D2025-10-07T06:55:14.371Z"],["b_yAK31W1FTQG","$D2025-10-07T07:00:58.983Z"],["b_PcIbnxrS13d","$D2025-10-07T07:06:27.366Z"],["b_SJQk6lfYB7Y","$D2025-10-07T07:11:46.675Z"],["b_KWjJc0wX9Y4","$D2025-10-07T07:11:54.600Z"],["b_jmrePS7YKt8","$D2025-10-07T07:15:50.919Z"],["b_ZLavoeKfDLq","$D2025-10-07T07:18:44.715Z"],["b_Cj7zcmjDy0Y","$D2025-10-07T07:20:42.841Z"],["b_KdQM9kn8krT","$D2025-10-07T07:24:20.144Z"],["b_QPQn07rGZyz","$D2025-10-07T07:24:57.199Z"],["b_mty1KLFbkjq","$D2025-10-07T07:44:02.972Z"],["b_5QJsuhX6SvF","$D2025-10-07T07:44:19.642Z"],["b_PJu6xEY069t","$D2025-10-07T07:45:19.420Z"],["b_WTGU77tJZ0X","$D2025-10-07T07:53:22.722Z"],["b_Rb5iFxQyr1l","$D2025-10-07T08:20:18.285Z"],["b_8f4GY1wyrTo","$D2025-10-07T08:22:48.600Z"],["b_Vd2iLPVuOG0","$D2025-10-07T08:27:26.061Z"],["b_hg6iMiDoZxL","$D2025-10-07T08:34:06.639Z"],["b_2CWFCXmsZdK","$D2025-10-07T08:39:01.135Z"],["b_SnL9yHRcae8","$D2025-10-07T08:39:47.755Z"],["b_bbR0qvkHKM2","$D2025-10-07T10:05:56.111Z"],["b_9qa6ElcPlk9","$D2025-10-07T10:07:19.834Z"],["b_eKnaNEAaKXh","$D2025-10-07T10:08:15.610Z"],["b_qXQSDo9COB8","$D2025-10-07T10:08:57.600Z"],["b_qLBTd76XFsH","$D2025-10-07T10:09:26.513Z"],["b_NKraYJdKIgf","$D2025-10-07T10:56:34.400Z"],["b_VuS2FT9Zn3L","$D2025-10-07T11:38:12.487Z"],["b_ol6P2Org4Rl","$D2025-10-07T11:44:48.551Z"],["b_qY4nEWat5Iq","$D2025-10-07T11:48:49.851Z"],["b_aVIPqPMkpky","$D2025-10-07T11:54:55.141Z"],["b_EsaQFDwdAxn","$D2025-10-07T11:58:23.368Z"],["b_XVSQeDhKdxS","$D2025-10-07T12:00:44.888Z"],["b_KQCSrT1c4Gv","$D2025-10-07T12:00:55.658Z"],["b_dWg1MeDpUST","$D2025-10-07T12:06:31.850Z"],["b_r2H7IumBnDz","$D2025-10-07T12:10:29.075Z"],["b_9fPcsSBv0qT","$D2025-10-07T12:11:42.635Z"],["b_jHpY0bPa1s3","$D2025-10-07T12:19:17.326Z"],["b_YvVAk19azqV","$D2025-10-07T12:23:00.566Z"],["b_6mJXpGT5vwV","$D2025-10-07T12:23:09.967Z"],["b_bRplFBZz05m","$D2025-10-07T12:24:58.190Z"],["b_pkfZ48YcaXf","$D2025-10-07T12:56:59.084Z"],["b_hiVO7nyF3Mn","$D2025-10-08T07:33:26.363Z"],["b_7DvkD2a8sph","$D2025-10-08T07:37:41.212Z"],["b_OGDQAIzYIXD","$D2025-10-08T07:42:31.476Z"],["b_SKA1nONjBeh","$D2025-10-08T07:45:07.053Z"],["b_VRsD9Pl2PT2","$D2025-10-08T07:50:39.029Z"],["b_Uyo9kRNLo8h","$D2025-10-08T07:53:24.997Z"],["b_jOBGQgt6BPE","$D2025-10-08T07:58:38.667Z"],["b_AyLqgFqE34Y","$D2025-10-08T07:59:00.849Z"],["b_DKbawuGftsA","$D2025-10-09T08:08:21.604Z"],["b_pJfHSFVyjkB","$D2025-10-09T08:11:29.429Z"],["b_MVlBtl00NJ6","$D2025-10-09T08:20:19.551Z"],["b_ptcEhSlhpAB","$D2025-10-09T08:24:09.670Z"],["b_gS9p5IAwcMw","$D2025-10-09T08:24:27.208Z"],["b_NtLzWV5wE83","$D2025-10-09T08:29:56.690Z"],["b_pG2YIMGhQEH","$D2025-10-09T08:38:58.440Z"],["b_BMb2PTedKJg","$D2025-10-09T08:42:40.932Z"],["b_Au3uSaoLsQf","$D2025-10-09T08:46:22.172Z"],["b_M3yTL2j4Flc","$D2025-10-09T08:51:08.649Z"],["b_agj1v76K4xB","$D2025-10-09T08:51:42.057Z"],["b_LVuKPgjGyjf","$D2025-10-09T10:02:43.440Z"],["b_gjDmLE6VIpg","$D2025-10-09T10:03:22.607Z"],["b_iLWBq3TA1VR","$D2025-10-09T10:07:17.735Z"],["b_DFdP39rgQfl","$D2025-10-09T10:10:03.789Z"],["b_AU2TSJ7gkQp","$D2025-10-09T10:13:01.694Z"],["b_mh0IF1ayU2Z","$D2025-10-09T10:13:12.407Z"],["b_L1t7rulWf9V","$D2025-10-09T10:24:00.989Z"],["b_SdxhAV1xkzQ","$D2025-10-09T10:30:57.916Z"],["b_FaBC8X0y4tD","$D2025-10-09T10:32:55.749Z"],["b_NylSadvnucy","$D2025-10-09T10:33:24.904Z"],["b_p9Y32EeDy6C","$D2025-10-09T10:33:52.231Z"],["b_loddzEPjeoW","$D2025-10-09T10:34:19.755Z"],["b_XNuSCkYQP8o","$D2025-10-09T10:48:46.659Z"],["b_pnj6zQNKHE6","$D2025-10-09T10:55:47.244Z"],["b_UDlTp3BhJ8R","$D2025-10-09T11:21:20.204Z"],["b_vuyZhXVtv0G","$D2025-10-09T11:23:58.960Z"],["b_oVfxJeSyyOI","$D2025-10-09T11:28:27.011Z"],["b_BcrUYQQ3IPp","$D2025-10-09T12:03:21.103Z"],["b_BCshmoGGW3U","$D2025-10-09T12:05:28.666Z"],["b_W0qyYf2ZT4p","$D2025-10-09T12:09:04.944Z"],["b_kEz12EmkTe1","$D2025-10-09T12:09:24.823Z"],["b_FYmT0bcj2nV","$D2025-10-09T12:11:51.157Z"],["b_7ZR78VYSpqv","$D2025-10-09T12:15:52.044Z"],["b_SQvuOBLhMYx","$D2025-10-09T12:16:15.287Z"],["b_SI52kEJJ5Ct","$D2025-10-09T12:22:42.772Z"],["b_o8extQXzsMh","$D2025-10-09T12:23:18.598Z"],["b_nRjN2cZBJyz","$D2025-10-09T12:29:44.540Z"],["b_lW80LxzmJ29","$D2025-10-09T12:32:14.626Z"],["b_FUXDhVnwxOn","$D2025-10-09T12:34:28.744Z"],["b_g6MLeZXXZtk","$D2025-10-09T12:44:15.053Z"],["b_msqPzMZBFsb","$D2025-10-09T12:46:50.813Z"],["b_5dZgvzaKLKR","$D2025-10-09T14:41:01.640Z"],["b_ORww4pC2XVZ","$D2025-10-10T07:01:00.328Z"],["b_nXKaFXeJxVv","$D2025-10-10T07:04:27.917Z"],["b_AtFqvsUTJGN","$D2025-10-10T07:07:06.828Z"],["b_B3m5WBjDeYU","$D2025-10-10T07:09:19.573Z"],["b_QzihbRsDT2F","$D2025-10-10T07:11:44.682Z"],["b_tojh53MrUT1","$D2025-10-10T07:14:01.963Z"],["b_z41rNF1pBIO","$D2025-10-10T07:14:20.552Z"],["b_aQ2XsmL8B6z","$D2025-10-10T07:18:56.878Z"],["b_FrXWwXKjrVO","$D2025-10-10T07:33:18.069Z"],["b_HdKrE0SWAXx","$D2025-10-10T07:36:56.246Z"],["b_t4AvaqCTTCc","$D2025-10-10T07:41:17.173Z"],["b_1CMd0feZX71","$D2025-10-10T07:48:23.406Z"],["b_bPLXR9dnKhc","$D2025-10-10T07:53:21.352Z"],["b_SAX1HcTrHGv","$D2025-10-10T07:57:00.783Z"],["b_T5GeJld01Fv","$D2025-10-10T07:59:59.734Z"],["b_DmAjytxtD2o","$D2025-10-10T08:02:08.393Z"],["b_b70Rdo2Wofk","$D2025-10-10T08:03:49.914Z"],["b_Mpk7CXsXT03","$D2025-10-10T08:07:45.861Z"],["b_XbNalKXHbQG","$D2025-10-10T11:06:29.895Z"],["b_HLnouofjPSY","$D2025-10-10T11:24:26.569Z"],["b_8a0VEET6vW2","$D2025-10-10T11:30:39.246Z"],["b_kvxWGqdUr3f","$D2025-10-10T12:04:21.212Z"],["b_qD2GW9F3o6s","$D2025-10-10T12:06:59.528Z"],["b_bRzHbd5y3s9","$D2025-10-10T12:07:52.129Z"],["b_OLkNaaHoefb","$D2025-10-10T12:38:31.861Z"],["b_2q9AHXIUb5R","$D2025-10-10T12:39:35.392Z"],["b_IF0PSWehftU","$D2025-10-10T12:40:17.177Z"],["b_BlBeoI27dh1","$D2025-10-10T12:52:00.373Z"],["b_XLuhG9O5gPg","$D2025-10-10T12:53:34.809Z"],["b_FvuvJRnJwkY","$D2025-10-10T12:56:41.135Z"],["b_x8bMB1v0zG2","$D2025-10-10T12:57:32.702Z"],["b_YFkJMOtd7is","$D2025-10-10T13:00:13.602Z"],["b_O0o1Wn1te73","$D2025-10-10T13:03:03.317Z"],["b_4iwtbGulVh2","$D2025-10-10T13:06:15.753Z"],["b_9UE9cdqEhjS","$D2025-10-10T13:14:51.842Z"],["b_0OFbEVEW3JM","$D2025-10-10T13:19:13.872Z"],["b_8jGR1n5bxlS","$D2025-10-10T13:39:40.690Z"],["b_vlb9vYMyDJM","$D2025-10-10T13:43:45.996Z"],["b_J2nZg59fxo9","$D2025-10-11T07:12:08.763Z"]] 111:[["b_vlb9vYMyDJM",false],["b_J2nZg59fxo9",false]] 112:[["b_vlb9vYMyDJM","$undefined"],["b_J2nZg59fxo9","$undefined"]] 113:[["b_vlb9vYMyDJM",null],["b_J2nZg59fxo9",null]] 114:[["b_vlb9vYMyDJM",true],["b_J2nZg59fxo9",true]] 115:[["b_vlb9vYMyDJM",true],["b_J2nZg59fxo9",true]] 116:[] 117:T49d,Good! The `app/not-found.tsx` file exists and looks correct. The debug logs show the user is navigating through admin pages successfully, but there's no indication they tried to access a non-existent route to trigger the 404 page. Possible Issues: - Next.js Caching: The app might need to be restarted or the cache cleared - Route Groups: The app uses route groups like `(frontend)`, which might be interfering - Layout Issues: The not-found page might need to include the header/footer - The "Go Back" button has invalid href: `href="javascript:history.back()"` is not valid in Next.js Link component Let me check if there are any layout files that might be affecting the 404 page, and also fix the "Go Back" button issue. Actually, looking at the structure, I see there's a `app/(frontend)/layout.tsx` which likely includes the header and footer. The `app/not-found.tsx` is at the root level, so it won't inherit the frontend layout. This might be why it's not showing up properly - it might be showing but without the expected layout. Let me: - Fix the "Go Back" button - Check if we need to add the layout components to the 404 page - Verify the page is working correctly118:Tf75a6,[V0_FILE]png:file="public/logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/300X300%20Logo-n6DqwkTivyFrWL9OkWCYlnSUNsW4Ex.png" isMerged="true" [V0_FILE]typescriptreact:file="components/hero-section.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" export function HeroSection() { return (

Discover Quality Products from Trusted Vendors

Shop from thousands of verified vendors offering millions of products. Your one-stop marketplace for everything you need.

10K+

Active Vendors

500K+

Products

1M+

Happy Customers

) } [V0_FILE]jpg:file="public/modern-e-commerce-shopping-illustration-with-produ.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-e-commerce-shopping-illustration-with-produ-WG1GZAbpZlDpUG1U0DaJYgYQRF4gXe.jpg" isMerged="true" [V0_FILE]jpg:file="public/wireless-headphones-product-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wireless-headphones-product-photo-mZLiHUi5ht2hZS3C2kjpcauhaMyU2m.jpg" isMerged="true" [V0_FILE]jpg:file="public/smart-watch-product-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/smart-watch-product-photo-QDyxppBVFOnGZmpjZAH0JX3WsNipqr.jpg" isMerged="true" [V0_FILE]jpg:file="public/leather-bag-product-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/leather-bag-product-photo-KcoqBVrIkV7FM5Dm6PGvZq5kjvFR79.jpg" isMerged="true" [V0_FILE]jpg:file="public/skincare-products-set.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/skincare-products-set-x1AGlHUTvsnuFXWnSJc3vmn4tg9JOJ.jpg" isMerged="true" [V0_FILE]jpg:file="public/yoga-mat-product-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/yoga-mat-product-photo-kkb4Q8RcEGbUZ9iHhMIwSbYR4xh7y6.jpg" isMerged="true" [V0_FILE]jpg:file="public/coffee-maker-product-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/coffee-maker-product-photo-MGcLtRNkWBBFxchXiyJbTEfGti1mJB.jpg" isMerged="true" [V0_FILE]jpg:file="public/running-shoes-product-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/running-shoes-product-photo-JCiDTOkeL7r0VJmfL2EfbGKy0CCs6n.jpg" isMerged="true" [V0_FILE]jpg:file="public/modern-desk-lamp-product-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-desk-lamp-product-photo-YIv554j5MhhCLn2whgdCsbQ15TPVqM.jpg" isMerged="true" [V0_FILE]png:file="public/electronics-store-banner.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/electronics-store-banner-2Po3b5RNGGFY87QpuOz9wIDCUOU6hp.png" isMerged="true" [V0_FILE]png:file="public/fashion-store-banner.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/fashion-store-banner-TLOxbdpNiylZHqUyiJeJkzdC38LPXP.png" isMerged="true" [V0_FILE]png:file="public/home-decor-banner.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/home-decor-banner-ApkX6wiwDxkLLwgznagH0oD736vRDZ.png" isMerged="true" [V0_FILE]jpg:file="public/beauty-products-store-banner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/beauty-products-store-banner-OmRoUaPdHmbiIVr4eMwuNOQR0kAQEa.jpg" isMerged="true" [V0_FILE]png:file="public/summer-sale-banner.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/summer-sale-banner-8TIXvIFHT0KsEbx2n7XYs2wunmv9ko.png" isMerged="true" [V0_FILE]jpg:file="public/new-vendors-marketplace-banner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/new-vendors-marketplace-banner-JoPMpOhIx3g9LPmi0InVPRESygKfKA.jpg" isMerged="true" [V0_FILE]jpg:file="public/free-shipping-delivery-banner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/free-shipping-delivery-banner-tMxDGZIduii1VMbHcYkkJVcNHGZ2VW.jpg" isMerged="true" [V0_FILE]jpg:file="public/flash-deals-limited-time-banner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/flash-deals-limited-time-banner-QLDbw10x7pl8GwuavwNzw5yxrPcTMm.jpg" isMerged="true" [V0_FILE]jpg:file="public/signup-illustration.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/signup-illustration-J91dHvI7fcINB3Ay96vEu1l9y8NRBN.jpg" isMerged="true" [V0_FILE]typescript:file="middleware.ts" isMerged="true" import { updateSession } from "@/lib/supabase/middleware" import type { NextRequest } from "next/server" export async function middleware(request: NextRequest) { return await updateSession(request) } export const config = { matcher: [ /* * Match all request paths except: * - _next/static (static files) * - _next/image (image optimization files) * - favicon.ico (favicon file) * - images - .svg, .png, .jpg, .jpeg, .gif, .webp */ "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)", ], } [V0_FILE]typescript:file="app/api/auth/signout/route.ts" isMerged="true" import { createClient } from "@/lib/supabase/server" import { NextResponse } from "next/server" export async function POST() { const supabase = await createClient() await supabase.auth.signOut() return NextResponse.redirect(new URL("/", process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000")) } [V0_FILE]sql:file="scripts/001_create_profiles.sql" isMerged="true" -- Create profiles table for user management create table if not exists public.profiles ( id uuid primary key references auth.users(id) on delete cascade, username text unique, user_type text check (user_type in ('customer', 'vendor')), avatar_url text, created_at timestamp with time zone default now(), updated_at timestamp with time zone default now() ); -- Enable Row Level Security alter table public.profiles enable row level security; -- Create policies for profiles table create policy "profiles_select_own" on public.profiles for select using (auth.uid() = id); create policy "profiles_insert_own" on public.profiles for insert with check (auth.uid() = id); create policy "profiles_update_own" on public.profiles for update using (auth.uid() = id); create policy "profiles_delete_own" on public.profiles for delete using (auth.uid() = id); -- Allow public to view vendor profiles create policy "profiles_select_vendors" on public.profiles for select using (user_type = 'vendor'); [V0_FILE]sql:file="scripts/002_profile_trigger.sql" isMerged="true" -- Create function to auto-create profile on user signup create or replace function public.handle_new_user() returns trigger language plpgsql security definer set search_path = public as $$ begin insert into public.profiles (id, username, user_type) values ( new.id, coalesce(new.raw_user_meta_data ->> 'username', null), coalesce(new.raw_user_meta_data ->> 'user_type', 'customer') ) on conflict (id) do nothing; return new; end; $$; -- Create trigger to call function on user creation drop trigger if exists on_auth_user_created on auth.users; create trigger on_auth_user_created after insert on auth.users for each row execute function public.handle_new_user(); [V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Checkbox } from "@/components/ui/checkbox" import { Label } from "@/components/ui/label" import { createClient } from "@/lib/supabase/client" import { useState } from "react" import { useRouter } from "next/navigation" export default function LoginPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [error, setError] = useState(null) const [isLoading, setIsLoading] = useState(false) const router = useRouter() const handleLogin = async (e: React.FormEvent) => { e.preventDefault() const supabase = createClient() setIsLoading(true) setError(null) try { const { error } = await supabase.auth.signInWithPassword({ email, password, options: { emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}`, }, }) if (error) throw error router.push("/") router.refresh() } catch (error: unknown) { setError(error instanceof Error ? error.message : "An error occurred") } finally { setIsLoading(false) } } return (

{/* Header */}

TradeGateStore

{/* Main Content */}

{/* Left Panel - Decorative */}

TradeGateStore

{/* Right Panel - Login Form */}

Log in

Email / Phone setEmail(e.target.value)} required />

Password setPassword(e.target.value)} required />

Remember Me

Forgot Password?

{/* reCAPTCHA placeholder */}

I'm not a robot

reCAPTCHA

{error && (

{error}

)}

Don't you have an account?{" "} Sign up

) } [V0_FILE]typescriptreact:file="app/signup/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Checkbox } from "@/components/ui/checkbox" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Eye, EyeOff } from "lucide-react" import { createClient } from "@/lib/supabase/client" import { useState } from "react" import { useRouter } from "next/navigation" export default function SignupPage() { const [username, setUsername] = useState("") const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [userType, setUserType] = useState("customer") const [showPassword, setShowPassword] = useState(false) const [error, setError] = useState(null) const [isLoading, setIsLoading] = useState(false) const router = useRouter() const handleSignup = async (e: React.FormEvent) => { e.preventDefault() const supabase = createClient() setIsLoading(true) setError(null) try { const { error } = await supabase.auth.signUp({ email, password, options: { emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}`, data: { username, user_type: userType, }, }, }) if (error) throw error router.push("/signup-success") } catch (error: unknown) { setError(error instanceof Error ? error.message : "An error occurred") } finally { setIsLoading(false) } } return (

{/* Header */}

TradeGateStore

{/* Main Content */}

{/* Left Panel - Decorative Image */}

{/* Right Panel - Signup Form */}

Sign up

There are many advantages to creating an account: the payment process is faster, shipment tracking is possible and much more.

Username setUsername(e.target.value)} required />

Enter Email or Phone setEmail(e.target.value)} required />

Password

setPassword(e.target.value)} required minLength={6} />

I am a customer

I am a vendor

Recover Password ?

{/* reCAPTCHA placeholder */}

I'm not a robot

reCAPTCHA

{error && (

{error}

)}

Or Continue with

) } [V0_FILE]typescript:file="lib/supabase/middleware.ts" isEdit="true" isMerged="true" import { createClient } from "@supabase/supabase-js" import { NextResponse, type NextRequest } from "next/server" export async function updateSession(request: NextRequest) { const supabaseResponse = NextResponse.next({ request, }) const supabase = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!) // Check authentication status const { data: { user }, } = await supabase.auth.getUser() // Redirect unauthenticated users trying to access protected routes if ( !user && !request.nextUrl.pathname.startsWith("/login") && !request.nextUrl.pathname.startsWith("/signup") && request.nextUrl.pathname.startsWith("/dashboard") ) { const url = request.nextUrl.clone() url.pathname = "/login" return NextResponse.redirect(url) } return supabaseResponse } [V0_FILE]shellscript:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /.pnp .pnp.js .yarn/install-state.gz # testing /coverage # next.js /.next/ /out/ # production /build # misc .DS_Store *.pem # debug npm-debug.log* yarn-debug.log* yarn-error.log* # local env files .env*.local .env # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]shellscript:file=".env.local" isEdit="true" isMerged="true" # Supabase Configuration # Copy values from your Supabase project: https://supabase.com/dashboard/project/_/settings/api NEXT_PUBLIC_SUPABASE_URL=https://yotvkiokrprfxcybdrpw.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InlvdHZraW9rcnByZnhjeWJkcnB3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTkzOTY5MTEsImV4cCI6MjA3NDk3MjkxMX0.4rEecP6LTL0kN_vgBtLtZiMUsJCjIEPVi_iqvhWffMs # Optional: Set this for local development email redirects NEXT_PUBLIC_SITE_URL=http://localhost:3000 # Optional: Only needed for admin operations (keep secret!) SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InlvdHZraW9rcnByZnhjeWJkcnB3Iiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTc1OTM5NjkxMSwiZXhwIjoyMDc0OTcyOTExfQ.OdcL3sja7kuEvr7exiKjzF51KZorAv2zvoYe6LJqW_Q [V0_FILE]typescriptreact:file="app/vendor/register/page.tsx" isMerged="true" "use client" import type React from "react" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Checkbox } from "@/components/ui/checkbox" import { Label } from "@/components/ui/label" import { Eye, EyeOff, Store } from "lucide-react" import { createClient } from "@/lib/supabase/client" import { useState } from "react" import { useRouter } from "next/navigation" export default function VendorRegisterPage() { const [businessName, setBusinessName] = useState("") const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [showPassword, setShowPassword] = useState(false) const [error, setError] = useState(null) const [isLoading, setIsLoading] = useState(false) const router = useRouter() const handleSignup = async (e: React.FormEvent) => { e.preventDefault() const supabase = createClient() setIsLoading(true) setError(null) try { const { error } = await supabase.auth.signUp({ email, password, options: { emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}/vendor/dashboard`, data: { username: businessName, user_type: "vendor", }, }, }) if (error) throw error router.push("/signup-success") } catch (error: unknown) { setError(error instanceof Error ? error.message : "An error occurred") } finally { setIsLoading(false) } } return (

{/* Header */}

TradeGateStore

Already a vendor? Log in

{/* Main Content */}

{/* Left Panel - Vendor Benefits */}

Vendor Registration

Start Selling on TradeGateStore Today

Join thousands of successful vendors and reach millions of customers worldwide.

Zero Setup Fees

Start selling without any upfront costs

Millions of Customers

Access to our large customer base

Easy Store Management

Powerful tools to manage your products and orders

24/7 Vendor Support

Dedicated support team to help you succeed

{/* Right Panel - Registration Form */}

Create Vendor Account

Fill in your business details to start selling on our platform.

Business Name setBusinessName(e.target.value)} required />

Business Email setEmail(e.target.value)} required />

Password

setPassword(e.target.value)} required minLength={6} />

I agree to the{" "} Terms of Service {" "} and{" "} Vendor Agreement

{error && (

{error}

)}

Already have a vendor account?{" "} Log in

) } [V0_FILE]typescriptreact:file="app/vendor/login/page.tsx" isMerged="true" "use client" import type React from "react" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Checkbox } from "@/components/ui/checkbox" import { Label } from "@/components/ui/label" import { Store } from "lucide-react" import { createClient } from "@/lib/supabase/client" import { useState } from "react" import { useRouter } from "next/navigation" export default function VendorLoginPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [error, setError] = useState(null) const [isLoading, setIsLoading] = useState(false) const router = useRouter() const handleLogin = async (e: React.FormEvent) => { e.preventDefault() const supabase = createClient() setIsLoading(true) setError(null) try { const { data, error } = await supabase.auth.signInWithPassword({ email, password, options: { emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}/vendor/dashboard`, }, }) if (error) throw error // Verify user is a vendor if (data.user) { const { data: profile } = await supabase.from("profiles").select("user_type").eq("id", data.user.id).single() if (profile?.user_type !== "vendor") { await supabase.auth.signOut() throw new Error("This account is not registered as a vendor. Please use the customer login.") } } router.push("/vendor/dashboard") router.refresh() } catch (error: unknown) { setError(error instanceof Error ? error.message : "An error occurred") } finally { setIsLoading(false) } } return (

{/* Header */}

TradeGateStore

New vendor? Register

{/* Main Content */}

{/* Left Panel - Vendor Portal Info */}

Vendor Portal

Welcome Back, Vendor!

Access your vendor dashboard to manage products, track orders, and grow your business.

Manage your products

Track orders & sales

View analytics & insights

{/* Right Panel - Login Form */}

Vendor Login

Access your vendor dashboard to manage your store.

Email setEmail(e.target.value)} required />

Password setPassword(e.target.value)} required />

Remember Me

Forgot Password?

{error && (

{error}

)}

New to selling?

Looking to shop?{" "} Customer Login

) } [V0_FILE]sql:file="scripts/003_add_vendor_fields.sql" isMerged="true" -- Add vendor-specific fields to profiles table alter table public.profiles add column if not exists business_name text, add column if not exists business_description text, add column if not exists business_address text, add column if not exists phone_number text, add column if not exists is_verified boolean default false, add column if not exists rating numeric(3,2) default 0.00, add column if not exists total_sales integer default 0; -- Create index for faster queries on user_type create index if not exists idx_profiles_user_type on public.profiles(user_type); -- Create index for verified vendors create index if not exists idx_profiles_verified_vendors on public.profiles(user_type, is_verified) where user_type = 'vendor' and is_verified = true; -- Add policy to allow public to view verified vendor details create policy if not exists "profiles_select_verified_vendors" on public.profiles for select using (user_type = 'vendor' and is_verified = true); [V0_FILE]sql:file="scripts/004_create_vendor_products.sql" isMerged="true" -- Create products table for vendors create table if not exists public.products ( id uuid primary key default gen_random_uuid(), vendor_id uuid references public.profiles(id) on delete cascade, name text not null, description text, price numeric(10,2) not null, category text, image_url text, stock_quantity integer default 0, is_active boolean default true, created_at timestamp with time zone default now(), updated_at timestamp with time zone default now(), constraint vendor_must_be_vendor check ( exists ( select 1 from public.profiles where id = vendor_id and user_type = 'vendor' ) ) ); -- Enable Row Level Security alter table public.products enable row level security; -- Vendors can manage their own products create policy "products_select_own" on public.products for select using (auth.uid() = vendor_id); create policy "products_insert_own" on public.products for insert with check (auth.uid() = vendor_id); create policy "products_update_own" on public.products for update using (auth.uid() = vendor_id); create policy "products_delete_own" on public.products for delete using (auth.uid() = vendor_id); -- Public can view active products from verified vendors create policy "products_select_active" on public.products for select using ( is_active = true and exists ( select 1 from public.profiles where id = vendor_id and user_type = 'vendor' and is_verified = true ) ); -- Create indexes for better performance create index if not exists idx_products_vendor_id on public.products(vendor_id); create index if not exists idx_products_category on public.products(category); create index if not exists idx_products_active on public.products(is_active); [V0_FILE]sql:file="scripts/005_create_orders.sql" isMerged="true" -- Create orders table create table if not exists public.orders ( id uuid primary key default gen_random_uuid(), customer_id uuid references public.profiles(id) on delete cascade, total_amount numeric(10,2) not null, status text check (status in ('pending', 'processing', 'shipped', 'delivered', 'cancelled')) default 'pending', shipping_address text not null, created_at timestamp with time zone default now(), updated_at timestamp with time zone default now() ); -- Create order_items table create table if not exists public.order_items ( id uuid primary key default gen_random_uuid(), order_id uuid references public.orders(id) on delete cascade, product_id uuid references public.products(id) on delete restrict, vendor_id uuid references public.profiles(id) on delete cascade, quantity integer not null, price numeric(10,2) not null, created_at timestamp with time zone default now() ); -- Enable Row Level Security alter table public.orders enable row level security; alter table public.order_items enable row level security; -- Customers can view their own orders create policy "orders_select_own" on public.orders for select using (auth.uid() = customer_id); create policy "orders_insert_own" on public.orders for insert with check (auth.uid() = customer_id); -- Vendors can view orders containing their products create policy "order_items_select_vendor" on public.order_items for select using (auth.uid() = vendor_id); -- Customers can view items in their orders create policy "order_items_select_customer" on public.order_items for select using ( exists ( select 1 from public.orders where id = order_id and customer_id = auth.uid() ) ); -- Create indexes create index if not exists idx_orders_customer_id on public.orders(customer_id); create index if not exists idx_orders_status on public.orders(status); create index if not exists idx_order_items_order_id on public.order_items(order_id); create index if not exists idx_order_items_vendor_id on public.order_items(vendor_id); [V0_FILE]typescriptreact:file="components/category-banner.tsx" isMerged="true" interface CategoryBannerProps { category: string } export function CategoryBanner({ category }: CategoryBannerProps) { const categoryTitles: Record = { electronics: "Electronics & Gadgets", fashion: "Fashion & Apparel", home: "Home & Living", beauty: "Beauty & Personal Care", sports: "Sports & Outdoors", books: "Books & Media", toys: "Toys & Games", all: "All Products", } const title = categoryTitles[category] || "Products" return (

{title}

Discover amazing deals on quality products

) } [V0_FILE]typescriptreact:file="components/category-filters.tsx" isMerged="true" "use client" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Slider } from "@/components/ui/slider" import { Button } from "@/components/ui/button" import { Search, ChevronDown, ChevronUp } from "lucide-react" import { useState } from "react" import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible" interface CategoryFiltersProps { filters: { search: string productType: string fulfillment: string[] deliveryDay: string freeShipping: boolean subcategory: string brands: string[] priceRange: [number, number] deals: string[] sellers: string[] rating: number } setFilters: (filters: any) => void } export function CategoryFilters({ filters, setFilters }: CategoryFiltersProps) { const [showAllBrands, setShowAllBrands] = useState(false) const [isCategoryOpen, setIsCategoryOpen] = useState(true) const [isBrandsOpen, setIsBrandsOpen] = useState(true) const brands = [ "CHRISTINA AGUILERA", "CK CALVIN KLEIN", "CLINIQUE", "DKNY", "DAVIDOFF", "ESTEE LAUDER", "GUCCI", "LANCOME", ] const subcategories = [ "Office Electronics", "Laptops & Computers", "Mobile Phones", "Cameras & Photography", "Audio & Headphones", "Smart Watches", "Gaming Consoles", "TV & Home Theater", "Networking Devices", "Computer Accessories", "Point-of-Sale (POS) Equipment", "Printers & Scanners", "Portable Speakers", "Drones & Accessories", ] const handleBrandToggle = (brand: string) => { setFilters({ ...filters, brands: filters.brands.includes(brand) ? filters.brands.filter((b) => b !== brand) : [...filters.brands, brand], }) } const handleFulfillmentToggle = (value: string) => { setFilters({ ...filters, fulfillment: filters.fulfillment.includes(value) ? filters.fulfillment.filter((f) => f !== value) : [...filters.fulfillment, value], }) } const handleDealToggle = (value: string) => { setFilters({ ...filters, deals: filters.deals.includes(value) ? filters.deals.filter((d) => d !== value) : [...filters.deals, value], }) } const handleSellerToggle = (value: string) => { setFilters({ ...filters, sellers: filters.sellers.includes(value) ? filters.sellers.filter((s) => s !== value) : [...filters.sellers, value], }) } return (

{/* Search */}

Filter

setFilters({ ...filters, search: e.target.value })} className="pl-10" />

{/* Product Type */}

Product Type All

{/* Fulfilled by Trade Gate Store */}

Fulfilled by Trade Gate Store

handleFulfillmentToggle("tgs")} /> Fulfilled by Trade Gate Store

handleFulfillmentToggle("dr-rasul")} /> Fulfilled by Dr. Rasul

{/* Delivery Day */}

Delivery Day

setFilters({ ...filters, deliveryDay: checked ? "tomorrow" : "" })} /> Get it by Tomorrow

{/* Free Shipping */}

Eligible for Free Shipping

setFilters({ ...filters, freeShipping: checked as boolean })} /> Free Shipping

Get FREE delivery on eligible orders shipped by TGS

{/* Category */}

Brands

{isBrandsOpen ? : }

{brands.slice(0, showAllBrands ? brands.length : 5).map((brand) => (

handleBrandToggle(brand)} /> {brand}

))}

{/* Price Range */}

Price

AED {filters.priceRange[0]} - AED {filters.priceRange[1]} {filters.priceRange[1] >= 5000 && " & above"}

setFilters({ ...filters, priceRange: value as [number, number] })} max={5000} step={100} className="w-full" />

0 2,500 5,000+

{/* Deals & Discounts */}

Deals & Discounts

handleDealToggle("all")} /> All Discounts

handleDealToggle("today")} /> {"Today's Deals"}

{/* Seller */}

Seller

handleSellerToggle("mahraz")} /> Mahraz Stores

handleSellerToggle("desertgate")} /> DesertGateAE

{/* Ratings */}

Ratings

{[4, 3, 2, 1].map((rating) => ( ))}

) } function SlidersHorizontal({ className }: { className?: string }) { return ( ) } [V0_FILE]jpg:file="public/images/category-banner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/category-banner-mBHM5fRbkMAM6UtuWQhyvEJ3UmnaVA.jpg" isMerged="true" [V0_FILE]typescriptreact:file="lib/cart-context.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useState, useEffect } from "react" export interface CartItem { id: string name: string price: number originalPrice?: number image: string quantity: number vendor: string category: string } interface CartContextType { items: CartItem[] addItem: (item: Omit) => void removeItem: (id: string) => void updateQuantity: (id: string, quantity: number) => void clearCart: () => void totalItems: number totalPrice: number isOpen: boolean openCart: () => void closeCart: () => void } const CartContext = createContext(undefined) export function CartProvider({ children }: { children: React.ReactNode }) { const [items, setItems] = useState([]) const [isOpen, setIsOpen] = useState(false) // Load cart from localStorage on mount useEffect(() => { const savedCart = localStorage.getItem("tradegate-cart") if (savedCart) { try { setItems(JSON.parse(savedCart)) } catch (error) { console.error("Failed to load cart:", error) } } }, []) // Save cart to localStorage whenever it changes useEffect(() => { localStorage.setItem("tradegate-cart", JSON.stringify(items)) }, [items]) const addItem = (item: Omit) => { setItems((currentItems) => { const existingItem = currentItems.find((i) => i.id === item.id) if (existingItem) { return currentItems.map((i) => (i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i)) } return [...currentItems, { ...item, quantity: 1 }] }) setIsOpen(true) } const removeItem = (id: string) => { setItems((currentItems) => currentItems.filter((item) => item.id !== id)) } const updateQuantity = (id: string, quantity: number) => { if (quantity <= 0) { removeItem(id) return } setItems((currentItems) => currentItems.map((item) => (item.id === id ? { ...item, quantity } : item))) } const clearCart = () => { setItems([]) } const totalItems = items.reduce((sum, item) => sum + item.quantity, 0) const totalPrice = items.reduce((sum, item) => sum + item.price * item.quantity, 0) const openCart = () => setIsOpen(true) const closeCart = () => setIsOpen(false) return ( {children} ) } export function useCart() { const context = useContext(CartContext) if (context === undefined) { throw new Error("useCart must be used within a CartProvider") } return context } [V0_FILE]typescriptreact:file="components/cart-drawer.tsx" isMerged="true" "use client" import { useCart } from "@/lib/cart-context" import { Button } from "@/components/ui/button" import { Minus, Plus, ShoppingBag, Trash2 } from "lucide-react" import Image from "next/image" import Link from "next/link" import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet" export function CartDrawer() { const { items, removeItem, updateQuantity, totalItems, totalPrice, isOpen, closeCart } = useCart() return ( Shopping Cart ({totalItems}) {items.length === 0 ? (

Your cart is empty

) : (

{/* Cart Items */}

{items.map((item) => (

{item.name}

{item.vendor}

{item.quantity}

AED {item.price.toFixed(2)}

{item.originalPrice && (

AED {item.originalPrice.toFixed(2)}

)}

AED {(item.price * item.quantity).toFixed(2)}

))}

{/* Cart Summary */}

Subtotal AED {totalPrice.toFixed(2)}

Shipping Free

Total AED {totalPrice.toFixed(2)}

)} ) } [V0_FILE]png:file="public/skincare-product-display.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/skincare-product-display-Dsgm4aZYZ38Tee7DjcWXQbkWDKOmzN.png" isMerged="true" [V0_FILE]typescriptreact:file="app/order-confirmation/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/profile-sidebar.tsx" isMerged="true" "use client" import Link from "next/link" import { usePathname, useRouter } from "next/navigation" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" import { User, ShoppingBag, Wallet, Heart, Bell, Gift, Tag, MessageCircle, HelpCircle, LogOut } from "lucide-react" import { createClient } from "@/lib/supabase/client" import { useEffect, useState } from "react" interface Profile { username: string | null avatar_url: string | null } export function ProfileSidebar() { const pathname = usePathname() const router = useRouter() const [profile, setProfile] = useState(null) const supabase = createClient() useEffect(() => { loadProfile() }, []) const loadProfile = async () => { const { data: { user }, } = await supabase.auth.getUser() if (user) { const { data } = await supabase.from("profiles").select("username, avatar_url").eq("id", user.id).single() if (data) setProfile(data) } } const handleLogout = async () => { await supabase.auth.signOut() router.push("/") router.refresh() } const menuItems = [ { href: "/profile", label: "Account Details", icon: User }, { href: "/orders", label: "My Orders", icon: ShoppingBag }, { href: "/wallet", label: "My Wallet", icon: Wallet }, { href: "/wishlist", label: "Wish List", icon: Heart }, { href: "/notifications", label: "Notification", icon: Bell }, { href: "/refer", label: "Refer Friends", icon: Gift }, { href: "/coupons", label: "Coupons", icon: Tag }, { href: "/chat", label: "Chat", icon: MessageCircle }, ] return (

{/* User Info */}

{profile?.username?.charAt(0).toUpperCase() || "U"}

{profile?.username || "User"}

{/* Menu Items */} {/* Help Center */}

Help Center

{/* Logout */}

) } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Textarea = React.forwardRef>( ({ className, ...props }, ref) => { return (

)
  },
)
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="lib/wishlist-context.tsx" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useState, useEffect } from "react"
import { useToast } from "@/hooks/use-toast"

export interface WishlistItem {
  id: string
  name: string
  price: number
  originalPrice?: number
  image: string
  vendor: string
  category: string
  rating?: number
  reviews?: number
}

interface WishlistContextType {
  items: WishlistItem[]
  addItem: (item: WishlistItem) => void
  removeItem: (id: string) => void
  isInWishlist: (id: string) => boolean
  toggleItem: (item: WishlistItem) => void
  clearWishlist: () => void
  totalItems: number
}

const WishlistContext = createContext<WishlistContextType | undefined>(undefined)

export function WishlistProvider({ children }: { children: React.ReactNode }) {
  const [items, setItems] = useState<WishlistItem[]>([])
  const { toast } = useToast()

// Load wishlist from localStorage on mount
  useEffect(() => {
    const savedWishlist = localStorage.getItem("tradegate-wishlist")
    if (savedWishlist) {
      try {
        setItems(JSON.parse(savedWishlist))
      } catch (error) {
        console.error("Failed to load wishlist:", error)
      }
    }
  }, [])

// Save wishlist to localStorage whenever it changes
  useEffect(() => {
    localStorage.setItem("tradegate-wishlist", JSON.stringify(items))
  }, [items])

const addItem = (item: WishlistItem) => {
    setItems((currentItems) => {
      const exists = currentItems.find((i) => i.id === item.id)
      if (exists) {
        return currentItems
      }
      toast({
        title: "Added to wishlist",
        description: `${item.name} has been added to your wishlist.`,
      })
      return [...currentItems, item]
    })
  }

const removeItem = (id: string) => {
    setItems((currentItems) => {
      const item = currentItems.find((i) => i.id === id)
      if (item) {
        toast({
          title: "Removed from wishlist",
          description: `${item.name} has been removed from your wishlist.`,
        })
      }
      return currentItems.filter((item) => item.id !== id)
    })
  }

const isInWishlist = (id: string) => {
    return items.some((item) => item.id === id)
  }

const toggleItem = (item: WishlistItem) => {
    if (isInWishlist(item.id)) {
      removeItem(item.id)
    } else {
      addItem(item)
    }
  }

const clearWishlist = () => {
    setItems([])
    toast({
      title: "Wishlist cleared",
      description: "All items have been removed from your wishlist.",
    })
  }

const totalItems = items.length

return (
    <WishlistContext.Provider
      value={{
        items,
        addItem,
        removeItem,
        isInWishlist,
        toggleItem,
        clearWishlist,
        totalItems,
      }}
    >
      {children}
    </WishlistContext.Provider>
  )
}

export function useWishlist() {
  const context = useContext(WishlistContext)
  if (context === undefined) {
    throw new Error("useWishlist must be used within a WishlistProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { GeistSans } from "geist/font/sans"
import { GeistMono } from "geist/font/mono"
import { Analytics } from "@vercel/analytics/next"
import { Suspense } from "react"
import { CartProvider } from "@/lib/cart-context"
import { WishlistProvider } from "@/lib/wishlist-context"
import { Toaster } from "@/components/ui/toaster"
import "./globals.css"

export const metadata: Metadata = {
  title: "TradeGateStore - Multi-Vendor Marketplace",
  description: "Your trusted multi-vendor marketplace for quality products",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
        <WishlistProvider>
          <CartProvider>
            <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
          </CartProvider>
        </WishlistProvider>
        <Toaster />
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]sql:file="scripts/006_create_admin_table.sql" isMerged="true"
-- Create admin users table for root admin authentication
CREATE TABLE IF NOT EXISTS public.admin_users (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  email TEXT UNIQUE NOT NULL,
  password_hash TEXT NOT NULL,
  full_name TEXT,
  role TEXT NOT NULL DEFAULT 'admin' CHECK (role IN ('root_admin', 'admin', 'moderator')),
  is_active BOOLEAN DEFAULT true,
  last_login TIMESTAMPTZ,
  created_at TIMESTAMPTZ DEFAULT now(),
  updated_at TIMESTAMPTZ DEFAULT now()
);

-- Create index for faster email lookups
CREATE INDEX IF NOT EXISTS idx_admin_users_email ON public.admin_users(email);

-- Enable Row Level Security
ALTER TABLE public.admin_users ENABLE ROW LEVEL SECURITY;

-- Create policy: Only authenticated admins can view admin users
CREATE POLICY "Admins can view admin users"
  ON public.admin_users
  FOR SELECT
  TO authenticated
  USING (true);

-- Create policy: Only root admins can insert new admin users
CREATE POLICY "Root admins can insert admin users"
  ON public.admin_users
  FOR INSERT
  TO authenticated
  WITH CHECK (
    EXISTS (
      SELECT 1 FROM public.admin_users
      WHERE email = auth.jwt()->>'email'
      AND role = 'root_admin'
    )
  );

-- Create policy: Admins can update their own record, root admins can update all
CREATE POLICY "Admins can update admin users"
  ON public.admin_users
  FOR UPDATE
  TO authenticated
  USING (
    email = auth.jwt()->>'email'
    OR EXISTS (
      SELECT 1 FROM public.admin_users
      WHERE email = auth.jwt()->>'email'
      AND role = 'root_admin'
    )
  );

-- Create updated_at trigger
CREATE OR REPLACE FUNCTION update_admin_users_updated_at()
RETURNS TRIGGER AS $$
BEGIN
  NEW.updated_at = now();
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER update_admin_users_updated_at
  BEFORE UPDATE ON public.admin_users
  FOR EACH ROW
  EXECUTE FUNCTION update_admin_users_updated_at();

-- Insert default root admin (password: Admin@123456)
-- Note: In production, use proper password hashing with bcrypt
INSERT INTO public.admin_users (email, password_hash, full_name, role)
VALUES (
  'admin@tradegatestore.com',
  '$2a$10$rKZLvXZvXZvXZvXZvXZvXeO7qKZLvXZvXZvXZvXZvXZvXZvXZvXZv', -- This is a placeholder, implement proper bcrypt hashing
  'Root Administrator',
  'root_admin'
)
ON CONFLICT (email) DO NOTHING;

COMMENT ON TABLE public.admin_users IS 'Stores admin user accounts for platform management';
[V0_FILE]typescriptreact:file="app/admin/products/inhouse/list/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/products/vendor/list/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]sql:file="scripts/007_enhance_products_table.sql" isMerged="true"
-- Enhance products table with comprehensive fields
-- Run this after 004_create_vendor_products.sql

-- Add new columns to products table
alter table public.products
  add column if not exists sku text unique,
  add column if not exists brand text,
  add column if not exists sub_category text,
  add column if not exists sub_sub_category text,
  add column if not exists product_type text default 'physical' check (product_type in ('physical', 'digital')),
  add column if not exists unit text default 'piece',
  add column if not exists minimum_order_qty integer default 1,
  add column if not exists current_stock integer default 0,
  add column if not exists discount_type text check (discount_type in ('flat', 'percentage')),
  add column if not exists discount_amount numeric(10,2) default 0,
  add column if not exists tax_amount numeric(10,2) default 0,
  add column if not exists tax_type text check (tax_type in ('included', 'excluded')),
  add column if not exists shipping_cost numeric(10,2) default 0,
  add column if not exists shipping_cost_multiply boolean default false,
  add column if not exists thumbnail_url text,
  add column if not exists additional_images jsonb default '[]'::jsonb,
  add column if not exists video_url text,
  add column if not exists colors jsonb default '[]'::jsonb,
  add column if not exists attributes jsonb default '[]'::jsonb,
  add column if not exists meta_title text,
  add column if not exists meta_description text,
  add column if not exists meta_image_url text,
  add column if not exists is_indexed boolean default true,
  add column if not exists no_follow boolean default false,
  add column if not exists no_image_index boolean default false,
  add column if not exists no_archive boolean default false,
  add column if not exists no_snippet boolean default false,
  add column if not exists max_snippet integer,
  add column if not exists max_video_preview text,
  add column if not exists max_image_preview text default 'large',
  add column if not exists is_featured boolean default false,
  add column if not exists featured_order integer,
  add column if not exists rating numeric(3,2) default 0,
  add column if not exists review_count integer default 0,
  add column if not exists sold_count integer default 0,
  add column if not exists view_count integer default 0,
  add column if not exists is_inhouse boolean default false,
  add column if not exists approval_status text default 'pending' check (approval_status in ('pending', 'approved', 'rejected')),
  add column if not exists rejection_reason text;

-- Create index for SKU lookups
create index if not exists idx_products_sku on public.products(sku);
create index if not exists idx_products_brand on public.products(brand);
create index if not exists idx_products_inhouse on public.products(is_inhouse);
create index if not exists idx_products_approval_status on public.products(approval_status);

-- Update RLS policies to include admin access
create policy "products_admin_all"
  on public.products for all
  using (
    exists (
      select 1 from public.admin_users
      where email = current_setting('request.jwt.claims', true)::json->>'email'
      and is_active = true
    )
  );

-- Create categories table
create table if not exists public.categories (
  id uuid primary key default gen_random_uuid(),
  name text not null,
  slug text unique not null,
  parent_id uuid references public.categories(id) on delete cascade,
  description text,
  image_url text,
  is_active boolean default true,
  display_order integer default 0,
  created_at timestamp with time zone default now(),
  updated_at timestamp with time zone default now()
);

-- Enable RLS on categories
alter table public.categories enable row level security;

-- Public can view active categories
create policy "categories_select_active"
  on public.categories for select
  using (is_active = true);

-- Admins can manage categories
create policy "categories_admin_all"
  on public.categories for all
  using (
    exists (
      select 1 from public.admin_users
      where email = current_setting('request.jwt.claims', true)::json->>'email'
      and is_active = true
    )
  );

-- Create brands table
create table if not exists public.brands (
  id uuid primary key default gen_random_uuid(),
  name text not null unique,
  slug text unique not null,
  logo_url text,
  description text,
  is_active boolean default true,
  created_at timestamp with time zone default now(),
  updated_at timestamp with time zone default now()
);

-- Enable RLS on brands
alter table public.brands enable row level security;

-- Public can view active brands
create policy "brands_select_active"
  on public.brands for select
  using (is_active = true);

-- Admins can manage brands
create policy "brands_admin_all"
  on public.brands for all
  using (
    exists (
      select 1 from public.admin_users
      where email = current_setting('request.jwt.claims', true)::json->>'email'
      and is_active = true
    )
  );
[V0_FILE]typescriptreact:file="lib/admin-theme-context.tsx" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useEffect, useState } from "react"

type Theme = "dark" | "light"

interface AdminThemeContextType {
  theme: Theme
  toggleTheme: () => void
}

const AdminThemeContext = createContext<AdminThemeContextType | undefined>(undefined)

export function AdminThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>("dark")
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
    const savedTheme = localStorage.getItem("admin_theme") as Theme
    if (savedTheme) {
      setTheme(savedTheme)
    }
  }, [])

const toggleTheme = () => {
    const newTheme = theme === "dark" ? "light" : "dark"
    setTheme(newTheme)
    localStorage.setItem("admin_theme", newTheme)
  }

if (!mounted) {
    return null
  }

return <AdminThemeContext.Provider value={{ theme, toggleTheme }}>{children}</AdminThemeContext.Provider>
}

export function useAdminTheme() {
  const context = useContext(AdminThemeContext)
  if (context === undefined) {
    throw new Error("useAdminTheme must be used within an AdminThemeProvider")
  }
  return context
}
[V0_FILE]sql:file="scripts/008_create_products_fixed.sql" isMerged="true"
-- Complete products table setup with all fields
-- This script can be run independently

-- First, ensure profiles table has vendor fields
ALTER TABLE public.profiles
  ADD COLUMN IF NOT EXISTS business_name text,
  ADD COLUMN IF NOT EXISTS business_description text,
  ADD COLUMN IF NOT EXISTS business_address text,
  ADD COLUMN IF NOT EXISTS phone_number text,
  ADD COLUMN IF NOT EXISTS is_verified boolean DEFAULT false,
  ADD COLUMN IF NOT EXISTS rating numeric(3,2) DEFAULT 0.00,
  ADD COLUMN IF NOT EXISTS total_sales integer DEFAULT 0;

-- Create indexes on profiles
CREATE INDEX IF NOT EXISTS idx_profiles_user_type ON public.profiles(user_type);
CREATE INDEX IF NOT EXISTS idx_profiles_verified_vendors 
  ON public.profiles(user_type, is_verified) 
  WHERE user_type = 'vendor' AND is_verified = true;

-- Create products table with all fields
CREATE TABLE IF NOT EXISTS public.products (
  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  vendor_id uuid REFERENCES public.profiles(id) ON DELETE CASCADE,
  name text NOT NULL,
  description text,
  price numeric(10,2) NOT NULL,
  category text,
  image_url text,
  stock_quantity integer DEFAULT 0,
  is_active boolean DEFAULT true,
  created_at timestamp with time zone DEFAULT now(),
  updated_at timestamp with time zone DEFAULT now(),
  
  -- Enhanced fields
  sku text UNIQUE,
  brand text,
  sub_category text,
  sub_sub_category text,
  product_type text DEFAULT 'physical' CHECK (product_type IN ('physical', 'digital')),
  unit text DEFAULT 'piece',
  minimum_order_qty integer DEFAULT 1,
  current_stock integer DEFAULT 0,
  discount_type text CHECK (discount_type IN ('flat', 'percentage')),
  discount_amount numeric(10,2) DEFAULT 0,
  tax_amount numeric(10,2) DEFAULT 0,
  tax_type text CHECK (tax_type IN ('included', 'excluded')),
  shipping_cost numeric(10,2) DEFAULT 0,
  shipping_cost_multiply boolean DEFAULT false,
  thumbnail_url text,
  additional_images jsonb DEFAULT '[]'::jsonb,
  video_url text,
  colors jsonb DEFAULT '[]'::jsonb,
  attributes jsonb DEFAULT '[]'::jsonb,
  meta_title text,
  meta_description text,
  meta_image_url text,
  is_indexed boolean DEFAULT true,
  no_follow boolean DEFAULT false,
  no_image_index boolean DEFAULT false,
  no_archive boolean DEFAULT false,
  no_snippet boolean DEFAULT false,
  max_snippet integer,
  max_video_preview text,
  max_image_preview text DEFAULT 'large',
  is_featured boolean DEFAULT false,
  featured_order integer,
  rating numeric(3,2) DEFAULT 0,
  review_count integer DEFAULT 0,
  sold_count integer DEFAULT 0,
  view_count integer DEFAULT 0,
  is_inhouse boolean DEFAULT false,
  approval_status text DEFAULT 'approved' CHECK (approval_status IN ('pending', 'approved', 'rejected')),
  rejection_reason text
);

-- Create indexes for better performance
CREATE INDEX IF NOT EXISTS idx_products_vendor_id ON public.products(vendor_id);
CREATE INDEX IF NOT EXISTS idx_products_category ON public.products(category);
CREATE INDEX IF NOT EXISTS idx_products_active ON public.products(is_active);
CREATE INDEX IF NOT EXISTS idx_products_sku ON public.products(sku);
CREATE INDEX IF NOT EXISTS idx_products_brand ON public.products(brand);
CREATE INDEX IF NOT EXISTS idx_products_inhouse ON public.products(is_inhouse);
CREATE INDEX IF NOT EXISTS idx_products_approval_status ON public.products(approval_status);
CREATE INDEX IF NOT EXISTS idx_products_featured ON public.products(is_featured, featured_order);

-- Enable Row Level Security
ALTER TABLE public.products ENABLE ROW LEVEL SECURITY;

-- Drop existing policies if they exist
DROP POLICY IF EXISTS "products_select_own" ON public.products;
DROP POLICY IF EXISTS "products_insert_own" ON public.products;
DROP POLICY IF EXISTS "products_update_own" ON public.products;
DROP POLICY IF EXISTS "products_delete_own" ON public.products;
DROP POLICY IF EXISTS "products_select_active" ON public.products;
DROP POLICY IF EXISTS "products_admin_all" ON public.products;
DROP POLICY IF EXISTS "products_public_view" ON public.products;

-- Public can view all active and approved products
CREATE POLICY "products_public_view"
  ON public.products FOR SELECT
  USING (is_active = true AND approval_status = 'approved');

-- Vendors can view their own products
CREATE POLICY "products_vendor_view_own"
  ON public.products FOR SELECT
  USING (auth.uid() = vendor_id);

-- Vendors can insert their own products
CREATE POLICY "products_vendor_insert"
  ON public.products FOR INSERT
  WITH CHECK (auth.uid() = vendor_id AND is_inhouse = false);

-- Vendors can update their own products
CREATE POLICY "products_vendor_update_own"
  ON public.products FOR UPDATE
  USING (auth.uid() = vendor_id);

-- Vendors can delete their own products
CREATE POLICY "products_vendor_delete_own"
  ON public.products FOR DELETE
  USING (auth.uid() = vendor_id);

-- Service role (admin) can do everything - this allows server-side operations
CREATE POLICY "products_service_role_all"
  ON public.products FOR ALL
  USING (true)
  WITH CHECK (true);

-- Create categories table
CREATE TABLE IF NOT EXISTS public.categories (
  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  name text NOT NULL,
  slug text UNIQUE NOT NULL,
  parent_id uuid REFERENCES public.categories(id) ON DELETE CASCADE,
  description text,
  image_url text,
  is_active boolean DEFAULT true,
  display_order integer DEFAULT 0,
  created_at timestamp with time zone DEFAULT now(),
  updated_at timestamp with time zone DEFAULT now()
);

-- Enable RLS on categories
ALTER TABLE public.categories ENABLE ROW LEVEL SECURITY;

-- Public can view active categories
CREATE POLICY "categories_public_view"
  ON public.categories FOR SELECT
  USING (is_active = true);

-- Service role can manage categories
CREATE POLICY "categories_service_role_all"
  ON public.categories FOR ALL
  USING (true)
  WITH CHECK (true);

-- Create brands table
CREATE TABLE IF NOT EXISTS public.brands (
  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  name text NOT NULL UNIQUE,
  slug text UNIQUE NOT NULL,
  logo_url text,
  description text,
  is_active boolean DEFAULT true,
  created_at timestamp with time zone DEFAULT now(),
  updated_at timestamp with time zone DEFAULT now()
);

-- Enable RLS on brands
ALTER TABLE public.brands ENABLE ROW LEVEL SECURITY;

-- Public can view active brands
CREATE POLICY "brands_public_view"
  ON public.brands FOR SELECT
  USING (is_active = true);

-- Service role can manage brands
CREATE POLICY "brands_service_role_all"
  ON public.brands FOR ALL
  USING (true)
  WITH CHECK (true);
[V0_FILE]typescriptreact:file="app/admin/products/inhouse/view/[id]/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { ArrowLeft, Edit, Trash2 } from "lucide-react"
import Image from "next/image"
import { createClient } from "@/lib/supabase/client"
import { useToast } from "@/hooks/use-toast"

type Product = {
  id: string
  name: string
  description: string
  category: string
  sub_category: string
  sub_sub_category: string
  brand: string
  product_type: string
  sku: string
  unit: string
  price: number
  minimum_order_qty: number
  current_stock: number
  discount_type: string
  discount_amount: number
  tax_amount: number
  tax_type: string
  shipping_cost: number
  shipping_cost_multiply: boolean
  thumbnail_url: string
  additional_images: string[]
  video_url: string
  colors: string[]
  attributes: { name: string; values: string[] }[]
  meta_title: string
  meta_description: string
  meta_image_url: string
  is_active: boolean
  approval_status: string
  created_at: string
  updated_at: string
}

export default function ViewProductPage() {
  const params = useParams()
  const router = useRouter()
  const { toast } = useToast()
  const [product, setProduct] = useState<Product | null>(null)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    fetchProduct()
  }, [params.id])

const fetchProduct = async () => {
    try {
      setLoading(true)
      const supabase = createClient()

const { data, error } = await supabase.from("products").select("*").eq("id", params.id).single()

if (error) throw error

setProduct(data)
    } catch (err: any) {
      toast({
        title: "Error",
        description: err.message || "Failed to fetch product",
        variant: "destructive",
      })
      router.push("/admin/products/inhouse/list")
    } finally {
      setLoading(false)
    }
  }

const handleDelete = async () => {
    if (!confirm("Are you sure you want to delete this product?")) return

try {
      const supabase = createClient()
      const { error } = await supabase.from("products").delete().eq("id", params.id)

if (error) throw error

toast({
        title: "Success",
        description: "Product deleted successfully",
      })

router.push("/admin/products/inhouse/list")
    } catch (err: any) {
      toast({
        title: "Error",
        description: err.message || "Failed to delete product",
        variant: "destructive",
      })
    }
  }

if (loading) {
    return (
      <div className="p-6">
        <p className="text-muted-foreground">Loading product...</p>
      </div>
    )
  }

if (!product) {
    return (
      <div className="p-6">
        <p className="text-muted-foreground">Product not found</p>
      </div>
    )
  }

return (
    <div className="p-6 max-w-6xl space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Button variant="ghost" size="sm" onClick={() => router.back()}>
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back
          </Button>
          <div>
            <h1 className="text-2xl font-bold">{product.name}</h1>
            <p className="text-sm text-muted-foreground">SKU: {product.sku}</p>
          </div>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" onClick={() => router.push(`/admin/products/inhouse/edit/${product.id}`)}>
            <Edit className="h-4 w-4 mr-2" />
            Edit
          </Button>
          <Button variant="destructive" onClick={handleDelete}>
            <Trash2 className="h-4 w-4 mr-2" />
            Delete
          </Button>
        </div>
      </div>

{/* Status Badge */}
      <div className="flex gap-2">
        <Badge variant={product.is_active ? "default" : "secondary"}>{product.is_active ? "Active" : "Inactive"}</Badge>
        <Badge variant={product.approval_status === "approved" ? "default" : "secondary"}>
          {product.approval_status}
        </Badge>
      </div>

{/* Product Images */}
      <Card>
        <CardHeader>
          <CardTitle>Product Images</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {product.thumbnail_url && (
              <div className="relative aspect-square rounded-lg overflow-hidden border">
                <Image
                  src={product.thumbnail_url || "/placeholder.svg"}
                  alt={product.name}
                  fill
                  className="object-cover"
                />
              </div>
            )}
            {product.additional_images?.map((img, idx) => (
              <div key={idx} className="relative aspect-square rounded-lg overflow-hidden border">
                <Image
                  src={img || "/placeholder.svg"}
                  alt={`${product.name} ${idx + 1}`}
                  fill
                  className="object-cover"
                />
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

{/* Basic Information */}
      <Card>
        <CardHeader>
          <CardTitle>Basic Information</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <p className="text-sm font-medium text-muted-foreground">Product Name</p>
            <p className="text-base">{product.name}</p>
          </div>
          <Separator />
          <div>
            <p className="text-sm font-medium text-muted-foreground">Description</p>
            <p className="text-base whitespace-pre-wrap">{product.description}</p>
          </div>
        </CardContent>
      </Card>

{/* Product Details */}
      <Card>
        <CardHeader>
          <CardTitle>Product Details</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
            <div>
              <p className="text-sm font-medium text-muted-foreground">Category</p>
              <p className="text-base">{product.category || "N/A"}</p>
            </div>
            <div>
              <p className="text-sm font-medium text-muted-foreground">Sub Category</p>
              <p className="text-base">{product.sub_category || "N/A"}</p>
            </div>
            <div>
              <p className="text-sm font-medium text-muted-foreground">Brand</p>
              <p className="text-base">{product.brand || "N/A"}</p>
            </div>
            <div>
              <p className="text-sm font-medium text-muted-foreground">Product Type</p>
              <p className="text-base capitalize">{product.product_type}</p>
            </div>
            <div>
              <p className="text-sm font-medium text-muted-foreground">Unit</p>
              <p className="text-base">{product.unit}</p>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Pricing */}
      <Card>
        <CardHeader>
          <CardTitle>Pricing & Stock</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            <div>
              <p className="text-sm font-medium text-muted-foreground">Unit Price</p>
              <p className="text-base font-semibold">AED {product.price?.toFixed(2)}</p>
            </div>
            <div>
              <p className="text-sm font-medium text-muted-foreground">Discount</p>
              <p className="text-base">
                {product.discount_amount} {product.discount_type === "percentage" ? "%" : "AED"}
              </p>
            </div>
            <div>
              <p className="text-sm font-medium text-muted-foreground">Tax</p>
              <p className="text-base">{product.tax_amount}%</p>
            </div>
            <div>
              <p className="text-sm font-medium text-muted-foreground">Shipping Cost</p>
              <p className="text-base">AED {product.shipping_cost?.toFixed(2)}</p>
            </div>
            <div>
              <p className="text-sm font-medium text-muted-foreground">Current Stock</p>
              <p className="text-base">{product.current_stock}</p>
            </div>
            <div>
              <p className="text-sm font-medium text-muted-foreground">Minimum Order</p>
              <p className="text-base">{product.minimum_order_qty}</p>
            </div>
          </div>
        </CardContent>
      </Card>

{/* SEO Information */}
      {product.meta_title && (
        <Card>
          <CardHeader>
            <CardTitle>SEO Information</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <p className="text-sm font-medium text-muted-foreground">Meta Title</p>
              <p className="text-base">{product.meta_title}</p>
            </div>
            {product.meta_description && (
              <>
                <Separator />
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Meta Description</p>
                  <p className="text-base">{product.meta_description}</p>
                </div>
              </>
            )}
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/product-grid.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"
import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Heart, ShoppingCart, Star, Loader2 } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useCart } from "@/lib/cart-context"
import { useWishlist } from "@/lib/wishlist-context"
import { createClient } from "@/lib/supabase/client"
import { Alert, AlertDescription } from "@/components/ui/alert"

interface ProductGridProps {
  category: string
  filters: any
  sortBy: string
  setSortBy: (value: string) => void
}

interface Product {
  id: string
  name: string
  category: string
  price: number
  discount_amount?: number
  rating: number
  image_url: string
  stock_quantity: number
  is_active: boolean
  approval_status: string
  vendor_id?: string
  vendor_name?: string
}

export function ProductGrid({ category, filters, sortBy, setSortBy }: ProductGridProps) {
  const { addItem } = useCart()
  const { toggleItem, isInWishlist } = useWishlist()
  const [products, setProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    async function fetchProducts() {
      try {
        setLoading(true)
        setError(null)
        const supabase = createClient()

let query = supabase
          .from("products")
          .select("*")
          .eq("is_active", true)
          .eq("approval_status", "approved")
          .eq("category", category)

// Apply sorting
        switch (sortBy) {
          case "price-low":
            query = query.order("price", { ascending: true })
            break
          case "price-high":
            query = query.order("price", { ascending: false })
            break
          case "rating":
            query = query.order("rating", { ascending: false })
            break
          case "newest":
            query = query.order("created_at", { ascending: false })
            break
          default:
            query = query.order("created_at", { ascending: false })
        }

const { data, error: fetchError } = await query

if (fetchError) {
          console.error("[v0] Error fetching products:", fetchError)
          setError(fetchError.message)
          return
        }

const productsWithVendors = await Promise.all(
          (data || []).map(async (product) => {
            if (product.vendor_id) {
              const { data: vendorData } = await supabase
                .from("profiles")
                .select("business_name")
                .eq("id", product.vendor_id)
                .single()

return {
                ...product,
                vendor_name: vendorData?.business_name || "TradeGate Store",
              }
            }
            return {
              ...product,
              vendor_name: "TradeGate Store",
            }
          }),
        )

setProducts(productsWithVendors)
      } catch (err) {
        console.error("[v0] Error in fetchProducts:", err)
        setError("Failed to load products. Please try again later.")
      } finally {
        setLoading(false)
      }
    }

fetchProducts()
  }, [category, sortBy])

const toggleFavorite = (product: Product) => {
    const originalPrice = product.discount_amount ? product.price + product.discount_amount : product.price

toggleItem({
      id: product.id,
      name: product.name,
      price: product.price,
      originalPrice: originalPrice,
      image: product.image_url,
      vendor: product.vendor_name || "TradeGate Store",
      category: product.category,
      rating: product.rating,
      reviews: 0,
    })
  }

const handleAddToCart = (product: Product) => {
    const originalPrice = product.discount_amount ? product.price + product.discount_amount : product.price

addItem({
      id: product.id,
      name: product.name,
      price: product.price,
      originalPrice: originalPrice,
      image: product.image_url,
      vendor: product.vendor_name || "TradeGate Store",
      category: product.category,
    })
  }

if (loading) {
    return (
      <div className="flex items-center justify-center py-12">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
        <span className="ml-2 text-muted-foreground">Loading products...</span>
      </div>
    )
  }

if (error) {
    return (
      <Alert variant="destructive">
        <AlertDescription>{error}</AlertDescription>
      </Alert>
    )
  }

if (products.length === 0) {
    return (
      <div className="text-center py-12">
        <p className="text-muted-foreground">No products found in this category.</p>
        <p className="text-sm text-muted-foreground mt-2">Check back later or browse other categories.</p>
      </div>
    )
  }

return (
    <div>
      {/* Sort and Results Header */}
      <div className="flex items-center justify-between mb-6">
        <p className="text-sm text-muted-foreground">Showing {products.length} results</p>
        <div className="flex items-center gap-2">
          <span className="text-sm text-muted-foreground">Sort by:</span>
          <Select value={sortBy} onValueChange={setSortBy}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Featured" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="featured">Featured</SelectItem>
              <SelectItem value="price-low">Price: Low to High</SelectItem>
              <SelectItem value="price-high">Price: High to Low</SelectItem>
              <SelectItem value="rating">Customer Rating</SelectItem>
              <SelectItem value="newest">Newest Arrivals</SelectItem>
              <SelectItem value="best-selling">Best Selling</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

{/* Product Grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        {products.map((product) => {
          const originalPrice = product.discount_amount ? product.price + product.discount_amount : product.price
          const hasDiscount = product.discount_amount && product.discount_amount > 0

return (
            <Card key={product.id} className="group overflow-hidden hover:shadow-lg transition-shadow">
              <CardContent className="p-0">
                {/* Product Image */}
                <Link href={`/products/${product.id}`}>
                  <div className="relative aspect-square overflow-hidden bg-muted cursor-pointer">
                    <Image
                      src={product.image_url || "/placeholder.svg?height=300&width=300"}
                      alt={product.name}
                      fill
                      className="object-cover group-hover:scale-105 transition-transform duration-300"
                    />
                    <button
                      onClick={(e) => {
                        e.preventDefault()
                        toggleFavorite(product)
                      }}
                      className="absolute top-3 right-3 p-2 rounded-full bg-white/90 hover:bg-white transition-colors z-10"
                    >
                      <Heart
                        className={`h-5 w-5 ${isInWishlist(product.id) ? "fill-red-500 text-red-500" : "text-gray-600"}`}
                      />
                    </button>
                    <div className="absolute top-3 left-3">
                      <span className="px-3 py-1 bg-primary text-primary-foreground text-xs font-semibold rounded-full">
                        {product.category}
                      </span>
                    </div>
                  </div>
                </Link>

{/* Product Info */}
                <div className="p-4 space-y-3">
                  <div className="flex items-center justify-between text-xs text-muted-foreground">
                    <span>{product.category}</span>
                    <span>{product.stock_quantity} in stock</span>
                  </div>

<Link href={`/products/${product.id}`}>
                    <h3 className="font-semibold text-sm line-clamp-2 min-h-[2.5rem] hover:text-primary transition-colors cursor-pointer">
                      {product.name}
                    </h3>
                  </Link>

<div className="flex items-center gap-2">
                    <span className="text-lg font-bold text-foreground">AED{product.price.toFixed(2)}</span>
                    {hasDiscount && (
                      <span className="text-sm text-muted-foreground line-through">AED{originalPrice.toFixed(2)}</span>
                    )}
                  </div>

<div className="flex items-center justify-between">
                    <div className="flex items-center gap-1">
                      <div className="flex">
                        {Array.from({ length: 5 }).map((_, i) => (
                          <Star
                            key={i}
                            className={`h-4 w-4 ${
                              i < product.rating ? "fill-yellow-400 text-yellow-400" : "fill-gray-200 text-gray-200"
                            }`}
                          />
                        ))}
                      </div>
                      <span className="text-xs text-muted-foreground">({product.rating})</span>
                    </div>
                  </div>

<div className="flex gap-2">
                    <Button
                      size="sm"
                      className="flex-1"
                      onClick={() => handleAddToCart(product)}
                      disabled={product.stock_quantity === 0}
                    >
                      <ShoppingCart className="h-4 w-4 mr-1" />
                      {product.stock_quantity === 0 ? "Out of Stock" : "Buy Now"}
                    </Button>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => handleAddToCart(product)}
                      disabled={product.stock_quantity === 0}
                    >
                      <ShoppingCart className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          )
        })}
      </div>

{/* Pagination */}
      <div className="mt-8 flex justify-center gap-2">
        <Button variant="outline" size="sm" disabled>
          Previous
        </Button>
        <Button variant="default" size="sm" className="w-10">
          1
        </Button>
        <Button variant="outline" size="sm" disabled>
          Next
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/009_create_attributes_table.sql" isMerged="true"
-- Create attributes table for product attributes management
CREATE TABLE IF NOT EXISTS public.attributes (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL UNIQUE,
  description TEXT,
  values JSONB DEFAULT '[]'::jsonb, -- Array of possible values for this attribute
  is_active BOOLEAN DEFAULT true,
  display_order INTEGER DEFAULT 0,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create index for faster queries
CREATE INDEX IF NOT EXISTS idx_attributes_name ON public.attributes(name);
CREATE INDEX IF NOT EXISTS idx_attributes_is_active ON public.attributes(is_active);

-- Enable RLS
ALTER TABLE public.attributes ENABLE ROW LEVEL SECURITY;

-- Allow public to read active attributes
CREATE POLICY "Allow public read access to active attributes"
  ON public.attributes
  FOR SELECT
  USING (is_active = true);

-- Allow all operations for authenticated users (admins will use service role)
CREATE POLICY "Allow authenticated full access to attributes"
  ON public.attributes
  FOR ALL
  USING (true)
  WITH CHECK (true);

-- Add trigger to update updated_at
CREATE OR REPLACE FUNCTION update_attributes_updated_at()
RETURNS TRIGGER AS $$
BEGIN
  NEW.updated_at = NOW();
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER attributes_updated_at
  BEFORE UPDATE ON public.attributes
  FOR EACH ROW
  EXECUTE FUNCTION update_attributes_updated_at();
[V0_FILE]typescriptreact:file="app/admin/products/categories/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Plus, Search, MoreVertical, Edit, Trash2 } from "lucide-react"
import { createClient } from "@/lib/supabase/client"
import { useAdminTheme } from "@/lib/admin-theme-context"
import { cn } from "@/lib/utils"

interface Category {
  id: string
  name: string
  description: string | null
  slug: string
  parent_id: string | null
  is_active: boolean
  display_order: number
  image_url: string | null
  created_at: string
}

export default function CategoriesPage() {
  const router = useRouter()
  const { theme } = useAdminTheme()
  const [categories, setCategories] = useState<Category[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")

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

const fetchCategories = async () => {
    try {
      const supabase = createClient()
      const { data, error } = await supabase.from("categories").select("*").order("display_order", { ascending: true })

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

const handleDelete = async (id: string) => {
    if (!confirm("Are you sure you want to delete this category?")) return

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

if (error) throw error
      fetchCategories()
    } catch (error) {
      console.error("Error deleting category:", error)
      alert("Failed to delete category")
    }
  }

const filteredCategories = categories.filter((category) =>
    category.name.toLowerCase().includes(searchQuery.toLowerCase()),
  )

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className={cn("text-2xl font-bold", theme === "dark" ? "text-white" : "text-gray-900")}>Categories</h1>
          <p className={cn("text-sm", theme === "dark" ? "text-slate-400" : "text-gray-500")}>
            Manage product categories
          </p>
        </div>
        <Button
          onClick={() => router.push("/admin/products/categories/add")}
          className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600"
        >
          <Plus className="h-4 w-4 mr-2" />
          Add Category
        </Button>
      </div>

<div className="flex items-center gap-4">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
          <Input
            placeholder="Search categories..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className={cn(
              "pl-10",
              theme === "dark" ? "bg-slate-800 border-slate-700 text-white" : "bg-white border-gray-300 text-gray-900",
            )}
          />
        </div>
      </div>

<div
        className={cn(
          "rounded-lg border",
          theme === "dark" ? "bg-slate-800/50 border-slate-700" : "bg-white border-gray-200",
        )}
      >
        <Table>
          <TableHeader>
            <TableRow className={theme === "dark" ? "border-slate-700" : "border-gray-200"}>
              <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Name</TableHead>
              <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Slug</TableHead>
              <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Description</TableHead>
              <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Status</TableHead>
              <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Order</TableHead>
              <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {loading ? (
              <TableRow>
                <TableCell colSpan={6} className="text-center py-8">
                  Loading...
                </TableCell>
              </TableRow>
            ) : filteredCategories.length === 0 ? (
              <TableRow>
                <TableCell colSpan={6} className="text-center py-8">
                  No categories found
                </TableCell>
              </TableRow>
            ) : (
              filteredCategories.map((category) => (
                <TableRow key={category.id} className={theme === "dark" ? "border-slate-700" : "border-gray-200"}>
                  <TableCell className={theme === "dark" ? "text-white" : "text-gray-900"}>{category.name}</TableCell>
                  <TableCell className={theme === "dark" ? "text-slate-400" : "text-gray-600"}>
                    {category.slug}
                  </TableCell>
                  <TableCell className={theme === "dark" ? "text-slate-400" : "text-gray-600"}>
                    {category.description || "-"}
                  </TableCell>
                  <TableCell>
                    <Badge variant={category.is_active ? "default" : "secondary"}>
                      {category.is_active ? "Active" : "Inactive"}
                    </Badge>
                  </TableCell>
                  <TableCell className={theme === "dark" ? "text-slate-400" : "text-gray-600"}>
                    {category.display_order}
                  </TableCell>
                  <TableCell>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="sm">
                          <MoreVertical className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem onClick={() => router.push(`/admin/products/categories/edit/${category.id}`)}>
                          <Edit className="h-4 w-4 mr-2" />
                          Edit
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => handleDelete(category.id)} className="text-red-600">
                          <Trash2 className="h-4 w-4 mr-2" />
                          Delete
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/products/categories/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/products/categories/add/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft } from "lucide-react"
import { createClient } from "@/lib/supabase/client"
import { useAdminTheme } from "@/lib/admin-theme-context"
import { cn } from "@/lib/utils"

export default function AddCategoryPage() {
  const router = useRouter()
  const { theme } = useAdminTheme()
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    description: "",
    slug: "",
    is_active: true,
    display_order: 0,
    image_url: "",
  })

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

try {
      const supabase = createClient()
      const { error } = await supabase.from("categories").insert([
        {
          ...formData,
          slug: formData.slug || formData.name.toLowerCase().replace(/\s+/g, "-"),
        },
      ])

if (error) throw error

alert("Category created successfully!")
      router.push("/admin/products/categories")
    } catch (error) {
      console.error("Error creating category:", error)
      alert("Failed to create category")
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="sm" onClick={() => router.back()}>
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back
        </Button>
        <div>
          <h1 className={cn("text-2xl font-bold", theme === "dark" ? "text-white" : "text-gray-900")}>Add Category</h1>
          <p className={cn("text-sm", theme === "dark" ? "text-slate-400" : "text-gray-500")}>
            Create a new product category
          </p>
        </div>
      </div>

<form onSubmit={handleSubmit}>
        <Card className={theme === "dark" ? "bg-slate-800/50 border-slate-700" : "bg-white border-gray-200"}>
          <CardHeader>
            <CardTitle className={theme === "dark" ? "text-white" : "text-gray-900"}>Category Information</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name" className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>
                Category Name *
              </Label>
              <Input
                id="name"
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                required
                className={theme === "dark" ? "bg-slate-900 border-slate-700 text-white" : ""}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="slug" className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>
                Slug (URL-friendly name)
              </Label>
              <Input
                id="slug"
                value={formData.slug}
                onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
                placeholder="auto-generated from name"
                className={theme === "dark" ? "bg-slate-900 border-slate-700 text-white" : ""}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="description" className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>
                Description
              </Label>
              <Textarea
                id="description"
                value={formData.description}
                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                rows={3}
                className={theme === "dark" ? "bg-slate-900 border-slate-700 text-white" : ""}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="image_url" className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>
                Image URL
              </Label>
              <Input
                id="image_url"
                value={formData.image_url}
                onChange={(e) => setFormData({ ...formData, image_url: e.target.value })}
                placeholder="https://example.com/image.jpg"
                className={theme === "dark" ? "bg-slate-900 border-slate-700 text-white" : ""}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="display_order" className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>
                Display Order
              </Label>
              <Input
                id="display_order"
                type="number"
                value={formData.display_order}
                onChange={(e) => setFormData({ ...formData, display_order: Number.parseInt(e.target.value) })}
                className={theme === "dark" ? "bg-slate-900 border-slate-700 text-white" : ""}
              />
            </div>

<div className="flex items-center justify-between">
              <Label htmlFor="is_active" className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>
                Active Status
              </Label>
              <Switch
                id="is_active"
                checked={formData.is_active}
                onCheckedChange={(checked) => setFormData({ ...formData, is_active: checked })}
              />
            </div>

<div className="flex gap-4 pt-4">
              <Button
                type="submit"
                disabled={loading}
                className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600"
              >
                {loading ? "Creating..." : "Create Category"}
              </Button>
              <Button type="button" variant="outline" onClick={() => router.back()}>
                Cancel
              </Button>
            </div>
          </CardContent>
        </Card>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/products/categories/edit/[id]/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useEffect, useState } from "react"
import { useRouter, useParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft } from "lucide-react"
import { createClient } from "@/lib/supabase/client"
import { useAdminTheme } from "@/lib/admin-theme-context"
import { cn } from "@/lib/utils"

export default function EditCategoryPage() {
  const router = useRouter()
  const params = useParams()
  const { theme } = useAdminTheme()
  const [loading, setLoading] = useState(false)
  const [fetching, setFetching] = useState(true)
  const [formData, setFormData] = useState({
    name: "",
    description: "",
    slug: "",
    is_active: true,
    display_order: 0,
    image_url: "",
  })

useEffect(() => {
    fetchCategory()
  }, [params.id])

const fetchCategory = async () => {
    try {
      const supabase = createClient()
      const { data, error } = await supabase.from("categories").select("*").eq("id", params.id).single()

if (error) throw error

setFormData({
        name: data.name,
        description: data.description || "",
        slug: data.slug,
        is_active: data.is_active,
        display_order: data.display_order,
        image_url: data.image_url || "",
      })
    } catch (error) {
      console.error("Error fetching category:", error)
      alert("Failed to load category")
    } finally {
      setFetching(false)
    }
  }

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

try {
      const supabase = createClient()
      const { error } = await supabase.from("categories").update(formData).eq("id", params.id)

if (error) throw error

alert("Category updated successfully!")
      router.push("/admin/products/categories")
    } catch (error) {
      console.error("Error updating category:", error)
      alert("Failed to update category")
    } finally {
      setLoading(false)
    }
  }

if (fetching) {
    return <div className="text-center py-8">Loading...</div>
  }

return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="sm" onClick={() => router.back()}>
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back
        </Button>
        <div>
          <h1 className={cn("text-2xl font-bold", theme === "dark" ? "text-white" : "text-gray-900")}>Edit Category</h1>
          <p className={cn("text-sm", theme === "dark" ? "text-slate-400" : "text-gray-500")}>
            Update category information
          </p>
        </div>
      </div>

<div className="space-y-2">
              <Label htmlFor="slug" className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>
                Slug (URL-friendly name)
              </Label>
              <Input
                id="slug"
                value={formData.slug}
                onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
                className={theme === "dark" ? "bg-slate-900 border-slate-700 text-white" : ""}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="image_url" className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>
                Image URL
              </Label>
              <Input
                id="image_url"
                value={formData.image_url}
                onChange={(e) => setFormData({ ...formData, image_url: e.target.value })}
                className={theme === "dark" ? "bg-slate-900 border-slate-700 text-white" : ""}
              />
            </div>

<div className="flex gap-4 pt-4">
              <Button
                type="submit"
                disabled={loading}
                className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600"
              >
                {loading ? "Updating..." : "Update Category"}
              </Button>
              <Button type="button" variant="outline" onClick={() => router.back()}>
                Cancel
              </Button>
            </div>
          </CardContent>
        </Card>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/products/brands/page.tsx" isMerged="true"
"use client"

interface Brand {
  id: string
  name: string
  description: string | null
  slug: string
  logo_url: string | null
  is_active: boolean
  created_at: string
}

export default function BrandsPage() {
  const router = useRouter()
  const { theme } = useAdminTheme()
  const [brands, setBrands] = useState<Brand[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")

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

const fetchBrands = async () => {
    try {
      const supabase = createClient()
      const { data, error } = await supabase.from("brands").select("*").order("name", { ascending: true })

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

const handleDelete = async (id: string) => {
    if (!confirm("Are you sure you want to delete this brand?")) return

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

if (error) throw error
      fetchBrands()
    } catch (error) {
      console.error("Error deleting brand:", error)
      alert("Failed to delete brand")
    }
  }

const filteredBrands = brands.filter((brand) => brand.name.toLowerCase().includes(searchQuery.toLowerCase()))

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className={cn("text-2xl font-bold", theme === "dark" ? "text-white" : "text-gray-900")}>Brands</h1>
          <p className={cn("text-sm", theme === "dark" ? "text-slate-400" : "text-gray-500")}>Manage product brands</p>
        </div>
        <Button
          onClick={() => router.push("/admin/products/brands/add")}
          className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600"
        >
          <Plus className="h-4 w-4 mr-2" />
          Add Brand
        </Button>
      </div>

<div className="flex items-center gap-4">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
          <Input
            placeholder="Search brands..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className={cn(
              "pl-10",
              theme === "dark" ? "bg-slate-800 border-slate-700 text-white" : "bg-white border-gray-300 text-gray-900",
            )}
          />
        </div>
      </div>

<div
        className={cn(
          "rounded-lg border",
          theme === "dark" ? "bg-slate-800/50 border-slate-700" : "bg-white border-gray-200",
        )}
      >
        <Table>
          <TableHeader>
            <TableRow className={theme === "dark" ? "border-slate-700" : "border-gray-200"}>
              <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Name</TableHead>
              <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Slug</TableHead>
              <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Description</TableHead>
              <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Status</TableHead>
              <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {loading ? (
              <TableRow>
                <TableCell colSpan={5} className="text-center py-8">
                  Loading...
                </TableCell>
              </TableRow>
            ) : filteredBrands.length === 0 ? (
              <TableRow>
                <TableCell colSpan={5} className="text-center py-8">
                  No brands found
                </TableCell>
              </TableRow>
            ) : (
              filteredBrands.map((brand) => (
                <TableRow key={brand.id} className={theme === "dark" ? "border-slate-700" : "border-gray-200"}>
                  <TableCell className={theme === "dark" ? "text-white" : "text-gray-900"}>{brand.name}</TableCell>
                  <TableCell className={theme === "dark" ? "text-slate-400" : "text-gray-600"}>{brand.slug}</TableCell>
                  <TableCell className={theme === "dark" ? "text-slate-400" : "text-gray-600"}>
                    {brand.description || "-"}
                  </TableCell>
                  <TableCell>
                    <Badge variant={brand.is_active ? "default" : "secondary"}>
                      {brand.is_active ? "Active" : "Inactive"}
                    </Badge>
                  </TableCell>
                  <TableCell>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="sm">
                          <MoreVertical className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem onClick={() => router.push(`/admin/products/brands/edit/${brand.id}`)}>
                          <Edit className="h-4 w-4 mr-2" />
                          Edit
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => handleDelete(brand.id)} className="text-red-600">
                          <Trash2 className="h-4 w-4 mr-2" />
                          Delete
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/products/brands/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/products/brands/add/page.tsx" isMerged="true"
"use client"

import type React from "react"

export default function AddBrandPage() {
  const router = useRouter()
  const { theme } = useAdminTheme()
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    description: "",
    slug: "",
    is_active: true,
    logo_url: "",
  })

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

try {
      const supabase = createClient()
      const { error } = await supabase.from("brands").insert([
        {
          ...formData,
          slug: formData.slug || formData.name.toLowerCase().replace(/\s+/g, "-"),
        },
      ])

if (error) throw error

alert("Brand created successfully!")
      router.push("/admin/products/brands")
    } catch (error) {
      console.error("Error creating brand:", error)
      alert("Failed to create brand")
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="sm" onClick={() => router.back()}>
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back
        </Button>
        <div>
          <h1 className={cn("text-2xl font-bold", theme === "dark" ? "text-white" : "text-gray-900")}>Add Brand</h1>
          <p className={cn("text-sm", theme === "dark" ? "text-slate-400" : "text-gray-500")}>Create a new brand</p>
        </div>
      </div>

<form onSubmit={handleSubmit}>
        <Card className={theme === "dark" ? "bg-slate-800/50 border-slate-700" : "bg-white border-gray-200"}>
          <CardHeader>
            <CardTitle className={theme === "dark" ? "text-white" : "text-gray-900"}>Brand Information</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name" className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>
                Brand Name *
              </Label>
              <Input
                id="name"
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                required
                className={theme === "dark" ? "bg-slate-900 border-slate-700 text-white" : ""}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="logo_url" className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>
                Logo URL
              </Label>
              <Input
                id="logo_url"
                value={formData.logo_url}
                onChange={(e) => setFormData({ ...formData, logo_url: e.target.value })}
                placeholder="https://example.com/logo.png"
                className={theme === "dark" ? "bg-slate-900 border-slate-700 text-white" : ""}
              />
            </div>

<div className="flex gap-4 pt-4">
              <Button
                type="submit"
                disabled={loading}
                className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600"
              >
                {loading ? "Creating..." : "Create Brand"}
              </Button>
              <Button type="button" variant="outline" onClick={() => router.back()}>
                Cancel
              </Button>
            </div>
          </CardContent>
        </Card>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/products/brands/edit/[id]/page.tsx" isMerged="true"
"use client"

import type React from "react"

export default function EditBrandPage() {
  const router = useRouter()
  const params = useParams()
  const { theme } = useAdminTheme()
  const [loading, setLoading] = useState(false)
  const [fetching, setFetching] = useState(true)
  const [formData, setFormData] = useState({
    name: "",
    description: "",
    slug: "",
    is_active: true,
    logo_url: "",
  })

useEffect(() => {
    fetchBrand()
  }, [params.id])

const fetchBrand = async () => {
    try {
      const supabase = createClient()
      const { data, error } = await supabase.from("brands").select("*").eq("id", params.id).single()

if (error) throw error

setFormData({
        name: data.name,
        description: data.description || "",
        slug: data.slug,
        is_active: data.is_active,
        logo_url: data.logo_url || "",
      })
    } catch (error) {
      console.error("Error fetching brand:", error)
      alert("Failed to load brand")
    } finally {
      setFetching(false)
    }
  }

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

try {
      const supabase = createClient()
      const { error } = await supabase.from("brands").update(formData).eq("id", params.id)

if (error) throw error

alert("Brand updated successfully!")
      router.push("/admin/products/brands")
    } catch (error) {
      console.error("Error updating brand:", error)
      alert("Failed to update brand")
    } finally {
      setLoading(false)
    }
  }

if (fetching) {
    return <div className="text-center py-8">Loading...</div>
  }

return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="sm" onClick={() => router.back()}>
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back
        </Button>
        <div>
          <h1 className={cn("text-2xl font-bold", theme === "dark" ? "text-white" : "text-gray-900")}>Edit Brand</h1>
          <p className={cn("text-sm", theme === "dark" ? "text-slate-400" : "text-gray-500")}>
            Update brand information
          </p>
        </div>
      </div>

<form onSubmit={handleSubmit}>
        <Card className={theme === "dark" ? "bg-slate-800/50 border-slate-700" : "bg-white border-gray-200"}>
          <CardHeader>
            <CardTitle className={theme === "dark" ? "text-white" : "text-gray-900"}>Brand Information</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name" className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>
                Brand Name *
              </Label>
              <Input
                id="name"
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                required
                className={theme === "dark" ? "bg-slate-900 border-slate-700 text-white" : ""}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="slug" className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>
                Slug (URL-friendly name)
              </Label>
              <Input
                id="slug"
                value={formData.slug}
                onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
                className={theme === "dark" ? "bg-slate-900 border-slate-700 text-white" : ""}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="logo_url" className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>
                Logo URL
              </Label>
              <Input
                id="logo_url"
                value={formData.logo_url}
                onChange={(e) => setFormData({ ...formData, logo_url: e.target.value })}
                className={theme === "dark" ? "bg-slate-900 border-slate-700 text-white" : ""}
              />
            </div>

<div className="flex gap-4 pt-4">
              <Button
                type="submit"
                disabled={loading}
                className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600"
              >
                {loading ? "Updating..." : "Update Brand"}
              </Button>
              <Button type="button" variant="outline" onClick={() => router.back()}>
                Cancel
              </Button>
            </div>
          </CardContent>
        </Card>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/products/attributes/page.tsx" isMerged="true"
"use client"

interface Attribute {
  id: string
  name: string
  description: string | null
  values: string[]
  is_active: boolean
  display_order: number
  created_at: string
}

export default function AttributesPage() {
  const router = useRouter()
  const { theme } = useAdminTheme()
  const [attributes, setAttributes] = useState<Attribute[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")

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

const fetchAttributes = async () => {
    try {
      const supabase = createClient()
      const { data, error } = await supabase.from("attributes").select("*").order("display_order", { ascending: true })

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

const handleDelete = async (id: string) => {
    if (!confirm("Are you sure you want to delete this attribute?")) return

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

if (error) throw error
      fetchAttributes()
    } catch (error) {
      console.error("Error deleting attribute:", error)
      alert("Failed to delete attribute")
    }
  }

const filteredAttributes = attributes.filter((attr) => attr.name.toLowerCase().includes(searchQuery.toLowerCase()))

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className={cn("text-2xl font-bold", theme === "dark" ? "text-white" : "text-gray-900")}>Attributes</h1>
          <p className={cn("text-sm", theme === "dark" ? "text-slate-400" : "text-gray-500")}>
            Manage product attributes
          </p>
        </div>
        <Button
          onClick={() => router.push("/admin/products/attributes/add")}
          className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600"
        >
          <Plus className="h-4 w-4 mr-2" />
          Add Attribute
        </Button>
      </div>

<div className="flex items-center gap-4">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
          <Input
            placeholder="Search attributes..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className={cn(
              "pl-10",
              theme === "dark" ? "bg-slate-800 border-slate-700 text-white" : "bg-white border-gray-300 text-gray-900",
            )}
          />
        </div>
      </div>

<div
        className={cn(
          "rounded-lg border",
          theme === "dark" ? "bg-slate-800/50 border-slate-700" : "bg-white border-gray-200",
        )}
      >
        <Table>
          <TableHeader>
            <TableRow className={theme === "dark" ? "border-slate-700" : "border-gray-200"}>
              <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Name</TableHead>
              <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Description</TableHead>
              <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Values</TableHead>
              <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Status</TableHead>
              <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Order</TableHead>
              <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {loading ? (
              <TableRow>
                <TableCell colSpan={6} className="text-center py-8">
                  Loading...
                </TableCell>
              </TableRow>
            ) : filteredAttributes.length === 0 ? (
              <TableRow>
                <TableCell colSpan={6} className="text-center py-8">
                  No attributes found
                </TableCell>
              </TableRow>
            ) : (
              filteredAttributes.map((attr) => (
                <TableRow key={attr.id} className={theme === "dark" ? "border-slate-700" : "border-gray-200"}>
                  <TableCell className={theme === "dark" ? "text-white" : "text-gray-900"}>{attr.name}</TableCell>
                  <TableCell className={theme === "dark" ? "text-slate-400" : "text-gray-600"}>
                    {attr.description || "-"}
                  </TableCell>
                  <TableCell className={theme === "dark" ? "text-slate-400" : "text-gray-600"}>
                    {attr.values?.length || 0} values
                  </TableCell>
                  <TableCell>
                    <Badge variant={attr.is_active ? "default" : "secondary"}>
                      {attr.is_active ? "Active" : "Inactive"}
                    </Badge>
                  </TableCell>
                  <TableCell className={theme === "dark" ? "text-slate-400" : "text-gray-600"}>
                    {attr.display_order}
                  </TableCell>
                  <TableCell>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="sm">
                          <MoreVertical className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem onClick={() => router.push(`/admin/products/attributes/edit/${attr.id}`)}>
                          <Edit className="h-4 w-4 mr-2" />
                          Edit
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => handleDelete(attr.id)} className="text-red-600">
                          <Trash2 className="h-4 w-4 mr-2" />
                          Delete
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/products/attributes/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/products/attributes/add/page.tsx" isMerged="true"
"use client"

import { Badge } from "@/components/ui/badge"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, X } from "lucide-react"
import { createClient } from "@/lib/supabase/client"
import { useAdminTheme } from "@/lib/admin-theme-context"
import { cn } from "@/lib/utils"

export default function AddAttributePage() {
  const router = useRouter()
  const { theme } = useAdminTheme()
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    description: "",
    is_active: true,
    display_order: 0,
    values: [] as string[],
  })
  const [newValue, setNewValue] = useState("")

const addValue = () => {
    if (newValue.trim() && !formData.values.includes(newValue.trim())) {
      setFormData({ ...formData, values: [...formData.values, newValue.trim()] })
      setNewValue("")
    }
  }

const removeValue = (value: string) => {
    setFormData({ ...formData, values: formData.values.filter((v) => v !== value) })
  }

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

try {
      const supabase = createClient()
      const { error } = await supabase.from("attributes").insert([formData])

if (error) throw error

alert("Attribute created successfully!")
      router.push("/admin/products/attributes")
    } catch (error) {
      console.error("Error creating attribute:", error)
      alert("Failed to create attribute")
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="sm" onClick={() => router.back()}>
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back
        </Button>
        <div>
          <h1 className={cn("text-2xl font-bold", theme === "dark" ? "text-white" : "text-gray-900")}>Add Attribute</h1>
          <p className={cn("text-sm", theme === "dark" ? "text-slate-400" : "text-gray-500")}>
            Create a new product attribute
          </p>
        </div>
      </div>

<form onSubmit={handleSubmit}>
        <Card className={theme === "dark" ? "bg-slate-800/50 border-slate-700" : "bg-white border-gray-200"}>
          <CardHeader>
            <CardTitle className={theme === "dark" ? "text-white" : "text-gray-900"}>Attribute Information</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name" className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>
                Attribute Name *
              </Label>
              <Input
                id="name"
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                required
                placeholder="e.g., Size, Color, Material"
                className={theme === "dark" ? "bg-slate-900 border-slate-700 text-white" : ""}
              />
            </div>

<div className="space-y-2">
              <Label className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Attribute Values</Label>
              <div className="flex gap-2">
                <Input
                  value={newValue}
                  onChange={(e) => setNewValue(e.target.value)}
                  onKeyPress={(e) => e.key === "Enter" && (e.preventDefault(), addValue())}
                  placeholder="Add a value (e.g., Small, Medium, Large)"
                  className={theme === "dark" ? "bg-slate-900 border-slate-700 text-white" : ""}
                />
                <Button type="button" onClick={addValue}>
                  Add
                </Button>
              </div>
              <div className="flex flex-wrap gap-2 mt-2">
                {formData.values.map((value) => (
                  <Badge key={value} variant="secondary" className="flex items-center gap-1 px-3 py-1">
                    {value}
                    <button type="button" onClick={() => removeValue(value)} className="ml-1">
                      <X className="h-3 w-3" />
                    </button>
                  </Badge>
                ))}
              </div>
            </div>

<div className="flex gap-4 pt-4">
              <Button
                type="submit"
                disabled={loading}
                className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600"
              >
                {loading ? "Creating..." : "Create Attribute"}
              </Button>
              <Button type="button" variant="outline" onClick={() => router.back()}>
                Cancel
              </Button>
            </div>
          </CardContent>
        </Card>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/products/attributes/edit/[id]/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useEffect, useState } from "react"
import { useRouter, useParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, X } from "lucide-react"
import { createClient } from "@/lib/supabase/client"
import { useAdminTheme } from "@/lib/admin-theme-context"
import { cn } from "@/lib/utils"

export default function EditAttributePage() {
  const router = useRouter()
  const params = useParams()
  const { theme } = useAdminTheme()
  const [loading, setLoading] = useState(false)
  const [fetching, setFetching] = useState(true)
  const [formData, setFormData] = useState({
    name: "",
    description: "",
    is_active: true,
    display_order: 0,
    values: [] as string[],
  })
  const [newValue, setNewValue] = useState("")

useEffect(() => {
    fetchAttribute()
  }, [params.id])

const fetchAttribute = async () => {
    try {
      const supabase = createClient()
      const { data, error } = await supabase.from("attributes").select("*").eq("id", params.id).single()

if (error) throw error

setFormData({
        name: data.name,
        description: data.description || "",
        is_active: data.is_active,
        display_order: data.display_order,
        values: data.values || [],
      })
    } catch (error) {
      console.error("Error fetching attribute:", error)
      alert("Failed to load attribute")
    } finally {
      setFetching(false)
    }
  }

const removeValue = (value: string) => {
    setFormData({ ...formData, values: formData.values.filter((v) => v !== value) })
  }

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

try {
      const supabase = createClient()
      const { error } = await supabase.from("attributes").update(formData).eq("id", params.id)

if (error) throw error

alert("Attribute updated successfully!")
      router.push("/admin/products/attributes")
    } catch (error) {
      console.error("Error updating attribute:", error)
      alert("Failed to update attribute")
    } finally {
      setLoading(false)
    }
  }

if (fetching) {
    return <div className="text-center py-8">Loading...</div>
  }

return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="sm" onClick={() => router.back()}>
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back
        </Button>
        <div>
          <h1 className={cn("text-2xl font-bold", theme === "dark" ? "text-white" : "text-gray-900")}>
            Edit Attribute
          </h1>
          <p className={cn("text-sm", theme === "dark" ? "text-slate-400" : "text-gray-500")}>
            Update attribute information
          </p>
        </div>
      </div>

<form onSubmit={handleSubmit}>
        <Card className={theme === "dark" ? "bg-slate-800/50 border-slate-700" : "bg-white border-gray-200"}>
          <CardHeader>
            <CardTitle className={theme === "dark" ? "text-white" : "text-gray-900"}>Attribute Information</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name" className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>
                Attribute Name *
              </Label>
              <Input
                id="name"
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                required
                className={theme === "dark" ? "bg-slate-900 border-slate-700 text-white" : ""}
              />
            </div>

<div className="space-y-2">
              <Label className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Attribute Values</Label>
              <div className="flex gap-2">
                <Input
                  value={newValue}
                  onChange={(e) => setNewValue(e.target.value)}
                  onKeyPress={(e) => e.key === "Enter" && (e.preventDefault(), addValue())}
                  placeholder="Add a value"
                  className={theme === "dark" ? "bg-slate-900 border-slate-700 text-white" : ""}
                />
                <Button type="button" onClick={addValue}>
                  Add
                </Button>
              </div>
              <div className="flex flex-wrap gap-2 mt-2">
                {formData.values.map((value) => (
                  <Badge key={value} variant="secondary" className="flex items-center gap-1 px-3 py-1">
                    {value}
                    <button type="button" onClick={() => removeValue(value)} className="ml-1">
                      <X className="h-3 w-3" />
                    </button>
                  </Badge>
                ))}
              </div>
            </div>

<div className="flex gap-4 pt-4">
              <Button
                type="submit"
                disabled={loading}
                className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600"
              >
                {loading ? "Updating..." : "Update Attribute"}
              </Button>
              <Button type="button" variant="outline" onClick={() => router.back()}>
                Cancel
              </Button>
            </div>
          </CardContent>
        </Card>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/products/vendor/add/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Upload, AlertCircle } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { createClient } from "@/lib/supabase/client"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { generateSKU, generateSimpleSKU } from "@/lib/generate-sku"

type Category = {
  id: string
  name: string
  slug: string
  is_active: boolean
}

type Brand = {
  id: string
  name: string
  slug: string
  is_active: boolean
}

type Vendor = {
  id: string
  username: string
  business_name: string
}

export default function AddVendorProductPage() {
  const router = useRouter()
  const { toast } = useToast()
  const [loading, setLoading] = useState(false)
  const [generatingSKU, setGeneratingSKU] = useState(false)
  const [images, setImages] = useState<string[]>([])

const [categories, setCategories] = useState<Category[]>([])
  const [brands, setBrands] = useState<Brand[]>([])
  const [vendors, setVendors] = useState<Vendor[]>([])
  const [fetchingData, setFetchingData] = useState(true)

const [formData, setFormData] = useState({
    // Basic Info
    name: "",
    description: "",
    vendorId: "",

// General Setup
    category: "",
    subCategory: "",
    brand: "",
    productType: "physical",
    sku: "",
    unit: "kg",

// Pricing
    unitPrice: "",
    minimumOrderQty: "1",
    currentStock: "0",
    discountType: "flat",
    discountAmount: "0",
    taxAmount: "0",
    shippingCost: "0",

// Media
    thumbnailUrl: "",
    videoUrl: "",

// SEO
    metaTitle: "",
    metaDescription: "",
  })

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

const fetchData = async () => {
    try {
      const supabase = createClient()

const { data: categoriesData, error: categoriesError } = await supabase
        .from("categories")
        .select("id, name, slug, is_active")
        .eq("is_active", true)
        .order("name")

if (categoriesError) throw categoriesError

const { data: brandsData, error: brandsError } = await supabase
        .from("brands")
        .select("id, name, slug, is_active")
        .eq("is_active", true)
        .order("name")

if (brandsError) throw brandsError

const { data: vendorsData, error: vendorsError } = await supabase
        .from("profiles")
        .select("id, username, business_name")
        .eq("user_type", "vendor")
        .order("username")

if (vendorsError) throw vendorsError

setCategories(categoriesData || [])
      setBrands(brandsData || [])
      setVendors(vendorsData || [])
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "Failed to fetch data",
        variant: "destructive",
      })
    } finally {
      setFetchingData(false)
    }
  }

const handleGenerateSKU = async () => {
    setGeneratingSKU(true)
    try {
      // Generate SKU based on selected category and brand
      const sku =
        formData.category && formData.brand ? await generateSKU(formData.category, formData.brand) : generateSimpleSKU()

setFormData({ ...formData, sku })

toast({
        title: "SKU Generated",
        description: `Generated SKU: ${sku}`,
      })
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "Failed to generate SKU",
        variant: "destructive",
      })
    } finally {
      setGeneratingSKU(false)
    }
  }

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

try {
      const supabase = createClient()

const { data, error } = await supabase
        .from("products")
        .insert({
          name: formData.name,
          description: formData.description,
          vendor_id: formData.vendorId,
          category: formData.category,
          sub_category: formData.subCategory,
          brand: formData.brand,
          product_type: formData.productType,
          sku: formData.sku,
          unit: formData.unit,
          price: Number.parseFloat(formData.unitPrice),
          minimum_order_qty: Number.parseInt(formData.minimumOrderQty),
          current_stock: Number.parseInt(formData.currentStock),
          discount_type: formData.discountType,
          discount_amount: Number.parseFloat(formData.discountAmount),
          tax_amount: Number.parseFloat(formData.taxAmount),
          shipping_cost: Number.parseFloat(formData.shippingCost),
          thumbnail_url: formData.thumbnailUrl,
          additional_images: images,
          video_url: formData.videoUrl,
          meta_title: formData.metaTitle,
          meta_description: formData.metaDescription,
          is_inhouse: false,
          is_active: false,
          approval_status: "pending",
        })
        .select()
        .single()

if (error) throw error

toast({
        title: "Success",
        description: "Vendor product submitted for approval",
      })

router.push("/admin/products/vendor/list")
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "Failed to add product",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="p-6 max-w-6xl">
      <div className="mb-6">
        <h1 className="text-2xl font-bold">Add New Vendor Product</h1>
        <p className="text-muted-foreground">Submit a new product from vendor for approval</p>
      </div>

<Alert className="mb-6">
        <AlertCircle className="h-4 w-4" />
        <AlertDescription>
          Vendor products require admin approval before they appear on the store. The product will be reviewed within
          24-48 hours.
        </AlertDescription>
      </Alert>

<form onSubmit={handleSubmit} className="space-y-6">
        {/* Vendor Selection */}
        <Card>
          <CardHeader>
            <CardTitle>Vendor Information</CardTitle>
          </CardHeader>
          <CardContent>
            <div>
              <Label htmlFor="vendorId">Select Vendor *</Label>
              <Select
                value={formData.vendorId}
                onValueChange={(value) => setFormData({ ...formData, vendorId: value })}
                required
                disabled={fetchingData}
              >
                <SelectTrigger>
                  <SelectValue placeholder={fetchingData ? "Loading..." : "Select vendor"} />
                </SelectTrigger>
                <SelectContent>
                  {vendors.map((vendor) => (
                    <SelectItem key={vendor.id} value={vendor.id}>
                      {vendor.business_name || vendor.username}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </CardContent>
        </Card>

{/* Basic Information */}
        <Card>
          <CardHeader>
            <CardTitle>Product Information</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <Label htmlFor="name">Product Name *</Label>
              <Input
                id="name"
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                placeholder="Enter product name"
                required
              />
            </div>

<div>
              <Label htmlFor="description">Product Description *</Label>
              <Textarea
                id="description"
                value={formData.description}
                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                placeholder="Describe the product..."
                rows={6}
                required
              />
            </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div>
                <Label htmlFor="category">Category *</Label>
                <Select
                  value={formData.category}
                  onValueChange={(value) => setFormData({ ...formData, category: value })}
                  required
                  disabled={fetchingData}
                >
                  <SelectTrigger>
                    <SelectValue placeholder={fetchingData ? "Loading..." : "Select category"} />
                  </SelectTrigger>
                  <SelectContent>
                    {categories.map((category) => (
                      <SelectItem key={category.id} value={category.slug}>
                        {category.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div>
                <Label htmlFor="brand">Brand</Label>
                <Select
                  value={formData.brand}
                  onValueChange={(value) => setFormData({ ...formData, brand: value })}
                  disabled={fetchingData}
                >
                  <SelectTrigger>
                    <SelectValue placeholder={fetchingData ? "Loading..." : "Select brand"} />
                  </SelectTrigger>
                  <SelectContent>
                    {brands.map((brand) => (
                      <SelectItem key={brand.id} value={brand.slug}>
                        {brand.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div>
                <Label htmlFor="sku">SKU *</Label>
                <div className="flex gap-2">
                  <Input
                    id="sku"
                    value={formData.sku}
                    onChange={(e) => setFormData({ ...formData, sku: e.target.value })}
                    placeholder="Product SKU"
                    required
                  />
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={handleGenerateSKU}
                    disabled={generatingSKU}
                  >
                    {generatingSKU ? "Generating..." : "Generate"}
                  </Button>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Pricing */}
        <Card>
          <CardHeader>
            <CardTitle>Pricing & Stock</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div>
                <Label htmlFor="unitPrice">Unit Price (AED) *</Label>
                <Input
                  id="unitPrice"
                  type="number"
                  step="0.01"
                  value={formData.unitPrice}
                  onChange={(e) => setFormData({ ...formData, unitPrice: e.target.value })}
                  placeholder="0.00"
                  required
                />
              </div>

<div>
                <Label htmlFor="currentStock">Stock Quantity *</Label>
                <Input
                  id="currentStock"
                  type="number"
                  value={formData.currentStock}
                  onChange={(e) => setFormData({ ...formData, currentStock: e.target.value })}
                  placeholder="0"
                  required
                />
              </div>

<div>
                <Label htmlFor="minimumOrderQty">Minimum Order Qty</Label>
                <Input
                  id="minimumOrderQty"
                  type="number"
                  value={formData.minimumOrderQty}
                  onChange={(e) => setFormData({ ...formData, minimumOrderQty: e.target.value })}
                  placeholder="1"
                />
              </div>
            </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div>
                <Label htmlFor="discountAmount">Discount (AED)</Label>
                <Input
                  id="discountAmount"
                  type="number"
                  step="0.01"
                  value={formData.discountAmount}
                  onChange={(e) => setFormData({ ...formData, discountAmount: e.target.value })}
                  placeholder="0.00"
                />
              </div>

<div>
                <Label htmlFor="taxAmount">Tax (%)</Label>
                <Input
                  id="taxAmount"
                  type="number"
                  step="0.01"
                  value={formData.taxAmount}
                  onChange={(e) => setFormData({ ...formData, taxAmount: e.target.value })}
                  placeholder="0.00"
                />
              </div>

<div>
                <Label htmlFor="shippingCost">Shipping Cost (AED)</Label>
                <Input
                  id="shippingCost"
                  type="number"
                  step="0.01"
                  value={formData.shippingCost}
                  onChange={(e) => setFormData({ ...formData, shippingCost: e.target.value })}
                  placeholder="0.00"
                />
              </div>
            </div>
          </CardContent>
        </Card>

{/* Product Images */}
        <Card>
          <CardHeader>
            <CardTitle>Product Images</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <Label htmlFor="thumbnailUrl">Product Thumbnail *</Label>
              <div className="border-2 border-dashed rounded-lg p-8 text-center">
                <Upload className="mx-auto h-12 w-12 text-muted-foreground mb-2" />
                <Input
                  id="thumbnailUrl"
                  type="url"
                  value={formData.thumbnailUrl}
                  onChange={(e) => setFormData({ ...formData, thumbnailUrl: e.target.value })}
                  placeholder="Image URL"
                  className="max-w-md mx-auto"
                  required
                />
              </div>
            </div>
          </CardContent>
        </Card>

<div className="flex gap-4">
          <Button type="button" variant="outline" onClick={() => router.back()}>
            Cancel
          </Button>
          <Button type="submit" disabled={loading}>
            {loading ? "Submitting..." : "Submit for Approval"}
          </Button>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/featured-categories.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import { Card, CardContent } from "@/components/ui/card"
import { Smartphone, Shirt, Home, Sparkles, Dumbbell, BookOpen, Gamepad2, Gift, PawPrint } from "lucide-react"

const categories = [
  { name: "Electronics", icon: Smartphone, href: "/categories/electronics", color: "text-blue-600" },
  { name: "Fashion", icon: Shirt, href: "/categories/fashion", color: "text-pink-600" },
  { name: "Home & Living", icon: Home, href: "/categories/home", color: "text-green-600" },
  { name: "Beauty", icon: Sparkles, href: "/categories/beauty", color: "text-purple-600" },
  { name: "Sports", icon: Dumbbell, href: "/categories/sports", color: "text-orange-600" },
  { name: "Books", icon: BookOpen, href: "/categories/books", color: "text-amber-600" },
  { name: "Toys & Games", icon: Gamepad2, href: "/categories/toys", color: "text-red-600" },
  { name: "Pet Food", icon: PawPrint, href: "/categories/pet-food", color: "text-emerald-600" },
  { name: "Gifts", icon: Gift, href: "/categories/gifts", color: "text-teal-600" },
]

export function FeaturedCategories() {
  return (
    <section className="py-12 md:py-16">
      <div className="container mx-auto px-4">
        <div className="mb-8">
          <h2 className="text-3xl md:text-4xl font-bold text-balance">Shop by Category</h2>
          <p className="mt-2 text-muted-foreground text-lg">Explore our wide range of product categories</p>
        </div>
        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4">
          {categories.map((category) => (
            <Link key={category.name} href={category.href}>
              <Card className="group hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                <CardContent className="flex flex-col items-center justify-center p-6 gap-3">
                  <div className={`${category.color} group-hover:scale-110 transition-transform`}>
                    <category.icon className="h-8 w-8" />
                  </div>
                  <span className="text-sm font-medium text-center text-balance">{category.name}</span>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/(frontend)/wishlist/page.tsx" isMoved="true" isMovedFrom="app/wishlist/page.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { useWishlist } from "@/lib/wishlist-context"
import { useCart } from "@/lib/cart-context"
import { Heart, ShoppingCart, Star, Trash2 } from "lucide-react"
import Image from "next/image"
import Link from "next/link"

export default function WishlistPage() {
  const { items, removeItem, clearWishlist } = useWishlist()
  const { addItem: addToCart } = useCart()

const handleAddToCart = (item: (typeof items)[0]) => {
    addToCart({
      id: item.id,
      name: item.name,
      price: item.price,
      originalPrice: item.originalPrice,
      image: item.image,
      vendor: item.vendor,
      category: item.category,
    })
  }

if (items.length === 0) {
    return (
      <div className="container mx-auto px-4 py-16">
        <div className="max-w-md mx-auto text-center">
          <div className="mb-6 flex justify-center">
            <div className="rounded-full bg-muted p-6">
              <Heart className="h-16 w-16 text-muted-foreground" />
            </div>
          </div>
          <h1 className="text-2xl font-bold mb-2">Your Wishlist is Empty</h1>
          <p className="text-muted-foreground mb-6">Save your favorite items to your wishlist and shop them later!</p>
          <Button asChild size="lg">
            <Link href="/categories/all">Start Shopping</Link>
          </Button>
        </div>
      </div>
    )
  }

return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-8 flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold mb-2">My Wishlist</h1>
          <p className="text-muted-foreground">{items.length} items saved</p>
        </div>
        {items.length > 0 && (
          <Button variant="outline" onClick={clearWishlist}>
            <Trash2 className="h-4 w-4 mr-2" />
            Clear All
          </Button>
        )}
      </div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        {items.map((item) => (
          <Card key={item.id} className="group overflow-hidden hover:shadow-lg transition-shadow">
            <CardContent className="p-0">
              {/* Product Image */}
              <div className="relative aspect-square overflow-hidden bg-muted">
                <Image
                  src={item.image || "/placeholder.svg"}
                  alt={item.name}
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-300"
                />
                <button
                  onClick={() => removeItem(item.id)}
                  className="absolute top-3 right-3 p-2 rounded-full bg-white/90 hover:bg-white transition-colors"
                >
                  <Heart className="h-5 w-5 fill-red-500 text-red-500" />
                </button>
                <div className="absolute top-3 left-3">
                  <span className="px-3 py-1 bg-primary text-primary-foreground text-xs font-semibold rounded-full">
                    {item.category}
                  </span>
                </div>
              </div>

{/* Product Info */}
              <div className="p-4 space-y-3">
                <div className="flex items-center justify-between text-xs text-muted-foreground">
                  <span>{item.category}</span>
                  {item.reviews && <span>{item.reviews} reviews</span>}
                </div>

<div className="flex items-center gap-2">
                  <span className="text-lg font-bold text-foreground">AED{item.price.toFixed(2)}</span>
                  {item.originalPrice && (
                    <span className="text-sm text-muted-foreground line-through">
                      AED{item.originalPrice.toFixed(2)}
                    </span>
                  )}
                </div>

{item.rating && (
                  <div className="flex items-center gap-1">
                    <div className="flex">
                      {Array.from({ length: 5 }).map((_, i) => (
                        <Star
                          key={i}
                          className={`h-4 w-4 ${
                            i < item.rating! ? "fill-yellow-400 text-yellow-400" : "fill-gray-200 text-gray-200"
                          }`}
                        />
                      ))}
                    </div>
                    {item.reviews && <span className="text-xs text-muted-foreground">({item.reviews})</span>}
                  </div>
                )}

<div className="flex gap-2">
                  <Button size="sm" className="flex-1" onClick={() => handleAddToCart(item)}>
                    <ShoppingCart className="h-4 w-4 mr-1" />
                    Add to Cart
                  </Button>
                  <Button size="sm" variant="outline" onClick={() => removeItem(item.id)}>
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/(frontend)/orders/page.tsx" isMoved="true" isMovedFrom="app/orders/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Package, ShoppingBag, ArrowRight } from "lucide-react"

export default function OrdersPage() {
  const [orders, setOrders] = useState<any[]>([])

useEffect(() => {
    // Retrieve orders from localStorage
    const storedOrders = JSON.parse(localStorage.getItem("tradegate-orders") || "[]")
    setOrders(storedOrders.reverse()) // Show newest first
  }, [])

if (orders.length === 0) {
    return (
      <div className="min-h-screen bg-muted/30">
        <header className="border-b bg-background">
          <div className="container mx-auto px-4 py-4">
            <Link href="/" className="flex items-center gap-2 text-primary font-bold text-xl">
              <Image src="/logo.png" alt="TradeGateStore" width={32} height={32} />
              TradeGateStore
            </Link>
          </div>
        </header>

<div className="container mx-auto px-4 py-12">
          <div className="max-w-2xl mx-auto">
            <Card>
              <CardContent className="pt-6">
                <div className="flex flex-col items-center text-center space-y-4">
                  <div className="rounded-full bg-muted p-4">
                    <ShoppingBag className="h-12 w-12 text-muted-foreground" />
                  </div>
                  <div>
                    <h2 className="text-2xl font-bold">No orders yet</h2>
                    <p className="text-muted-foreground mt-2">Start shopping to see your orders here.</p>
                  </div>
                  <Button asChild size="lg">
                    <Link href="/">Start Shopping</Link>
                  </Button>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-muted/30">
      <header className="border-b bg-background">
        <div className="container mx-auto px-4 py-4">
          <Link href="/" className="flex items-center gap-2 text-primary font-bold text-xl">
            <Image src="/logo.png" alt="TradeGateStore" width={32} height={32} />
            TradeGateStore
          </Link>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto space-y-6">
          <div>
            <h1 className="text-3xl font-bold">My Orders</h1>
            <p className="text-muted-foreground mt-2">View and track your orders</p>
          </div>

<div className="space-y-4">
            {orders.map((order) => (
              <Card key={order.orderId}>
                <CardHeader>
                  <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                    <div>
                      <CardTitle className="text-lg">Order {order.orderId}</CardTitle>
                      <CardDescription>
                        Placed on{" "}
                        {new Date(order.orderDate).toLocaleDateString("en-US", {
                          year: "numeric",
                          month: "long",
                          day: "numeric",
                        })}
                      </CardDescription>
                    </div>
                    <Badge variant="secondary" className="w-fit">
                      <Package className="h-3 w-3 mr-1" />
                      Processing
                    </Badge>
                  </div>
                </CardHeader>
                <CardContent className="space-y-4">
                  {/* Order Items */}
                  <div className="space-y-2">
                    {order.items.slice(0, 3).map((item: any) => (
                      <div key={item.id} className="flex gap-3 items-center">
                        <div className="relative w-12 h-12 rounded-md overflow-hidden bg-muted flex-shrink-0">
                          <Image src={item.image || "/placeholder.svg"} alt={item.name} fill className="object-cover" />
                        </div>
                        <div className="flex-1 min-w-0">
                          <p className="text-sm font-medium truncate">{item.name}</p>
                          <p className="text-xs text-muted-foreground">Qty: {item.quantity}</p>
                        </div>
                        <p className="text-sm font-semibold">AED {(item.price * item.quantity).toFixed(2)}</p>
                      </div>
                    ))}
                    {order.items.length > 3 && (
                      <p className="text-xs text-muted-foreground">+{order.items.length - 3} more items</p>
                    )}
                  </div>

{/* Order Total */}
                  <div className="flex justify-between items-center pt-2 border-t">
                    <span className="font-semibold">Total</span>
                    <span className="text-lg font-bold">AED {order.total.toFixed(2)}</span>
                  </div>

{/* Actions */}
                  <div className="flex gap-2">
                    <Button asChild variant="outline" className="flex-1 bg-transparent">
                      <Link href={`/order-confirmation?orderId=${order.orderId}`}>
                        View Details
                        <ArrowRight className="ml-2 h-4 w-4" />
                      </Link>
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/(frontend)/profile/page.tsx" isMoved="true" isMovedFrom="app/profile/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { useToast } from "@/hooks/use-toast"
import { Pencil, Upload, Loader2, Database } from "lucide-react"
import { ProfileSidebar } from "@/components/profile-sidebar"
import { useRouter } from "next/navigation"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

interface Profile {
  id: string
  username: string | null
  user_type: string | null
  avatar_url: string | null
  phone_number: string | null
  business_name: string | null
  business_description: string | null
  business_address: string | null
}

export default function ProfilePage() {
  const [profile, setProfile] = useState<Profile | null>(null)
  const [email, setEmail] = useState("")
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [editingField, setEditingField] = useState<string | null>(null)
  const [needsSetup, setNeedsSetup] = useState(false)
  const [formData, setFormData] = useState({
    username: "",
    phone_number: "",
    business_address: "",
    business_name: "",
    business_description: "",
  })
  const { toast } = useToast()
  const router = useRouter()
  const supabase = createClient()

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

const loadProfile = async () => {
    try {
      const {
        data: { user },
      } = await supabase.auth.getUser()

if (!user) {
        router.push("/login")
        return
      }

setEmail(user.email || "")

const { data, error } = await supabase.from("profiles").select("*").eq("id", user.id).single()

if (error) {
        const errorMessage = error.message?.toLowerCase() || ""
        const errorCode = (error as any).code

if (
          errorCode === "PGRST205" ||
          errorMessage.includes("schema cache") ||
          errorMessage.includes("does not exist") ||
          errorMessage.includes("relation") ||
          errorMessage.includes("table")
        ) {
          console.log("[v0] Database table not found, showing setup message")
          setNeedsSetup(true)
          setLoading(false)
          return
        }
        throw error
      }

setProfile(data)
      setFormData({
        username: data.username || "",
        phone_number: data.phone_number || "",
        business_address: data.business_address || "",
        business_name: data.business_name || "",
        business_description: data.business_description || "",
      })
    } catch (error: any) {
      console.error("[v0] Error loading profile:", error)

const errorMessage = error?.message?.toLowerCase() || ""
      if (
        errorMessage.includes("schema cache") ||
        errorMessage.includes("does not exist") ||
        errorMessage.includes("pgrst205") ||
        errorMessage.includes("404")
      ) {
        console.log("[v0] Caught table error in catch block, showing setup message")
        setNeedsSetup(true)
      } else {
        toast({
          title: "Error",
          description: "Failed to load profile data",
          variant: "destructive",
        })
      }
    } finally {
      setLoading(false)
    }
  }

const handleSave = async (field: string) => {
    if (!profile) return

setSaving(true)
    try {
      const { error } = await supabase
        .from("profiles")
        .update({ [field]: formData[field as keyof typeof formData] })
        .eq("id", profile.id)

if (error) throw error

setProfile({ ...profile, [field]: formData[field as keyof typeof formData] })
      setEditingField(null)
      toast({
        title: "Success",
        description: "Profile updated successfully",
      })
    } catch (error) {
      console.error("Error updating profile:", error)
      toast({
        title: "Error",
        description: "Failed to update profile",
        variant: "destructive",
      })
    } finally {
      setSaving(false)
    }
  }

const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files || !e.target.files[0] || !profile) return

const file = e.target.files[0]
    const fileExt = file.name.split(".").pop()
    const fileName = `${profile.id}-${Math.random()}.${fileExt}`
    const filePath = `avatars/${fileName}`

try {
      setSaving(true)

const { error: uploadError } = await supabase.storage.from("avatars").upload(filePath, file)

if (uploadError) throw uploadError

const {
        data: { publicUrl },
      } = supabase.storage.from("avatars").getPublicUrl(filePath)

const { error: updateError } = await supabase
        .from("profiles")
        .update({ avatar_url: publicUrl })
        .eq("id", profile.id)

if (updateError) throw updateError

setProfile({ ...profile, avatar_url: publicUrl })
      toast({
        title: "Success",
        description: "Profile picture updated successfully",
      })
    } catch (error) {
      console.error("Error uploading avatar:", error)
      toast({
        title: "Error",
        description: "Failed to upload profile picture",
        variant: "destructive",
      })
    } finally {
      setSaving(false)
    }
  }

if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </div>
    )
  }

if (needsSetup) {
    return (
      <div className="min-h-screen bg-muted/30">
        <div className="container mx-auto px-4 py-8">
          <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
            <div className="lg:col-span-1">
              <ProfileSidebar />
            </div>
            <div className="lg:col-span-3">
              <Alert className="border-orange-500 bg-orange-50 dark:bg-orange-950">
                <Database className="h-5 w-5 text-orange-600" />
                <AlertTitle className="text-orange-900 dark:text-orange-100">Database Setup Required</AlertTitle>
                <AlertDescription className="text-orange-800 dark:text-orange-200 mt-2">
                  <p className="mb-4">
                    The database tables need to be created before you can use the profile page. Please run the following
                    SQL scripts in order:
                  </p>
                  <ol className="list-decimal list-inside space-y-2 mb-4">
                    <li>
                      <code className="bg-orange-100 dark:bg-orange-900 px-2 py-1 rounded text-sm">
                        scripts/001_create_profiles.sql
                      </code>
                    </li>
                    <li>
                      <code className="bg-orange-100 dark:bg-orange-900 px-2 py-1 rounded text-sm">
                        scripts/002_profile_trigger.sql
                      </code>
                    </li>
                    <li>
                      <code className="bg-orange-100 dark:bg-orange-900 px-2 py-1 rounded text-sm">
                        scripts/003_add_vendor_fields.sql
                      </code>
                    </li>
                  </ol>
                  <p className="text-sm">After running these scripts, refresh this page to access your profile.</p>
                  <Button className="mt-4" onClick={() => window.location.reload()}>
                    Refresh Page
                  </Button>
                </AlertDescription>
              </Alert>
            </div>
          </div>
        </div>
      </div>
    )
  }

if (!profile) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <p>Profile not found</p>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-muted/30">
      <div className="container mx-auto px-4 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
          <div className="lg:col-span-1">
            <ProfileSidebar />
          </div>
          <div className="lg:col-span-3">
            <div className="bg-card rounded-lg shadow-sm border border-border p-6">
              <h1 className="text-2xl font-bold mb-6">Account Details</h1>
              <div className="mb-8 flex items-center gap-4">
                <Avatar className="h-20 w-20">
                  <AvatarImage src={profile.avatar_url || undefined} />
                  <AvatarFallback className="text-2xl">
                    {profile.username?.charAt(0).toUpperCase() || "U"}
                  </AvatarFallback>
                </Avatar>
                <div>
                  <Label htmlFor="avatar-upload" className="cursor-pointer">
                    <Button variant="default" size="sm" disabled={saving} asChild>
                      <span>
                        {saving ? (
                          <Loader2 className="h-4 w-4 animate-spin mr-2" />
                        ) : (
                          <Upload className="h-4 w-4 mr-2" />
                        )}
                        Upload Profile
                      </span>
                    </Button>
                  </Label>
                  <Input
                    id="avatar-upload"
                    type="file"
                    accept="image/*"
                    className="hidden"
                    onChange={handleAvatarUpload}
                    disabled={saving}
                  />
                  <p className="text-xs text-muted-foreground mt-1">JPG, PNG or GIF (max. 2MB)</p>
                </div>
              </div>
              <div className="mb-6 p-4 border border-border rounded-lg">
                <div className="flex items-center justify-between">
                  <div className="flex-1">
                    {editingField === "username" ? (
                      <div className="space-y-2">
                        <Label htmlFor="username">Name</Label>
                        <Input
                          id="username"
                          value={formData.username}
                          onChange={(e) => setFormData({ ...formData, username: e.target.value })}
                          placeholder="Enter your name"
                        />
                        <div className="flex gap-2">
                          <Button size="sm" onClick={() => handleSave("username")} disabled={saving}>
                            {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : "Save"}
                          </Button>
                          <Button size="sm" variant="outline" onClick={() => setEditingField(null)}>
                            Cancel
                          </Button>
                        </div>
                      </div>
                    ) : (
                      <div>
                        <p className="text-sm text-muted-foreground mb-1">Name</p>
                        <p className="font-medium">{profile.username || "Not set"}</p>
                      </div>
                    )}
                  </div>
                  {editingField !== "username" && (
                    <Button variant="ghost" size="sm" onClick={() => setEditingField("username")}>
                      <Pencil className="h-4 w-4 mr-2" />
                      Edit
                    </Button>
                  )}
                </div>
              </div>
              <div className="mb-6 p-4 border border-border rounded-lg">
                <div className="flex items-center justify-between">
                  <div className="flex-1">
                    {editingField === "phone_number" ? (
                      <div className="space-y-2">
                        <Label htmlFor="phone_number">Phone Number</Label>
                        <Input
                          id="phone_number"
                          value={formData.phone_number}
                          onChange={(e) => setFormData({ ...formData, phone_number: e.target.value })}
                          placeholder="+971 00000000"
                        />
                        <div className="flex gap-2">
                          <Button size="sm" onClick={() => handleSave("phone_number")} disabled={saving}>
                            {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : "Save"}
                          </Button>
                          <Button size="sm" variant="outline" onClick={() => setEditingField(null)}>
                            Cancel
                          </Button>
                        </div>
                      </div>
                    ) : (
                      <div>
                        <p className="text-sm text-muted-foreground mb-1">Phone Number</p>
                        <p className="font-medium">{profile.phone_number || "Not set"}</p>
                      </div>
                    )}
                  </div>
                  {editingField !== "phone_number" && (
                    <Button variant="ghost" size="sm" onClick={() => setEditingField("phone_number")}>
                      <Pencil className="h-4 w-4 mr-2" />
                      Edit
                    </Button>
                  )}
                </div>
              </div>
              <div className="mb-6 p-4 border border-border rounded-lg bg-muted/50">
                <div className="flex items-center justify-between">
                  <div className="flex-1">
                    <p className="text-sm text-muted-foreground mb-1">Email Id</p>
                    <p className="font-medium">{email}</p>
                  </div>
                  <Button variant="ghost" size="sm" disabled>
                    <Pencil className="h-4 w-4 mr-2" />
                    Edit
                  </Button>
                </div>
              </div>
              <div className="mb-6 p-4 border border-border rounded-lg">
                <div className="flex items-center justify-between">
                  <div className="flex-1">
                    {editingField === "business_address" ? (
                      <div className="space-y-2">
                        <Label htmlFor="business_address">Permanent Address</Label>
                        <Textarea
                          id="business_address"
                          value={formData.business_address}
                          onChange={(e) => setFormData({ ...formData, business_address: e.target.value })}
                          placeholder="Enter your address"
                          rows={3}
                        />
                        <div className="flex gap-2">
                          <Button size="sm" onClick={() => handleSave("business_address")} disabled={saving}>
                            {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : "Save"}
                          </Button>
                          <Button size="sm" variant="outline" onClick={() => setEditingField(null)}>
                            Cancel
                          </Button>
                        </div>
                      </div>
                    ) : (
                      <div>
                        <p className="text-sm text-muted-foreground mb-1">Permanent Address</p>
                        <p className="font-medium">{profile.business_address || "Not set"}</p>
                      </div>
                    )}
                  </div>
                  {editingField !== "business_address" && (
                    <Button variant="ghost" size="sm" onClick={() => setEditingField("business_address")}>
                      <Pencil className="h-4 w-4 mr-2" />
                      Edit
                    </Button>
                  )}
                </div>
              </div>
              {profile.user_type === "vendor" && (
                <>
                  <div className="mb-6 p-4 border border-border rounded-lg">
                    <div className="flex items-center justify-between">
                      <div className="flex-1">
                        {editingField === "business_name" ? (
                          <div className="space-y-2">
                            <Label htmlFor="business_name">Business Name</Label>
                            <Input
                              id="business_name"
                              value={formData.business_name}
                              onChange={(e) => setFormData({ ...formData, business_name: e.target.value })}
                              placeholder="Enter your business name"
                            />
                            <div className="flex gap-2">
                              <Button size="sm" onClick={() => handleSave("business_name")} disabled={saving}>
                                {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : "Save"}
                              </Button>
                              <Button size="sm" variant="outline" onClick={() => setEditingField(null)}>
                                Cancel
                              </Button>
                            </div>
                          </div>
                        ) : (
                          <div>
                            <p className="text-sm text-muted-foreground mb-1">Business Name</p>
                            <p className="font-medium">{profile.business_name || "Not set"}</p>
                          </div>
                        )}
                      </div>
                      {editingField !== "business_name" && (
                        <Button variant="ghost" size="sm" onClick={() => setEditingField("business_name")}>
                          <Pencil className="h-4 w-4 mr-2" />
                          Edit
                        </Button>
                      )}
                    </div>
                  </div>
                  <div className="mb-6 p-4 border border-border rounded-lg">
                    <div className="flex items-center justify-between">
                      <div className="flex-1">
                        {editingField === "business_description" ? (
                          <div className="space-y-2">
                            <Label htmlFor="business_description">Business Description</Label>
                            <Textarea
                              id="business_description"
                              value={formData.business_description}
                              onChange={(e) => setFormData({ ...formData, business_description: e.target.value })}
                              placeholder="Describe your business"
                              rows={4}
                            />
                            <div className="flex gap-2">
                              <Button size="sm" onClick={() => handleSave("business_description")} disabled={saving}>
                                {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : "Save"}
                              </Button>
                              <Button size="sm" variant="outline" onClick={() => setEditingField(null)}>
                                Cancel
                              </Button>
                            </div>
                          </div>
                        ) : (
                          <div>
                            <p className="text-sm text-muted-foreground mb-1">Business Description</p>
                            <p className="font-medium">{profile.business_description || "Not set"}</p>
                          </div>
                        )}
                      </div>
                      {editingField !== "business_description" && (
                        <Button variant="ghost" size="sm" onClick={() => setEditingField("business_description")}>
                          <Pencil className="h-4 w-4 mr-2" />
                          Edit
                        </Button>
                      )}
                    </div>
                  </div>
                </>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/(frontend)/layout.tsx" isMerged="true"
import type React from "react"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"

export default function FrontendLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <main className="flex-1">{children}</main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/(frontend)/categories/[category]/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { ProductGrid } from "@/components/product-grid"
import { CategoryFilters } from "@/components/category-filters"
import { CategoryBanner } from "@/components/category-banner"
import { Button } from "@/components/ui/button"
import { SlidersHorizontal } from "lucide-react"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"

interface PageProps {
  params: { category: string }
}

export default function CategoryPage({ params }: PageProps) {
  const { category } = params
  const [filters, setFilters] = useState({
    search: "",
    productType: "all",
    fulfillment: [] as string[],
    deliveryDay: "",
    freeShipping: false,
    subcategory: "",
    brands: [] as string[],
    priceRange: [0, 5000] as [number, number],
    deals: [] as string[],
    sellers: [] as string[],
    rating: 0,
  })
  const [sortBy, setSortBy] = useState("featured")

return (
    <>
      <CategoryBanner category={category} />

<div className="container mx-auto px-4 py-8">
        <div className="flex gap-6">
          {/* Desktop Filters Sidebar */}
          <aside className="hidden lg:block w-64 flex-shrink-0">
            <CategoryFilters filters={filters} setFilters={setFilters} />
          </aside>

{/* Main Content */}
          <div className="flex-1">
            {/* Mobile Filter Button & Sort */}
            <div className="flex items-center justify-between mb-6 lg:hidden">
              <Sheet>
                <SheetTrigger asChild>
                  <Button variant="outline" size="sm">
                    <SlidersHorizontal className="h-4 w-4 mr-2" />
                    Filters
                  </Button>
                </SheetTrigger>
                <SheetContent side="left" className="w-80 overflow-y-auto">
                  <CategoryFilters filters={filters} setFilters={setFilters} />
                </SheetContent>
              </Sheet>
            </div>

{/* Product Grid */}
            <ProductGrid category={category} filters={filters} sortBy={sortBy} setSortBy={setSortBy} />
          </div>
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/(frontend)/cart/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useCart } from "@/lib/cart-context"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Minus, Plus, ShoppingBag, Trash2, ArrowLeft } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { Separator } from "@/components/ui/separator"

export default function CartPage() {
  const { items, removeItem, updateQuantity, totalItems, totalPrice, clearCart } = useCart()

const shipping = totalPrice > 200 ? 0 : 25
  const tax = totalPrice * 0.05
  const total = totalPrice + shipping + tax

return (
    <div className="bg-background">
      {/* Header */}
      <div className="border-b">
        <div className="container mx-auto px-4 py-6">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold">Shopping Cart</h1>
              <p className="text-muted-foreground mt-1">{totalItems} items in your cart</p>
            </div>
            <Button variant="outline" asChild>
              <Link href="/categories/all">
                <ArrowLeft className="mr-2 h-4 w-4" />
                Continue Shopping
              </Link>
            </Button>
          </div>
        </div>
      </div>

<div className="container mx-auto px-4 py-8">
        {items.length === 0 ? (
          <Card className="max-w-md mx-auto">
            <CardContent className="flex flex-col items-center justify-center py-16 gap-4">
              <ShoppingBag className="h-24 w-24 text-muted-foreground" />
              <h2 className="text-2xl font-semibold">Your cart is empty</h2>
              <p className="text-muted-foreground text-center">
                Looks like you haven't added anything to your cart yet
              </p>
              <Button size="lg" asChild className="mt-4">
                <Link href="/categories/all">Start Shopping</Link>
              </Button>
            </CardContent>
          </Card>
        ) : (
          <div className="grid lg:grid-cols-3 gap-8">
            {/* Cart Items - Left Column */}
            <div className="lg:col-span-2 space-y-4">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-xl font-semibold">Cart Items</h2>
                <Button variant="ghost" size="sm" onClick={clearCart} className="text-destructive">
                  Clear All
                </Button>
              </div>

{items.map((item) => (
                <Card key={item.id}>
                  <CardContent className="p-6">
                    <div className="flex gap-6">
                      {/* Product Image */}
                      <div className="relative h-32 w-32 flex-shrink-0 rounded-lg overflow-hidden bg-muted">
                        <Image src={item.image || "/placeholder.svg"} alt={item.name} fill className="object-cover" />
                      </div>

{/* Product Details */}
                      <div className="flex-1 min-w-0">
                        <div className="flex justify-between gap-4">
                          <div className="flex-1">
                            <h3 className="font-semibold text-lg line-clamp-2">{item.name}</h3>
                            <p className="text-sm text-muted-foreground mt-1">
                              Sold by: <span className="font-medium">{item.vendor}</span>
                            </p>
                            <p className="text-sm text-muted-foreground">Category: {item.category}</p>

{/* Quantity Controls */}
                            <div className="flex items-center gap-3 mt-4">
                              <span className="text-sm font-medium">Quantity:</span>
                              <div className="flex items-center gap-2">
                                <Button
                                  variant="outline"
                                  size="icon"
                                  className="h-8 w-8 bg-transparent"
                                  onClick={() => updateQuantity(item.id, item.quantity - 1)}
                                >
                                  <Minus className="h-4 w-4" />
                                </Button>
                                <span className="text-base font-semibold w-12 text-center">{item.quantity}</span>
                                <Button
                                  variant="outline"
                                  size="icon"
                                  className="h-8 w-8 bg-transparent"
                                  onClick={() => updateQuantity(item.id, item.quantity + 1)}
                                >
                                  <Plus className="h-4 w-4" />
                                </Button>
                              </div>
                            </div>
                          </div>

{/* Price and Remove */}
                          <div className="flex flex-col items-end justify-between">
                            <Button
                              variant="ghost"
                              size="icon"
                              className="text-destructive hover:text-destructive"
                              onClick={() => removeItem(item.id)}
                            >
                              <Trash2 className="h-5 w-5" />
                            </Button>

<div className="text-right">
                              <p className="text-2xl font-bold">AED {(item.price * item.quantity).toFixed(2)}</p>
                              <p className="text-sm text-muted-foreground">AED {item.price.toFixed(2)} each</p>
                              {item.originalPrice && (
                                <p className="text-sm text-muted-foreground line-through">
                                  AED {item.originalPrice.toFixed(2)}
                                </p>
                              )}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>

{/* Order Summary - Right Column */}
            <div className="lg:col-span-1">
              <Card className="sticky top-4">
                <CardContent className="space-y-4 pt-6">
                  <h2 className="text-xl font-semibold">Order Summary</h2>
                  <div className="space-y-3">
                    <div className="flex justify-between text-base">
                      <span className="text-muted-foreground">Subtotal ({totalItems} items)</span>
                      <span className="font-medium">AED {totalPrice.toFixed(2)}</span>
                    </div>

<div className="flex justify-between text-base">
                      <span className="text-muted-foreground">Shipping</span>
                      {shipping === 0 ? (
                        <span className="font-medium text-green-600">Free</span>
                      ) : (
                        <span className="font-medium">AED {shipping.toFixed(2)}</span>
                      )}
                    </div>

{totalPrice <= 200 && totalPrice > 0 && (
                      <p className="text-xs text-muted-foreground bg-muted p-2 rounded">
                        Add AED {(200 - totalPrice).toFixed(2)} more to get free shipping!
                      </p>
                    )}

<div className="flex justify-between text-base">
                      <span className="text-muted-foreground">Tax (5%)</span>
                      <span className="font-medium">AED {tax.toFixed(2)}</span>
                    </div>

<div className="flex justify-between text-lg font-bold">
                      <span>Total</span>
                      <span>AED {total.toFixed(2)}</span>
                    </div>
                  </div>

<Button size="lg" className="w-full" asChild>
                    <Link href="/checkout">
                      Proceed to Checkout
                      <ArrowLeft className="ml-2 h-4 w-4 rotate-180" />
                    </Link>
                  </Button>

<div className="space-y-2 pt-4 border-t">
                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                      <ShoppingBag className="h-4 w-4" />
                      <span>Free shipping on orders over AED 200</span>
                    </div>
                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                      <svg
                        className="h-4 w-4"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                        />
                      </svg>
                      <span>100% Secure payment</span>
                    </div>
                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                      <svg
                        className="h-4 w-4"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
                        />
                      </svg>
                      <span>Easy returns within 30 days</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/(frontend)/signup-success/page.tsx" isEdit="true" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { Mail } from "lucide-react"

export default function SignupSuccessPage() {
  return (
    <div className="min-h-screen flex items-center justify-center p-4 bg-gray-50">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <div className="mx-auto mb-4 w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center">
            <Mail className="h-8 w-8 text-primary" />
          </div>
          <CardTitle className="text-2xl">Check your email</CardTitle>
          <CardDescription>We've sent you a confirmation link</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-sm text-muted-foreground text-center">
            You've successfully signed up for TradeGateStore. Please check your email to confirm your account before
            signing in.
          </p>
          <Button asChild className="w-full">
            <Link href="/login">Go to Login</Link>
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/vendor/layout.tsx" isMerged="true"
import type React from "react"
import VendorSidebar from "@/components/vendor-sidebar"

export default function VendorLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="flex h-screen overflow-hidden">
      <VendorSidebar />
      <main className="flex-1 overflow-y-auto bg-slate-50 p-8">{children}</main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/vendor-sidebar.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import { cn } from "@/lib/utils"
import { LayoutDashboard, Package, ShoppingCart, BarChart3, Store, LogOut, ChevronDown } from "lucide-react"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { createClient } from "@/lib/supabase/client"

const menuItems = [
  {
    title: "Dashboard",
    icon: LayoutDashboard,
    href: "/vendor/dashboard",
  },
  {
    title: "Products",
    icon: Package,
    href: "/vendor/products",
    submenu: [
      { title: "All Products", href: "/vendor/products" },
      { title: "Add Product", href: "/vendor/products/add" },
    ],
  },
  {
    title: "Orders",
    icon: ShoppingCart,
    href: "/vendor/orders",
  },
  {
    title: "Analytics",
    icon: BarChart3,
    href: "/vendor/analytics",
  },
  {
    title: "Store Settings",
    icon: Store,
    href: "/vendor/settings",
  },
]

export default function VendorSidebar() {
  const pathname = usePathname()
  const router = useRouter()
  const [expandedItems, setExpandedItems] = useState<string[]>([])

const toggleExpand = (title: string) => {
    setExpandedItems((prev) => (prev.includes(title) ? prev.filter((item) => item !== title) : [...prev, title]))
  }

const handleLogout = async () => {
    const supabase = createClient()
    await supabase.auth.signOut()
    router.push("/vendor/login")
  }

return (
    <div className="flex h-screen w-64 flex-col border-r bg-slate-900 text-white">
      {/* Logo */}
      <div className="flex h-16 items-center border-b border-slate-800 px-6">
        <Link href="/vendor/dashboard" className="flex items-center gap-2">
          <Store className="h-6 w-6 text-amber-400" />
          <span className="text-xl font-bold">Vendor Portal</span>
        </Link>
      </div>

{/* Navigation */}
      <nav className="flex-1 overflow-y-auto p-4">
        <ul className="space-y-1">
          {menuItems.map((item) => {
            const isActive = pathname === item.href || pathname.startsWith(item.href + "/")
            const isExpanded = expandedItems.includes(item.title)
            const hasSubmenu = item.submenu && item.submenu.length > 0

return (
              <li key={item.title}>
                {hasSubmenu ? (
                  <>
                    <button
                      onClick={() => toggleExpand(item.title)}
                      className={cn(
                        "flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm font-medium transition-colors",
                        isActive ? "bg-amber-500 text-white" : "text-slate-300 hover:bg-slate-800 hover:text-white",
                      )}
                    >
                      <div className="flex items-center gap-3">
                        <item.icon className="h-5 w-5" />
                        <span>{item.title}</span>
                      </div>
                      <ChevronDown className={cn("h-4 w-4 transition-transform", isExpanded && "rotate-180")} />
                    </button>
                    {isExpanded && (
                      <ul className="ml-4 mt-1 space-y-1 border-l border-slate-700 pl-4">
                        {item.submenu.map((subitem) => (
                          <li key={subitem.href}>
                            <Link
                              href={subitem.href}
                              className={cn(
                                "block rounded-lg px-3 py-2 text-sm transition-colors",
                                pathname === subitem.href
                                  ? "bg-slate-800 text-amber-400"
                                  : "text-slate-400 hover:bg-slate-800 hover:text-white",
                              )}
                            >
                              {subitem.title}
                            </Link>
                          </li>
                        ))}
                      </ul>
                    )}
                  </>
                ) : (
                  <Link
                    href={item.href}
                    className={cn(
                      "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
                      isActive ? "bg-amber-500 text-white" : "text-slate-300 hover:bg-slate-800 hover:text-white",
                    )}
                  >
                    <item.icon className="h-5 w-5" />
                    <span>{item.title}</span>
                  </Link>
                )}
              </li>
            )
          })}
        </ul>
      </nav>

{/* Logout */}
      <div className="border-t border-slate-800 p-4">
        <Button
          onClick={handleLogout}
          variant="ghost"
          className="w-full justify-start gap-3 text-slate-300 hover:bg-slate-800 hover:text-white"
        >
          <LogOut className="h-5 w-5" />
          <span>Logout</span>
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/vendor/products/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Search, Plus, MoreVertical, Edit, Trash2, Eye } from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import { createClient } from "@/lib/supabase/client"
import { useToast } from "@/hooks/use-toast"
import { useRouter } from "next/navigation"

type Product = {
  id: string
  name: string
  sku: string
  category: string
  price: number
  stock_quantity: number
  current_stock: number
  is_active: boolean
  approval_status: string
  thumbnail_url: string
  created_at: string
}

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

const checkAuthAndFetchProducts = async () => {
    try {
      setLoading(true)
      const supabase = createClient()

// Get current user
      const {
        data: { user },
        error: authError,
      } = await supabase.auth.getUser()

if (authError || !user) {
        router.push("/vendor/login")
        return
      }

// Get vendor profile
      const { data: profile, error: profileError } = await supabase
        .from("profiles")
        .select("id, user_type")
        .eq("id", user.id)
        .single()

if (profileError || !profile || profile.user_type !== "vendor") {
        toast({
          title: "Access Denied",
          description: "You must be a vendor to access this page",
          variant: "destructive",
        })
        router.push("/vendor/login")
        return
      }

setVendorId(profile.id)

// Fetch vendor's products
      const { data, error: fetchError } = await supabase
        .from("products")
        .select("*")
        .eq("vendor_id", profile.id)
        .order("created_at", { ascending: false })

if (fetchError) throw fetchError

setProducts(data || [])
    } catch (err: any) {
      console.error("[v0] Error fetching products:", err)
      toast({
        title: "Error",
        description: err.message || "Failed to fetch products",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const handleDelete = async (id: string) => {
    if (!confirm("Are you sure you want to delete this product?")) return

try {
      const supabase = createClient()
      const { error } = await supabase.from("products").delete().eq("id", id).eq("vendor_id", vendorId)

if (error) throw error

toast({
        title: "Success",
        description: "Product deleted successfully",
      })

checkAuthAndFetchProducts()
    } catch (err: any) {
      toast({
        title: "Error",
        description: err.message || "Failed to delete product",
        variant: "destructive",
      })
    }
  }

const filteredProducts = products.filter(
    (product) =>
      product.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      product.sku?.toLowerCase().includes(searchQuery.toLowerCase()),
  )

const getApprovalBadge = (status: string) => {
    switch (status) {
      case "approved":
        return <Badge className="bg-green-500/20 text-green-700 border-green-500/30">Approved</Badge>
      case "pending":
        return <Badge className="bg-yellow-500/20 text-yellow-700 border-yellow-500/30">Pending</Badge>
      case "rejected":
        return <Badge variant="destructive">Rejected</Badge>
      default:
        return <Badge variant="secondary">{status}</Badge>
    }
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">My Products</h1>
          <p className="text-sm text-muted-foreground mt-1">Manage your product inventory</p>
        </div>
        <Link href="/vendor/products/add">
          <Button className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600">
            <Plus className="h-4 w-4 mr-2" />
            Add New Product
          </Button>
        </Link>
      </div>

{/* Search */}
      <div className="flex items-center gap-4">
        <div className="relative flex-1 max-w-md">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search products by name or SKU..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-10"
          />
        </div>
      </div>

{loading ? (
        <div className="text-center py-12">
          <p className="text-muted-foreground">Loading products...</p>
        </div>
      ) : filteredProducts.length === 0 ? (
        <div className="text-center py-12">
          <p className="text-muted-foreground">
            {searchQuery ? "No products found matching your search." : "No products yet. Add your first product!"}
          </p>
        </div>
      ) : (
        <div className="border rounded-lg">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Product</TableHead>
                <TableHead>SKU</TableHead>
                <TableHead>Category</TableHead>
                <TableHead>Price</TableHead>
                <TableHead>Stock</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Approval</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredProducts.map((product) => (
                <TableRow key={product.id}>
                  <TableCell>
                    <div className="flex items-center gap-3">
                      <Image
                        src={product.thumbnail_url || "/placeholder.svg?height=40&width=40"}
                        alt={product.name}
                        width={40}
                        height={40}
                        className="rounded-lg object-cover"
                      />
                      <span className="font-medium">{product.name}</span>
                    </div>
                  </TableCell>
                  <TableCell>{product.sku || "N/A"}</TableCell>
                  <TableCell>{product.category || "Uncategorized"}</TableCell>
                  <TableCell>AED {product.price?.toFixed(2) || "0.00"}</TableCell>
                  <TableCell>{product.stock_quantity || product.current_stock || 0}</TableCell>
                  <TableCell>
                    <Badge
                      variant={product.is_active ? "default" : "destructive"}
                      className={product.is_active ? "bg-green-500/20 text-green-700 border-green-500/30" : ""}
                    >
                      {product.is_active ? "Active" : "Inactive"}
                    </Badge>
                  </TableCell>
                  <TableCell>{getApprovalBadge(product.approval_status)}</TableCell>
                  <TableCell className="text-right">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="sm">
                          <MoreVertical className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem onClick={() => router.push(`/vendor/products/view/${product.id}`)}>
                          <Eye className="h-4 w-4 mr-2" />
                          View
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => router.push(`/vendor/products/edit/${product.id}`)}>
                          <Edit className="h-4 w-4 mr-2" />
                          Edit
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => handleDelete(product.id)} className="text-red-600">
                          <Trash2 className="h-4 w-4 mr-2" />
                          Delete
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/vendor/products/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/vendor/products/add/page.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Upload } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { createClient } from "@/lib/supabase/client"

type Category = {
  id: string
  name: string
  slug: string
  is_active: boolean
}

type Brand = {
  id: string
  name: string
  slug: string
  is_active: boolean
}

export default function VendorAddProductPage() {
  const router = useRouter()
  const { toast } = useToast()
  const [loading, setLoading] = useState(false)
  const [vendorId, setVendorId] = useState<string | null>(null)
  const [images, setImages] = useState<string[]>([])
  const [categories, setCategories] = useState<Category[]>([])
  const [brands, setBrands] = useState<Brand[]>([])
  const [fetchingData, setFetchingData] = useState(true)

const [formData, setFormData] = useState({
    name: "",
    description: "",
    category: "",
    brand: "",
    productType: "physical",
    sku: "",
    unit: "kg",
    unitPrice: "",
    minimumOrderQty: "1",
    currentStock: "0",
    discountType: "flat",
    discountAmount: "0",
    taxAmount: "0",
    shippingCost: "0",
    shippingCostMultiply: false,
    thumbnailUrl: "",
    videoUrl: "",
  })

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

const checkAuthAndFetchData = async () => {
    try {
      const supabase = createClient()

// Get current user
      const {
        data: { user },
        error: authError,
      } = await supabase.auth.getUser()

if (authError || !user) {
        router.push("/vendor/login")
        return
      }

// Get vendor profile
      const { data: profile, error: profileError } = await supabase
        .from("profiles")
        .select("id, user_type")
        .eq("id", user.id)
        .single()

setVendorId(profile.id)

// Fetch categories and brands
      const [categoriesResult, brandsResult] = await Promise.all([
        supabase.from("categories").select("id, name, slug, is_active").eq("is_active", true).order("name"),
        supabase.from("brands").select("id, name, slug, is_active").eq("is_active", true).order("name"),
      ])

if (categoriesResult.error) throw categoriesResult.error
      if (brandsResult.error) throw brandsResult.error

setCategories(categoriesResult.data || [])
      setBrands(brandsResult.data || [])
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "Failed to load data",
        variant: "destructive",
      })
    } finally {
      setFetchingData(false)
    }
  }

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

if (!vendorId) {
      toast({
        title: "Error",
        description: "Vendor ID not found. Please log in again.",
        variant: "destructive",
      })
      return
    }

setLoading(true)

try {
      const supabase = createClient()
      const stockValue = Number.parseInt(formData.currentStock)

const { data, error } = await supabase
        .from("products")
        .insert({
          name: formData.name,
          description: formData.description,
          category: formData.category,
          brand: formData.brand,
          product_type: formData.productType,
          sku: formData.sku,
          unit: formData.unit,
          price: Number.parseFloat(formData.unitPrice),
          minimum_order_qty: Number.parseInt(formData.minimumOrderQty),
          stock_quantity: stockValue,
          current_stock: stockValue,
          discount_type: formData.discountType,
          discount_amount: Number.parseFloat(formData.discountAmount),
          tax_amount: Number.parseFloat(formData.taxAmount),
          shipping_cost: Number.parseFloat(formData.shippingCost),
          shipping_cost_multiply: formData.shippingCostMultiply,
          thumbnail_url: formData.thumbnailUrl,
          additional_images: images,
          video_url: formData.videoUrl,
          vendor_id: vendorId,
          is_inhouse: false,
          is_active: true,
          approval_status: "pending",
        })
        .select()
        .single()

if (error) throw error

toast({
        title: "Success",
        description: "Product submitted for approval successfully",
      })

router.push("/vendor/products")
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "Failed to add product",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="p-6 max-w-6xl">
      <div className="mb-6">
        <h1 className="text-2xl font-bold">Add New Product</h1>
        <p className="text-muted-foreground">Create a new product for your store (pending admin approval)</p>
      </div>

<form onSubmit={handleSubmit} className="space-y-6">
        {/* Basic Information */}
        <Card>
          <CardHeader>
            <CardTitle>Basic Information</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <Label htmlFor="name">Product Name *</Label>
              <Input
                id="name"
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                placeholder="New Product"
                required
              />
            </div>

<div>
              <Label htmlFor="description">Description *</Label>
              <Textarea
                id="description"
                value={formData.description}
                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                placeholder="Product description..."
                rows={6}
                required
              />
            </div>
          </CardContent>
        </Card>

{/* General Setup */}
        <Card>
          <CardHeader>
            <CardTitle>General Setup</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <Label htmlFor="category">Category *</Label>
                <Select
                  value={formData.category}
                  onValueChange={(value) => setFormData({ ...formData, category: value })}
                  disabled={fetchingData}
                >
                  <SelectTrigger>
                    <SelectValue placeholder={fetchingData ? "Loading..." : "Select category"} />
                  </SelectTrigger>
                  <SelectContent>
                    {categories.map((category) => (
                      <SelectItem key={category.id} value={category.slug}>
                        {category.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div>
                <Label htmlFor="brand">Brand *</Label>
                <Select
                  value={formData.brand}
                  onValueChange={(value) => setFormData({ ...formData, brand: value })}
                  disabled={fetchingData}
                >
                  <SelectTrigger>
                    <SelectValue placeholder={fetchingData ? "Loading..." : "Select Brand"} />
                  </SelectTrigger>
                  <SelectContent>
                    {brands.map((brand) => (
                      <SelectItem key={brand.id} value={brand.slug}>
                        {brand.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div>
                <Label htmlFor="productType">Product Type *</Label>
                <Select
                  value={formData.productType}
                  onValueChange={(value) => setFormData({ ...formData, productType: value })}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="physical">Physical</SelectItem>
                    <SelectItem value="digital">Digital</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div>
                <Label htmlFor="sku">Product SKU *</Label>
                <Input
                  id="sku"
                  value={formData.sku}
                  onChange={(e) => setFormData({ ...formData, sku: e.target.value })}
                  placeholder="Ex: 161183"
                  required
                />
              </div>

<div>
                <Label htmlFor="unit">Unit</Label>
                <Select value={formData.unit} onValueChange={(value) => setFormData({ ...formData, unit: value })}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="kg">kg</SelectItem>
                    <SelectItem value="piece">Piece</SelectItem>
                    <SelectItem value="liter">Liter</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Pricing & Stock */}
        <Card>
          <CardHeader>
            <CardTitle>Pricing & Stock</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              <div>
                <Label htmlFor="unitPrice">Unit Price (AED) *</Label>
                <Input
                  id="unitPrice"
                  type="number"
                  step="0.01"
                  value={formData.unitPrice}
                  onChange={(e) => setFormData({ ...formData, unitPrice: e.target.value })}
                  placeholder="Unit price"
                  required
                />
              </div>

<div>
                <Label htmlFor="minimumOrderQty">Minimum Order Qty *</Label>
                <Input
                  id="minimumOrderQty"
                  type="number"
                  value={formData.minimumOrderQty}
                  onChange={(e) => setFormData({ ...formData, minimumOrderQty: e.target.value })}
                  placeholder="1"
                  required
                />
              </div>

<div>
                <Label htmlFor="currentStock">Current Stock Qty *</Label>
                <Input
                  id="currentStock"
                  type="number"
                  value={formData.currentStock}
                  onChange={(e) => setFormData({ ...formData, currentStock: e.target.value })}
                  placeholder="0"
                  required
                />
              </div>

<div>
                <Label htmlFor="discountType">Discount Type</Label>
                <Select
                  value={formData.discountType}
                  onValueChange={(value) => setFormData({ ...formData, discountType: value })}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="flat">Flat</SelectItem>
                    <SelectItem value="percentage">Percentage</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div>
                <Label htmlFor="discountAmount">Discount Amount (AED)</Label>
                <Input
                  id="discountAmount"
                  type="number"
                  step="0.01"
                  value={formData.discountAmount}
                  onChange={(e) => setFormData({ ...formData, discountAmount: e.target.value })}
                  placeholder="0"
                />
              </div>

<div>
                <Label htmlFor="taxAmount">Tax Amount (%)</Label>
                <Input
                  id="taxAmount"
                  type="number"
                  step="0.01"
                  value={formData.taxAmount}
                  onChange={(e) => setFormData({ ...formData, taxAmount: e.target.value })}
                  placeholder="0"
                />
              </div>

<div>
                <Label htmlFor="shippingCost">Shipping Cost (AED)</Label>
                <Input
                  id="shippingCost"
                  type="number"
                  step="0.01"
                  value={formData.shippingCost}
                  onChange={(e) => setFormData({ ...formData, shippingCost: e.target.value })}
                  placeholder="0"
                />
              </div>
            </div>

<div className="flex items-center gap-2">
              <Switch
                checked={formData.shippingCostMultiply}
                onCheckedChange={(checked) => setFormData({ ...formData, shippingCostMultiply: checked })}
              />
              <Label>Shipping Cost Multiply With Quantity</Label>
            </div>
          </CardContent>
        </Card>

{/* Product Images */}
        <Card>
          <CardHeader>
            <CardTitle>Product Images</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <Label htmlFor="thumbnailUrl">Product Thumbnail *</Label>
              <p className="text-sm text-muted-foreground mb-2">Ratio 1:1 (500 x 500 px)</p>
              <div className="border-2 border-dashed rounded-lg p-8 text-center">
                <Upload className="mx-auto h-12 w-12 text-muted-foreground mb-2" />
                <p className="text-sm text-muted-foreground mb-2">Upload Image</p>
                <Input
                  id="thumbnailUrl"
                  type="url"
                  value={formData.thumbnailUrl}
                  onChange={(e) => setFormData({ ...formData, thumbnailUrl: e.target.value })}
                  placeholder="Image URL"
                  className="max-w-md mx-auto"
                />
              </div>
            </div>

<div>
              <Label htmlFor="videoUrl">YouTube Video Link</Label>
              <Input
                id="videoUrl"
                type="url"
                value={formData.videoUrl}
                onChange={(e) => setFormData({ ...formData, videoUrl: e.target.value })}
                placeholder="Ex: https://www.youtube.com/watch?v=..."
              />
            </div>
          </CardContent>
        </Card>

<div className="flex gap-4">
          <Button type="button" variant="outline" onClick={() => router.back()}>
            Cancel
          </Button>
          <Button type="submit" disabled={loading || !vendorId}>
            {loading ? "Submitting..." : "Submit for Approval"}
          </Button>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/vendor/products/edit/[id]/page.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { useRouter, useParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Upload } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { createClient } from "@/lib/supabase/client"

type Category = {
  id: string
  name: string
  slug: string
  is_active: boolean
}

type Brand = {
  id: string
  name: string
  slug: string
  is_active: boolean
}

export default function VendorEditProductPage() {
  const router = useRouter()
  const params = useParams()
  const productId = params.id as string
  const { toast } = useToast()
  const [loading, setLoading] = useState(false)
  const [fetchingProduct, setFetchingProduct] = useState(true)
  const [vendorId, setVendorId] = useState<string | null>(null)
  const [categories, setCategories] = useState<Category[]>([])
  const [brands, setBrands] = useState<Brand[]>([])

useEffect(() => {
    checkAuthAndFetchData()
  }, [productId])

const checkAuthAndFetchData = async () => {
    try {
      const supabase = createClient()

// Get current user
      const {
        data: { user },
        error: authError,
      } = await supabase.auth.getUser()

if (authError || !user) {
        router.push("/vendor/login")
        return
      }

// Get vendor profile
      const { data: profile, error: profileError } = await supabase
        .from("profiles")
        .select("id, user_type")
        .eq("id", user.id)
        .single()

setVendorId(profile.id)

// Fetch product
      const { data: product, error: productError } = await supabase
        .from("products")
        .select("*")
        .eq("id", productId)
        .eq("vendor_id", profile.id)
        .single()

if (productError) throw productError

if (!product) {
        toast({
          title: "Error",
          description: "Product not found or you don't have permission to edit it",
          variant: "destructive",
        })
        router.push("/vendor/products")
        return
      }

// Populate form with product data
      setFormData({
        name: product.name || "",
        description: product.description || "",
        category: product.category || "",
        brand: product.brand || "",
        productType: product.product_type || "physical",
        sku: product.sku || "",
        unit: product.unit || "kg",
        unitPrice: product.price?.toString() || "",
        minimumOrderQty: product.minimum_order_qty?.toString() || "1",
        currentStock: (product.stock_quantity || product.current_stock || 0).toString(),
        discountType: product.discount_type || "flat",
        discountAmount: product.discount_amount?.toString() || "0",
        taxAmount: product.tax_amount?.toString() || "0",
        shippingCost: product.shipping_cost?.toString() || "0",
        shippingCostMultiply: product.shipping_cost_multiply || false,
        thumbnailUrl: product.thumbnail_url || "",
        videoUrl: product.video_url || "",
      })

if (categoriesResult.error) throw categoriesResult.error
      if (brandsResult.error) throw brandsResult.error

setCategories(categoriesResult.data || [])
      setBrands(brandsResult.data || [])
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "Failed to load product",
        variant: "destructive",
      })
    } finally {
      setFetchingProduct(false)
    }
  }

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

if (!vendorId) {
      toast({
        title: "Error",
        description: "Vendor ID not found. Please log in again.",
        variant: "destructive",
      })
      return
    }

setLoading(true)

try {
      const supabase = createClient()
      const stockValue = Number.parseInt(formData.currentStock)

const { error } = await supabase
        .from("products")
        .update({
          name: formData.name,
          description: formData.description,
          category: formData.category,
          brand: formData.brand,
          product_type: formData.productType,
          sku: formData.sku,
          unit: formData.unit,
          price: Number.parseFloat(formData.unitPrice),
          minimum_order_qty: Number.parseInt(formData.minimumOrderQty),
          stock_quantity: stockValue,
          current_stock: stockValue,
          discount_type: formData.discountType,
          discount_amount: Number.parseFloat(formData.discountAmount),
          tax_amount: Number.parseFloat(formData.taxAmount),
          shipping_cost: Number.parseFloat(formData.shippingCost),
          shipping_cost_multiply: formData.shippingCostMultiply,
          thumbnail_url: formData.thumbnailUrl,
          video_url: formData.videoUrl,
        })
        .eq("id", productId)
        .eq("vendor_id", vendorId)

if (error) throw error

toast({
        title: "Success",
        description: "Product updated successfully",
      })

router.push("/vendor/products")
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "Failed to update product",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

if (fetchingProduct) {
    return (
      <div className="p-6 text-center">
        <p className="text-muted-foreground">Loading product...</p>
      </div>
    )
  }

return (
    <div className="p-6 max-w-6xl">
      <div className="mb-6">
        <h1 className="text-2xl font-bold">Edit Product</h1>
        <p className="text-muted-foreground">Update your product information</p>
      </div>

{/* General Setup */}
        <Card>
          <CardHeader>
            <CardTitle>General Setup</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <Label htmlFor="category">Category *</Label>
                <Select
                  value={formData.category}
                  onValueChange={(value) => setFormData({ ...formData, category: value })}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Select category" />
                  </SelectTrigger>
                  <SelectContent>
                    {categories.map((category) => (
                      <SelectItem key={category.id} value={category.slug}>
                        {category.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div>
                <Label htmlFor="brand">Brand *</Label>
                <Select value={formData.brand} onValueChange={(value) => setFormData({ ...formData, brand: value })}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select Brand" />
                  </SelectTrigger>
                  <SelectContent>
                    {brands.map((brand) => (
                      <SelectItem key={brand.id} value={brand.slug}>
                        {brand.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

<div>
                <Label htmlFor="shippingCost">Shipping Cost (AED)</Label>
                <Input
                  id="shippingCost"
                  type="number"
                  step="0.01"
                  value={formData.shippingCost}
                  onChange={(e) => setFormData({ ...formData, shippingCost: e.target.value })}
                  placeholder="0"
                />
              </div>
            </div>

{/* Product Images */}
        <Card>
          <CardHeader>
            <CardTitle>Product Images</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <Label htmlFor="thumbnailUrl">Product Thumbnail *</Label>
              <p className="text-sm text-muted-foreground mb-2">Ratio 1:1 (500 x 500 px)</p>
              <div className="border-2 border-dashed rounded-lg p-8 text-center">
                <Upload className="mx-auto h-12 w-12 text-muted-foreground mb-2" />
                <p className="text-sm text-muted-foreground mb-2">Upload Image</p>
                <Input
                  id="thumbnailUrl"
                  type="url"
                  value={formData.thumbnailUrl}
                  onChange={(e) => setFormData({ ...formData, thumbnailUrl: e.target.value })}
                  placeholder="Image URL"
                  className="max-w-md mx-auto"
                />
              </div>
            </div>

<div className="flex gap-4">
          <Button type="button" variant="outline" onClick={() => router.back()}>
            Cancel
          </Button>
          <Button type="submit" disabled={loading || !vendorId}>
            {loading ? "Updating..." : "Update Product"}
          </Button>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/dashboard/page.tsx" isEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
  Users,
  Package,
  ShoppingCart,
  TrendingUp,
  Store,
  FileText,
  AlertCircle,
  CheckCircle,
  XCircle,
  Eye,
} from "lucide-react"
import { useAdminTheme } from "@/lib/admin-theme-context"
import { cn } from "@/lib/utils"
import { useEffect, useState } from "react"
import { createClient } from "@/lib/supabase/client"
import { useToast } from "@/hooks/use-toast"
import Link from "next/link"

interface Product {
  id: string
  name: string
  category: string
  brand: string
  price: number
  vendor_id: string
  created_at: string
  approval_status: string
}

export default function AdminDashboard() {
  const { theme } = useAdminTheme()
  const { toast } = useToast()
  const [pendingProducts, setPendingProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)

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

const fetchPendingProducts = async () => {
    try {
      const supabase = createClient()
      const { data, error } = await supabase
        .from("products")
        .select("*")
        .eq("approval_status", "pending")
        .order("created_at", { ascending: false })
        .limit(5)

if (error) throw error
      setPendingProducts(data || [])
    } catch (error) {
      console.error("Error fetching pending products:", error)
    } finally {
      setLoading(false)
    }
  }

const handleApprove = async (id: string) => {
    try {
      const supabase = createClient()
      const { error } = await supabase.from("products").update({ approval_status: "approved" }).eq("id", id)

if (error) throw error

toast({
        title: "Success",
        description: "Product approved successfully",
      })

fetchPendingProducts()
    } catch (err: any) {
      toast({
        title: "Error",
        description: err.message || "Failed to approve product",
        variant: "destructive",
      })
    }
  }

const handleReject = async (id: string) => {
    try {
      const supabase = createClient()
      const { error } = await supabase.from("products").update({ approval_status: "rejected" }).eq("id", id)

if (error) throw error

toast({
        title: "Success",
        description: "Product rejected",
      })

fetchPendingProducts()
    } catch (err: any) {
      toast({
        title: "Error",
        description: err.message || "Failed to reject product",
        variant: "destructive",
      })
    }
  }

const stats = [
    { title: "Total Users", value: "0", icon: Users, color: "text-blue-400" },
    { title: "Total Products", value: "0", icon: Package, color: "text-green-400" },
    { title: "Total Orders", value: "0", icon: ShoppingCart, color: "text-purple-400" },
    { title: "Total Vendors", value: "0", icon: Store, color: "text-amber-400" },
  ]

const quickActions = [
    { title: "Manage Users", icon: Users, href: "/admin/users", description: "View and manage user accounts" },
    { title: "Manage Products", icon: Package, href: "/admin/products", description: "Add, edit, or remove products" },
    { title: "View Orders", icon: ShoppingCart, href: "/admin/orders", description: "Track and manage orders" },
    { title: "Vendor Management", icon: Store, href: "/admin/vendors", description: "Approve and manage vendors" },
    { title: "Reports", icon: FileText, href: "/admin/reports", description: "View analytics and reports" },
  ]

return (
    <div>
      {/* Welcome Section */}
      <div className="mb-8">
        <h1 className={cn("text-3xl font-bold mb-2", theme === "dark" ? "text-white" : "text-gray-900")}>
          Welcome to Admin Dashboard
        </h1>
        <p className={cn(theme === "dark" ? "text-slate-400" : "text-gray-600")}>
          Manage your e-commerce platform from here
        </p>
      </div>

{/* Database Setup Alert */}
      <div className="mb-8">
        <Card className="bg-amber-500/10 border-amber-500/20">
          <CardHeader>
            <div className="flex items-start gap-3">
              <AlertCircle className="h-5 w-5 text-amber-400 mt-0.5" />
              <div>
                <CardTitle className="text-amber-400">Database Setup Required</CardTitle>
                <CardDescription className={cn(theme === "dark" ? "text-slate-400" : "text-gray-600", "mt-1")}>
                  Run the SQL scripts to set up the database tables before managing data.
                </CardDescription>
              </div>
            </div>
          </CardHeader>
        </Card>
      </div>

{/* Stats Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        {stats.map((stat) => (
          <Card
            key={stat.title}
            className={cn(
              theme === "dark" ? "bg-slate-800/50 border-slate-700/50" : "bg-white border-gray-200 shadow-sm",
            )}
          >
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className={cn("text-sm font-medium", theme === "dark" ? "text-slate-400" : "text-gray-600")}>
                {stat.title}
              </CardTitle>
              <stat.icon className={`h-5 w-5 ${stat.color}`} />
            </CardHeader>
            <CardContent>
              <div className={cn("text-3xl font-bold", theme === "dark" ? "text-white" : "text-gray-900")}>
                {stat.value}
              </div>
              <p className={cn("text-xs mt-1", theme === "dark" ? "text-slate-500" : "text-gray-500")}>
                <TrendingUp className="inline h-3 w-3 mr-1" />
                No data yet
              </p>
            </CardContent>
          </Card>
        ))}
      </div>

{!loading && pendingProducts.length > 0 && (
        <div className="mb-8">
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-3">
              <h2 className={cn("text-xl font-bold", theme === "dark" ? "text-white" : "text-gray-900")}>
                Pending Approvals
              </h2>
              <Badge variant="destructive" className="bg-red-500">
                {pendingProducts.length}
              </Badge>
            </div>
            <Link href="/admin/products/vendor/pending">
              <Button variant="outline" size="sm">
                View All
              </Button>
            </Link>
          </div>

<Card className={cn(theme === "dark" ? "bg-slate-800/50 border-slate-700/50" : "bg-white border-gray-200")}>
            <CardContent className="p-0">
              <div className="divide-y divide-slate-700/50">
                {pendingProducts.map((product) => (
                  <div
                    key={product.id}
                    className={cn(
                      "p-4 flex items-center justify-between hover:bg-slate-800/30 transition-colors",
                      theme === "dark" ? "" : "hover:bg-gray-50",
                    )}
                  >
                    <div className="flex-1">
                      <h3 className={cn("font-medium mb-1", theme === "dark" ? "text-white" : "text-gray-900")}>
                        {product.name}
                      </h3>
                      <div className="flex items-center gap-3 text-sm">
                        <span className={cn(theme === "dark" ? "text-slate-400" : "text-gray-600")}>
                          {product.category}
                        </span>
                        <span className={cn(theme === "dark" ? "text-slate-500" : "text-gray-400")}>•</span>
                        <span className={cn(theme === "dark" ? "text-slate-400" : "text-gray-600")}>
                          {product.brand}
                        </span>
                        <span className={cn(theme === "dark" ? "text-slate-500" : "text-gray-400")}>•</span>
                        <span className="text-amber-400 font-medium">₹{product.price.toLocaleString()}</span>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <Link href={`/admin/products/inhouse/view/${product.id}`}>
                        <Button variant="outline" size="sm">
                          <Eye className="h-4 w-4" />
                        </Button>
                      </Link>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleApprove(product.id)}
                        className="text-green-600 hover:text-green-700 hover:bg-green-50"
                      >
                        <CheckCircle className="h-4 w-4 mr-1" />
                        Approve
                      </Button>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleReject(product.id)}
                        className="text-red-600 hover:text-red-700 hover:bg-red-50"
                      >
                        <XCircle className="h-4 w-4 mr-1" />
                        Reject
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      )}

{/* Quick Actions */}
      <div>
        <h2 className={cn("text-xl font-bold mb-4", theme === "dark" ? "text-white" : "text-gray-900")}>
          Quick Actions
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {quickActions.map((action) => (
            <Card
              key={action.title}
              className={cn(
                "transition-colors cursor-pointer group",
                theme === "dark"
                  ? "bg-slate-800/50 border-slate-700/50 hover:bg-slate-800"
                  : "bg-white border-gray-200 shadow-sm hover:bg-gray-50",
              )}
            >
              <CardHeader>
                <div className="flex items-start gap-4">
                  <div className="bg-gradient-to-br from-amber-500 to-orange-500 p-3 rounded-lg group-hover:scale-110 transition-transform">
                    <action.icon className="h-6 w-6 text-white" />
                  </div>
                  <div className="flex-1">
                    <CardTitle
                      className={cn(
                        "group-hover:text-amber-400 transition-colors",
                        theme === "dark" ? "text-white" : "text-gray-900",
                      )}
                    >
                      {action.title}
                    </CardTitle>
                    <CardDescription className={cn("mt-1", theme === "dark" ? "text-slate-400" : "text-gray-600")}>
                      {action.description}
                    </CardDescription>
                  </div>
                </div>
              </CardHeader>
            </Card>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/(frontend)/shops/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/(frontend)/shops/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Star, Store, Loader2, Search, MapPin } from "lucide-react"
import { createClient } from "@/lib/supabase/client"
import Link from "next/link"
import Image from "next/image"

interface Vendor {
  id: string
  business_name: string
  business_description: string
  business_address: string | null
  avatar_url: string | null
  rating: number
  total_sales: number
  is_verified: boolean
  product_count: number
}

export default function ShopsPage() {
  const [vendors, setVendors] = useState<Vendor[]>([])
  const [filteredVendors, setFilteredVendors] = useState<Vendor[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")

useEffect(() => {
    async function fetchVendors() {
      try {
        const supabase = createClient()

const { data: vendorProfiles, error: vendorError } = await supabase
          .from("profiles")
          .select(
            "id, business_name, business_description, business_address, avatar_url, rating, total_sales, is_verified",
          )
          .eq("user_type", "vendor")
          .order("rating", { ascending: false })

if (vendorError) throw vendorError

const vendorsWithCounts = await Promise.all(
          (vendorProfiles || []).map(async (vendor) => {
            const { count } = await supabase
              .from("products")
              .select("*", { count: "exact", head: true })
              .eq("vendor_id", vendor.id)
              .eq("is_active", true)
              .eq("approval_status", "approved")

return {
              ...vendor,
              product_count: count || 0,
            }
          }),
        )

setVendors(vendorsWithCounts)
        setFilteredVendors(vendorsWithCounts)
      } catch (err) {
        console.error("Error fetching vendors:", err)
      } finally {
        setLoading(false)
      }
    }

fetchVendors()
  }, [])

useEffect(() => {
    if (searchQuery.trim() === "") {
      setFilteredVendors(vendors)
    } else {
      const filtered = vendors.filter(
        (vendor) =>
          vendor.business_name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
          vendor.business_description?.toLowerCase().includes(searchQuery.toLowerCase()),
      )
      setFilteredVendors(filtered)
    }
  }, [searchQuery, vendors])

if (loading) {
    return (
      <div className="container mx-auto px-4 py-12">
        <div className="flex items-center justify-center py-12">
          <Loader2 className="h-8 w-8 animate-spin text-primary" />
          <span className="ml-2 text-muted-foreground">Loading shops...</span>
        </div>
      </div>
    )
  }

return (
    <div className="container mx-auto px-4 py-8">
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-4xl font-bold mb-2">All Shops</h1>
        <p className="text-muted-foreground text-lg">Discover amazing products from verified sellers</p>
      </div>

{/* Search Bar */}
      <div className="mb-8">
        <div className="relative max-w-md">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
          <Input
            type="text"
            placeholder="Search shops..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-10"
          />
        </div>
      </div>

{/* Stats */}
      <div className="mb-8 flex items-center gap-4 text-sm text-muted-foreground">
        <span>Showing {filteredVendors.length} shops</span>
        {filteredVendors.filter((v) => v.is_verified).length > 0 && (
          <span>• {filteredVendors.filter((v) => v.is_verified).length} verified</span>
        )}
      </div>

{/* Vendors Grid */}
      {filteredVendors.length === 0 ? (
        <div className="text-center py-12">
          <Store className="h-16 w-16 mx-auto text-muted-foreground mb-4" />
          <p className="text-muted-foreground">No shops found matching your search.</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredVendors.map((vendor) => (
            <Card key={vendor.id} className="group overflow-hidden hover:shadow-xl transition-all duration-300">
              <CardContent className="p-0">
                {/* Shop Banner */}
                <div className="relative overflow-hidden h-40">
                  <Image
                    src={vendor.avatar_url || "/placeholder.svg?height=300&width=600&query=shop banner"}
                    alt={vendor.business_name}
                    fill
                    className="object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" />
                  <div className="absolute bottom-3 left-3 right-3">
                    <div className="flex items-center gap-2">
                      <h3 className="text-lg font-bold text-white line-clamp-1">{vendor.business_name}</h3>
                      {vendor.is_verified && (
                        <Badge className="bg-primary text-primary-foreground text-xs">Verified</Badge>
                      )}
                    </div>
                  </div>
                </div>

{/* Shop Info */}
                <div className="p-4 space-y-3">
                  <p className="text-sm text-muted-foreground line-clamp-2 min-h-[2.5rem]">
                    {vendor.business_description || "Quality products from a trusted seller"}
                  </p>

{vendor.business_address && (
                    <div className="flex items-center gap-1 text-xs text-muted-foreground">
                      <MapPin className="h-3 w-3" />
                      <span className="line-clamp-1">{vendor.business_address}</span>
                    </div>
                  )}

<div className="flex items-center justify-between pt-2 border-t">
                    <div className="flex items-center gap-3">
                      <div className="flex items-center gap-1">
                        <Star className="h-4 w-4 fill-amber-400 text-amber-400" />
                        <span className="text-sm font-medium">{vendor.rating?.toFixed(1) || "5.0"}</span>
                      </div>
                      <div className="flex items-center gap-1 text-muted-foreground">
                        <Store className="h-4 w-4" />
                        <span className="text-sm">{vendor.product_count}</span>
                      </div>
                    </div>
                    <span className="text-xs text-muted-foreground">{vendor.total_sales || 0} sales</span>
                  </div>

<Link href={`/shops/${vendor.id}`}>
                    <Button className="w-full" size="sm">
                      Visit Shop
                    </Button>
                  </Link>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/(frontend)/search/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/search-product-grid.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Heart, ShoppingCart, Star } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { useCart } from "@/lib/cart-context"
import { useWishlist } from "@/lib/wishlist-context"

interface Product {
  id: string
  name: string
  category: string
  price: number
  discount_amount?: number
  rating: number
  image_url: string
  stock_quantity: number
  brand?: string
  vendor_id?: string
}

interface SearchProductGridProps {
  products: Product[]
}

export function SearchProductGrid({ products }: SearchProductGridProps) {
  const { addItem } = useCart()
  const { toggleItem, isInWishlist } = useWishlist()

const toggleFavorite = (product: Product) => {
    const originalPrice = product.discount_amount ? product.price + product.discount_amount : product.price

toggleItem({
      id: product.id,
      name: product.name,
      price: product.price,
      originalPrice: originalPrice,
      image: product.image_url,
      vendor: "TradeGate Store",
      category: product.category,
      rating: product.rating,
      reviews: 0,
    })
  }

const handleAddToCart = (product: Product) => {
    const originalPrice = product.discount_amount ? product.price + product.discount_amount : product.price

addItem({
      id: product.id,
      name: product.name,
      price: product.price,
      originalPrice: originalPrice,
      image: product.image_url,
      vendor: "TradeGate Store",
      category: product.category,
    })
  }

return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
      {products.map((product) => {
        const originalPrice = product.discount_amount ? product.price + product.discount_amount : product.price
        const hasDiscount = product.discount_amount && product.discount_amount > 0

return (
          <Card key={product.id} className="group overflow-hidden hover:shadow-lg transition-shadow">
            <CardContent className="p-0">
              {/* Product Image */}
              <Link href={`/products/${product.id}`}>
                <div className="relative aspect-square overflow-hidden bg-muted cursor-pointer">
                  <Image
                    src={product.image_url || "/placeholder.svg?height=300&width=300"}
                    alt={product.name}
                    fill
                    className="object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                  <button
                    onClick={(e) => {
                      e.preventDefault()
                      toggleFavorite(product)
                    }}
                    className="absolute top-3 right-3 p-2 rounded-full bg-white/90 hover:bg-white transition-colors z-10"
                  >
                    <Heart
                      className={`h-5 w-5 ${isInWishlist(product.id) ? "fill-red-500 text-red-500" : "text-gray-600"}`}
                    />
                  </button>
                  {hasDiscount && (
                    <div className="absolute top-3 left-3">
                      <span className="px-3 py-1 bg-red-500 text-white text-xs font-semibold rounded-full">SALE</span>
                    </div>
                  )}
                </div>
              </Link>

{/* Product Info */}
              <div className="p-4 space-y-3">
                <div className="flex items-center justify-between text-xs text-muted-foreground">
                  <span>{product.category}</span>
                  {product.brand && <span>{product.brand}</span>}
                </div>

<Link href={`/products/${product.id}`}>
                  <h3 className="font-semibold text-sm line-clamp-2 min-h-[2.5rem] hover:text-primary transition-colors cursor-pointer">
                    {product.name}
                  </h3>
                </Link>

<div className="flex items-center gap-2">
                  <span className="text-lg font-bold text-foreground">AED{product.price.toFixed(2)}</span>
                  {hasDiscount && (
                    <span className="text-sm text-muted-foreground line-through">AED{originalPrice.toFixed(2)}</span>
                  )}
                </div>

<div className="flex items-center gap-1">
                  <div className="flex">
                    {Array.from({ length: 5 }).map((_, i) => (
                      <Star
                        key={i}
                        className={`h-4 w-4 ${
                          i < product.rating ? "fill-yellow-400 text-yellow-400" : "fill-gray-200 text-gray-200"
                        }`}
                      />
                    ))}
                  </div>
                  <span className="text-xs text-muted-foreground">({product.rating})</span>
                </div>

<div className="flex gap-2">
                  <Button
                    size="sm"
                    className="flex-1"
                    onClick={() => handleAddToCart(product)}
                    disabled={product.stock_quantity === 0}
                  >
                    <ShoppingCart className="h-4 w-4 mr-1" />
                    {product.stock_quantity === 0 ? "Out of Stock" : "Add to Cart"}
                  </Button>
                  <Button size="sm" variant="outline" onClick={() => toggleFavorite(product)}>
                    <Heart className={`h-4 w-4 ${isInWishlist(product.id) ? "fill-red-500 text-red-500" : ""}`} />
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        )
      })}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/(frontend)/search/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState, Suspense } from "react"
import { useSearchParams } from "next/navigation"
import { createClient } from "@/lib/supabase/client"
import { SearchProductGrid } from "@/components/search-product-grid"
import { Loader2 } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"

function SearchContent() {
  const searchParams = useSearchParams()
  const query = searchParams.get("q") || ""
  const [products, setProducts] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [totalResults, setTotalResults] = useState(0)

useEffect(() => {
    const fetchSearchResults = async () => {
      if (!query.trim()) {
        setProducts([])
        setLoading(false)
        return
      }

setLoading(true)
      const supabase = createClient()

try {
        const { data, error } = await supabase
          .from("products")
          .select("*")
          .eq("is_active", true)
          .eq("approval_status", "approved")
          .or(
            `name.ilike.%${query}%,description.ilike.%${query}%,category.ilike.%${query}%,brand.ilike.%${query}%,sub_category.ilike.%${query}%`,
          )
          .order("created_at", { ascending: false })

if (error) throw error

setProducts(data || [])
        setTotalResults(data?.length || 0)
      } catch (error) {
        console.error("Error searching products:", error)
        setProducts([])
      } finally {
        setLoading(false)
      }
    }

fetchSearchResults()
  }, [query])

if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </div>
    )
  }

return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-6">
        <h1 className="text-3xl font-bold mb-2">Search Results</h1>
        {query && (
          <p className="text-muted-foreground">
            {totalResults > 0
              ? `Found ${totalResults} result${totalResults !== 1 ? "s" : ""} for "${query}"`
              : `No results found for "${query}"`}
          </p>
        )}
      </div>

{!query.trim() ? (
        <Card>
          <CardContent className="py-12 text-center">
            <p className="text-muted-foreground">Enter a search query to find products</p>
          </CardContent>
        </Card>
      ) : products.length > 0 ? (
        <SearchProductGrid products={products} />
      ) : (
        <Card>
          <CardContent className="py-12 text-center">
            <p className="text-muted-foreground mb-4">No products found matching your search.</p>
            <p className="text-sm text-muted-foreground">Try different keywords or browse our categories</p>
          </CardContent>
        </Card>
      )}
    </div>
  )
}

export default function SearchPage() {
  return (
    <Suspense
      fallback={
        <div className="flex items-center justify-center min-h-[400px]">
          <Loader2 className="h-8 w-8 animate-spin text-primary" />
        </div>
      }
    >
      <SearchContent />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/admin/vendors/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Search, MoreVertical, Eye, CheckCircle, XCircle, Store, Phone, Mail, Calendar } from "lucide-react"
import { useAdminTheme } from "@/lib/admin-theme-context"
import { cn } from "@/lib/utils"
import { useRouter } from "next/navigation"
import { toast } from "sonner"

interface Vendor {
  id: string
  business_name: string | null
  business_description: string | null
  business_address: string | null
  phone_number: string | null
  avatar_url: string | null
  total_sales: number | null
  rating: number | null
  is_verified: boolean | null
  created_at: string
  updated_at: string
  username: string | null
}

export default function VendorsPage() {
  const [vendors, setVendors] = useState<Vendor[]>([])
  const [filteredVendors, setFilteredVendors] = useState<Vendor[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [filterStatus, setFilterStatus] = useState<"all" | "verified" | "unverified">("all")
  const { theme } = useAdminTheme()
  const router = useRouter()
  const supabase = createClient()

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

useEffect(() => {
    filterVendorsList()
  }, [vendors, searchQuery, filterStatus])

const fetchVendors = async () => {
    try {
      setLoading(true)
      const { data, error } = await supabase
        .from("profiles")
        .select("*")
        .eq("user_type", "vendor")
        .order("created_at", { ascending: false })

if (error) throw error

setVendors(data || [])
    } catch (error) {
      console.error("Error fetching vendors:", error)
      toast.error("Failed to fetch vendors")
    } finally {
      setLoading(false)
    }
  }

const filterVendorsList = () => {
    let filtered = vendors

// Filter by search query
    if (searchQuery) {
      filtered = filtered.filter(
        (vendor) =>
          vendor.business_name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
          vendor.username?.toLowerCase().includes(searchQuery.toLowerCase()) ||
          vendor.phone_number?.includes(searchQuery) ||
          vendor.business_address?.toLowerCase().includes(searchQuery.toLowerCase()),
      )
    }

// Filter by verification status
    if (filterStatus === "verified") {
      filtered = filtered.filter((vendor) => vendor.is_verified === true)
    } else if (filterStatus === "unverified") {
      filtered = filtered.filter((vendor) => vendor.is_verified !== true)
    }

setFilteredVendors(filtered)
  }

const toggleVerification = async (vendorId: string, currentStatus: boolean | null) => {
    try {
      const { error } = await supabase.from("profiles").update({ is_verified: !currentStatus }).eq("id", vendorId)

if (error) throw error

toast.success(`Vendor ${!currentStatus ? "verified" : "unverified"} successfully`)
      fetchVendors()
    } catch (error) {
      console.error("Error updating vendor:", error)
      toast.error("Failed to update vendor status")
    }
  }

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
    })
  }

if (loading) {
    return (
      <div className="flex items-center justify-center h-96">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-amber-500"></div>
      </div>
    )
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className={cn("text-3xl font-bold", theme === "dark" ? "text-white" : "text-gray-900")}>
          Vendor Management
        </h1>
        <p className={cn("text-sm mt-1", theme === "dark" ? "text-slate-400" : "text-gray-500")}>
          Manage all vendors and their stores
        </p>
      </div>

{/* Stats Cards */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card className={theme === "dark" ? "bg-slate-800 border-slate-700" : ""}>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Vendors</CardTitle>
            <Store className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{vendors.length}</div>
          </CardContent>
        </Card>

<Card className={theme === "dark" ? "bg-slate-800 border-slate-700" : ""}>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Verified Vendors</CardTitle>
            <CheckCircle className="h-4 w-4 text-green-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{vendors.filter((v) => v.is_verified === true).length}</div>
          </CardContent>
        </Card>

<Card className={theme === "dark" ? "bg-slate-800 border-slate-700" : ""}>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Unverified Vendors</CardTitle>
            <XCircle className="h-4 w-4 text-orange-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{vendors.filter((v) => v.is_verified !== true).length}</div>
          </CardContent>
        </Card>

<Card className={theme === "dark" ? "bg-slate-800 border-slate-700" : ""}>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Sales</CardTitle>
            <Store className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{vendors.reduce((sum, v) => sum + (v.total_sales || 0), 0)}</div>
          </CardContent>
        </Card>
      </div>

{/* Filters */}
      <Card className={theme === "dark" ? "bg-slate-800 border-slate-700" : ""}>
        <CardHeader>
          <CardTitle>Vendors List</CardTitle>
          <CardDescription>View and manage all registered vendors</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col sm:flex-row gap-4 mb-6">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
              <Input
                placeholder="Search by business name, username, phone..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10"
              />
            </div>
            <div className="flex gap-2">
              <Button
                variant={filterStatus === "all" ? "default" : "outline"}
                onClick={() => setFilterStatus("all")}
                size="sm"
              >
                All ({vendors.length})
              </Button>
              <Button
                variant={filterStatus === "verified" ? "default" : "outline"}
                onClick={() => setFilterStatus("verified")}
                size="sm"
              >
                Verified ({vendors.filter((v) => v.is_verified === true).length})
              </Button>
              <Button
                variant={filterStatus === "unverified" ? "default" : "outline"}
                onClick={() => setFilterStatus("unverified")}
                size="sm"
              >
                Unverified ({vendors.filter((v) => v.is_verified !== true).length})
              </Button>
            </div>
          </div>

{/* Vendors Table */}
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Business Name</TableHead>
                  <TableHead>Contact</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Sales</TableHead>
                  <TableHead>Rating</TableHead>
                  <TableHead>Joined</TableHead>
                  <TableHead className="text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredVendors.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
                      No vendors found
                    </TableCell>
                  </TableRow>
                ) : (
                  filteredVendors.map((vendor) => (
                    <TableRow key={vendor.id}>
                      <TableCell>
                        <div className="flex items-center gap-3">
                          <div className="h-10 w-10 rounded-full bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center text-white font-semibold">
                            {vendor.business_name?.[0]?.toUpperCase() || "V"}
                          </div>
                          <div>
                            <div className="font-medium">{vendor.business_name || "Unnamed Business"}</div>
                            <div className="text-sm text-muted-foreground">@{vendor.username || "N/A"}</div>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="space-y-1">
                          {vendor.phone_number && (
                            <div className="flex items-center gap-2 text-sm">
                              <Phone className="h-3 w-3 text-muted-foreground" />
                              {vendor.phone_number}
                            </div>
                          )}
                          <div className="flex items-center gap-2 text-sm text-muted-foreground">
                            <Mail className="h-3 w-3" />
                            {vendor.id.slice(0, 8)}...
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>
                        {vendor.is_verified ? (
                          <Badge className="bg-green-500/10 text-green-500 hover:bg-green-500/20">
                            <CheckCircle className="h-3 w-3 mr-1" />
                            Verified
                          </Badge>
                        ) : (
                          <Badge variant="outline" className="text-orange-500 border-orange-500">
                            <XCircle className="h-3 w-3 mr-1" />
                            Unverified
                          </Badge>
                        )}
                      </TableCell>
                      <TableCell>
                        <div className="font-medium">{vendor.total_sales || 0}</div>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center gap-1">
                          <span className="font-medium">{vendor.rating?.toFixed(1) || "0.0"}</span>
                          <span className="text-yellow-500">★</span>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
                          <Calendar className="h-3 w-3" />
                          {formatDate(vendor.created_at)}
                        </div>
                      </TableCell>
                      <TableCell className="text-right">
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="sm">
                              <MoreVertical className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuLabel>Actions</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem onClick={() => router.push(`/shops/${vendor.id}`)}>
                              <Eye className="h-4 w-4 mr-2" />
                              View Store
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => toggleVerification(vendor.id, vendor.is_verified)}>
                              {vendor.is_verified ? (
                                <>
                                  <XCircle className="h-4 w-4 mr-2" />
                                  Unverify
                                </>
                              ) : (
                                <>
                                  <CheckCircle className="h-4 w-4 mr-2" />
                                  Verify
                                </>
                              )}
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/vendors/loading.tsx" isMerged="true"
export default function VendorsLoading() {
  return (
    <div className="flex items-center justify-center h-96">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-amber-500"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/orders/loading.tsx" isMerged="true"
export default function OrdersLoading() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-amber-500"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="flex items-center justify-center h-screen">
      <div className="text-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-amber-500 mx-auto"></div>
        <p className="mt-4 text-gray-600">Loading users...</p>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/010_create_admin_roles.sql" isMerged="true"
-- Create admin_roles table
CREATE TABLE IF NOT EXISTS admin_roles (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL UNIQUE,
  display_name TEXT NOT NULL,
  description TEXT,
  permissions JSONB NOT NULL DEFAULT '{}',
  is_active BOOLEAN DEFAULT true,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Add role_id to admin_users table
ALTER TABLE admin_users ADD COLUMN IF NOT EXISTS role_id UUID REFERENCES admin_roles(id);

-- Insert default admin roles
INSERT INTO admin_roles (name, display_name, description, permissions) VALUES
(
  'root_admin',
  'Root Administrator',
  'Full system access with all permissions',
  '{
    "dashboard": {"view": true, "edit": true},
    "users": {"view": true, "create": true, "edit": true, "delete": true},
    "products": {"view": true, "create": true, "edit": true, "delete": true, "approve": true},
    "orders": {"view": true, "create": true, "edit": true, "delete": true, "manage": true},
    "vendors": {"view": true, "create": true, "edit": true, "delete": true, "approve": true},
    "analytics": {"view": true},
    "promotions": {"view": true, "create": true, "edit": true, "delete": true},
    "reports": {"view": true, "export": true},
    "notifications": {"view": true, "send": true},
    "settings": {"view": true, "edit": true},
    "roles": {"view": true, "create": true, "edit": true, "delete": true}
  }'
),
(
  'sub_admin',
  'Sub Administrator',
  'Limited admin access without critical permissions',
  '{
    "dashboard": {"view": true, "edit": false},
    "users": {"view": true, "create": true, "edit": true, "delete": false},
    "products": {"view": true, "create": true, "edit": true, "delete": false, "approve": true},
    "orders": {"view": true, "create": false, "edit": true, "delete": false, "manage": true},
    "vendors": {"view": true, "create": false, "edit": true, "delete": false, "approve": true},
    "analytics": {"view": true},
    "promotions": {"view": true, "create": true, "edit": true, "delete": false},
    "reports": {"view": true, "export": false},
    "notifications": {"view": true, "send": true},
    "settings": {"view": true, "edit": false},
    "roles": {"view": true, "create": false, "edit": false, "delete": false}
  }'
),
(
  'staff',
  'Staff Member',
  'Basic admin access for daily operations',
  '{
    "dashboard": {"view": true, "edit": false},
    "users": {"view": true, "create": false, "edit": false, "delete": false},
    "products": {"view": true, "create": false, "edit": true, "delete": false, "approve": false},
    "orders": {"view": true, "create": false, "edit": true, "delete": false, "manage": false},
    "vendors": {"view": true, "create": false, "edit": false, "delete": false, "approve": false},
    "analytics": {"view": false},
    "promotions": {"view": true, "create": false, "edit": false, "delete": false},
    "reports": {"view": false, "export": false},
    "notifications": {"view": true, "send": false},
    "settings": {"view": false, "edit": false},
    "roles": {"view": false, "create": false, "edit": false, "delete": false}
  }'
),
(
  'sales_manager',
  'Sales Manager',
  'Manage products, orders, and sales analytics',
  '{
    "dashboard": {"view": true, "edit": false},
    "users": {"view": true, "create": false, "edit": false, "delete": false},
    "products": {"view": true, "create": true, "edit": true, "delete": false, "approve": true},
    "orders": {"view": true, "create": true, "edit": true, "delete": false, "manage": true},
    "vendors": {"view": true, "create": false, "edit": true, "delete": false, "approve": false},
    "analytics": {"view": true},
    "promotions": {"view": true, "create": true, "edit": true, "delete": true},
    "reports": {"view": true, "export": true},
    "notifications": {"view": true, "send": true},
    "settings": {"view": false, "edit": false},
    "roles": {"view": false, "create": false, "edit": false, "delete": false}
  }'
),
(
  'customer_support',
  'Customer Support',
  'Handle customer inquiries and basic order management',
  '{
    "dashboard": {"view": true, "edit": false},
    "users": {"view": true, "create": false, "edit": true, "delete": false},
    "products": {"view": true, "create": false, "edit": false, "delete": false, "approve": false},
    "orders": {"view": true, "create": false, "edit": true, "delete": false, "manage": false},
    "vendors": {"view": true, "create": false, "edit": false, "delete": false, "approve": false},
    "analytics": {"view": false},
    "promotions": {"view": true, "create": false, "edit": false, "delete": false},
    "reports": {"view": false, "export": false},
    "notifications": {"view": true, "send": true},
    "settings": {"view": false, "edit": false},
    "roles": {"view": false, "create": false, "edit": false, "delete": false}
  }'
),
(
  'order_manager',
  'Order Manager',
  'Full order and inventory management access',
  '{
    "dashboard": {"view": true, "edit": false},
    "users": {"view": true, "create": false, "edit": false, "delete": false},
    "products": {"view": true, "create": false, "edit": true, "delete": false, "approve": false},
    "orders": {"view": true, "create": true, "edit": true, "delete": true, "manage": true},
    "vendors": {"view": true, "create": false, "edit": false, "delete": false, "approve": false},
    "analytics": {"view": true},
    "promotions": {"view": false, "create": false, "edit": false, "delete": false},
    "reports": {"view": true, "export": true},
    "notifications": {"view": true, "send": true},
    "settings": {"view": false, "edit": false},
    "roles": {"view": false, "create": false, "edit": false, "delete": false}
  }'
);

-- Create index for faster lookups
CREATE INDEX IF NOT EXISTS idx_admin_users_role_id ON admin_users(role_id);
CREATE INDEX IF NOT EXISTS idx_admin_roles_name ON admin_roles(name);

-- Enable RLS
ALTER TABLE admin_roles ENABLE ROW LEVEL SECURITY;

-- Create RLS policies
CREATE POLICY "Admin roles are viewable by authenticated users" ON admin_roles
  FOR SELECT USING (true);

CREATE POLICY "Admin roles are editable by root admins only" ON admin_roles
  FOR ALL USING (
    EXISTS (
      SELECT 1 FROM admin_users au
      JOIN admin_roles ar ON au.role_id = ar.id
      WHERE au.id = auth.uid() AND ar.name = 'root_admin'
    )
  );
[V0_FILE]sql:file="scripts/010_create_admin_roles_v2.sql" isMerged="true"
-- Drop existing policies if they exist
DROP POLICY IF EXISTS "Admin roles are viewable by authenticated users" ON admin_roles;
DROP POLICY IF EXISTS "Admin roles are editable by root admins only" ON admin_roles;

-- Drop the table if it exists to start fresh
DROP TABLE IF EXISTS admin_roles CASCADE;

-- Create admin_roles table
CREATE TABLE IF NOT EXISTS admin_roles (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL UNIQUE,
  display_name TEXT NOT NULL,
  description TEXT,
  permissions JSONB NOT NULL DEFAULT '{}',
  is_active BOOLEAN DEFAULT true,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Add role_id to admin_users table if it doesn't exist
DO $$ 
BEGIN
  IF NOT EXISTS (
    SELECT 1 FROM information_schema.columns 
    WHERE table_name = 'admin_users' AND column_name = 'role_id'
  ) THEN
    ALTER TABLE admin_users ADD COLUMN role_id UUID REFERENCES admin_roles(id);
  END IF;
END $$;

-- Create indexes for faster lookups
CREATE INDEX IF NOT EXISTS idx_admin_users_role_id ON admin_users(role_id);
CREATE INDEX IF NOT EXISTS idx_admin_roles_name ON admin_roles(name);

-- Enable RLS
ALTER TABLE admin_roles ENABLE ROW LEVEL SECURITY;

-- Simplified RLS policies to avoid infinite recursion
-- Allow all authenticated users to view roles (needed for dropdowns and UI)
CREATE POLICY "Admin roles are viewable by all authenticated users" ON admin_roles
  FOR SELECT 
  USING (auth.uid() IS NOT NULL);

-- Only allow admin users to modify roles (check admin_users table only, no join to admin_roles)
CREATE POLICY "Admin roles are editable by admin users only" ON admin_roles
  FOR ALL 
  USING (
    EXISTS (
      SELECT 1 FROM admin_users 
      WHERE id = auth.uid()
    )
  );

-- Update existing admin users to have root_admin role (optional, for initial setup)
-- This will assign the root_admin role to the first admin user
DO $$ 
DECLARE
  root_role_id UUID;
BEGIN
  -- Get the root_admin role ID
  SELECT id INTO root_role_id FROM admin_roles WHERE name = 'root_admin' LIMIT 1;
  
  -- Update the first admin user to have root_admin role if they don't have a role yet
  IF root_role_id IS NOT NULL THEN
    UPDATE admin_users 
    SET role_id = root_role_id 
    WHERE role_id IS NULL 
    LIMIT 1;
  END IF;
END $$;
[V0_FILE]sql:file="scripts/011_cleanup_admin_roles.sql" isMerged="true"
-- Cleanup script to remove the problematic admin_roles table and fix infinite recursion
-- This script removes the complex role system and uses a simpler text-based approach

-- Drop the foreign key constraint from admin_users
ALTER TABLE IF EXISTS admin_users DROP CONSTRAINT IF EXISTS admin_users_role_id_fkey;

-- Drop the role_id column from admin_users
ALTER TABLE IF EXISTS admin_users DROP COLUMN IF EXISTS role_id;

-- Drop the admin_roles table and its policies
DROP POLICY IF EXISTS "Admin roles are viewable by all authenticated users" ON admin_roles;
DROP POLICY IF EXISTS "Admin roles are editable by admins only" ON admin_roles;
DROP TABLE IF EXISTS admin_roles CASCADE;

-- Update the role column in admin_users to use specific role values
-- The role column already exists from the original admin_users table creation

-- Add a check constraint to ensure only valid roles are used
ALTER TABLE admin_users DROP CONSTRAINT IF EXISTS admin_users_role_check;
ALTER TABLE admin_users ADD CONSTRAINT admin_users_role_check 
  CHECK (role IN ('root_admin', 'sub_admin', 'staff', 'sales_manager', 'customer_support', 'order_manager'));

-- Update any existing admin users to have root_admin role if they don't have a specific role
UPDATE admin_users 
SET role = 'root_admin' 
WHERE role IS NULL OR role = 'admin' OR role NOT IN ('root_admin', 'sub_admin', 'staff', 'sales_manager', 'customer_support', 'order_manager');

-- Make role column NOT NULL
ALTER TABLE admin_users ALTER COLUMN role SET NOT NULL;

-- Add default value for new admin users
ALTER TABLE admin_users ALTER COLUMN role SET DEFAULT 'staff';

-- Add comment
COMMENT ON COLUMN admin_users.role IS 'Admin role: root_admin, sub_admin, staff, sales_manager, customer_support, or order_manager';
[V0_FILE]sql:file="scripts/012_fix_admin_users_password.sql" isMerged="true"
-- Fix admin_users table to make password_hash nullable
-- Since Supabase Auth handles authentication, we don't need to store password hashes

-- Make password_hash nullable
ALTER TABLE public.admin_users 
ALTER COLUMN password_hash DROP NOT NULL;

-- Add comment explaining the change
COMMENT ON COLUMN public.admin_users.password_hash IS 'Deprecated: Password authentication is handled by Supabase Auth. This column is kept for backward compatibility but is no longer required.';

-- Update existing records with null password_hash to empty string if needed
UPDATE public.admin_users 
SET password_hash = '' 
WHERE password_hash IS NULL;
[V0_FILE]sql:file="scripts/013_update_admin_roles_constraint.sql" isMerged="true"
-- Update admin_users role check constraint to support all admin role types
-- This allows for granular role-based access control

-- Drop the old constraint
ALTER TABLE public.admin_users 
DROP CONSTRAINT IF EXISTS admin_users_role_check;

-- Add new constraint with all admin role types
ALTER TABLE public.admin_users 
ADD CONSTRAINT admin_users_role_check 
CHECK (role IN (
  'root_admin',
  'sub_admin', 
  'staff',
  'sales_manager',
  'customer_support',
  'order_manager',
  'admin',
  'moderator'
));

-- Update any existing 'admin' roles to 'root_admin' for clarity
UPDATE public.admin_users 
SET role = 'root_admin' 
WHERE role = 'admin';

COMMENT ON CONSTRAINT admin_users_role_check ON public.admin_users IS 
'Ensures admin users have valid role types for role-based access control';
[V0_FILE]typescript:file="lib/supabase/client.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { createClient as createSupabaseClient } from "@supabase/supabase-js"

let client: ReturnType<typeof createSupabaseClient> | null = null

export function createClient() {
  // Return existing client if already created (singleton pattern)
  if (client) {
    return client
  }

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

if (!supabaseUrl || !supabaseAnonKey) {
    throw new Error("Missing Supabase environment variables. Please check your project settings.")
  }

// Create and cache the client
  client = createSupabaseClient(supabaseUrl, supabaseAnonKey)

return client
}
[V0_FILE]typescript:file="lib/supabase/server.ts" isEdit="true" isMerged="true"
import { createClient as createSupabaseClient } from "@supabase/supabase-js"

/**
 * Creates a Supabase server client for use in Server Components and Server Actions.
 * This is the standard way to create a Supabase client on the server side.
 */
export async function createClient() {
  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

if (!supabaseUrl || !supabaseKey) {
    throw new Error("Missing Supabase environment variables")
  }

return createSupabaseClient(supabaseUrl, supabaseKey)
}

/**
 * Creates a Supabase admin client with service role key for admin operations.
 * Use this for operations that require elevated permissions.
 */
export async function getAdminClient() {
  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
  const serviceRoleKey = process.env.SUPABASE_SERVICE_ROLE_KEY

if (!supabaseUrl || !serviceRoleKey) {
    throw new Error("Missing Supabase admin environment variables")
  }

return createSupabaseClient(supabaseUrl, serviceRoleKey)
}
[V0_FILE]typescript:file="lib/generate-sku.ts" isMerged="true"
import { createClient } from "@/lib/supabase/client"

/**
 * Generates a unique SKU code for products
 * Format: {CATEGORY_PREFIX}-{BRAND_PREFIX}-{RANDOM}
 * Example: ELEC-SONY-A1B2C3
 */
export async function generateSKU(category?: string, brand?: string): Promise<string> {
  // Generate category prefix (first 4 letters, uppercase)
  const categoryPrefix = category
    ? category
        .replace(/[^a-zA-Z]/g, "")
        .substring(0, 4)
        .toUpperCase()
    : "PROD"

// Generate brand prefix (first 4 letters, uppercase)
  const brandPrefix = brand
    ? brand
        .replace(/[^a-zA-Z]/g, "")
        .substring(0, 4)
        .toUpperCase()
    : "GEN"

// Generate random alphanumeric code (6 characters)
  const randomCode = generateRandomCode(6)

// Combine to create SKU
  const sku = `${categoryPrefix}-${brandPrefix}-${randomCode}`

// Check if SKU already exists in database
  const isUnique = await checkSKUUniqueness(sku)

if (!isUnique) {
    // If not unique, recursively generate a new one
    return generateSKU(category, brand)
  }

return sku
}

/**
 * Generates a simple SKU without category/brand prefixes
 * Format: PRD-{TIMESTAMP}-{RANDOM}
 * Example: PRD-1704067200-A1B2C3
 */
export function generateSimpleSKU(): string {
  const timestamp = Date.now().toString().slice(-8) // Last 8 digits of timestamp
  const randomCode = generateRandomCode(6)
  return `PRD-${timestamp}-${randomCode}`
}

/**
 * Generates a random alphanumeric code
 */
function generateRandomCode(length: number): string {
  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
  let result = ""
  for (let i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * characters.length))
  }
  return result
}

/**
 * Checks if a SKU already exists in the database
 */
async function checkSKUUniqueness(sku: string): Promise<boolean> {
  try {
    const supabase = createClient()
    const { data, error } = await supabase.from("products").select("id").eq("sku", sku).maybeSingle()

if (error) {
      console.error("Error checking SKU uniqueness:", error)
      return true // Assume unique if there's an error
    }

return data === null // Returns true if no product found with this SKU
  } catch (error) {
    console.error("Error checking SKU uniqueness:", error)
    return true // Assume unique if there's an error
  }
}

/**
 * Validates SKU format
 */
export function validateSKU(sku: string): boolean {
  // SKU should be at least 3 characters and contain only alphanumeric characters and hyphens
  const skuRegex = /^[A-Z0-9-]{3,}$/
  return skuRegex.test(sku)
}
[V0_FILE]typescript:file="lib/youtube-utils.ts" isMerged="true"
/**
 * Utility functions for handling YouTube video URLs
 */

/**
 * Extract YouTube video ID from various URL formats
 * Supports:
 * - https://www.youtube.com/watch?v=VIDEO_ID
 * - https://youtu.be/VIDEO_ID
 * - https://www.youtube.com/embed/VIDEO_ID
 * - https://m.youtube.com/watch?v=VIDEO_ID
 */
export function extractYouTubeVideoId(url: string): string | null {
  if (!url) return null

try {
    const urlObj = new URL(url)

// Handle youtu.be short URLs
    if (urlObj.hostname === "youtu.be") {
      return urlObj.pathname.slice(1).split("?")[0]
    }

// Handle youtube.com URLs
    if (urlObj.hostname.includes("youtube.com")) {
      // Check for /watch?v= format
      const videoId = urlObj.searchParams.get("v")
      if (videoId) return videoId

// Check for /embed/ format
      const embedMatch = urlObj.pathname.match(/\/embed\/([^/?]+)/)
      if (embedMatch) return embedMatch[1]

// Check for /v/ format
      const vMatch = urlObj.pathname.match(/\/v\/([^/?]+)/)
      if (vMatch) return vMatch[1]
    }

return null
  } catch (error) {
    return null
  }
}

/**
 * Validate if a URL is a valid YouTube URL
 */
export function isValidYouTubeUrl(url: string): boolean {
  return extractYouTubeVideoId(url) !== null
}

/**
 * Get YouTube embed URL from video ID
 */
export function getYouTubeEmbedUrl(videoId: string): string {
  return `https://www.youtube.com/embed/${videoId}`
}

/**
 * Get YouTube thumbnail URL from video ID
 */
export function getYouTubeThumbnail(
  videoId: string,
  quality: "default" | "hq" | "mq" | "sd" | "maxres" = "hq",
): string {
  const qualityMap = {
    default: "default",
    mq: "mqdefault",
    hq: "hqdefault",
    sd: "sddefault",
    maxres: "maxresdefault",
  }

return `https://img.youtube.com/vi/${videoId}/${qualityMap[quality]}.jpg`
}
[V0_FILE]typescriptreact:file="app/admin/products/inhouse/add/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Upload } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { createClient } from "@/lib/supabase/client"
import { generateSKU, generateSimpleSKU } from "@/lib/generate-sku"
import { extractYouTubeVideoId, getYouTubeEmbedUrl } from "@/lib/youtube-utils"

type Category = {
  id: string
  name: string
  slug: string
  is_active: boolean
}

type Brand = {
  id: string
  name: string
  slug: string
  is_active: boolean
}

export default function AddInhouseProductPage() {
  const router = useRouter()
  const { toast } = useToast()
  const [loading, setLoading] = useState(false)
  const [generatingSKU, setGeneratingSKU] = useState(false)
  const [images, setImages] = useState<string[]>([])
  const [newImageUrl, setNewImageUrl] = useState("")
  const [categories, setCategories] = useState<Category[]>([])
  const [brands, setBrands] = useState<Brand[]>([])
  const [fetchingData, setFetchingData] = useState(true)
  const [youtubeVideoId, setYoutubeVideoId] = useState<string | null>(null)

const [formData, setFormData] = useState({
    // Basic Info
    name: "",
    description: "",

// General Setup
    category: "",
    subCategory: "",
    subSubCategory: "",
    brand: "",
    productType: "physical",
    sku: "",
    unit: "kg",

// Pricing
    unitPrice: "",
    minimumOrderQty: "1",
    currentStock: "0",
    discountType: "flat",
    discountAmount: "0",
    taxAmount: "0",
    taxType: "included",
    shippingCost: "0",
    shippingCostMultiply: false,

// Media
    thumbnailUrl: "",
    videoUrl: "",

// Variations
    colors: [] as string[],
    attributes: [] as { name: string; values: string[] }[],

// SEO
    metaTitle: "",
    metaDescription: "",
    metaImageUrl: "",
    isIndexed: true,
    noFollow: false,
    noImageIndex: false,
    noArchive: false,
    noSnippet: false,
    maxSnippet: "",
    maxVideoPreview: "",
    maxImagePreview: "large",
  })

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

const fetchCategoriesAndBrands = async () => {
    try {
      const supabase = createClient()

// Fetch categories
      const { data: categoriesData, error: categoriesError } = await supabase
        .from("categories")
        .select("id, name, slug, is_active")
        .eq("is_active", true)
        .order("name")

if (categoriesError) throw categoriesError

// Fetch brands
      const { data: brandsData, error: brandsError } = await supabase
        .from("brands")
        .select("id, name, slug, is_active")
        .eq("is_active", true)
        .order("name")

if (brandsError) throw brandsError

setCategories(categoriesData || [])
      setBrands(brandsData || [])
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "Failed to fetch categories and brands",
        variant: "destructive",
      })
    } finally {
      setFetchingData(false)
    }
  }

setFormData({ ...formData, sku })

const handleAddImage = () => {
    if (!newImageUrl.trim()) {
      toast({
        title: "Error",
        description: "Please enter a valid image URL",
        variant: "destructive",
      })
      return
    }

// Check if URL is already added
    if (images.includes(newImageUrl.trim())) {
      toast({
        title: "Error",
        description: "This image URL is already added",
        variant: "destructive",
      })
      return
    }

setImages([...images, newImageUrl.trim()])
    setNewImageUrl("")
    toast({
      title: "Success",
      description: "Image added successfully",
    })
  }

const handleRemoveImage = (index: number) => {
    setImages(images.filter((_, i) => i !== index))
    toast({
      title: "Success",
      description: "Image removed successfully",
    })
  }

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

try {
      const supabase = createClient()

const stockValue = Number.parseInt(formData.currentStock)

const { data, error } = await supabase
        .from("products")
        .insert({
          name: formData.name,
          description: formData.description,
          category: formData.category,
          sub_category: formData.subCategory,
          sub_sub_category: formData.subSubCategory,
          brand: formData.brand,
          product_type: formData.productType,
          sku: formData.sku,
          unit: formData.unit,
          price: Number.parseFloat(formData.unitPrice),
          minimum_order_qty: Number.parseInt(formData.minimumOrderQty),
          stock_quantity: stockValue,
          current_stock: stockValue,
          discount_type: formData.discountType,
          discount_amount: Number.parseFloat(formData.discountAmount),
          tax_amount: Number.parseFloat(formData.taxAmount),
          tax_type: formData.taxType,
          shipping_cost: Number.parseFloat(formData.shippingCost),
          shipping_cost_multiply: formData.shippingCostMultiply,
          thumbnail_url: formData.thumbnailUrl,
          additional_images: images,
          video_url: formData.videoUrl,
          colors: formData.colors,
          attributes: formData.attributes,
          meta_title: formData.metaTitle,
          meta_description: formData.metaDescription,
          meta_image_url: formData.metaImageUrl,
          is_indexed: formData.isIndexed,
          no_follow: formData.noFollow,
          no_image_index: formData.noImageIndex,
          no_archive: formData.noArchive,
          no_snippet: formData.noSnippet,
          max_snippet: formData.maxSnippet ? Number.parseInt(formData.maxSnippet) : null,
          max_video_preview: formData.maxVideoPreview,
          max_image_preview: formData.maxImagePreview,
          is_inhouse: true,
          is_active: true,
          approval_status: "approved",
        })
        .select()
        .single()

if (error) throw error

toast({
        title: "Success",
        description: "In-house product added successfully",
      })

router.push("/admin/products/inhouse/list")
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "Failed to add product",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const handleVideoUrlChange = (url: string) => {
    setFormData({ ...formData, videoUrl: url })

// Extract and validate YouTube video ID
    const videoId = extractYouTubeVideoId(url)
    setYoutubeVideoId(videoId)

if (url && !videoId) {
      toast({
        title: "Invalid YouTube URL",
        description: "Please enter a valid YouTube video URL",
        variant: "destructive",
      })
    }
  }

return (
    <div className="p-6 max-w-6xl">
      <div className="mb-6">
        <h1 className="text-2xl font-bold">Add New In-house Product</h1>
        <p className="text-muted-foreground">Create a new product for your store</p>
      </div>

<form onSubmit={handleSubmit} className="space-y-6">
        <Tabs defaultValue="english" className="w-full">
          <TabsList>
            <TabsTrigger value="english">English (EN)</TabsTrigger>
            <TabsTrigger value="arabic">Arabic (AE)</TabsTrigger>
          </TabsList>

<TabsContent value="english" className="space-y-6">
            {/* Basic Information */}
            <Card>
              <CardHeader>
                <CardTitle>Basic Information</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <Label htmlFor="name">Product Name *</Label>
                  <Input
                    id="name"
                    value={formData.name}
                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                    placeholder="New Product"
                    required
                  />
                </div>

<div>
                  <Label htmlFor="description">Overview (EN) *</Label>
                  <Textarea
                    id="description"
                    value={formData.description}
                    onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                    placeholder="Product description..."
                    rows={6}
                    required
                  />
                </div>
              </CardContent>
            </Card>

{/* General Setup */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <span>General Setup</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div>
                    <Label htmlFor="category">Category *</Label>
                    <Select
                      value={formData.category}
                      onValueChange={(value) => setFormData({ ...formData, category: value })}
                      disabled={fetchingData}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder={fetchingData ? "Loading..." : "Select category"} />
                      </SelectTrigger>
                      <SelectContent>
                        {categories.map((category) => (
                          <SelectItem key={category.id} value={category.slug}>
                            {category.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

<div>
                    <Label htmlFor="subCategory">Sub Category</Label>
                    <Select
                      value={formData.subCategory}
                      onValueChange={(value) => setFormData({ ...formData, subCategory: value })}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Select Sub Category" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="phones">Phones</SelectItem>
                        <SelectItem value="laptops">Laptops</SelectItem>
                        <SelectItem value="accessories">Accessories</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div>
                    <Label htmlFor="brand">Brand *</Label>
                    <Select
                      value={formData.brand}
                      onValueChange={(value) => setFormData({ ...formData, brand: value })}
                      disabled={fetchingData}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder={fetchingData ? "Loading..." : "Select Brand"} />
                      </SelectTrigger>
                      <SelectContent>
                        {brands.map((brand) => (
                          <SelectItem key={brand.id} value={brand.slug}>
                            {brand.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div>
                    <Label htmlFor="productType">Product Type *</Label>
                    <Select
                      value={formData.productType}
                      onValueChange={(value) => setFormData({ ...formData, productType: value })}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="physical">Physical</SelectItem>
                        <SelectItem value="digital">Digital</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div>
                    <Label htmlFor="sku">Product SKU *</Label>
                    <div className="flex gap-2">
                      <Input
                        id="sku"
                        value={formData.sku}
                        onChange={(e) => setFormData({ ...formData, sku: e.target.value })}
                        placeholder="Ex: 161183"
                        required
                      />
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={handleGenerateSKU}
                        disabled={generatingSKU}
                      >
                        {generatingSKU ? "Generating..." : "Generate Code"}
                      </Button>
                    </div>
                  </div>

<div>
                    <Label htmlFor="unit">Unit</Label>
                    <Select value={formData.unit} onValueChange={(value) => setFormData({ ...formData, unit: value })}>
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="kg">kg</SelectItem>
                        <SelectItem value="piece">Piece</SelectItem>
                        <SelectItem value="liter">Liter</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Pricing & Others */}
            <Card>
              <CardHeader>
                <CardTitle>Pricing & Others</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <div>
                    <Label htmlFor="unitPrice">Unit Price (AED) *</Label>
                    <Input
                      id="unitPrice"
                      type="number"
                      step="0.01"
                      value={formData.unitPrice}
                      onChange={(e) => setFormData({ ...formData, unitPrice: e.target.value })}
                      placeholder="Unit price"
                      required
                    />
                  </div>

<div>
                    <Label htmlFor="minimumOrderQty">Minimum Order Qty *</Label>
                    <Input
                      id="minimumOrderQty"
                      type="number"
                      value={formData.minimumOrderQty}
                      onChange={(e) => setFormData({ ...formData, minimumOrderQty: e.target.value })}
                      placeholder="1"
                      required
                    />
                  </div>

<div>
                    <Label htmlFor="currentStock">Current Stock Qty *</Label>
                    <Input
                      id="currentStock"
                      type="number"
                      value={formData.currentStock}
                      onChange={(e) => setFormData({ ...formData, currentStock: e.target.value })}
                      placeholder="0"
                      required
                    />
                  </div>

<div>
                    <Label htmlFor="discountType">Discount Type</Label>
                    <Select
                      value={formData.discountType}
                      onValueChange={(value) => setFormData({ ...formData, discountType: value })}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="flat">Flat</SelectItem>
                        <SelectItem value="percentage">Percentage</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <div>
                    <Label htmlFor="discountAmount">Discount Amount (AED)</Label>
                    <Input
                      id="discountAmount"
                      type="number"
                      step="0.01"
                      value={formData.discountAmount}
                      onChange={(e) => setFormData({ ...formData, discountAmount: e.target.value })}
                      placeholder="0"
                    />
                  </div>

<div>
                    <Label htmlFor="taxAmount">Tax Amount (%)</Label>
                    <Input
                      id="taxAmount"
                      type="number"
                      step="0.01"
                      value={formData.taxAmount}
                      onChange={(e) => setFormData({ ...formData, taxAmount: e.target.value })}
                      placeholder="0"
                    />
                  </div>

<div>
                    <Label htmlFor="taxType">Tax Calculation</Label>
                    <Select
                      value={formData.taxType}
                      onValueChange={(value) => setFormData({ ...formData, taxType: value })}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="included">Include with product</SelectItem>
                        <SelectItem value="excluded">Exclude with product</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div>
                    <Label htmlFor="shippingCost">Shipping Cost (AED)</Label>
                    <Input
                      id="shippingCost"
                      type="number"
                      step="0.01"
                      value={formData.shippingCost}
                      onChange={(e) => setFormData({ ...formData, shippingCost: e.target.value })}
                      placeholder="0"
                    />
                  </div>
                </div>

<div className="flex items-center gap-2">
                  <Switch
                    checked={formData.shippingCostMultiply}
                    onCheckedChange={(checked) => setFormData({ ...formData, shippingCostMultiply: checked })}
                  />
                  <Label>Shipping Cost Multiply With Quantity</Label>
                </div>
              </CardContent>
            </Card>

{/* Product Images */}
            <Card>
              <CardHeader>
                <CardTitle>Product Images</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <Label htmlFor="thumbnailUrl">Product Thumbnail *</Label>
                  <p className="text-sm text-muted-foreground mb-2">Ratio 1:1 (500 x 500 px)</p>
                  <div className="border-2 border-dashed rounded-lg p-8 text-center">
                    <Upload className="mx-auto h-12 w-12 text-muted-foreground mb-2" />
                    <p className="text-sm text-muted-foreground mb-2">Upload Image</p>
                    <Input
                      id="thumbnailUrl"
                      type="url"
                      value={formData.thumbnailUrl}
                      onChange={(e) => setFormData({ ...formData, thumbnailUrl: e.target.value })}
                      placeholder="Image URL or upload"
                      className="max-w-md mx-auto"
                    />
                  </div>
                </div>

<div>
                  <Label>Upload Additional Images</Label>
                  <p className="text-sm text-muted-foreground mb-2">
                    Ratio 1:1 (500 x 500 px) - Add multiple images by URL or upload
                  </p>

{/* Add Image URL Input */}
                  <div className="flex gap-2 mb-4">
                    <Input
                      type="url"
                      value={newImageUrl}
                      onChange={(e) => setNewImageUrl(e.target.value)}
                      placeholder="Enter image URL"
                      onKeyDown={(e) => {
                        if (e.key === "Enter") {
                          e.preventDefault()
                          handleAddImage()
                        }
                      }}
                    />
                    <Button type="button" onClick={handleAddImage} variant="outline">
                      Add Image
                    </Button>
                  </div>

{/* Display Added Images */}
                  {images.length > 0 && (
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                      {images.map((imageUrl, index) => (
                        <div key={index} className="relative group border rounded-lg overflow-hidden">
                          <img
                            src={imageUrl || "/placeholder.svg"}
                            alt={`Additional ${index + 1}`}
                            className="w-full h-32 object-cover"
                            onError={(e) => {
                              e.currentTarget.src = "/placeholder.svg?height=128&width=128"
                            }}
                          />
                          <Button
                            type="button"
                            variant="destructive"
                            size="sm"
                            className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity"
                            onClick={() => handleRemoveImage(index)}
                          >
                            Remove
                          </Button>
                          <p className="text-xs p-2 truncate bg-background/80">{imageUrl}</p>
                        </div>
                      ))}
                    </div>
                  )}

{images.length === 0 && (
                    <div className="border-2 border-dashed rounded-lg p-8 text-center">
                      <Upload className="mx-auto h-12 w-12 text-muted-foreground mb-2" />
                      <p className="text-sm text-muted-foreground">No additional images added yet</p>
                      <p className="text-xs text-muted-foreground mt-1">Add images using the URL input above</p>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>

{/* Product Video */}
            <Card>
              <CardHeader>
                <CardTitle>Product Video</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <Label htmlFor="videoUrl">YouTube Video Link</Label>
                  <p className="text-sm text-muted-foreground mb-2">
                    Paste a YouTube video URL (e.g., https://www.youtube.com/watch?v=... or https://youtu.be/...)
                  </p>
                  <Input
                    id="videoUrl"
                    type="url"
                    value={formData.videoUrl}
                    onChange={(e) => handleVideoUrlChange(e.target.value)}
                    placeholder="Ex: https://www.youtube.com/watch?v=dQw4w9WgXcQ"
                  />
                </div>

{youtubeVideoId && (
                  <div className="border rounded-lg overflow-hidden">
                    <div className="bg-muted p-2 text-sm font-medium">Video Preview</div>
                    <div className="aspect-video">
                      <iframe
                        src={getYouTubeEmbedUrl(youtubeVideoId)}
                        title="YouTube video preview"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowFullScreen
                        className="w-full h-full"
                      />
                    </div>
                  </div>
                )}

{formData.videoUrl && !youtubeVideoId && (
                  <div className="border border-destructive rounded-lg p-4 text-sm text-destructive">
                    Invalid YouTube URL. Please check the URL format.
                  </div>
                )}
              </CardContent>
            </Card>

{/* SEO Section */}
            <Card>
              <CardHeader>
                <CardTitle>SEO Section</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <Label htmlFor="metaTitle">Meta Title</Label>
                  <Input
                    id="metaTitle"
                    value={formData.metaTitle}
                    onChange={(e) => setFormData({ ...formData, metaTitle: e.target.value })}
                    placeholder="Meta Title"
                  />
                </div>

<div>
                  <Label htmlFor="metaDescription">Meta Description</Label>
                  <Textarea
                    id="metaDescription"
                    value={formData.metaDescription}
                    onChange={(e) => setFormData({ ...formData, metaDescription: e.target.value })}
                    placeholder="Meta Description"
                    rows={3}
                  />
                </div>

<div className="grid grid-cols-2 gap-4">
                  <div className="flex items-center gap-2">
                    <Switch
                      checked={formData.isIndexed}
                      onCheckedChange={(checked) => setFormData({ ...formData, isIndexed: checked })}
                    />
                    <Label>Index</Label>
                  </div>

<div className="flex items-center gap-2">
                    <Switch
                      checked={formData.noFollow}
                      onCheckedChange={(checked) => setFormData({ ...formData, noFollow: checked })}
                    />
                    <Label>No Follow</Label>
                  </div>

<div className="flex items-center gap-2">
                    <Switch
                      checked={formData.noImageIndex}
                      onCheckedChange={(checked) => setFormData({ ...formData, noImageIndex: checked })}
                    />
                    <Label>No Image Index</Label>
                  </div>

<div className="flex items-center gap-2">
                    <Switch
                      checked={formData.noArchive}
                      onCheckedChange={(checked) => setFormData({ ...formData, noArchive: checked })}
                    />
                    <Label>No Archive</Label>
                  </div>

<div className="flex items-center gap-2">
                    <Switch
                      checked={formData.noSnippet}
                      onCheckedChange={(checked) => setFormData({ ...formData, noSnippet: checked })}
                    />
                    <Label>No Snippet</Label>
                  </div>
                </div>

<div className="grid grid-cols-3 gap-4">
                  <div>
                    <Label htmlFor="maxSnippet">Max Snippet</Label>
                    <Input
                      id="maxSnippet"
                      type="number"
                      value={formData.maxSnippet}
                      onChange={(e) => setFormData({ ...formData, maxSnippet: e.target.value })}
                      placeholder="-1"
                    />
                  </div>

<div>
                    <Label htmlFor="maxVideoPreview">Max Video Preview</Label>
                    <Input
                      id="maxVideoPreview"
                      value={formData.maxVideoPreview}
                      onChange={(e) => setFormData({ ...formData, maxVideoPreview: e.target.value })}
                      placeholder="-1"
                    />
                  </div>

<div>
                    <Label htmlFor="maxImagePreview">Max Image Preview</Label>
                    <Select
                      value={formData.maxImagePreview}
                      onValueChange={(value) => setFormData({ ...formData, maxImagePreview: value })}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="large">Large</SelectItem>
                        <SelectItem value="standard">Standard</SelectItem>
                        <SelectItem value="none">None</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="arabic">
            <Card>
              <CardContent className="py-8 text-center text-muted-foreground">
                Arabic translation fields would go here
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>

<div className="flex gap-4">
          <Button type="button" variant="outline" onClick={() => router.back()}>
            Cancel
          </Button>
          <Button type="submit" disabled={loading}>
            {loading ? "Saving..." : "Submit"}
          </Button>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/products/inhouse/edit/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ArrowLeft, X, Plus } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { createClient } from "@/lib/supabase/client"
import { generateSKU, generateSimpleSKU } from "@/lib/generate-sku"
import { extractYouTubeVideoId, isValidYouTubeUrl, getYouTubeEmbedUrl } from "@/lib/youtube-utils"

type Category = {
  id: string
  name: string
  slug: string
  is_active: boolean
}

type Brand = {
  id: string
  name: string
  slug: string
  is_active: boolean
}

export default function EditInhouseProductPage() {
  const params = useParams()
  const router = useRouter()
  const { toast } = useToast()
  const [loading, setLoading] = useState(false)
  const [fetching, setFetching] = useState(true)
  const [generatingSKU, setGeneratingSKU] = useState(false)
  const [images, setImages] = useState<string[]>([])
  const [newImageUrl, setNewImageUrl] = useState("")
  const [youtubeVideoId, setYoutubeVideoId] = useState<string | null>(null)
  const [youtubeError, setYoutubeError] = useState<string>("")

const [categories, setCategories] = useState<Category[]>([])
  const [brands, setBrands] = useState<Brand[]>([])

const [formData, setFormData] = useState({
    name: "",
    description: "",
    category: "",
    subCategory: "",
    subSubCategory: "",
    brand: "",
    productType: "physical",
    sku: "",
    unit: "kg",
    unitPrice: "",
    minimumOrderQty: "1",
    currentStock: "0",
    discountType: "flat",
    discountAmount: "0",
    taxAmount: "0",
    taxType: "included",
    shippingCost: "0",
    shippingCostMultiply: false,
    thumbnailUrl: "",
    videoUrl: "",
    colors: [] as string[],
    attributes: [] as { name: string; values: string[] }[],
    metaTitle: "",
    metaDescription: "",
    metaImageUrl: "",
    isIndexed: true,
    noFollow: false,
    noImageIndex: false,
    noArchive: false,
    noSnippet: false,
    maxSnippet: "",
    maxVideoPreview: "",
    maxImagePreview: "large",
  })

useEffect(() => {
    fetchProduct()
    fetchCategoriesAndBrands()
  }, [params.id])

useEffect(() => {
    if (formData.videoUrl) {
      if (isValidYouTubeUrl(formData.videoUrl)) {
        const videoId = extractYouTubeVideoId(formData.videoUrl)
        setYoutubeVideoId(videoId)
        setYoutubeError("")
      } else if (formData.videoUrl.trim() !== "") {
        setYoutubeVideoId(null)
        setYoutubeError("Invalid YouTube URL. Please enter a valid YouTube video link.")
      } else {
        setYoutubeVideoId(null)
        setYoutubeError("")
      }
    } else {
      setYoutubeVideoId(null)
      setYoutubeError("")
    }
  }, [formData.videoUrl])

const fetchCategoriesAndBrands = async () => {
    try {
      const supabase = createClient()

const { data: categoriesData, error: categoriesError } = await supabase
        .from("categories")
        .select("id, name, slug, is_active")
        .eq("is_active", true)
        .order("name")

if (categoriesError) throw categoriesError

const { data: brandsData, error: brandsError } = await supabase
        .from("brands")
        .select("id, name, slug, is_active")
        .eq("is_active", true)
        .order("name")

if (brandsError) throw brandsError

setCategories(categoriesData || [])
      setBrands(brandsData || [])
    } catch (error: any) {
      console.error("[v0] Error fetching categories and brands:", error)
    }
  }

const fetchProduct = async () => {
    try {
      setFetching(true)
      const supabase = createClient()

const { data, error } = await supabase.from("products").select("*").eq("id", params.id).single()

if (error) throw error

setFormData({
        name: data.name || "",
        description: data.description || "",
        category: data.category || "",
        subCategory: data.sub_category || "",
        subSubCategory: data.sub_sub_category || "",
        brand: data.brand || "",
        productType: data.product_type || "physical",
        sku: data.sku || "",
        unit: data.unit || "kg",
        unitPrice: data.price?.toString() || "",
        minimumOrderQty: data.minimum_order_qty?.toString() || "1",
        currentStock: data.current_stock?.toString() || "0",
        discountType: data.discount_type || "flat",
        discountAmount: data.discount_amount?.toString() || "0",
        taxAmount: data.tax_amount?.toString() || "0",
        taxType: data.tax_type || "included",
        shippingCost: data.shipping_cost?.toString() || "0",
        shippingCostMultiply: data.shipping_cost_multiply || false,
        thumbnailUrl: data.thumbnail_url || "",
        videoUrl: data.video_url || "",
        colors: data.colors || [],
        attributes: data.attributes || [],
        metaTitle: data.meta_title || "",
        metaDescription: data.meta_description || "",
        metaImageUrl: data.meta_image_url || "",
        isIndexed: data.is_indexed ?? true,
        noFollow: data.no_follow || false,
        noImageIndex: data.no_image_index || false,
        noArchive: data.no_archive || false,
        noSnippet: data.no_snippet || false,
        maxSnippet: data.max_snippet?.toString() || "",
        maxVideoPreview: data.max_video_preview || "",
        maxImagePreview: data.max_image_preview || "large",
      })

setImages(data.additional_images || [])
    } catch (err: any) {
      toast({
        title: "Error",
        description: err.message || "Failed to fetch product",
        variant: "destructive",
      })
      router.push("/admin/products/inhouse/list")
    } finally {
      setFetching(false)
    }
  }

const handleGenerateSKU = async () => {
    setGeneratingSKU(true)
    try {
      const sku =
        formData.category && formData.brand ? await generateSKU(formData.category, formData.brand) : generateSimpleSKU()

setFormData({ ...formData, sku })

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

try {
      const supabase = createClient()

const stockValue = Number.parseInt(formData.currentStock)

const { error } = await supabase
        .from("products")
        .update({
          name: formData.name,
          description: formData.description,
          category: formData.category,
          sub_category: formData.subCategory,
          sub_sub_category: formData.subSubCategory,
          brand: formData.brand,
          product_type: formData.productType,
          sku: formData.sku,
          unit: formData.unit,
          price: Number.parseFloat(formData.unitPrice),
          minimum_order_qty: Number.parseInt(formData.minimumOrderQty),
          stock_quantity: stockValue,
          current_stock: stockValue,
          discount_type: formData.discountType,
          discount_amount: Number.parseFloat(formData.discountAmount),
          tax_amount: Number.parseFloat(formData.taxAmount),
          tax_type: formData.taxType,
          shipping_cost: Number.parseFloat(formData.shippingCost),
          shipping_cost_multiply: formData.shippingCostMultiply,
          thumbnail_url: formData.thumbnailUrl,
          additional_images: images,
          video_url: formData.videoUrl,
          colors: formData.colors,
          attributes: formData.attributes,
          meta_title: formData.metaTitle,
          meta_description: formData.metaDescription,
          meta_image_url: formData.metaImageUrl,
          is_indexed: formData.isIndexed,
          no_follow: formData.noFollow,
          no_image_index: formData.noImageIndex,
          no_archive: formData.noArchive,
          no_snippet: formData.noSnippet,
          max_snippet: formData.maxSnippet ? Number.parseInt(formData.maxSnippet) : null,
          max_video_preview: formData.maxVideoPreview,
          max_image_preview: formData.maxImagePreview,
          updated_at: new Date().toISOString(),
        })
        .eq("id", params.id)

if (error) throw error

toast({
        title: "Success",
        description: "Product updated successfully",
      })

router.push("/admin/products/inhouse/list")
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "Failed to update product",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const handleAddImage = () => {
    if (newImageUrl.trim()) {
      setImages([...images, newImageUrl.trim()])
      setNewImageUrl("")
      toast({
        title: "Image Added",
        description: "Image has been added to the gallery",
      })
    }
  }

const handleRemoveImage = (index: number) => {
    setImages(images.filter((_, i) => i !== index))
    toast({
      title: "Image Removed",
      description: "Image has been removed from the gallery",
    })
  }

if (fetching) {
    return (
      <div className="p-6">
        <p className="text-muted-foreground">Loading product...</p>
      </div>
    )
  }

return (
    <div className="p-6 max-w-6xl">
      <div className="mb-6 flex items-center gap-4">
        <Button variant="ghost" size="sm" onClick={() => router.back()}>
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back
        </Button>
        <div>
          <h1 className="text-2xl font-bold">Edit Product</h1>
          <p className="text-muted-foreground">Update product information</p>
        </div>
      </div>

<TabsContent value="english" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Basic Information</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <Label htmlFor="name">Product Name *</Label>
                  <Input
                    id="name"
                    value={formData.name}
                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                    placeholder="New Product"
                    required
                  />
                </div>

<Card>
              <CardHeader>
                <CardTitle>General Setup</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div>
                    <Label htmlFor="category">Category *</Label>
                    <Select
                      value={formData.category}
                      onValueChange={(value) => setFormData({ ...formData, category: value })}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Select category" />
                      </SelectTrigger>
                      <SelectContent>
                        {categories.map((category) => (
                          <SelectItem key={category.id} value={category.slug}>
                            {category.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

<div>
                    <Label htmlFor="brand">Brand *</Label>
                    <Select
                      value={formData.brand}
                      onValueChange={(value) => setFormData({ ...formData, brand: value })}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Select Brand" />
                      </SelectTrigger>
                      <SelectContent>
                        {brands.map((brand) => (
                          <SelectItem key={brand.id} value={brand.slug}>
                            {brand.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

<div>
                    <Label htmlFor="sku">Product SKU *</Label>
                    <div className="flex gap-2">
                      <Input
                        id="sku"
                        value={formData.sku}
                        onChange={(e) => setFormData({ ...formData, sku: e.target.value })}
                        placeholder="Ex: 161183"
                        required
                      />
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={handleGenerateSKU}
                        disabled={generatingSKU}
                      >
                        {generatingSKU ? "Generating..." : "Generate"}
                      </Button>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Pricing & Stock</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <div>
                    <Label htmlFor="unitPrice">Unit Price (AED) *</Label>
                    <Input
                      id="unitPrice"
                      type="number"
                      step="0.01"
                      value={formData.unitPrice}
                      onChange={(e) => setFormData({ ...formData, unitPrice: e.target.value })}
                      required
                    />
                  </div>

<div>
                    <Label htmlFor="currentStock">Current Stock *</Label>
                    <Input
                      id="currentStock"
                      type="number"
                      value={formData.currentStock}
                      onChange={(e) => setFormData({ ...formData, currentStock: e.target.value })}
                      required
                    />
                  </div>

<div>
                    <Label htmlFor="discountAmount">Discount Amount</Label>
                    <Input
                      id="discountAmount"
                      type="number"
                      step="0.01"
                      value={formData.discountAmount}
                      onChange={(e) => setFormData({ ...formData, discountAmount: e.target.value })}
                    />
                  </div>

<div>
                    <Label htmlFor="shippingCost">Shipping Cost</Label>
                    <Input
                      id="shippingCost"
                      type="number"
                      step="0.01"
                      value={formData.shippingCost}
                      onChange={(e) => setFormData({ ...formData, shippingCost: e.target.value })}
                    />
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Product Images</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <Label htmlFor="thumbnailUrl">Product Thumbnail URL</Label>
                  <Input
                    id="thumbnailUrl"
                    type="url"
                    value={formData.thumbnailUrl}
                    onChange={(e) => setFormData({ ...formData, thumbnailUrl: e.target.value })}
                    placeholder="Image URL"
                  />
                </div>

<div>
                  <Label>Additional Images</Label>
                  <div className="flex gap-2 mt-2">
                    <Input
                      type="url"
                      value={newImageUrl}
                      onChange={(e) => setNewImageUrl(e.target.value)}
                      placeholder="Enter image URL"
                      onKeyDown={(e) => {
                        if (e.key === "Enter") {
                          e.preventDefault()
                          handleAddImage()
                        }
                      }}
                    />
                    <Button type="button" onClick={handleAddImage} size="sm">
                      <Plus className="h-4 w-4 mr-1" />
                      Add Image
                    </Button>
                  </div>

{images.length > 0 && (
                    <div className="grid grid-cols-4 gap-4 mt-4">
                      {images.map((img, index) => (
                        <div key={index} className="relative group">
                          <img
                            src={img || "/placeholder.svg"}
                            alt={`Product ${index + 1}`}
                            className="w-full h-32 object-cover rounded-lg"
                          />
                          <button
                            type="button"
                            onClick={() => handleRemoveImage(index)}
                            className="absolute top-2 right-2 bg-destructive text-destructive-foreground rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
                          >
                            <X className="h-4 w-4" />
                          </button>
                        </div>
                      ))}
                    </div>
                  )}
                </div>

<div>
                  <Label htmlFor="videoUrl">YouTube Video Link</Label>
                  <Input
                    id="videoUrl"
                    type="url"
                    value={formData.videoUrl}
                    onChange={(e) => setFormData({ ...formData, videoUrl: e.target.value })}
                    placeholder="https://www.youtube.com/watch?v=..."
                  />
                  <p className="text-sm text-muted-foreground mt-1">
                    Supported formats: youtube.com/watch?v=..., youtu.be/..., youtube.com/embed/...
                  </p>

{youtubeError && <p className="text-sm text-destructive mt-2">{youtubeError}</p>}

{youtubeVideoId && (
                    <div className="mt-4">
                      <p className="text-sm font-medium mb-2">Video Preview:</p>
                      <div className="aspect-video w-full max-w-md">
                        <iframe
                          src={getYouTubeEmbedUrl(youtubeVideoId)}
                          title="YouTube video preview"
                          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                          allowFullScreen
                          className="w-full h-full rounded-lg"
                        />
                      </div>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>

<div className="flex gap-4">
          <Button type="button" variant="outline" onClick={() => router.back()}>
            Cancel
          </Button>
          <Button type="submit" disabled={loading}>
            {loading ? "Updating..." : "Update Product"}
          </Button>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/(frontend)/products/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useParams, useRouter } from "next/navigation"
import Image from "next/image"
import Link from "next/link"
import { createClient } from "@/lib/supabase/client"
import { useCart } from "@/lib/cart-context"
import { useWishlist } from "@/lib/wishlist-context"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import {
  ChevronRight,
  Heart,
  Share2,
  Star,
  Truck,
  RotateCcw,
  CreditCard,
  Shield,
  Award,
  Minus,
  Plus,
  ShoppingCart,
  AlertCircle,
  CheckCircle,
  XCircle,
} from "lucide-react"
import { toast } from "sonner"
import { extractYouTubeVideoId, getYouTubeEmbedUrl } from "@/lib/youtube-utils"

interface Product {
  id: string
  name: string
  description: string
  price: number
  discount_amount: number
  category: string
  sub_category: string
  brand: string
  sku: string
  stock_quantity: number
  thumbnail_url: string
  additional_images: string[]
  rating: number
  reviews_count: number
  is_active: boolean
  product_type: string
  unit: string
  minimum_order_qty: number
  tax_amount: number
  shipping_cost: number
  meta_title: string
  meta_description: string
  video_url: string
  colors: string[]
  attributes: any
  created_at: string
}

export default function ProductDetailPage() {
  const params = useParams()
  const router = useRouter()
  const { addItem } = useCart()
  const { addItem: handleAddToWishlist, isInWishlist } = useWishlist()
  const [product, setProduct] = useState<Product | null>(null)
  const [loading, setLoading] = useState(true)
  const [selectedImage, setSelectedImage] = useState(0)
  const [selectedColor, setSelectedColor] = useState<string>("")
  const [selectedStorage, setSelectedStorage] = useState<string>("")
  const [quantity, setQuantity] = useState(1)
  const [recommendedProducts, setRecommendedProducts] = useState<Product[]>([])

useEffect(() => {
    fetchProduct()
    fetchRecommendedProducts()
  }, [params.id])

const fetchProduct = async () => {
    try {
      const supabase = createClient()
      const { data, error } = await supabase
        .from("products")
        .select("*")
        .eq("id", params.id)
        .eq("is_active", true)
        .single()

if (error) throw error
      setProduct(data)
      if (data.colors && data.colors.length > 0) {
        setSelectedColor(data.colors[0])
      }
    } catch (error: any) {
      console.error("[v0] Error fetching product:", error)
      toast.error("Failed to load product")
    } finally {
      setLoading(false)
    }
  }

const fetchRecommendedProducts = async () => {
    try {
      const supabase = createClient()
      const { data, error } = await supabase.from("products").select("*").eq("is_active", true).limit(10)

if (error) throw error
      setRecommendedProducts(data || [])
    } catch (error: any) {
      console.error("[v0] Error fetching recommended products:", error)
    }
  }

// Helper function to get stock status
  const getStockStatus = () => {
    if (!product) return { status: "out", label: "Out of Stock", color: "destructive", icon: XCircle }

if (product.stock_quantity === 0) {
      return { status: "out", label: "Out of Stock", color: "destructive", icon: XCircle }
    } else if (product.stock_quantity <= 5) {
      return { status: "low", label: "Low Stock", color: "warning", icon: AlertCircle }
    } else {
      return { status: "in", label: "In Stock", color: "success", icon: CheckCircle }
    }
  }

const stockStatus = getStockStatus()

const handleAddToCart = () => {
    if (!product) return

if (quantity > product.stock_quantity) {
      toast.error(`Only ${product.stock_quantity} items available in stock`)
      return
    }

if (product.stock_quantity === 0) {
      toast.error("This product is out of stock")
      return
    }

addItem({
      id: product.id,
      name: product.name,
      price: product.price - (product.discount_amount || 0),
      image: product.thumbnail_url,
      quantity,
      vendor: product.brand || "TradeGateStore",
      category: product.category,
    })
    toast.success("Added to cart!")
  }

const handleBuyNow = () => {
    if (!product) return

if (quantity > product.stock_quantity) {
      toast.error(`Only ${product.stock_quantity} items available in stock`)
      return
    }

if (product.stock_quantity === 0) {
      toast.error("This product is out of stock")
      return
    }

handleAddToCart()
    router.push("/checkout")
  }

const discountPercentage = product?.discount_amount ? Math.round((product.discount_amount / product.price) * 100) : 0

const finalPrice = product ? product.price - (product.discount_amount || 0) : 0

if (loading) {
    return (
      <div className="container mx-auto px-4 py-8">
        <div className="animate-pulse space-y-4">
          <div className="h-8 bg-muted rounded w-1/3"></div>
          <div className="grid md:grid-cols-2 gap-8">
            <div className="h-96 bg-muted rounded"></div>
            <div className="space-y-4">
              <div className="h-8 bg-muted rounded"></div>
              <div className="h-4 bg-muted rounded w-2/3"></div>
              <div className="h-12 bg-muted rounded"></div>
            </div>
          </div>
        </div>
      </div>
    )
  }

if (!product) {
    return (
      <div className="container mx-auto px-4 py-16 text-center">
        <h1 className="text-2xl font-bold mb-4">Product Not Found</h1>
        <Button onClick={() => router.push("/")}>Go Home</Button>
      </div>
    )
  }

const allImages = [product.thumbnail_url, ...(product.additional_images || [])]

return (
    <div className="min-h-screen bg-background">
      {/* Breadcrumb */}
      <div className="border-b border-border bg-muted/30">
        <div className="container mx-auto px-4 py-3">
          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            <Link href="/" className="hover:text-foreground transition-colors">
              Home
            </Link>
            <ChevronRight className="h-4 w-4" />
            <Link href={`/categories/${product.category}`} className="hover:text-foreground transition-colors">
              {product.category}
            </Link>
            <ChevronRight className="h-4 w-4" />
            <span className="text-foreground font-medium truncate">{product.name}</span>
          </div>
        </div>
      </div>

<div className="container mx-auto px-4 py-8">
        <div className="grid lg:grid-cols-2 gap-8 mb-12">
          {/* Product Images */}
          <div className="space-y-4">
            <div className="relative aspect-square bg-muted rounded-lg overflow-hidden">
              <Image
                src={allImages[selectedImage] || "/placeholder.svg?height=600&width=600"}
                alt={product.name}
                fill
                className="object-contain"
                priority
              />
              <Button
                variant="ghost"
                size="icon"
                className="absolute top-4 right-4 bg-background/80 backdrop-blur-sm hover:bg-background"
                onClick={() => {}}
              >
                <Share2 className="h-5 w-5" />
              </Button>
            </div>
            <div className="grid grid-cols-5 gap-2">
              {allImages.map((image, index) => (
                <button
                  key={index}
                  onClick={() => setSelectedImage(index)}
                  className={`relative aspect-square rounded-lg overflow-hidden border-2 transition-colors ${
                    selectedImage === index ? "border-primary" : "border-border hover:border-primary/50"
                  }`}
                >
                  <Image
                    src={image || "/placeholder.svg?height=100&width=100"}
                    alt={`View ${index + 1}`}
                    fill
                    className="object-cover"
                  />
                </button>
              ))}
            </div>
          </div>

{/* Product Info */}
          <div className="space-y-6">
            <div>
              <div className="flex items-center gap-2 mb-2">
                <Badge variant="secondary">{product.brand}</Badge>
                <Badge
                  variant={stockStatus.color === "destructive" ? "destructive" : "default"}
                  className={
                    stockStatus.color === "success"
                      ? "bg-green-500 hover:bg-green-600"
                      : stockStatus.color === "warning"
                        ? "bg-orange-500 hover:bg-orange-600"
                        : ""
                  }
                >
                  <stockStatus.icon className="h-3 w-3 mr-1" />
                  {stockStatus.label}
                </Badge>
              </div>
              <h1 className="text-3xl font-bold text-foreground mb-3">{product.name}</h1>
              <div className="flex items-center gap-4">
                <div className="flex items-center gap-1">
                  <div className="flex">
                    {[...Array(5)].map((_, i) => (
                      <Star
                        key={i}
                        className={`h-5 w-5 ${
                          i < Math.floor(product.rating || 0)
                            ? "fill-yellow-400 text-yellow-400"
                            : "fill-muted text-muted"
                        }`}
                      />
                    ))}
                  </div>
                  <span className="text-sm font-medium">{product.rating || 0}</span>
                </div>
                <span className="text-sm text-muted-foreground">({product.reviews_count || 0} reviews)</span>
              </div>
            </div>

{/* Price */}
            <div className="space-y-2">
              <div className="flex items-baseline gap-3">
                <span className="text-4xl font-bold text-foreground">₹{finalPrice.toLocaleString()}</span>
                {product.discount_amount > 0 && (
                  <>
                    <span className="text-xl text-muted-foreground line-through">
                      ₹{product.price.toLocaleString()}
                    </span>
                    <Badge variant="destructive" className="text-sm">
                      {discountPercentage}% OFF
                    </Badge>
                  </>
                )}
              </div>
              <p className="text-sm text-muted-foreground">Inclusive of all taxes</p>
            </div>

{/* Stock Availability Alert */}
            {product.stock_quantity > 0 && product.stock_quantity <= 10 && (
              <div className="flex items-center gap-2 p-3 bg-orange-50 dark:bg-orange-950/20 border border-orange-200 dark:border-orange-900 rounded-lg">
                <AlertCircle className="h-5 w-5 text-orange-600 dark:text-orange-400 flex-shrink-0" />
                <p className="text-sm text-orange-800 dark:text-orange-300 font-medium">
                  {product.stock_quantity <= 5
                    ? `Hurry! Only ${product.stock_quantity} left in stock`
                    : `Limited stock: ${product.stock_quantity} items available`}
                </p>
              </div>
            )}

{product.stock_quantity === 0 && (
              <div className="flex items-center gap-2 p-3 bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900 rounded-lg">
                <XCircle className="h-5 w-5 text-red-600 dark:text-red-400 flex-shrink-0" />
                <p className="text-sm text-red-800 dark:text-red-300 font-medium">
                  This product is currently out of stock. Check back later!
                </p>
              </div>
            )}

{/* Color Selection */}
            {product.colors && product.colors.length > 0 && (
              <div className="space-y-3">
                <label className="text-sm font-medium">Select Color:</label>
                <div className="flex gap-2">
                  {product.colors.map((color) => (
                    <button
                      key={color}
                      onClick={() => setSelectedColor(color)}
                      className={`px-4 py-2 rounded-lg border-2 transition-colors ${
                        selectedColor === color
                          ? "border-primary bg-primary/10"
                          : "border-border hover:border-primary/50"
                      }`}
                    >
                      {color}
                    </button>
                  ))}
                </div>
              </div>
            )}

{/* Storage/Variant Selection */}
            {product.attributes && product.attributes.storage && (
              <div className="space-y-3">
                <label className="text-sm font-medium">Select Storage:</label>
                <div className="flex gap-2">
                  {product.attributes.storage.map((storage: string) => (
                    <button
                      key={storage}
                      onClick={() => setSelectedStorage(storage)}
                      className={`px-4 py-2 rounded-lg border-2 transition-colors ${
                        selectedStorage === storage
                          ? "border-primary bg-primary/10"
                          : "border-border hover:border-primary/50"
                      }`}
                    >
                      {storage}
                    </button>
                  ))}
                </div>
              </div>
            )}

{/* Features */}
            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
              <div className="flex flex-col items-center text-center p-3 rounded-lg bg-muted/50">
                <Truck className="h-8 w-8 text-primary mb-2" />
                <span className="text-xs font-medium">Free Delivery</span>
              </div>
              <div className="flex flex-col items-center text-center p-3 rounded-lg bg-muted/50">
                <RotateCcw className="h-8 w-8 text-primary mb-2" />
                <span className="text-xs font-medium">7 Days Return</span>
              </div>
              <div className="flex flex-col items-center text-center p-3 rounded-lg bg-muted/50">
                <CreditCard className="h-8 w-8 text-primary mb-2" />
                <span className="text-xs font-medium">Pay on Delivery</span>
              </div>
              <div className="flex flex-col items-center text-center p-3 rounded-lg bg-muted/50">
                <Award className="h-8 w-8 text-primary mb-2" />
                <span className="text-xs font-medium">Top Brand</span>
              </div>
              <div className="flex flex-col items-center text-center p-3 rounded-lg bg-muted/50">
                <Shield className="h-8 w-8 text-primary mb-2" />
                <span className="text-xs font-medium">Assured Products</span>
              </div>
            </div>

{/* Quantity and Actions */}
            <div className="space-y-4">
              <div className="flex items-center gap-4">
                <label className="text-sm font-medium">Quantity:</label>
                <div className="flex items-center border border-border rounded-lg">
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => setQuantity(Math.max(1, quantity - 1))}
                    disabled={quantity <= 1 || product.stock_quantity === 0}
                  >
                    <Minus className="h-4 w-4" />
                  </Button>
                  <span className="px-4 py-2 min-w-[3rem] text-center font-medium">{quantity}</span>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => setQuantity(Math.min(product.stock_quantity, quantity + 1))}
                    disabled={quantity >= product.stock_quantity || product.stock_quantity === 0}
                  >
                    <Plus className="h-4 w-4" />
                  </Button>
                </div>
                {product.stock_quantity > 0 && (
                  <span className="text-sm text-muted-foreground">({product.stock_quantity} available)</span>
                )}
              </div>

<div className="flex gap-3">
                <Button
                  size="lg"
                  variant="outline"
                  className="flex-1 bg-transparent"
                  onClick={handleAddToCart}
                  disabled={product.stock_quantity === 0}
                >
                  <ShoppingCart className="mr-2 h-5 w-5" />
                  {product.stock_quantity === 0 ? "Out of Stock" : "Add to Cart"}
                </Button>
                <Button size="lg" className="flex-1" onClick={handleBuyNow} disabled={product.stock_quantity === 0}>
                  {product.stock_quantity === 0 ? "Out of Stock" : "Buy Now"}
                </Button>
                <Button
                  size="lg"
                  variant="outline"
                  onClick={handleAddToWishlist}
                  className={isInWishlist(product.id) ? "text-red-500" : ""}
                >
                  <Heart className={`h-5 w-5 ${isInWishlist(product.id) ? "fill-current" : ""}`} />
                </Button>
              </div>
            </div>

{/* Delivery Info */}
            <Card>
              <CardContent className="p-4 space-y-2">
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">Ships from:</span>
                  <span className="font-medium">tradegatestore.com</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">Sold by:</span>
                  <span className="font-medium">{product.brand || "TradeGateStore"}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">Delivery:</span>
                  <span className="font-medium text-green-600">Saturday, 22 February</span>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>

{/* Product Details */}
        <Card className="mb-12">
          <CardContent className="p-6">
            <h2 className="text-2xl font-bold mb-6">Product Details</h2>
            <div className="grid md:grid-cols-2 gap-x-8 gap-y-4">
              <div className="flex justify-between py-2 border-b border-border">
                <span className="text-muted-foreground">Brand</span>
                <span className="font-medium">{product.brand}</span>
              </div>
              <div className="flex justify-between py-2 border-b border-border">
                <span className="text-muted-foreground">Category</span>
                <span className="font-medium">{product.category}</span>
              </div>
              <div className="flex justify-between py-2 border-b border-border">
                <span className="text-muted-foreground">SKU</span>
                <span className="font-medium">{product.sku}</span>
              </div>
              <div className="flex justify-between py-2 border-b border-border">
                <span className="text-muted-foreground">Product Type</span>
                <span className="font-medium">{product.product_type}</span>
              </div>
              <div className="flex justify-between py-2 border-b border-border">
                <span className="text-muted-foreground">Stock</span>
                <span className="font-medium">{product.stock_quantity} units</span>
              </div>
              <div className="flex justify-between py-2 border-b border-border">
                <span className="text-muted-foreground">Date Added</span>
                <span className="font-medium">{new Date(product.created_at).toLocaleDateString()}</span>
              </div>
            </div>
            <div className="mt-6">
              <h3 className="font-semibold mb-2">Description</h3>
              <p className="text-muted-foreground leading-relaxed">{product.description}</p>
            </div>
            {product.video_url && extractYouTubeVideoId(product.video_url) && (
              <div className="mt-8">
                <h3 className="font-semibold mb-4 text-lg">Product Video</h3>
                <div className="relative w-full aspect-video rounded-lg overflow-hidden bg-muted">
                  <iframe
                    src={getYouTubeEmbedUrl(product.video_url)}
                    title="Product Video"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowFullScreen
                    className="absolute inset-0 w-full h-full"
                  />
                </div>
              </div>
            )}
          </CardContent>
        </Card>

{/* Recommended Products */}
        <div className="mb-12">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-2xl font-bold">Recommended for you</h2>
            <Link href="/categories/all" className="text-primary hover:underline">
              See All
            </Link>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
            {recommendedProducts.slice(0, 5).map((item) => (
              <Link key={item.id} href={`/products/${item.id}`}>
                <Card className="group cursor-pointer hover:shadow-lg transition-shadow">
                  <CardContent className="p-4">
                    <div className="relative aspect-square mb-3 bg-muted rounded-lg overflow-hidden">
                      <Image
                        src={item.thumbnail_url || "/placeholder.svg?height=200&width=200"}
                        alt={item.name}
                        fill
                        className="object-cover group-hover:scale-105 transition-transform"
                      />
                    </div>
                    <h3 className="font-medium text-sm mb-2 line-clamp-2">{item.name}</h3>
                    <div className="flex items-center gap-1 mb-2">
                      <div className="flex">
                        {[...Array(5)].map((_, i) => (
                          <Star
                            key={i}
                            className={`h-3 w-3 ${
                              i < Math.floor(item.rating || 0)
                                ? "fill-yellow-400 text-yellow-400"
                                : "fill-muted text-muted"
                            }`}
                          />
                        ))}
                      </div>
                      <span className="text-xs text-muted-foreground">({item.reviews_count || 0})</span>
                    </div>
                    <div className="flex items-baseline gap-2">
                      <span className="font-bold text-lg">
                        ₹{(item.price - (item.discount_amount || 0)).toLocaleString()}
                      </span>
                      {item.discount_amount > 0 && (
                        <span className="text-xs text-muted-foreground line-through">
                          ₹{item.price.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </CardContent>
                </Card>
              </Link>
            ))}
          </div>
        </div>

{/* Trust Badges */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 py-8 border-t border-border">
          <div className="flex items-center gap-3">
            <Truck className="h-8 w-8 text-primary" />
            <div>
              <div className="font-semibold">Fast Shipping</div>
              <div className="text-xs text-muted-foreground">Free delivery on orders</div>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <Shield className="h-8 w-8 text-primary" />
            <div>
              <div className="font-semibold">Authentic Products</div>
              <div className="text-xs text-muted-foreground">100% genuine items</div>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <CreditCard className="h-8 w-8 text-primary" />
            <div>
              <div className="font-semibold">Secure Payment</div>
              <div className="text-xs text-muted-foreground">100% secure transactions</div>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <Award className="h-8 w-8 text-primary" />
            <div>
              <div className="font-semibold">24/7 Support</div>
              <div className="text-xs text-muted-foreground">Dedicated customer care</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/products/inhouse/list/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Search, Plus, MoreVertical, Edit, Trash2, Eye, AlertCircle, X } from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import { createClient } from "@/lib/supabase/client"
import { useToast } from "@/hooks/use-toast"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { useRouter } from "next/navigation"

type Product = {
  id: string
  name: string
  sku: string
  category: string
  price: number
  current_stock: number
  is_active: boolean
  thumbnail_url: string
  created_at: string
}

type Category = {
  name: string
  slug: string
}

export default function InhouseProductsPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [products, setProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [categories, setCategories] = useState<Category[]>([])
  const [selectedCategory, setSelectedCategory] = useState<string>("all")
  const [selectedStatus, setSelectedStatus] = useState<string>("all")
  const [selectedStock, setSelectedStock] = useState<string>("all")
  const [minPrice, setMinPrice] = useState<string>("")
  const [maxPrice, setMaxPrice] = useState<string>("")
  const { toast } = useToast()
  const router = useRouter()

useEffect(() => {
    fetchProducts()
    fetchCategories()
  }, [])

const fetchCategories = async () => {
    try {
      const supabase = createClient()
      const { data, error } = await supabase.from("categories").select("name, slug").eq("is_active", true)

if (error) throw error

setCategories(data || [])
    } catch (err: any) {
      console.error("[v0] Error fetching categories:", err)
    }
  }

const fetchProducts = async () => {
    try {
      setLoading(true)
      setError(null)
      const supabase = createClient()

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

if (fetchError) {
        if (fetchError.message.includes("does not exist") || fetchError.message.includes("schema cache")) {
          setError("database_not_setup")
        } else {
          throw fetchError
        }
      } else {
        setProducts(data || [])
      }
    } catch (err: any) {
      console.error("[v0] Error fetching products:", err)
      toast({
        title: "Error",
        description: err.message || "Failed to fetch products",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const handleDelete = async (id: string) => {
    if (!confirm("Are you sure you want to delete this product?")) return

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

if (error) throw error

toast({
        title: "Success",
        description: "Product deleted successfully",
      })

fetchProducts()
    } catch (err: any) {
      toast({
        title: "Error",
        description: err.message || "Failed to delete product",
        variant: "destructive",
      })
    }
  }

const filteredProducts = products.filter((product) => {
    const matchesSearch =
      product.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      product.sku?.toLowerCase().includes(searchQuery.toLowerCase())

const matchesCategory =
      selectedCategory === "all" ||
      product.category === selectedCategory ||
      product.category?.toLowerCase() === selectedCategory.toLowerCase()

const matchesStatus =
      selectedStatus === "all" || (selectedStatus === "active" ? product.is_active : !product.is_active)

let matchesStock = true
    if (selectedStock === "in_stock") {
      matchesStock = (product.current_stock || 0) > 10
    } else if (selectedStock === "low_stock") {
      matchesStock = (product.current_stock || 0) > 0 && (product.current_stock || 0) <= 10
    } else if (selectedStock === "out_of_stock") {
      matchesStock = (product.current_stock || 0) === 0
    }

const price = product.price || 0
    const matchesMinPrice = minPrice === "" || price >= Number.parseFloat(minPrice)
    const matchesMaxPrice = maxPrice === "" || price <= Number.parseFloat(maxPrice)

return matchesSearch && matchesCategory && matchesStatus && matchesStock && matchesMinPrice && matchesMaxPrice
  })

const clearFilters = () => {
    setSearchQuery("")
    setSelectedCategory("all")
    setSelectedStatus("all")
    setSelectedStock("all")
    setMinPrice("")
    setMaxPrice("")
  }

const hasActiveFilters =
    searchQuery !== "" ||
    selectedCategory !== "all" ||
    selectedStatus !== "all" ||
    selectedStock !== "all" ||
    minPrice !== "" ||
    maxPrice !== ""

if (error === "database_not_setup") {
    return (
      <div className="space-y-6">
        <Alert variant="destructive">
          <AlertCircle className="h-4 w-4" />
          <AlertDescription>
            <p className="font-semibold mb-2">Database tables not found</p>
            <p className="text-sm mb-3">
              The products table doesn't exist yet. Please run the following SQL scripts in order:
            </p>
            <ol className="text-sm list-decimal list-inside space-y-1 mb-3">
              <li>001_create_profiles.sql</li>
              <li>002_profile_trigger.sql</li>
              <li>003_add_vendor_fields.sql</li>
              <li>004_create_vendor_products.sql</li>
              <li>007_enhance_products_table.sql</li>
            </ol>
            <p className="text-sm">
              You can run these scripts from the scripts folder in your project. After running them, refresh this page.
            </p>
          </AlertDescription>
        </Alert>
        <Button onClick={() => window.location.reload()}>Refresh Page</Button>
      </div>
    )
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">In-house Products</h1>
          <p className="text-sm text-muted-foreground mt-1">Manage your in-house product inventory</p>
        </div>
        <Link href="/admin/products/inhouse/add">
          <Button className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600">
            <Plus className="h-4 w-4 mr-2" />
            Add New Product
          </Button>
        </Link>
      </div>

<div className="space-y-4">
        <div className="flex items-center gap-4 flex-wrap">
          <div className="relative flex-1 min-w-[250px]">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Search products by name or SKU..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10"
            />
          </div>

<Select value={selectedCategory} onValueChange={setSelectedCategory}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Category" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Categories</SelectItem>
              {categories.map((category) => (
                <SelectItem key={category.slug} value={category.slug}>
                  {category.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>

<Select value={selectedStatus} onValueChange={setSelectedStatus}>
            <SelectTrigger className="w-[150px]">
              <SelectValue placeholder="Status" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Status</SelectItem>
              <SelectItem value="active">Active</SelectItem>
              <SelectItem value="inactive">Inactive</SelectItem>
            </SelectContent>
          </Select>

<Select value={selectedStock} onValueChange={setSelectedStock}>
            <SelectTrigger className="w-[150px]">
              <SelectValue placeholder="Stock" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Stock</SelectItem>
              <SelectItem value="in_stock">In Stock</SelectItem>
              <SelectItem value="low_stock">Low Stock</SelectItem>
              <SelectItem value="out_of_stock">Out of Stock</SelectItem>
            </SelectContent>
          </Select>

<div className="flex items-center gap-2">
            <Input
              type="number"
              placeholder="Min Price"
              value={minPrice}
              onChange={(e) => setMinPrice(e.target.value)}
              className="w-[120px]"
            />
            <span className="text-muted-foreground">-</span>
            <Input
              type="number"
              placeholder="Max Price"
              value={maxPrice}
              onChange={(e) => setMaxPrice(e.target.value)}
              className="w-[120px]"
            />
          </div>

{hasActiveFilters && (
            <Button variant="outline" size="sm" onClick={clearFilters}>
              <X className="h-4 w-4 mr-2" />
              Clear Filters
            </Button>
          )}
        </div>

{hasActiveFilters && (
          <p className="text-sm text-muted-foreground">
            Showing {filteredProducts.length} of {products.length} products
          </p>
        )}
      </div>

{loading ? (
        <div className="text-center py-12">
          <p className="text-muted-foreground">Loading products...</p>
        </div>
      ) : filteredProducts.length === 0 ? (
        <div className="text-center py-12">
          <p className="text-muted-foreground">
            {searchQuery ? "No products found matching your search." : "No products yet. Add your first product!"}
          </p>
        </div>
      ) : (
        <div className="border rounded-lg">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Product</TableHead>
                <TableHead>SKU</TableHead>
                <TableHead>Category</TableHead>
                <TableHead>Price</TableHead>
                <TableHead>Stock</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredProducts.map((product) => (
                <TableRow key={product.id}>
                  <TableCell>
                    <div className="flex items-center gap-3">
                      <Image
                        src={product.thumbnail_url || "/placeholder.svg?height=40&width=40"}
                        alt={product.name}
                        width={40}
                        height={40}
                        className="rounded-lg object-cover"
                      />
                      <span className="font-medium">{product.name}</span>
                    </div>
                  </TableCell>
                  <TableCell>{product.sku || "N/A"}</TableCell>
                  <TableCell>{product.category || "Uncategorized"}</TableCell>
                  <TableCell>AED {product.price?.toFixed(2) || "0.00"}</TableCell>
                  <TableCell>{product.current_stock || 0}</TableCell>
                  <TableCell>
                    <Badge
                      variant={product.is_active ? "default" : "destructive"}
                      className={product.is_active ? "bg-green-500/20 text-green-700 border-green-500/30" : ""}
                    >
                      {product.is_active ? "Active" : "Inactive"}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="sm">
                          <MoreVertical className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem onClick={() => router.push(`/admin/products/inhouse/view/${product.id}`)}>
                          <Eye className="h-4 w-4 mr-2" />
                          View
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => router.push(`/admin/products/inhouse/edit/${product.id}`)}>
                          <Edit className="h-4 w-4 mr-2" />
                          Edit
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => handleDelete(product.id)} className="text-red-600">
                          <Trash2 className="h-4 w-4 mr-2" />
                          Delete
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/products/vendor/list/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Search, MoreVertical, Edit, Trash2, Eye, CheckCircle, XCircle, X } from "lucide-react"
import Image from "next/image"
import { createClient } from "@/lib/supabase/client"
import { useToast } from "@/hooks/use-toast"

type Product = {
  id: string
  name: string
  sku: string
  vendor_id: string
  category: string
  price: number
  current_stock: number
  approval_status: string
  thumbnail_url: string
}

type Category = {
  name: string
  slug: string
}

export default function VendorProductsPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [products, setProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)
  const [categories, setCategories] = useState<Category[]>([])
  const [selectedCategory, setSelectedCategory] = useState<string>("all")
  const [selectedApprovalStatus, setSelectedApprovalStatus] = useState<string>("all")
  const [selectedStock, setSelectedStock] = useState<string>("all")
  const [minPrice, setMinPrice] = useState<string>("")
  const [maxPrice, setMaxPrice] = useState<string>("")
  const router = useRouter()
  const { toast } = useToast()

useEffect(() => {
    fetchProducts()
    fetchCategories()
  }, [])

const fetchCategories = async () => {
    try {
      const supabase = createClient()
      const { data, error } = await supabase.from("categories").select("name, slug").eq("is_active", true)

if (error) throw error

setCategories(data || [])
    } catch (err: any) {
      console.error("[v0] Error fetching categories:", err)
    }
  }

const fetchProducts = async () => {
    try {
      setLoading(true)
      const supabase = createClient()

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

if (error) throw error

setProducts(data || [])
    } catch (err: any) {
      console.error("[v0] Error fetching vendor products:", err)
      toast({
        title: "Error",
        description: err.message || "Failed to fetch products",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

if (error) throw error

toast({
        title: "Success",
        description: "Product approved successfully",
      })

fetchProducts()
    } catch (err: any) {
      toast({
        title: "Error",
        description: err.message || "Failed to approve product",
        variant: "destructive",
      })
    }
  }

if (error) throw error

toast({
        title: "Success",
        description: "Product rejected",
      })

fetchProducts()
    } catch (err: any) {
      toast({
        title: "Error",
        description: err.message || "Failed to reject product",
        variant: "destructive",
      })
    }
  }

const handleDelete = async (id: string) => {
    if (!confirm("Are you sure you want to delete this product?")) return

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

if (error) throw error

toast({
        title: "Success",
        description: "Product deleted successfully",
      })

fetchProducts()
    } catch (err: any) {
      toast({
        title: "Error",
        description: err.message || "Failed to delete product",
        variant: "destructive",
      })
    }
  }

const filteredProducts = products.filter((product) => {
    const matchesSearch =
      product.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
      product.sku?.toLowerCase().includes(searchQuery.toLowerCase())

const matchesCategory =
      selectedCategory === "all" ||
      product.category === selectedCategory ||
      product.category?.toLowerCase() === selectedCategory.toLowerCase()

const matchesApprovalStatus = selectedApprovalStatus === "all" || product.approval_status === selectedApprovalStatus

return (
      matchesSearch && matchesCategory && matchesApprovalStatus && matchesStock && matchesMinPrice && matchesMaxPrice
    )
  })

const clearFilters = () => {
    setSearchQuery("")
    setSelectedCategory("all")
    setSelectedApprovalStatus("all")
    setSelectedStock("all")
    setMinPrice("")
    setMaxPrice("")
  }

const hasActiveFilters =
    searchQuery !== "" ||
    selectedCategory !== "all" ||
    selectedApprovalStatus !== "all" ||
    selectedStock !== "all" ||
    minPrice !== "" ||
    maxPrice !== ""

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">Vendor Products</h1>
          <p className="text-sm text-muted-foreground mt-1">Manage products from your vendors</p>
        </div>
      </div>

<div className="space-y-4">
        <div className="flex items-center gap-4 flex-wrap">
          <div className="relative flex-1 min-w-[250px]">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Search by product, SKU, or vendor..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10"
            />
          </div>

<Select value={selectedApprovalStatus} onValueChange={setSelectedApprovalStatus}>
            <SelectTrigger className="w-[150px]">
              <SelectValue placeholder="Status" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Status</SelectItem>
              <SelectItem value="pending">Pending</SelectItem>
              <SelectItem value="approved">Approved</SelectItem>
              <SelectItem value="rejected">Rejected</SelectItem>
            </SelectContent>
          </Select>

{hasActiveFilters && (
          <p className="text-sm text-muted-foreground">
            Showing {filteredProducts.length} of {products.length} products
          </p>
        )}
      </div>

{/* Products Table */}
      {loading ? (
        <div className="text-center py-12">
          <p className="text-muted-foreground">Loading products...</p>
        </div>
      ) : filteredProducts.length === 0 ? (
        <div className="text-center py-12">
          <p className="text-muted-foreground">No vendor products found</p>
        </div>
      ) : (
        <div className="border rounded-lg">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Product</TableHead>
                <TableHead>SKU</TableHead>
                <TableHead>Category</TableHead>
                <TableHead>Price</TableHead>
                <TableHead>Stock</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredProducts.map((product) => (
                <TableRow key={product.id}>
                  <TableCell>
                    <div className="flex items-center gap-3">
                      <Image
                        src={product.thumbnail_url || "/placeholder.svg"}
                        alt={product.name}
                        width={40}
                        height={40}
                        className="rounded-lg object-cover"
                      />
                      <span className="font-medium">{product.name}</span>
                    </div>
                  </TableCell>
                  <TableCell>{product.sku}</TableCell>
                  <TableCell>{product.category}</TableCell>
                  <TableCell>AED {product.price?.toFixed(2)}</TableCell>
                  <TableCell>{product.current_stock}</TableCell>
                  <TableCell>
                    <Badge
                      variant={product.approval_status === "approved" ? "default" : "secondary"}
                      className={
                        product.approval_status === "approved"
                          ? "bg-green-500/20 text-green-700 border-green-500/30"
                          : product.approval_status === "pending"
                            ? "bg-yellow-500/20 text-yellow-700 border-yellow-500/30"
                            : "bg-red-500/20 text-red-700 border-red-500/30"
                      }
                    >
                      {product.approval_status}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="sm">
                          <MoreVertical className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem onClick={() => router.push(`/admin/products/vendor/view/${product.id}`)}>
                          <Eye className="h-4 w-4 mr-2" />
                          View
                        </DropdownMenuItem>
                        {product.approval_status === "pending" && (
                          <>
                            <DropdownMenuItem onClick={() => handleApprove(product.id)} className="text-green-600">
                              <CheckCircle className="h-4 w-4 mr-2" />
                              Approve
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => handleReject(product.id)} className="text-red-600">
                              <XCircle className="h-4 w-4 mr-2" />
                              Reject
                            </DropdownMenuItem>
                          </>
                        )}
                        <DropdownMenuItem onClick={() => router.push(`/admin/products/vendor/edit/${product.id}`)}>
                          <Edit className="h-4 w-4 mr-2" />
                          Edit
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => handleDelete(product.id)} className="text-red-600">
                          <Trash2 className="h-4 w-4 mr-2" />
                          Delete
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/products/inhouse/bulk-import/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export default function Loading() {
  return (
    <div className="space-y-6">
      <div>
        <Skeleton className="h-9 w-64" />
        <Skeleton className="h-5 w-96 mt-2" />
      </div>

<Card>
          <CardHeader>
            <Skeleton className="h-6 w-48" />
            <Skeleton className="h-4 w-full mt-2" />
          </CardHeader>
          <CardContent className="space-y-4">
            <Skeleton className="h-10 w-full" />
            <Skeleton className="h-10 w-full" />
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/products/vendor/pending/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { createClient } from "@/lib/supabase/client"
import { useToast } from "@/hooks/use-toast"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { CheckCircle, XCircle, Eye, Search, Package, AlertCircle } from "lucide-react"
import Link from "next/link"
import { useAdminTheme } from "@/lib/admin-theme-context"
import { cn } from "@/lib/utils"

interface Product {
  id: string
  name: string
  sku: string
  category: string
  brand: string
  price: number
  current_stock: number
  image_url: string
  vendor_id: string
  created_at: string
  approval_status: string
  rejection_reason: string | null
}

export default function PendingApprovalsPage() {
  const { theme } = useAdminTheme()
  const { toast } = useToast()
  const [products, setProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedProducts, setSelectedProducts] = useState<string[]>([])
  const [rejectDialogOpen, setRejectDialogOpen] = useState(false)
  const [rejectingProductId, setRejectingProductId] = useState<string | null>(null)
  const [rejectionReason, setRejectionReason] = useState("")

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

const fetchPendingProducts = async () => {
    try {
      setLoading(true)
      const supabase = createClient()
      const { data, error } = await supabase
        .from("products")
        .select("*")
        .eq("approval_status", "pending")
        .order("created_at", { ascending: false })

if (error) throw error
      setProducts(data || [])
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "Failed to fetch pending products",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const handleApprove = async (id: string) => {
    try {
      const supabase = createClient()
      const { error } = await supabase
        .from("products")
        .update({ approval_status: "approved", rejection_reason: null })
        .eq("id", id)

if (error) throw error

toast({
        title: "Success",
        description: "Product approved successfully",
      })

fetchPendingProducts()
      setSelectedProducts(selectedProducts.filter((pid) => pid !== id))
    } catch (err: any) {
      toast({
        title: "Error",
        description: err.message || "Failed to approve product",
        variant: "destructive",
      })
    }
  }

const handleBulkApprove = async () => {
    if (selectedProducts.length === 0) return

try {
      const supabase = createClient()
      const { error } = await supabase
        .from("products")
        .update({ approval_status: "approved", rejection_reason: null })
        .in("id", selectedProducts)

if (error) throw error

toast({
        title: "Success",
        description: `${selectedProducts.length} products approved successfully`,
      })

fetchPendingProducts()
      setSelectedProducts([])
    } catch (err: any) {
      toast({
        title: "Error",
        description: err.message || "Failed to approve products",
        variant: "destructive",
      })
    }
  }

const openRejectDialog = (id: string) => {
    setRejectingProductId(id)
    setRejectionReason("")
    setRejectDialogOpen(true)
  }

const handleReject = async () => {
    if (!rejectingProductId || !rejectionReason.trim()) {
      toast({
        title: "Error",
        description: "Please provide a rejection reason",
        variant: "destructive",
      })
      return
    }

try {
      const supabase = createClient()
      const { error } = await supabase
        .from("products")
        .update({ approval_status: "rejected", rejection_reason: rejectionReason })
        .eq("id", rejectingProductId)

if (error) throw error

toast({
        title: "Success",
        description: "Product rejected",
      })

fetchPendingProducts()
      setSelectedProducts(selectedProducts.filter((pid) => pid !== rejectingProductId))
      setRejectDialogOpen(false)
      setRejectingProductId(null)
      setRejectionReason("")
    } catch (err: any) {
      toast({
        title: "Error",
        description: err.message || "Failed to reject product",
        variant: "destructive",
      })
    }
  }

const handleBulkReject = async () => {
    if (selectedProducts.length === 0) return
    if (!rejectionReason.trim()) {
      toast({
        title: "Error",
        description: "Please provide a rejection reason",
        variant: "destructive",
      })
      return
    }

try {
      const supabase = createClient()
      const { error } = await supabase
        .from("products")
        .update({ approval_status: "rejected", rejection_reason: rejectionReason })
        .in("id", selectedProducts)

if (error) throw error

toast({
        title: "Success",
        description: `${selectedProducts.length} products rejected`,
      })

fetchPendingProducts()
      setSelectedProducts([])
      setRejectDialogOpen(false)
      setRejectionReason("")
    } catch (err: any) {
      toast({
        title: "Error",
        description: err.message || "Failed to reject products",
        variant: "destructive",
      })
    }
  }

const toggleSelectAll = () => {
    if (selectedProducts.length === filteredProducts.length) {
      setSelectedProducts([])
    } else {
      setSelectedProducts(filteredProducts.map((p) => p.id))
    }
  }

const toggleSelectProduct = (id: string) => {
    if (selectedProducts.includes(id)) {
      setSelectedProducts(selectedProducts.filter((pid) => pid !== id))
    } else {
      setSelectedProducts([...selectedProducts, id])
    }
  }

const filteredProducts = products.filter(
    (product) =>
      product.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      product.sku.toLowerCase().includes(searchQuery.toLowerCase()) ||
      product.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
      product.brand.toLowerCase().includes(searchQuery.toLowerCase()),
  )

if (loading) {
    return (
      <div className="flex items-center justify-center h-96">
        <div className="text-center">
          <Package className="h-12 w-12 mx-auto mb-4 text-slate-400 animate-pulse" />
          <p className={cn(theme === "dark" ? "text-slate-400" : "text-gray-600")}>Loading pending products...</p>
        </div>
      </div>
    )
  }

return (
    <div>
      <div className="mb-6">
        <h1 className={cn("text-3xl font-bold mb-2", theme === "dark" ? "text-white" : "text-gray-900")}>
          Pending Product Approvals
        </h1>
        <p className={cn(theme === "dark" ? "text-slate-400" : "text-gray-600")}>
          Review and approve vendor product submissions
        </p>
      </div>

{products.length === 0 ? (
        <Card className={cn(theme === "dark" ? "bg-slate-800/50 border-slate-700/50" : "bg-white border-gray-200")}>
          <CardContent className="flex flex-col items-center justify-center py-12">
            <CheckCircle className="h-16 w-16 text-green-500 mb-4" />
            <h3 className={cn("text-xl font-semibold mb-2", theme === "dark" ? "text-white" : "text-gray-900")}>
              All Caught Up!
            </h3>
            <p className={cn(theme === "dark" ? "text-slate-400" : "text-gray-600")}>
              There are no pending products to review at the moment.
            </p>
          </CardContent>
        </Card>
      ) : (
        <>
          <div className="flex items-center gap-4 mb-6">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-slate-400" />
              <Input
                placeholder="Search by name, SKU, category, or brand..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10"
              />
            </div>
            {selectedProducts.length > 0 && (
              <div className="flex items-center gap-2">
                <Badge variant="secondary">{selectedProducts.length} selected</Badge>
                <Button onClick={handleBulkApprove} size="sm" className="bg-green-600 hover:bg-green-700">
                  <CheckCircle className="h-4 w-4 mr-1" />
                  Approve Selected
                </Button>
                <Button
                  onClick={() => {
                    setRejectingProductId(null)
                    setRejectionReason("")
                    setRejectDialogOpen(true)
                  }}
                  size="sm"
                  variant="destructive"
                >
                  <XCircle className="h-4 w-4 mr-1" />
                  Reject Selected
                </Button>
              </div>
            )}
          </div>

<Card className={cn(theme === "dark" ? "bg-slate-800/50 border-slate-700/50" : "bg-white border-gray-200")}>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle>Pending Products</CardTitle>
                  <CardDescription>
                    {filteredProducts.length} product{filteredProducts.length !== 1 ? "s" : ""} awaiting approval
                  </CardDescription>
                </div>
                <div className="flex items-center gap-2">
                  <Checkbox
                    checked={selectedProducts.length === filteredProducts.length && filteredProducts.length > 0}
                    onCheckedChange={toggleSelectAll}
                  />
                  <Label>Select All</Label>
                </div>
              </div>
            </CardHeader>
            <CardContent className="p-0">
              <div className="divide-y divide-slate-700/50">
                {filteredProducts.map((product) => (
                  <div
                    key={product.id}
                    className={cn(
                      "p-4 flex items-center gap-4 hover:bg-slate-800/30 transition-colors",
                      theme === "dark" ? "" : "hover:bg-gray-50",
                    )}
                  >
                    <Checkbox
                      checked={selectedProducts.includes(product.id)}
                      onCheckedChange={() => toggleSelectProduct(product.id)}
                    />
                    <img
                      src={product.image_url || "/placeholder.svg?height=80&width=80"}
                      alt={product.name}
                      className="w-20 h-20 object-cover rounded-lg"
                    />
                    <div className="flex-1">
                      <h3 className={cn("font-semibold mb-1", theme === "dark" ? "text-white" : "text-gray-900")}>
                        {product.name}
                      </h3>
                      <div className="flex items-center gap-3 text-sm mb-2">
                        <span className={cn(theme === "dark" ? "text-slate-400" : "text-gray-600")}>
                          SKU: {product.sku}
                        </span>
                        <span className={cn(theme === "dark" ? "text-slate-500" : "text-gray-400")}>•</span>
                        <span className={cn(theme === "dark" ? "text-slate-400" : "text-gray-600")}>
                          {product.category}
                        </span>
                        <span className={cn(theme === "dark" ? "text-slate-500" : "text-gray-400")}>•</span>
                        <span className={cn(theme === "dark" ? "text-slate-400" : "text-gray-600")}>
                          {product.brand}
                        </span>
                      </div>
                      <div className="flex items-center gap-4 text-sm">
                        <span className="text-amber-400 font-semibold">₹{product.price.toLocaleString()}</span>
                        <span className={cn(theme === "dark" ? "text-slate-400" : "text-gray-600")}>
                          Stock: {product.current_stock}
                        </span>
                        <span className={cn("text-xs", theme === "dark" ? "text-slate-500" : "text-gray-500")}>
                          Submitted: {new Date(product.created_at).toLocaleDateString()}
                        </span>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <Link href={`/admin/products/inhouse/view/${product.id}`}>
                        <Button variant="outline" size="sm">
                          <Eye className="h-4 w-4" />
                        </Button>
                      </Link>
                      <Button
                        onClick={() => handleApprove(product.id)}
                        size="sm"
                        className="bg-green-600 hover:bg-green-700"
                      >
                        <CheckCircle className="h-4 w-4 mr-1" />
                        Approve
                      </Button>
                      <Button onClick={() => openRejectDialog(product.id)} size="sm" variant="destructive">
                        <XCircle className="h-4 w-4 mr-1" />
                        Reject
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </>
      )}

<Dialog open={rejectDialogOpen} onOpenChange={setRejectDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Reject Product{selectedProducts.length > 1 ? "s" : ""}</DialogTitle>
            <DialogDescription>
              {rejectingProductId
                ? "Please provide a reason for rejecting this product. This will be visible to the vendor."
                : `Please provide a reason for rejecting ${selectedProducts.length} products. This will be visible to the vendors.`}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="rejection-reason">Rejection Reason *</Label>
              <Textarea
                id="rejection-reason"
                placeholder="e.g., Product images are not clear, pricing is incorrect, description needs improvement..."
                value={rejectionReason}
                onChange={(e) => setRejectionReason(e.target.value)}
                rows={4}
              />
            </div>
            {!rejectionReason.trim() && (
              <div className="flex items-start gap-2 text-sm text-amber-600">
                <AlertCircle className="h-4 w-4 mt-0.5" />
                <span>A rejection reason is required to help vendors improve their submissions.</span>
              </div>
            )}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setRejectDialogOpen(false)}>
              Cancel
            </Button>
            <Button
              variant="destructive"
              onClick={rejectingProductId ? handleReject : handleBulkReject}
              disabled={!rejectionReason.trim()}
            >
              <XCircle className="h-4 w-4 mr-1" />
              Reject {rejectingProductId ? "Product" : `${selectedProducts.length} Products`}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/products/vendor/pending/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="flex items-center justify-center h-96">
      <div className="text-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-amber-500 mx-auto mb-4"></div>
        <p className="text-slate-400">Loading pending approvals...</p>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/(frontend)/checkout/actions.ts" isEdit="true" isMerged="true"
"use server"

import { createClient } from "@/lib/supabase/server"

export async function createOrder(orderData: {
  totalAmount: number
  shippingAddress: string
  items: Array<{
    id: string
    quantity: number
    price: number
  }>
}) {
  try {
    const supabase = createClient()

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

console.log("[v0] Creating order for user:", user?.id || "guest")

// Create order
    const { data: orderRecord, error: orderError } = await supabase
      .from("orders")
      .insert({
        customer_id: user?.id || null,
        total_amount: orderData.totalAmount,
        status: "pending",
        shipping_address: orderData.shippingAddress,
      })
      .select()
      .single()

if (orderError) {
      console.error("[v0] Order creation error:", orderError)
      throw new Error(orderError.message)
    }

console.log("[v0] Order created:", orderRecord.id)

// Create order items
    const orderItems = orderData.items.map((item) => ({
      order_id: orderRecord.id,
      product_id: item.id,
      quantity: item.quantity,
      price: item.price,
      vendor_id: null,
    }))

const { error: itemsError } = await supabase.from("order_items").insert(orderItems)

if (itemsError) {
      console.error("[v0] Order items error:", itemsError)
      // Try to delete the order if items insertion fails
      await supabase.from("orders").delete().eq("id", orderRecord.id)
      throw new Error(itemsError.message)
    }

console.log("[v0] Order items created successfully")

return {
      success: true,
      orderId: orderRecord.id,
    }
  } catch (error) {
    console.error("[v0] Error in createOrder action:", error)
    return {
      success: false,
      error: error instanceof Error ? error.message : "Failed to create order",
    }
  }
}
[V0_FILE]sql:file="scripts/014_fix_orders_rls_for_guests.sql" isMerged="true"
-- Fix RLS policies to allow guest checkout

-- Drop existing restrictive policies
DROP POLICY IF EXISTS "orders_insert_own" ON public.orders;
DROP POLICY IF EXISTS "order_items_select_vendor" ON public.order_items;
DROP POLICY IF EXISTS "order_items_select_customer" ON public.order_items;

-- Create new policy: Allow authenticated users to insert their own orders
CREATE POLICY "orders_insert_authenticated"
  ON public.orders FOR INSERT
  WITH CHECK (auth.uid() = customer_id);

-- Create new policy: Allow guest orders (customer_id is null)
CREATE POLICY "orders_insert_guest"
  ON public.orders FOR INSERT
  WITH CHECK (customer_id IS NULL);

-- Create new policy: Allow service role to insert any order
CREATE POLICY "orders_insert_service_role"
  ON public.orders FOR INSERT
  WITH CHECK (auth.jwt()->>'role' = 'service_role');

-- Create new policy: Allow inserting order items for any order
-- (This is safe because orders are created via API route with validation)
CREATE POLICY "order_items_insert_any"
  ON public.order_items FOR INSERT
  WITH CHECK (true);

-- Recreate select policies for order_items
CREATE POLICY "order_items_select_vendor"
  ON public.order_items FOR SELECT
  USING (auth.uid() = vendor_id);

CREATE POLICY "order_items_select_customer"
  ON public.order_items FOR SELECT
  USING (
    EXISTS (
      SELECT 1 FROM public.orders 
      WHERE id = order_id AND customer_id = auth.uid()
    )
  );

-- Allow admins to view all orders
CREATE POLICY "orders_select_admin"
  ON public.orders FOR SELECT
  USING (
    EXISTS (
      SELECT 1 FROM public.admin_users
      WHERE email = auth.jwt()->>'email' AND is_active = true
    )
  );

-- Allow admins to view all order items
CREATE POLICY "order_items_select_admin"
  ON public.order_items FOR SELECT
  USING (
    EXISTS (
      SELECT 1 FROM public.admin_users
      WHERE email = auth.jwt()->>'email' AND is_active = true
    )
  );

-- Allow admins to update order status
CREATE POLICY "orders_update_admin"
  ON public.orders FOR UPDATE
  USING (
    EXISTS (
      SELECT 1 FROM public.admin_users
      WHERE email = auth.jwt()->>'email' AND is_active = true
    )
  );
[V0_FILE]sql:file="scripts/015_add_customer_name_to_orders.sql" isMerged="true"
-- Add customer_name column to orders table
ALTER TABLE orders ADD COLUMN IF NOT EXISTS customer_name TEXT;

-- Set default value for existing orders
UPDATE orders SET customer_name = 'Guest' WHERE customer_name IS NULL;

-- Add comment
COMMENT ON COLUMN orders.customer_name IS 'Name of the customer placing the order. Set to Guest for non-authenticated users.';
[V0_FILE]typescript:file="app/api/orders/create/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { getAdminClient } from "@/lib/supabase/server"
import { sendOrderConfirmationEmail } from "@/lib/email"

export async function POST(request: Request) {
  try {
    const body = await request.json()
    const { totalAmount, shippingAddress, items, customerName } = body

console.log("[v0] API: Creating order with", items.length, "items")

const supabase = await getAdminClient()

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

console.log("[v0] API: User ID:", user?.id || "guest")

let customerId = user?.id || null
    const finalCustomerName = customerName || "Guest"

if (user?.id) {
      const { data: existingProfile } = await supabase.from("profiles").select("id").eq("id", user.id).maybeSingle()

if (!existingProfile) {
        console.log("[v0] API: Creating profile for user:", user.id)
        const { error: profileError } = await supabase.from("profiles").insert({
          id: user.id,
          username: user.email?.split("@")[0] || "user",
          user_type: "customer",
        })

if (profileError) {
          console.error("[v0] API: Profile creation error:", profileError.message)
          customerId = null
        }
      }
    }

const { data: orderRecord, error: orderError } = await supabase
      .from("orders")
      .insert({
        customer_id: customerId,
        customer_name: finalCustomerName,
        total_amount: totalAmount,
        status: "pending",
        shipping_address: shippingAddress,
      })
      .select()
      .single()

if (orderError) {
      console.error("[v0] API: Order creation error:", orderError.message)
      return NextResponse.json({ success: false, error: orderError.message }, { status: 400 })
    }

console.log("[v0] API: Order created with ID:", orderRecord.id)

const orderItems = items.map((item: any) => ({
      order_id: orderRecord.id,
      product_id: item.id,
      quantity: item.quantity,
      price: item.price,
      vendor_id: null,
    }))

const { error: itemsError } = await supabase.from("order_items").insert(orderItems)

if (itemsError) {
      console.error("[v0] API: Order items error:", itemsError.message)
      await supabase.from("orders").delete().eq("id", orderRecord.id)
      return NextResponse.json({ success: false, error: itemsError.message }, { status: 400 })
    }

console.log("[v0] API: Order items created successfully")

try {
      // Extract email from shipping address (format: "Name, email, phone, address...")
      const addressParts = shippingAddress.split(", ")
      const customerEmail = addressParts[1] // Email is the second part

if (customerEmail && customerEmail.includes("@")) {
        console.log("[v0] API: Sending order confirmation email to:", customerEmail)

await sendOrderConfirmationEmail(customerEmail, {
          orderId: orderRecord.id,
          customerName: finalCustomerName,
          orderTotal: totalAmount,
          items: items.map((item: any) => ({
            name: item.name || "Product",
            quantity: item.quantity,
            price: item.price,
          })),
          shippingAddress: shippingAddress,
        })

console.log("[v0] API: Order confirmation email sent successfully")
      }
    } catch (emailError) {
      // Don't fail the order if email fails
      console.error("[v0] API: Failed to send order confirmation email:", emailError)
    }

return NextResponse.json({
      success: true,
      orderId: orderRecord.id,
    })
  } catch (error) {
    console.error("[v0] API: Error in order creation:", error)
    return NextResponse.json(
      {
        success: false,
        error: error instanceof Error ? error.message : "Failed to create order",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]sql:file="scripts/016_create_promotions_table.sql" isMerged="true"
-- Create promotions table for managing discount codes and promotional campaigns
CREATE TABLE IF NOT EXISTS public.promotions (
  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  code text UNIQUE NOT NULL,
  name text NOT NULL,
  description text,
  discount_type text NOT NULL CHECK (discount_type IN ('percentage', 'flat')),
  discount_value numeric(10,2) NOT NULL CHECK (discount_value > 0),
  min_order_amount numeric(10,2) DEFAULT 0,
  max_discount_amount numeric(10,2),
  usage_limit integer,
  used_count integer DEFAULT 0,
  valid_from timestamp with time zone NOT NULL,
  valid_to timestamp with time zone NOT NULL,
  is_active boolean DEFAULT true,
  applicable_to text DEFAULT 'all' CHECK (applicable_to IN ('all', 'categories', 'products')),
  applicable_ids jsonb DEFAULT '[]'::jsonb,
  created_at timestamp with time zone DEFAULT now(),
  updated_at timestamp with time zone DEFAULT now(),
  CONSTRAINT valid_dates CHECK (valid_to > valid_from)
);

-- Create index for faster lookups
CREATE INDEX IF NOT EXISTS idx_promotions_code ON public.promotions(code);
CREATE INDEX IF NOT EXISTS idx_promotions_active ON public.promotions(is_active);
CREATE INDEX IF NOT EXISTS idx_promotions_dates ON public.promotions(valid_from, valid_to);

-- Enable RLS
ALTER TABLE public.promotions ENABLE ROW LEVEL SECURITY;

-- Create policies
CREATE POLICY "Allow public to read active promotions"
  ON public.promotions FOR SELECT
  USING (is_active = true AND valid_from <= now() AND valid_to >= now());

CREATE POLICY "Allow service role full access to promotions"
  ON public.promotions FOR ALL
  USING (true)
  WITH CHECK (true);

-- Add trigger to update updated_at
CREATE OR REPLACE FUNCTION update_promotions_updated_at()
RETURNS TRIGGER AS $$
BEGIN
  NEW.updated_at = now();
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER promotions_updated_at
  BEFORE UPDATE ON public.promotions
  FOR EACH ROW
  EXECUTE FUNCTION update_promotions_updated_at();
[V0_FILE]typescriptreact:file="app/admin/promotions/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="flex items-center justify-center h-96">
      <div className="text-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-amber-500 mx-auto"></div>
        <p className="mt-4 text-gray-600">Loading...</p>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/017_create_settings_table.sql" isMerged="true"
-- Create settings table for storing site configuration
CREATE TABLE IF NOT EXISTS public.settings (
  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  key text UNIQUE NOT NULL,
  value text,
  category text NOT NULL DEFAULT 'general',
  description text,
  data_type text NOT NULL DEFAULT 'text', -- text, number, boolean, json, image
  is_public boolean DEFAULT false, -- whether this setting can be accessed publicly
  created_at timestamp with time zone DEFAULT now(),
  updated_at timestamp with time zone DEFAULT now()
);

-- Enable RLS
ALTER TABLE public.settings ENABLE ROW LEVEL SECURITY;

-- Create policies
CREATE POLICY "settings_select_all" ON public.settings FOR SELECT USING (true);
CREATE POLICY "settings_insert_admin" ON public.settings FOR INSERT WITH CHECK (true);
CREATE POLICY "settings_update_admin" ON public.settings FOR UPDATE USING (true);
CREATE POLICY "settings_delete_admin" ON public.settings FOR DELETE USING (true);

-- Create indexes
CREATE INDEX IF NOT EXISTS idx_settings_key ON public.settings(key);
CREATE INDEX IF NOT EXISTS idx_settings_category ON public.settings(category);

-- Insert default settings
INSERT INTO public.settings (key, value, category, description, data_type, is_public) VALUES
  -- General Settings
  ('site_name', 'TradeGateStore', 'general', 'Website name', 'text', true),
  ('site_tagline', 'Your One-Stop Marketplace', 'general', 'Website tagline', 'text', true),
  ('site_description', 'TradeGateStore is a comprehensive marketplace platform', 'general', 'Website description', 'text', true),
  ('site_logo', '/logo.png', 'general', 'Website logo URL', 'image', true),
  ('site_favicon', '/favicon.ico', 'general', 'Website favicon URL', 'image', true),
  ('contact_email', 'contact@tradegatestore.com', 'general', 'Contact email address', 'text', true),
  ('contact_phone', '+1 234 567 8900', 'general', 'Contact phone number', 'text', true),
  ('contact_address', '123 Business St, City, Country', 'general', 'Business address', 'text', true),
  
  -- Social Media
  ('social_facebook', '', 'social', 'Facebook page URL', 'text', true),
  ('social_twitter', '', 'social', 'Twitter profile URL', 'text', true),
  ('social_instagram', '', 'social', 'Instagram profile URL', 'text', true),
  ('social_linkedin', '', 'social', 'LinkedIn profile URL', 'text', true),
  ('social_youtube', '', 'social', 'YouTube channel URL', 'text', true),
  
  -- Payment Settings
  ('currency', 'USD', 'payment', 'Default currency', 'text', true),
  ('currency_symbol', '$', 'payment', 'Currency symbol', 'text', true),
  ('tax_enabled', 'true', 'payment', 'Enable tax calculation', 'boolean', false),
  ('tax_rate', '10', 'payment', 'Default tax rate (%)', 'number', false),
  
  -- Shipping Settings
  ('shipping_enabled', 'true', 'shipping', 'Enable shipping', 'boolean', false),
  ('free_shipping_threshold', '100', 'shipping', 'Free shipping minimum order amount', 'number', true),
  ('default_shipping_cost', '10', 'shipping', 'Default shipping cost', 'number', true),
  
  -- Email Settings
  ('email_from_name', 'TradeGateStore', 'email', 'Email sender name', 'text', false),
  ('email_from_address', 'noreply@tradegatestore.com', 'email', 'Email sender address', 'text', false),
  
  -- SEO Settings
  ('seo_meta_title', 'TradeGateStore - Your One-Stop Marketplace', 'seo', 'Default meta title', 'text', true),
  ('seo_meta_description', 'Shop the best products at TradeGateStore', 'seo', 'Default meta description', 'text', true),
  ('seo_meta_keywords', 'marketplace, shopping, ecommerce', 'seo', 'Default meta keywords', 'text', true),
  ('google_analytics_id', '', 'seo', 'Google Analytics tracking ID', 'text', false),
  
  -- Maintenance
  ('maintenance_mode', 'false', 'maintenance', 'Enable maintenance mode', 'boolean', false),
  ('maintenance_message', 'We are currently under maintenance. Please check back soon.', 'maintenance', 'Maintenance mode message', 'text', true)
ON CONFLICT (key) DO NOTHING;

COMMENT ON TABLE public.settings IS 'Stores site-wide configuration settings';
[V0_FILE]typescriptreact:file="app/admin/settings/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
import { useToast } from "@/hooks/use-toast"
import { createClient } from "@/lib/supabase/client"
import { Save, Loader2, SettingsIcon, Globe, CreditCard, Truck, Mail, Search } from "lucide-react"

interface Setting {
  id: string
  key: string
  value: string
  category: string
  description: string
  data_type: string
  is_public: boolean
}

export default function SettingsPage() {
  const [settings, setSettings] = useState<Setting[]>([])
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const { toast } = useToast()
  const supabase = createClient()

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

const fetchSettings = async () => {
    try {
      const { data, error } = await supabase
        .from("settings")
        .select("*")
        .order("category", { ascending: true })
        .order("key", { ascending: true })

if (error) throw error
      setSettings(data || [])
    } catch (error) {
      console.error("Error fetching settings:", error)
      toast({
        title: "Error",
        description: "Failed to load settings",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const handleSave = async () => {
    setSaving(true)
    try {
      // Update all settings
      const updates = settings.map((setting) =>
        supabase
          .from("settings")
          .update({ value: setting.value, updated_at: new Date().toISOString() })
          .eq("id", setting.id),
      )

await Promise.all(updates)

toast({
        title: "Success",
        description: "Settings saved successfully",
      })
    } catch (error) {
      console.error("Error saving settings:", error)
      toast({
        title: "Error",
        description: "Failed to save settings",
        variant: "destructive",
      })
    } finally {
      setSaving(false)
    }
  }

const updateSetting = (key: string, value: string) => {
    setSettings((prev) => prev.map((s) => (s.key === key ? { ...s, value } : s)))
  }

const getSettingValue = (key: string) => {
    return settings.find((s) => s.key === key)?.value || ""
  }

const getSettingsByCategory = (category: string) => {
    return settings.filter((s) => s.category === category)
  }

const renderSettingInput = (setting: Setting) => {
    switch (setting.data_type) {
      case "boolean":
        return (
          <Switch
            checked={setting.value === "true"}
            onCheckedChange={(checked) => updateSetting(setting.key, checked ? "true" : "false")}
          />
        )
      case "number":
        return (
          <Input
            type="number"
            value={setting.value}
            onChange={(e) => updateSetting(setting.key, e.target.value)}
            placeholder={setting.description}
          />
        )
      case "text":
      default:
        if (
          setting.description?.toLowerCase().includes("address") ||
          setting.description?.toLowerCase().includes("message")
        ) {
          return (
            <Textarea
              value={setting.value}
              onChange={(e) => updateSetting(setting.key, e.target.value)}
              placeholder={setting.description}
              rows={3}
            />
          )
        }
        return (
          <Input
            type="text"
            value={setting.value}
            onChange={(e) => updateSetting(setting.key, e.target.value)}
            placeholder={setting.description}
          />
        )
    }
  }

if (loading) {
    return (
      <div className="flex items-center justify-center h-96">
        <Loader2 className="h-8 w-8 animate-spin text-amber-500" />
      </div>
    )
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Settings</h1>
          <p className="text-muted-foreground">Manage your site configuration and preferences</p>
        </div>
        <Button onClick={handleSave} disabled={saving}>
          {saving ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              Saving...
            </>
          ) : (
            <>
              <Save className="mr-2 h-4 w-4" />
              Save Changes
            </>
          )}
        </Button>
      </div>

<Tabs defaultValue="general" className="space-y-4">
        <TabsList>
          <TabsTrigger value="general">
            <SettingsIcon className="mr-2 h-4 w-4" />
            General
          </TabsTrigger>
          <TabsTrigger value="social">
            <Globe className="mr-2 h-4 w-4" />
            Social Media
          </TabsTrigger>
          <TabsTrigger value="payment">
            <CreditCard className="mr-2 h-4 w-4" />
            Payment
          </TabsTrigger>
          <TabsTrigger value="shipping">
            <Truck className="mr-2 h-4 w-4" />
            Shipping
          </TabsTrigger>
          <TabsTrigger value="email">
            <Mail className="mr-2 h-4 w-4" />
            Email
          </TabsTrigger>
          <TabsTrigger value="seo">
            <Search className="mr-2 h-4 w-4" />
            SEO
          </TabsTrigger>
        </TabsList>

<TabsContent value="general" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>General Settings</CardTitle>
              <CardDescription>Configure basic site information and contact details</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {getSettingsByCategory("general").map((setting) => (
                <div key={setting.id} className="space-y-2">
                  <Label htmlFor={setting.key}>
                    {setting.description}
                    {setting.is_public && <span className="ml-2 text-xs text-muted-foreground">(Public)</span>}
                  </Label>
                  {renderSettingInput(setting)}
                </div>
              ))}
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="social" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Social Media Links</CardTitle>
              <CardDescription>Add your social media profile URLs</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {getSettingsByCategory("social").map((setting) => (
                <div key={setting.id} className="space-y-2">
                  <Label htmlFor={setting.key}>{setting.description}</Label>
                  {renderSettingInput(setting)}
                </div>
              ))}
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="payment" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Payment Settings</CardTitle>
              <CardDescription>Configure payment and currency options</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {getSettingsByCategory("payment").map((setting) => (
                <div key={setting.id} className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label htmlFor={setting.key}>{setting.description}</Label>
                    {setting.data_type === "boolean" && renderSettingInput(setting)}
                  </div>
                  {setting.data_type !== "boolean" && renderSettingInput(setting)}
                </div>
              ))}
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="shipping" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Shipping Settings</CardTitle>
              <CardDescription>Configure shipping options and costs</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {getSettingsByCategory("shipping").map((setting) => (
                <div key={setting.id} className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label htmlFor={setting.key}>{setting.description}</Label>
                    {setting.data_type === "boolean" && renderSettingInput(setting)}
                  </div>
                  {setting.data_type !== "boolean" && renderSettingInput(setting)}
                </div>
              ))}
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="email" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Email Settings</CardTitle>
              <CardDescription>Configure email sender information</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {getSettingsByCategory("email").map((setting) => (
                <div key={setting.id} className="space-y-2">
                  <Label htmlFor={setting.key}>{setting.description}</Label>
                  {renderSettingInput(setting)}
                </div>
              ))}
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="seo" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>SEO Settings</CardTitle>
              <CardDescription>Configure search engine optimization settings</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {getSettingsByCategory("seo").map((setting) => (
                <div key={setting.id} className="space-y-2">
                  <Label htmlFor={setting.key}>{setting.description}</Label>
                  {renderSettingInput(setting)}
                </div>
              ))}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/settings/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function SettingsLoading() {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div className="space-y-2">
          <Skeleton className="h-8 w-48" />
          <Skeleton className="h-4 w-96" />
        </div>
        <Skeleton className="h-10 w-32" />
      </div>
      <Skeleton className="h-96 w-full" />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/analytics/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function AnalyticsLoading() {
  return (
    <div className="p-8 space-y-6">
      <div className="flex items-center justify-between">
        <Skeleton className="h-8 w-48" />
        <Skeleton className="h-10 w-32" />
      </div>
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
        {[1, 2, 3, 4].map((i) => (
          <Skeleton key={i} className="h-32" />
        ))}
      </div>
      <div className="grid gap-6 md:grid-cols-2">
        <Skeleton className="h-96" />
        <Skeleton className="h-96" />
      </div>
      <div className="grid gap-6 md:grid-cols-2">
        <Skeleton className="h-96" />
        <Skeleton className="h-96" />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/analytics/page.tsx" isEdit="true" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { getAdminClient } from "@/lib/supabase/server"
import { DollarSign, ShoppingCart, Users, Package, TrendingUp, TrendingDown } from "lucide-react"
import {
  Line,
  LineChart,
  Bar,
  BarChart,
  XAxis,
  YAxis,
  CartesianGrid,
  Legend,
  ResponsiveContainer,
  Pie,
  PieChart,
  Cell,
} from "recharts"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { TimeRangeSelector } from "./time-range-selector"

interface AnalyticsData {
  totalRevenue: number
  totalOrders: number
  totalCustomers: number
  totalProducts: number
  revenueChange: number
  ordersChange: number
  customersChange: number
  productsChange: number
  revenueByDay: Array<{ date: string; revenue: number }>
  ordersByStatus: Array<{ status: string; count: number }>
  topProducts: Array<{ name: string; sold: number; revenue: number }>
  recentOrders: Array<{ id: string; customer_name: string; total: number; status: string; date: string }>
}

const COLORS = ["#f59e0b", "#10b981", "#3b82f6", "#ef4444", "#8b5cf6"]

export default async function AnalyticsPage({
  searchParams,
}: {
  searchParams: { range?: string }
}) {
  const timeRange = searchParams.range || "7"
  const data = await loadAnalytics(timeRange)

if (!data) {
    return (
      <div className="p-8">
        <p className="text-muted-foreground">Failed to load analytics data</p>
      </div>
    )
  }

return (
    <div className="p-8 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Analytics</h1>
          <p className="text-muted-foreground">Track your store performance and insights</p>
        </div>
        <TimeRangeSelector currentRange={timeRange} />
      </div>

{/* Key Metrics */}
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">${data.totalRevenue.toLocaleString()}</div>
            <p className="text-xs text-muted-foreground flex items-center gap-1 mt-1">
              {data.revenueChange >= 0 ? (
                <>
                  <TrendingUp className="h-3 w-3 text-green-500" />
                  <span className="text-green-500">+{data.revenueChange}%</span>
                </>
              ) : (
                <>
                  <TrendingDown className="h-3 w-3 text-red-500" />
                  <span className="text-red-500">{data.revenueChange}%</span>
                </>
              )}
              <span>from previous period</span>
            </p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Total Orders</CardTitle>
            <ShoppingCart className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{data.totalOrders.toLocaleString()}</div>
            <p className="text-xs text-muted-foreground flex items-center gap-1 mt-1">
              {data.ordersChange >= 0 ? (
                <>
                  <TrendingUp className="h-3 w-3 text-green-500" />
                  <span className="text-green-500">+{data.ordersChange}%</span>
                </>
              ) : (
                <>
                  <TrendingDown className="h-3 w-3 text-red-500" />
                  <span className="text-red-500">{data.ordersChange}%</span>
                </>
              )}
              <span>from previous period</span>
            </p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Total Customers</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{data.totalCustomers.toLocaleString()}</div>
            <p className="text-xs text-muted-foreground flex items-center gap-1 mt-1">
              {data.customersChange >= 0 ? (
                <>
                  <TrendingUp className="h-3 w-3 text-green-500" />
                  <span className="text-green-500">+{data.customersChange}%</span>
                </>
              ) : (
                <>
                  <TrendingDown className="h-3 w-3 text-red-500" />
                  <span className="text-red-500">{data.customersChange}%</span>
                </>
              )}
              <span>from previous period</span>
            </p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Total Products</CardTitle>
            <Package className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{data.totalProducts.toLocaleString()}</div>
            <p className="text-xs text-muted-foreground flex items-center gap-1 mt-1">
              {data.productsChange >= 0 ? (
                <>
                  <TrendingUp className="h-3 w-3 text-green-500" />
                  <span className="text-green-500">+{data.productsChange}%</span>
                </>
              ) : (
                <>
                  <TrendingDown className="h-3 w-3 text-red-500" />
                  <span className="text-red-500">{data.productsChange}%</span>
                </>
              )}
              <span>from previous period</span>
            </p>
          </CardContent>
        </Card>
      </div>

{/* Charts */}
      <div className="grid gap-6 md:grid-cols-2">
        {/* Revenue Chart */}
        <Card>
          <CardHeader>
            <CardTitle>Revenue Over Time</CardTitle>
            <CardDescription>Daily revenue for the selected period</CardDescription>
          </CardHeader>
          <CardContent>
            <ChartContainer
              config={{
                revenue: {
                  label: "Revenue",
                  color: "hsl(var(--chart-1))",
                },
              }}
              className="h-80"
            >
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={data.revenueByDay}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="date" />
                  <YAxis />
                  <ChartTooltip content={<ChartTooltipContent />} />
                  <Line type="monotone" dataKey="revenue" stroke="var(--color-revenue)" strokeWidth={2} />
                </LineChart>
              </ResponsiveContainer>
            </ChartContainer>
          </CardContent>
        </Card>

{/* Orders by Status */}
        <Card>
          <CardHeader>
            <CardTitle>Orders by Status</CardTitle>
            <CardDescription>Distribution of order statuses</CardDescription>
          </CardHeader>
          <CardContent>
            <ChartContainer
              config={{
                count: {
                  label: "Orders",
                  color: "hsl(var(--chart-2))",
                },
              }}
              className="h-80"
            >
              <ResponsiveContainer width="100%" height="100%">
                <PieChart>
                  <Pie
                    data={data.ordersByStatus}
                    dataKey="count"
                    nameKey="status"
                    cx="50%"
                    cy="50%"
                    outerRadius={100}
                    label
                  >
                    {data.ordersByStatus.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                    ))}
                  </Pie>
                  <ChartTooltip content={<ChartTooltipContent />} />
                  <Legend />
                </PieChart>
              </ResponsiveContainer>
            </ChartContainer>
          </CardContent>
        </Card>
      </div>

{/* Top Products and Recent Orders */}
      <div className="grid gap-6 md:grid-cols-2">
        {/* Top Products */}
        <Card>
          <CardHeader>
            <CardTitle>Top Selling Products</CardTitle>
            <CardDescription>Best performing products by revenue</CardDescription>
          </CardHeader>
          <CardContent>
            <ChartContainer
              config={{
                revenue: {
                  label: "Revenue",
                  color: "hsl(var(--chart-3))",
                },
              }}
              className="h-80"
            >
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={data.topProducts} layout="vertical">
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis type="number" />
                  <YAxis dataKey="name" type="category" width={120} />
                  <ChartTooltip content={<ChartTooltipContent />} />
                  <Bar dataKey="revenue" fill="var(--color-revenue)" />
                </BarChart>
              </ResponsiveContainer>
            </ChartContainer>
          </CardContent>
        </Card>

{/* Recent Orders */}
        <Card>
          <CardHeader>
            <CardTitle>Recent Orders</CardTitle>
            <CardDescription>Latest orders from customers</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {data.recentOrders.map((order) => (
                <div key={order.id} className="flex items-center justify-between border-b pb-3 last:border-0">
                  <div>
                    <p className="font-medium">{order.customer_name}</p>
                    <p className="text-sm text-muted-foreground">{order.date}</p>
                  </div>
                  <div className="text-right">
                    <p className="font-medium">${order.total.toLocaleString()}</p>
                    <p className="text-sm">
                      <span
                        className={`inline-block px-2 py-0.5 rounded-full text-xs ${
                          order.status === "completed"
                            ? "bg-green-100 text-green-700"
                            : order.status === "pending"
                              ? "bg-yellow-100 text-yellow-700"
                              : order.status === "processing"
                                ? "bg-blue-100 text-blue-700"
                                : "bg-gray-100 text-gray-700"
                        }`}
                      >
                        {order.status}
                      </span>
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

async function loadAnalytics(timeRange: string): Promise<AnalyticsData | null> {
  try {
    const supabase = await getAdminClient()

const daysAgo = Number.parseInt(timeRange)
    const startDate = new Date()
    startDate.setDate(startDate.getDate() - daysAgo)

// Get total revenue and orders
    const { data: orders } = await supabase
      .from("orders")
      .select("total_amount, status, created_at, customer_name, id")
      .gte("created_at", startDate.toISOString())

const totalRevenue = orders?.reduce((sum, order) => sum + Number(order.total_amount || 0), 0) || 0
    const totalOrders = orders?.length || 0

// Get previous period for comparison
    const prevStartDate = new Date(startDate)
    prevStartDate.setDate(prevStartDate.getDate() - daysAgo)
    const { data: prevOrders } = await supabase
      .from("orders")
      .select("total_amount")
      .gte("created_at", prevStartDate.toISOString())
      .lt("created_at", startDate.toISOString())

const prevRevenue = prevOrders?.reduce((sum, order) => sum + Number(order.total_amount || 0), 0) || 0
    const prevOrderCount = prevOrders?.length || 0

const revenueChange = prevRevenue > 0 ? ((totalRevenue - prevRevenue) / prevRevenue) * 100 : 0
    const ordersChange = prevOrderCount > 0 ? ((totalOrders - prevOrderCount) / prevOrderCount) * 100 : 0

// Get total customers
    const { count: totalCustomers } = await supabase
      .from("profiles")
      .select("*", { count: "exact", head: true })
      .eq("user_type", "customer")

const { count: prevCustomers } = await supabase
      .from("profiles")
      .select("*", { count: "exact", head: true })
      .eq("user_type", "customer")
      .lt("created_at", startDate.toISOString())

const customersChange =
      prevCustomers && prevCustomers > 0 ? (((totalCustomers || 0) - prevCustomers) / prevCustomers) * 100 : 0

// Get total products
    const { count: totalProducts } = await supabase
      .from("products")
      .select("*", { count: "exact", head: true })
      .eq("is_active", true)

const { count: prevProducts } = await supabase
      .from("products")
      .select("*", { count: "exact", head: true })
      .eq("is_active", true)
      .lt("created_at", startDate.toISOString())

const productsChange =
      prevProducts && prevProducts > 0 ? (((totalProducts || 0) - prevProducts) / prevProducts) * 100 : 0

// Revenue by day
    const revenueByDay = Array.from({ length: daysAgo }, (_, i) => {
      const date = new Date()
      date.setDate(date.getDate() - (daysAgo - 1 - i))
      const dateStr = date.toISOString().split("T")[0]
      const dayOrders = orders?.filter((o) => o.created_at.startsWith(dateStr)) || []
      const revenue = dayOrders.reduce((sum, order) => sum + Number(order.total_amount || 0), 0)
      return {
        date: date.toLocaleDateString("en-US", { month: "short", day: "numeric" }),
        revenue: Math.round(revenue),
      }
    })

// Orders by status
    const statusCounts =
      orders?.reduce(
        (acc, order) => {
          acc[order.status] = (acc[order.status] || 0) + 1
          return acc
        },
        {} as Record<string, number>,
      ) || {}

const ordersByStatus = Object.entries(statusCounts).map(([status, count]) => ({
      status: status.charAt(0).toUpperCase() + status.slice(1),
      count,
    }))

// Top products
    const { data: orderItems } = await supabase
      .from("order_items")
      .select("product_id, quantity, price, products(name)")
      .gte("created_at", startDate.toISOString())

const productStats =
      orderItems?.reduce(
        (acc, item) => {
          const productName = (item.products as any)?.name || "Unknown"
          if (!acc[productName]) {
            acc[productName] = { sold: 0, revenue: 0 }
          }
          acc[productName].sold += item.quantity
          acc[productName].revenue += item.quantity * Number(item.price)
          return acc
        },
        {} as Record<string, { sold: number; revenue: number }>,
      ) || {}

const topProducts = Object.entries(productStats)
      .map(([name, stats]) => ({
        name,
        sold: stats.sold,
        revenue: Math.round(stats.revenue),
      }))
      .sort((a, b) => b.revenue - a.revenue)
      .slice(0, 5)

// Recent orders
    const recentOrders = (orders || [])
      .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
      .slice(0, 5)
      .map((order) => ({
        id: order.id,
        customer_name: order.customer_name || "Guest",
        total: Number(order.total_amount || 0),
        status: order.status,
        date: new Date(order.created_at).toLocaleDateString(),
      }))

return {
      totalRevenue: Math.round(totalRevenue),
      totalOrders,
      totalCustomers: totalCustomers || 0,
      totalProducts: totalProducts || 0,
      revenueChange: Math.round(revenueChange * 10) / 10,
      ordersChange: Math.round(ordersChange * 10) / 10,
      customersChange: Math.round(customersChange * 10) / 10,
      productsChange: Math.round(productsChange * 10) / 10,
      revenueByDay,
      ordersByStatus,
      topProducts,
      recentOrders,
    }
  } catch (error) {
    console.error("Error loading analytics:", error)
    return null
  }
}
[V0_FILE]typescriptreact:file="app/admin/analytics/time-range-selector.tsx" isMerged="true"
"use client"

import { useRouter, useSearchParams } from "next/navigation"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export function TimeRangeSelector({ currentRange }: { currentRange: string }) {
  const router = useRouter()
  const searchParams = useSearchParams()

const handleChange = (value: string) => {
    const params = new URLSearchParams(searchParams.toString())
    params.set("range", value)
    router.push(`/admin/analytics?${params.toString()}`)
  }

return (
    <Select value={currentRange} onValueChange={handleChange}>
      <SelectTrigger className="w-32">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="7">Last 7 days</SelectItem>
        <SelectItem value="14">Last 14 days</SelectItem>
        <SelectItem value="30">Last 30 days</SelectItem>
        <SelectItem value="90">Last 90 days</SelectItem>
      </SelectContent>
    </Select>
  )
}
[V0_FILE]typescriptreact:file="app/admin/reports/page.tsx" isMerged="true"
import { Suspense } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { getAdminClient } from "@/lib/supabase/server"
import { SalesReport } from "./sales-report"
import { ProductReport } from "./product-report"
import { CustomerReport } from "./customer-report"
import { VendorReport } from "./vendor-report"
import { InventoryReport } from "./inventory-report"
import { TrendingUp, Package, Users, Store, Archive } from "lucide-react"

async function loadReportsData(days = 30) {
  const supabase = await getAdminClient()
  const startDate = new Date()
  startDate.setDate(startDate.getDate() - days)

// Fetch all necessary data in parallel
  const [ordersResult, orderItemsResult, productsResult, profilesResult] = await Promise.all([
    supabase
      .from("orders")
      .select("*")
      .gte("created_at", startDate.toISOString())
      .order("created_at", { ascending: false }),
    supabase.from("order_items").select("*"),
    supabase.from("products").select("*"),
    supabase.from("profiles").select("*"),
  ])

return {
    orders: ordersResult.data || [],
    orderItems: orderItemsResult.data || [],
    products: productsResult.data || [],
    profiles: profilesResult.data || [],
  }
}

export default async function ReportsPage({
  searchParams,
}: {
  searchParams: { days?: string; tab?: string }
}) {
  const days = Number.parseInt(searchParams.days || "30")
  const activeTab = searchParams.tab || "sales"

const data = await loadReportsData(days)

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Reports</h1>
          <p className="text-muted-foreground">Generate and export business reports</p>
        </div>
      </div>

<Tabs defaultValue={activeTab} className="space-y-6">
        <TabsList className="grid w-full grid-cols-5">
          <TabsTrigger value="sales" className="flex items-center gap-2">
            <TrendingUp className="h-4 w-4" />
            Sales
          </TabsTrigger>
          <TabsTrigger value="products" className="flex items-center gap-2">
            <Package className="h-4 w-4" />
            Products
          </TabsTrigger>
          <TabsTrigger value="customers" className="flex items-center gap-2">
            <Users className="h-4 w-4" />
            Customers
          </TabsTrigger>
          <TabsTrigger value="vendors" className="flex items-center gap-2">
            <Store className="h-4 w-4" />
            Vendors
          </TabsTrigger>
          <TabsTrigger value="inventory" className="flex items-center gap-2">
            <Archive className="h-4 w-4" />
            Inventory
          </TabsTrigger>
        </TabsList>

<TabsContent value="sales" className="space-y-6">
          <Suspense fallback={<div>Loading sales report...</div>}>
            <SalesReport orders={data.orders} orderItems={data.orderItems} days={days} />
          </Suspense>
        </TabsContent>

<TabsContent value="products" className="space-y-6">
          <Suspense fallback={<div>Loading product report...</div>}>
            <ProductReport products={data.products} orderItems={data.orderItems} days={days} />
          </Suspense>
        </TabsContent>

<TabsContent value="customers" className="space-y-6">
          <Suspense fallback={<div>Loading customer report...</div>}>
            <CustomerReport orders={data.orders} profiles={data.profiles} days={days} />
          </Suspense>
        </TabsContent>

<TabsContent value="vendors" className="space-y-6">
          <Suspense fallback={<div>Loading vendor report...</div>}>
            <VendorReport products={data.products} orderItems={data.orderItems} profiles={data.profiles} days={days} />
          </Suspense>
        </TabsContent>

<TabsContent value="inventory" className="space-y-6">
          <Suspense fallback={<div>Loading inventory report...</div>}>
            <InventoryReport products={data.products} days={days} />
          </Suspense>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/reports/product-report.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Download, Package, TrendingUp, Star, AlertTriangle } from "lucide-react"
import { Badge } from "@/components/ui/badge"

type Product = {
  id: string
  name: string
  price: number
  stock_quantity: number
  sold_count: number
  rating: number
  category: string
  is_active: boolean
}

type OrderItem = {
  product_id: string
  quantity: number
  price: number
}

export function ProductReport({
  products,
  orderItems,
  days,
}: {
  products: Product[]
  orderItems: OrderItem[]
  days: number
}) {
  // Calculate product sales from order items
  const productSales = orderItems.reduce(
    (acc, item) => {
      if (!acc[item.product_id]) {
        acc[item.product_id] = { quantity: 0, revenue: 0 }
      }
      acc[item.product_id].quantity += item.quantity
      acc[item.product_id].revenue += item.quantity * Number(item.price)
      return acc
    },
    {} as Record<string, { quantity: number; revenue: number }>,
  )

// Enrich products with sales data
  const productsWithSales = products.map((product) => ({
    ...product,
    salesQuantity: productSales[product.id]?.quantity || 0,
    salesRevenue: productSales[product.id]?.revenue || 0,
  }))

// Sort by sales quantity
  const topProducts = [...productsWithSales].sort((a, b) => b.salesQuantity - a.salesQuantity).slice(0, 10)

const lowStockProducts = products.filter((p) => p.stock_quantity < 10 && p.is_active)
  const outOfStockProducts = products.filter((p) => p.stock_quantity === 0 && p.is_active)

const handleExport = () => {
    const csvContent = [
      ["Product Name", "Category", "Price", "Stock", "Sales Qty", "Revenue", "Rating"],
      ...productsWithSales.map((product) => [
        product.name,
        product.category || "N/A",
        product.price.toString(),
        product.stock_quantity.toString(),
        product.salesQuantity.toString(),
        product.salesRevenue.toFixed(2),
        (product.rating || 0).toString(),
      ]),
    ]
      .map((row) => row.join(","))
      .join("\n")

const blob = new Blob([csvContent], { type: "text/csv" })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `product-report-${new Date().toISOString().split("T")[0]}.csv`
    a.click()
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold">Product Performance Report</h2>
          <p className="text-muted-foreground">Last {days} days</p>
        </div>
        <Button onClick={handleExport}>
          <Download className="h-4 w-4 mr-2" />
          Export CSV
        </Button>
      </div>

<div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Products</CardTitle>
            <Package className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{products.length}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Active Products</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{products.filter((p) => p.is_active).length}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Low Stock</CardTitle>
            <AlertTriangle className="h-4 w-4 text-yellow-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{lowStockProducts.length}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Out of Stock</CardTitle>
            <AlertTriangle className="h-4 w-4 text-red-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{outOfStockProducts.length}</div>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Top Selling Products</CardTitle>
          <CardDescription>Products with highest sales in the selected period</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Product Name</TableHead>
                <TableHead>Category</TableHead>
                <TableHead>Price</TableHead>
                <TableHead>Stock</TableHead>
                <TableHead>Sales Qty</TableHead>
                <TableHead>Revenue</TableHead>
                <TableHead>Rating</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {topProducts.map((product) => (
                <TableRow key={product.id}>
                  <TableCell className="font-medium">{product.name}</TableCell>
                  <TableCell>{product.category || "N/A"}</TableCell>
                  <TableCell>${Number(product.price).toFixed(2)}</TableCell>
                  <TableCell>
                    <Badge
                      variant={
                        product.stock_quantity === 0
                          ? "destructive"
                          : product.stock_quantity < 10
                            ? "secondary"
                            : "default"
                      }
                    >
                      {product.stock_quantity}
                    </Badge>
                  </TableCell>
                  <TableCell>{product.salesQuantity}</TableCell>
                  <TableCell>${product.salesRevenue.toFixed(2)}</TableCell>
                  <TableCell>
                    <div className="flex items-center gap-1">
                      <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                      {(product.rating || 0).toFixed(1)}
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/reports/customer-report.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Download, Users, UserPlus, DollarSign, ShoppingCart } from "lucide-react"

type Order = {
  id: string
  customer_id: string | null
  customer_name: string | null
  total_amount: number
  created_at: string
}

type Profile = {
  id: string
  username: string | null
  user_type: string
  created_at: string
}

export function CustomerReport({ orders, profiles, days }: { orders: Order[]; profiles: Profile[]; days: number }) {
  const customers = profiles.filter((p) => p.user_type === "customer")

// Calculate customer statistics
  const customerStats = orders.reduce(
    (acc, order) => {
      if (order.customer_id) {
        if (!acc[order.customer_id]) {
          acc[order.customer_id] = {
            id: order.customer_id,
            name: order.customer_name || "Unknown",
            orderCount: 0,
            totalSpent: 0,
          }
        }
        acc[order.customer_id].orderCount++
        acc[order.customer_id].totalSpent += Number(order.total_amount)
      }
      return acc
    },
    {} as Record<string, { id: string; name: string; orderCount: number; totalSpent: number }>,
  )

const topCustomers = Object.values(customerStats)
    .sort((a, b) => b.totalSpent - a.totalSpent)
    .slice(0, 10)

const guestOrders = orders.filter((o) => !o.customer_id).length
  const totalCustomerSpending = Object.values(customerStats).reduce((sum, c) => sum + c.totalSpent, 0)

const handleExport = () => {
    const csvContent = [
      ["Customer ID", "Customer Name", "Orders", "Total Spent"],
      ...topCustomers.map((customer) => [
        customer.id,
        customer.name,
        customer.orderCount.toString(),
        customer.totalSpent.toFixed(2),
      ]),
    ]
      .map((row) => row.join(","))
      .join("\n")

const blob = new Blob([csvContent], { type: "text/csv" })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `customer-report-${new Date().toISOString().split("T")[0]}.csv`
    a.click()
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold">Customer Report</h2>
          <p className="text-muted-foreground">Last {days} days</p>
        </div>
        <Button onClick={handleExport}>
          <Download className="h-4 w-4 mr-2" />
          Export CSV
        </Button>
      </div>

<div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Customers</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{customers.length}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Active Customers</CardTitle>
            <UserPlus className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{Object.keys(customerStats).length}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Guest Orders</CardTitle>
            <ShoppingCart className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{guestOrders}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Spending</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">${totalCustomerSpending.toFixed(2)}</div>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Top Customers</CardTitle>
          <CardDescription>Customers with highest spending in the selected period</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Customer Name</TableHead>
                <TableHead>Total Orders</TableHead>
                <TableHead>Total Spent</TableHead>
                <TableHead>Avg Order Value</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {topCustomers.map((customer) => (
                <TableRow key={customer.id}>
                  <TableCell className="font-medium">{customer.name}</TableCell>
                  <TableCell>{customer.orderCount}</TableCell>
                  <TableCell>${customer.totalSpent.toFixed(2)}</TableCell>
                  <TableCell>${(customer.totalSpent / customer.orderCount).toFixed(2)}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/reports/vendor-report.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Download, Store, Package, DollarSign, TrendingUp } from "lucide-react"

type Product = {
  id: string
  vendor_id: string | null
  name: string
  is_inhouse: boolean
}

type OrderItem = {
  product_id: string
  vendor_id: string | null
  quantity: number
  price: number
}

type Profile = {
  id: string
  username: string | null
  business_name: string | null
  user_type: string
  total_sales: number
}

export function VendorReport({
  products,
  orderItems,
  profiles,
  days,
}: {
  products: Product[]
  orderItems: OrderItem[]
  profiles: Profile[]
  days: number
}) {
  const vendors = profiles.filter((p) => p.user_type === "vendor")

// Calculate vendor statistics
  const vendorStats = orderItems.reduce(
    (acc, item) => {
      if (item.vendor_id) {
        if (!acc[item.vendor_id]) {
          const vendor = vendors.find((v) => v.id === item.vendor_id)
          acc[item.vendor_id] = {
            id: item.vendor_id,
            name: vendor?.business_name || vendor?.username || "Unknown",
            productCount: 0,
            salesCount: 0,
            revenue: 0,
          }
        }
        acc[item.vendor_id].salesCount += item.quantity
        acc[item.vendor_id].revenue += item.quantity * Number(item.price)
      }
      return acc
    },
    {} as Record<string, { id: string; name: string; productCount: number; salesCount: number; revenue: number }>,
  )

// Count products per vendor
  products.forEach((product) => {
    if (product.vendor_id && vendorStats[product.vendor_id]) {
      vendorStats[product.vendor_id].productCount++
    }
  })

const topVendors = Object.values(vendorStats)
    .sort((a, b) => b.revenue - a.revenue)
    .slice(0, 10)

const totalVendorRevenue = Object.values(vendorStats).reduce((sum, v) => sum + v.revenue, 0)
  const vendorProducts = products.filter((p) => !p.is_inhouse).length

const handleExport = () => {
    const csvContent = [
      ["Vendor Name", "Products", "Sales Count", "Revenue"],
      ...topVendors.map((vendor) => [
        vendor.name,
        vendor.productCount.toString(),
        vendor.salesCount.toString(),
        vendor.revenue.toFixed(2),
      ]),
    ]
      .map((row) => row.join(","))
      .join("\n")

const blob = new Blob([csvContent], { type: "text/csv" })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `vendor-report-${new Date().toISOString().split("T")[0]}.csv`
    a.click()
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold">Vendor Performance Report</h2>
          <p className="text-muted-foreground">Last {days} days</p>
        </div>
        <Button onClick={handleExport}>
          <Download className="h-4 w-4 mr-2" />
          Export CSV
        </Button>
      </div>

<div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Vendors</CardTitle>
            <Store className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{vendors.length}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Vendor Products</CardTitle>
            <Package className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{vendorProducts}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Active Vendors</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{Object.keys(vendorStats).length}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">${totalVendorRevenue.toFixed(2)}</div>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Top Performing Vendors</CardTitle>
          <CardDescription>Vendors with highest revenue in the selected period</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Vendor Name</TableHead>
                <TableHead>Products</TableHead>
                <TableHead>Sales Count</TableHead>
                <TableHead>Revenue</TableHead>
                <TableHead>Avg Sale Value</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {topVendors.map((vendor) => (
                <TableRow key={vendor.id}>
                  <TableCell className="font-medium">{vendor.name}</TableCell>
                  <TableCell>{vendor.productCount}</TableCell>
                  <TableCell>{vendor.salesCount}</TableCell>
                  <TableCell>${vendor.revenue.toFixed(2)}</TableCell>
                  <TableCell>
                    ${vendor.salesCount > 0 ? (vendor.revenue / vendor.salesCount).toFixed(2) : "0.00"}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/reports/inventory-report.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Download, Package, AlertTriangle, XCircle, TrendingDown } from "lucide-react"
import { Badge } from "@/components/ui/badge"

type Product = {
  id: string
  name: string
  sku: string | null
  category: string | null
  stock_quantity: number
  price: number
  is_active: boolean
}

export function InventoryReport({ products, days }: { products: Product[]; days: number }) {
  const lowStockProducts = products.filter((p) => p.stock_quantity < 10 && p.stock_quantity > 0 && p.is_active)
  const outOfStockProducts = products.filter((p) => p.stock_quantity === 0 && p.is_active)
  const totalInventoryValue = products.reduce((sum, p) => sum + p.stock_quantity * Number(p.price), 0)

const handleExport = () => {
    const csvContent = [
      ["Product Name", "SKU", "Category", "Stock Quantity", "Price", "Inventory Value", "Status"],
      ...products.map((product) => [
        product.name,
        product.sku || "N/A",
        product.category || "N/A",
        product.stock_quantity.toString(),
        product.price.toString(),
        (product.stock_quantity * Number(product.price)).toFixed(2),
        product.stock_quantity === 0 ? "Out of Stock" : product.stock_quantity < 10 ? "Low Stock" : "In Stock",
      ]),
    ]
      .map((row) => row.join(","))
      .join("\n")

const blob = new Blob([csvContent], { type: "text/csv" })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `inventory-report-${new Date().toISOString().split("T")[0]}.csv`
    a.click()
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold">Inventory Report</h2>
          <p className="text-muted-foreground">Current stock levels</p>
        </div>
        <Button onClick={handleExport}>
          <Download className="h-4 w-4 mr-2" />
          Export CSV
        </Button>
      </div>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Low Stock Items</CardTitle>
            <AlertTriangle className="h-4 w-4 text-yellow-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{lowStockProducts.length}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Out of Stock</CardTitle>
            <XCircle className="h-4 w-4 text-red-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{outOfStockProducts.length}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Inventory Value</CardTitle>
            <TrendingDown className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">${totalInventoryValue.toFixed(2)}</div>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Low Stock & Out of Stock Items</CardTitle>
          <CardDescription>Products that need restocking</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Product Name</TableHead>
                <TableHead>SKU</TableHead>
                <TableHead>Category</TableHead>
                <TableHead>Stock</TableHead>
                <TableHead>Price</TableHead>
                <TableHead>Status</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {[...outOfStockProducts, ...lowStockProducts].slice(0, 20).map((product) => (
                <TableRow key={product.id}>
                  <TableCell className="font-medium">{product.name}</TableCell>
                  <TableCell className="font-mono text-xs">{product.sku || "N/A"}</TableCell>
                  <TableCell>{product.category || "N/A"}</TableCell>
                  <TableCell>
                    <Badge variant={product.stock_quantity === 0 ? "destructive" : "secondary"}>
                      {product.stock_quantity}
                    </Badge>
                  </TableCell>
                  <TableCell>${Number(product.price).toFixed(2)}</TableCell>
                  <TableCell>
                    <Badge variant={product.stock_quantity === 0 ? "destructive" : "secondary"}>
                      {product.stock_quantity === 0 ? "Out of Stock" : "Low Stock"}
                    </Badge>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/reports/loading.tsx" isMerged="true"
export default function ReportsLoading() {
  return (
    <div className="space-y-6">
      <div className="h-8 w-48 bg-muted animate-pulse rounded" />
      <div className="grid gap-4 md:grid-cols-4">
        {[...Array(4)].map((_, i) => (
          <div key={i} className="h-32 bg-muted animate-pulse rounded-lg" />
        ))}
      </div>
      <div className="h-96 bg-muted animate-pulse rounded-lg" />
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

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

:root {
  /* Cream/Neutral backgrounds */
  --background: oklch(0.98 0.005 85);
  --foreground: oklch(0.2 0.01 30);

/* Card backgrounds */
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2 0.01 30);

/* Popover */
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.2 0.01 30);

/* Primary - Orange/Red from logo */
  --primary: oklch(0.62 0.19 35);
  --primary-foreground: oklch(1 0 0);

/* Secondary - Warm gray */
  --secondary: oklch(0.95 0.01 85);
  --secondary-foreground: oklch(0.3 0.01 30);

/* Muted */
  --muted: oklch(0.96 0.005 85);
  --muted-foreground: oklch(0.5 0.01 30);

/* Accent - Deeper orange */
  --accent: oklch(0.55 0.22 40);
  --accent-foreground: oklch(1 0 0);

/* Destructive */
  --destructive: oklch(0.55 0.22 25);
  --destructive-foreground: oklch(1 0 0);

/* Border and input */
  --border: oklch(0.9 0.01 85);
  --input: oklch(0.9 0.01 85);
  --ring: oklch(0.62 0.19 35);

/* Charts */
  --chart-1: oklch(0.62 0.19 35);
  --chart-2: oklch(0.55 0.22 40);
  --chart-3: oklch(0.7 0.15 30);
  --chart-4: oklch(0.45 0.18 35);
  --chart-5: oklch(0.8 0.12 40);

--radius: 0.5rem;

/* Sidebar */
  --sidebar: oklch(1 0 0);
  --sidebar-foreground: oklch(0.2 0.01 30);
  --sidebar-primary: oklch(0.62 0.19 35);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.96 0.005 85);
  --sidebar-accent-foreground: oklch(0.3 0.01 30);
  --sidebar-border: oklch(0.9 0.01 85);
  --sidebar-ring: oklch(0.62 0.19 35);
}

.dark {
  --background: oklch(0.15 0.01 30);
  --foreground: oklch(0.98 0.005 85);

--card: oklch(0.18 0.01 30);
  --card-foreground: oklch(0.98 0.005 85);

--popover: oklch(0.18 0.01 30);
  --popover-foreground: oklch(0.98 0.005 85);

--primary: oklch(0.65 0.19 35);
  --primary-foreground: oklch(0.98 0.005 85);

--secondary: oklch(0.25 0.01 30);
  --secondary-foreground: oklch(0.98 0.005 85);

--muted: oklch(0.25 0.01 30);
  --muted-foreground: oklch(0.6 0.01 30);

--accent: oklch(0.55 0.22 40);
  --accent-foreground: oklch(0.98 0.005 85);

--destructive: oklch(0.55 0.22 25);
  --destructive-foreground: oklch(0.98 0.005 85);

--border: oklch(0.25 0.01 30);
  --input: oklch(0.25 0.01 30);
  --ring: oklch(0.65 0.19 35);

--chart-1: oklch(0.65 0.19 35);
  --chart-2: oklch(0.58 0.22 40);
  --chart-3: oklch(0.72 0.15 30);
  --chart-4: oklch(0.48 0.18 35);
  --chart-5: oklch(0.82 0.12 40);

--sidebar: oklch(0.18 0.01 30);
  --sidebar-foreground: oklch(0.98 0.005 85);
  --sidebar-primary: oklch(0.65 0.19 35);
  --sidebar-primary-foreground: oklch(0.98 0.005 85);
  --sidebar-accent: oklch(0.25 0.01 30);
  --sidebar-accent-foreground: oklch(0.98 0.005 85);
  --sidebar-border: oklch(0.25 0.01 30);
  --sidebar-ring: oklch(0.65 0.19 35);
}

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

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="components/features-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { Truck, Shield, Headphones, CreditCard } from "lucide-react"

const features = [
  {
    icon: Truck,
    title: "Free Shipping",
    description: "On orders over AED 50",
  },
  {
    icon: Shield,
    title: "Secure Payment",
    description: "100% protected transactions",
  },
  {
    icon: Headphones,
    title: "24/7 Support",
    description: "Dedicated customer service",
  },
  {
    icon: CreditCard,
    title: "Easy Returns",
    description: "30-day return policy",
  },
]

export function FeaturesSection() {
  return (
    <section className="py-12 md:py-16 bg-primary/5">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {features.map((feature) => (
            <Card key={feature.title} className="border-none shadow-none bg-transparent">
              <CardContent className="flex flex-col items-center text-center p-6 gap-3">
                <div className="rounded-full bg-primary/10 p-4">
                  <feature.icon className="h-8 w-8 text-primary" />
                </div>
                <h3 className="font-semibold text-lg">{feature.title}</h3>
                <p className="text-sm text-muted-foreground">{feature.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/offers-slider.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { ChevronLeft, ChevronRight } from "lucide-react"

const offers = [
  {
    id: 1,
    title: "Summer Sale - Up to 70% Off",
    description: "Get amazing discounts on electronics, fashion, and home decor",
    cta: "Shop Now",
    bgColor: "from-orange-500 to-red-500",
    image: "/summer-sale-banner.png",
  },
  {
    id: 2,
    title: "New Vendor Week - Special Deals",
    description: "Discover exclusive products from our newest trusted vendors",
    cta: "Explore Vendors",
    bgColor: "from-blue-500 to-purple-500",
    image: "/new-vendors-marketplace-banner.jpg",
  },
  {
    id: 3,
    title: "Free Shipping on Orders Over AED 50",
    description: "Shop from thousands of products with free delivery",
    cta: "Start Shopping",
    bgColor: "from-green-500 to-teal-500",
    image: "/free-shipping-delivery-banner.jpg",
  },
  {
    id: 4,
    title: "Flash Deals - Limited Time Only",
    description: "Grab the best deals before they're gone. Up to 80% off!",
    cta: "View Deals",
    bgColor: "from-pink-500 to-rose-500",
    image: "/flash-deals-limited-time-banner.jpg",
  },
]

export function OffersSlider() {
  const [currentSlide, setCurrentSlide] = useState(0)

useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % offers.length)
    }, 5000)

return () => clearInterval(timer)
  }, [])

const goToSlide = (index: number) => {
    setCurrentSlide(index)
  }

const goToPrevious = () => {
    setCurrentSlide((prev) => (prev - 1 + offers.length) % offers.length)
  }

const goToNext = () => {
    setCurrentSlide((prev) => (prev + 1) % offers.length)
  }

return (
    <section className="relative overflow-hidden bg-background">
      <div className="relative h-[400px] md:h-[500px] lg:h-[600px]">
        {offers.map((offer, index) => (
          <div
            key={offer.id}
            className={`absolute inset-0 transition-opacity duration-700 ${
              index === currentSlide ? "opacity-100" : "opacity-0"
            }`}
          >
            <div className={`absolute inset-0 bg-gradient-to-r ${offer.bgColor} opacity-90`} />
            <img
              src={offer.image || "/placeholder.svg"}
              alt={offer.title}
              className="absolute inset-0 w-full h-full object-cover mix-blend-overlay"
            />
            <div className="relative container mx-auto px-4 h-full flex items-center">
              <div className="max-w-2xl text-white">
                <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 text-balance">{offer.title}</h2>
                <p className="text-lg md:text-xl mb-8 text-pretty leading-relaxed opacity-95">{offer.description}</p>
                <Button size="lg" variant="secondary" className="text-base font-semibold">
                  {offer.cta}
                </Button>
              </div>
            </div>
          </div>
        ))}

{/* Navigation Arrows */}
        <button
          onClick={goToPrevious}
          className="absolute left-4 top-1/2 -translate-y-1/2 bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white p-2 rounded-full transition-colors"
          aria-label="Previous slide"
        >
          <ChevronLeft className="h-6 w-6" />
        </button>
        <button
          onClick={goToNext}
          className="absolute right-4 top-1/2 -translate-y-1/2 bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white p-2 rounded-full transition-colors"
          aria-label="Next slide"
        >
          <ChevronRight className="h-6 w-6" />
        </button>

{/* Dots Navigation */}
        <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-2">
          {offers.map((_, index) => (
            <button
              key={index}
              onClick={() => goToSlide(index)}
              className={`h-2 rounded-full transition-all ${
                index === currentSlide ? "w-8 bg-white" : "w-2 bg-white/50 hover:bg-white/75"
              }`}
              aria-label={`Go to slide ${index + 1}`}
            />
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/admin/promotions/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Plus, Search, MoreVertical, Edit, Trash2, Copy, Tag } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { format } from "date-fns"

interface Promotion {
  id: string
  code: string
  name: string
  description: string | null
  discount_type: "percentage" | "flat"
  discount_value: number
  min_order_amount: number
  max_discount_amount: number | null
  usage_limit: number | null
  used_count: number
  valid_from: string
  valid_to: string
  is_active: boolean
  applicable_to: string
  created_at: string
}

export default function PromotionsPage() {
  const router = useRouter()
  const { toast } = useToast()
  const [promotions, setPromotions] = useState<Promotion[]>([])
  const [filteredPromotions, setFilteredPromotions] = useState<Promotion[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState<"all" | "active" | "inactive" | "expired">("all")

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

useEffect(() => {
    filterPromotions()
  }, [searchQuery, statusFilter, promotions])

const fetchPromotions = async () => {
    try {
      const supabase = createClient()
      const { data, error } = await supabase.from("promotions").select("*").order("created_at", { ascending: false })

if (error) throw error
      setPromotions(data || [])
    } catch (error) {
      console.error("Error fetching promotions:", error)
      toast({
        title: "Error",
        description: "Failed to load promotions",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const filterPromotions = () => {
    let filtered = promotions

// Search filter
    if (searchQuery) {
      filtered = filtered.filter(
        (promo) =>
          promo.code.toLowerCase().includes(searchQuery.toLowerCase()) ||
          promo.name.toLowerCase().includes(searchQuery.toLowerCase()),
      )
    }

// Status filter
    const now = new Date()
    if (statusFilter === "active") {
      filtered = filtered.filter(
        (promo) => promo.is_active && new Date(promo.valid_from) <= now && new Date(promo.valid_to) >= now,
      )
    } else if (statusFilter === "inactive") {
      filtered = filtered.filter((promo) => !promo.is_active)
    } else if (statusFilter === "expired") {
      filtered = filtered.filter((promo) => new Date(promo.valid_to) < now)
    }

setFilteredPromotions(filtered)
  }

const handleDelete = async (id: string) => {
    if (!confirm("Are you sure you want to delete this promotion?")) return

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

if (error) throw error

toast({
        title: "Success",
        description: "Promotion deleted successfully",
      })
      fetchPromotions()
    } catch (error) {
      console.error("Error deleting promotion:", error)
      toast({
        title: "Error",
        description: "Failed to delete promotion",
        variant: "destructive",
      })
    }
  }

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

if (error) throw error

toast({
        title: "Success",
        description: `Promotion ${!currentStatus ? "activated" : "deactivated"} successfully`,
      })
      fetchPromotions()
    } catch (error) {
      console.error("Error updating promotion:", error)
      toast({
        title: "Error",
        description: "Failed to update promotion status",
        variant: "destructive",
      })
    }
  }

const copyCode = (code: string) => {
    navigator.clipboard.writeText(code)
    toast({
      title: "Copied!",
      description: "Promotion code copied to clipboard",
    })
  }

const getStatusBadge = (promo: Promotion) => {
    const now = new Date()
    const validFrom = new Date(promo.valid_from)
    const validTo = new Date(promo.valid_to)

if (!promo.is_active) {
      return <Badge variant="secondary">Inactive</Badge>
    }
    if (validTo < now) {
      return <Badge variant="destructive">Expired</Badge>
    }
    if (validFrom > now) {
      return <Badge variant="outline">Scheduled</Badge>
    }
    return <Badge className="bg-green-500">Active</Badge>
  }

const getDiscountDisplay = (promo: Promotion) => {
    if (promo.discount_type === "percentage") {
      return `${promo.discount_value}% OFF`
    }
    return `AED ${promo.discount_value} OFF`
  }

if (loading) {
    return (
      <div className="flex items-center justify-center h-96">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-amber-500 mx-auto"></div>
          <p className="mt-4 text-gray-600">Loading promotions...</p>
        </div>
      </div>
    )
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Promotions</h1>
          <p className="text-gray-600 mt-1">Manage discount codes and promotional campaigns</p>
        </div>
        <Button onClick={() => router.push("/admin/promotions/add")} className="bg-amber-500 hover:bg-amber-600">
          <Plus className="h-4 w-4 mr-2" />
          Add Promotion
        </Button>
      </div>

{/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium text-gray-600">Total Promotions</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{promotions.length}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium text-gray-600">Active</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-green-600">
              {
                promotions.filter((p) => {
                  const now = new Date()
                  return p.is_active && new Date(p.valid_from) <= now && new Date(p.valid_to) >= now
                }).length
              }
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium text-gray-600">Scheduled</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-blue-600">
              {promotions.filter((p) => p.is_active && new Date(p.valid_from) > new Date()).length}
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium text-gray-600">Expired</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-red-600">
              {promotions.filter((p) => new Date(p.valid_to) < new Date()).length}
            </div>
          </CardContent>
        </Card>
      </div>

{/* Filters */}
      <Card>
        <CardContent className="pt-6">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
              <Input
                placeholder="Search by code or name..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10"
              />
            </div>
            <div className="flex gap-2">
              <Button variant={statusFilter === "all" ? "default" : "outline"} onClick={() => setStatusFilter("all")}>
                All
              </Button>
              <Button
                variant={statusFilter === "active" ? "default" : "outline"}
                onClick={() => setStatusFilter("active")}
              >
                Active
              </Button>
              <Button
                variant={statusFilter === "inactive" ? "default" : "outline"}
                onClick={() => setStatusFilter("inactive")}
              >
                Inactive
              </Button>
              <Button
                variant={statusFilter === "expired" ? "default" : "outline"}
                onClick={() => setStatusFilter("expired")}
              >
                Expired
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Promotions Table */}
      <Card>
        <CardContent className="pt-6">
          {filteredPromotions.length === 0 ? (
            <div className="text-center py-12">
              <Tag className="h-12 w-12 text-gray-400 mx-auto mb-4" />
              <h3 className="text-lg font-medium text-gray-900 mb-2">No promotions found</h3>
              <p className="text-gray-600 mb-4">
                {searchQuery || statusFilter !== "all"
                  ? "Try adjusting your filters"
                  : "Get started by creating your first promotion"}
              </p>
              {!searchQuery && statusFilter === "all" && (
                <Button
                  onClick={() => router.push("/admin/promotions/add")}
                  className="bg-amber-500 hover:bg-amber-600"
                >
                  <Plus className="h-4 w-4 mr-2" />
                  Add Promotion
                </Button>
              )}
            </div>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Code</TableHead>
                  <TableHead>Name</TableHead>
                  <TableHead>Discount</TableHead>
                  <TableHead>Usage</TableHead>
                  <TableHead>Valid Period</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead className="text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredPromotions.map((promo) => (
                  <TableRow key={promo.id}>
                    <TableCell>
                      <div className="flex items-center gap-2">
                        <code className="bg-gray-100 px-2 py-1 rounded text-sm font-mono">{promo.code}</code>
                        <Button variant="ghost" size="sm" onClick={() => copyCode(promo.code)} className="h-6 w-6 p-0">
                          <Copy className="h-3 w-3" />
                        </Button>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div>
                        <div className="font-medium">{promo.name}</div>
                        {promo.description && (
                          <div className="text-sm text-gray-500 truncate max-w-xs">{promo.description}</div>
                        )}
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge variant="outline">{getDiscountDisplay(promo)}</Badge>
                    </TableCell>
                    <TableCell>
                      <div className="text-sm">
                        {promo.used_count} / {promo.usage_limit || "∞"}
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="text-sm">
                        <div>{format(new Date(promo.valid_from), "MMM dd, yyyy")}</div>
                        <div className="text-gray-500">to {format(new Date(promo.valid_to), "MMM dd, yyyy")}</div>
                      </div>
                    </TableCell>
                    <TableCell>{getStatusBadge(promo)}</TableCell>
                    <TableCell className="text-right">
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" size="sm">
                            <MoreVertical className="h-4 w-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuItem onClick={() => router.push(`/admin/promotions/edit/${promo.id}`)}>
                            <Edit className="h-4 w-4 mr-2" />
                            Edit
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => handleToggleStatus(promo.id, promo.is_active)}>
                            {promo.is_active ? "Deactivate" : "Activate"}
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => handleDelete(promo.id)} className="text-red-600">
                            <Trash2 className="h-4 w-4 mr-2" />
                            Delete
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/promotions/add/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { ArrowLeft } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

export default function AddPromotionPage() {
  const router = useRouter()
  const { toast } = useToast()
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({
    code: "",
    name: "",
    description: "",
    discount_type: "percentage" as "percentage" | "flat",
    discount_value: "",
    min_order_amount: "",
    max_discount_amount: "",
    usage_limit: "",
    valid_from: "",
    valid_to: "",
    is_active: true,
    applicable_to: "all",
  })

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

try {
      const supabase = createClient()

// Validate dates
      if (new Date(formData.valid_from) >= new Date(formData.valid_to)) {
        toast({
          title: "Error",
          description: "End date must be after start date",
          variant: "destructive",
        })
        setLoading(false)
        return
      }

const { error } = await supabase.from("promotions").insert({
        code: formData.code.toUpperCase(),
        name: formData.name,
        description: formData.description || null,
        discount_type: formData.discount_type,
        discount_value: Number.parseFloat(formData.discount_value),
        min_order_amount: formData.min_order_amount ? Number.parseFloat(formData.min_order_amount) : 0,
        max_discount_amount: formData.max_discount_amount ? Number.parseFloat(formData.max_discount_amount) : null,
        usage_limit: formData.usage_limit ? Number.parseInt(formData.usage_limit) : null,
        valid_from: formData.valid_from,
        valid_to: formData.valid_to,
        is_active: formData.is_active,
        applicable_to: formData.applicable_to,
      })

if (error) throw error

toast({
        title: "Success",
        description: "Promotion created successfully",
      })
      router.push("/admin/promotions")
    } catch (error: any) {
      console.error("Error creating promotion:", error)
      toast({
        title: "Error",
        description: error.message || "Failed to create promotion",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="sm" onClick={() => router.back()}>
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back
        </Button>
        <div>
          <h1 className="text-3xl font-bold">Add Promotion</h1>
          <p className="text-gray-600 mt-1">Create a new promotional discount code</p>
        </div>
      </div>

<form onSubmit={handleSubmit}>
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2 space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Basic Information</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="code">Promotion Code *</Label>
                    <Input
                      id="code"
                      value={formData.code}
                      onChange={(e) => setFormData({ ...formData, code: e.target.value.toUpperCase() })}
                      placeholder="SUMMER2024"
                      required
                    />
                    <p className="text-xs text-gray-500">Unique code customers will use</p>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="name">Promotion Name *</Label>
                    <Input
                      id="name"
                      value={formData.name}
                      onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                      placeholder="Summer Sale 2024"
                      required
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="description">Description</Label>
                  <Textarea
                    id="description"
                    value={formData.description}
                    onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                    placeholder="Special summer discount for all products"
                    rows={3}
                  />
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Discount Settings</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="discount_type">Discount Type *</Label>
                    <Select
                      value={formData.discount_type}
                      onValueChange={(value: "percentage" | "flat") =>
                        setFormData({ ...formData, discount_type: value })
                      }
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="percentage">Percentage (%)</SelectItem>
                        <SelectItem value="flat">Flat Amount (AED)</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="discount_value">Discount Value *</Label>
                    <Input
                      id="discount_value"
                      type="number"
                      step="0.01"
                      min="0"
                      value={formData.discount_value}
                      onChange={(e) => setFormData({ ...formData, discount_value: e.target.value })}
                      placeholder={formData.discount_type === "percentage" ? "10" : "50"}
                      required
                    />
                  </div>
                </div>

<div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="min_order_amount">Minimum Order Amount (AED)</Label>
                    <Input
                      id="min_order_amount"
                      type="number"
                      step="0.01"
                      min="0"
                      value={formData.min_order_amount}
                      onChange={(e) => setFormData({ ...formData, min_order_amount: e.target.value })}
                      placeholder="0"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="max_discount_amount">Maximum Discount Cap (AED)</Label>
                    <Input
                      id="max_discount_amount"
                      type="number"
                      step="0.01"
                      min="0"
                      value={formData.max_discount_amount}
                      onChange={(e) => setFormData({ ...formData, max_discount_amount: e.target.value })}
                      placeholder="No limit"
                    />
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Validity Period</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="valid_from">Start Date *</Label>
                    <Input
                      id="valid_from"
                      type="datetime-local"
                      value={formData.valid_from}
                      onChange={(e) => setFormData({ ...formData, valid_from: e.target.value })}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="valid_to">End Date *</Label>
                    <Input
                      id="valid_to"
                      type="datetime-local"
                      value={formData.valid_to}
                      onChange={(e) => setFormData({ ...formData, valid_to: e.target.value })}
                      required
                    />
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

<div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Usage Settings</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="usage_limit">Usage Limit</Label>
                  <Input
                    id="usage_limit"
                    type="number"
                    min="1"
                    value={formData.usage_limit}
                    onChange={(e) => setFormData({ ...formData, usage_limit: e.target.value })}
                    placeholder="Unlimited"
                  />
                  <p className="text-xs text-gray-500">Leave empty for unlimited uses</p>
                </div>

<div className="space-y-2">
                  <Label htmlFor="applicable_to">Applicable To</Label>
                  <Select
                    value={formData.applicable_to}
                    onValueChange={(value) => setFormData({ ...formData, applicable_to: value })}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Products</SelectItem>
                      <SelectItem value="categories">Specific Categories</SelectItem>
                      <SelectItem value="products">Specific Products</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Active Status</Label>
                    <p className="text-xs text-gray-500">Enable this promotion</p>
                  </div>
                  <Switch
                    checked={formData.is_active}
                    onCheckedChange={(checked) => setFormData({ ...formData, is_active: checked })}
                  />
                </div>
              </CardContent>
            </Card>

<div className="flex gap-3">
              <Button type="submit" disabled={loading} className="flex-1 bg-amber-500 hover:bg-amber-600">
                {loading ? "Creating..." : "Create Promotion"}
              </Button>
              <Button type="button" variant="outline" onClick={() => router.back()}>
                Cancel
              </Button>
            </div>
          </div>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/vendor/orders/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { createClient } from "@/lib/supabase/client"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ShoppingCart, Package, Truck, CheckCircle, Search, Eye } from "lucide-react"
import Link from "next/link"
import { useRouter } from "next/navigation"

interface Order {
  id: string
  customer_id: string
  customer_name: string
  total_amount: number
  status: "pending" | "processing" | "shipped" | "delivered" | "cancelled"
  shipping_address: string
  created_at: string
  vendor_items_total: number
  vendor_items_count: number
}

export default function VendorOrdersPage() {
  const router = useRouter()
  const [orders, setOrders] = useState<Order[]>([])
  const [filteredOrders, setFilteredOrders] = useState<Order[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState<string>("all")
  const [vendorId, setVendorId] = useState<string | null>(null)

const supabase = createClient()

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

useEffect(() => {
    filterOrders()
  }, [orders, searchQuery, statusFilter])

const checkAuthAndFetchOrders = async () => {
    try {
      // Check authentication
      const {
        data: { user },
      } = await supabase.auth.getUser()

if (!user) {
        router.push("/vendor/login")
        return
      }

// Verify vendor profile
      const { data: profile } = await supabase.from("profiles").select("*").eq("id", user.id).single()

if (!profile || profile.user_type !== "vendor") {
        router.push("/vendor/login")
        return
      }

setVendorId(user.id)
      await fetchOrders(user.id)
    } catch (error) {
      console.error("Error checking auth:", error)
      router.push("/vendor/login")
    }
  }

const fetchOrders = async (vendorId: string) => {
    try {
      // Get all order_items for this vendor
      const { data: orderItems, error: itemsError } = await supabase
        .from("order_items")
        .select("order_id, price, quantity")
        .eq("vendor_id", vendorId)

if (itemsError) throw itemsError

// Get unique order IDs
      const orderIds = [...new Set(orderItems?.map((item) => item.order_id) || [])]

if (orderIds.length === 0) {
        setLoading(false)
        return
      }

// Fetch orders
      const { data: ordersData, error: ordersError } = await supabase
        .from("orders")
        .select("*")
        .in("id", orderIds)
        .order("created_at", { ascending: false })

if (ordersError) throw ordersError

// Calculate vendor-specific totals for each order
      const ordersWithVendorTotals = ordersData?.map((order) => {
        const vendorItems = orderItems?.filter((item) => item.order_id === order.id) || []
        const vendorItemsTotal = vendorItems.reduce((sum, item) => sum + Number(item.price) * item.quantity, 0)
        const vendorItemsCount = vendorItems.length

return {
          ...order,
          vendor_items_total: vendorItemsTotal,
          vendor_items_count: vendorItemsCount,
        }
      })

setOrders(ordersWithVendorTotals || [])
    } catch (error) {
      console.error("Error fetching orders:", error)
    } finally {
      setLoading(false)
    }
  }

const filterOrders = () => {
    let filtered = orders

// Filter by status
    if (statusFilter !== "all") {
      filtered = filtered.filter((order) => order.status === statusFilter)
    }

// Filter by search query
    if (searchQuery) {
      filtered = filtered.filter(
        (order) =>
          order.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
          order.customer_name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
          order.shipping_address.toLowerCase().includes(searchQuery.toLowerCase()),
      )
    }

setFilteredOrders(filtered)
  }

const getStatusBadge = (status: string) => {
    const statusConfig = {
      pending: { label: "Pending", className: "bg-yellow-500/20 text-yellow-700 border-yellow-500/30" },
      processing: { label: "Processing", className: "bg-blue-500/20 text-blue-700 border-blue-500/30" },
      shipped: { label: "Shipped", className: "bg-purple-500/20 text-purple-700 border-purple-500/30" },
      delivered: { label: "Delivered", className: "bg-green-500/20 text-green-700 border-green-500/30" },
      cancelled: { label: "Cancelled", className: "bg-red-500/20 text-red-700 border-red-500/30" },
    }

const config = statusConfig[status as keyof typeof statusConfig]
    return (
      <Badge variant="outline" className={config.className}>
        {config.label}
      </Badge>
    )
  }

const stats = {
    total: orders.length,
    pending: orders.filter((o) => o.status === "pending").length,
    processing: orders.filter((o) => o.status === "processing").length,
    shipped: orders.filter((o) => o.status === "shipped").length,
    delivered: orders.filter((o) => o.status === "delivered").length,
    totalRevenue: orders
      .filter((o) => o.status !== "cancelled")
      .reduce((sum, order) => sum + order.vendor_items_total, 0),
  }

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

return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-bold text-gray-900">My Orders</h1>
        <p className="text-sm mt-1 text-gray-600">View and track orders containing your products</p>
      </div>

{/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Total Orders</CardTitle>
            <ShoppingCart className="h-4 w-4 text-amber-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.total}</div>
            <p className="text-xs text-gray-500 mt-1">Orders with your products</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Pending</CardTitle>
            <Package className="h-4 w-4 text-yellow-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.pending}</div>
            <p className="text-xs text-gray-500 mt-1">Awaiting processing</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Shipped</CardTitle>
            <Truck className="h-4 w-4 text-purple-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.shipped}</div>
            <p className="text-xs text-gray-500 mt-1">In transit</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Your Revenue</CardTitle>
            <CheckCircle className="h-4 w-4 text-green-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">AED {stats.totalRevenue.toFixed(2)}</div>
            <p className="text-xs text-gray-500 mt-1">From your items</p>
          </CardContent>
        </Card>
      </div>

{/* Filters */}
      <Card>
        <CardContent className="pt-6">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
              <Input
                placeholder="Search by order ID, customer, or address..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10"
              />
            </div>
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-full md:w-[200px]">
                <SelectValue placeholder="Filter by status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Orders</SelectItem>
                <SelectItem value="pending">Pending</SelectItem>
                <SelectItem value="processing">Processing</SelectItem>
                <SelectItem value="shipped">Shipped</SelectItem>
                <SelectItem value="delivered">Delivered</SelectItem>
                <SelectItem value="cancelled">Cancelled</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Orders Table */}
      <Card>
        <CardContent className="pt-6">
          {filteredOrders.length === 0 ? (
            <div className="text-center py-12">
              <ShoppingCart className="h-12 w-12 mx-auto text-gray-400 mb-4" />
              <p className="text-lg font-medium text-gray-900">No orders found</p>
              <p className="text-sm mt-1 text-gray-600">
                {searchQuery || statusFilter !== "all"
                  ? "Try adjusting your filters"
                  : "Orders containing your products will appear here"}
              </p>
            </div>
          ) : (
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Order ID</TableHead>
                    <TableHead>Customer</TableHead>
                    <TableHead>Your Items</TableHead>
                    <TableHead>Your Revenue</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Order Date</TableHead>
                    <TableHead>Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredOrders.map((order) => (
                    <TableRow key={order.id}>
                      <TableCell className="font-mono text-xs">{order.id.slice(0, 8)}...</TableCell>
                      <TableCell>
                        <div>
                          <p className="font-medium">{order.customer_name || "Guest"}</p>
                        </div>
                      </TableCell>
                      <TableCell>
                        <Badge variant="secondary">{order.vendor_items_count} items</Badge>
                      </TableCell>
                      <TableCell className="font-semibold">AED {order.vendor_items_total.toFixed(2)}</TableCell>
                      <TableCell>{getStatusBadge(order.status)}</TableCell>
                      <TableCell>{new Date(order.created_at).toLocaleDateString()}</TableCell>
                      <TableCell>
                        <Link href={`/vendor/orders/${order.id}`}>
                          <Button variant="ghost" size="sm">
                            <Eye className="h-4 w-4 mr-2" />
                            View
                          </Button>
                        </Link>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/vendor/orders/[id]/page.tsx" isMerged="true"
"use client"

interface OrderItem {
  id: string
  product_id: string
  quantity: number
  price: number
  product: {
    name: string
    image_url: string
    sku: string
  }
}

interface Order {
  id: string
  customer_id: string
  customer_name: string
  total_amount: number
  status: string
  shipping_address: string
  created_at: string
  updated_at: string
}

export default function VendorOrderDetailPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [order, setOrder] = useState<Order | null>(null)
  const [orderItems, setOrderItems] = useState<OrderItem[]>([])
  const [loading, setLoading] = useState(true)
  const [vendorId, setVendorId] = useState<string | null>(null)

const supabase = createClient()

useEffect(() => {
    checkAuthAndFetchOrder()
  }, [params.id])

const checkAuthAndFetchOrder = async () => {
    try {
      // Check authentication
      const {
        data: { user },
      } = await supabase.auth.getUser()

if (!user) {
        router.push("/vendor/login")
        return
      }

// Verify vendor profile
      const { data: profile } = await supabase.from("profiles").select("*").eq("id", user.id).single()

if (!profile || profile.user_type !== "vendor") {
        router.push("/vendor/login")
        return
      }

setVendorId(user.id)
      await fetchOrderDetails(params.id, user.id)
    } catch (error) {
      console.error("Error checking auth:", error)
      router.push("/vendor/login")
    }
  }

const fetchOrderDetails = async (orderId: string, vendorId: string) => {
    try {
      // Fetch order
      const { data: orderData, error: orderError } = await supabase
        .from("orders")
        .select("*")
        .eq("id", orderId)
        .single()

if (orderError) throw orderError

// Fetch order items for this vendor only
      const { data: itemsData, error: itemsError } = await supabase
        .from("order_items")
        .select(
          `
          *,
          product:products(name, image_url, sku)
        `,
        )
        .eq("order_id", orderId)
        .eq("vendor_id", vendorId)

if (itemsError) throw itemsError

setOrder(orderData)
      setOrderItems(itemsData || [])
    } catch (error) {
      console.error("Error fetching order details:", error)
    } finally {
      setLoading(false)
    }
  }

const config = statusConfig[status as keyof typeof statusConfig]
    return (
      <Badge variant="outline" className={config.className}>
        {config.label}
      </Badge>
    )
  }

const vendorTotal = orderItems.reduce((sum, item) => sum + Number(item.price) * item.quantity, 0)

if (!order) {
    return (
      <div className="text-center py-12">
        <p className="text-lg font-medium text-gray-900">Order not found</p>
        <Link href="/vendor/orders">
          <Button className="mt-4">Back to Orders</Button>
        </Link>
      </div>
    )
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Link href="/vendor/orders">
            <Button variant="ghost" size="sm">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Back
            </Button>
          </Link>
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Order Details</h1>
            <p className="text-sm text-gray-600 mt-1">Order ID: {order.id}</p>
          </div>
        </div>
        {getStatusBadge(order.status)}
      </div>

{/* Order Info Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Customer</CardTitle>
            <Package className="h-4 w-4 text-gray-400" />
          </CardHeader>
          <CardContent>
            <p className="text-lg font-semibold">{order.customer_name || "Guest"}</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Order Date</CardTitle>
            <Calendar className="h-4 w-4 text-gray-400" />
          </CardHeader>
          <CardContent>
            <p className="text-lg font-semibold">{new Date(order.created_at).toLocaleDateString()}</p>
            <p className="text-xs text-gray-500">{new Date(order.created_at).toLocaleTimeString()}</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Your Revenue</CardTitle>
            <DollarSign className="h-4 w-4 text-gray-400" />
          </CardHeader>
          <CardContent>
            <p className="text-lg font-semibold">AED {vendorTotal.toFixed(2)}</p>
            <p className="text-xs text-gray-500">{orderItems.length} items</p>
          </CardContent>
        </Card>
      </div>

{/* Shipping Address */}
      <Card>
        <CardHeader>
          <div className="flex items-center gap-2">
            <MapPin className="h-5 w-5 text-gray-400" />
            <CardTitle>Shipping Address</CardTitle>
          </div>
        </CardHeader>
        <CardContent>
          <p className="text-gray-700 whitespace-pre-line">{order.shipping_address}</p>
        </CardContent>
      </Card>

{/* Order Items */}
      <Card>
        <CardHeader>
          <CardTitle>Your Items in This Order</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Product</TableHead>
                  <TableHead>SKU</TableHead>
                  <TableHead>Price</TableHead>
                  <TableHead>Quantity</TableHead>
                  <TableHead>Subtotal</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {orderItems.map((item) => (
                  <TableRow key={item.id}>
                    <TableCell>
                      <div className="flex items-center gap-3">
                        {item.product?.image_url && (
                          <img
                            src={item.product.image_url || "/placeholder.svg"}
                            alt={item.product?.name || "Product"}
                            className="w-12 h-12 object-cover rounded"
                          />
                        )}
                        <span className="font-medium">{item.product?.name || "Unknown Product"}</span>
                      </div>
                    </TableCell>
                    <TableCell className="font-mono text-xs">{item.product?.sku || "N/A"}</TableCell>
                    <TableCell>AED {Number(item.price).toFixed(2)}</TableCell>
                    <TableCell>{item.quantity}</TableCell>
                    <TableCell className="font-semibold">
                      AED {(Number(item.price) * item.quantity).toFixed(2)}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>

{/* Total */}
          <div className="mt-6 flex justify-end">
            <div className="w-64 space-y-2">
              <div className="flex justify-between text-lg font-bold border-t pt-2">
                <span>Your Total Revenue:</span>
                <span>AED {vendorTotal.toFixed(2)}</span>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/vendor/orders/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-amber-500"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/vendor/dashboard/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Package, ShoppingCart, Eye, Star, DollarSign } from "lucide-react"
import { createClient } from "@/lib/supabase/client"
import Link from "next/link"
import { useRouter } from "next/navigation"

interface VendorStats {
  totalProducts: number
  activeProducts: number
  pendingProducts: number
  totalOrders: number
  totalRevenue: number
  totalViews: number
  averageRating: number
}

export default function VendorDashboard() {
  const router = useRouter()
  const [stats, setStats] = useState<VendorStats>({
    totalProducts: 0,
    activeProducts: 0,
    pendingProducts: 0,
    totalOrders: 0,
    totalRevenue: 0,
    totalViews: 0,
    averageRating: 0,
  })
  const [vendorInfo, setVendorInfo] = useState<any>(null)
  const [loading, setLoading] = useState(true)

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

const fetchVendorData = async () => {
    const supabase = createClient()

try {
      // Get current user
      const {
        data: { user },
      } = await supabase.auth.getUser()

if (!user) {
        router.push("/vendor/login")
        return
      }

// Get vendor profile
      const { data: profile } = await supabase.from("profiles").select("*").eq("id", user.id).single()

if (!profile || profile.user_type !== "vendor") {
        router.push("/vendor/login")
        return
      }

setVendorInfo(profile)

// Get product stats
      const { data: products } = await supabase.from("products").select("*").eq("vendor_id", user.id)

const totalProducts = products?.length || 0
      const activeProducts = products?.filter((p) => p.is_active && p.approval_status === "approved").length || 0
      const pendingProducts = products?.filter((p) => p.approval_status === "pending").length || 0
      const totalViews = products?.reduce((sum, p) => sum + (p.view_count || 0), 0) || 0

const { data: orderItems } = await supabase
        .from("order_items")
        .select("order_id, price, quantity")
        .eq("vendor_id", user.id)

const uniqueOrderIds = [...new Set(orderItems?.map((item) => item.order_id) || [])]
      const totalOrders = uniqueOrderIds.length
      const totalRevenue = orderItems?.reduce((sum, item) => sum + Number(item.price) * item.quantity, 0) || 0

setStats({
        totalProducts,
        activeProducts,
        pendingProducts,
        totalOrders,
        totalRevenue,
        totalViews,
        averageRating: profile.rating || 0,
      })
    } catch (error) {
      console.error("Error fetching vendor data:", error)
    } finally {
      setLoading(false)
    }
  }

const statCards = [
    {
      title: "Total Products",
      value: stats.totalProducts.toString(),
      subtitle: `${stats.activeProducts} active, ${stats.pendingProducts} pending`,
      icon: Package,
      color: "text-blue-500",
      bgColor: "bg-blue-500/10",
    },
    {
      title: "Total Orders",
      value: stats.totalOrders.toString(),
      subtitle: "All time orders",
      icon: ShoppingCart,
      color: "text-green-500",
      bgColor: "bg-green-500/10",
    },
    {
      title: "Total Revenue",
      value: `AED ${stats.totalRevenue.toFixed(2)}`,
      subtitle: "Total earnings",
      icon: DollarSign,
      color: "text-amber-500",
      bgColor: "bg-amber-500/10",
    },
    {
      title: "Product Views",
      value: stats.totalViews.toString(),
      subtitle: "Total views",
      icon: Eye,
      color: "text-purple-500",
      bgColor: "bg-purple-500/10",
    },
  ]

const quickActions = [
    {
      title: "Add New Product",
      description: "List a new product in your store",
      icon: Package,
      href: "/vendor/products/add",
      color: "from-blue-500 to-blue-600",
    },
    {
      title: "View Products",
      description: "Manage your product listings",
      icon: Package,
      href: "/vendor/products",
      color: "from-green-500 to-green-600",
    },
    {
      title: "View Orders",
      description: "Track and manage orders",
      icon: ShoppingCart,
      href: "/vendor/orders",
      color: "from-purple-500 to-purple-600",
    },
    {
      title: "Store Settings",
      description: "Update your store information",
      icon: Star,
      href: "/vendor/settings",
      color: "from-amber-500 to-amber-600",
    },
  ]

if (loading) {
    return (
      <div className="flex items-center justify-center h-full">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-amber-500 mx-auto"></div>
          <p className="mt-4 text-gray-600">Loading dashboard...</p>
        </div>
      </div>
    )
  }

return (
    <div>
      {/* Welcome Section */}
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">
          Welcome back, {vendorInfo?.business_name || vendorInfo?.username || "Vendor"}!
        </h1>
        <p className="text-gray-600">Manage your products, track orders, and grow your business</p>
      </div>

{/* Stats Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        {statCards.map((stat) => (
          <Card key={stat.title} className="border-gray-200 shadow-sm">
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium text-gray-600">{stat.title}</CardTitle>
              <div className={`p-2 rounded-lg ${stat.bgColor}`}>
                <stat.icon className={`h-5 w-5 ${stat.color}`} />
              </div>
            </CardHeader>
            <CardContent>
              <div className="text-3xl font-bold text-gray-900">{stat.value}</div>
              <p className="text-xs text-gray-500 mt-1">{stat.subtitle}</p>
            </CardContent>
          </Card>
        ))}
      </div>

{/* Store Rating */}
      {stats.averageRating > 0 && (
        <Card className="mb-8 border-amber-200 bg-amber-50">
          <CardHeader>
            <div className="flex items-center gap-3">
              <Star className="h-6 w-6 text-amber-500 fill-amber-500" />
              <div>
                <CardTitle className="text-amber-900">Store Rating</CardTitle>
                <CardDescription className="text-amber-700">
                  Your average rating is {stats.averageRating.toFixed(1)} stars
                </CardDescription>
              </div>
            </div>
          </CardHeader>
        </Card>
      )}

{/* Quick Actions */}
      <div>
        <h2 className="text-xl font-bold text-gray-900 mb-4">Quick Actions</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {quickActions.map((action) => (
            <Link key={action.title} href={action.href}>
              <Card className="border-gray-200 shadow-sm hover:shadow-md transition-all cursor-pointer group h-full">
                <CardHeader>
                  <div className="flex flex-col gap-4">
                    <div
                      className={`bg-gradient-to-br ${action.color} p-3 rounded-lg w-fit group-hover:scale-110 transition-transform`}
                    >
                      <action.icon className="h-6 w-6 text-white" />
                    </div>
                    <div>
                      <CardTitle className="text-gray-900 group-hover:text-amber-600 transition-colors">
                        {action.title}
                      </CardTitle>
                      <CardDescription className="text-gray-600 mt-1">{action.description}</CardDescription>
                    </div>
                  </div>
                </CardHeader>
              </Card>
            </Link>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/vendor/analytics/page.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { getAdminClient } from "@/lib/supabase/server"
import { createClient } from "@/lib/supabase/server"
import { DollarSign, ShoppingCart, Package, TrendingUp, TrendingDown, Eye } from "lucide-react"
import { Line, LineChart, Bar, BarChart, XAxis, YAxis, CartesianGrid, ResponsiveContainer } from "recharts"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { redirect } from "next/navigation"

interface VendorAnalyticsData {
  totalRevenue: number
  totalOrders: number
  totalProducts: number
  totalViews: number
  revenueChange: number
  ordersChange: number
  productsChange: number
  viewsChange: number
  revenueByDay: Array<{ date: string; revenue: number }>
  topProducts: Array<{ name: string; sold: number; revenue: number }>
  recentOrders: Array<{ id: string; customer_name: string; total: number; status: string; date: string }>
}

export default async function VendorAnalyticsPage() {
  const data = await loadVendorAnalytics()

if (!data) {
    return (
      <div className="p-8">
        <p className="text-muted-foreground">Failed to load analytics data</p>
      </div>
    )
  }

return (
    <div className="p-8 space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-bold">Analytics</h1>
        <p className="text-muted-foreground">Track your store performance and insights</p>
      </div>

{/* Key Metrics */}
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">AED {data.totalRevenue.toLocaleString()}</div>
            <p className="text-xs text-muted-foreground flex items-center gap-1 mt-1">
              {data.revenueChange >= 0 ? (
                <>
                  <TrendingUp className="h-3 w-3 text-green-500" />
                  <span className="text-green-500">+{data.revenueChange}%</span>
                </>
              ) : (
                <>
                  <TrendingDown className="h-3 w-3 text-red-500" />
                  <span className="text-red-500">{data.revenueChange}%</span>
                </>
              )}
              <span>from last 30 days</span>
            </p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Total Orders</CardTitle>
            <ShoppingCart className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{data.totalOrders.toLocaleString()}</div>
            <p className="text-xs text-muted-foreground flex items-center gap-1 mt-1">
              {data.ordersChange >= 0 ? (
                <>
                  <TrendingUp className="h-3 w-3 text-green-500" />
                  <span className="text-green-500">+{data.ordersChange}%</span>
                </>
              ) : (
                <>
                  <TrendingDown className="h-3 w-3 text-red-500" />
                  <span className="text-red-500">{data.ordersChange}%</span>
                </>
              )}
              <span>from last 30 days</span>
            </p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Total Products</CardTitle>
            <Package className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{data.totalProducts.toLocaleString()}</div>
            <p className="text-xs text-muted-foreground flex items-center gap-1 mt-1">
              {data.productsChange >= 0 ? (
                <>
                  <TrendingUp className="h-3 w-3 text-green-500" />
                  <span className="text-green-500">+{data.productsChange}%</span>
                </>
              ) : (
                <>
                  <TrendingDown className="h-3 w-3 text-red-500" />
                  <span className="text-red-500">{data.productsChange}%</span>
                </>
              )}
              <span>from last 30 days</span>
            </p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Product Views</CardTitle>
            <Eye className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{data.totalViews.toLocaleString()}</div>
            <p className="text-xs text-muted-foreground flex items-center gap-1 mt-1">
              {data.viewsChange >= 0 ? (
                <>
                  <TrendingUp className="h-3 w-3 text-green-500" />
                  <span className="text-green-500">+{data.viewsChange}%</span>
                </>
              ) : (
                <>
                  <TrendingDown className="h-3 w-3 text-red-500" />
                  <span className="text-red-500">{data.viewsChange}%</span>
                </>
              )}
              <span>from last 30 days</span>
            </p>
          </CardContent>
        </Card>
      </div>

{/* Charts */}
      <div className="grid gap-6 md:grid-cols-2">
        {/* Revenue Chart */}
        <Card>
          <CardHeader>
            <CardTitle>Revenue Over Time</CardTitle>
            <CardDescription>Daily revenue for the last 30 days</CardDescription>
          </CardHeader>
          <CardContent>
            <ChartContainer
              config={{
                revenue: {
                  label: "Revenue",
                  color: "hsl(var(--chart-1))",
                },
              }}
              className="h-80"
            >
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={data.revenueByDay}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="date" />
                  <YAxis />
                  <ChartTooltip content={<ChartTooltipContent />} />
                  <Line type="monotone" dataKey="revenue" stroke="var(--color-revenue)" strokeWidth={2} />
                </LineChart>
              </ResponsiveContainer>
            </ChartContainer>
          </CardContent>
        </Card>

{/* Top Products */}
        <Card>
          <CardHeader>
            <CardTitle>Top Selling Products</CardTitle>
            <CardDescription>Best performing products by revenue</CardDescription>
          </CardHeader>
          <CardContent>
            <ChartContainer
              config={{
                revenue: {
                  label: "Revenue",
                  color: "hsl(var(--chart-3))",
                },
              }}
              className="h-80"
            >
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={data.topProducts} layout="vertical">
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis type="number" />
                  <YAxis dataKey="name" type="category" width={120} />
                  <ChartTooltip content={<ChartTooltipContent />} />
                  <Bar dataKey="revenue" fill="var(--color-revenue)" />
                </BarChart>
              </ResponsiveContainer>
            </ChartContainer>
          </CardContent>
        </Card>
      </div>

{/* Recent Orders */}
      <Card>
        <CardHeader>
          <CardTitle>Recent Orders</CardTitle>
          <CardDescription>Latest orders containing your products</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {data.recentOrders.map((order) => (
              <div key={order.id} className="flex items-center justify-between border-b pb-3 last:border-0">
                <div>
                  <p className="font-medium">{order.customer_name}</p>
                  <p className="text-sm text-muted-foreground">{order.date}</p>
                </div>
                <div className="text-right">
                  <p className="font-medium">AED {order.total.toLocaleString()}</p>
                  <p className="text-sm">
                    <span
                      className={`inline-block px-2 py-0.5 rounded-full text-xs ${
                        order.status === "completed"
                          ? "bg-green-100 text-green-700"
                          : order.status === "pending"
                            ? "bg-yellow-100 text-yellow-700"
                            : order.status === "processing"
                              ? "bg-blue-100 text-blue-700"
                              : "bg-gray-100 text-gray-700"
                      }`}
                    >
                      {order.status}
                    </span>
                  </p>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

async function loadVendorAnalytics(): Promise<VendorAnalyticsData | null> {
  try {
    const supabase = await createClient()
    const adminSupabase = await getAdminClient()

// Get current vendor
    const {
      data: { user },
    } = await supabase.auth.getUser()
    if (!user) {
      redirect("/vendor/login")
    }

const daysAgo = 30
    const startDate = new Date()
    startDate.setDate(startDate.getDate() - daysAgo)

// Get vendor's order items for revenue calculation
    const { data: orderItems } = await adminSupabase
      .from("order_items")
      .select("quantity, price, created_at, order_id, orders(customer_name, status, created_at)")
      .eq("vendor_id", user.id)
      .gte("created_at", startDate.toISOString())

const totalRevenue = orderItems?.reduce((sum, item) => sum + item.quantity * Number(item.price || 0), 0) || 0
    const totalOrders = new Set(orderItems?.map((item) => item.order_id)).size

// Get previous period for comparison
    const prevStartDate = new Date(startDate)
    prevStartDate.setDate(prevStartDate.getDate() - daysAgo)
    const { data: prevOrderItems } = await adminSupabase
      .from("order_items")
      .select("quantity, price")
      .eq("vendor_id", user.id)
      .gte("created_at", prevStartDate.toISOString())
      .lt("created_at", startDate.toISOString())

const prevRevenue = prevOrderItems?.reduce((sum, item) => sum + item.quantity * Number(item.price || 0), 0) || 0
    const prevOrderCount = new Set(prevOrderItems?.map((item: any) => item.order_id)).size

// Get total products
    const { count: totalProducts } = await adminSupabase
      .from("products")
      .select("*", { count: "exact", head: true })
      .eq("vendor_id", user.id)
      .eq("is_active", true)

const { count: prevProducts } = await adminSupabase
      .from("products")
      .select("*", { count: "exact", head: true })
      .eq("vendor_id", user.id)
      .eq("is_active", true)
      .lt("created_at", startDate.toISOString())

const productsChange =
      prevProducts && prevProducts > 0 ? (((totalProducts || 0) - prevProducts) / prevProducts) * 100 : 0

// Get total views
    const { data: products } = await adminSupabase
      .from("products")
      .select("view_count")
      .eq("vendor_id", user.id)
      .eq("is_active", true)

const totalViews = products?.reduce((sum, p) => sum + (p.view_count || 0), 0) || 0
    const viewsChange = 0 // Would need historical view data to calculate

// Revenue by day
    const revenueByDay = Array.from({ length: daysAgo }, (_, i) => {
      const date = new Date()
      date.setDate(date.getDate() - (daysAgo - 1 - i))
      const dateStr = date.toISOString().split("T")[0]
      const dayItems = orderItems?.filter((item) => item.created_at.startsWith(dateStr)) || []
      const revenue = dayItems.reduce((sum, item) => sum + item.quantity * Number(item.price || 0), 0)
      return {
        date: date.toLocaleDateString("en-US", { month: "short", day: "numeric" }),
        revenue: Math.round(revenue),
      }
    })

// Top products
    const { data: topProductsData } = await adminSupabase
      .from("order_items")
      .select("product_id, quantity, price, products(name)")
      .eq("vendor_id", user.id)
      .gte("created_at", startDate.toISOString())

const productStats =
      topProductsData?.reduce(
        (acc, item) => {
          const productName = (item.products as any)?.name || "Unknown"
          if (!acc[productName]) {
            acc[productName] = { sold: 0, revenue: 0 }
          }
          acc[productName].sold += item.quantity
          acc[productName].revenue += item.quantity * Number(item.price)
          return acc
        },
        {} as Record<string, { sold: number; revenue: number }>,
      ) || {}

// Recent orders
    const recentOrdersMap = new Map()
    orderItems?.forEach((item) => {
      const order = item.orders as any
      if (order && !recentOrdersMap.has(item.order_id)) {
        recentOrdersMap.set(item.order_id, {
          id: item.order_id,
          customer_name: order.customer_name || "Guest",
          status: order.status,
          created_at: order.created_at,
          total: 0,
        })
      }
      if (recentOrdersMap.has(item.order_id)) {
        const orderData = recentOrdersMap.get(item.order_id)
        orderData.total += item.quantity * Number(item.price || 0)
      }
    })

const recentOrders = Array.from(recentOrdersMap.values())
      .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
      .slice(0, 5)
      .map((order) => ({
        id: order.id,
        customer_name: order.customer_name,
        total: Math.round(order.total),
        status: order.status,
        date: new Date(order.created_at).toLocaleDateString(),
      }))

return {
      totalRevenue: Math.round(totalRevenue),
      totalOrders,
      totalProducts: totalProducts || 0,
      totalViews,
      revenueChange: Math.round(revenueChange * 10) / 10,
      ordersChange: Math.round(ordersChange * 10) / 10,
      productsChange: Math.round(productsChange * 10) / 10,
      viewsChange: Math.round(viewsChange * 10) / 10,
      revenueByDay,
      topProducts,
      recentOrders,
    }
  } catch (error) {
    console.error("Error loading vendor analytics:", error)
    return null
  }
}
[V0_FILE]typescriptreact:file="app/vendor/analytics/loading.tsx" isMerged="true"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

export default function Loading() {
  return (
    <div className="p-8 space-y-6">
      <div>
        <Skeleton className="h-8 w-48 mb-2" />
        <Skeleton className="h-4 w-96" />
      </div>

<div className="grid gap-6 md:grid-cols-2">
        {[1, 2].map((i) => (
          <Card key={i}>
            <CardHeader>
              <Skeleton className="h-6 w-48" />
              <Skeleton className="h-4 w-64" />
            </CardHeader>
            <CardContent>
              <Skeleton className="h-80 w-full" />
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/vendor/settings/loading.tsx" isMerged="true"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

export default function Loading() {
  return (
    <div className="p-8 space-y-6">
      <div>
        <Skeleton className="h-8 w-48 mb-2" />
        <Skeleton className="h-4 w-96" />
      </div>

<div className="flex justify-end">
        <Skeleton className="h-10 w-32" />
      </div>
    </div>
  )
}
[V0_FILE]json:file="package.json" isEdit="true" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.25",
    "next-themes": "^0.4.6",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.67",
    "@supabase/ssr": "^0.8.0",
    "@supabase/supabase-js": "^2.47.10",
    "jose": "6.1.0",
    "bcryptjs": "3.0.2",
    "resend": "6.1.2"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="app/admin/users/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Users, UserCheck, Store, Shield, Search, Filter, UserPlus, Key, LogIn } from "lucide-react"
import { useAdminTheme } from "@/lib/admin-theme-context"
import { cn } from "@/lib/utils"
import { useToast } from "@/hooks/use-toast"
import { ADMIN_ROLES, getAdminRoleDisplay } from "@/lib/admin-permissions"
import {
  createAdminUser,
  fetchUsers as fetchUsersAction,
  fetchAdminUsers as fetchAdminUsersAction,
  updateUserRole as updateUserRoleAction,
  updateAdminRole as updateAdminRoleAction,
  toggleVerification as toggleVerificationAction,
  checkEmailExists as checkEmailExistsAction,
  changeAdminPassword as changeAdminPasswordAction,
  loginAsUser as loginAsUserAction,
} from "./actions"

interface User {
  id: string
  username: string | null
  user_type: string
  business_name: string | null
  phone_number: string | null
  avatar_url: string | null
  is_verified: boolean
  total_sales: number
  rating: number | null
  created_at: string
}

interface AdminUser {
  id: string
  email: string
  full_name: string | null
  role: string // Changed from role_id to role (text-based)
  is_active: boolean
  last_login: string | null
  created_at: string
}

export default function UsersPage() {
  const [users, setUsers] = useState<User[]>([])
  const [filteredUsers, setFilteredUsers] = useState<User[]>([])
  const [adminUsers, setAdminUsers] = useState<AdminUser[]>([])
  const [filteredAdminUsers, setFilteredAdminUsers] = useState<AdminUser[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [roleFilter, setRoleFilter] = useState<string>("all")
  const [verificationFilter, setVerificationFilter] = useState<string>("all")
  const [viewMode, setViewMode] = useState<"users" | "admins">("users")
  const { theme } = useAdminTheme()
  const { toast } = useToast()

// Stats
  const totalUsers = users.length
  const totalCustomers = users.filter((u) => u.user_type === "customer").length
  const totalVendors = users.filter((u) => u.user_type === "vendor").length
  const totalAdmins = users.filter((u) => u.user_type === "admin").length

// State for add admin dialog
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
  const [isCreating, setIsCreating] = useState(false)
  const [newAdminData, setNewAdminData] = useState({
    email: "",
    password: "",
    fullName: "",
    role: "staff",
  })

// State for email validation
  const [emailCheckLoading, setEmailCheckLoading] = useState(false)
  const [emailExists, setEmailExists] = useState(false)

const [isPasswordDialogOpen, setIsPasswordDialogOpen] = useState(false)
  const [selectedAdminForPassword, setSelectedAdminForPassword] = useState<AdminUser | null>(null)
  const [newPassword, setNewPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [isChangingPassword, setIsChangingPassword] = useState(false)

useEffect(() => {
    fetchUsers()
    fetchAdminUsers()
  }, [])

useEffect(() => {
    if (viewMode === "users") {
      filterUsers()
    } else {
      filterAdminUsers()
    }
  }, [users, adminUsers, searchQuery, roleFilter, verificationFilter, viewMode])

const fetchUsers = async () => {
    try {
      const result = await fetchUsersAction()

if (result.success) {
        setUsers(result.data)
      } else {
        toast({
          title: "Error",
          description: result.error || "Failed to fetch users",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error fetching users:", error)
      toast({
        title: "Error",
        description: "Failed to fetch users. Please try again.",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const fetchAdminUsers = async () => {
    try {
      const result = await fetchAdminUsersAction()

if (result.success) {
        setAdminUsers(result.data)
      } else {
        toast({
          title: "Error",
          description: result.error || "Failed to fetch admin users",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error fetching admin users:", error)
      toast({
        title: "Error",
        description: "Failed to fetch admin users. Please try again.",
        variant: "destructive",
      })
    }
  }

const filterUsers = () => {
    let filtered = [...users]

// Search filter
    if (searchQuery) {
      filtered = filtered.filter(
        (user) =>
          user.username?.toLowerCase().includes(searchQuery.toLowerCase()) ||
          user.business_name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
          user.id.toLowerCase().includes(searchQuery.toLowerCase()),
      )
    }

// Role filter
    if (roleFilter !== "all") {
      filtered = filtered.filter((user) => user.user_type === roleFilter)
    }

// Verification filter
    if (verificationFilter !== "all") {
      const isVerified = verificationFilter === "verified"
      filtered = filtered.filter((user) => user.is_verified === isVerified)
    }

setFilteredUsers(filtered)
  }

const filterAdminUsers = () => {
    let filtered = [...adminUsers]

// Search filter
    if (searchQuery) {
      filtered = filtered.filter(
        (admin) =>
          admin.email?.toLowerCase().includes(searchQuery.toLowerCase()) ||
          admin.full_name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
          admin.role?.toLowerCase().includes(searchQuery.toLowerCase()),
      )
    }

// Role filter
    if (roleFilter !== "all") {
      filtered = filtered.filter((admin) => admin.role === roleFilter)
    }

setFilteredAdminUsers(filtered)
  }

const updateUserRole = async (userId: string, newRole: string) => {
    try {
      const result = await updateUserRoleAction(userId, newRole)

if (result.success) {
        toast({
          title: "Success",
          description: `User role updated to ${newRole}`,
        })
        fetchUsers()
      } else {
        toast({
          title: "Error",
          description: result.error || "Failed to update user role",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error updating user role:", error)
      toast({
        title: "Error",
        description: "Failed to update user role. Please try again.",
        variant: "destructive",
      })
    }
  }

const updateAdminRole = async (adminId: string, newRole: string) => {
    try {
      const result = await updateAdminRoleAction(adminId, newRole)

if (result.success) {
        toast({
          title: "Success",
          description: `Admin role updated to ${getAdminRoleDisplay(newRole)}`,
        })
        fetchAdminUsers()
      } else {
        toast({
          title: "Error",
          description: result.error || "Failed to update admin role",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error updating admin role:", error)
      toast({
        title: "Error",
        description: "Failed to update admin role. Please try again.",
        variant: "destructive",
      })
    }
  }

const toggleVerification = async (userId: string, currentStatus: boolean) => {
    try {
      const result = await toggleVerificationAction(userId, currentStatus)

if (result.success) {
        toast({
          title: "Success",
          description: `User ${!currentStatus ? "verified" : "unverified"} successfully`,
        })
        fetchUsers()
      } else {
        toast({
          title: "Error",
          description: result.error || "Failed to update verification status",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error toggling verification:", error)
      toast({
        title: "Error",
        description: "Failed to update verification status. Please try again.",
        variant: "destructive",
      })
    }
  }

// Function to handle admin user creation
  const handleCreateAdmin = async () => {
    // Validate inputs
    if (!newAdminData.email || !newAdminData.password) {
      toast({
        title: "Validation Error",
        description: "Email and password are required",
        variant: "destructive",
      })
      return
    }

if (emailExists) {
      toast({
        title: "Email Already Exists",
        description:
          "This email address is already registered. Please use a different email or check the admin users list.",
        variant: "destructive",
      })
      return
    }

if (newAdminData.password.length < 6) {
      toast({
        title: "Validation Error",
        description: "Password must be at least 6 characters",
        variant: "destructive",
      })
      return
    }

setIsCreating(true)

try {
      const result = await createAdminUser(newAdminData)

if (result.success) {
        toast({
          title: "Success",
          description: "Admin user created successfully",
        })

// Reset form and close dialog
        setNewAdminData({
          email: "",
          password: "",
          fullName: "",
          role: "staff",
        })
        setEmailExists(false)
        setIsAddDialogOpen(false)

// Refresh admin users list
        fetchAdminUsers()
      } else {
        toast({
          title: "Error",
          description: result.error || "Failed to create admin user",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error creating admin:", error)
      toast({
        title: "Error",
        description: "An unexpected error occurred",
        variant: "destructive",
      })
    } finally {
      setIsCreating(false)
    }
  }

// Function to check if email exists
  const checkEmailExists = async (email: string) => {
    if (!email || !email.includes("@")) {
      setEmailExists(false)
      return
    }

setEmailCheckLoading(true)
    try {
      const result = await checkEmailExistsAction(email)

if (result.success) {
        setEmailExists(result.exists)
      } else {
        setEmailExists(false)
      }
    } catch (error) {
      console.error("Error checking email:", error)
      setEmailExists(false)
    } finally {
      setEmailCheckLoading(false)
    }
  }

// Debounced email check
  useEffect(() => {
    const timer = setTimeout(() => {
      if (newAdminData.email) {
        checkEmailExists(newAdminData.email)
      } else {
        setEmailExists(false)
      }
    }, 500)

return () => clearTimeout(timer)
  }, [newAdminData.email])

const handleChangePassword = async () => {
    if (!selectedAdminForPassword) return

// Validate passwords
    if (!newPassword || newPassword.length < 6) {
      toast({
        title: "Validation Error",
        description: "Password must be at least 6 characters long",
        variant: "destructive",
      })
      return
    }

if (newPassword !== confirmPassword) {
      toast({
        title: "Validation Error",
        description: "Passwords do not match",
        variant: "destructive",
      })
      return
    }

setIsChangingPassword(true)

try {
      const result = await changeAdminPasswordAction(selectedAdminForPassword.id, newPassword)

if (result.success) {
        toast({
          title: "Success",
          description: "Password changed successfully",
        })

// Reset form and close dialog
        setNewPassword("")
        setConfirmPassword("")
        setIsPasswordDialogOpen(false)
        setSelectedAdminForPassword(null)
      } else {
        toast({
          title: "Error",
          description: result.error || "Failed to change password",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error changing password:", error)
      toast({
        title: "Error",
        description: "An unexpected error occurred",
        variant: "destructive",
      })
    } finally {
      setIsChangingPassword(false)
    }
  }

const openPasswordDialog = (admin: AdminUser) => {
    setSelectedAdminForPassword(admin)
    setNewPassword("")
    setConfirmPassword("")
    setIsPasswordDialogOpen(true)
  }

const handleLoginAsUser = async (userId: string, userName: string) => {
    if (!confirm(`Are you sure you want to login as ${userName}? This will log you out of the admin panel.`)) {
      return
    }

try {
      const result = await loginAsUserAction(userId)

if (result.success) {
        toast({
          title: "Success",
          description: `Logging in as ${userName}...`,
        })

// Redirect to the user's view
        window.location.href = result.redirectUrl || "/"
      } else {
        toast({
          title: "Error",
          description: result.error || "Failed to login as user",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error logging in as user:", error)
      toast({
        title: "Error",
        description: "An unexpected error occurred",
        variant: "destructive",
      })
    }
  }

if (loading) {
    return (
      <div className="flex items-center justify-center h-screen">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-amber-500 mx-auto"></div>
          <p className="mt-4 text-gray-600">Loading users...</p>
        </div>
      </div>
    )
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className={cn("text-3xl font-bold", theme === "dark" ? "text-white" : "text-gray-900")}>
            User Management
          </h1>
          <p className={cn("text-sm mt-1", theme === "dark" ? "text-slate-400" : "text-gray-500")}>
            Manage user roles and permissions
          </p>
        </div>

{viewMode === "admins" && (
          <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
            <DialogTrigger asChild>
              <Button className="bg-gradient-to-r from-amber-500 to-orange-500">
                <UserPlus className="h-4 w-4 mr-2" />
                Add Admin User
              </Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[425px]">
              <DialogHeader>
                <DialogTitle>Add New Admin User</DialogTitle>
                <DialogDescription>
                  Create a new admin user account with specific role and permissions.
                </DialogDescription>
              </DialogHeader>
              <div className="grid gap-4 py-4">
                <div className="grid gap-2">
                  <Label htmlFor="email">Email *</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="admin@example.com"
                    value={newAdminData.email}
                    onChange={(e) => setNewAdminData({ ...newAdminData, email: e.target.value })}
                    className={emailExists ? "border-red-500" : ""}
                  />
                  {emailCheckLoading && newAdminData.email && (
                    <p className="text-xs text-gray-500">Checking email availability...</p>
                  )}
                  {emailExists && !emailCheckLoading && (
                    <p className="text-xs text-red-500">
                      ⚠️ This email is already registered. Please use a different email address.
                    </p>
                  )}
                  {!emailExists && !emailCheckLoading && newAdminData.email && newAdminData.email.includes("@") && (
                    <p className="text-xs text-green-500">✓ Email is available</p>
                  )}
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="password">Password *</Label>
                  <Input
                    id="password"
                    type="password"
                    placeholder="Minimum 6 characters"
                    value={newAdminData.password}
                    onChange={(e) => setNewAdminData({ ...newAdminData, password: e.target.value })}
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="fullName">Full Name</Label>
                  <Input
                    id="fullName"
                    type="text"
                    placeholder="John Doe"
                    value={newAdminData.fullName}
                    onChange={(e) => setNewAdminData({ ...newAdminData, fullName: e.target.value })}
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="role">Admin Role *</Label>
                  <Select
                    value={newAdminData.role}
                    onValueChange={(value) => setNewAdminData({ ...newAdminData, role: value })}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {Object.entries(ADMIN_ROLES).map(([key, role]) => (
                        <SelectItem key={key} value={key}>
                          <div>
                            <div className="font-medium">{role.display_name}</div>
                            <div className="text-xs text-gray-500">{role.description}</div>
                          </div>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <DialogFooter>
                <Button variant="outline" onClick={() => setIsAddDialogOpen(false)} disabled={isCreating}>
                  Cancel
                </Button>
                <Button
                  onClick={handleCreateAdmin}
                  disabled={isCreating || emailExists || emailCheckLoading}
                  className="bg-gradient-to-r from-amber-500 to-orange-500"
                >
                  {isCreating ? "Creating..." : "Create Admin User"}
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        )}
      </div>

<div className="flex gap-2">
        <Button
          variant={viewMode === "users" ? "default" : "outline"}
          onClick={() => setViewMode("users")}
          className={viewMode === "users" ? "bg-gradient-to-r from-amber-500 to-orange-500" : ""}
        >
          <Users className="h-4 w-4 mr-2" />
          Regular Users
        </Button>
        <Button
          variant={viewMode === "admins" ? "default" : "outline"}
          onClick={() => setViewMode("admins")}
          className={viewMode === "admins" ? "bg-gradient-to-r from-amber-500 to-orange-500" : ""}
        >
          <Shield className="h-4 w-4 mr-2" />
          Admin Users
        </Button>
      </div>

{/* Stats Cards */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card className={theme === "dark" ? "bg-slate-800 border-slate-700" : ""}>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Users</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{totalUsers}</div>
            <p className="text-xs text-muted-foreground">All registered users</p>
          </CardContent>
        </Card>

<Card className={theme === "dark" ? "bg-slate-800 border-slate-700" : ""}>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Customers</CardTitle>
            <UserCheck className="h-4 w-4 text-green-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{totalCustomers}</div>
            <p className="text-xs text-muted-foreground">Regular customers</p>
          </CardContent>
        </Card>

<Card className={theme === "dark" ? "bg-slate-800 border-slate-700" : ""}>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Vendors</CardTitle>
            <Store className="h-4 w-4 text-blue-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{totalVendors}</div>
            <p className="text-xs text-muted-foreground">Active vendors</p>
          </CardContent>
        </Card>

<Card className={theme === "dark" ? "bg-slate-800 border-slate-700" : ""}>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Admins</CardTitle>
            <Shield className="h-4 w-4 text-red-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{totalAdmins}</div>
            <p className="text-xs text-muted-foreground">System administrators</p>
          </CardContent>
        </Card>
      </div>

{/* Filters */}
      <Card className={theme === "dark" ? "bg-slate-800 border-slate-700" : ""}>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Filter className="h-5 w-5" />
            Filters
          </CardTitle>
          <CardDescription>Search and filter {viewMode === "users" ? "users" : "admin users"}</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 md:grid-cols-3">
            <div className="relative">
              <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
              <Input
                placeholder="Search by name or ID..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-9"
              />
            </div>

{viewMode === "users" ? (
              <>
                <Select value={roleFilter} onValueChange={setRoleFilter}>
                  <SelectTrigger>
                    <SelectValue placeholder="Filter by role" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Roles</SelectItem>
                    <SelectItem value="customer">Customers</SelectItem>
                    <SelectItem value="vendor">Vendors</SelectItem>
                    <SelectItem value="admin">Admins</SelectItem>
                  </SelectContent>
                </Select>

<Select value={verificationFilter} onValueChange={setVerificationFilter}>
                  <SelectTrigger>
                    <SelectValue placeholder="Filter by verification" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Users</SelectItem>
                    <SelectItem value="verified">Verified Only</SelectItem>
                    <SelectItem value="unverified">Unverified Only</SelectItem>
                  </SelectContent>
                </Select>
              </>
            ) : (
              <Select value={roleFilter} onValueChange={setRoleFilter}>
                <SelectTrigger>
                  <SelectValue placeholder="Filter by admin role" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Admin Roles</SelectItem>
                  {Object.entries(ADMIN_ROLES).map(([key, role]) => (
                    <SelectItem key={key} value={key}>
                      {role.display_name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            )}
          </div>
        </CardContent>
      </Card>

<Dialog open={isPasswordDialogOpen} onOpenChange={setIsPasswordDialogOpen}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Change Password</DialogTitle>
            <DialogDescription>
              Change password for {selectedAdminForPassword?.full_name || selectedAdminForPassword?.email}
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Label htmlFor="newPassword">New Password *</Label>
              <Input
                id="newPassword"
                type="password"
                placeholder="Minimum 6 characters"
                value={newPassword}
                onChange={(e) => setNewPassword(e.target.value)}
              />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="confirmPassword">Confirm Password *</Label>
              <Input
                id="confirmPassword"
                type="password"
                placeholder="Re-enter new password"
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
              />
              {confirmPassword && newPassword !== confirmPassword && (
                <p className="text-xs text-red-500">Passwords do not match</p>
              )}
              {confirmPassword && newPassword === confirmPassword && (
                <p className="text-xs text-green-500">✓ Passwords match</p>
              )}
            </div>
          </div>
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => {
                setIsPasswordDialogOpen(false)
                setNewPassword("")
                setConfirmPassword("")
              }}
              disabled={isChangingPassword}
            >
              Cancel
            </Button>
            <Button
              onClick={handleChangePassword}
              disabled={isChangingPassword || !newPassword || newPassword !== confirmPassword}
              className="bg-gradient-to-r from-amber-500 to-orange-500"
            >
              {isChangingPassword ? "Changing..." : "Change Password"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Users Table */}
      <Card className={theme === "dark" ? "bg-slate-800 border-slate-700" : ""}>
        <CardHeader>
          <CardTitle>Users List</CardTitle>
          <CardDescription>
            {viewMode === "users"
              ? `${filteredUsers.length} user${filteredUsers.length !== 1 ? "s" : ""} found`
              : `${filteredAdminUsers.length} admin user${filteredAdminUsers.length !== 1 ? "s" : ""} found`}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>User</TableHead>
                  <TableHead>Contact</TableHead>
                  <TableHead>Role</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Sales</TableHead>
                  <TableHead>Rating</TableHead>
                  <TableHead>Joined</TableHead>
                  <TableHead className="text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {viewMode === "users" ? (
                  filteredUsers.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={8} className="text-center py-8 text-gray-500">
                        No users found
                      </TableCell>
                    </TableRow>
                  ) : (
                    filteredUsers.map((user) => (
                      <TableRow key={user.id}>
                        <TableCell>
                          <div className="flex items-center gap-3">
                            <div className="h-10 w-10 rounded-full bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center text-white font-semibold">
                              {(user.username || user.business_name || "U").charAt(0).toUpperCase()}
                            </div>
                            <div>
                              <p className="font-medium">{user.username || user.business_name || "Unnamed User"}</p>
                              <p className="text-xs text-gray-500">{user.id.slice(0, 8)}...</p>
                            </div>
                          </div>
                        </TableCell>
                        <TableCell>
                          <div className="text-sm">
                            {user.phone_number && <p>{user.phone_number}</p>}
                            {user.business_name && user.user_type === "vendor" && (
                              <p className="text-xs text-gray-500">{user.business_name}</p>
                            )}
                          </div>
                        </TableCell>
                        <TableCell>
                          <Select value={user.user_type} onValueChange={(value) => updateUserRole(user.id, value)}>
                            <SelectTrigger className="w-32">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="customer">Customer</SelectItem>
                              <SelectItem value="vendor">Vendor</SelectItem>
                              <SelectItem value="admin">Admin</SelectItem>
                            </SelectContent>
                          </Select>
                        </TableCell>
                        <TableCell>
                          <Badge
                            variant="outline"
                            className={
                              user.is_verified
                                ? "bg-green-500/10 text-green-500 border-green-500/20"
                                : "bg-gray-500/10 text-gray-500 border-gray-500/20"
                            }
                          >
                            {user.is_verified ? "Verified" : "Unverified"}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          {user.user_type === "vendor" ? (
                            <span className="font-medium">{user.total_sales || 0}</span>
                          ) : (
                            <span className="text-gray-400">-</span>
                          )}
                        </TableCell>
                        <TableCell>
                          {user.rating ? (
                            <div className="flex items-center gap-1">
                              <span className="text-amber-500">★</span>
                              <span>{user.rating.toFixed(1)}</span>
                            </div>
                          ) : (
                            <span className="text-gray-400">-</span>
                          )}
                        </TableCell>
                        <TableCell>
                          <span className="text-sm text-gray-500">
                            {new Date(user.created_at).toLocaleDateString()}
                          </span>
                        </TableCell>
                        <TableCell className="text-right">
                          <div className="flex items-center justify-end gap-2">
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => handleLoginAsUser(user.id, user.username || user.business_name || "User")}
                            >
                              <LogIn className="h-3 w-3 mr-1" />
                              Login as User
                            </Button>
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => toggleVerification(user.id, user.is_verified)}
                            >
                              {user.is_verified ? "Unverify" : "Verify"}
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))
                  )
                ) : filteredAdminUsers.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={8} className="text-center py-8 text-gray-500">
                      No admin users found
                    </TableCell>
                  </TableRow>
                ) : (
                  filteredAdminUsers.map((admin) => (
                    <TableRow key={admin.id}>
                      <TableCell>
                        <div className="flex items-center gap-3">
                          <div className="h-10 w-10 rounded-full bg-gradient-to-br from-red-500 to-pink-500 flex items-center justify-center text-white font-semibold">
                            {(admin.full_name || admin.email || "A").charAt(0).toUpperCase()}
                          </div>
                          <div>
                            <p className="font-medium">{admin.full_name || admin.email || "Unnamed Admin"}</p>
                            <p className="text-xs text-gray-500">{admin.email}</p>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="text-sm">
                          <p className="text-xs text-gray-500">{admin.id.slice(0, 8)}...</p>
                          {admin.last_login && (
                            <p className="text-xs text-gray-400">
                              Last login: {new Date(admin.last_login).toLocaleDateString()}
                            </p>
                          )}
                        </div>
                      </TableCell>
                      <TableCell>
                        <Select value={admin.role} onValueChange={(value) => updateAdminRole(admin.id, value)}>
                          <SelectTrigger className="w-40">
                            <SelectValue>
                              <Badge variant="outline" className="font-normal">
                                {getAdminRoleDisplay(admin.role)}
                              </Badge>
                            </SelectValue>
                          </SelectTrigger>
                          <SelectContent>
                            {Object.entries(ADMIN_ROLES).map(([key, role]) => (
                              <SelectItem key={key} value={key}>
                                {role.display_name}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </TableCell>
                      <TableCell>
                        <Badge
                          variant="outline"
                          className={
                            admin.is_active
                              ? "bg-green-500/10 text-green-500 border-green-500/20"
                              : "bg-red-500/10 text-red-500 border-red-500/20"
                          }
                        >
                          {admin.is_active ? "Active" : "Inactive"}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <span className="text-gray-400">-</span>
                      </TableCell>
                      <TableCell>
                        <span className="text-gray-400">-</span>
                      </TableCell>
                      <TableCell>
                        <span className="text-sm text-gray-500">{new Date(admin.created_at).toLocaleDateString()}</span>
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex items-center justify-end gap-2">
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handleLoginAsUser(admin.id, admin.full_name || admin.email || "Admin")}
                          >
                            <LogIn className="h-3 w-3 mr-1" />
                            Login as Admin
                          </Button>
                          <Button variant="outline" size="sm" onClick={() => openPasswordDialog(admin)}>
                            <Key className="h-3 w-3 mr-1" />
                            Change Password
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/layout.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useEffect, useState } from "react"
import { useRouter, usePathname } from "next/navigation"
import { AdminSidebar } from "@/components/admin-sidebar"
import { AdminThemeProvider, useAdminTheme } from "@/lib/admin-theme-context"
import { Button } from "@/components/ui/button"
import { Moon, Sun } from "lucide-react"
import { checkAdminAccess } from "./check-access"

function AdminLayoutContent({ children }: { children: React.ReactNode }) {
  const router = useRouter()
  const pathname = usePathname()
  const { theme, toggleTheme } = useAdminTheme()
  const [isChecking, setIsChecking] = useState(true)

useEffect(() => {
    async function verifyAccess() {
      if (pathname === "/auth/admin") {
        setIsChecking(false)
        return
      }

console.log("[v0] Checking admin access for:", pathname)

const result = await checkAdminAccess()

if (!result.hasAccess) {
        console.log("[v0] Access denied:", result.reason)
        router.push("/auth/admin")
        return
      }

console.log("[v0] Access granted for:", result.user?.role)
      setIsChecking(false)
    }

verifyAccess()
  }, [router, pathname])

if (pathname === "/auth/admin") {
    return <>{children}</>
  }

if (isChecking) {
    return (
      <div className="flex h-screen items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
        <div className="text-white">Verifying access...</div>
      </div>
    )
  }

return (
    <div
      className={
        theme === "dark"
          ? "flex h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900"
          : "flex h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100"
      }
    >
      <AdminSidebar />
      <main className="flex-1 overflow-y-auto relative">
        <div className="absolute top-4 right-6 z-10">
          <Button
            variant="outline"
            size="icon"
            onClick={toggleTheme}
            className={
              theme === "dark"
                ? "bg-slate-800 border-slate-700 text-slate-400 hover:bg-slate-700 hover:text-white"
                : "bg-white border-gray-300 text-gray-700 hover:bg-gray-100"
            }
          >
            {theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
          </Button>
        </div>
        <div className="container mx-auto px-6 py-8">{children}</div>
      </main>
    </div>
  )
}

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  return (
    <AdminThemeProvider>
      <AdminLayoutContent>{children}</AdminLayoutContent>
    </AdminThemeProvider>
  )
}
[V0_FILE]typescriptreact:file="app/vendor/settings/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { createClient } from "@/lib/supabase/client"
import { useRouter } from "next/navigation"
import { Loader2, ImageIcon } from "lucide-react"

export default function VendorSettingsPage() {
  const router = useRouter()
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [profile, setProfile] = useState({
    business_name: "",
    business_description: "",
    business_address: "",
    phone_number: "",
    username: "",
    logo_url: "",
    banner_url: "",
  })

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

async function loadProfile() {
    try {
      const supabase = createClient()
      const {
        data: { user },
      } = await supabase.auth.getUser()

if (!user) {
        router.push("/vendor/login")
        return
      }

const { data, error } = await supabase.from("profiles").select("*").eq("id", user.id).maybeSingle()

if (error) throw error

if (data) {
        setProfile({
          business_name: data.business_name || "",
          business_description: data.business_description || "",
          business_address: data.business_address || "",
          phone_number: data.phone_number || "",
          username: data.username || "",
          logo_url: data.logo_url || "",
          banner_url: data.banner_url || "",
        })
      }
    } catch (error) {
      console.error("Error loading profile:", error)
    } finally {
      setLoading(false)
    }
  }

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setSaving(true)

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

if (!user) {
        router.push("/vendor/login")
        return
      }

const { error } = await supabase
        .from("profiles")
        .update({
          business_name: profile.business_name,
          business_description: profile.business_description,
          business_address: profile.business_address,
          phone_number: profile.phone_number,
          username: profile.username,
          logo_url: profile.logo_url,
          banner_url: profile.banner_url,
          updated_at: new Date().toISOString(),
        })
        .eq("id", user.id)

if (error) throw error

alert("Settings saved successfully!")
    } catch (error) {
      console.error("Error saving settings:", error)
      alert("Failed to save settings. Please try again.")
    } finally {
      setSaving(false)
    }
  }

if (loading) {
    return (
      <div className="p-8 flex items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
      </div>
    )
  }

return (
    <div className="p-8 space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-bold">Store Settings</h1>
        <p className="text-muted-foreground">Manage your store information and preferences</p>
      </div>

<form onSubmit={handleSubmit} className="space-y-6">
        {/* Store Branding */}
        <Card>
          <CardHeader>
            <CardTitle>Store Branding</CardTitle>
            <CardDescription>Upload your store logo and banner to customize your shop profile</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="logo_url">Store Logo URL</Label>
              <Input
                id="logo_url"
                value={profile.logo_url}
                onChange={(e) => setProfile({ ...profile, logo_url: e.target.value })}
                placeholder="https://example.com/logo.png"
                type="url"
              />
              <p className="text-xs text-muted-foreground">
                Recommended size: 200x200px. This will be displayed as your shop avatar.
              </p>
              {profile.logo_url && (
                <div className="mt-2 p-4 border rounded-lg bg-muted/50">
                  <p className="text-sm font-medium mb-2">Logo Preview:</p>
                  <div className="flex items-center gap-4">
                    <img
                      src={profile.logo_url || "/placeholder.svg"}
                      alt="Logo preview"
                      className="h-20 w-20 rounded-full object-cover border-2 border-background"
                      onError={(e) => {
                        e.currentTarget.src = "/placeholder.svg?height=80&width=80"
                      }}
                    />
                  </div>
                </div>
              )}
            </div>

<div className="space-y-2">
              <Label htmlFor="banner_url">Store Banner URL</Label>
              <Input
                id="banner_url"
                value={profile.banner_url}
                onChange={(e) => setProfile({ ...profile, banner_url: e.target.value })}
                placeholder="https://example.com/banner.jpg"
                type="url"
              />
              <p className="text-xs text-muted-foreground">
                Recommended size: 1200x400px. This will be displayed at the top of your shop page.
              </p>
              {profile.banner_url && (
                <div className="mt-2 p-4 border rounded-lg bg-muted/50">
                  <p className="text-sm font-medium mb-2">Banner Preview:</p>
                  <div className="relative w-full h-32 rounded-lg overflow-hidden">
                    <img
                      src={profile.banner_url || "/placeholder.svg"}
                      alt="Banner preview"
                      className="w-full h-full object-cover"
                      onError={(e) => {
                        e.currentTarget.src = "/placeholder.svg?height=400&width=1200"
                      }}
                    />
                  </div>
                </div>
              )}
            </div>

<div className="flex items-start gap-2 p-3 bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-900 rounded-lg">
              <ImageIcon className="h-5 w-5 text-blue-600 dark:text-blue-400 mt-0.5" />
              <div className="text-sm text-blue-900 dark:text-blue-100">
                <p className="font-medium mb-1">Image Upload Tips:</p>
                <ul className="list-disc list-inside space-y-1 text-blue-800 dark:text-blue-200">
                  <li>Upload your images to a hosting service (e.g., Imgur, Cloudinary)</li>
                  <li>Copy the direct image URL and paste it in the fields above</li>
                  <li>Use high-quality images for better shop presentation</li>
                </ul>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Business Information */}
        <Card>
          <CardHeader>
            <CardTitle>Business Information</CardTitle>
            <CardDescription>Update your store details and contact information</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="business_name">Business Name *</Label>
              <Input
                id="business_name"
                value={profile.business_name}
                onChange={(e) => setProfile({ ...profile, business_name: e.target.value })}
                placeholder="Enter your business name"
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="username">Username *</Label>
              <Input
                id="username"
                value={profile.username}
                onChange={(e) => setProfile({ ...profile, username: e.target.value })}
                placeholder="Enter your username"
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="business_description">Business Description</Label>
              <Textarea
                id="business_description"
                value={profile.business_description}
                onChange={(e) => setProfile({ ...profile, business_description: e.target.value })}
                placeholder="Describe your business"
                rows={4}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="business_address">Business Address</Label>
              <Textarea
                id="business_address"
                value={profile.business_address}
                onChange={(e) => setProfile({ ...profile, business_address: e.target.value })}
                placeholder="Enter your business address"
                rows={3}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="phone_number">Phone Number</Label>
              <Input
                id="phone_number"
                type="tel"
                value={profile.phone_number}
                onChange={(e) => setProfile({ ...profile, phone_number: e.target.value })}
                placeholder="Enter your phone number"
              />
            </div>
          </CardContent>
        </Card>

{/* Save Button */}
        <div className="flex justify-end">
          <Button type="submit" disabled={saving}>
            {saving ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Saving...
              </>
            ) : (
              "Save Changes"
            )}
          </Button>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/(frontend)/shops/[shop_name]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useParams } from "next/navigation"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Star, Store, MapPin, Phone, Loader2, ShoppingCart, Heart, Package } from "lucide-react"
import { createClient } from "@/lib/supabase/client"
import Image from "next/image"
import Link from "next/link"
import { useCart } from "@/lib/cart-context"
import { useWishlist } from "@/lib/wishlist-context"

interface Vendor {
  id: string
  business_name: string
  business_description: string
  business_address: string | null
  phone_number: string | null
  avatar_url: string | null
  logo_url: string | null
  banner_url: string | null
  rating: number
  total_sales: number
  is_verified: boolean
}

interface Product {
  id: string
  name: string
  category: string
  price: number
  discount_amount?: number
  rating: number
  image_url: string
  stock_quantity: number
  is_active: boolean
}

export default function ShopPage() {
  const params = useParams()
  const shopName = params.shop_name as string
  const [vendor, setVendor] = useState<Vendor | null>(null)
  const [products, setProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)
  const [sortBy, setSortBy] = useState("newest")
  const [productCount, setProductCount] = useState(0)
  const { addItem } = useCart()
  const { toggleItem, isInWishlist } = useWishlist()

const isUUID = (str: string) => {
    const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
    return uuidRegex.test(str)
  }

useEffect(() => {
    async function fetchShopData() {
      try {
        const supabase = createClient()

const decodedShopName = decodeURIComponent(shopName)
        let vendorQuery = supabase.from("profiles").select("*").eq("user_type", "vendor")

// Check if shopName is a UUID or business name
        if (isUUID(decodedShopName)) {
          vendorQuery = vendorQuery.eq("id", decodedShopName)
        } else {
          vendorQuery = vendorQuery.eq("business_name", decodedShopName)
        }

const { data: vendorData, error: vendorError } = await vendorQuery.single()

if (vendorError) throw vendorError
        setVendor(vendorData)

// Fetch vendor products
        let query = supabase
          .from("products")
          .select("*")
          .eq("vendor_id", vendorData.id)
          .eq("is_active", true)
          .eq("approval_status", "approved")

const { data: productsData, error: productsError } = await query

if (productsError) throw productsError
        setProducts(productsData || [])
        setProductCount(productsData?.length || 0)
      } catch (err) {
        console.error("Error fetching shop data:", err)
      } finally {
        setLoading(false)
      }
    }

fetchShopData()
  }, [shopName, sortBy])

const handleAddToCart = (product: Product) => {
    const originalPrice = product.discount_amount ? product.price + product.discount_amount : product.price

addItem({
      id: product.id,
      name: product.name,
      price: product.price,
      originalPrice: originalPrice,
      image: product.image_url,
      vendor: vendor?.business_name || "Vendor",
      category: product.category,
    })
  }

const toggleFavorite = (product: Product) => {
    const originalPrice = product.discount_amount ? product.price + product.discount_amount : product.price

toggleItem({
      id: product.id,
      name: product.name,
      price: product.price,
      originalPrice: originalPrice,
      image: product.image_url,
      vendor: vendor?.business_name || "Vendor",
      category: product.category,
      rating: product.rating,
      reviews: 0,
    })
  }

if (!vendor) {
    return (
      <div className="container mx-auto px-4 py-12">
        <div className="text-center py-12">
          <Store className="h-16 w-16 mx-auto text-muted-foreground mb-4" />
          <h2 className="text-2xl font-bold mb-2">Shop Not Found</h2>
          <p className="text-muted-foreground mb-4">The shop you're looking for doesn't exist.</p>
          <Link href="/shops">
            <Button>Browse All Shops</Button>
          </Link>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      <div className="relative h-64 bg-gradient-to-r from-primary/20 to-primary/5">
        <Image
          src={vendor.banner_url || vendor.avatar_url || "/placeholder.svg?height=400&width=1200&query=shop banner"}
          alt={`${vendor.business_name} banner`}
          fill
          className="object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
      </div>

{/* Shop Info */}
      <div className="container mx-auto px-4">
        <div className="relative -mt-20 mb-8">
          <Card>
            <CardContent className="p-6">
              <div className="flex flex-col md:flex-row gap-6">
                <Avatar className="h-32 w-32 border-4 border-background">
                  <AvatarImage src={vendor.logo_url || vendor.avatar_url || undefined} />
                  <AvatarFallback className="text-3xl">{vendor.business_name?.charAt(0) || "V"}</AvatarFallback>
                </Avatar>

<div className="flex-1">
                  <div className="flex items-start justify-between mb-2">
                    <div>
                      <div className="flex items-center gap-2 mb-1">
                        <h1 className="text-3xl font-bold">{vendor.business_name}</h1>
                        {vendor.is_verified && (
                          <Badge className="bg-primary text-primary-foreground">Verified Seller</Badge>
                        )}
                      </div>
                      <p className="text-muted-foreground">{vendor.business_description}</p>
                    </div>
                  </div>

<div className="flex flex-wrap gap-6 mt-4">
                    <div className="flex items-center gap-2">
                      <Star className="h-5 w-5 fill-amber-400 text-amber-400" />
                      <span className="font-semibold">{vendor.rating?.toFixed(1) || "5.0"}</span>
                      <span className="text-sm text-muted-foreground">({vendor.total_sales || 0} reviews)</span>
                    </div>
                    <div className="flex items-center gap-2 text-muted-foreground">
                      <Package className="h-5 w-5" />
                      <span>{productCount} Products</span>
                    </div>
                    {vendor.business_address && (
                      <div className="flex items-center gap-2 text-muted-foreground">
                        <MapPin className="h-5 w-5" />
                        <span>{vendor.business_address}</span>
                      </div>
                    )}
                  </div>

{vendor.phone_number && (
                    <div className="flex items-center gap-2 mt-4 text-sm text-muted-foreground">
                      <Phone className="h-4 w-4" />
                      <span>{vendor.phone_number}</span>
                    </div>
                  )}
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

{/* Products Section */}
        <Tabs defaultValue="products" className="mb-8">
          <TabsList>
            <TabsTrigger value="products">Products ({productCount})</TabsTrigger>
            <TabsTrigger value="about">About</TabsTrigger>
          </TabsList>

<TabsContent value="products" className="mt-6">
            {/* Sort and Filter */}
            <div className="flex items-center justify-between mb-6">
              <p className="text-sm text-muted-foreground">Showing {products.length} products</p>
              <div className="flex items-center gap-2">
                <span className="text-sm text-muted-foreground">Sort by:</span>
                <Select value={sortBy} onValueChange={setSortBy}>
                  <SelectTrigger className="w-[180px]">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="newest">Newest</SelectItem>
                    <SelectItem value="price-low">Price: Low to High</SelectItem>
                    <SelectItem value="price-high">Price: High to Low</SelectItem>
                    <SelectItem value="rating">Highest Rated</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

{/* Products Grid */}
            {products.length === 0 ? (
              <div className="text-center py-12">
                <Package className="h-16 w-16 mx-auto text-muted-foreground mb-4" />
                <p className="text-muted-foreground">This shop doesn't have any products yet.</p>
              </div>
            ) : (
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                {products.map((product) => {
                  const originalPrice = product.discount_amount
                    ? product.price + product.discount_amount
                    : product.price
                  const hasDiscount = product.discount_amount && product.discount_amount > 0

return (
                    <Card key={product.id} className="group overflow-hidden hover:shadow-lg transition-shadow">
                      <CardContent className="p-0">
                        <Link href={`/products/${product.id}`}>
                          <div className="relative aspect-square overflow-hidden bg-muted cursor-pointer">
                            <Image
                              src={product.image_url || "/placeholder.svg?height=300&width=300"}
                              alt={product.name}
                              fill
                              className="object-cover group-hover:scale-105 transition-transform duration-300"
                            />
                            <button
                              onClick={(e) => {
                                e.preventDefault()
                                toggleFavorite(product)
                              }}
                              className="absolute top-3 right-3 p-2 rounded-full bg-white/90 hover:bg-white transition-colors z-10"
                            >
                              <Heart
                                className={`h-5 w-5 ${isInWishlist(product.id) ? "fill-red-500 text-red-500" : "text-gray-600"}`}
                              />
                            </button>
                          </div>
                        </Link>

<div className="p-4 space-y-3">
                          <Link href={`/products/${product.id}`}>
                            <h3 className="font-semibold text-sm line-clamp-2 min-h-[2.5rem] hover:text-primary transition-colors cursor-pointer">
                              {product.name}
                            </h3>
                          </Link>

<div className="flex items-center gap-2">
                            <span className="text-lg font-bold">AED{product.price.toFixed(2)}</span>
                            {hasDiscount && (
                              <span className="text-sm text-muted-foreground line-through">
                                AED{originalPrice.toFixed(2)}
                              </span>
                            )}
                          </div>

<div className="flex items-center gap-1">
                            <div className="flex">
                              {Array.from({ length: 5 }).map((_, i) => (
                                <Star
                                  key={i}
                                  className={`h-4 w-4 ${
                                    i < product.rating
                                      ? "fill-yellow-400 text-yellow-400"
                                      : "fill-gray-200 text-gray-200"
                                  }`}
                                />
                              ))}
                            </div>
                            <span className="text-xs text-muted-foreground">({product.rating})</span>
                          </div>

<Button
                            size="sm"
                            className="w-full"
                            onClick={() => handleAddToCart(product)}
                            disabled={product.stock_quantity === 0}
                          >
                            <ShoppingCart className="h-4 w-4 mr-1" />
                            {product.stock_quantity === 0 ? "Out of Stock" : "Add to Cart"}
                          </Button>
                        </div>
                      </CardContent>
                    </Card>
                  )
                })}
              </div>
            )}
          </TabsContent>

<TabsContent value="about" className="mt-6">
            <Card>
              <CardContent className="p-6">
                <h3 className="text-xl font-bold mb-4">About {vendor.business_name}</h3>
                <p className="text-muted-foreground mb-6">
                  {vendor.business_description || "No description available."}
                </p>

<div className="space-y-4">
                  <div className="flex items-center gap-3">
                    <Store className="h-5 w-5 text-muted-foreground" />
                    <div>
                      <p className="font-medium">Total Products</p>
                      <p className="text-sm text-muted-foreground">{productCount} active products</p>
                    </div>
                  </div>

<div className="flex items-center gap-3">
                    <Star className="h-5 w-5 text-muted-foreground" />
                    <div>
                      <p className="font-medium">Seller Rating</p>
                      <p className="text-sm text-muted-foreground">
                        {vendor.rating?.toFixed(1) || "5.0"} out of 5 stars
                      </p>
                    </div>
                  </div>

{vendor.business_address && (
                    <div className="flex items-center gap-3">
                      <MapPin className="h-5 w-5 text-muted-foreground" />
                      <div>
                        <p className="font-medium">Location</p>
                        <p className="text-sm text-muted-foreground">{vendor.business_address}</p>
                      </div>
                    </div>
                  )}

{vendor.phone_number && (
                    <div className="flex items-center gap-3">
                      <Phone className="h-5 w-5 text-muted-foreground" />
                      <div>
                        <p className="font-medium">Contact</p>
                        <p className="text-sm text-muted-foreground">{vendor.phone_number}</p>
                      </div>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/018_add_vendor_logo_banner.sql" isEdit="true" isMerged="true"
-- Add logo_url and banner_url columns to profiles table for vendor branding

ALTER TABLE profiles
ADD COLUMN IF NOT EXISTS logo_url TEXT,
ADD COLUMN IF NOT EXISTS banner_url TEXT;

-- Add comments for documentation
COMMENT ON COLUMN profiles.logo_url IS 'URL for vendor shop logo image';
COMMENT ON COLUMN profiles.banner_url IS 'URL for vendor shop banner/cover image';
[V0_FILE]sql:file="scripts/019_sync_admin_users_note.sql" isMerged="true"
-- NOTE: Admin users must exist in both Supabase Auth AND admin_users table
-- 
-- The admin user created in script 006 (admin@tradegatestore.com) only exists
-- in the admin_users table, not in Supabase Auth.
--
-- To fix this, you have two options:
--
-- OPTION 1: Create admin users through the Admin Users page UI
--   1. First, create a temporary admin user through the UI at /admin/users
--   2. Login with that user
--   3. Create additional admin users as needed
--
-- OPTION 2: Manually create in Supabase Dashboard
--   1. Go to your Supabase project dashboard
--   2. Navigate to Authentication > Users
--   3. Click "Add user" and create: admin@tradegatestore.com with password: Admin@123456
--   4. Copy the user ID
--   5. Update the admin_users table to use that ID:
--      UPDATE admin_users SET id = '<copied-user-id>' WHERE email = 'admin@tradegatestore.com';
--
-- This script removes the placeholder admin user and provides instructions.

-- Remove the placeholder admin user that doesn't have Supabase Auth
DELETE FROM public.admin_users WHERE email = 'admin@tradegatestore.com' AND password_hash LIKE '$2a$10$rKZLvXZvXZvXZvXZvXZvXe%';

-- Add a comment explaining the requirement
COMMENT ON TABLE public.admin_users IS 'Admin users must be created through Supabase Auth first, then linked here. Use the createAdminUser function in the Admin Users page.';
[V0_FILE]typescript:file="app/auth/admin/actions.ts" isEdit="true" isMerged="true"
"use server"

import { authenticateAdmin, clearAdminSession } from "@/lib/admin-auth"

export async function adminLogin(email: string, password: string) {
  return await authenticateAdmin(email, password)
}

export async function adminLogout() {
  await clearAdminSession()
  return { success: true }
}
[V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import Link from "next/link"
import Image from "next/image"
import { Search, ShoppingCart, User, Heart, Menu, LogOut } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { createClient } from "@/lib/supabase/client"
import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import type { User as SupabaseUser } from "@supabase/supabase-js"
import { useCart } from "@/lib/cart-context"
import { useWishlist } from "@/lib/wishlist-context"
import { CartDrawer } from "@/components/cart-drawer"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function Header() {
  const [user, setUser] = useState<SupabaseUser | null>(null)
  const [isCustomer, setIsCustomer] = useState(false)
  const [searchQuery, setSearchQuery] = useState("")
  const [searchSuggestions, setSearchSuggestions] = useState<any[]>([])
  const [showSuggestions, setShowSuggestions] = useState(false)
  const router = useRouter()
  const { totalItems, openCart } = useCart()
  const { totalItems: wishlistCount } = useWishlist()

useEffect(() => {
    const supabase = createClient()

supabase.auth.getUser().then(({ data: { user }, error }) => {
      // Check if JWT is expired
      if (error && (error.message.includes("JWT expired") || error.message.includes("token is expired"))) {
        console.log("[v0] JWT expired, signing out to clear cookies")
        supabase.auth.signOut().then(() => {
          setUser(null)
          setIsCustomer(false)
        })
        return
      }

setUser(user)
      if (user) {
        checkUserType(user.id)
      } else {
        setIsCustomer(false)
      }
    })

const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setUser(session?.user ?? null)
      if (session?.user) {
        checkUserType(session.user.id)
      } else {
        setIsCustomer(false)
      }
    })

return () => subscription.unsubscribe()
  }, [])

const checkUserType = async (userId: string) => {
    try {
      const supabase = createClient()
      const { data, error } = await supabase.from("profiles").select("user_type").eq("id", userId).single()

if (error && (error.message.includes("JWT expired") || error.message.includes("token is expired"))) {
        console.log("[v0] JWT expired in checkUserType, signing out")
        await supabase.auth.signOut()
        setUser(null)
        setIsCustomer(false)
        return
      }

setIsCustomer(data?.user_type === "customer")
    } catch (err) {
      console.error("[v0] Error checking user type:", err)
      setIsCustomer(false)
    }
  }

useEffect(() => {
    const fetchSuggestions = async () => {
      if (searchQuery.trim().length < 2) {
        setSearchSuggestions([])
        return
      }

try {
        const supabase = createClient()
        const { data, error } = await supabase
          .from("products")
          .select("id, name, image_url, price")
          .eq("is_active", true)
          .eq("approval_status", "approved")
          .or(`name.ilike.%${searchQuery}%,category.ilike.%${searchQuery}%,brand.ilike.%${searchQuery}%`)
          .limit(5)

if (error && (error.message.includes("JWT expired") || error.message.includes("token is expired"))) {
          console.log("[v0] JWT expired in search, signing out")
          await supabase.auth.signOut()
          setUser(null)
          setIsCustomer(false)
          return
        }

setSearchSuggestions(data || [])
      } catch (err) {
        console.error("[v0] Error fetching suggestions:", err)
      }
    }

const debounce = setTimeout(fetchSuggestions, 300)
    return () => clearTimeout(debounce)
  }, [searchQuery])

const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    if (searchQuery.trim()) {
      router.push(`/search?q=${encodeURIComponent(searchQuery.trim())}`)
      setShowSuggestions(false)
      setSearchQuery("")
    }
  }

const handleSuggestionClick = (productId: string) => {
    router.push(`/products/${productId}`)
    setShowSuggestions(false)
    setSearchQuery("")
  }

const handleLogout = async () => {
    const supabase = createClient()
    await supabase.auth.signOut()
    router.push("/")
    router.refresh()
  }

return (
    <>
      <header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        {/* Top bar */}
        <div className="border-b border-border bg-muted/50">
          <div className="container mx-auto flex h-10 items-center justify-between px-4 text-sm">
            <div className="flex items-center gap-6">
              <Link href="/vendor/register" className="text-muted-foreground hover:text-foreground transition-colors">
                Become a Vendor
              </Link>
              <Link href="/help" className="text-muted-foreground hover:text-foreground transition-colors">
                Help Center
              </Link>
            </div>
            <div className="flex items-center gap-4">
              <Link href="/track-order" className="text-muted-foreground hover:text-foreground transition-colors">
                Track Order
              </Link>
              {user && isCustomer ? (
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <button className="text-foreground hover:text-primary transition-colors font-medium">
                      {user.user_metadata?.username || user.email}
                    </button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuLabel>My Account</DropdownMenuLabel>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem asChild>
                      <Link href="/profile">Profile</Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem asChild>
                      <Link href="/dashboard">Dashboard</Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem asChild>
                      <Link href="/orders">Orders</Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem asChild>
                      <Link href="/settings">Settings</Link>
                    </DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem onClick={handleLogout} className="text-red-600">
                      <LogOut className="mr-2 h-4 w-4" />
                      Logout
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              ) : (
                <>
                  <Link href="/login" className="text-muted-foreground hover:text-foreground transition-colors">
                    Login
                  </Link>
                  <Link href="/signup" className="text-primary hover:text-primary/80 transition-colors font-medium">
                    Sign Up
                  </Link>
                </>
              )}
            </div>
          </div>
        </div>

{/* Main header */}
        <div className="container mx-auto px-4">
          <div className="flex h-16 items-center justify-between gap-4">
            {/* Logo */}
            <Link href="/" className="flex items-center gap-2">
              <Image src="/logo.png" alt="TradeGateStore" width={40} height={40} className="h-10 w-10" />
              <span className="text-xl font-bold text-foreground">TradeGateStore</span>
            </Link>

{/* Search bar */}
            <div className="hidden md:flex flex-1 max-w-2xl relative">
              <form onSubmit={handleSearch} className="relative w-full">
                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <Input
                  type="search"
                  placeholder="Search for products, vendors, or categories..."
                  className="w-full pl-10 pr-4"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  onFocus={() => setShowSuggestions(true)}
                  onBlur={() => setTimeout(() => setShowSuggestions(false), 200)}
                />
              </form>

{/* Search suggestions dropdown */}
              {showSuggestions && searchSuggestions.length > 0 && (
                <div className="absolute top-full left-0 right-0 mt-2 bg-background border border-border rounded-lg shadow-lg overflow-hidden z-50">
                  {searchSuggestions.map((product) => (
                    <button
                      key={product.id}
                      onClick={() => handleSuggestionClick(product.id)}
                      className="w-full flex items-center gap-3 p-3 hover:bg-muted transition-colors text-left"
                    >
                      {product.image_url && (
                        <Image
                          src={product.image_url || "/placeholder.svg"}
                          alt={product.name}
                          width={40}
                          height={40}
                          className="rounded object-cover"
                        />
                      )}
                      <div className="flex-1 min-w-0">
                        <p className="font-medium truncate">{product.name}</p>
                        <p className="text-sm text-primary font-semibold">AED {product.price}</p>
                      </div>
                    </button>
                  ))}
                  <button
                    onClick={handleSearch}
                    className="w-full p-3 text-center text-sm text-primary hover:bg-muted transition-colors border-t border-border"
                  >
                    View all results for "{searchQuery}"
                  </button>
                </div>
              )}
            </div>

{/* Actions */}
            <div className="flex items-center gap-2">
              <Button variant="ghost" size="icon" className="hidden md:inline-flex relative">
                <Link href="/wishlist">
                  <Heart className="h-5 w-5" />
                  {wishlistCount > 0 && (
                    <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white">
                      {wishlistCount}
                    </span>
                  )}
                  <span className="sr-only">Wishlist</span>
                </Link>
              </Button>
              <Button variant="ghost" size="icon" className="relative" onClick={openCart}>
                <ShoppingCart className="h-5 w-5" />
                {totalItems > 0 && (
                  <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">
                    {totalItems}
                  </span>
                )}
                <span className="sr-only">Cart</span>
              </Button>
              {user && isCustomer ? (
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon" className="hidden md:inline-flex">
                      <User className="h-5 w-5" />
                      <span className="sr-only">Account</span>
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-56">
                    <DropdownMenuLabel>
                      <div className="flex flex-col space-y-1">
                        <p className="text-sm font-medium leading-none">{user.user_metadata?.username || "User"}</p>
                        <p className="text-xs leading-none text-muted-foreground">{user.email}</p>
                      </div>
                    </DropdownMenuLabel>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem asChild>
                      <Link href="/profile" className="cursor-pointer">
                        Profile
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem asChild>
                      <Link href="/dashboard" className="cursor-pointer">
                        Dashboard
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem asChild>
                      <Link href="/orders" className="cursor-pointer">
                        Orders
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem asChild>
                      <Link href="/wishlist" className="cursor-pointer">
                        Wishlist
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem asChild>
                      <Link href="/settings" className="cursor-pointer">
                        Settings
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem onClick={handleLogout} className="text-red-600 cursor-pointer">
                      <LogOut className="mr-2 h-4 w-4" />
                      Logout
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              ) : (
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon" className="hidden md:inline-flex">
                      <User className="h-5 w-5" />
                      <span className="sr-only">Account</span>
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-56">
                    <DropdownMenuLabel>Account</DropdownMenuLabel>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem asChild>
                      <Link href="/login" className="cursor-pointer">
                        Login
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem asChild>
                      <Link href="/signup" className="cursor-pointer">
                        Sign Up
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem asChild>
                      <Link href="/vendor/register" className="cursor-pointer">
                        Become a Vendor
                      </Link>
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              )}
              <Button variant="ghost" size="icon" className="md:hidden">
                <Menu className="h-5 w-5" />
                <span className="sr-only">Menu</span>
              </Button>
            </div>
          </div>

{/* Mobile search */}
          <div className="md:hidden pb-4">
            <form onSubmit={handleSearch} className="relative w-full">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                type="search"
                placeholder="Search products..."
                className="w-full pl-10 pr-4"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </form>
          </div>
        </div>

{/* Categories navigation */}
        <div className="border-t border-border bg-card">
          <div className="container mx-auto px-4">
            <nav className="flex h-12 items-center gap-6 overflow-x-auto text-sm">
              <Link
                href="/shops"
                className="whitespace-nowrap text-foreground hover:text-primary transition-colors font-medium"
              >
                Shops
              </Link>
              <Link
                href="/categories/electronics"
                className="whitespace-nowrap text-foreground hover:text-primary transition-colors font-medium"
              >
                Electronics
              </Link>
              <Link
                href="/categories/fashion"
                className="whitespace-nowrap text-foreground hover:text-primary transition-colors font-medium"
              >
                Fashion
              </Link>
              <Link
                href="/categories/home"
                className="whitespace-nowrap text-foreground hover:text-primary transition-colors font-medium"
              >
                Home & Living
              </Link>
              <Link
                href="/categories/beauty"
                className="whitespace-nowrap text-foreground hover:text-primary transition-colors font-medium"
              >
                Beauty
              </Link>
              <Link
                href="/categories/sports"
                className="whitespace-nowrap text-foreground hover:text-primary transition-colors font-medium"
              >
                Sports
              </Link>
              <Link
                href="/categories/books"
                className="whitespace-nowrap text-foreground hover:text-primary transition-colors font-medium"
              >
                Books
              </Link>
              <Link
                href="/categories/toys"
                className="whitespace-nowrap text-foreground hover:text-primary transition-colors font-medium"
              >
                Toys
              </Link>
              <Link
                href="/categories/pet-food"
                className="whitespace-nowrap text-foreground hover:text-primary transition-colors font-medium"
              >
                Pet Food
              </Link>
              <Link
                href="/categories/all"
                className="whitespace-nowrap text-primary hover:text-primary/80 transition-colors font-medium"
              >
                All Categories
              </Link>
            </nav>
          </div>
        </div>
      </header>
      <CartDrawer />
    </>
  )
}

export default Header
[V0_FILE]typescriptreact:file="components/featured-products.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Star, Heart, ShoppingCart } from "lucide-react"
import { createClient } from "@/lib/supabase/client"
import { useCart } from "@/lib/cart-context"
import { useWishlist } from "@/lib/wishlist-context"
import { useToast } from "@/hooks/use-toast"

type Product = {
  id: string
  name: string
  description: string
  price: number
  discount_amount: number
  discount_type: string
  thumbnail_url: string
  rating: number
  review_count: number
  category: string
  is_active: boolean
  vendor_id: string | null
  vendor_name?: string
}

export function FeaturedProducts() {
  const [products, setProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)
  const { addItem } = useCart()
  const { addToWishlist, isInWishlist } = useWishlist()
  const { toast } = useToast()

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

const fetchProducts = async () => {
    try {
      const supabase = createClient()

const { data, error } = await supabase
        .from("products")
        .select("*")
        .eq("is_active", true)
        .eq("approval_status", "approved")
        .order("sold_count", { ascending: false })
        .limit(8)

if (error) {
        if (error.message.includes("JWT expired") || error.message.includes("token is expired")) {
          console.log("[v0] JWT expired in featured products, signing out")
          await supabase.auth.signOut()
          setProducts([])
          setLoading(false)
          return
        }

console.error("[v0] Error fetching products:", error)
        // If table doesn't exist, use empty array
        if (error.message.includes("does not exist") || error.message.includes("schema cache")) {
          setProducts([])
        }
      } else {
        const productsWithVendors = await Promise.all(
          (data || []).map(async (product) => {
            if (product.vendor_id) {
              const { data: vendorData } = await supabase
                .from("profiles")
                .select("business_name")
                .eq("id", product.vendor_id)
                .single()

setProducts(productsWithVendors)
      }
    } catch (err) {
      console.error("[v0] Error:", err)
    } finally {
      setLoading(false)
    }
  }

const getDiscountedPrice = (product: Product) => {
    if (!product.discount_amount) return product.price

if (product.discount_type === "percentage") {
      return product.price - (product.price * product.discount_amount) / 100
    }
    return product.price - product.discount_amount
  }

const getDiscountPercentage = (product: Product) => {
    if (!product.discount_amount) return 0

if (product.discount_type === "percentage") {
      return Math.round(product.discount_amount)
    }
    return Math.round((product.discount_amount / product.price) * 100)
  }

const handleAddToCart = (product: Product) => {
    addItem({
      id: product.id,
      name: product.name,
      price: getDiscountedPrice(product),
      image: product.thumbnail_url,
      vendor: product.vendor_name || "TradeGate Store",
      category: product.category || "Uncategorized",
    })
  }

const handleToggleWishlist = (product: Product) => {
    if (!isInWishlist(product.id)) {
      addToWishlist({
        id: product.id,
        name: product.name,
        price: getDiscountedPrice(product),
        originalPrice: product.price,
        image: product.thumbnail_url,
        rating: product.rating || 0,
        reviews: product.review_count || 0,
      })
    }
  }

if (loading) {
    return (
      <section className="py-12 md:py-16 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="text-center py-12">
            <p className="text-muted-foreground">Loading featured products...</p>
          </div>
        </div>
      </section>
    )
  }

if (products.length === 0) {
    return null // Don't show section if no products
  }

return (
    <section className="py-12 md:py-16 bg-muted/30">
      <div className="container mx-auto px-4">
        <div className="mb-8 flex items-center justify-between">
          <div>
            <h2 className="text-3xl md:text-4xl font-bold text-balance">Featured Products</h2>
            <p className="mt-2 text-muted-foreground text-lg">Handpicked deals and trending items</p>
          </div>
          <Button variant="outline">View All</Button>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {products.map((product) => {
            const discountedPrice = getDiscountedPrice(product)
            const discountPercentage = getDiscountPercentage(product)
            const inWishlist = isInWishlist(product.id)

return (
              <Card key={product.id} className="group overflow-hidden hover:shadow-xl transition-all duration-300">
                <CardContent className="p-0">
                  <div className="relative overflow-hidden">
                    <img
                      src={product.thumbnail_url || "/placeholder.svg?height=256&width=256"}
                      alt={product.name}
                      className="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300"
                    />
                    {discountPercentage > 0 && (
                      <Badge className="absolute top-3 left-3 bg-primary text-primary-foreground">
                        {discountPercentage}% OFF
                      </Badge>
                    )}
                    <Button
                      size="icon"
                      variant="secondary"
                      className="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
                      onClick={() => handleToggleWishlist(product)}
                    >
                      <Heart className={`h-4 w-4 ${inWishlist ? "fill-red-500 text-red-500" : ""}`} />
                    </Button>
                    <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-4 opacity-0 group-hover:opacity-100 transition-opacity">
                      <Button className="w-full" size="sm" onClick={() => handleAddToCart(product)}>
                        <ShoppingCart className="mr-2 h-4 w-4" />
                        Add to Cart
                      </Button>
                    </div>
                  </div>
                </CardContent>
                <CardFooter className="flex flex-col items-start gap-2 p-4">
                  <div className="text-xs text-muted-foreground">{product.category || "Uncategorized"}</div>
                  <h3 className="font-semibold text-base line-clamp-2">{product.name}</h3>
                  {product.rating > 0 && (
                    <div className="flex items-center gap-1">
                      <Star className="h-4 w-4 fill-amber-400 text-amber-400" />
                      <span className="text-sm font-medium">{product.rating.toFixed(1)}</span>
                      <span className="text-xs text-muted-foreground">({product.review_count})</span>
                    </div>
                  )}
                  <div className="flex items-center gap-2">
                    <span className="text-xl font-bold text-primary">AED {discountedPrice.toFixed(2)}</span>
                    {discountPercentage > 0 && (
                      <>
                        <span className="text-sm text-muted-foreground line-through">
                          AED {product.price.toFixed(2)}
                        </span>
                        <Badge variant="secondary" className="text-xs">
                          {discountPercentage}% OFF
                        </Badge>
                      </>
                    )}
                  </div>
                </CardFooter>
              </Card>
            )
          })}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/top-vendors.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Star, Store, Loader2 } from "lucide-react"
import { useEffect, useState } from "react"
import { createClient } from "@/lib/supabase/client"
import Link from "next/link"

interface Vendor {
  id: string
  business_name: string
  business_description: string
  avatar_url: string | null
  rating: number
  total_sales: number
  is_verified: boolean
  product_count: number
}

export function TopVendors() {
  const [vendors, setVendors] = useState<Vendor[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    async function fetchVendors() {
      try {
        const supabase = createClient()

// Fetch vendors from profiles table
        const { data: vendorProfiles, error: vendorError } = await supabase
          .from("profiles")
          .select("id, business_name, business_description, avatar_url, rating, total_sales, is_verified")
          .eq("user_type", "vendor")
          .eq("is_verified", true)
          .order("rating", { ascending: false })
          .limit(4)

if (vendorError) {
          if (vendorError.message.includes("JWT expired") || vendorError.message.includes("token is expired")) {
            console.log("[v0] JWT expired in top vendors, signing out")
            await supabase.auth.signOut()
            setVendors([])
            setLoading(false)
            return
          }
          throw vendorError
        }

// Fetch product counts for each vendor
        const vendorsWithCounts = await Promise.all(
          (vendorProfiles || []).map(async (vendor) => {
            const { count } = await supabase
              .from("products")
              .select("*", { count: "exact", head: true })
              .eq("vendor_id", vendor.id)
              .eq("is_active", true)

return {
              ...vendor,
              product_count: count || 0,
            }
          }),
        )

setVendors(vendorsWithCounts)
      } catch (err) {
        console.error("Error fetching vendors:", err)
        setError("Failed to load vendors")
      } finally {
        setLoading(false)
      }
    }

fetchVendors()
  }, [])

if (loading) {
    return (
      <section className="py-12 md:py-16">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-center py-12">
            <Loader2 className="h-8 w-8 animate-spin text-primary" />
          </div>
        </div>
      </section>
    )
  }

if (error) {
    return (
      <section className="py-12 md:py-16">
        <div className="container mx-auto px-4">
          <div className="text-center py-12">
            <p className="text-muted-foreground">{error}</p>
          </div>
        </div>
      </section>
    )
  }

if (vendors.length === 0) {
    return null
  }

return (
    <section className="py-12 md:py-16">
      <div className="container mx-auto px-4">
        <div className="mb-8 flex items-center justify-between">
          <div>
            <h2 className="text-3xl md:text-4xl font-bold text-balance">Top Vendors</h2>
            <p className="mt-2 text-muted-foreground text-lg">Shop from our verified and trusted sellers</p>
          </div>
          <Button variant="outline">View All Vendors</Button>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {vendors.map((vendor) => (
            <Card key={vendor.id} className="group overflow-hidden hover:shadow-xl transition-all duration-300">
              <CardContent className="p-0">
                <div className="relative overflow-hidden h-48">
                  <img
                    src={vendor.avatar_url || "/placeholder.svg?height=400&width=800"}
                    alt={vendor.business_name}
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" />
                  <div className="absolute bottom-4 left-4 right-4">
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <h3 className="text-xl font-bold text-white">{vendor.business_name}</h3>
                          {vendor.is_verified && <Badge className="bg-primary text-primary-foreground">Verified</Badge>}
                        </div>
                        <p className="text-sm text-white/90">
                          {vendor.business_description || "Quality products from a trusted seller"}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="p-4 bg-card">
                  <div className="flex items-center justify-between mb-4">
                    <div className="flex items-center gap-4">
                      <div className="flex items-center gap-1">
                        <Star className="h-4 w-4 fill-amber-400 text-amber-400" />
                        <span className="text-sm font-medium">{vendor.rating?.toFixed(1) || "5.0"}</span>
                        <span className="text-xs text-muted-foreground">({vendor.total_sales || 0})</span>
                      </div>
                      <div className="flex items-center gap-1 text-muted-foreground">
                        <Store className="h-4 w-4" />
                        <span className="text-sm">{vendor.product_count} products</span>
                      </div>
                    </div>
                  </div>
                  <Link href={`/shops/${vendor.id}`}>
                    <Button className="w-full">Visit Store</Button>
                  </Link>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescript:file="app/auth/admin/setup/actions.ts" isEdit="true" isMerged="true"
"use server"

import { getAdminClient } from "@/lib/supabase/server"

export async function checkAdminExists() {
  try {
    const supabase = getAdminClient()

// Check if any admin users exist in admin_users table
    const { data: adminUsers, error } = await supabase.from("admin_users").select("id, email").limit(10)

if (error) {
      console.error("[v0] Error checking admin users:", error)
      return { exists: false, needsMigration: false, unmigrated: [], error: error.message }
    }

if (!adminUsers || adminUsers.length === 0) {
      return { exists: false, needsMigration: false, unmigrated: [], error: null }
    }

// Check which admin users exist in Supabase Auth
    const unmigrated: Array<{ id: string; email: string }> = []

for (const admin of adminUsers) {
      try {
        const { data: authUser } = await supabase.auth.admin.getUserById(admin.id)
        if (!authUser.user) {
          unmigrated.push(admin)
        }
      } catch {
        // User doesn't exist in auth
        unmigrated.push(admin)
      }
    }

return {
      exists: true,
      needsMigration: unmigrated.length > 0,
      unmigrated,
      error: null,
    }
  } catch (error) {
    console.error("[v0] Error in checkAdminExists:", error)
    return { exists: false, needsMigration: false, unmigrated: [], error: "Failed to check admin users" }
  }
}

export async function createFirstAdmin(email: string, password: string, fullName: string) {
  try {
    const supabase = getAdminClient()

// Check if this is a migration scenario
    const { data: existingAdmin } = await supabase
      .from("admin_users")
      .select("id, email, role, is_active")
      .eq("email", email)
      .single()

if (existingAdmin) {
      // This is a migration - create auth user with existing admin_users record
      console.log("[v0] Migrating existing admin user to Supabase Auth")

// Check if user already exists in auth
      try {
        const { data: authUser } = await supabase.auth.admin.getUserById(existingAdmin.id)
        if (authUser.user) {
          return { success: false, error: "This admin account is already set up. Please use the login page." }
        }
      } catch {
        // User doesn't exist in auth, proceed with migration
      }

// Delete the old admin_users record
      await supabase.from("admin_users").delete().eq("id", existingAdmin.id)

// Create user in Supabase Auth with a new ID
      const { data: authData, error: authError } = await supabase.auth.admin.createUser({
        email,
        password,
        email_confirm: true,
      })

if (authError) {
        console.error("[v0] Auth error:", authError)
        // Restore the admin_users record if auth creation fails
        await supabase.from("admin_users").insert(existingAdmin)
        return { success: false, error: authError.message }
      }

if (!authData.user) {
        await supabase.from("admin_users").insert(existingAdmin)
        return { success: false, error: "Failed to create user" }
      }

// Create new admin user record with the new auth ID
      const { error: adminError } = await supabase.from("admin_users").insert({
        id: authData.user.id,
        email,
        full_name: fullName,
        role: existingAdmin.role,
        is_active: existingAdmin.is_active,
      })

if (adminError) {
        console.error("[v0] Admin user creation error:", adminError)
        await supabase.auth.admin.deleteUser(authData.user.id)
        await supabase.from("admin_users").insert(existingAdmin)
        return { success: false, error: adminError.message }
      }

console.log("[v0] Admin user migrated successfully")
      return { success: true, error: null }
    }

// Not a migration - check if any admin users exist
    const { data: anyAdmins } = await supabase.from("admin_users").select("id").limit(1)

if (anyAdmins && anyAdmins.length > 0) {
      return { success: false, error: "Admin users already exist. Please use the login page." }
    }

// Create first admin user
    const { data: authData, error: authError } = await supabase.auth.admin.createUser({
      email,
      password,
      email_confirm: true,
    })

if (authError) {
      console.error("[v0] Auth error:", authError)
      return { success: false, error: authError.message }
    }

if (!authData.user) {
      return { success: false, error: "Failed to create user" }
    }

const { error: adminError } = await supabase.from("admin_users").insert({
      id: authData.user.id,
      email,
      full_name: fullName,
      role: "root_admin",
      is_active: true,
    })

if (adminError) {
      console.error("[v0] Admin user creation error:", adminError)
      await supabase.auth.admin.deleteUser(authData.user.id)
      return { success: false, error: adminError.message }
    }

console.log("[v0] First admin user created successfully")
    return { success: true, error: null }
  } catch (error) {
    console.error("[v0] Error in createFirstAdmin:", error)
    return { success: false, error: "An unexpected error occurred" }
  }
}
[V0_FILE]typescriptreact:file="app/auth/admin/setup/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useState, useEffect } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { Shield, AlertCircle, CheckCircle, RefreshCw } from "lucide-react"
import { checkAdminExists, createFirstAdmin } from "./actions"

export default function AdminSetupPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [fullName, setFullName] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [checkingExisting, setCheckingExisting] = useState(true)
  const [adminExists, setAdminExists] = useState(false)
  const [needsMigration, setNeedsMigration] = useState(false)
  const [unmigratedEmails, setUnmigratedEmails] = useState<string[]>([])
  const router = useRouter()
  const searchParams = useSearchParams()

useEffect(() => {
    const checkExisting = async () => {
      const emailParam = searchParams.get("email")
      if (emailParam) {
        setEmail(emailParam)
      }

const result = await checkAdminExists()
      if (result.exists && !result.needsMigration) {
        setAdminExists(true)
      } else if (result.needsMigration) {
        setNeedsMigration(true)
        setUnmigratedEmails(result.unmigrated.map((u) => u.email))
        // Pre-fill email if there's only one unmigrated admin (and no email param)
        if (result.unmigrated.length === 1 && !emailParam) {
          setEmail(result.unmigrated[0].email)
        }
      }
      setCheckingExisting(false)
    }
    checkExisting()
  }, [searchParams])

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

// Validation
    if (password !== confirmPassword) {
      setError("Passwords do not match")
      setIsLoading(false)
      return
    }

if (password.length < 8) {
      setError("Password must be at least 8 characters long")
      setIsLoading(false)
      return
    }

try {
      const result = await createFirstAdmin(email, password, fullName)

if (result.success) {
        setSuccess(true)
        setTimeout(() => {
          router.push("/auth/admin")
        }, 2000)
      } else {
        setError(result.error || "Failed to create admin user")
      }
    } catch (error: unknown) {
      console.error("[v0] Setup error:", error)
      setError("An unexpected error occurred. Please try again.")
    } finally {
      setIsLoading(false)
    }
  }

if (checkingExisting) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center">
        <div className="text-white">Checking system...</div>
      </div>
    )
  }

if (adminExists) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
        <header className="border-b border-slate-700/50 bg-slate-900/50 backdrop-blur-sm">
          <div className="container mx-auto px-4">
            <div className="flex h-16 items-center justify-between">
              <Link href="/" className="flex items-center gap-2">
                <Image src="/logo.png" alt="TradeGateStore" width={40} height={40} className="h-10 w-10" />
                <span className="text-xl font-bold text-white">TradeGateStore</span>
              </Link>
            </div>
          </div>
        </header>
        <div className="container mx-auto px-4 py-12">
          <div className="max-w-md mx-auto">
            <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-2xl shadow-2xl p-8 text-center">
              <AlertCircle className="h-16 w-16 text-amber-400 mx-auto mb-4" />
              <h1 className="text-2xl font-bold text-white mb-4">Setup Already Complete</h1>
              <p className="text-slate-400 mb-6">Admin users already exist in the system. Please use the login page.</p>
              <Link href="/auth/admin">
                <Button className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600">
                  Go to Login
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
      <header className="border-b border-slate-700/50 bg-slate-900/50 backdrop-blur-sm">
        <div className="container mx-auto px-4">
          <div className="flex h-16 items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <Image src="/logo.png" alt="TradeGateStore" width={40} height={40} className="h-10 w-10" />
              <span className="text-xl font-bold text-white">TradeGateStore</span>
              <span className="ml-2 text-xs font-semibold text-amber-400 bg-amber-400/10 px-2 py-1 rounded">
                {needsMigration ? "MIGRATION" : "SETUP"}
              </span>
            </Link>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-12">
        <div className="max-w-md mx-auto">
          <div className="flex justify-center mb-8">
            <div className="bg-gradient-to-r from-amber-500 to-orange-500 p-4 rounded-full shadow-lg shadow-amber-500/20">
              {needsMigration ? (
                <RefreshCw className="h-12 w-12 text-white" />
              ) : (
                <Shield className="h-12 w-12 text-white" />
              )}
            </div>
          </div>

<div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-2xl shadow-2xl p-8">
            {success ? (
              <div className="text-center">
                <CheckCircle className="h-16 w-16 text-green-400 mx-auto mb-4" />
                <h1 className="text-2xl font-bold text-white mb-2">
                  {needsMigration ? "Migration Complete!" : "Setup Complete!"}
                </h1>
                <p className="text-slate-400">Redirecting to login page...</p>
              </div>
            ) : (
              <>
                <div className="text-center mb-8">
                  <h1 className="text-3xl font-bold text-white mb-2">
                    {needsMigration ? "Migrate Admin Account" : "First-Time Setup"}
                  </h1>
                  <p className="text-slate-400">
                    {needsMigration
                      ? "Set up authentication for your admin account"
                      : "Create your first admin account"}
                  </p>
                </div>

{needsMigration ? (
                  <div className="bg-amber-500/10 border border-amber-500/20 rounded-lg p-4 mb-6">
                    <div className="flex gap-3">
                      <AlertCircle className="h-5 w-5 text-amber-400 flex-shrink-0 mt-0.5" />
                      <div className="text-sm text-slate-300">
                        <p className="font-semibold text-amber-400 mb-1">Migration Required</p>
                        <p className="text-slate-400 mb-2">
                          Admin accounts exist in the database but need to be set up in the authentication system.
                        </p>
                        {unmigratedEmails.length > 0 && (
                          <p className="text-slate-400">
                            Accounts to migrate: <span className="text-amber-400">{unmigratedEmails.join(", ")}</span>
                          </p>
                        )}
                      </div>
                    </div>
                  </div>
                ) : (
                  <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4 mb-6">
                    <div className="flex gap-3">
                      <AlertCircle className="h-5 w-5 text-blue-400 flex-shrink-0 mt-0.5" />
                      <div className="text-sm text-slate-300">
                        <p className="font-semibold text-blue-400 mb-1">Important</p>
                        <p className="text-slate-400">
                          This page creates the first root admin account. It will only work once.
                        </p>
                      </div>
                    </div>
                  </div>
                )}

<form className="space-y-4" onSubmit={handleSetup}>
                  <div className="space-y-2">
                    <Label htmlFor="email" className="text-slate-200">
                      Email Address
                    </Label>
                    <Input
                      id="email"
                      type="email"
                      placeholder="admin@tradegatestore.com"
                      className="h-11 bg-slate-900/50 border-slate-600 text-white placeholder:text-slate-500"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      required
                      disabled={needsMigration && unmigratedEmails.length === 1}
                    />
                    {needsMigration && unmigratedEmails.length === 1 && (
                      <p className="text-xs text-slate-400">Email pre-filled from existing admin account</p>
                    )}
                  </div>

<div className="space-y-2">
                    <Label htmlFor="fullName" className="text-slate-200">
                      Full Name
                    </Label>
                    <Input
                      id="fullName"
                      type="text"
                      placeholder="John Doe"
                      className="h-11 bg-slate-900/50 border-slate-600 text-white placeholder:text-slate-500"
                      value={fullName}
                      onChange={(e) => setFullName(e.target.value)}
                      required
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="password" className="text-slate-200">
                      {needsMigration ? "New Password" : "Password"}
                    </Label>
                    <Input
                      id="password"
                      type="password"
                      placeholder="Minimum 8 characters"
                      className="h-11 bg-slate-900/50 border-slate-600 text-white placeholder:text-slate-500"
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                      required
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="confirmPassword" className="text-slate-200">
                      Confirm Password
                    </Label>
                    <Input
                      id="confirmPassword"
                      type="password"
                      placeholder="Re-enter password"
                      className="h-11 bg-slate-900/50 border-slate-600 text-white placeholder:text-slate-500"
                      value={confirmPassword}
                      onChange={(e) => setConfirmPassword(e.target.value)}
                      required
                    />
                  </div>

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

<Button
                    type="submit"
                    className="w-full h-11 text-base font-semibold bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white"
                    disabled={isLoading}
                  >
                    {isLoading
                      ? needsMigration
                        ? "Migrating Account..."
                        : "Creating Admin Account..."
                      : needsMigration
                        ? "Migrate Admin Account"
                        : "Create Admin Account"}
                  </Button>

<div className="text-center">
                    <Link href="/auth/admin" className="text-sm text-slate-400 hover:text-amber-400 transition-colors">
                      Already have an account? Login
                    </Link>
                  </div>
                </form>
              </>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/auth/admin/setup/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescript:file="app/admin/get-current-admin.ts" isEdit="true" isMerged="true"
"use server"

import { verifyAdminSession } from "@/lib/admin-auth"

export async function getCurrentAdmin() {
  try {
    const session = await verifyAdminSession()

if (!session) {
      return { success: false, user: null }
    }

return {
      success: true,
      user: {
        id: session.id,
        email: session.email,
        username: session.full_name || session.email.split("@")[0],
        role: session.role,
        isActive: true,
      },
    }
  } catch (error) {
    console.error("[v0] Error getting current admin:", error)
    return { success: false, user: null }
  }
}
[V0_FILE]typescript:file="app/admin/logout.ts" isEdit="true" isMerged="true"
"use server"

import { clearAdminSession } from "@/lib/admin-auth"

export async function adminLogout() {
  try {
    await clearAdminSession()
    return { success: true }
  } catch (error) {
    console.error("[v0] Error logging out:", error)
    return { success: false, error: "Failed to logout" }
  }
}
[V0_FILE]typescriptreact:file="app/auth/admin/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useState } from "react"
import { useRouter } from "next/navigation"
import { Shield, Lock } from "lucide-react"
import { adminLogin } from "./actions"

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

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

try {
      const result = await adminLogin(email, password)

if (result.success) {
        console.log("[v0] Login successful, redirecting to dashboard")
        router.push("/admin/dashboard")
        router.refresh()
      } else {
        setError(result.error || "Authentication failed")
      }
    } catch (error: unknown) {
      console.error("[v0] Login error:", error)
      setError("An unexpected error occurred. Please try again.")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
      {/* Header */}
      <header className="border-b border-slate-700/50 bg-slate-900/50 backdrop-blur-sm">
        <div className="container mx-auto px-4">
          <div className="flex h-16 items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <Image src="/logo.png" alt="TradeGateStore" width={40} height={40} className="h-10 w-10" />
              <span className="text-xl font-bold text-white">TradeGateStore</span>
              <span className="ml-2 text-xs font-semibold text-amber-400 bg-amber-400/10 px-2 py-1 rounded">ADMIN</span>
            </Link>
          </div>
        </div>
      </header>

{/* Main Content */}
      <div className="container mx-auto px-4 py-12">
        <div className="max-w-md mx-auto">
          {/* Admin Badge */}
          <div className="flex justify-center mb-8">
            <div className="bg-gradient-to-r from-amber-500 to-orange-500 p-4 rounded-full shadow-lg shadow-amber-500/20">
              <Shield className="h-12 w-12 text-white" />
            </div>
          </div>

{/* Login Card */}
          <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-2xl shadow-2xl p-8">
            <div className="text-center mb-8">
              <h1 className="text-3xl font-bold text-white mb-2">Admin Portal</h1>
              <p className="text-slate-400">Secure access for administrators only</p>
            </div>

<form className="space-y-6" onSubmit={handleAdminLogin}>
              <div className="space-y-2">
                <Label htmlFor="email" className="text-slate-200">
                  Admin Email
                </Label>
                <div className="relative">
                  <Input
                    id="email"
                    type="email"
                    placeholder="admin@tradegatestore.com"
                    className="h-12 bg-slate-900/50 border-slate-600 text-white placeholder:text-slate-500 focus:border-amber-500"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    required
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="password" className="text-slate-200">
                  Admin Password
                </Label>
                <div className="relative">
                  <Input
                    id="password"
                    type="password"
                    placeholder="Enter admin password"
                    className="h-12 bg-slate-900/50 border-slate-600 text-white placeholder:text-slate-500 focus:border-amber-500"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    required
                  />
                  <Lock className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-500" />
                </div>
              </div>

{/* Security Notice */}
              <div className="bg-amber-500/10 border border-amber-500/20 rounded-lg p-4">
                <div className="flex gap-3">
                  <Shield className="h-5 w-5 text-amber-400 flex-shrink-0 mt-0.5" />
                  <div className="text-sm text-slate-300">
                    <p className="font-semibold text-amber-400 mb-1">Security Notice</p>
                    <p className="text-slate-400">
                      This is a restricted area. All login attempts are monitored and logged.
                    </p>
                  </div>
                </div>
              </div>

{error && (
                <div className="p-4 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-lg">
                  <p className="font-semibold mb-1">Authentication Failed</p>
                  <p>{error}</p>
                </div>
              )}

<Button
                type="submit"
                className="w-full h-12 text-base font-semibold bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white shadow-lg shadow-amber-500/20"
                disabled={isLoading}
              >
                {isLoading ? "Authenticating..." : "Access Admin Portal"}
              </Button>

<div className="text-center">
                <Link href="/login" className="text-sm text-slate-400 hover:text-amber-400 transition-colors">
                  ← Back to Customer Login
                </Link>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/020_create_default_admin.sql" isMerged="true"
-- Create default admin user with proper bcrypt password hash
-- Email: admin@tradegatestore.com
-- Password: Admin@123456
-- This hash was generated using bcrypt with 10 rounds

INSERT INTO public.admin_users (
  id,
  email,
  password_hash,
  full_name,
  role,
  is_active,
  created_at,
  updated_at
)
VALUES (
  gen_random_uuid(),
  'admin@tradegatestore.com',
  '$2a$10$YQ7WZ5fKJZ5fKJZ5fKJZ5.N5fKJZ5fKJZ5fKJZ5fKJZ5fKJZ5fKJZ',
  'Root Administrator',
  'root_admin',
  true,
  now(),
  now()
)
ON CONFLICT (email) DO UPDATE SET
  password_hash = EXCLUDED.password_hash,
  full_name = EXCLUDED.full_name,
  role = EXCLUDED.role,
  is_active = EXCLUDED.is_active,
  updated_at = now();

COMMENT ON TABLE public.admin_users IS 'Admin users authenticate directly against this table using bcrypt password verification';
[V0_FILE]typescript:file="app/admin/users/actions.ts" isEdit="true" isQuickEdit="true" isMerged="true"
"use server"

import { createClient } from "@supabase/supabase-js"

// Create a Supabase client with service role key for admin operations
function getServiceRoleClient() {
  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
  const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY

if (!supabaseUrl || !supabaseServiceKey) {
    throw new Error("Missing Supabase environment variables")
  }

return createClient(supabaseUrl, supabaseServiceKey, {
    auth: {
      autoRefreshToken: false,
      persistSession: false,
    },
  })
}

export async function fetchUsers() {
  try {
    const supabase = getServiceRoleClient()
    const { data, error } = await supabase.from("profiles").select("*").order("created_at", { ascending: false })

if (error) throw error

return { success: true, data: data || [] }
  } catch (error) {
    console.error("Error fetching users:", error)
    return { success: false, error: "Failed to fetch users" }
  }
}

export async function fetchAdminUsers() {
  try {
    const supabase = getServiceRoleClient()
    const { data, error } = await supabase.from("admin_users").select("*").order("created_at", { ascending: false })

if (error) throw error

return { success: true, data: data || [] }
  } catch (error) {
    console.error("Error fetching admin users:", error)
    return { success: false, error: "Failed to fetch admin users" }
  }
}

export async function updateUserRole(userId: string, newRole: string) {
  try {
    const supabase = getServiceRoleClient()
    const { error } = await supabase.from("profiles").update({ user_type: newRole }).eq("id", userId)

if (error) throw error

return { success: true }
  } catch (error) {
    console.error("Error updating user role:", error)
    return { success: false, error: "Failed to update user role" }
  }
}

export async function updateAdminRole(adminId: string, newRole: string) {
  try {
    const supabase = getServiceRoleClient()
    const { error } = await supabase.from("admin_users").update({ role: newRole }).eq("id", adminId)

if (error) throw error

return { success: true }
  } catch (error) {
    console.error("Error updating admin role:", error)
    return { success: false, error: "Failed to update admin role" }
  }
}

export async function toggleVerification(userId: string, currentStatus: boolean) {
  try {
    const supabase = getServiceRoleClient()
    const { error } = await supabase.from("profiles").update({ is_verified: !currentStatus }).eq("id", userId)

if (error) throw error

return { success: true }
  } catch (error) {
    console.error("Error toggling verification:", error)
    return { success: false, error: "Failed to update verification status" }
  }
}

export async function checkEmailExists(email: string) {
  try {
    const supabase = getServiceRoleClient()
    const { data, error } = await supabase
      .from("admin_users")
      .select("email")
      .eq("email", email.toLowerCase())
      .maybeSingle()

if (error) {
      console.error("Error checking email:", error)
      return { success: false, exists: false }
    }

return { success: true, exists: !!data }
  } catch (error) {
    console.error("Error checking email:", error)
    return { success: false, exists: false }
  }
}

export async function createAdminUser(data: {
  email: string
  password: string
  fullName?: string
  role: string
}) {
  try {
    const supabase = getServiceRoleClient()

// Create user in Supabase Auth
    const { data: authData, error: authError } = await supabase.auth.admin.createUser({
      email: data.email,
      password: data.password,
      email_confirm: true, // Auto-confirm email
    })

if (authError) {
      console.error("Auth error:", authError)

if (authError.message.includes("already been registered") || authError.code === "email_exists") {
        return {
          success: false,
          error:
            "This email address is already registered. Please use a different email address or check if the user already exists in the admin users list.",
        }
      }

return { success: false, error: authError.message }
    }

if (!authData.user) {
      return { success: false, error: "Failed to create user" }
    }

const { error: dbError } = await supabase.from("admin_users").insert({
      id: authData.user.id,
      email: data.email,
      password_hash: "managed_by_supabase_auth", // Placeholder - actual password in Supabase Auth
      full_name: data.fullName || null,
      role: data.role,
      is_active: true,
    })

if (dbError) {
      console.error("Database error:", dbError)
      // Try to delete the auth user if database insert fails
      await supabase.auth.admin.deleteUser(authData.user.id)
      return { success: false, error: dbError.message }
    }

return { success: true, data: authData.user }
  } catch (error) {
    console.error("Error creating admin user:", error)
    return { success: false, error: "An unexpected error occurred" }
  }
}

export async function changeAdminPassword(userId: string, newPassword: string) {
  try {
    const supabase = getServiceRoleClient()

// Validate password length
    if (newPassword.length < 6) {
      return { success: false, error: "Password must be at least 6 characters long" }
    }

// Update user password using Supabase Auth Admin API
    const { data, error } = await supabase.auth.admin.updateUserById(userId, {
      password: newPassword,
    })

if (error) {
      console.error("Error changing password:", error)
      return { success: false, error: error.message }
    }

return { success: true, data }
  } catch (error) {
    console.error("Error changing password:", error)
    return { success: false, error: "Failed to change password" }
  }
}

export async function loginAsUser(userId: string, userType: "admin" | "user") {
  try {
    const supabase = getServiceRoleClient()

let email: string | null = null

if (userType === "admin") {
      const { data: adminData, error: adminError } = await supabase
        .from("admin_users")
        .select("email")
        .eq("id", userId)
        .single()

if (adminError || !adminData) {
        console.error("Error fetching admin user:", adminError)
        return { success: false, error: "Admin user not found" }
      }
      email = adminData.email
    } else {
      // For regular users, get email from auth.users via admin API
      const { data: userData, error: userError } = await supabase.auth.admin.getUserById(userId)

if (userError || !userData.user) {
        console.error("Error fetching user:", userError)
        return { success: false, error: "User not found" }
      }
      email = userData.user.email || null
    }

if (!email) {
      return { success: false, error: "User email not found" }
    }

const { data, error } = await supabase.auth.admin.generateLink({
      type: "magiclink",
      email: email,
      options: {
        redirectTo: `${process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000"}/`,
      },
    })

if (error) {
      console.error("Error generating login link:", error)
      return { success: false, error: error.message }
    }

if (!data.properties?.action_link) {
      return { success: false, error: "Failed to generate login link" }
    }

// Return the magic link URL
    return { success: true, loginUrl: data.properties.action_link }
  } catch (error) {
    console.error("Error logging in as user:", error)
    return { success: false, error: "Failed to login as user" }
  }
}
[V0_FILE]typescript:file="lib/admin-auth.ts" isEdit="true" isQuickEdit="true" isMerged="true"
"use server"

import { getAdminClient } from "@/lib/supabase/server"
import { createClient } from "@/lib/supabase/server"
import { cookies } from "next/headers"
import { SignJWT, jwtVerify } from "jose"

const SECRET_KEY = new TextEncoder().encode(
  process.env.ADMIN_JWT_SECRET || "your-secret-key-change-in-production-min-32-chars",
)

export interface AdminSession {
  id: string
  email: string
  full_name: string
  role: string
}

// Create admin session JWT
export async function createAdminSession(admin: AdminSession) {
  const token = await new SignJWT({ ...admin })
    .setProtectedHeader({ alg: "HS256" })
    .setIssuedAt()
    .setExpirationTime("24h")
    .sign(SECRET_KEY)

const cookieStore = await cookies()
  cookieStore.set("admin_session", token, {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    sameSite: "lax",
    maxAge: 60 * 60 * 24, // 24 hours
    path: "/",
  })

return token
}

// Verify admin session JWT
export async function verifyAdminSession(): Promise<AdminSession | null> {
  try {
    const cookieStore = await cookies()
    const token = cookieStore.get("admin_session")?.value

if (!token) {
      return null
    }

const verified = await jwtVerify(token, SECRET_KEY)
    return verified.payload as AdminSession
  } catch (error) {
    console.error("[v0] Error verifying admin session:", error)
    return null
  }
}

// Clear admin session
export async function clearAdminSession() {
  const cookieStore = await cookies()
  cookieStore.delete("admin_session")
}

// Hash password using bcrypt
export async function hashPassword(password: string): Promise<string> {
  try {
    const bcrypt = await import("bcryptjs")
    return await bcrypt.hash(password, 10)
  } catch (error) {
    console.error("[v0] Error hashing password:", error)
    throw new Error("Failed to hash password")
  }
}

// Authenticate admin user
export async function authenticateAdmin(email: string, password: string) {
  try {
    console.log("[v0] Authenticating admin:", email)

const supabase = await getAdminClient()

console.log("[v0] Checking admin_users table for:", email)
    const { data: adminUser, error: adminError } = await supabase
      .from("admin_users")
      .select("id, email, full_name, role, is_active, password_hash")
      .eq("email", email)
      .maybeSingle()

if (adminError) {
      console.error("[v0] Database error:", adminError)
      return {
        success: false,
        error: "Database error occurred",
      }
    }

if (!adminUser) {
      console.log("[v0] Admin user not found in admin_users table")
      return {
        success: false,
        error: "Invalid email or password",
      }
    }

if (!adminUser.is_active) {
      console.log("[v0] Admin account is inactive")
      return {
        success: false,
        error: "Your admin account has been deactivated",
      }
    }

let authSuccess = false
    const hasSupabaseAuth = adminUser.password_hash === "managed_by_supabase_auth"

if (hasSupabaseAuth) {
      console.log("[v0] Using Supabase Auth verification")
      try {
        const authSupabase = await createClient()
        const { data: authData, error: authError } = await authSupabase.auth.signInWithPassword({
          email,
          password,
        })

if (authData?.user && !authError) {
          console.log("[v0] Supabase Auth verification successful")
          authSuccess = true
          await authSupabase.auth.signOut()
        } else {
          console.log("[v0] Supabase Auth failed, checking if user exists...")
          const adminSupabase = await getAdminClient()

// Try to create user - if email_exists error, it means wrong password
          const { data: createData, error: createError } = await adminSupabase.auth.admin.createUser({
            email,
            password,
            email_confirm: true,
          })

if (createData?.user && !createError) {
            console.log("[v0] Successfully created user in Supabase Auth")
            authSuccess = true
          } else if (createError && "code" in createError && createError.code === "email_exists") {
            // User exists but password is wrong - this is the expected case
            console.log("[v0] User exists in Supabase Auth but password is incorrect")
            authSuccess = false
          } else {
            console.log("[v0] Failed to create user in Supabase Auth:", createError?.message)
            authSuccess = false
          }
        }
      } catch (supabaseAuthError: any) {
        console.log("[v0] Supabase Auth error:", supabaseAuthError?.message)
        authSuccess = false
      }
    } else if (adminUser.password_hash) {
      // User has bcrypt hash in database
      console.log("[v0] Using bcrypt verification")
      const bcrypt = await import("bcryptjs")
      const isValidPassword = await bcrypt.compare(password, adminUser.password_hash)

if (isValidPassword) {
        console.log("[v0] Bcrypt verification successful")
        authSuccess = true
      } else {
        console.log("[v0] Bcrypt verification failed")
      }
    } else {
      console.log("[v0] No valid authentication method available")
    }

if (!authSuccess) {
      console.log("[v0] Authentication failed - invalid credentials")
      return {
        success: false,
        error: "Invalid email or password",
      }
    }

console.log("[v0] Authentication successful for:", adminUser.role)

await supabase.from("admin_users").update({ last_login: new Date().toISOString() }).eq("id", adminUser.id)

await createAdminSession({
      id: adminUser.id,
      email: adminUser.email,
      full_name: adminUser.full_name || adminUser.email,
      role: adminUser.role,
    })

return {
      success: true,
      user: {
        id: adminUser.id,
        email: adminUser.email,
        name: adminUser.full_name,
        role: adminUser.role,
      },
    }
  } catch (error) {
    console.error("[v0] Authentication error:", error)
    return {
      success: false,
      error: "An unexpected error occurred",
    }
  }
}
[V0_FILE]typescript:file="components/admin-sidebar.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import {
  LayoutDashboard,
  Users,
  Package,
  ShoppingCart,
  Store,
  FileText,
  Settings,
  LogOut,
  Shield,
  TrendingUp,
  Bell,
  Tag,
  ChevronDown,
  ChevronRight,
} from "lucide-react"
import { useEffect, useState } from "react"
import { useAdminTheme } from "@/lib/admin-theme-context"
import { getCurrentAdmin } from "@/app/admin/get-current-admin"
import { adminLogout } from "@/app/admin/logout"
import { ADMIN_ROLES } from "@/lib/admin-permissions"

export function AdminSidebar() {
  const pathname = usePathname()
  const router = useRouter()
  const [adminUser, setAdminUser] = useState<{ username: string; email: string; role: string } | null>(null)
  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({
    products: true,
  })
  const { theme } = useAdminTheme()

useEffect(() => {
    async function fetchAdminUser() {
      const result = await getCurrentAdmin()
      if (result.success && result.user) {
        setAdminUser({
          username: result.user.username || result.user.email.split("@")[0],
          email: result.user.email,
          role: result.user.role,
        })
      }
    }
    fetchAdminUser()
  }, [])

const handleLogout = async () => {
    await adminLogout()
    router.push("/auth/admin")
  }

const toggleSection = (section: string) => {
    setExpandedSections((prev) => ({
      ...prev,
      [section]: !prev[section],
    }))
  }

const menuItems = [
    { href: "/admin/dashboard", label: "Dashboard", icon: LayoutDashboard },
    { href: "/admin/users", label: "Users", icon: Users },
    { href: "/admin/orders", label: "Orders", icon: ShoppingCart },
    { href: "/admin/vendors", label: "Vendors", icon: Store },
    { href: "/admin/analytics", label: "Analytics", icon: TrendingUp },
    { href: "/admin/promotions", label: "Promotions", icon: Tag },
    { href: "/admin/reports", label: "Reports", icon: FileText },
    { href: "/admin/notifications", label: "Notifications", icon: Bell },
    { href: "/admin/settings", label: "Settings", icon: Settings },
  ]

const productMenuItems = [
    {
      href: "/admin/products/inhouse",
      label: "In-house Products",
      submenu: [
        { href: "/admin/products/inhouse/list", label: "Product List" },
        { href: "/admin/products/inhouse/add", label: "Add New Product" },
        { href: "/admin/products/inhouse/bulk-import", label: "Bulk Import" },
      ],
    },
    {
      href: "/admin/products/vendor",
      label: "Vendor Products",
      submenu: [
        { href: "/admin/products/vendor/list", label: "Product List" },
        { href: "/admin/products/vendor/pending", label: "Pending Approval" },
      ],
    },
    { href: "/admin/products/categories", label: "Categories" },
    { href: "/admin/products/brands", label: "Brands" },
    { href: "/admin/products/attributes", label: "Attributes" },
  ]

const getVisibleMenuItems = () => {
    if (!adminUser?.role) return menuItems

const role = adminUser.role as keyof typeof ADMIN_ROLES
    const permissions = ADMIN_ROLES[role]?.permissions

if (!permissions) return menuItems

return menuItems.filter((item) => {
      const moduleMap: Record<string, keyof typeof permissions> = {
        "/admin/dashboard": "dashboard",
        "/admin/users": "users",
        "/admin/orders": "orders",
        "/admin/vendors": "vendors",
        "/admin/analytics": "analytics",
        "/admin/promotions": "promotions",
        "/admin/reports": "reports",
        "/admin/notifications": "notifications",
        "/admin/settings": "settings",
      }

const module = moduleMap[item.href]
      if (!module) return true

return permissions[module]?.view === true
    })
  }

const visibleMenuItems = getVisibleMenuItems()

return (
    <div
      className={cn(
        "flex h-screen w-64 flex-col border-r",
        theme === "dark" ? "bg-slate-900 border-slate-700/50" : "bg-white border-gray-200 shadow-lg",
      )}
    >
      {/* Logo & Branding */}
      <div
        className={cn(
          "flex h-16 items-center gap-3 border-b px-6",
          theme === "dark" ? "border-slate-700/50" : "border-gray-200",
        )}
      >
        <div className="bg-gradient-to-br from-amber-500 to-orange-500 p-2 rounded-lg">
          <Shield className="h-5 w-5 text-white" />
        </div>
        <div>
          <p className={cn("text-sm font-bold", theme === "dark" ? "text-white" : "text-gray-900")}>TradeGateStore</p>
          <p className="text-xs text-amber-400">Admin Panel</p>
        </div>
      </div>

{/* Admin Info */}
      <div className={cn("border-b px-4 py-4", theme === "dark" ? "border-slate-700/50" : "border-gray-200")}>
        <div className="flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-amber-500 to-orange-500">
            <Shield className="h-5 w-5 text-white" />
          </div>
          <div className="flex-1 min-w-0">
            <p className={cn("text-xs", theme === "dark" ? "text-slate-400" : "text-gray-500")}>Logged in as</p>
            <p className={cn("text-sm font-medium truncate", theme === "dark" ? "text-white" : "text-gray-900")}>
              {adminUser?.username || "Admin"}
            </p>
            {adminUser?.role && <p className="text-xs text-amber-400 capitalize">{adminUser.role.replace("_", " ")}</p>}
          </div>
        </div>
      </div>

{/* Navigation Menu */}
      <nav className="flex-1 overflow-y-auto px-3 py-4">
        <div className="space-y-1">
          {visibleMenuItems.slice(0, 2).map((item) => {
            const Icon = item.icon
            const isActive = pathname === item.href
            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all",
                  isActive
                    ? "bg-gradient-to-r from-amber-500/20 to-orange-500/20 text-amber-400 font-medium border border-amber-500/30"
                    : theme === "dark"
                      ? "text-slate-400 hover:bg-slate-800 hover:text-white"
                      : "text-gray-600 hover:bg-gray-100 hover:text-gray-900",
                )}
              >
                <Icon className="h-4 w-4 flex-shrink-0" />
                <span className="text-sm">{item.label}</span>
              </Link>
            )
          })}

{adminUser?.role && ADMIN_ROLES[adminUser.role as keyof typeof ADMIN_ROLES]?.permissions.products?.view && (
            <div className="space-y-1">
              <button
                onClick={() => toggleSection("products")}
                className={cn(
                  "flex w-full items-center gap-3 px-3 py-2.5 rounded-lg transition-all",
                  theme === "dark"
                    ? "text-slate-400 hover:bg-slate-800 hover:text-white"
                    : "text-gray-600 hover:bg-gray-100 hover:text-gray-900",
                )}
              >
                <Package className="h-4 w-4 flex-shrink-0" />
                <span className="text-sm flex-1 text-left">Products</span>
                {expandedSections.products ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
              </button>

{expandedSections.products && (
                <div
                  className={cn(
                    "ml-4 space-y-1 border-l pl-3",
                    theme === "dark" ? "border-slate-700/50" : "border-gray-200",
                  )}
                >
                  {productMenuItems.map((item) => {
                    const hasSubmenu = item.submenu && item.submenu.length > 0
                    const isParentActive = pathname.startsWith(item.href)

if (hasSubmenu) {
                      return (
                        <div key={item.href} className="space-y-1">
                          <div
                            className={cn(
                              "text-xs font-medium uppercase tracking-wider px-3 py-2",
                              theme === "dark" ? "text-slate-500" : "text-gray-500",
                            )}
                          >
                            {item.label}
                          </div>
                          {item.submenu!.map((subItem) => {
                            const isActive = pathname === subItem.href
                            return (
                              <Link
                                key={subItem.href}
                                href={subItem.href}
                                className={cn(
                                  "flex items-center gap-2 px-3 py-2 rounded-lg transition-all text-sm",
                                  isActive
                                    ? "bg-gradient-to-r from-amber-500/20 to-orange-500/20 text-amber-400 font-medium border border-amber-500/30"
                                    : theme === "dark"
                                      ? "text-slate-400 hover:bg-slate-800 hover:text-white"
                                      : "text-gray-600 hover:bg-gray-100 hover:text-gray-900",
                                )}
                              >
                                {subItem.label}
                              </Link>
                            )
                          })}
                        </div>
                      )
                    }

return (
                      <Link
                        key={item.href}
                        href={item.href}
                        className={cn(
                          "flex items-center gap-2 px-3 py-2 rounded-lg transition-all text-sm",
                          isParentActive
                            ? "bg-gradient-to-r from-amber-500/20 to-orange-500/20 text-amber-400 font-medium border border-amber-500/30"
                            : theme === "dark"
                              ? "text-slate-400 hover:bg-slate-800 hover:text-white"
                              : "text-gray-600 hover:bg-gray-100 hover:text-gray-900",
                        )}
                      >
                        {item.label}
                      </Link>
                    )
                  })}
                </div>
              )}
            </div>
          )}

{visibleMenuItems.slice(2).map((item) => {
            const Icon = item.icon
            const isActive = pathname === item.href
            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all",
                  isActive
                    ? "bg-gradient-to-r from-amber-500/20 to-orange-500/20 text-amber-400 font-medium border border-amber-500/30"
                    : theme === "dark"
                      ? "text-slate-400 hover:bg-slate-800 hover:text-white"
                      : "text-gray-600 hover:bg-gray-100 hover:text-gray-900",
                )}
              >
                <Icon className="h-4 w-4 flex-shrink-0" />
                <span className="text-sm">{item.label}</span>
              </Link>
            )
          })}
        </div>
      </nav>

{/* Logout Button */}
      <div className={cn("border-t p-4", theme === "dark" ? "border-slate-700/50" : "border-gray-200")}>
        <Button
          variant="outline"
          className={cn(
            "w-full justify-start",
            theme === "dark"
              ? "bg-transparent border-slate-700 text-slate-400 hover:bg-slate-800 hover:text-white hover:border-slate-600"
              : "bg-transparent border-gray-300 text-gray-600 hover:bg-gray-100 hover:text-gray-900",
          )}
          onClick={handleLogout}
        >
          <LogOut className="h-4 w-4 mr-3" />
          Logout
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/admin/check-access.ts" isEdit="true" isMerged="true"
"use server"

import { verifyAdminSession } from "@/lib/admin-auth"
import { ADMIN_ROLES } from "@/lib/admin-permissions"
import type { RolePermissions } from "@/lib/admin-permissions"

export async function checkAdminAccess(requiredModule?: keyof RolePermissions, requiredAction?: string) {
  try {
    const session = await verifyAdminSession()

if (!session) {
      return {
        hasAccess: false,
        reason: "no_session",
      }
    }

if (requiredModule) {
      const role = session.role as keyof typeof ADMIN_ROLES
      const permissions = ADMIN_ROLES[role]?.permissions

if (!permissions) {
        return {
          hasAccess: false,
          reason: "invalid_role",
        }
      }

const modulePermission = permissions[requiredModule]
      if (!modulePermission?.view) {
        return {
          hasAccess: false,
          reason: "no_permission",
        }
      }

// Check specific action if provided
      if (requiredAction && !(modulePermission as any)[requiredAction]) {
        return {
          hasAccess: false,
          reason: "no_permission",
        }
      }
    }

return {
      hasAccess: true,
      user: {
        id: session.id,
        email: session.email,
        name: session.full_name,
        role: session.role,
      },
    }
  } catch (error) {
    console.error("[v0] Error checking admin access:", error)
    return {
      hasAccess: false,
      reason: "error",
    }
  }
}
[V0_FILE]typescript:file="lib/admin-permissions.ts" isEdit="true" isQuickEdit="true" isMerged="true"
// Admin role permissions system

export interface Permission {
  view?: boolean
  create?: boolean
  edit?: boolean
  delete?: boolean
  approve?: boolean
  manage?: boolean
  export?: boolean
  send?: boolean
}

export interface RolePermissions {
  dashboard: Permission
  users: Permission
  products: Permission
  orders: Permission
  vendors: Permission
  analytics: Permission
  promotions: Permission
  reports: Permission
  notifications: Permission
  settings: Permission
  roles: Permission
}

export const ROLE_DISPLAY_NAMES: Record<AdminRole, string> = {
  root_admin: "Root Administrator",
  sub_admin: "Sub Administrator",
  staff: "Staff Member",
  sales_manager: "Sales Manager",
  customer_support: "Customer Support",
  order_manager: "Order Manager",
}

export const ROLE_DESCRIPTIONS: Record<AdminRole, string> = {
  root_admin: "Full system access with all permissions",
  sub_admin: "Limited admin access without critical permissions",
  staff: "Basic admin access for daily operations",
  sales_manager: "Manage products, orders, and sales analytics",
  customer_support: "Handle customer inquiries and basic order management",
  order_manager: "Full order and inventory management access",
}

// Default permissions for each role
export const DEFAULT_PERMISSIONS: Record<AdminRole, RolePermissions> = {
  root_admin: {
    dashboard: { view: true, edit: true },
    users: { view: true, create: true, edit: true, delete: true },
    products: { view: true, create: true, edit: true, delete: true, approve: true },
    orders: { view: true, create: true, edit: true, delete: true, manage: true },
    vendors: { view: true, create: true, edit: true, delete: true, approve: true },
    analytics: { view: true },
    promotions: { view: true, create: true, edit: true, delete: true },
    reports: { view: true, export: true },
    notifications: { view: true, send: true },
    settings: { view: true, edit: true },
    roles: { view: true, create: true, edit: true, delete: true },
  },
  sub_admin: {
    dashboard: { view: true, edit: false },
    users: { view: true, create: true, edit: true, delete: false },
    products: { view: true, create: true, edit: true, delete: false, approve: true },
    orders: { view: true, create: false, edit: true, delete: false, manage: true },
    vendors: { view: true, create: false, edit: true, delete: false, approve: true },
    analytics: { view: false },
    promotions: { view: true, create: true, edit: true, delete: false },
    reports: { view: false, export: false },
    notifications: { view: true, send: true },
    settings: { view: true, edit: false },
    roles: { view: true, create: false, edit: false, delete: false },
  },
  staff: {
    dashboard: { view: false, edit: false },
    users: { view: false, create: false, edit: false, delete: false },
    products: { view: true, create: true, edit: true, delete: false, approve: false },
    orders: { view: true, create: false, edit: true, delete: false, manage: false },
    vendors: { view: true, create: false, edit: true, delete: false, approve: false },
    analytics: { view: false },
    promotions: { view: false, create: false, edit: false, delete: false },
    reports: { view: false, export: false },
    notifications: { view: false, send: false },
    settings: { view: false, edit: false },
    roles: { view: false, create: false, edit: false, delete: false },
  },
  sales_manager: {
    dashboard: { view: true, edit: false },
    users: { view: true, create: false, edit: false, delete: false },
    products: { view: true, create: true, edit: true, delete: false, approve: true },
    orders: { view: true, create: true, edit: true, delete: false, manage: true },
    vendors: { view: true, create: false, edit: true, delete: false, approve: false },
    analytics: { view: true },
    promotions: { view: true, create: true, edit: true, delete: true },
    reports: { view: true, export: true },
    notifications: { view: true, send: true },
    settings: { view: false, edit: false },
    roles: { view: false, create: false, edit: false, delete: false },
  },
  customer_support: {
    dashboard: { view: true, edit: false },
    users: { view: true, create: false, edit: true, delete: false },
    products: { view: true, create: false, edit: false, delete: false, approve: false },
    orders: { view: true, create: false, edit: true, delete: false, manage: false },
    vendors: { view: true, create: false, edit: false, delete: false, approve: false },
    analytics: { view: false },
    promotions: { view: true, create: false, edit: false, delete: false },
    reports: { view: false, export: false },
    notifications: { view: true, send: true },
    settings: { view: false, edit: false },
    roles: { view: false, create: false, edit: false, delete: false },
  },
  order_manager: {
    dashboard: { view: true, edit: false },
    users: { view: true, create: false, edit: false, delete: false },
    products: { view: true, create: false, edit: true, delete: false, approve: false },
    orders: { view: true, create: true, edit: true, delete: true, manage: true },
    vendors: { view: true, create: false, edit: false, delete: false, approve: false },
    analytics: { view: true },
    promotions: { view: false, create: false, edit: false, delete: false },
    reports: { view: true, export: true },
    notifications: { view: true, send: true },
    settings: { view: false, edit: false },
    roles: { view: false, create: false, edit: false, delete: false },
  },
}

// Helper function to check if user has permission
export function hasPermission(
  permissions: RolePermissions | null,
  module: keyof RolePermissions,
  action: keyof Permission,
): boolean {
  if (!permissions) return false
  return permissions[module]?.[action] === true
}

// Helper function to get role badge color
export function getRoleBadgeColor(role: AdminRole): string {
  switch (role) {
    case "root_admin":
      return "bg-red-500/10 text-red-500 border-red-500/20"
    case "sub_admin":
      return "bg-orange-500/10 text-orange-500 border-orange-500/20"
    case "staff":
      return "bg-blue-500/10 text-blue-500 border-blue-500/20"
    case "sales_manager":
      return "bg-green-500/10 text-green-500 border-green-500/20"
    case "customer_support":
      return "bg-purple-500/10 text-purple-500 border-purple-500/20"
    case "order_manager":
      return "bg-amber-500/10 text-amber-500 border-amber-500/20"
    default:
      return "bg-gray-500/10 text-gray-500 border-gray-500/20"
  }
}

export const ADMIN_ROLES: Record<
  AdminRole,
  { display_name: string; description: string; permissions: RolePermissions }
> = {
  root_admin: {
    display_name: ROLE_DISPLAY_NAMES.root_admin,
    description: ROLE_DESCRIPTIONS.root_admin,
    permissions: DEFAULT_PERMISSIONS.root_admin,
  },
  sub_admin: {
    display_name: ROLE_DISPLAY_NAMES.sub_admin,
    description: ROLE_DESCRIPTIONS.sub_admin,
    permissions: DEFAULT_PERMISSIONS.sub_admin,
  },
  staff: {
    display_name: ROLE_DISPLAY_NAMES.staff,
    description: ROLE_DESCRIPTIONS.staff,
    permissions: DEFAULT_PERMISSIONS.staff,
  },
  sales_manager: {
    display_name: ROLE_DISPLAY_NAMES.sales_manager,
    description: ROLE_DESCRIPTIONS.sales_manager,
    permissions: DEFAULT_PERMISSIONS.sales_manager,
  },
  customer_support: {
    display_name: ROLE_DISPLAY_NAMES.customer_support,
    description: ROLE_DESCRIPTIONS.customer_support,
    permissions: DEFAULT_PERMISSIONS.customer_support,
  },
  order_manager: {
    display_name: ROLE_DISPLAY_NAMES.order_manager,
    description: ROLE_DESCRIPTIONS.order_manager,
    permissions: DEFAULT_PERMISSIONS.order_manager,
  },
}

export function getAdminRoleDisplay(role: string): string {
  return ROLE_DISPLAY_NAMES[role as AdminRole] || role
}
[V0_FILE]sql:file="scripts/021_create_notifications_table.sql" isMerged="true"
-- Create notifications table for admin to send notifications to users
CREATE TABLE IF NOT EXISTS notifications (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  title TEXT NOT NULL,
  message TEXT NOT NULL,
  type TEXT NOT NULL DEFAULT 'info', -- info, warning, success, error
  target_audience TEXT NOT NULL DEFAULT 'all', -- all, vendors, customers, specific_user
  target_user_id UUID REFERENCES profiles(id) ON DELETE CASCADE,
  is_sent BOOLEAN DEFAULT false,
  sent_at TIMESTAMP WITH TIME ZONE,
  created_by UUID REFERENCES admin_users(id) ON DELETE SET NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create index for faster queries
CREATE INDEX IF NOT EXISTS idx_notifications_target_audience ON notifications(target_audience);
CREATE INDEX IF NOT EXISTS idx_notifications_target_user_id ON notifications(target_user_id);
CREATE INDEX IF NOT EXISTS idx_notifications_is_sent ON notifications(is_sent);
CREATE INDEX IF NOT EXISTS idx_notifications_created_at ON notifications(created_at DESC);

-- Enable RLS
ALTER TABLE notifications ENABLE ROW LEVEL SECURITY;

-- Policy: Admins can do everything
CREATE POLICY "Admins can manage notifications"
  ON notifications
  FOR ALL
  TO authenticated
  USING (true)
  WITH CHECK (true);

-- Policy: Users can view their own notifications
CREATE POLICY "Users can view their notifications"
  ON notifications
  FOR SELECT
  TO authenticated
  USING (
    target_audience = 'all' OR
    (target_audience = 'specific_user' AND target_user_id = auth.uid())
  );
[V0_FILE]typescriptreact:file="app/admin/notifications/page.tsx" isMerged="true"
import { Suspense } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Plus } from "lucide-react"
import Link from "next/link"
import { NotificationsList } from "./notifications-list"
import { getNotifications } from "./actions"

export default async function NotificationsPage() {
  const result = await getNotifications()

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Notifications</h1>
          <p className="text-muted-foreground">Send notifications to users, vendors, and customers</p>
        </div>
        <Link href="/admin/notifications/new">
          <Button>
            <Plus className="mr-2 h-4 w-4" />
            Create Notification
          </Button>
        </Link>
      </div>

<Card>
        <CardHeader>
          <CardTitle>All Notifications</CardTitle>
          <CardDescription>View and manage all notifications sent to users</CardDescription>
        </CardHeader>
        <CardContent>
          <Suspense fallback={<div>Loading notifications...</div>}>
            {result.success ? (
              <NotificationsList notifications={result.data || []} />
            ) : (
              <div className="text-center py-8 text-muted-foreground">
                {result.error || "Failed to load notifications"}
              </div>
            )}
          </Suspense>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/notifications/notifications-list.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Send, Trash2 } from "lucide-react"
import { sendNotification, deleteNotification } from "./actions"
import { useRouter } from "next/navigation"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"

interface Notification {
  id: string
  title: string
  message: string
  type: string
  target_audience: string
  is_sent: boolean
  sent_at: string | null
  created_at: string
}

export function NotificationsList({ notifications }: { notifications: Notification[] }) {
  const router = useRouter()
  const [loading, setLoading] = useState<string | null>(null)
  const [deleteId, setDeleteId] = useState<string | null>(null)

const handleSend = async (id: string) => {
    setLoading(id)
    const result = await sendNotification(id)
    setLoading(null)

if (result.success) {
      router.refresh()
    } else {
      alert(result.error || "Failed to send notification")
    }
  }

const handleDelete = async () => {
    if (!deleteId) return

setLoading(deleteId)
    const result = await deleteNotification(deleteId)
    setLoading(null)
    setDeleteId(null)

if (result.success) {
      router.refresh()
    } else {
      alert(result.error || "Failed to delete notification")
    }
  }

const getTypeColor = (type: string) => {
    switch (type) {
      case "success":
        return "bg-green-500"
      case "warning":
        return "bg-yellow-500"
      case "error":
        return "bg-red-500"
      default:
        return "bg-blue-500"
    }
  }

if (notifications.length === 0) {
    return (
      <div className="text-center py-8 text-muted-foreground">
        No notifications found. Create your first notification to get started.
      </div>
    )
  }

return (
    <>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Title</TableHead>
            <TableHead>Type</TableHead>
            <TableHead>Target</TableHead>
            <TableHead>Status</TableHead>
            <TableHead>Created</TableHead>
            <TableHead className="text-right">Actions</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {notifications.map((notification) => (
            <TableRow key={notification.id}>
              <TableCell className="font-medium">{notification.title}</TableCell>
              <TableCell>
                <Badge className={getTypeColor(notification.type)}>{notification.type}</Badge>
              </TableCell>
              <TableCell className="capitalize">{notification.target_audience.replace("_", " ")}</TableCell>
              <TableCell>
                {notification.is_sent ? (
                  <Badge variant="outline" className="bg-green-50">
                    Sent
                  </Badge>
                ) : (
                  <Badge variant="outline">Draft</Badge>
                )}
              </TableCell>
              <TableCell>{new Date(notification.created_at).toLocaleDateString()}</TableCell>
              <TableCell className="text-right space-x-2">
                {!notification.is_sent && (
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => handleSend(notification.id)}
                    disabled={loading === notification.id}
                  >
                    <Send className="h-4 w-4 mr-1" />
                    Send
                  </Button>
                )}
                <Button
                  size="sm"
                  variant="outline"
                  onClick={() => setDeleteId(notification.id)}
                  disabled={loading === notification.id}
                >
                  <Trash2 className="h-4 w-4" />
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>

<AlertDialog open={!!deleteId} onOpenChange={() => setDeleteId(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Delete Notification</AlertDialogTitle>
            <AlertDialogDescription>
              Are you sure you want to delete this notification? This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={handleDelete}>Delete</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/admin/notifications/new/page.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import { CreateNotificationForm } from "./create-notification-form"
import { getUsers } from "../actions"

export default async function NewNotificationPage() {
  const usersResult = await getUsers()

return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Link href="/admin/notifications">
          <Button variant="outline" size="icon">
            <ArrowLeft className="h-4 w-4" />
          </Button>
        </Link>
        <div>
          <h1 className="text-3xl font-bold">Create Notification</h1>
          <p className="text-muted-foreground">Send a new notification to users</p>
        </div>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Notification Details</CardTitle>
          <CardDescription>Fill in the details below to create a new notification</CardDescription>
        </CardHeader>
        <CardContent>
          <CreateNotificationForm users={usersResult.success ? usersResult.data || [] : []} />
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/notifications/new/create-notification-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { createNotification } from "../actions"

interface User {
  id: string
  username: string | null
  business_name: string | null
  user_type: string
}

export function CreateNotificationForm({ users }: { users: User[] }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [targetAudience, setTargetAudience] = useState("all")

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

const formData = new FormData(e.currentTarget)
    const result = await createNotification(formData)

setLoading(false)

if (result.success) {
      router.push("/admin/notifications")
    } else {
      alert(result.error || "Failed to create notification")
    }
  }

return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div className="space-y-2">
        <Label htmlFor="title">Title</Label>
        <Input id="title" name="title" placeholder="Enter notification title" required />
      </div>

<div className="space-y-2">
        <Label htmlFor="message">Message</Label>
        <Textarea id="message" name="message" placeholder="Enter notification message" rows={5} required />
      </div>

<div className="space-y-2">
        <Label htmlFor="type">Type</Label>
        <Select name="type" defaultValue="info" required>
          <SelectTrigger>
            <SelectValue placeholder="Select type" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="info">Info</SelectItem>
            <SelectItem value="success">Success</SelectItem>
            <SelectItem value="warning">Warning</SelectItem>
            <SelectItem value="error">Error</SelectItem>
          </SelectContent>
        </Select>
      </div>

<div className="space-y-2">
        <Label htmlFor="target_audience">Target Audience</Label>
        <Select name="target_audience" value={targetAudience} onValueChange={setTargetAudience} required>
          <SelectTrigger>
            <SelectValue placeholder="Select target audience" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Users</SelectItem>
            <SelectItem value="vendors">Vendors Only</SelectItem>
            <SelectItem value="customers">Customers Only</SelectItem>
            <SelectItem value="specific_user">Specific User</SelectItem>
          </SelectContent>
        </Select>
      </div>

{targetAudience === "specific_user" && (
        <div className="space-y-2">
          <Label htmlFor="target_user_id">Select User</Label>
          <Select name="target_user_id" required>
            <SelectTrigger>
              <SelectValue placeholder="Select a user" />
            </SelectTrigger>
            <SelectContent>
              {users.map((user) => (
                <SelectItem key={user.id} value={user.id}>
                  {user.username || user.business_name || "Unnamed User"} ({user.user_type})
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      )}

<div className="flex gap-4">
        <Button type="submit" disabled={loading}>
          {loading ? "Creating..." : "Create Notification"}
        </Button>
        <Button type="button" variant="outline" onClick={() => router.back()} disabled={loading}>
          Cancel
        </Button>
      </div>
    </form>
  )
}
[V0_FILE]typescript:file="app/admin/notifications/actions.ts" isEdit="true" isQuickEdit="true" isMerged="true"
"use server"

import { revalidatePath } from "next/cache"
import { getAdminClient } from "@/lib/supabase/server"
import { getCurrentAdmin } from "@/app/admin/get-current-admin"
import { sendNotificationEmail } from "@/lib/email"

export async function getNotifications() {
  try {
    const supabase = await getAdminClient()

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

if (error) throw error

return { success: true, data }
  } catch (error: any) {
    console.error("Error fetching notifications:", error)
    return { success: false, error: error.message }
  }
}

export async function createNotification(formData: FormData) {
  try {
    const admin = await getCurrentAdmin()
    if (!admin) {
      return { success: false, error: "Unauthorized" }
    }

const supabase = await getAdminClient()

const title = formData.get("title") as string
    const message = formData.get("message") as string
    const type = formData.get("type") as string
    const targetAudience = formData.get("target_audience") as string
    const targetUserId = formData.get("target_user_id") as string | null

if (!title || !message || !type || !targetAudience) {
      return { success: false, error: "Missing required fields" }
    }

const { data, error } = await supabase
      .from("notifications")
      .insert({
        title,
        message,
        type,
        target_audience: targetAudience,
        target_user_id: targetUserId || null,
        created_by: admin.id,
      })
      .select()
      .single()

if (error) throw error

revalidatePath("/admin/notifications")
    return { success: true, data }
  } catch (error: any) {
    console.error("Error creating notification:", error)
    return { success: false, error: error.message }
  }
}

export async function sendNotification(notificationId: string) {
  try {
    const admin = await getCurrentAdmin()
    if (!admin) {
      return { success: false, error: "Unauthorized" }
    }

const supabase = await getAdminClient()

const { data: notification, error: fetchError } = await supabase
      .from("notifications")
      .select("*")
      .eq("id", notificationId)
      .single()

if (fetchError) throw fetchError

const { data, error } = await supabase
      .from("notifications")
      .update({
        is_sent: true,
        sent_at: new Date().toISOString(),
      })
      .eq("id", notificationId)
      .select()
      .single()

if (error) throw error

try {
      let targetEmails: string[] = []

if (notification.target_audience === "specific_user" && notification.target_user_id) {
        // Get specific user's email
        const { data: userData } = await supabase.auth.admin.getUserById(notification.target_user_id)
        if (userData.user?.email) {
          targetEmails = [userData.user.email]
        }
      } else if (notification.target_audience === "all") {
        // Get all user emails
        const { data: users } = await supabase.auth.admin.listUsers()
        targetEmails = users.users.map((u) => u.email).filter((e): e is string => !!e)
      } else if (notification.target_audience === "customers") {
        // Get customer emails
        const { data: profiles } = await supabase.from("profiles").select("id").eq("user_type", "customer")
        if (profiles) {
          const userIds = profiles.map((p) => p.id)
          const { data: users } = await supabase.auth.admin.listUsers()
          targetEmails = users.users
            .filter((u) => userIds.includes(u.id))
            .map((u) => u.email)
            .filter((e): e is string => !!e)
        }
      } else if (notification.target_audience === "vendors") {
        // Get vendor emails
        const { data: profiles } = await supabase.from("profiles").select("id").eq("user_type", "vendor")
        if (profiles) {
          const userIds = profiles.map((p) => p.id)
          const { data: users } = await supabase.auth.admin.listUsers()
          targetEmails = users.users
            .filter((u) => userIds.includes(u.id))
            .map((u) => u.email)
            .filter((e): e is string => !!e)
        }
      }

// Send emails to all target users
      console.log(`[v0] Sending notification emails to ${targetEmails.length} recipients`)
      for (const email of targetEmails) {
        await sendNotificationEmail(email, {
          title: notification.title,
          message: notification.message,
          type: notification.type,
        })
      }
      console.log("[v0] Notification emails sent successfully")
    } catch (emailError) {
      console.error("[v0] Failed to send notification emails:", emailError)
      // Don't fail the notification send if emails fail
    }

revalidatePath("/admin/notifications")
    return { success: true, data }
  } catch (error: any) {
    console.error("Error sending notification:", error)
    return { success: false, error: error.message }
  }
}

export async function deleteNotification(notificationId: string) {
  try {
    const admin = await getCurrentAdmin()
    if (!admin) {
      return { success: false, error: "Unauthorized" }
    }

const supabase = await getAdminClient()

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

if (error) throw error

revalidatePath("/admin/notifications")
    return { success: true }
  } catch (error: any) {
    console.error("Error deleting notification:", error)
    return { success: false, error: error.message }
  }
}

export async function getUsers() {
  try {
    const supabase = await getAdminClient()

const { data, error } = await supabase
      .from("profiles")
      .select("id, username, business_name, user_type")
      .order("username", { ascending: true })

if (error) throw error

return { success: true, data }
  } catch (error: any) {
    console.error("Error fetching users:", error)
    return { success: false, error: error.message }
  }
}
[V0_FILE]typescript:file="app/(frontend)/notifications/actions.ts" isMerged="true"
"use server"

import { createClient } from "@/lib/supabase/server"

export async function getUserNotifications() {
  try {
    const supabase = await createClient()

// Get current user
    const {
      data: { user },
      error: userError,
    } = await supabase.auth.getUser()

if (userError || !user) {
      return { success: false, error: "Not authenticated" }
    }

// Fetch notifications for the user
    // Include: all users, customers, or specific user
    const { data: notifications, error } = await supabase
      .from("notifications")
      .select("*")
      .eq("is_sent", true)
      .or(
        `target_audience.eq.all,target_audience.eq.customers,and(target_audience.eq.specific_user,target_user_id.eq.${user.id})`,
      )
      .order("created_at", { ascending: false })

if (error) {
      console.error("[v0] Error fetching notifications:", error)
      return { success: false, error: error.message }
    }

return { success: true, notifications: notifications || [] }
  } catch (error: any) {
    console.error("[v0] Error in getUserNotifications:", error)
    return { success: false, error: error.message }
  }
}

export async function markNotificationAsRead(notificationId: string) {
  try {
    const supabase = await createClient()

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

if (userError || !user) {
      return { success: false, error: "Not authenticated" }
    }

// Note: You might want to create a separate table for tracking read status per user
    // For now, this is a placeholder for future implementation
    return { success: true }
  } catch (error: any) {
    console.error("[v0] Error marking notification as read:", error)
    return { success: false, error: error.message }
  }
}
[V0_FILE]typescriptreact:file="app/(frontend)/notifications/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { ProfileSidebar } from "@/components/profile-sidebar"
import { getUserNotifications } from "./actions"
import { Bell, Info, AlertTriangle, CheckCircle, XCircle, Loader2 } from "lucide-react"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Badge } from "@/components/ui/badge"
import { format } from "date-fns"

interface Notification {
  id: string
  title: string
  message: string
  type: "info" | "warning" | "success" | "error"
  target_audience: string
  created_at: string
  sent_at: string
}

export default function NotificationsPage() {
  const [notifications, setNotifications] = useState<Notification[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

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

const loadNotifications = async () => {
    setLoading(true)
    setError(null)

const result = await getUserNotifications()

if (result.success) {
      setNotifications(result.notifications || [])
    } else {
      setError(result.error || "Failed to load notifications")
    }

setLoading(false)
  }

const getNotificationIcon = (type: string) => {
    switch (type) {
      case "info":
        return <Info className="h-5 w-5 text-blue-500" />
      case "warning":
        return <AlertTriangle className="h-5 w-5 text-yellow-500" />
      case "success":
        return <CheckCircle className="h-5 w-5 text-green-500" />
      case "error":
        return <XCircle className="h-5 w-5 text-red-500" />
      default:
        return <Bell className="h-5 w-5 text-gray-500" />
    }
  }

const getNotificationBadgeColor = (type: string) => {
    switch (type) {
      case "info":
        return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
      case "warning":
        return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
      case "success":
        return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
      case "error":
        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
      default:
        return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200"
    }
  }

if (loading) {
    return (
      <div className="min-h-screen bg-muted/30">
        <div className="container mx-auto px-4 py-8">
          <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
            <div className="lg:col-span-1">
              <ProfileSidebar />
            </div>
            <div className="lg:col-span-3">
              <div className="bg-card rounded-lg shadow-sm border border-border p-6">
                <div className="flex items-center justify-center py-12">
                  <Loader2 className="h-8 w-8 animate-spin text-primary" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }

{error && (
                <Alert variant="destructive" className="mb-6">
                  <AlertTriangle className="h-4 w-4" />
                  <AlertTitle>Error</AlertTitle>
                  <AlertDescription>{error}</AlertDescription>
                </Alert>
              )}

{notifications.length === 0 ? (
                <div className="text-center py-12">
                  <Bell className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                  <h3 className="text-lg font-semibold mb-2">No notifications yet</h3>
                  <p className="text-muted-foreground">{"You'll see notifications here when you receive them"}</p>
                </div>
              ) : (
                <div className="space-y-4">
                  {notifications.map((notification) => (
                    <div
                      key={notification.id}
                      className="p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors"
                    >
                      <div className="flex items-start gap-4">
                        <div className="mt-1">{getNotificationIcon(notification.type)}</div>
                        <div className="flex-1 min-w-0">
                          <div className="flex items-start justify-between gap-4 mb-2">
                            <h3 className="font-semibold text-lg">{notification.title}</h3>
                            <Badge className={getNotificationBadgeColor(notification.type)} variant="secondary">
                              {notification.type}
                            </Badge>
                          </div>
                          <p className="text-muted-foreground mb-3 whitespace-pre-wrap">{notification.message}</p>
                          <p className="text-xs text-muted-foreground">
                            {format(new Date(notification.sent_at || notification.created_at), "PPp")}
                          </p>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/(frontend)/actions/settings.ts" isMerged="true"
"use server"

import { createClient } from "@/lib/supabase/server"

export async function getPublicSettings() {
  const supabase = await createClient()

const { data, error } = await supabase
    .from("settings")
    .select("key, value, category")
    .eq("is_public", true)
    .order("category")

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

return data || []
}

export async function getSocialMediaLinks() {
  const supabase = await createClient()

const { data, error } = await supabase
    .from("settings")
    .select("key, value")
    .eq("category", "social")
    .eq("is_public", true)

if (error) {
    console.error("Error fetching social media links:", error)
    return {}
  }

// Convert array to object for easier access
  const socialLinks: Record<string, string> = {}
  data?.forEach((setting) => {
    socialLinks[setting.key] = setting.value
  })

return socialLinks
}
[V0_FILE]typescriptreact:file="app/(frontend)/privacy/page.tsx" isMerged="true"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Privacy Policy | TradeGateStore",
  description: "Learn how TradeGateStore collects, uses, and protects your personal information.",
}

export default function PrivacyPolicyPage() {
  return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-12 max-w-4xl">
        <h1 className="text-4xl font-bold mb-2">Privacy Policy</h1>
        <p className="text-muted-foreground mb-8">Last updated: January 2025</p>

<div className="prose prose-slate dark:prose-invert max-w-none space-y-8">
          <section>
            <h2 className="text-2xl font-semibold mb-4">1. Introduction</h2>
            <p className="text-muted-foreground leading-relaxed">
              Welcome to TradeGateStore. We respect your privacy and are committed to protecting your personal data.
              This privacy policy will inform you about how we look after your personal data when you visit our website
              and tell you about your privacy rights and how the law protects you.
            </p>
          </section>

<section>
            <h2 className="text-2xl font-semibold mb-4">2. Information We Collect</h2>
            <p className="text-muted-foreground leading-relaxed mb-4">
              We may collect, use, store and transfer different kinds of personal data about you:
            </p>
            <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
              <li>
                <strong>Identity Data:</strong> First name, last name, username, date of birth
              </li>
              <li>
                <strong>Contact Data:</strong> Email address, telephone numbers, billing and delivery addresses
              </li>
              <li>
                <strong>Financial Data:</strong> Payment card details, bank account information
              </li>
              <li>
                <strong>Transaction Data:</strong> Details about payments and products purchased from us
              </li>
              <li>
                <strong>Technical Data:</strong> IP address, browser type, device information, operating system
              </li>
              <li>
                <strong>Profile Data:</strong> Username, purchases, preferences, feedback, survey responses
              </li>
              <li>
                <strong>Usage Data:</strong> Information about how you use our website and services
              </li>
              <li>
                <strong>Marketing Data:</strong> Your preferences in receiving marketing from us
              </li>
            </ul>
          </section>

<section>
            <h2 className="text-2xl font-semibold mb-4">3. How We Use Your Information</h2>
            <p className="text-muted-foreground leading-relaxed mb-4">
              We will only use your personal data when the law allows us to. Most commonly, we will use your personal
              data:
            </p>
            <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
              <li>To register you as a new customer</li>
              <li>To process and deliver your orders</li>
              <li>To manage payments, fees, and charges</li>
              <li>To collect and recover money owed to us</li>
              <li>To manage our relationship with you</li>
              <li>To improve our website, products, and services</li>
              <li>To recommend products that may be of interest to you</li>
              <li>To protect against fraud and ensure website security</li>
            </ul>
          </section>

<section>
            <h2 className="text-2xl font-semibold mb-4">4. Data Security</h2>
            <p className="text-muted-foreground leading-relaxed">
              We have put in place appropriate security measures to prevent your personal data from being accidentally
              lost, used, or accessed in an unauthorized way. We limit access to your personal data to those employees,
              agents, contractors, and other third parties who have a business need to know. They will only process your
              personal data on our instructions and are subject to a duty of confidentiality.
            </p>
          </section>

<section>
            <h2 className="text-2xl font-semibold mb-4">5. Data Retention</h2>
            <p className="text-muted-foreground leading-relaxed">
              We will only retain your personal data for as long as necessary to fulfill the purposes we collected it
              for, including for the purposes of satisfying any legal, accounting, or reporting requirements. To
              determine the appropriate retention period, we consider the amount, nature, and sensitivity of the
              personal data, the potential risk of harm from unauthorized use or disclosure, and applicable legal
              requirements.
            </p>
          </section>

<section>
            <h2 className="text-2xl font-semibold mb-4">6. Your Legal Rights</h2>
            <p className="text-muted-foreground leading-relaxed mb-4">
              Under certain circumstances, you have rights under data protection laws in relation to your personal data:
            </p>
            <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
              <li>
                <strong>Right to access:</strong> Request access to your personal data
              </li>
              <li>
                <strong>Right to correction:</strong> Request correction of inaccurate personal data
              </li>
              <li>
                <strong>Right to erasure:</strong> Request deletion of your personal data
              </li>
              <li>
                <strong>Right to object:</strong> Object to processing of your personal data
              </li>
              <li>
                <strong>Right to restriction:</strong> Request restriction of processing your personal data
              </li>
              <li>
                <strong>Right to data portability:</strong> Request transfer of your personal data
              </li>
              <li>
                <strong>Right to withdraw consent:</strong> Withdraw consent at any time
              </li>
            </ul>
          </section>

<section>
            <h2 className="text-2xl font-semibold mb-4">7. Cookies</h2>
            <p className="text-muted-foreground leading-relaxed">
              Our website uses cookies to distinguish you from other users. This helps us provide you with a good
              experience when you browse our website and allows us to improve our site. Cookies are small text files
              that are placed on your computer or mobile device when you visit our website. You can set your browser to
              refuse all or some browser cookies, or to alert you when websites set or access cookies.
            </p>
          </section>

<section>
            <h2 className="text-2xl font-semibold mb-4">8. Third-Party Links</h2>
            <p className="text-muted-foreground leading-relaxed">
              Our website may include links to third-party websites, plug-ins, and applications. Clicking on those links
              or enabling those connections may allow third parties to collect or share data about you. We do not
              control these third-party websites and are not responsible for their privacy statements.
            </p>
          </section>

<section>
            <h2 className="text-2xl font-semibold mb-4">9. Changes to This Policy</h2>
            <p className="text-muted-foreground leading-relaxed">
              We may update this privacy policy from time to time. We will notify you of any changes by posting the new
              privacy policy on this page and updating the "Last updated" date at the top of this policy.
            </p>
          </section>

<section>
            <h2 className="text-2xl font-semibold mb-4">10. Contact Us</h2>
            <p className="text-muted-foreground leading-relaxed">
              If you have any questions about this privacy policy or our privacy practices, please contact us at:
            </p>
            <div className="mt-4 p-4 bg-muted rounded-lg">
              <p className="font-medium">TradeGateStore</p>
              <p className="text-muted-foreground">Email: privacy@tradegatestore.com</p>
              <p className="text-muted-foreground">Phone: +971 XX XXX XXXX</p>
            </div>
          </section>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/(frontend)/terms/page.tsx" isMerged="true"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Terms of Service | TradeGateStore",
  description: "Read the terms and conditions for using TradeGateStore marketplace.",
}

export default function TermsOfServicePage() {
  return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-12 max-w-4xl">
        <h1 className="text-4xl font-bold mb-2">Terms of Service</h1>
        <p className="text-muted-foreground mb-8">Last updated: January 2025</p>

<div className="prose prose-slate dark:prose-invert max-w-none space-y-8">
          <section>
            <h2 className="text-2xl font-semibold mb-4">1. Agreement to Terms</h2>
            <p className="text-muted-foreground leading-relaxed">
              By accessing and using TradeGateStore ("the Platform"), you accept and agree to be bound by the terms and
              provisions of this agreement. If you do not agree to these terms, please do not use our services. We
              reserve the right to modify these terms at any time, and such modifications shall be effective immediately
              upon posting.
            </p>
          </section>

<section>
            <h2 className="text-2xl font-semibold mb-4">2. Use of the Platform</h2>
            <p className="text-muted-foreground leading-relaxed mb-4">
              You agree to use the Platform only for lawful purposes and in accordance with these Terms. You agree not
              to:
            </p>
            <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
              <li>Use the Platform in any way that violates any applicable law or regulation</li>
              <li>Engage in any conduct that restricts or inhibits anyone's use of the Platform</li>
              <li>Impersonate or attempt to impersonate the Company, another user, or any other person or entity</li>
              <li>Use any automated system to access the Platform without our express written permission</li>
              <li>Attempt to gain unauthorized access to any portion of the Platform</li>
              <li>Upload or transmit viruses or any other type of malicious code</li>
            </ul>
          </section>

<section>
            <h2 className="text-2xl font-semibold mb-4">3. Account Registration</h2>
            <p className="text-muted-foreground leading-relaxed">
              To access certain features of the Platform, you may be required to register for an account. You agree to
              provide accurate, current, and complete information during registration and to update such information to
              keep it accurate, current, and complete. You are responsible for safeguarding your password and for all
              activities that occur under your account. You agree to notify us immediately of any unauthorized use of
              your account.
            </p>
          </section>

<section>
            <h2 className="text-2xl font-semibold mb-4">4. Products and Services</h2>
            <p className="text-muted-foreground leading-relaxed mb-4">
              TradeGateStore acts as a marketplace connecting buyers and vendors. We strive to provide accurate product
              descriptions and pricing, but we do not warrant that:
            </p>
            <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
              <li>Product descriptions or other content on the Platform are accurate, complete, or error-free</li>
              <li>Products will be available at the time of your order</li>
              <li>Prices are free from errors or omissions</li>
              <li>Products will meet your expectations</li>
            </ul>
            <p className="text-muted-foreground leading-relaxed mt-4">
              We reserve the right to refuse or cancel any order for any reason, including limitations on quantities
              available for purchase, inaccuracies in product or pricing information, or problems identified by our
              fraud detection systems.
            </p>
          </section>

<section>
            <h2 className="text-2xl font-semibold mb-4">5. Pricing and Payment</h2>
            <p className="text-muted-foreground leading-relaxed">
              All prices are listed in AED (United Arab Emirates Dirham) and are subject to change without notice.
              Payment must be made at the time of purchase using one of our accepted payment methods. You agree to
              provide current, complete, and accurate purchase and account information for all purchases. You agree to
              promptly update your account and payment information to ensure successful transaction processing.
            </p>
          </section>

<section>
            <h2 className="text-2xl font-semibold mb-4">6. Shipping and Delivery</h2>
            <p className="text-muted-foreground leading-relaxed">
              Shipping times and costs vary depending on the vendor and your location. Estimated delivery times are
              provided at checkout but are not guaranteed. We are not responsible for delays caused by customs, weather
              conditions, or other circumstances beyond our control. Risk of loss and title for products pass to you
              upon delivery to the carrier.
            </p>
          </section>

<section>
            <h2 className="text-2xl font-semibold mb-4">7. Returns and Refunds</h2>
            <p className="text-muted-foreground leading-relaxed">
              Our return and refund policy allows you to return most items within 14 days of delivery for a full refund,
              provided they are in original condition with all tags and packaging intact. Some items may not be eligible
              for return due to hygiene or safety reasons. Refunds will be processed to the original payment method
              within 7-10 business days after we receive and inspect the returned item.
            </p>
          </section>

<section>
            <h2 className="text-2xl font-semibold mb-4">8. Vendor Terms</h2>
            <p className="text-muted-foreground leading-relaxed mb-4">
              If you register as a vendor on the Platform, you agree to:
            </p>
            <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
              <li>Provide accurate and complete information about your products</li>
              <li>Honor all sales made through the Platform</li>
              <li>Ship products in a timely manner</li>
              <li>Respond to customer inquiries promptly</li>
              <li>Comply with all applicable laws and regulations</li>
              <li>Pay all applicable fees and commissions</li>
              <li>Not sell counterfeit, illegal, or prohibited items</li>
            </ul>
          </section>

<section>
            <h2 className="text-2xl font-semibold mb-4">9. Intellectual Property</h2>
            <p className="text-muted-foreground leading-relaxed">
              The Platform and its entire contents, features, and functionality are owned by TradeGateStore and are
              protected by international copyright, trademark, patent, trade secret, and other intellectual property
              laws. You may not reproduce, distribute, modify, create derivative works of, publicly display, or exploit
              any content from the Platform without our express written permission.
            </p>
          </section>

<section>
            <h2 className="text-2xl font-semibold mb-4">10. Limitation of Liability</h2>
            <p className="text-muted-foreground leading-relaxed">
              To the fullest extent permitted by law, TradeGateStore shall not be liable for any indirect, incidental,
              special, consequential, or punitive damages, or any loss of profits or revenues, whether incurred directly
              or indirectly, or any loss of data, use, goodwill, or other intangible losses resulting from your use of
              the Platform.
            </p>
          </section>

<section>
            <h2 className="text-2xl font-semibold mb-4">11. Indemnification</h2>
            <p className="text-muted-foreground leading-relaxed">
              You agree to defend, indemnify, and hold harmless TradeGateStore and its affiliates from and against any
              claims, liabilities, damages, losses, and expenses arising out of or in any way connected with your access
              to or use of the Platform, your violation of these Terms, or your violation of any rights of another
              party.
            </p>
          </section>

<section>
            <h2 className="text-2xl font-semibold mb-4">12. Governing Law</h2>
            <p className="text-muted-foreground leading-relaxed">
              These Terms shall be governed by and construed in accordance with the laws of the United Arab Emirates.
              Any disputes arising from these Terms or your use of the Platform shall be subject to the exclusive
              jurisdiction of the courts of the United Arab Emirates.
            </p>
          </section>

<section>
            <h2 className="text-2xl font-semibold mb-4">13. Contact Information</h2>
            <p className="text-muted-foreground leading-relaxed">
              If you have any questions about these Terms, please contact us at:
            </p>
            <div className="mt-4 p-4 bg-muted rounded-lg">
              <p className="font-medium">TradeGateStore</p>
              <p className="text-muted-foreground">Email: legal@tradegatestore.com</p>
              <p className="text-muted-foreground">Phone: +971 XX XXX XXXX</p>
            </div>
          </section>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/(frontend)/help/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import Image from "next/image"
import { Facebook, Twitter, Instagram, Youtube, Linkedin } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { getSocialMediaLinks } from "@/app/(frontend)/actions/settings"

export async function Footer() {
  const socialLinks = await getSocialMediaLinks()

const isValidUrl = (url: string | undefined) => {
    if (!url || url.trim() === "") return false
    // Add http:// if no protocol is specified
    if (!url.startsWith("http://") && !url.startsWith("https://")) {
      return `https://${url}`
    }
    return url
  }

const facebookUrl = isValidUrl(socialLinks.social_facebook)
  const twitterUrl = isValidUrl(socialLinks.social_twitter)
  const instagramUrl = isValidUrl(socialLinks.social_instagram)
  const youtubeUrl = isValidUrl(socialLinks.social_youtube)
  const linkedinUrl = isValidUrl(socialLinks.social_linkedin)

return (
    <footer className="border-t border-border bg-card">
      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
          {/* Brand */}
          <div className="lg:col-span-2">
            <Link href="/" className="flex items-center gap-2 mb-4">
              <Image src="/logo.png" alt="TradeGateStore" width={40} height={40} className="h-10 w-10" />
              <span className="text-xl font-bold">TradeGateStore</span>
            </Link>
            <p className="text-muted-foreground mb-4 text-pretty leading-relaxed">
              Your trusted multi-vendor marketplace connecting buyers with quality sellers worldwide. Shop with
              confidence and discover amazing deals every day.
            </p>
            <div className="flex gap-2">
              {facebookUrl && (
                <Button variant="outline" size="icon" asChild>
                  <a href={facebookUrl} target="_blank" rel="noopener noreferrer" aria-label="Facebook">
                    <Facebook className="h-4 w-4" />
                  </a>
                </Button>
              )}
              {twitterUrl && (
                <Button variant="outline" size="icon" asChild>
                  <a href={twitterUrl} target="_blank" rel="noopener noreferrer" aria-label="Twitter">
                    <Twitter className="h-4 w-4" />
                  </a>
                </Button>
              )}
              {instagramUrl && (
                <Button variant="outline" size="icon" asChild>
                  <a href={instagramUrl} target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                    <Instagram className="h-4 w-4" />
                  </a>
                </Button>
              )}
              {youtubeUrl && (
                <Button variant="outline" size="icon" asChild>
                  <a href={youtubeUrl} target="_blank" rel="noopener noreferrer" aria-label="YouTube">
                    <Youtube className="h-4 w-4" />
                  </a>
                </Button>
              )}
              {linkedinUrl && (
                <Button variant="outline" size="icon" asChild>
                  <a href={linkedinUrl} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
                    <Linkedin className="h-4 w-4" />
                  </a>
                </Button>
              )}
            </div>
          </div>

<div>
            <h3 className="font-semibold mb-4">Quick Links</h3>
            <ul className="space-y-2">
              <li>
                <Link href="/" className="text-muted-foreground hover:text-primary transition-colors">
                  Home
                </Link>
              </li>
              <li>
                <Link href="/shops" className="text-muted-foreground hover:text-primary transition-colors">
                  All Shops
                </Link>
              </li>
              <li>
                <Link
                  href="/categories/electronics"
                  className="text-muted-foreground hover:text-primary transition-colors"
                >
                  Categories
                </Link>
              </li>
              <li>
                <Link href="/search" className="text-muted-foreground hover:text-primary transition-colors">
                  Search Products
                </Link>
              </li>
            </ul>
          </div>

<div>
            <h3 className="font-semibold mb-4">My Account</h3>
            <ul className="space-y-2">
              <li>
                <Link href="/profile" className="text-muted-foreground hover:text-primary transition-colors">
                  My Profile
                </Link>
              </li>
              <li>
                <Link href="/orders" className="text-muted-foreground hover:text-primary transition-colors">
                  My Orders
                </Link>
              </li>
              <li>
                <Link href="/wishlist" className="text-muted-foreground hover:text-primary transition-colors">
                  Wishlist
                </Link>
              </li>
              <li>
                <Link href="/cart" className="text-muted-foreground hover:text-primary transition-colors">
                  Shopping Cart
                </Link>
              </li>
              <li>
                <Link href="/notifications" className="text-muted-foreground hover:text-primary transition-colors">
                  Notifications
                </Link>
              </li>
            </ul>
          </div>

<div>
            <h3 className="font-semibold mb-4">For Vendors</h3>
            <ul className="space-y-2">
              <li>
                <Link href="/vendor/login" className="text-muted-foreground hover:text-primary transition-colors">
                  Vendor Login
                </Link>
              </li>
              <li>
                <Link href="/vendor/dashboard" className="text-muted-foreground hover:text-primary transition-colors">
                  Vendor Dashboard
                </Link>
              </li>
              <li>
                <Link href="/auth/admin" className="text-muted-foreground hover:text-primary transition-colors">
                  Admin Login
                </Link>
              </li>
              <li>
                <Link href="/shops" className="text-muted-foreground hover:text-primary transition-colors">
                  Browse Vendors
                </Link>
              </li>
            </ul>
          </div>
        </div>

{/* Newsletter */}
        <div className="mt-12 pt-8 border-t border-border">
          <div className="max-w-md">
            <h3 className="font-semibold mb-2">Subscribe to our newsletter</h3>
            <p className="text-sm text-muted-foreground mb-4">
              Get the latest deals and updates delivered to your inbox
            </p>
            <div className="flex gap-2">
              <Input type="email" placeholder="Enter your email" />
              <Button>Subscribe</Button>
            </div>
          </div>
        </div>

<div className="mt-8 pt-8 border-t border-border flex flex-col md:flex-row justify-between items-center gap-4">
          <p className="text-sm text-muted-foreground">© 2025 TradeGateStore. All rights reserved.</p>
          <div className="flex gap-6 text-sm">
            <Link href="/privacy" className="text-muted-foreground hover:text-primary transition-colors">
              Privacy Policy
            </Link>
            <Link href="/terms" className="text-muted-foreground hover:text-primary transition-colors">
              Terms of Service
            </Link>
            <Link href="/help" className="text-muted-foreground hover:text-primary transition-colors">
              Help Center
            </Link>
          </div>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="app/(frontend)/help/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type { Metadata } from "next"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Mail, Phone, MessageCircle, Search } from "lucide-react"
import Link from "next/link"

export const metadata: Metadata = {
  title: "Help Center | TradeGateStore",
  description: "Find answers to frequently asked questions and get support for your TradeGateStore account.",
}

export default function HelpCenterPage() {
  return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-12 max-w-6xl">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold mb-4">Help Center</h1>
          <p className="text-muted-foreground text-lg">Find answers to your questions and get the support you need</p>
        </div>

{/* Contact Options */}
        <div className="grid md:grid-cols-3 gap-6 mb-12">
          <Card>
            <CardHeader>
              <Mail className="h-8 w-8 mb-2 text-primary" />
              <CardTitle>Email Support</CardTitle>
              <CardDescription>Get help via email</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground mb-4">Send us an email and we'll respond within 24 hours</p>
              <Button variant="outline" className="w-full bg-transparent" asChild>
                <a href="mailto:support@tradegatestore.com">support@tradegatestore.com</a>
              </Button>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <Phone className="h-8 w-8 mb-2 text-primary" />
              <CardTitle>Phone Support</CardTitle>
              <CardDescription>Talk to our team</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground mb-4">Available Mon-Fri, 9 AM - 6 PM GST</p>
              <Button variant="outline" className="w-full bg-transparent" asChild>
                <a href="tel:+971501042523">+971 50 104 2523</a>
              </Button>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <MessageCircle className="h-8 w-8 mb-2 text-primary" />
              <CardTitle>Live Chat</CardTitle>
              <CardDescription>Chat with us now</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground mb-4">Get instant help from our support team</p>
              <Button variant="outline" className="w-full bg-transparent">
                Start Chat
              </Button>
            </CardContent>
          </Card>
        </div>

{/* FAQ Sections */}
        <div className="space-y-8">
          <section>
            <h2 className="text-2xl font-semibold mb-6 flex items-center gap-2">
              <Search className="h-6 w-6" />
              Frequently Asked Questions
            </h2>

<div className="space-y-6">
              {/* Orders & Shipping */}
              <Card>
                <CardHeader>
                  <CardTitle>Orders & Shipping</CardTitle>
                </CardHeader>
                <CardContent>
                  <Accordion type="single" collapsible className="w-full">
                    <AccordionItem value="item-1">
                      <AccordionTrigger>How do I track my order?</AccordionTrigger>
                      <AccordionContent>
                        You can track your order by logging into your account and visiting the "My Orders" page. Click
                        on any order to view its current status and tracking information. You'll also receive email
                        notifications with tracking updates.
                      </AccordionContent>
                    </AccordionItem>
                    <AccordionItem value="item-2">
                      <AccordionTrigger>What are the shipping costs?</AccordionTrigger>
                      <AccordionContent>
                        Shipping costs vary depending on the vendor, product size, weight, and your delivery location.
                        You'll see the exact shipping cost at checkout before completing your purchase. Many vendors
                        offer free shipping on orders above a certain amount.
                      </AccordionContent>
                    </AccordionItem>
                    <AccordionItem value="item-3">
                      <AccordionTrigger>How long does delivery take?</AccordionTrigger>
                      <AccordionContent>
                        Delivery times vary by vendor and location. Typically, orders within the UAE are delivered
                        within 2-5 business days. International orders may take 7-14 business days. Estimated delivery
                        times are shown at checkout.
                      </AccordionContent>
                    </AccordionItem>
                    <AccordionItem value="item-4">
                      <AccordionTrigger>Can I change my delivery address?</AccordionTrigger>
                      <AccordionContent>
                        You can change your delivery address before the order is shipped. Go to "My Orders", select the
                        order, and click "Edit Address". If the order has already been shipped, please contact our
                        support team for assistance.
                      </AccordionContent>
                    </AccordionItem>
                  </Accordion>
                </CardContent>
              </Card>

{/* Returns & Refunds */}
              <Card>
                <CardHeader>
                  <CardTitle>Returns & Refunds</CardTitle>
                </CardHeader>
                <CardContent>
                  <Accordion type="single" collapsible className="w-full">
                    <AccordionItem value="item-1">
                      <AccordionTrigger>What is your return policy?</AccordionTrigger>
                      <AccordionContent>
                        We offer a 14-day return policy for most items. Products must be in original condition with all
                        tags and packaging intact. Some items like personal care products, food items, and custom orders
                        may not be eligible for return. Check the product page for specific return eligibility.
                      </AccordionContent>
                    </AccordionItem>
                    <AccordionItem value="item-2">
                      <AccordionTrigger>How do I return an item?</AccordionTrigger>
                      <AccordionContent>
                        To return an item, go to "My Orders", select the order, and click "Request Return". Choose the
                        reason for return and submit your request. You'll receive return instructions via email,
                        including a return shipping label if applicable.
                      </AccordionContent>
                    </AccordionItem>
                    <AccordionItem value="item-3">
                      <AccordionTrigger>When will I receive my refund?</AccordionTrigger>
                      <AccordionContent>
                        Refunds are processed within 7-10 business days after we receive and inspect the returned item.
                        The refund will be credited to your original payment method. Please allow additional time for
                        your bank to process the refund.
                      </AccordionContent>
                    </AccordionItem>
                    <AccordionItem value="item-4">
                      <AccordionTrigger>Who pays for return shipping?</AccordionTrigger>
                      <AccordionContent>
                        Return shipping costs depend on the reason for return. If the item is defective or incorrect,
                        we'll provide a prepaid return label. For other returns (change of mind, wrong size, etc.), the
                        customer is responsible for return shipping costs.
                      </AccordionContent>
                    </AccordionItem>
                  </Accordion>
                </CardContent>
              </Card>

{/* Account & Payment */}
              <Card>
                <CardHeader>
                  <CardTitle>Account & Payment</CardTitle>
                </CardHeader>
                <CardContent>
                  <Accordion type="single" collapsible className="w-full">
                    <AccordionItem value="item-1">
                      <AccordionTrigger>How do I create an account?</AccordionTrigger>
                      <AccordionContent>
                        Click on the "Sign Up" button in the top right corner of the website. Enter your email address,
                        create a password, and fill in your basic information. You'll receive a verification email to
                        activate your account.
                      </AccordionContent>
                    </AccordionItem>
                    <AccordionItem value="item-2">
                      <AccordionTrigger>What payment methods do you accept?</AccordionTrigger>
                      <AccordionContent>
                        We accept major credit cards (Visa, Mastercard, American Express), debit cards, and cash on
                        delivery (COD) for eligible orders. All online payments are processed securely through our
                        payment gateway.
                      </AccordionContent>
                    </AccordionItem>
                    <AccordionItem value="item-3">
                      <AccordionTrigger>Is my payment information secure?</AccordionTrigger>
                      <AccordionContent>
                        Yes, we use industry-standard SSL encryption to protect your payment information. We do not
                        store your complete credit card details on our servers. All transactions are processed through
                        secure payment gateways that comply with PCI DSS standards.
                      </AccordionContent>
                    </AccordionItem>
                    <AccordionItem value="item-4">
                      <AccordionTrigger>How do I reset my password?</AccordionTrigger>
                      <AccordionContent>
                        Click on "Login" and then "Forgot Password". Enter your email address and we'll send you a
                        password reset link. Follow the instructions in the email to create a new password.
                      </AccordionContent>
                    </AccordionItem>
                  </Accordion>
                </CardContent>
              </Card>

{/* Products & Vendors */}
              <Card>
                <CardHeader>
                  <CardTitle>Products & Vendors</CardTitle>
                </CardHeader>
                <CardContent>
                  <Accordion type="single" collapsible className="w-full">
                    <AccordionItem value="item-1">
                      <AccordionTrigger>How do I contact a vendor?</AccordionTrigger>
                      <AccordionContent>
                        You can contact vendors through their shop page. Click on the vendor's name on any product page
                        to visit their shop, where you'll find their contact information and a message button.
                      </AccordionContent>
                    </AccordionItem>
                    <AccordionItem value="item-2">
                      <AccordionTrigger>Are products authentic?</AccordionTrigger>
                      <AccordionContent>
                        We verify all vendors before they can sell on our platform and have strict policies against
                        counterfeit products. All vendors must comply with our authenticity guidelines. If you receive a
                        counterfeit product, please report it immediately for a full refund.
                      </AccordionContent>
                    </AccordionItem>
                    <AccordionItem value="item-3">
                      <AccordionTrigger>How do I become a vendor?</AccordionTrigger>
                      <AccordionContent>
                        To become a vendor, click on "Become a Vendor" in the footer and fill out the registration form.
                        Our team will review your application and contact you within 3-5 business days. You'll need to
                        provide business documentation and agree to our vendor terms.
                      </AccordionContent>
                    </AccordionItem>
                    <AccordionItem value="item-4">
                      <AccordionTrigger>Can I save products for later?</AccordionTrigger>
                      <AccordionContent>
                        Yes! Click the heart icon on any product to add it to your wishlist. You can view all your saved
                        products by clicking on the wishlist icon in the header or visiting your profile page.
                      </AccordionContent>
                    </AccordionItem>
                  </Accordion>
                </CardContent>
              </Card>
            </div>
          </section>

{/* Still Need Help */}
          <Card className="bg-primary/5 border-primary/20">
            <CardHeader className="text-center">
              <CardTitle className="text-2xl">Still Need Help?</CardTitle>
              <CardDescription>Can't find what you're looking for? Our support team is here to help</CardDescription>
            </CardHeader>
            <CardContent className="flex justify-center gap-4">
              <Button asChild>
                <Link href="/profile">Contact Support</Link>
              </Button>
              <Button variant="outline" asChild>
                <Link href="/privacy">Privacy Policy</Link>
              </Button>
              <Button variant="outline" asChild>
                <Link href="/terms">Terms of Service</Link>
              </Button>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/csv-utils.ts" isEdit="true" isQuickEdit="true" isMerged="true"
export interface ProductCSVRow {
  name: string
  sku: string
  description: string
  category: string
  sub_category?: string
  sub_sub_category?: string
  brand: string
  price: number
  discount_type?: string
  discount_amount?: number
  tax_type?: string
  tax_amount?: number
  unit: string
  minimum_order_qty: number
  current_stock: number
  image_url: string
  additional_images?: string // Comma-separated URLs
  video_url?: string
  product_type?: string
  colors?: string // JSON string
  attributes?: string // JSON string
  meta_title?: string
  meta_description?: string
  is_featured?: boolean
}

export function parseCSV(text: string): ProductCSVRow[] {
  const lines = text.split("\n").filter((line) => line.trim())
  if (lines.length < 2) return []

const headers = parseCSVLine(lines[0])
  const rows: ProductCSVRow[] = []

for (let i = 1; i < lines.length; i++) {
    const values = parseCSVLine(lines[i])
    const row: any = {}

headers.forEach((header, index) => {
      row[header] = values[index] || ""
    })

rows.push(row as ProductCSVRow)
  }

return rows
}

function parseCSVLine(line: string): string[] {
  const result: string[] = []
  let current = ""
  let inQuotes = false

for (let i = 0; i < line.length; i++) {
    const char = line[i]
    const nextChar = line[i + 1]

if (char === '"') {
      if (inQuotes && nextChar === '"') {
        // Escaped quote
        current += '"'
        i++
      } else {
        // Toggle quote state
        inQuotes = !inQuotes
      }
    } else if (char === "," && !inQuotes) {
      // Field separator
      result.push(current.trim())
      current = ""
    } else {
      current += char
    }
  }

// Add the last field
  result.push(current.trim())

return result
}

export function generateCSVTemplate(): string {
  const headers = [
    "name",
    "sku",
    "description",
    "category",
    "sub_category",
    "sub_sub_category",
    "brand",
    "price",
    "discount_type",
    "discount_amount",
    "tax_type",
    "tax_amount",
    "unit",
    "minimum_order_qty",
    "current_stock",
    "image_url",
    "additional_images",
    "video_url",
    "product_type",
    "colors",
    "attributes",
    "meta_title",
    "meta_description",
    "is_featured",
  ]

const sampleRow = [
    '"Sample Product Name"',
    '"PRD-SAMPLE-001"',
    '"This is a sample product description with, commas"',
    '"Electronics"',
    '"Mobile Phones"',
    '"Smartphones"',
    '"Samsung"',
    '"999.99"',
    '"flat"',
    '"50"',
    '"percent"',
    '"10"',
    '"pc"',
    '"1"',
    '"100"',
    '"https://example.com/image.jpg"',
    '"https://example.com/img1.jpg,https://example.com/img2.jpg"',
    '"https://youtube.com/watch?v=VIDEO_ID"',
    '"physical"',
    '"[""Red"",""Blue"",""Black""]"',
    '"{""Size"":[""Small"",""Medium"",""Large""],""Material"":[""Cotton"",""Polyester""]}"',
    '"Sample Product - Best Quality"',
    '"Buy the best sample product online at great prices"',
    '"true"',
  ]

return [headers.join(","), sampleRow.join(",")].join("\n")
}

export function downloadCSV(content: string, filename: string) {
  const blob = new Blob([content], { type: "text/csv;charset=utf-8;" })
  const link = document.createElement("a")
  const url = URL.createObjectURL(blob)
  link.setAttribute("href", url)
  link.setAttribute("download", filename)
  link.style.visibility = "hidden"
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

export function validateProductRow(row: ProductCSVRow, rowIndex: number): string[] {
  const errors: string[] = []

// Required fields validation
  if (!row.name || row.name.trim() === "") {
    errors.push(`Row ${rowIndex}: Product name is required`)
  }
  if (!row.sku || row.sku.trim() === "") {
    errors.push(`Row ${rowIndex}: SKU is required`)
  }
  if (!row.category || row.category.trim() === "") {
    errors.push(`Row ${rowIndex}: Category is required`)
  }
  if (!row.brand || row.brand.trim() === "") {
    errors.push(`Row ${rowIndex}: Brand is required`)
  }
  if (!row.price || isNaN(Number(row.price)) || Number(row.price) <= 0) {
    errors.push(`Row ${rowIndex}: Valid price is required`)
  }
  if (!row.unit || row.unit.trim() === "") {
    errors.push(`Row ${rowIndex}: Unit is required`)
  }
  if (!row.current_stock || isNaN(Number(row.current_stock)) || Number(row.current_stock) < 0) {
    errors.push(`Row ${rowIndex}: Valid stock quantity is required`)
  }

// URL validation
  if (row.image_url && !isValidURL(row.image_url)) {
    errors.push(`Row ${rowIndex}: Invalid image URL`)
  }

// JSON validation
  if (row.colors) {
    try {
      JSON.parse(row.colors)
    } catch {
      errors.push(`Row ${rowIndex}: Invalid colors JSON format`)
    }
  }

if (row.attributes) {
    try {
      JSON.parse(row.attributes)
    } catch {
      errors.push(`Row ${rowIndex}: Invalid attributes JSON format`)
    }
  }

return errors
}

function isValidURL(url: string): boolean {
  try {
    new URL(url)
    return true
  } catch {
    return false
  }
}

export function checkDuplicateSKUs(rows: ProductCSVRow[]): string[] {
  const errors: string[] = []
  const skuMap = new Map<string, number[]>()

rows.forEach((row, index) => {
    const sku = row.sku?.trim()
    if (sku) {
      if (!skuMap.has(sku)) {
        skuMap.set(sku, [])
      }
      skuMap.get(sku)!.push(index + 2) // +2 for header and 0-based index
    }
  })

skuMap.forEach((rowNumbers, sku) => {
    if (rowNumbers.length > 1) {
      errors.push(`Duplicate SKU "${sku}" found in rows: ${rowNumbers.join(", ")}`)
    }
  })

return errors
}
[V0_FILE]typescriptreact:file="app/admin/products/inhouse/bulk-import/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useToast } from "@/hooks/use-toast"
import { Download, Upload, FileSpreadsheet, CheckCircle, XCircle, AlertCircle } from "lucide-react"
import {
  generateCSVTemplate,
  downloadCSV,
  validateProductRow,
  checkDuplicateSKUs,
  type ProductCSVRow,
} from "@/lib/csv-utils"
import { getAdminClient } from "@/lib/supabase/server"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Progress } from "@/components/ui/progress"

interface ImportResult {
  success: boolean
  row: number
  sku: string
  name: string
  error?: string
}

export default function BulkImportPage() {
  const [file, setFile] = useState<File | null>(null)
  const [importing, setImporting] = useState(false)
  const [results, setResults] = useState<ImportResult[]>([])
  const [progress, setProgress] = useState(0)
  const { toast } = useToast()

const handleDownloadTemplate = () => {
    const template = generateCSVTemplate()
    downloadCSV(template, "product-import-template.csv")
    toast({
      title: "Template Downloaded",
      description: "CSV template has been downloaded successfully.",
    })
  }

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFile = e.target.files?.[0]
    if (selectedFile) {
      if (selectedFile.type !== "text/csv" && !selectedFile.name.endsWith(".csv")) {
        toast({
          title: "Invalid File",
          description: "Please upload a CSV file.",
          variant: "destructive",
        })
        return
      }
      setFile(selectedFile)
      setResults([])
    }
  }

const handleImport = async () => {
    if (!file) {
      toast({
        title: "No File Selected",
        description: "Please select a CSV file to import.",
        variant: "destructive",
      })
      return
    }

setImporting(true)
    setResults([])
    setProgress(0)

try {
      const text = await file.text()
      const rows = parseCSV(text)

if (rows.length === 0) {
        toast({
          title: "Empty File",
          description: "The CSV file is empty or invalid.",
          variant: "destructive",
        })
        setImporting(false)
        return
      }

const duplicateErrors = checkDuplicateSKUs(rows)
      if (duplicateErrors.length > 0) {
        toast({
          title: "Duplicate SKUs Found",
          description: `Found ${duplicateErrors.length} duplicate SKU(s). Each SKU must be unique.`,
          variant: "destructive",
        })

const errorResults: ImportResult[] = duplicateErrors.map((error, index) => ({
          success: false,
          row: index + 2,
          sku: "",
          name: "",
          error,
        }))
        setResults(errorResults)
        setImporting(false)
        return
      }

const allErrors: string[] = []
      rows.forEach((row, index) => {
        const errors = validateProductRow(row, index + 2)
        allErrors.push(...errors)
      })

if (allErrors.length > 0) {
        toast({
          title: "Validation Errors",
          description: `Found ${allErrors.length} validation error(s). Check the results below.`,
          variant: "destructive",
        })

const errorResults: ImportResult[] = allErrors.map((error, index) => ({
          success: false,
          row: index + 2,
          sku: "",
          name: "",
          error,
        }))
        setResults(errorResults)
        setImporting(false)
        return
      }

const supabase = await getAdminClient()
      const importResults: ImportResult[] = []

const skus = rows.map((row) => row.sku)
      const { data: existingProducts } = await supabase.from("products").select("sku").in("sku", skus)

const existingSKUs = new Set(existingProducts?.map((p) => p.sku) || [])

for (let i = 0; i < rows.length; i++) {
        const row = rows[i]
        const rowNumber = i + 2

try {
          if (existingSKUs.has(row.sku)) {
            throw new Error(`SKU "${row.sku}" already exists in database`)
          }

const additionalImages = row.additional_images
            ? row.additional_images
                .split(",")
                .map((url) => url.trim())
                .filter((url) => url)
            : []

let colors = []
          if (row.colors) {
            try {
              colors = JSON.parse(row.colors)
            } catch (e) {
              throw new Error(`Invalid colors JSON format`)
            }
          }

let attributes = {}
          if (row.attributes) {
            try {
              attributes = JSON.parse(row.attributes)
            } catch (e) {
              throw new Error(`Invalid attributes JSON format`)
            }
          }

const { error } = await supabase.from("products").insert({
            name: row.name,
            sku: row.sku,
            description: row.description,
            category: row.category,
            sub_category: row.sub_category || null,
            sub_sub_category: row.sub_sub_category || null,
            brand: row.brand,
            price: Number(row.price),
            discount_type: row.discount_type || null,
            discount_amount: row.discount_amount ? Number(row.discount_amount) : null,
            tax_type: row.tax_type || null,
            tax_amount: row.tax_amount ? Number(row.tax_amount) : null,
            unit: row.unit,
            minimum_order_qty: Number(row.minimum_order_qty) || 1,
            current_stock: Number(row.current_stock),
            stock_quantity: Number(row.current_stock),
            image_url: row.image_url,
            additional_images: additionalImages,
            video_url: row.video_url || null,
            product_type: row.product_type || "physical",
            colors,
            attributes,
            meta_title: row.meta_title || row.name,
            meta_description: row.meta_description || row.description,
            is_featured: row.is_featured === "true" || row.is_featured === true,
            is_active: true,
            is_inhouse: true,
            approval_status: "approved",
          })

if (error) throw error

importResults.push({
            success: true,
            row: rowNumber,
            sku: row.sku,
            name: row.name,
          })
        } catch (error: any) {
          importResults.push({
            success: false,
            row: rowNumber,
            sku: row.sku,
            name: row.name,
            error: error.message || "Unknown error",
          })
        }

setProgress(((i + 1) / rows.length) * 100)
      }

setResults(importResults)

const successCount = importResults.filter((r) => r.success).length
      const failCount = importResults.filter((r) => !r.success).length

toast({
        title: "Import Complete",
        description: `Successfully imported ${successCount} product(s). ${failCount} failed.`,
      })
    } catch (error: any) {
      toast({
        title: "Import Failed",
        description: error.message || "An error occurred during import.",
        variant: "destructive",
      })
    } finally {
      setImporting(false)
    }
  }

const successCount = results.filter((r) => r.success).length
  const failCount = results.filter((r) => !r.success).length

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Bulk Import Products</h1>
        <p className="text-muted-foreground mt-2">Import multiple products at once using a CSV file</p>
      </div>

<div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Download className="h-5 w-5" />
              Step 1: Download Template
            </CardTitle>
            <CardDescription>Download the CSV template with sample data and required format</CardDescription>
          </CardHeader>
          <CardContent>
            <Button onClick={handleDownloadTemplate} className="w-full">
              <FileSpreadsheet className="h-4 w-4 mr-2" />
              Download CSV Template
            </Button>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Upload className="h-5 w-5" />
              Step 2: Upload CSV File
            </CardTitle>
            <CardDescription>Upload your filled CSV file to import products</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <Label htmlFor="csv-file">Select CSV File</Label>
              <Input id="csv-file" type="file" accept=".csv" onChange={handleFileChange} disabled={importing} />
              {file && <p className="text-sm text-muted-foreground mt-2">Selected: {file.name}</p>}
            </div>
            <Button onClick={handleImport} disabled={!file || importing} className="w-full">
              {importing ? "Importing..." : "Import Products"}
            </Button>
          </CardContent>
        </Card>
      </div>

{importing && (
        <Card>
          <CardHeader>
            <CardTitle>Import Progress</CardTitle>
          </CardHeader>
          <CardContent>
            <Progress value={progress} className="w-full" />
            <p className="text-sm text-muted-foreground mt-2">{Math.round(progress)}% complete</p>
          </CardContent>
        </Card>
      )}

{results.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Import Results</CardTitle>
            <CardDescription>
              {successCount} successful, {failCount} failed
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-2 max-h-96 overflow-y-auto">
              {results.map((result, index) => (
                <Alert key={index} variant={result.success ? "default" : "destructive"}>
                  {result.success ? <CheckCircle className="h-4 w-4" /> : <XCircle className="h-4 w-4" />}
                  <AlertDescription>
                    <span className="font-medium">Row {result.row}:</span>{" "}
                    {result.success ? (
                      <>
                        Successfully imported <strong>{result.name}</strong> (SKU: {result.sku})
                      </>
                    ) : (
                      <>
                        Failed to import {result.name && <strong>{result.name}</strong>}
                        {result.sku && ` (SKU: ${result.sku})`} - {result.error}
                      </>
                    )}
                  </AlertDescription>
                </Alert>
              ))}
            </div>
          </CardContent>
        </Card>
      )}

<Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <AlertCircle className="h-5 w-5" />
            Important Notes
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-2 text-sm text-muted-foreground">
          <ul className="list-disc list-inside space-y-1">
            <li>All required fields must be filled: name, sku, category, brand, price, unit, current_stock</li>
            <li>SKU must be unique for each product</li>
            <li>Price and stock must be valid numbers</li>
            <li>Image URLs must be valid and accessible</li>
            <li>Additional images should be comma-separated URLs</li>
            <li>Colors should be a JSON array format</li>
            <li>Attributes should be a JSON object format</li>
            <li>Boolean fields should be true or false</li>
          </ul>
        </CardContent>
      </Card>
    </div>
  )
}

function parseCSV(text: string): ProductCSVRow[] {
  const lines = text.split("\n").filter((line) => line.trim())
  if (lines.length < 2) return []

const headers = lines[0].split(",").map((h) => h.trim())
  const rows: ProductCSVRow[] = []

for (let i = 1; i < lines.length; i++) {
    const values = lines[i].split(",").map((v) => v.trim())
    const row: any = {}

headers.forEach((header, index) => {
      row[header] = values[index] || ""
    })

rows.push(row as ProductCSVRow)
  }

return rows
}
[V0_FILE]plaintext:file="public/sample-products-import.csv" isEdit="true" isMerged="true"
name,sku,description,category,sub_category,sub_sub_category,brand,price,discount_type,discount_amount,tax_type,tax_amount,unit,minimum_order_qty,current_stock,image_url,additional_images,video_url,product_type,colors,attributes,meta_title,meta_description,is_featured
"Premium Wireless Headphones","WH-001","High-quality wireless headphones with noise cancellation and 30-hour battery life. Perfect for music lovers and professionals.","Electronics","Audio","Headphones","Sony","299.99","flat","50","percent","10","pc","1","50","https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400","https://images.unsplash.com/photo-1484704849700-f032a568e944?w=400,https://images.unsplash.com/photo-1487215078519-e21cc028cb29?w=400","","physical","[""Black"",""White"",""Silver""]","{""Battery Life"":[""30 hours""],""Connectivity"":[""Bluetooth 5.0""]}","Premium Wireless Headphones - Best Sound Quality","Buy premium wireless headphones with noise cancellation online","true"
"Smart Fitness Watch","FW-002","Track your fitness goals with this advanced smartwatch featuring heart rate monitoring, GPS, and water resistance up to 50m.","Electronics","Wearables","Smartwatches","Apple","199.99","percent","10","percent","5","pc","1","100","https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400","https://images.unsplash.com/photo-1434494878577-86c23bcb06b9?w=400","","physical","[""Black"",""Blue"",""Rose Gold""]","{""Display"":[""1.4 inch AMOLED""],""Water Resistance"":[""50m""],""Battery"":[""7 days""]}","Smart Fitness Watch - Track Your Health","Advanced smartwatch with heart rate monitoring and GPS","true"
"Organic Cotton T-Shirt","TS-003","Comfortable and sustainable organic cotton t-shirt. Available in multiple colors and sizes. Perfect for everyday wear.","Fashion","Men's Clothing","T-Shirts","Nike","29.99","","","percent","5","pc","1","200","https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=400","https://images.unsplash.com/photo-1583743814966-8936f5b7be1a?w=400","","physical","[""White"",""Black"",""Navy"",""Gray""]","{""Material"":[""100% Organic Cotton""],""Fit"":[""Regular""],""Size"":[""S"",""M"",""L"",""XL""]}","Organic Cotton T-Shirt - Comfortable & Sustainable","Buy organic cotton t-shirts online at best prices","false"
"Stainless Steel Water Bottle","WB-004","Insulated stainless steel water bottle keeps drinks cold for 24 hours or hot for 12 hours. BPA-free and eco-friendly.","Home & Kitchen","Drinkware","Water Bottles","Hydro Flask","34.99","flat","5","percent","5","pc","1","150","https://images.unsplash.com/photo-1602143407151-7111542de6e8?w=400","https://images.unsplash.com/photo-1523362628745-0c100150b504?w=400","","physical","[""Silver"",""Black"",""Blue"",""Pink""]","{""Capacity"":[""750ml""],""Material"":[""Stainless Steel""],""Insulation"":[""Double Wall""]}","Insulated Water Bottle - Keep Drinks Cold or Hot","BPA-free stainless steel water bottle with insulation","false"
"Leather Laptop Bag","LB-005","Professional leather laptop bag with padded compartment for 15-inch laptops. Multiple pockets for organization.","Bags & Luggage","Laptop Bags","Messenger Bags","Samsonite","149.99","percent","15","percent","10","pc","1","75","https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=400","https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=400","","physical","[""Brown"",""Black""]","{""Material"":[""Genuine Leather""],""Laptop Size"":[""Up to 15 inch""],""Dimensions"":[""40x30x10 cm""]}","Leather Laptop Bag - Professional & Stylish","Premium leather laptop bag with padded compartment","true"
[V0_FILE]typescriptreact:file="components/promotions-banner.tsx" isMerged="true"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
import { Tag, Clock, TrendingUp } from "lucide-react"
import { getActivePromotions } from "@/app/(frontend)/actions/promotions"

export async function PromotionsBanner() {
  const { promotions } = await getActivePromotions()

if (!promotions || promotions.length === 0) {
    return null
  }

return (
    <section className="py-8 bg-gradient-to-r from-primary/5 via-primary/10 to-primary/5">
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-2">
            <Tag className="h-5 w-5 text-primary" />
            <h2 className="text-2xl font-bold">Active Promotions</h2>
          </div>
          <Badge variant="secondary" className="gap-1">
            <TrendingUp className="h-3 w-3" />
            Limited Time
          </Badge>
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {promotions.map((promo) => (
            <Card key={promo.id} className="border-primary/20 hover:border-primary/40 transition-colors">
              <CardContent className="p-6">
                <div className="space-y-3">
                  <div className="flex items-start justify-between">
                    <div>
                      <h3 className="font-semibold text-lg">{promo.name}</h3>
                      <p className="text-sm text-muted-foreground mt-1">{promo.description}</p>
                    </div>
                    <Badge variant="default" className="shrink-0">
                      {promo.discount_type === "percentage"
                        ? `${promo.discount_value}% OFF`
                        : `AED ${promo.discount_value} OFF`}
                    </Badge>
                  </div>

<div className="flex items-center gap-2 text-sm">
                    <Tag className="h-4 w-4 text-primary" />
                    <code className="bg-muted px-2 py-1 rounded font-mono font-semibold">{promo.code}</code>
                  </div>

{promo.min_order_amount && (
                    <p className="text-xs text-muted-foreground">Min. order: AED {promo.min_order_amount}</p>
                  )}

<div className="flex items-center gap-2 text-xs text-muted-foreground">
                    <Clock className="h-3 w-3" />
                    <span>Valid until {new Date(promo.valid_to).toLocaleDateString()}</span>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/(frontend)/page.tsx" isEdit="true" isMerged="true"
import { OffersSlider } from "@/components/offers-slider"
import { FeaturedCategories } from "@/components/featured-categories"
import { FeaturedProducts } from "@/components/featured-products"
import { TopVendors } from "@/components/top-vendors"
import { FeaturesSection } from "@/components/features-section"
import { PromotionsBanner } from "@/components/promotions-banner"

export default function HomePage() {
  return (
    <>
      <OffersSlider />
      <PromotionsBanner />
      <FeaturedCategories />
      <FeaturedProducts />
      <TopVendors />
      <FeaturesSection />
    </>
  )
}
[V0_FILE]typescriptreact:file="app/(frontend)/checkout/promo-code-input.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tag, X, Check } from "lucide-react"
import { validatePromoCode } from "@/app/(frontend)/actions/promotions"
import { useToast } from "@/hooks/use-toast"

interface PromoCodeInputProps {
  orderAmount: number
  onPromoApplied: (discount: number, promoId: string, promoCode: string) => void
  onPromoRemoved: () => void
}

export function PromoCodeInput({ orderAmount, onPromoApplied, onPromoRemoved }: PromoCodeInputProps) {
  const [promoCode, setPromoCode] = useState("")
  const [isValidating, setIsValidating] = useState(false)
  const [appliedPromo, setAppliedPromo] = useState<{
    code: string
    discount: number
    promoId: string
  } | null>(null)
  const { toast } = useToast()

const handleApplyPromo = async () => {
    if (!promoCode.trim()) {
      toast({
        title: "Error",
        description: "Please enter a promo code",
        variant: "destructive",
      })
      return
    }

setIsValidating(true)

try {
      const result = await validatePromoCode(promoCode, orderAmount)

if (result.success && result.discountAmount) {
        setAppliedPromo({
          code: promoCode.toUpperCase(),
          discount: result.discountAmount,
          promoId: result.promo!.id,
        })
        onPromoApplied(result.discountAmount, result.promo!.id, promoCode.toUpperCase())
        toast({
          title: "Promo code applied!",
          description: `You saved AED ${result.discountAmount.toFixed(2)}`,
        })
      } else {
        toast({
          title: "Invalid promo code",
          description: result.error || "This promo code is not valid",
          variant: "destructive",
        })
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "Failed to apply promo code",
        variant: "destructive",
      })
    } finally {
      setIsValidating(false)
    }
  }

const handleRemovePromo = () => {
    setAppliedPromo(null)
    setPromoCode("")
    onPromoRemoved()
    toast({
      title: "Promo code removed",
      description: "The discount has been removed from your order",
    })
  }

if (appliedPromo) {
    return (
      <div className="flex items-center justify-between p-3 bg-green-50 dark:bg-green-950/20 border border-green-200 dark:border-green-800 rounded-lg">
        <div className="flex items-center gap-2">
          <Check className="h-4 w-4 text-green-600" />
          <div>
            <p className="text-sm font-medium text-green-900 dark:text-green-100">
              Promo code applied: <code className="font-mono">{appliedPromo.code}</code>
            </p>
            <p className="text-xs text-green-700 dark:text-green-300">
              You saved AED {appliedPromo.discount.toFixed(2)}
            </p>
          </div>
        </div>
        <Button variant="ghost" size="sm" onClick={handleRemovePromo} className="h-8 w-8 p-0">
          <X className="h-4 w-4" />
        </Button>
      </div>
    )
  }

return (
    <div className="space-y-2">
      <Label htmlFor="promoCode" className="flex items-center gap-2">
        <Tag className="h-4 w-4" />
        Have a promo code?
      </Label>
      <div className="flex gap-2">
        <Input
          id="promoCode"
          value={promoCode}
          onChange={(e) => setPromoCode(e.target.value.toUpperCase())}
          placeholder="Enter promo code"
          className="flex-1"
          onKeyDown={(e) => {
            if (e.key === "Enter") {
              e.preventDefault()
              handleApplyPromo()
            }
          }}
        />
        <Button type="button" onClick={handleApplyPromo} disabled={isValidating} variant="secondary">
          {isValidating ? "Validating..." : "Apply"}
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/(frontend)/checkout/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import Image from "next/image"
import { useCart } from "@/lib/cart-context"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Checkbox } from "@/components/ui/checkbox"
import { ArrowLeft, CreditCard, Truck, MapPin, ShieldCheck, User, LogIn } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { createClient } from "@/lib/supabase/client"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { PromoCodeInput } from "./promo-code-input"

export default function CheckoutPage() {
  const router = useRouter()
  const { items, totalPrice, clearCart } = useCart()
  const { toast } = useToast()
  const [isProcessing, setIsProcessing] = useState(false)
  const [user, setUser] = useState<any>(null)
  const [isLoadingUser, setIsLoadingUser] = useState(true)
  const [checkoutAsGuest, setCheckoutAsGuest] = useState(false)

const [promoDiscount, setPromoDiscount] = useState(0)
  const [appliedPromoId, setAppliedPromoId] = useState<string | null>(null)
  const [appliedPromoCode, setAppliedPromoCode] = useState<string | null>(null)

useEffect(() => {
    const checkUser = async () => {
      try {
        const supabase = createClient()
        const {
          data: { user },
        } = await supabase.auth.getUser()
        setUser(user)
        if (user) {
          setCheckoutAsGuest(true)
        }
      } catch (error) {
        console.error("[v0] Error checking user:", error)
      } finally {
        setIsLoadingUser(false)
      }
    }
    checkUser()
  }, [])

const shippingCost = totalPrice > 200 ? 0 : 25
  const tax = totalPrice * 0.05
  const subtotalAfterPromo = totalPrice - promoDiscount
  const finalTotal = subtotalAfterPromo + shippingCost + tax

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

console.log("[v0] Submitting order...")

try {
      const shippingAddress = `${shippingInfo.fullName}, ${shippingInfo.email}, ${shippingInfo.phone}, ${shippingInfo.address}, ${shippingInfo.city}, ${shippingInfo.state}, ${shippingInfo.zipCode}, ${shippingInfo.country}`

const response = await fetch("/api/orders/create", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          totalAmount: finalTotal,
          shippingAddress,
          customerName: shippingInfo.fullName || "Guest",
          promoCode: appliedPromoCode,
          promoDiscount: promoDiscount,
          items: items.map((item) => ({
            id: item.id,
            quantity: item.quantity,
            price: item.price,
          })),
        }),
      })

const result = await response.json()

if (!result.success) {
        throw new Error(result.error || "Failed to create order")
      }

console.log("[v0] Order created successfully:", result.orderId)

if (appliedPromoId) {
        const { incrementPromoUsage } = await import("@/app/(frontend)/actions/promotions")
        await incrementPromoUsage(appliedPromoId)
      }

clearCart()

toast({
        title: "Order placed successfully!",
        description: `Your order #${result.orderId} has been confirmed.`,
      })

router.push(`/order-confirmation?orderId=${result.orderId}`)
    } catch (error) {
      console.error("[v0] Error creating order:", error)
      toast({
        title: "Order failed",
        description:
          error instanceof Error ? error.message : "There was an error placing your order. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsProcessing(false)
    }
  }

const [shippingInfo, setShippingInfo] = useState({
    fullName: "",
    email: "",
    phone: "",
    address: "",
    city: "",
    state: "",
    zipCode: "",
    country: "UAE",
  })

const [paymentMethod, setPaymentMethod] = useState("card")
  const [cardInfo, setCardInfo] = useState({
    cardNumber: "",
    cardName: "",
    expiryDate: "",
    cvv: "",
  })

const [saveInfo, setSaveInfo] = useState(false)

if (items.length === 0) {
    return (
      <div className="flex items-center justify-center py-16">
        <Card className="max-w-md w-full">
          <CardHeader>
            <CardTitle>Your cart is empty</CardTitle>
            <CardDescription>Add some items to your cart before checking out.</CardDescription>
          </CardHeader>
          <CardContent>
            <Button asChild className="w-full">
              <Link href="/">Continue Shopping</Link>
            </Button>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="bg-muted/30">
      <div className="container mx-auto px-4 py-8">
        <Button variant="ghost" asChild className="mb-6">
          <Link href="/cart">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Cart
          </Link>
        </Button>

{!isLoadingUser && !user && !checkoutAsGuest && (
          <Card className="mb-6 border-primary/20">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <User className="h-5 w-5" />
                Checkout Options
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <Alert>
                <AlertDescription>
                  You can checkout as a guest or login to save your information for faster checkout next time.
                </AlertDescription>
              </Alert>
              <div className="flex flex-col sm:flex-row gap-3">
                <Button asChild variant="outline" className="flex-1 bg-transparent">
                  <Link href={`/login?redirect=/checkout`}>
                    <LogIn className="mr-2 h-4 w-4" />
                    Login to Your Account
                  </Link>
                </Button>
                <Button onClick={() => setCheckoutAsGuest(true)} className="flex-1">
                  <User className="mr-2 h-4 w-4" />
                  Continue as Guest
                </Button>
              </div>
            </CardContent>
          </Card>
        )}

{(checkoutAsGuest || user) && (
          <div className="grid lg:grid-cols-3 gap-8">
            <div className="lg:col-span-2 space-y-6">
              {user && (
                <Alert className="bg-primary/5 border-primary/20">
                  <User className="h-4 w-4" />
                  <AlertDescription>
                    Logged in as <strong>{user.email}</strong>
                  </AlertDescription>
                </Alert>
              )}
              {!user && checkoutAsGuest && (
                <Alert>
                  <AlertDescription>
                    Checking out as guest. You can{" "}
                    <Link href={`/login?redirect=/checkout`} className="underline font-medium">
                      login here
                    </Link>{" "}
                    to save your information.
                  </AlertDescription>
                </Alert>
              )}

<form onSubmit={handleSubmit} className="space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Truck className="h-5 w-5" />
                      Shipping Information
                    </CardTitle>
                    <CardDescription>Enter your delivery address</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="grid md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="fullName">Full Name *</Label>
                        <Input
                          id="fullName"
                          required
                          value={shippingInfo.fullName}
                          onChange={(e) => setShippingInfo({ ...shippingInfo, fullName: e.target.value })}
                          placeholder="John Doe"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="email">Email *</Label>
                        <Input
                          id="email"
                          type="email"
                          required
                          value={shippingInfo.email}
                          onChange={(e) => setShippingInfo({ ...shippingInfo, email: e.target.value })}
                          placeholder="john@example.com"
                        />
                      </div>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="phone">Phone Number *</Label>
                      <Input
                        id="phone"
                        type="tel"
                        required
                        value={shippingInfo.phone}
                        onChange={(e) => setShippingInfo({ ...shippingInfo, phone: e.target.value })}
                        placeholder="+971 50 123 4567"
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="address">Street Address *</Label>
                      <Input
                        id="address"
                        required
                        value={shippingInfo.address}
                        onChange={(e) => setShippingInfo({ ...shippingInfo, address: e.target.value })}
                        placeholder="123 Main Street, Apt 4B"
                      />
                    </div>

<div className="grid md:grid-cols-3 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="city">City *</Label>
                        <Input
                          id="city"
                          required
                          value={shippingInfo.city}
                          onChange={(e) => setShippingInfo({ ...shippingInfo, city: e.target.value })}
                          placeholder="Dubai"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="state">State/Emirate *</Label>
                        <Input
                          id="state"
                          required
                          value={shippingInfo.state}
                          onChange={(e) => setShippingInfo({ ...shippingInfo, state: e.target.value })}
                          placeholder="Dubai"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="zipCode">ZIP Code</Label>
                        <Input
                          id="zipCode"
                          value={shippingInfo.zipCode}
                          onChange={(e) => setShippingInfo({ ...shippingInfo, zipCode: e.target.value })}
                          placeholder="12345"
                        />
                      </div>
                    </div>

<div className="flex items-center space-x-2">
                      <Checkbox
                        id="saveInfo"
                        checked={saveInfo}
                        onCheckedChange={(checked) => setSaveInfo(!!checked)}
                      />
                      <Label htmlFor="saveInfo" className="text-sm font-normal cursor-pointer">
                        Save this information for next time
                      </Label>
                    </div>
                  </CardContent>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <CreditCard className="h-5 w-5" />
                      Payment Method
                    </CardTitle>
                    <CardDescription>Select your preferred payment method</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <RadioGroup value={paymentMethod} onValueChange={setPaymentMethod}>
                      <div className="flex items-center space-x-2 border rounded-lg p-4">
                        <RadioGroupItem value="card" id="card" />
                        <Label htmlFor="card" className="flex-1 cursor-pointer">
                          <div className="flex items-center gap-2">
                            <CreditCard className="h-4 w-4" />
                            <span>Credit/Debit Card</span>
                          </div>
                        </Label>
                      </div>
                      <div className="flex items-center space-x-2 border rounded-lg p-4">
                        <RadioGroupItem value="cod" id="cod" />
                        <Label htmlFor="cod" className="flex-1 cursor-pointer">
                          <div className="flex items-center gap-2">
                            <Truck className="h-4 w-4" />
                            <span>Cash on Delivery</span>
                          </div>
                        </Label>
                      </div>
                    </RadioGroup>

{paymentMethod === "card" && (
                      <div className="space-y-4 pt-4">
                        <div className="space-y-2">
                          <Label htmlFor="cardNumber">Card Number *</Label>
                          <Input
                            id="cardNumber"
                            required={paymentMethod === "card"}
                            value={cardInfo.cardNumber}
                            onChange={(e) => setCardInfo({ ...cardInfo, cardNumber: e.target.value })}
                            placeholder="1234 5678 9012 3456"
                            maxLength={19}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="cardName">Cardholder Name *</Label>
                          <Input
                            id="cardName"
                            required={paymentMethod === "card"}
                            value={cardInfo.cardName}
                            onChange={(e) => setCardInfo({ ...cardInfo, cardName: e.target.value })}
                            placeholder="John Doe"
                          />
                        </div>
                        <div className="grid grid-cols-2 gap-4">
                          <div className="space-y-2">
                            <Label htmlFor="expiryDate">Expiry Date *</Label>
                            <Input
                              id="expiryDate"
                              required={paymentMethod === "card"}
                              value={cardInfo.expiryDate}
                              onChange={(e) => setCardInfo({ ...cardInfo, expiryDate: e.target.value })}
                              placeholder="MM/YY"
                              maxLength={5}
                            />
                          </div>
                          <div className="space-y-2">
                            <Label htmlFor="cvv">CVV *</Label>
                            <Input
                              id="cvv"
                              required={paymentMethod === "card"}
                              value={cardInfo.cvv}
                              onChange={(e) => setCardInfo({ ...cardInfo, cvv: e.target.value })}
                              placeholder="123"
                              maxLength={4}
                            />
                          </div>
                        </div>
                      </div>
                    )}

<div className="flex items-center gap-2 p-3 bg-muted rounded-lg text-sm">
                      <ShieldCheck className="h-4 w-4 text-green-600" />
                      <span className="text-muted-foreground">Your payment information is secure and encrypted</span>
                    </div>
                  </CardContent>
                </Card>

<Button type="submit" size="lg" className="w-full" disabled={isProcessing}>
                  {isProcessing ? "Processing..." : `Place Order - AED ${finalTotal.toFixed(2)}`}
                </Button>
              </form>
            </div>

<div className="lg:col-span-1">
              <Card className="sticky top-4">
                <CardHeader>
                  <CardTitle>Order Summary</CardTitle>
                  <CardDescription>{items.length} items</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-3 max-h-64 overflow-y-auto">
                    {items.map((item) => (
                      <div key={item.id} className="flex gap-3">
                        <div className="relative w-16 h-16 rounded-md overflow-hidden bg-muted flex-shrink-0">
                          <Image src={item.image || "/placeholder.svg"} alt={item.name} fill className="object-cover" />
                        </div>
                        <div className="flex-1 min-w-0">
                          <p className="text-sm font-medium truncate">{item.name}</p>
                          <p className="text-xs text-muted-foreground">Qty: {item.quantity}</p>
                          <p className="text-sm font-semibold">AED {(item.price * item.quantity).toFixed(2)}</p>
                        </div>
                      </div>
                    ))}
                  </div>

<PromoCodeInput
                    orderAmount={totalPrice}
                    onPromoApplied={(discount, promoId, promoCode) => {
                      setPromoDiscount(discount)
                      setAppliedPromoId(promoId)
                      setAppliedPromoCode(promoCode)
                    }}
                    onPromoRemoved={() => {
                      setPromoDiscount(0)
                      setAppliedPromoId(null)
                      setAppliedPromoCode(null)
                    }}
                  />

<div className="space-y-2">
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">Subtotal</span>
                      <span>AED {totalPrice.toFixed(2)}</span>
                    </div>
                    {promoDiscount > 0 && (
                      <div className="flex justify-between text-sm text-green-600">
                        <span>Promo Discount</span>
                        <span>-AED {promoDiscount.toFixed(2)}</span>
                      </div>
                    )}
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">Shipping</span>
                      <span>{shippingCost === 0 ? "FREE" : `AED ${shippingCost.toFixed(2)}`}</span>
                    </div>
                    {shippingCost > 0 && (
                      <p className="text-xs text-muted-foreground">
                        Add AED {(200 - totalPrice).toFixed(2)} more for free shipping
                      </p>
                    )}
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">Tax (5%)</span>
                      <span>AED {tax.toFixed(2)}</span>
                    </div>
                    <Separator />
                    <div className="flex justify-between text-base font-bold">
                      <span>Total</span>
                      <span>AED {finalTotal.toFixed(2)}</span>
                    </div>
                  </div>

<div className="pt-4 space-y-2">
                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
                      <ShieldCheck className="h-4 w-4 text-green-600" />
                      <span>Secure checkout</span>
                    </div>
                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
                      <Truck className="h-4 w-4 text-blue-600" />
                      <span>Fast delivery</span>
                    </div>
                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
                      <MapPin className="h-4 w-4 text-orange-600" />
                      <span>Track your order</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/022_add_promo_increment_function.sql" isMerged="true"
-- Create function to increment promo usage count
CREATE OR REPLACE FUNCTION increment_promo_usage(promo_id UUID)
RETURNS void
LANGUAGE plpgsql
SECURITY DEFINER
AS $$
BEGIN
  UPDATE promotions
  SET used_count = used_count + 1
  WHERE id = promo_id;
END;
$$;

-- Grant execute permission
GRANT EXECUTE ON FUNCTION increment_promo_usage(UUID) TO authenticated;
GRANT EXECUTE ON FUNCTION increment_promo_usage(UUID) TO anon;
[V0_FILE]typescript:file="app/(frontend)/actions/promotions.ts" isEdit="true" isQuickEdit="true" isMerged="true"
"use server"

import { getAdminClient } from "@/lib/supabase/server"

export async function getActivePromotions() {
  try {
    const supabase = await getAdminClient()
    const now = new Date().toISOString()

const { data, error } = await supabase
      .from("promotions")
      .select("*")
      .eq("is_active", true)
      .lte("valid_from", now)
      .gte("valid_to", now)
      .order("created_at", { ascending: false })
      .limit(5)

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

return { success: true, promotions: data || [] }
  } catch (error) {
    console.error("[v0] Error in getActivePromotions:", error)
    return { success: false, promotions: [] }
  }
}

export async function validatePromoCode(code: string, orderAmount: number) {
  try {
    const supabase = await getAdminClient()
    const now = new Date().toISOString()

// Fetch the promo code
    const { data: promo, error } = await supabase
      .from("promotions")
      .select("*")
      .eq("code", code.toUpperCase())
      .eq("is_active", true)
      .lte("valid_from", now)
      .gte("valid_to", now)
      .single()

if (error || !promo) {
      return {
        success: false,
        error: "Invalid or expired promo code",
      }
    }

// Check usage limit
    if (promo.usage_limit && promo.used_count >= promo.usage_limit) {
      return {
        success: false,
        error: "This promo code has reached its usage limit",
      }
    }

// Check minimum order amount
    if (promo.min_order_amount && orderAmount < promo.min_order_amount) {
      return {
        success: false,
        error: `Minimum order amount of AED ${promo.min_order_amount} required`,
      }
    }

// Calculate discount
    let discountAmount = 0
    if (promo.discount_type === "percentage") {
      discountAmount = (orderAmount * promo.discount_value) / 100
      // Apply max discount cap if set
      if (promo.max_discount_amount && discountAmount > promo.max_discount_amount) {
        discountAmount = promo.max_discount_amount
      }
    } else {
      // Fixed discount
      discountAmount = promo.discount_value
    }

// Ensure discount doesn't exceed order amount
    discountAmount = Math.min(discountAmount, orderAmount)

return {
      success: true,
      promo: {
        id: promo.id,
        code: promo.code,
        name: promo.name,
        discount_type: promo.discount_type,
        discount_value: promo.discount_value,
      },
      discountAmount,
    }
  } catch (error) {
    console.error("[v0] Error validating promo code:", error)
    return {
      success: false,
      error: "Failed to validate promo code",
    }
  }
}

export async function incrementPromoUsage(promoId: string) {
  try {
    const supabase = await getAdminClient()

// Fetch current promo data
    const { data: promo, error: fetchError } = await supabase
      .from("promotions")
      .select("used_count")
      .eq("id", promoId)
      .single()

if (fetchError || !promo) {
      console.error("[v0] Error fetching promo:", fetchError)
      return { success: false }
    }

// Increment the used_count
    const { error: updateError } = await supabase
      .from("promotions")
      .update({ used_count: (promo.used_count || 0) + 1 })
      .eq("id", promoId)

if (updateError) {
      console.error("[v0] Error incrementing promo usage:", updateError)
      return { success: false }
    }

return { success: true }
  } catch (error) {
    console.error("[v0] Error in incrementPromoUsage:", error)
    return { success: false }
  }
}
[V0_FILE]markdown:file="docs/EMAIL_SETUP.md" isEdit="true" isQuickEdit="true" isMerged="true"
# Email Setup Guide

This guide explains how to set up email functionality for TradeGateStore using Resend.

## Overview

The application uses [Resend](https://resend.com) for sending transactional emails including:
- Order confirmations
- Welcome emails for new users
- Notification emails
- Promotional emails

## Setup Steps

### 1. Create a Resend Account

1. Go to [resend.com](https://resend.com) and sign up for a free account
2. The free tier includes 3,000 emails per month and 100 emails per day

### 2. Get Your API Key

1. Log in to your Resend dashboard
2. Navigate to **API Keys** in the sidebar
3. Click **Create API Key**
4. Give it a name (e.g., "TradeGateStore Production")
5. Copy the API key (it starts with `re_`)

### 3. Configure Environment Variables

Add the following to your `.env.local` file:

\`\`\`bash
# Resend API Key
RESEND_API_KEY=re_your_actual_api_key_here

# Email Configuration
EMAIL_FROM=TradeGateStore <noreply@tradegatestore.com>
EMAIL_REPLY_TO=support@tradegatestore.com
NEXT_PUBLIC_APP_URL=https://yourdomain.com
\`\`\`

### 4. Verify Your Domain (Production)

**For Development/Testing:**
You can use Resend's test email address without any domain verification:
- The system defaults to `onboarding@resend.dev` as the sender
- This works immediately without any setup
- Perfect for testing order confirmations and notifications

**For Production:**
To use your own domain (e.g., `noreply@tradegatestore.com`), you need to verify it:

1. In Resend dashboard, go to **Domains**
2. Click **Add Domain**
3. Enter your domain (e.g., `tradegatestore.com`)
4. Add the provided DNS records to your domain registrar:
   - SPF record
   - DKIM record
   - DMARC record (optional but recommended)
5. Wait for verification (usually takes a few minutes to a few hours)
6. Once verified, update your `EMAIL_FROM` environment variable

## Email Templates

The application includes the following email templates in `lib/email.ts`:

### 1. Order Confirmation Email
Sent automatically when a customer places an order.

**Includes:**
- Order ID and total amount
- List of items ordered
- Shipping address
- Next steps information

### 2. Welcome Email
Sent when a new user signs up (can be triggered manually).

**Includes:**
- Welcome message
- Getting started tips
- Call-to-action button

### 3. Notification Email
Sent when admins create and send notifications.

**Includes:**
- Notification title and message
- Color-coded by type (info, warning, success, error)
- Automated notification disclaimer

### 4. Promotional Email
Sent for marketing campaigns with promo codes.

**Includes:**
- Promotion title and description
- Promo code display
- Discount amount
- Expiration date
- Shop now button

## Testing Emails

### Development Testing

In development, emails are sent to the console and to the actual recipient if configured:

\`\`\`typescript
// Check console logs for email sending status
console.log('[v0] Sending email to:', email)
console.log('[v0] Email sent successfully:', data?.id)
\`\`\`

### Production Testing

1. Use Resend's test mode to send emails without affecting your quota
2. Check the Resend dashboard for email delivery status
3. View email logs and analytics

## Email Functions

### Send Order Confirmation

\`\`\`typescript
import { sendOrderConfirmationEmail } from '@/lib/email'

await sendOrderConfirmationEmail('customer@example.com', {
  orderId: 'ORD-12345',
  customerName: 'John Doe',
  orderTotal: 299.99,
  items: [
    { name: 'Product 1', quantity: 2, price: 99.99 },
    { name: 'Product 2', quantity: 1, price: 100.01 }
  ],
  shippingAddress: 'John Doe, john@example.com, +971501234567, ...'
})
\`\`\`

### Send Welcome Email

\`\`\`typescript
import { sendWelcomeEmail } from '@/lib/email'

await sendWelcomeEmail('newuser@example.com', 'John Doe')
\`\`\`

### Send Notification Email

\`\`\`typescript
import { sendNotificationEmail } from '@/lib/email'

await sendNotificationEmail('user@example.com', {
  title: 'Important Update',
  message: 'Your order has been shipped!',
  type: 'info' // 'info' | 'warning' | 'success' | 'error'
})
\`\`\`

### Send Promotional Email

\`\`\`typescript
import { sendPromotionalEmail } from '@/lib/email'

await sendPromotionalEmail('customer@example.com', {
  title: 'Flash Sale - 50% Off!',
  description: 'Limited time offer on all electronics',
  code: 'FLASH50',
  discountValue: 50,
  discountType: 'percentage',
  validUntil: '2025-12-31'
})
\`\`\`

## Troubleshooting

### Emails Not Sending

1. **Check API Key**: Ensure `RESEND_API_KEY` is set correctly
2. **Verify Domain**: For production, make sure your domain is verified
3. **Check Logs**: Look for error messages in console logs
4. **Rate Limits**: Free tier has 100 emails/day limit

### Emails Going to Spam

1. **Verify Domain**: Use a verified domain instead of test domain
2. **SPF/DKIM**: Ensure DNS records are properly configured
3. **Content**: Avoid spam trigger words in email content
4. **Sender Reputation**: Build sender reputation gradually

### Email Delivery Issues

1. **Check Resend Dashboard**: View delivery status and logs
2. **Recipient Email**: Ensure email address is valid
3. **Bounce Handling**: Check for bounced emails in dashboard
4. **Rate Limiting**: Respect Resend's rate limits

### Domain Not Verified Error

If you see an error like "The tradegatestore.com domain is not verified":

**Quick Fix (Development):**
1. Remove or update the `EMAIL_FROM` environment variable to use the test email:
   \`\`\`bash
   EMAIL_FROM=TradeGateStore <onboarding@resend.dev>
   \`\`\`
2. Restart your development server
3. Emails will now send successfully using Resend's test domain

**Production Fix:**
1. Go to [resend.com/domains](https://resend.com/domains)
2. Add and verify your domain following the steps above
3. Once verified, you can use your custom domain in `EMAIL_FROM`

## Best Practices

1. **Error Handling**: Always wrap email sending in try-catch blocks
2. **Async Operations**: Don't block order creation if email fails
3. **Logging**: Log email sending attempts and results
4. **Testing**: Test emails thoroughly before production
5. **Monitoring**: Monitor email delivery rates in Resend dashboard
6. **Unsubscribe**: Add unsubscribe links for promotional emails
7. **Personalization**: Use customer names and relevant data

## Support

- **Resend Documentation**: [resend.com/docs](https://resend.com/docs)
- **Resend Support**: [resend.com/support](https://resend.com/support)
- **TradeGateStore Support**: support@tradegatestore.com
[V0_FILE]shellscript:file=".env.example" isEdit="true" isMerged="true"
# Supabase Configuration
# Get these values from your Supabase project settings: https://supabase.com/dashboard/project/_/settings/api

# Supabase URL (required for both client and server)
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url

# Supabase Anon Key (required for both client and server)
# Note: This key is safe to expose publicly as it's protected by Row Level Security
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

# Site URL for email redirects (optional, defaults to window.location.origin in production)
NEXT_PUBLIC_SITE_URL=http://localhost:3000

# Supabase Service Role Key (optional, only needed for admin operations)
# WARNING: Keep this secret! Never expose to the client
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

# Resend API Key - Get from https://resend.com/api-keys
# Sign up for free at https://resend.com (3,000 emails/month free)
RESEND_API_KEY=re_your_resend_api_key

# Email Configuration
# For development/testing with Resend free tier, use: onboarding@resend.dev
# For production, verify your domain and use: TradeGateStore <noreply@yourdomain.com>
EMAIL_FROM=onboarding@resend.dev

# Reply-to email address for customer responses
EMAIL_REPLY_TO=support@tradegatestore.com

# Application URL for email links
NEXT_PUBLIC_APP_URL=http://localhost:3000

# When using onboarding@resend.dev, all emails will be redirected to this address
# This should be the email address associated with your Resend account
RESEND_TEST_EMAIL=tradegatestores@gmail.com

EMAIL_ENABLED=true

# Admin JWT Secret for admin authentication
ADMIN_JWT_SECRET=your_admin_jwt_secret_key_here
[V0_FILE]typescript:file="app/(frontend)/actions/orders.ts" isMerged="true"
"use server"

import { createClient } from "@/lib/supabase/server"

export async function getOrderById(orderId: string) {
  try {
    const supabase = await createClient()

const { data: order, error: orderError } = await supabase.from("orders").select("*").eq("id", orderId).single()

if (orderError || !order) {
      console.error("[v0] Error fetching order:", orderError)
      return { success: false, error: "Order not found" }
    }

// Fetch order items
    const { data: orderItems, error: itemsError } = await supabase
      .from("order_items")
      .select(`
        *,
        products (
          id,
          name,
          thumbnail_url
        )
      `)
      .eq("order_id", orderId)

if (itemsError) {
      console.error("[v0] Error fetching order items:", itemsError)
      return { success: false, error: "Failed to fetch order items" }
    }

// Format the order data
    const formattedOrder = {
      orderId: order.id,
      orderDate: order.created_at,
      status: order.status,
      total: order.total_amount,
      shippingAddress: order.shipping_address,
      customerName: order.customer_name,
      items:
        orderItems?.map((item: any) => ({
          id: item.product_id,
          name: item.products?.name || "Unknown Product",
          image: item.products?.thumbnail_url || "/placeholder.svg",
          quantity: item.quantity,
          price: item.price,
        })) || [],
    }

return { success: true, order: formattedOrder }
  } catch (error) {
    console.error("[v0] Error in getOrderById:", error)
    return { success: false, error: "Failed to fetch order" }
  }
}

export async function getUserOrders(userId: string) {
  try {
    const supabase = await createClient()

// Fetch user's orders
    const { data: orders, error: ordersError } = await supabase
      .from("orders")
      .select("*")
      .eq("user_id", userId)
      .order("created_at", { ascending: false })

if (ordersError) {
      console.error("[v0] Error fetching orders:", ordersError)
      return { success: false, error: "Failed to fetch orders" }
    }

// Fetch order items for each order
    const ordersWithItems = await Promise.all(
      (orders || []).map(async (order) => {
        const { data: orderItems } = await supabase
          .from("order_items")
          .select(`
            *,
            products (
              id,
              name,
              thumbnail_url
            )
          `)
          .eq("order_id", order.id)

return {
          orderId: order.id,
          orderDate: order.created_at,
          status: order.status,
          total: order.total_amount,
          items:
            orderItems?.map((item: any) => ({
              id: item.product_id,
              name: item.products?.name || "Unknown Product",
              image: item.products?.thumbnail_url || "/placeholder.svg",
              quantity: item.quantity,
              price: item.price,
            })) || [],
        }
      }),
    )

return { success: true, orders: ordersWithItems }
  } catch (error) {
    console.error("[v0] Error in getUserOrders:", error)
    return { success: false, error: "Failed to fetch orders" }
  }
}
[V0_FILE]typescriptreact:file="app/(frontend)/order-confirmation/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState, Suspense } from "react"
import { useSearchParams } from "next/navigation"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { CheckCircle2, Package, Truck, MapPin, Loader2 } from "lucide-react"
import { getOrderById } from "@/app/(frontend)/actions/orders"

function OrderConfirmationContent() {
  const searchParams = useSearchParams()
  const orderId = searchParams.get("orderId")
  const [order, setOrder] = useState<any>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    async function fetchOrder() {
      if (!orderId) {
        setError("No order ID provided")
        setLoading(false)
        return
      }

console.log("[v0] Fetching order:", orderId)

const result = await getOrderById(orderId)

if (result.success && result.order) {
        console.log("[v0] Order fetched successfully:", result.order)
        setOrder(result.order)
      } else {
        console.error("[v0] Failed to fetch order:", result.error)
        setError(result.error || "Failed to fetch order")
      }

setLoading(false)
    }

fetchOrder()
  }, [orderId])

if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <Card className="max-w-md w-full">
          <CardContent className="pt-6">
            <div className="flex flex-col items-center gap-4">
              <Loader2 className="h-8 w-8 animate-spin text-primary" />
              <p className="text-muted-foreground">Loading order details...</p>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

if (error || !order) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <Card className="max-w-md w-full">
          <CardHeader>
            <CardTitle>Order not found</CardTitle>
            <CardDescription>{error || "We couldn't find the order you're looking for."}</CardDescription>
          </CardHeader>
          <CardContent>
            <Button asChild className="w-full">
              <Link href="/">Return to Home</Link>
            </Button>
          </CardContent>
        </Card>
      </div>
    )
  }

const shippingParts = order.shippingAddress?.split(", ") || []
  const shippingInfo = {
    fullName: shippingParts[0] || order.customerName || "N/A",
    email: shippingParts[1] || "N/A",
    phone: shippingParts[2] || "N/A",
    address: shippingParts[3] || "N/A",
    city: shippingParts[4] || "N/A",
    state: shippingParts[5] || "N/A",
    zipCode: shippingParts[6] || "",
    country: shippingParts[7] || "UAE",
  }

const subtotal = order.items.reduce((sum: number, item: any) => sum + item.price * item.quantity, 0)
  const shipping = subtotal > 200 ? 0 : 25
  const tax = subtotal * 0.05
  const total = order.total

return (
    <div className="min-h-screen bg-muted/30">
      {/* Header */}
      <header className="border-b bg-background">
        <div className="container mx-auto px-4 py-4">
          <Link href="/" className="flex items-center gap-2 text-primary font-bold text-xl">
            <Image src="/logo.png" alt="TradeGateStore" width={32} height={32} />
            TradeGateStore
          </Link>
        </div>
      </header>

<div className="container mx-auto px-4 py-12">
        <div className="max-w-3xl mx-auto space-y-8">
          {/* Success Message */}
          <Card className="border-green-200 bg-green-50/50">
            <CardContent className="pt-6">
              <div className="flex flex-col items-center text-center space-y-4">
                <div className="rounded-full bg-green-100 p-3">
                  <CheckCircle2 className="h-12 w-12 text-green-600" />
                </div>
                <div>
                  <h1 className="text-2xl font-bold text-green-900">Order Confirmed!</h1>
                  <p className="text-green-700 mt-2">
                    Thank you for your purchase. Your order has been successfully placed.
                  </p>
                </div>
                <div className="bg-white rounded-lg p-4 border border-green-200">
                  <p className="text-sm text-muted-foreground">Order Number</p>
                  <p className="text-xl font-bold text-green-900">{order.orderId}</p>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Order Details */}
          <Card>
            <CardHeader>
              <CardTitle>Order Details</CardTitle>
              <CardDescription>Review your order information</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              {/* Items */}
              <div>
                <h3 className="font-semibold mb-3 flex items-center gap-2">
                  <Package className="h-4 w-4" />
                  Items Ordered
                </h3>
                <div className="space-y-3">
                  {order.items.map((item: any) => (
                    <div key={item.id} className="flex gap-4 p-3 bg-muted/50 rounded-lg">
                      <div className="relative w-16 h-16 rounded-md overflow-hidden bg-background flex-shrink-0">
                        <Image src={item.image || "/placeholder.svg"} alt={item.name} fill className="object-cover" />
                      </div>
                      <div className="flex-1">
                        <p className="font-medium">{item.name}</p>
                        <p className="text-sm text-muted-foreground">
                          Qty: {item.quantity} × AED {item.price.toFixed(2)}
                        </p>
                        <p className="text-sm font-semibold mt-1">AED {(item.price * item.quantity).toFixed(2)}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

{/* Shipping Address */}
              <div>
                <h3 className="font-semibold mb-3 flex items-center gap-2">
                  <MapPin className="h-4 w-4" />
                  Shipping Address
                </h3>
                <div className="bg-muted/50 p-4 rounded-lg space-y-1">
                  <p className="font-medium">{shippingInfo.fullName}</p>
                  <p className="text-sm text-muted-foreground">{shippingInfo.address}</p>
                  <p className="text-sm text-muted-foreground">
                    {shippingInfo.city}, {shippingInfo.state} {shippingInfo.zipCode}
                  </p>
                  <p className="text-sm text-muted-foreground">{shippingInfo.country}</p>
                  <p className="text-sm text-muted-foreground mt-2">
                    <span className="font-medium">Email:</span> {shippingInfo.email}
                  </p>
                  <p className="text-sm text-muted-foreground">
                    <span className="font-medium">Phone:</span> {shippingInfo.phone}
                  </p>
                </div>
              </div>

{/* Payment Summary */}
              <div>
                <h3 className="font-semibold mb-3">Payment Summary</h3>
                <div className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">Subtotal</span>
                    <span>AED {subtotal.toFixed(2)}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">Shipping</span>
                    <span>{shipping === 0 ? "FREE" : `AED ${shipping.toFixed(2)}`}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">Tax</span>
                    <span>AED {tax.toFixed(2)}</span>
                  </div>
                  <Separator />
                  <div className="flex justify-between text-lg font-bold">
                    <span>Total Paid</span>
                    <span>AED {total.toFixed(2)}</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Next Steps */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Truck className="h-5 w-5" />
                What's Next?
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-3">
                <div className="flex gap-3">
                  <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold">
                    1
                  </div>
                  <div>
                    <p className="font-medium">Order Confirmation Email</p>
                    <p className="text-sm text-muted-foreground">
                      We've sent a confirmation email to {shippingInfo.email}
                    </p>
                  </div>
                </div>
                <div className="flex gap-3">
                  <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold">
                    2
                  </div>
                  <div>
                    <p className="font-medium">Processing Your Order</p>
                    <p className="text-sm text-muted-foreground">
                      Your order is being prepared for shipment. This usually takes 1-2 business days.
                    </p>
                  </div>
                </div>
                <div className="flex gap-3">
                  <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold">
                    3
                  </div>
                  <div>
                    <p className="font-medium">Track Your Shipment</p>
                    <p className="text-sm text-muted-foreground">
                      Once shipped, you'll receive tracking information via email.
                    </p>
                  </div>
                </div>
              </div>

<div className="flex flex-col sm:flex-row gap-3 pt-4">
                <Button asChild className="flex-1">
                  <Link href="/">Continue Shopping</Link>
                </Button>
                <Button variant="outline" asChild className="flex-1 bg-transparent">
                  <Link href="/orders">View All Orders</Link>
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}

export default function OrderConfirmationPage() {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen flex items-center justify-center">
          <Loader2 className="h-8 w-8 animate-spin text-primary" />
        </div>
      }
    >
      <OrderConfirmationContent />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/(frontend)/order-confirmation/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="lib/email.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Resend } from "resend"

const resend = new Resend(process.env.RESEND_API_KEY)

// Email configuration
const EMAIL_FROM = process.env.EMAIL_FROM || "onboarding@resend.dev"
const EMAIL_ENABLED = process.env.EMAIL_ENABLED !== "false"
const RESEND_ACCOUNT_EMAIL = "tradegatestores@gmail.com"
const RESEND_TEST_EMAIL = process.env.RESEND_TEST_EMAIL || RESEND_ACCOUNT_EMAIL

// Check if we're using the test email address (onboarding@resend.dev)
const isTestMode = EMAIL_FROM.includes("onboarding@resend.dev")

if (isTestMode && RESEND_TEST_EMAIL !== RESEND_ACCOUNT_EMAIL) {
  console.warn(
    `[v0] WARNING: RESEND_TEST_EMAIL is set to "${RESEND_TEST_EMAIL}" but should be "${RESEND_ACCOUNT_EMAIL}" for test mode to work`,
  )
}

interface OrderConfirmationData {
  orderId: string
  customerName: string
  orderTotal: number
  items: Array<{
    name: string
    quantity: number
    price: number
  }>
  shippingAddress: string
}

export async function sendOrderConfirmationEmail(to: string, data: OrderConfirmationData) {
  if (!EMAIL_ENABLED) {
    console.log("[v0] Email disabled, skipping order confirmation email")
    return { success: true, message: "Email disabled" }
  }

try {
    let actualRecipient = to
    const emailSubject = `Order Confirmation - #${data.orderId}`
    let testModeNotice = ""

if (isTestMode) {
      actualRecipient = RESEND_ACCOUNT_EMAIL
      console.log(`[v0] Test mode: Redirecting email from ${to} to ${actualRecipient}`)
      testModeNotice = `
        <div style="background-color: #fef3c7; border: 1px solid #f59e0b; padding: 12px; margin-bottom: 20px; border-radius: 4px;">
          <strong>⚠️ Test Mode:</strong> This email was originally intended for <strong>${to}</strong>
          <br/>
          <small>To send to real recipients, verify your domain at resend.com/domains</small>
        </div>
      `
    }

console.log(`[v0] Sending email to: ${actualRecipient}`)

const { data: emailData, error } = await resend.emails.send({
      from: EMAIL_FROM,
      to: actualRecipient,
      subject: emailSubject,
      html: `
        <!DOCTYPE html>
        <html>
          <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
          </head>
          <body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 600px; margin: 0 auto; padding: 20px;">
            ${testModeNotice}
            
            <div style="background-color: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 20px;">
              <h1 style="color: #2563eb; margin: 0 0 10px 0;">Order Confirmation</h1>
              <p style="margin: 0; color: #666;">Thank you for your order!</p>
            </div>

<div style="background-color: white; padding: 20px; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 20px;">
              <h2 style="color: #1f2937; margin-top: 0;">Order Details</h2>
              <p><strong>Order ID:</strong> #${data.orderId}</p>
              <p><strong>Customer:</strong> ${data.customerName}</p>
              <p><strong>Shipping Address:</strong><br/>${data.shippingAddress.replace(/,/g, "<br/>")}</p>
            </div>

<div style="background-color: white; padding: 20px; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 20px;">
              <h2 style="color: #1f2937; margin-top: 0;">Order Items</h2>
              <table style="width: 100%; border-collapse: collapse;">
                <thead>
                  <tr style="border-bottom: 2px solid #e5e7eb;">
                    <th style="text-align: left; padding: 10px;">Item</th>
                    <th style="text-align: center; padding: 10px;">Qty</th>
                    <th style="text-align: right; padding: 10px;">Price</th>
                  </tr>
                </thead>
                <tbody>
                  ${data.items
                    .map(
                      (item) => `
                    <tr style="border-bottom: 1px solid #e5e7eb;">
                      <td style="padding: 10px;">${item.name}</td>
                      <td style="text-align: center; padding: 10px;">${item.quantity}</td>
                      <td style="text-align: right; padding: 10px;">AED ${item.price.toFixed(2)}</td>
                    </tr>
                  `,
                    )
                    .join("")}
                </tbody>
                <tfoot>
                  <tr>
                    <td colspan="2" style="text-align: right; padding: 15px 10px; font-weight: bold;">Total:</td>
                    <td style="text-align: right; padding: 15px 10px; font-weight: bold; color: #2563eb;">AED ${data.orderTotal.toFixed(2)}</td>
                  </tr>
                </tfoot>
              </table>
            </div>

<div style="background-color: #f8f9fa; padding: 15px; border-radius: 8px; text-align: center;">
              <p style="margin: 0; color: #666;">Questions? Contact us at <a href="tel:+971501042523" style="color: #2563eb;">+971 50 104 2523</a></p>
            </div>

<div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #e5e7eb; text-align: center; color: #666; font-size: 12px;">
              <p>© ${new Date().getFullYear()} TradeGateStore. All rights reserved.</p>
            </div>
          </body>
        </html>
      `,
    })

if (error) {
      console.error("[v0] Error sending email:", error.message)
      throw new Error(error.message)
    }

console.log("[v0] Email sent successfully:", emailData?.id)
    return { success: true, emailId: emailData?.id }
  } catch (error) {
    console.error("[v0] Failed to send email:", error)
    throw error
  }
}

export async function sendNotificationEmail(to: string, subject: string, message: string, type = "info") {
  if (!EMAIL_ENABLED) {
    console.log("[v0] Email disabled, skipping notification email")
    return { success: true, message: "Email disabled" }
  }

try {
    let actualRecipient = to
    let testModeNotice = ""

const typeColors: Record<string, string> = {
      info: "#3b82f6",
      success: "#10b981",
      warning: "#f59e0b",
      error: "#ef4444",
    }

const color = typeColors[type] || typeColors.info

const { data: emailData, error } = await resend.emails.send({
      from: EMAIL_FROM,
      to: actualRecipient,
      subject: subject,
      html: `
        <!DOCTYPE html>
        <html>
          <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
          </head>
          <body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 600px; margin: 0 auto; padding: 20px;">
            ${testModeNotice}
            
            <div style="background-color: ${color}; padding: 20px; border-radius: 8px 8px 0 0; text-align: center;">
              <h1 style="color: white; margin: 0;">TradeGateStore</h1>
            </div>

<div style="background-color: white; padding: 30px; border: 1px solid #e5e7eb; border-top: none; border-radius: 0 0 8px 8px;">
              <h2 style="color: #1f2937; margin-top: 0;">${subject}</h2>
              <div style="color: #4b5563; white-space: pre-wrap;">${message}</div>
            </div>

<div style="margin-top: 20px; text-align: center; color: #666; font-size: 12px;">
              <p>© ${new Date().getFullYear()} TradeGateStore. All rights reserved.</p>
            </div>
          </body>
        </html>
      `,
    })

if (error) {
      console.error("[v0] Error sending notification email:", error.message)
      throw new Error(error.message)
    }

console.log("[v0] Notification email sent successfully:", emailData?.id)
    return { success: true, emailId: emailData?.id }
  } catch (error) {
    console.error("[v0] Failed to send notification email:", error)
    throw error
  }
}
[V0_FILE]typescript:file="app/admin/orders/actions.ts" isMerged="true"
"use server"

import { getAdminClient } from "@/lib/supabase/server"
import { revalidatePath } from "next/cache"

export async function updateOrderStatus(orderId: string, newStatus: string) {
  try {
    console.log("[v0] Updating order status:", orderId, "to", newStatus)

const supabase = await getAdminClient()

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

if (error) {
      console.error("[v0] Error updating order status:", error)
      throw error
    }

console.log("[v0] Order status updated successfully")

// Revalidate the orders pages to reflect the changes
    revalidatePath("/admin/orders")
    revalidatePath(`/admin/orders/${orderId}`)

return { success: true }
  } catch (error) {
    console.error("[v0] Failed to update order status:", error)
    return {
      success: false,
      error: error instanceof Error ? error.message : "Failed to update order status",
    }
  }
}
[V0_FILE]typescriptreact:file="app/admin/orders/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { createClient } from "@/lib/supabase/client"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useAdminTheme } from "@/lib/admin-theme-context"
import { cn } from "@/lib/utils"
import { ShoppingCart, Package, Truck, CheckCircle, Search, Eye } from "lucide-react"
import Link from "next/link"
import { updateOrderStatus as updateOrderStatusAction } from "./actions"
import { useToast } from "@/hooks/use-toast"

interface Order {
  id: string
  customer_id: string
  total_amount: number
  status: "pending" | "processing" | "shipped" | "delivered" | "cancelled"
  shipping_address: string
  created_at: string
  updated_at: string
  customer?: {
    username: string
    phone_number: string
  }
}

export default function OrdersPage() {
  const [orders, setOrders] = useState<Order[]>([])
  const [filteredOrders, setFilteredOrders] = useState<Order[]>([])
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState<string>("all")
  const [updatingOrderId, setUpdatingOrderId] = useState<string | null>(null)
  const { theme } = useAdminTheme()
  const { toast } = useToast()

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

useEffect(() => {
    filterOrders()
  }, [orders, searchQuery, statusFilter])

const fetchOrders = async () => {
    try {
      const { data, error } = await createClient()
        .from("orders")
        .select(
          `
          *,
          customer:profiles!customer_id(username, phone_number)
        `,
        )
        .order("created_at", { ascending: false })

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

const filterOrders = () => {
    let filtered = orders

if (statusFilter !== "all") {
      filtered = filtered.filter((order) => order.status === statusFilter)
    }

if (searchQuery) {
      filtered = filtered.filter(
        (order) =>
          order.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
          order.customer?.username?.toLowerCase().includes(searchQuery.toLowerCase()) ||
          order.shipping_address.toLowerCase().includes(searchQuery.toLowerCase()),
      )
    }

setFilteredOrders(filtered)
  }

const updateOrderStatus = async (orderId: string, newStatus: string) => {
    try {
      setUpdatingOrderId(orderId)

const result = await updateOrderStatusAction(orderId, newStatus)

if (result.success) {
        setOrders(orders.map((order) => (order.id === orderId ? { ...order, status: newStatus as any } : order)))

toast({
          title: "Success",
          description: "Order status updated successfully",
        })
      } else {
        toast({
          title: "Error",
          description: result.error || "Failed to update order status",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error updating order status:", error)
      toast({
        title: "Error",
        description: "Failed to update order status",
        variant: "destructive",
      })
    } finally {
      setUpdatingOrderId(null)
    }
  }

const config = statusConfig[status as keyof typeof statusConfig]
    return (
      <Badge variant="outline" className={config.className}>
        {config.label}
      </Badge>
    )
  }

const stats = {
    total: orders.length,
    pending: orders.filter((o) => o.status === "pending").length,
    processing: orders.filter((o) => o.status === "processing").length,
    shipped: orders.filter((o) => o.status === "shipped").length,
    delivered: orders.filter((o) => o.status === "delivered").length,
    cancelled: orders.filter((o) => o.status === "cancelled").length,
    totalRevenue: orders
      .filter((o) => o.status !== "cancelled")
      .reduce((sum, order) => sum + Number(order.total_amount), 0),
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className={cn("text-3xl font-bold", theme === "dark" ? "text-white" : "text-gray-900")}>
          Order Management
        </h1>
        <p className={cn("text-sm mt-1", theme === "dark" ? "text-slate-400" : "text-gray-600")}>
          Manage and track all customer orders
        </p>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card className={theme === "dark" ? "bg-slate-800 border-slate-700" : ""}>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Total Orders</CardTitle>
            <ShoppingCart className="h-4 w-4 text-amber-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.total}</div>
          </CardContent>
        </Card>

<Card className={theme === "dark" ? "bg-slate-800 border-slate-700" : ""}>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Pending</CardTitle>
            <Package className="h-4 w-4 text-yellow-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.pending}</div>
          </CardContent>
        </Card>

<Card className={theme === "dark" ? "bg-slate-800 border-slate-700" : ""}>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Shipped</CardTitle>
            <Truck className="h-4 w-4 text-purple-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.shipped}</div>
          </CardContent>
        </Card>

<Card className={theme === "dark" ? "bg-slate-800 border-slate-700" : ""}>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
            <CheckCircle className="h-4 w-4 text-green-500" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">AED {stats.totalRevenue.toFixed(2)}</div>
          </CardContent>
        </Card>
      </div>

<Card className={theme === "dark" ? "bg-slate-800 border-slate-700" : ""}>
        <CardContent className="pt-6">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
              <Input
                placeholder="Search by order ID, customer, or address..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className={cn(
                  "pl-10",
                  theme === "dark" ? "bg-slate-900 border-slate-700 text-white" : "bg-white border-gray-300",
                )}
              />
            </div>
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger
                className={cn(
                  "w-full md:w-[200px]",
                  theme === "dark" ? "bg-slate-900 border-slate-700 text-white" : "bg-white border-gray-300",
                )}
              >
                <SelectValue placeholder="Filter by status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Orders</SelectItem>
                <SelectItem value="pending">Pending</SelectItem>
                <SelectItem value="processing">Processing</SelectItem>
                <SelectItem value="shipped">Shipped</SelectItem>
                <SelectItem value="delivered">Delivered</SelectItem>
                <SelectItem value="cancelled">Cancelled</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

<Card className={theme === "dark" ? "bg-slate-800 border-slate-700" : ""}>
        <CardContent className="pt-6">
          {filteredOrders.length === 0 ? (
            <div className="text-center py-12">
              <ShoppingCart className="h-12 w-12 mx-auto text-gray-400 mb-4" />
              <p className={cn("text-lg font-medium", theme === "dark" ? "text-slate-300" : "text-gray-900")}>
                No orders found
              </p>
              <p className={cn("text-sm mt-1", theme === "dark" ? "text-slate-400" : "text-gray-600")}>
                {searchQuery || statusFilter !== "all"
                  ? "Try adjusting your filters"
                  : "Orders will appear here once customers make purchases"}
              </p>
            </div>
          ) : (
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow className={theme === "dark" ? "border-slate-700" : "border-gray-200"}>
                    <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Order ID</TableHead>
                    <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Customer</TableHead>
                    <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>
                      Total Amount
                    </TableHead>
                    <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Status</TableHead>
                    <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Order Date</TableHead>
                    <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredOrders.map((order) => (
                    <TableRow key={order.id} className={theme === "dark" ? "border-slate-700" : "border-gray-200"}>
                      <TableCell className="font-mono text-xs">{order.id.slice(0, 8)}...</TableCell>
                      <TableCell>
                        <div>
                          <p className="font-medium">{order.customer?.username || "Unknown"}</p>
                          <p className="text-xs text-gray-500">{order.customer?.phone_number || "N/A"}</p>
                        </div>
                      </TableCell>
                      <TableCell className="font-semibold">AED {Number(order.total_amount).toFixed(2)}</TableCell>
                      <TableCell>
                        <Select
                          value={order.status}
                          onValueChange={(value) => updateOrderStatus(order.id, value)}
                          disabled={updatingOrderId === order.id}
                        >
                          <SelectTrigger className="w-[140px] border-0 p-0 h-auto">
                            {getStatusBadge(order.status)}
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="pending">Pending</SelectItem>
                            <SelectItem value="processing">Processing</SelectItem>
                            <SelectItem value="shipped">Shipped</SelectItem>
                            <SelectItem value="delivered">Delivered</SelectItem>
                            <SelectItem value="cancelled">Cancelled</SelectItem>
                          </SelectContent>
                        </Select>
                      </TableCell>
                      <TableCell>{new Date(order.created_at).toLocaleDateString()}</TableCell>
                      <TableCell>
                        <Link href={`/admin/orders/${order.id}`}>
                          <Button variant="ghost" size="sm">
                            <Eye className="h-4 w-4 mr-2" />
                            View
                          </Button>
                        </Link>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/orders/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { createClient } from "@/lib/supabase/client"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select"
import { useAdminTheme } from "@/lib/admin-theme-context"
import { cn } from "@/lib/utils"
import { ArrowLeft, Package, User, MapPin, Calendar } from "lucide-react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { updateOrderStatus as updateOrderStatusAction } from "../actions"
import { useToast } from "@/hooks/use-toast"

interface OrderItem {
  id: string
  product_id: string
  vendor_id: string
  quantity: number
  price: number
  product?: {
    name: string
    thumbnail_url: string
    sku: string
  }
  vendor?: {
    business_name: string
  }
}

export default function OrderDetailPage({ params }: { params: { id: string } }) {
  const [order, setOrder] = useState<Order | null>(null)
  const [orderItems, setOrderItems] = useState<OrderItem[]>([])
  const [loading, setLoading] = useState(true)
  const [updating, setUpdating] = useState(false)
  const { theme } = useAdminTheme()
  const router = useRouter()
  const { toast } = useToast()

const supabase = createClient()

useEffect(() => {
    fetchOrderDetails()
  }, [params.id])

const fetchOrderDetails = async () => {
    try {
      // Fetch order
      const { data: orderData, error: orderError } = await supabase
        .from("orders")
        .select(
          `
          *,
          customer:profiles!customer_id(username, phone_number)
        `,
        )
        .eq("id", params.id)
        .single()

if (orderError) throw orderError
      setOrder(orderData)

// Fetch order items
      const { data: itemsData, error: itemsError } = await supabase
        .from("order_items")
        .select(
          `
          *,
          product:products(name, thumbnail_url, sku),
          vendor:profiles!vendor_id(business_name)
        `,
        )
        .eq("order_id", params.id)

if (itemsError) throw itemsError
      setOrderItems(itemsData || [])
    } catch (error) {
      console.error("Error fetching order details:", error)
    } finally {
      setLoading(false)
    }
  }

const updateOrderStatus = async (newStatus: string) => {
    try {
      setUpdating(true)

const result = await updateOrderStatusAction(params.id, newStatus)

if (result.success) {
        // Update local state after successful database update
        setOrder((prev) => (prev ? { ...prev, status: newStatus as any } : null))

const config = statusConfig[status as keyof typeof statusConfig]
    return (
      <Badge variant="outline" className={config.className}>
        {config.label}
      </Badge>
    )
  }

if (!order) {
    return (
      <div className="text-center py-12">
        <Package className="h-12 w-12 mx-auto text-gray-400 mb-4" />
        <p className={cn("text-lg font-medium", theme === "dark" ? "text-slate-300" : "text-gray-900")}>
          Order not found
        </p>
        <Link href="/admin/orders">
          <Button className="mt-4">Back to Orders</Button>
        </Link>
      </div>
    )
  }

const subtotal = orderItems.reduce((sum, item) => sum + Number(item.price) * item.quantity, 0)

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Link href="/admin/orders">
            <Button variant="ghost" size="sm">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Back
            </Button>
          </Link>
          <div>
            <h1 className={cn("text-3xl font-bold", theme === "dark" ? "text-white" : "text-gray-900")}>
              Order Details
            </h1>
            <p className={cn("text-sm mt-1", theme === "dark" ? "text-slate-400" : "text-gray-600")}>
              Order ID: {order.id}
            </p>
          </div>
        </div>
        <Select value={order.status} onValueChange={updateOrderStatus} disabled={updating}>
          <SelectTrigger className="w-[180px]">{getStatusBadge(order.status)}</SelectTrigger>
          <SelectContent>
            <SelectItem value="pending">Pending</SelectItem>
            <SelectItem value="processing">Processing</SelectItem>
            <SelectItem value="shipped">Shipped</SelectItem>
            <SelectItem value="delivered">Delivered</SelectItem>
            <SelectItem value="cancelled">Cancelled</SelectItem>
          </SelectContent>
        </Select>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Order Information */}
        <div className="lg:col-span-2 space-y-6">
          {/* Order Items */}
          <Card className={theme === "dark" ? "bg-slate-800 border-slate-700" : ""}>
            <CardHeader>
              <CardTitle>Order Items</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow className={theme === "dark" ? "border-slate-700" : "border-gray-200"}>
                      <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Product</TableHead>
                      <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Vendor</TableHead>
                      <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Price</TableHead>
                      <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Quantity</TableHead>
                      <TableHead className={theme === "dark" ? "text-slate-300" : "text-gray-700"}>Total</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {orderItems.map((item) => (
                      <TableRow key={item.id} className={theme === "dark" ? "border-slate-700" : "border-gray-200"}>
                        <TableCell>
                          <div className="flex items-center gap-3">
                            <img
                              src={item.product?.thumbnail_url || "/placeholder.svg?height=50&width=50"}
                              alt={item.product?.name || "Product"}
                              className="w-12 h-12 object-cover rounded"
                            />
                            <div>
                              <p className="font-medium">{item.product?.name || "Unknown Product"}</p>
                              <p className="text-xs text-gray-500">SKU: {item.product?.sku || "N/A"}</p>
                            </div>
                          </div>
                        </TableCell>
                        <TableCell>{item.vendor?.business_name || "Unknown"}</TableCell>
                        <TableCell>AED {Number(item.price).toFixed(2)}</TableCell>
                        <TableCell>{item.quantity}</TableCell>
                        <TableCell className="font-semibold">
                          AED {(Number(item.price) * item.quantity).toFixed(2)}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>

{/* Order Summary */}
              <div className="mt-6 space-y-2">
                <div className="flex justify-between text-sm">
                  <span className={theme === "dark" ? "text-slate-400" : "text-gray-600"}>Subtotal</span>
                  <span className="font-medium">AED {subtotal.toFixed(2)}</span>
                </div>
                <div className="flex justify-between text-lg font-bold pt-2 border-t">
                  <span>Total</span>
                  <span>AED {Number(order.total_amount).toFixed(2)}</span>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

{/* Sidebar */}
        <div className="space-y-6">
          {/* Customer Information */}
          <Card className={theme === "dark" ? "bg-slate-800 border-slate-700" : ""}>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <User className="h-5 w-5" />
                Customer
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <div>
                <p className="text-sm text-gray-500">Name</p>
                <p className="font-medium">{order.customer?.username || "Unknown"}</p>
              </div>
              <div>
                <p className="text-sm text-gray-500">Phone</p>
                <p className="font-medium">{order.customer?.phone_number || "N/A"}</p>
              </div>
            </CardContent>
          </Card>

{/* Shipping Address */}
          <Card className={theme === "dark" ? "bg-slate-800 border-slate-700" : ""}>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <MapPin className="h-5 w-5" />
                Shipping Address
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-sm">{order.shipping_address}</p>
            </CardContent>
          </Card>

{/* Order Timeline */}
          <Card className={theme === "dark" ? "bg-slate-800 border-slate-700" : ""}>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Calendar className="h-5 w-5" />
                Timeline
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <div>
                <p className="text-sm text-gray-500">Order Placed</p>
                <p className="font-medium">{new Date(order.created_at).toLocaleString()}</p>
              </div>
              <div>
                <p className="text-sm text-gray-500">Last Updated</p>
                <p className="font-medium">{new Date(order.updated_at).toLocaleString()}</p>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/not-found.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Home, Search, ShoppingBag } from "lucide-react"

export default function NotFound() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />

<main className="flex-1 bg-background flex items-center justify-center px-4 py-16">
        <div className="max-w-2xl w-full text-center space-y-8">
          {/* 404 Number */}
          <div className="space-y-4">
            <h1 className="text-9xl font-bold text-primary">404</h1>
            <div className="h-1 w-32 bg-primary mx-auto rounded-full" />
          </div>

{/* Error Message */}
          <div className="space-y-3">
            <h2 className="text-3xl font-semibold text-foreground">Page Not Found</h2>
            <p className="text-lg text-muted-foreground max-w-md mx-auto">
              Sorry, we couldn't find the page you're looking for. It might have been moved or doesn't exist.
            </p>
          </div>

{/* Action Buttons */}
          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4">
            <Button asChild size="lg" className="min-w-[160px]">
              <Link href="/">
                <Home className="mr-2 h-5 w-5" />
                Go Home
              </Link>
            </Button>
            <Button asChild variant="outline" size="lg" className="min-w-[160px] bg-transparent">
              <Link href="/shops">
                <ShoppingBag className="mr-2 h-5 w-5" />
                Browse Shops
              </Link>
            </Button>
            <Button asChild variant="outline" size="lg" className="min-w-[160px] bg-transparent">
              <Link href="/search">
                <Search className="mr-2 h-5 w-5" />
                Search Products
              </Link>
            </Button>
          </div>

{/* Decorative Element */}
          <div className="pt-12 opacity-50">
            <svg
              className="mx-auto h-32 w-32 text-muted-foreground/30"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              aria-hidden="true"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={1.5}
                d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          </div>
        </div>
      </main>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/reports/sales-report.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Download, DollarSign, ShoppingCart, TrendingUp, Clock } from "lucide-react"
import { Badge } from "@/components/ui/badge"

type Order = {
  id: string
  customer_id: string | null
  customer_name: string | null
  total_amount: number
  status: string
  created_at: string
}

type OrderItem = {
  id: string
  order_id: string
  product_id: string
  quantity: number
  price: number
}

export function SalesReport({
  orders,
  orderItems,
  days,
}: {
  orders: Order[]
  orderItems: OrderItem[]
  days: number
}) {
  const totalRevenue = orders.reduce((sum, order) => sum + Number(order.total_amount), 0)
  const totalOrders = orders.length
  const averageOrderValue = totalOrders > 0 ? totalRevenue / totalOrders : 0

const statusCounts = orders.reduce(
    (acc, order) => {
      acc[order.status] = (acc[order.status] || 0) + 1
      return acc
    },
    {} as Record<string, number>,
  )

const handleExport = () => {
    const csvContent = [
      ["Order ID", "Customer Name", "Total Amount", "Status", "Date"],
      ...orders.map((order) => [
        order.id,
        order.customer_name || "Guest",
        order.total_amount.toString(),
        order.status,
        new Date(order.created_at).toLocaleDateString(),
      ]),
    ]
      .map((row) => row.join(","))
      .join("\n")

const blob = new Blob([csvContent], { type: "text/csv" })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `sales-report-${new Date().toISOString().split("T")[0]}.csv`
    a.click()
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold">Sales Report</h2>
          <p className="text-muted-foreground">Last {days} days</p>
        </div>
        <Button onClick={handleExport}>
          <Download className="h-4 w-4 mr-2" />
          Export CSV
        </Button>
      </div>

<div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">AED {totalRevenue.toFixed(2)}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Orders</CardTitle>
            <ShoppingCart className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{totalOrders}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Average Order Value</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">AED {averageOrderValue.toFixed(2)}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Pending Orders</CardTitle>
            <Clock className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{statusCounts["pending"] || 0}</div>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Recent Orders</CardTitle>
          <CardDescription>Detailed list of all orders in the selected period</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Order ID</TableHead>
                <TableHead>Customer</TableHead>
                <TableHead>Amount</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Date</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {orders.slice(0, 20).map((order) => (
                <TableRow key={order.id}>
                  <TableCell className="font-mono text-xs">{order.id.slice(0, 8)}...</TableCell>
                  <TableCell>{order.customer_name || "Guest"}</TableCell>
                  <TableCell>AED {Number(order.total_amount).toFixed(2)}</TableCell>
                  <TableCell>
                    <Badge
                      variant={
                        order.status === "completed"
                          ? "default"
                          : order.status === "pending"
                            ? "secondary"
                            : "destructive"
                      }
                    >
                      {order.status}
                    </Badge>
                  </TableCell>
                  <TableCell>{new Date(order.created_at).toLocaleDateString()}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}119:Tf75a6,[V0_FILE]png:file="public/logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/300X300%20Logo-n6DqwkTivyFrWL9OkWCYlnSUNsW4Ex.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/hero-section.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { ArrowRight } from "lucide-react"

export function HeroSection() {
  return (
    <section className="relative overflow-hidden bg-gradient-to-br from-primary/10 via-background to-accent/10">
      <div className="container mx-auto px-4 py-16 md:py-24">
        <div className="grid gap-8 lg:grid-cols-2 lg:gap-12 items-center">
          <div className="flex flex-col gap-6">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-balance">
              Discover Quality Products from Trusted Vendors
            </h1>
            <p className="text-lg md:text-xl text-muted-foreground text-pretty leading-relaxed">
              Shop from thousands of verified vendors offering millions of products. Your one-stop marketplace for
              everything you need.
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <Button size="lg" className="text-base">
                Start Shopping
                <ArrowRight className="ml-2 h-5 w-5" />
              </Button>
              <Button size="lg" variant="outline" className="text-base bg-transparent">
                Explore Vendors
              </Button>
            </div>
            <div className="flex items-center gap-8 pt-4">
              <div>
                <div className="text-3xl font-bold text-primary">10K+</div>
                <div className="text-sm text-muted-foreground">Active Vendors</div>
              </div>
              <div>
                <div className="text-3xl font-bold text-primary">500K+</div>
                <div className="text-sm text-muted-foreground">Products</div>
              </div>
              <div>
                <div className="text-3xl font-bold text-primary">1M+</div>
                <div className="text-sm text-muted-foreground">Happy Customers</div>
              </div>
            </div>
          </div>
          <div className="relative h-[400px] lg:h-[500px]">
            <img
              src="/modern-e-commerce-shopping-illustration-with-produ.jpg"
              alt="Shopping illustration"
              className="rounded-lg object-cover w-full h-full"
            />
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]jpg:file="public/modern-e-commerce-shopping-illustration-with-produ.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-e-commerce-shopping-illustration-with-produ-WG1GZAbpZlDpUG1U0DaJYgYQRF4gXe.jpg" isMerged="true"
[V0_FILE]jpg:file="public/wireless-headphones-product-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wireless-headphones-product-photo-mZLiHUi5ht2hZS3C2kjpcauhaMyU2m.jpg" isMerged="true"
[V0_FILE]jpg:file="public/smart-watch-product-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/smart-watch-product-photo-QDyxppBVFOnGZmpjZAH0JX3WsNipqr.jpg" isMerged="true"
[V0_FILE]jpg:file="public/leather-bag-product-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/leather-bag-product-photo-KcoqBVrIkV7FM5Dm6PGvZq5kjvFR79.jpg" isMerged="true"
[V0_FILE]jpg:file="public/skincare-products-set.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/skincare-products-set-x1AGlHUTvsnuFXWnSJc3vmn4tg9JOJ.jpg" isMerged="true"
[V0_FILE]jpg:file="public/yoga-mat-product-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/yoga-mat-product-photo-kkb4Q8RcEGbUZ9iHhMIwSbYR4xh7y6.jpg" isMerged="true"
[V0_FILE]jpg:file="public/coffee-maker-product-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/coffee-maker-product-photo-MGcLtRNkWBBFxchXiyJbTEfGti1mJB.jpg" isMerged="true"
[V0_FILE]jpg:file="public/running-shoes-product-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/running-shoes-product-photo-JCiDTOkeL7r0VJmfL2EfbGKy0CCs6n.jpg" isMerged="true"
[V0_FILE]jpg:file="public/modern-desk-lamp-product-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-desk-lamp-product-photo-YIv554j5MhhCLn2whgdCsbQ15TPVqM.jpg" isMerged="true"
[V0_FILE]png:file="public/electronics-store-banner.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/electronics-store-banner-2Po3b5RNGGFY87QpuOz9wIDCUOU6hp.png" isMerged="true"
[V0_FILE]png:file="public/fashion-store-banner.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/fashion-store-banner-TLOxbdpNiylZHqUyiJeJkzdC38LPXP.png" isMerged="true"
[V0_FILE]png:file="public/home-decor-banner.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/home-decor-banner-ApkX6wiwDxkLLwgznagH0oD736vRDZ.png" isMerged="true"
[V0_FILE]jpg:file="public/beauty-products-store-banner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/beauty-products-store-banner-OmRoUaPdHmbiIVr4eMwuNOQR0kAQEa.jpg" isMerged="true"
[V0_FILE]png:file="public/summer-sale-banner.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/summer-sale-banner-8TIXvIFHT0KsEbx2n7XYs2wunmv9ko.png" isMerged="true"
[V0_FILE]jpg:file="public/new-vendors-marketplace-banner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/new-vendors-marketplace-banner-JoPMpOhIx3g9LPmi0InVPRESygKfKA.jpg" isMerged="true"
[V0_FILE]jpg:file="public/free-shipping-delivery-banner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/free-shipping-delivery-banner-tMxDGZIduii1VMbHcYkkJVcNHGZ2VW.jpg" isMerged="true"
[V0_FILE]jpg:file="public/flash-deals-limited-time-banner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/flash-deals-limited-time-banner-QLDbw10x7pl8GwuavwNzw5yxrPcTMm.jpg" isMerged="true"
[V0_FILE]jpg:file="public/signup-illustration.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/signup-illustration-J91dHvI7fcINB3Ay96vEu1l9y8NRBN.jpg" isMerged="true"
[V0_FILE]typescript:file="middleware.ts" isMerged="true"
import { updateSession } from "@/lib/supabase/middleware"
import type { NextRequest } from "next/server"

export async function middleware(request: NextRequest) {
  return await updateSession(request)
}

export const config = {
  matcher: [
    /*
     * Match all request paths except:
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     * - images - .svg, .png, .jpg, .jpeg, .gif, .webp
     */
    "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
  ],
}
[V0_FILE]typescript:file="app/api/auth/signout/route.ts" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

export async function POST() {
  const supabase = await createClient()
  await supabase.auth.signOut()
  return NextResponse.redirect(new URL("/", process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000"))
}
[V0_FILE]sql:file="scripts/001_create_profiles.sql" isMerged="true"
-- Create profiles table for user management
create table if not exists public.profiles (
  id uuid primary key references auth.users(id) on delete cascade,
  username text unique,
  user_type text check (user_type in ('customer', 'vendor')),
  avatar_url text,
  created_at timestamp with time zone default now(),
  updated_at timestamp with time zone default now()
);

-- Enable Row Level Security
alter table public.profiles enable row level security;

-- Create policies for profiles table
create policy "profiles_select_own"
  on public.profiles for select
  using (auth.uid() = id);

create policy "profiles_insert_own"
  on public.profiles for insert
  with check (auth.uid() = id);

create policy "profiles_update_own"
  on public.profiles for update
  using (auth.uid() = id);

create policy "profiles_delete_own"
  on public.profiles for delete
  using (auth.uid() = id);

-- Allow public to view vendor profiles
create policy "profiles_select_vendors"
  on public.profiles for select
  using (user_type = 'vendor');
[V0_FILE]sql:file="scripts/002_profile_trigger.sql" isMerged="true"
-- Create function to auto-create profile on user signup
create or replace function public.handle_new_user()
returns trigger
language plpgsql
security definer
set search_path = public
as $$
begin
  insert into public.profiles (id, username, user_type)
  values (
    new.id,
    coalesce(new.raw_user_meta_data ->> 'username', null),
    coalesce(new.raw_user_meta_data ->> 'user_type', 'customer')
  )
  on conflict (id) do nothing;

return new;
end;
$$;

-- Create trigger to call function on user creation
drop trigger if exists on_auth_user_created on auth.users;

create trigger on_auth_user_created
  after insert on auth.users
  for each row
  execute function public.handle_new_user();
[V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { createClient } from "@/lib/supabase/client"
import { useState } from "react"
import { useRouter } from "next/navigation"

export default function LoginPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

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

try {
      const { error } = await supabase.auth.signInWithPassword({
        email,
        password,
        options: {
          emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}`,
        },
      })
      if (error) throw error
      router.push("/")
      router.refresh()
    } catch (error: unknown) {
      setError(error instanceof Error ? error.message : "An error occurred")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border">
        <div className="container mx-auto px-4">
          <div className="flex h-16 items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <Image src="/logo.png" alt="TradeGateStore" width={40} height={40} className="h-10 w-10" />
              <span className="text-xl font-bold">TradeGateStore</span>
            </Link>
            <div className="flex items-center gap-6">
              <Input type="search" placeholder="what are you looking for ?" className="w-96 hidden lg:block" />
            </div>
          </div>
        </div>
      </header>

{/* Main Content */}
      <div className="container mx-auto px-4 py-8">
        <div className="grid lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
          {/* Left Panel - Decorative */}
          <div className="hidden lg:flex items-center justify-center">
            <div className="relative w-full max-w-md aspect-[3/4] bg-gradient-to-br from-amber-100 to-amber-50 rounded-3xl border-8 border-primary shadow-2xl p-12">
              <div className="flex items-center gap-3">
                <Image src="/logo.png" alt="TradeGateStore" width={48} height={48} className="h-12 w-12" />
                <span className="text-2xl font-bold">TradeGateStore</span>
              </div>
            </div>
          </div>

{/* Right Panel - Login Form */}
          <div className="flex items-center justify-center">
            <div className="w-full max-w-md space-y-6">
              <div>
                <h1 className="text-4xl font-bold mb-2">Log in</h1>
                <p className="text-muted-foreground">
                  Login to your account. Do not have account?{" "}
                  <Link href="/signup" className="text-primary font-semibold hover:underline">
                    Sign up
                  </Link>
                </p>
              </div>

<form className="space-y-4" onSubmit={handleLogin}>
                <div className="space-y-2">
                  <Label htmlFor="email">Email / Phone</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="Enter email or phone number"
                    className="h-12"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    required
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="password">Password</Label>
                  <Input
                    id="password"
                    type="password"
                    placeholder="Ex: 6+ Character"
                    className="h-12"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    required
                  />
                </div>

<div className="flex items-center justify-between">
                  <div className="flex items-center space-x-2">
                    <Checkbox id="remember" />
                    <Label htmlFor="remember" className="text-sm font-normal cursor-pointer">
                      Remember Me
                    </Label>
                  </div>
                  <Link href="/forgot-password" className="text-sm text-primary hover:underline">
                    Forgot Password?
                  </Link>
                </div>

{/* reCAPTCHA placeholder */}
                <div className="flex items-center gap-2 p-3 border border-border rounded-md bg-muted/30">
                  <Checkbox id="recaptcha" />
                  <Label htmlFor="recaptcha" className="text-sm font-normal cursor-pointer">
                    I'm not a robot
                  </Label>
                  <div className="ml-auto">
                    <div className="text-xs text-muted-foreground">reCAPTCHA</div>
                  </div>
                </div>

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

<Button type="submit" className="w-full h-12 text-base font-semibold" disabled={isLoading}>
                  {isLoading ? "Logging in..." : "Log in"}
                </Button>

<p className="text-center text-sm text-muted-foreground">
                  Don't you have an account?{" "}
                  <Link href="/signup" className="text-primary font-semibold hover:underline">
                    Sign up
                  </Link>
                </p>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/signup/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Eye, EyeOff } from "lucide-react"
import { createClient } from "@/lib/supabase/client"
import { useState } from "react"
import { useRouter } from "next/navigation"

export default function SignupPage() {
  const [username, setUsername] = useState("")
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [userType, setUserType] = useState("customer")
  const [showPassword, setShowPassword] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

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

try {
      const { error } = await supabase.auth.signUp({
        email,
        password,
        options: {
          emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}`,
          data: {
            username,
            user_type: userType,
          },
        },
      })
      if (error) throw error
      router.push("/signup-success")
    } catch (error: unknown) {
      setError(error instanceof Error ? error.message : "An error occurred")
    } finally {
      setIsLoading(false)
    }
  }

{/* Main Content */}
      <div className="container mx-auto px-4 py-8">
        <div className="grid lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
          {/* Left Panel - Decorative Image */}
          <div className="hidden lg:flex items-center justify-center">
            <div className="relative w-full max-w-md aspect-[3/4] rounded-3xl border-8 border-primary shadow-2xl overflow-hidden">
              <Image src="/signup-illustration.jpg" alt="Beautiful landscape" fill className="object-cover" />
            </div>
          </div>

{/* Right Panel - Signup Form */}
          <div className="flex items-center justify-center">
            <div className="w-full max-w-md space-y-6">
              <div>
                <h1 className="text-4xl font-bold mb-2">Sign up</h1>
                <p className="text-sm text-muted-foreground text-pretty leading-relaxed">
                  There are many advantages to creating an account: the payment process is faster, shipment tracking is
                  possible and much more.
                </p>
              </div>

<form className="space-y-4" onSubmit={handleSignup}>
                <div className="space-y-2">
                  <Label htmlFor="username">Username</Label>
                  <Input
                    id="username"
                    type="text"
                    className="h-12"
                    value={username}
                    onChange={(e) => setUsername(e.target.value)}
                    required
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="email">Enter Email or Phone</Label>
                  <Input
                    id="email"
                    type="email"
                    className="h-12"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    required
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="password">Password</Label>
                  <div className="relative">
                    <Input
                      id="password"
                      type={showPassword ? "text" : "password"}
                      className="h-12 pr-10"
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                      required
                      minLength={6}
                    />
                    <button
                      type="button"
                      onClick={() => setShowPassword(!showPassword)}
                      className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                    >
                      {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
                    </button>
                  </div>
                </div>

<div className="space-y-3">
                  <RadioGroup value={userType} onValueChange={setUserType}>
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="customer" id="customer" />
                      <Label htmlFor="customer" className="font-normal cursor-pointer">
                        I am a customer
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="vendor" id="vendor" />
                      <Label htmlFor="vendor" className="font-normal cursor-pointer">
                        I am a vendor
                      </Label>
                    </div>
                  </RadioGroup>
                </div>

<div className="flex justify-end">
                  <Link href="/forgot-password" className="text-sm text-muted-foreground hover:text-primary">
                    Recover Password ?
                  </Link>
                </div>

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

<Button
                  type="submit"
                  className="w-full h-12 text-base font-semibold bg-gradient-to-r from-primary to-red-600 hover:from-primary/90 hover:to-red-600/90"
                  disabled={isLoading}
                >
                  {isLoading ? "Creating account..." : "Sign up"}
                </Button>

<div className="relative">
                  <div className="absolute inset-0 flex items-center">
                    <span className="w-full border-t border-border" />
                  </div>
                  <div className="relative flex justify-center text-xs">
                    <span className="bg-background px-2 text-muted-foreground">Or Continue with</span>
                  </div>
                </div>

<div className="flex gap-4 justify-center">
                  <Button type="button" variant="outline" size="icon" className="h-12 w-12 rounded-full bg-transparent">
                    <svg className="h-5 w-5" viewBox="0 0 24 24">
                      <path
                        fill="currentColor"
                        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                      />
                      <path
                        fill="currentColor"
                        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                      />
                      <path
                        fill="currentColor"
                        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                      />
                      <path
                        fill="currentColor"
                        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                      />
                    </svg>
                  </Button>
                  <Button type="button" variant="outline" size="icon" className="h-12 w-12 rounded-full bg-transparent">
                    <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
                    </svg>
                  </Button>
                  <Button type="button" variant="outline" size="icon" className="h-12 w-12 rounded-full bg-transparent">
                    <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                    </svg>
                  </Button>
                  <Button type="button" variant="outline" size="icon" className="h-12 w-12 rounded-full bg-transparent">
                    <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" />
                    </svg>
                  </Button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/supabase/middleware.ts" isEdit="true" isMerged="true"
import { createClient } from "@supabase/supabase-js"
import { NextResponse, type NextRequest } from "next/server"

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

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

// Check authentication status
  const {
    data: { user },
  } = await supabase.auth.getUser()

// Redirect unauthenticated users trying to access protected routes
  if (
    !user &&
    !request.nextUrl.pathname.startsWith("/login") &&
    !request.nextUrl.pathname.startsWith("/signup") &&
    request.nextUrl.pathname.startsWith("/dashboard")
  ) {
    const url = request.nextUrl.clone()
    url.pathname = "/login"
    return NextResponse.redirect(url)
  }

return supabaseResponse
}
[V0_FILE]shellscript:file=".gitignore" isMerged="true"
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env*.local
.env

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts
[V0_FILE]shellscript:file=".env.local" isEdit="true" isMerged="true"
# Supabase Configuration
# Copy values from your Supabase project: https://supabase.com/dashboard/project/_/settings/api

NEXT_PUBLIC_SUPABASE_URL=https://yotvkiokrprfxcybdrpw.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InlvdHZraW9rcnByZnhjeWJkcnB3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTkzOTY5MTEsImV4cCI6MjA3NDk3MjkxMX0.4rEecP6LTL0kN_vgBtLtZiMUsJCjIEPVi_iqvhWffMs

# Optional: Set this for local development email redirects
NEXT_PUBLIC_SITE_URL=http://localhost:3000

# Optional: Only needed for admin operations (keep secret!)
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InlvdHZraW9rcnByZnhjeWJkcnB3Iiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTc1OTM5NjkxMSwiZXhwIjoyMDc0OTcyOTExfQ.OdcL3sja7kuEvr7exiKjzF51KZorAv2zvoYe6LJqW_Q
[V0_FILE]typescriptreact:file="app/vendor/register/page.tsx" isMerged="true"
"use client"

import type React from "react"

import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { Eye, EyeOff, Store } from "lucide-react"
import { createClient } from "@/lib/supabase/client"
import { useState } from "react"
import { useRouter } from "next/navigation"

export default function VendorRegisterPage() {
  const [businessName, setBusinessName] = useState("")
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [showPassword, setShowPassword] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

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

try {
      const { error } = await supabase.auth.signUp({
        email,
        password,
        options: {
          emailRedirectTo:
            process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}/vendor/dashboard`,
          data: {
            username: businessName,
            user_type: "vendor",
          },
        },
      })
      if (error) throw error
      router.push("/signup-success")
    } catch (error: unknown) {
      setError(error instanceof Error ? error.message : "An error occurred")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border">
        <div className="container mx-auto px-4">
          <div className="flex h-16 items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <Image src="/logo.png" alt="TradeGateStore" width={40} height={40} className="h-10 w-10" />
              <span className="text-xl font-bold">TradeGateStore</span>
            </Link>
            <div className="flex items-center gap-4">
              <Link href="/vendor/login" className="text-sm text-muted-foreground hover:text-foreground">
                Already a vendor? <span className="text-primary font-semibold">Log in</span>
              </Link>
            </div>
          </div>
        </div>
      </header>

{/* Main Content */}
      <div className="container mx-auto px-4 py-8">
        <div className="grid lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
          {/* Left Panel - Vendor Benefits */}
          <div className="hidden lg:flex flex-col justify-center space-y-6 p-8">
            <div className="space-y-4">
              <div className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-full">
                <Store className="h-5 w-5 text-primary" />
                <span className="text-sm font-semibold text-primary">Vendor Registration</span>
              </div>
              <h1 className="text-4xl font-bold text-balance leading-tight">Start Selling on TradeGateStore Today</h1>
              <p className="text-lg text-muted-foreground text-pretty leading-relaxed">
                Join thousands of successful vendors and reach millions of customers worldwide.
              </p>
            </div>

<div className="space-y-4">
              <div className="flex items-start gap-3">
                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
                  <svg className="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                </div>
                <div>
                  <h3 className="font-semibold mb-1">Zero Setup Fees</h3>
                  <p className="text-sm text-muted-foreground">Start selling without any upfront costs</p>
                </div>
              </div>

<div className="flex items-start gap-3">
                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
                  <svg className="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                </div>
                <div>
                  <h3 className="font-semibold mb-1">Millions of Customers</h3>
                  <p className="text-sm text-muted-foreground">Access to our large customer base</p>
                </div>
              </div>

<div className="flex items-start gap-3">
                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
                  <svg className="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                </div>
                <div>
                  <h3 className="font-semibold mb-1">Easy Store Management</h3>
                  <p className="text-sm text-muted-foreground">Powerful tools to manage your products and orders</p>
                </div>
              </div>

<div className="flex items-start gap-3">
                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
                  <svg className="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                </div>
                <div>
                  <h3 className="font-semibold mb-1">24/7 Vendor Support</h3>
                  <p className="text-sm text-muted-foreground">Dedicated support team to help you succeed</p>
                </div>
              </div>
            </div>
          </div>

{/* Right Panel - Registration Form */}
          <div className="flex items-center justify-center">
            <div className="w-full max-w-md space-y-6">
              <div>
                <h2 className="text-3xl font-bold mb-2">Create Vendor Account</h2>
                <p className="text-sm text-muted-foreground text-pretty leading-relaxed">
                  Fill in your business details to start selling on our platform.
                </p>
              </div>

<form className="space-y-4" onSubmit={handleSignup}>
                <div className="space-y-2">
                  <Label htmlFor="businessName">Business Name</Label>
                  <Input
                    id="businessName"
                    type="text"
                    placeholder="Enter your business or store name"
                    className="h-12"
                    value={businessName}
                    onChange={(e) => setBusinessName(e.target.value)}
                    required
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="email">Business Email</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="your.business@example.com"
                    className="h-12"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    required
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="password">Password</Label>
                  <div className="relative">
                    <Input
                      id="password"
                      type={showPassword ? "text" : "password"}
                      placeholder="Create a strong password (6+ characters)"
                      className="h-12 pr-10"
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                      required
                      minLength={6}
                    />
                    <button
                      type="button"
                      onClick={() => setShowPassword(!showPassword)}
                      className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                    >
                      {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
                    </button>
                  </div>
                </div>

<div className="flex items-start space-x-2">
                  <Checkbox id="terms" required />
                  <Label htmlFor="terms" className="text-sm font-normal cursor-pointer leading-relaxed">
                    I agree to the{" "}
                    <Link href="/terms" className="text-primary hover:underline">
                      Terms of Service
                    </Link>{" "}
                    and{" "}
                    <Link href="/vendor-agreement" className="text-primary hover:underline">
                      Vendor Agreement
                    </Link>
                  </Label>
                </div>

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

<Button type="submit" className="w-full h-12 text-base font-semibold" disabled={isLoading}>
                  {isLoading ? "Creating account..." : "Create Vendor Account"}
                </Button>

<p className="text-center text-sm text-muted-foreground">
                  Already have a vendor account?{" "}
                  <Link href="/vendor/login" className="text-primary font-semibold hover:underline">
                    Log in
                  </Link>
                </p>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/vendor/login/page.tsx" isMerged="true"
"use client"

import type React from "react"

import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { Store } from "lucide-react"
import { createClient } from "@/lib/supabase/client"
import { useState } from "react"
import { useRouter } from "next/navigation"

export default function VendorLoginPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

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

try {
      const { data, error } = await supabase.auth.signInWithPassword({
        email,
        password,
        options: {
          emailRedirectTo:
            process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}/vendor/dashboard`,
        },
      })

if (error) throw error

// Verify user is a vendor
      if (data.user) {
        const { data: profile } = await supabase.from("profiles").select("user_type").eq("id", data.user.id).single()

if (profile?.user_type !== "vendor") {
          await supabase.auth.signOut()
          throw new Error("This account is not registered as a vendor. Please use the customer login.")
        }
      }

router.push("/vendor/dashboard")
      router.refresh()
    } catch (error: unknown) {
      setError(error instanceof Error ? error.message : "An error occurred")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border">
        <div className="container mx-auto px-4">
          <div className="flex h-16 items-center justify-between">
            <Link href="/" className="flex items-center gap-2">
              <Image src="/logo.png" alt="TradeGateStore" width={40} height={40} className="h-10 w-10" />
              <span className="text-xl font-bold">TradeGateStore</span>
            </Link>
            <div className="flex items-center gap-4">
              <Link href="/vendor/register" className="text-sm text-muted-foreground hover:text-foreground">
                New vendor? <span className="text-primary font-semibold">Register</span>
              </Link>
            </div>
          </div>
        </div>
      </header>

{/* Main Content */}
      <div className="container mx-auto px-4 py-8">
        <div className="grid lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
          {/* Left Panel - Vendor Portal Info */}
          <div className="hidden lg:flex items-center justify-center">
            <div className="relative w-full max-w-md aspect-[3/4] bg-gradient-to-br from-primary/20 via-primary/10 to-background rounded-3xl border-2 border-primary/20 shadow-2xl p-12 flex flex-col justify-center">
              <div className="space-y-6">
                <div className="inline-flex items-center gap-2 px-4 py-2 bg-primary rounded-full">
                  <Store className="h-5 w-5 text-primary-foreground" />
                  <span className="text-sm font-semibold text-primary-foreground">Vendor Portal</span>
                </div>

<div>
                  <h2 className="text-3xl font-bold mb-3 text-balance">Welcome Back, Vendor!</h2>
                  <p className="text-muted-foreground text-pretty leading-relaxed">
                    Access your vendor dashboard to manage products, track orders, and grow your business.
                  </p>
                </div>

<div className="space-y-3 pt-4">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                      <svg className="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                        />
                      </svg>
                    </div>
                    <span className="text-sm font-medium">Manage your products</span>
                  </div>
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                      <svg className="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                        />
                      </svg>
                    </div>
                    <span className="text-sm font-medium">Track orders & sales</span>
                  </div>
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                      <svg className="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                        />
                      </svg>
                    </div>
                    <span className="text-sm font-medium">View analytics & insights</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

<form className="space-y-4" onSubmit={handleLogin}>
                <div className="space-y-2">
                  <Label htmlFor="email">Email</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="Enter your business email"
                    className="h-12"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    required
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="password">Password</Label>
                  <Input
                    id="password"
                    type="password"
                    placeholder="Enter your password"
                    className="h-12"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    required
                  />
                </div>

<div className="flex items-center justify-between">
                  <div className="flex items-center space-x-2">
                    <Checkbox id="remember" />
                    <Label htmlFor="remember" className="text-sm font-normal cursor-pointer">
                      Remember Me
                    </Label>
                  </div>
                  <Link href="/vendor/forgot-password" className="text-sm text-primary hover:underline">
                    Forgot Password?
                  </Link>
                </div>

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

<Button type="submit" className="w-full h-12 text-base font-semibold" disabled={isLoading}>
                  {isLoading ? "Logging in..." : "Log in to Dashboard"}
                </Button>

<div className="relative">
                  <div className="absolute inset-0 flex items-center">
                    <span className="w-full border-t border-border" />
                  </div>
                  <div className="relative flex justify-center text-xs uppercase">
                    <span className="bg-background px-2 text-muted-foreground">New to selling?</span>
                  </div>
                </div>

<Button
                  type="button"
                  variant="outline"
                  className="w-full h-12 text-base font-semibold bg-transparent"
                  onClick={() => router.push("/vendor/register")}
                >
                  Create Vendor Account
                </Button>

<p className="text-center text-sm text-muted-foreground">
                  Looking to shop?{" "}
                  <Link href="/login" className="text-primary font-semibold hover:underline">
                    Customer Login
                  </Link>
                </p>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/003_add_vendor_fields.sql" isMerged="true"
-- Add vendor-specific fields to profiles table
alter table public.profiles
  add column if not exists business_name text,
  add column if not exists business_description text,
  add column if not exists business_address text,
  add column if not exists phone_number text,
  add column if not exists is_verified boolean default false,
  add column if not exists rating numeric(3,2) default 0.00,
  add column if not exists total_sales integer default 0;

-- Create index for faster queries on user_type
create index if not exists idx_profiles_user_type on public.profiles(user_type);

-- Create index for verified vendors
create index if not exists idx_profiles_verified_vendors 
  on public.profiles(user_type, is_verified) 
  where user_type = 'vendor' and is_verified = true;

-- Add policy to allow public to view verified vendor details
create policy if not exists "profiles_select_verified_vendors"
  on public.profiles for select
  using (user_type = 'vendor' and is_verified = true);
[V0_FILE]sql:file="scripts/004_create_vendor_products.sql" isMerged="true"
-- Create products table for vendors
create table if not exists public.products (
  id uuid primary key default gen_random_uuid(),
  vendor_id uuid references public.profiles(id) on delete cascade,
  name text not null,
  description text,
  price numeric(10,2) not null,
  category text,
  image_url text,
  stock_quantity integer default 0,
  is_active boolean default true,
  created_at timestamp with time zone default now(),
  updated_at timestamp with time zone default now(),
  constraint vendor_must_be_vendor check (
    exists (
      select 1 from public.profiles 
      where id = vendor_id and user_type = 'vendor'
    )
  )
);

-- Enable Row Level Security
alter table public.products enable row level security;

-- Vendors can manage their own products
create policy "products_select_own"
  on public.products for select
  using (auth.uid() = vendor_id);

create policy "products_insert_own"
  on public.products for insert
  with check (auth.uid() = vendor_id);

create policy "products_update_own"
  on public.products for update
  using (auth.uid() = vendor_id);

create policy "products_delete_own"
  on public.products for delete
  using (auth.uid() = vendor_id);

-- Public can view active products from verified vendors
create policy "products_select_active"
  on public.products for select
  using (
    is_active = true and 
    exists (
      select 1 from public.profiles 
      where id = vendor_id 
      and user_type = 'vendor' 
      and is_verified = true
    )
  );

-- Create indexes for better performance
create index if not exists idx_products_vendor_id on public.products(vendor_id);
create index if not exists idx_products_category on public.products(category);
create index if not exists idx_products_active on public.products(is_active);
[V0_FILE]sql:file="scripts/005_create_orders.sql" isMerged="true"
-- Create orders table
create table if not exists public.orders (
  id uuid primary key default gen_random_uuid(),
  customer_id uuid references public.profiles(id) on delete cascade,
  total_amount numeric(10,2) not null,
  status text check (status in ('pending', 'processing', 'shipped', 'delivered', 'cancelled')) default 'pending',
  shipping_address text not null,
  created_at timestamp with time zone default now(),
  updated_at timestamp with time zone default now()
);

-- Create order_items table
create table if not exists public.order_items (
  id uuid primary key default gen_random_uuid(),
  order_id uuid references public.orders(id) on delete cascade,
  product_id uuid references public.products(id) on delete restrict,
  vendor_id uuid references public.profiles(id) on delete cascade,
  quantity integer not null,
  price numeric(10,2) not null,
  created_at timestamp with time zone default now()
);

-- Enable Row Level Security
alter table public.orders enable row level security;
alter table public.order_items enable row level security;

-- Customers can view their own orders
create policy "orders_select_own"
  on public.orders for select
  using (auth.uid() = customer_id);

create policy "orders_insert_own"
  on public.orders for insert
  with check (auth.uid() = customer_id);

-- Vendors can view orders containing their products
create policy "order_items_select_vendor"
  on public.order_items for select
  using (auth.uid() = vendor_id);

-- Customers can view items in their orders
create policy "order_items_select_customer"
  on public.order_items for select
  using (
    exists (
      select 1 from public.orders 
      where id = order_id and customer_id = auth.uid()
    )
  );

-- Create indexes
create index if not exists idx_orders_customer_id on public.orders(customer_id);
create index if not exists idx_orders_status on public.orders(status);
create index if not exists idx_order_items_order_id on public.order_items(order_id);
create index if not exists idx_order_items_vendor_id on public.order_items(vendor_id);
[V0_FILE]typescriptreact:file="components/category-banner.tsx" isMerged="true"
interface CategoryBannerProps {
  category: string
}

export function CategoryBanner({ category }: CategoryBannerProps) {
  const categoryTitles: Record<string, string> = {
    electronics: "Electronics & Gadgets",
    fashion: "Fashion & Apparel",
    home: "Home & Living",
    beauty: "Beauty & Personal Care",
    sports: "Sports & Outdoors",
    books: "Books & Media",
    toys: "Toys & Games",
    all: "All Products",
  }

const title = categoryTitles[category] || "Products"

return (
    <div className="relative h-48 bg-gradient-to-r from-orange-50 to-amber-50 overflow-hidden">
      <div className="absolute inset-0 bg-[url('/images/category-banner.jpg')] bg-cover bg-center opacity-20" />
      <div className="container mx-auto px-4 h-full flex items-center relative z-10">
        <div className="max-w-2xl">
          <h1 className="text-4xl font-bold text-foreground mb-2">{title}</h1>
          <p className="text-lg text-muted-foreground">Discover amazing deals on quality products</p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/category-filters.tsx" isMerged="true"
"use client"

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Slider } from "@/components/ui/slider"
import { Button } from "@/components/ui/button"
import { Search, ChevronDown, ChevronUp } from "lucide-react"
import { useState } from "react"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"

interface CategoryFiltersProps {
  filters: {
    search: string
    productType: string
    fulfillment: string[]
    deliveryDay: string
    freeShipping: boolean
    subcategory: string
    brands: string[]
    priceRange: [number, number]
    deals: string[]
    sellers: string[]
    rating: number
  }
  setFilters: (filters: any) => void
}

export function CategoryFilters({ filters, setFilters }: CategoryFiltersProps) {
  const [showAllBrands, setShowAllBrands] = useState(false)
  const [isCategoryOpen, setIsCategoryOpen] = useState(true)
  const [isBrandsOpen, setIsBrandsOpen] = useState(true)

const brands = [
    "CHRISTINA AGUILERA",
    "CK CALVIN KLEIN",
    "CLINIQUE",
    "DKNY",
    "DAVIDOFF",
    "ESTEE LAUDER",
    "GUCCI",
    "LANCOME",
  ]

const subcategories = [
    "Office Electronics",
    "Laptops & Computers",
    "Mobile Phones",
    "Cameras & Photography",
    "Audio & Headphones",
    "Smart Watches",
    "Gaming Consoles",
    "TV & Home Theater",
    "Networking Devices",
    "Computer Accessories",
    "Point-of-Sale (POS) Equipment",
    "Printers & Scanners",
    "Portable Speakers",
    "Drones & Accessories",
  ]

const handleBrandToggle = (brand: string) => {
    setFilters({
      ...filters,
      brands: filters.brands.includes(brand) ? filters.brands.filter((b) => b !== brand) : [...filters.brands, brand],
    })
  }

const handleFulfillmentToggle = (value: string) => {
    setFilters({
      ...filters,
      fulfillment: filters.fulfillment.includes(value)
        ? filters.fulfillment.filter((f) => f !== value)
        : [...filters.fulfillment, value],
    })
  }

const handleDealToggle = (value: string) => {
    setFilters({
      ...filters,
      deals: filters.deals.includes(value) ? filters.deals.filter((d) => d !== value) : [...filters.deals, value],
    })
  }

const handleSellerToggle = (value: string) => {
    setFilters({
      ...filters,
      sellers: filters.sellers.includes(value)
        ? filters.sellers.filter((s) => s !== value)
        : [...filters.sellers, value],
    })
  }

return (
    <div className="space-y-6">
      {/* Search */}
      <div>
        <div className="flex items-center gap-2 mb-3">
          <SlidersHorizontal className="h-5 w-5" />
          <h3 className="font-semibold text-foreground">Filter</h3>
        </div>
        <div className="relative">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          <Input
            type="search"
            placeholder="Search Product"
            value={filters.search}
            onChange={(e) => setFilters({ ...filters, search: e.target.value })}
            className="pl-10"
          />
        </div>
      </div>

{/* Product Type */}
      <div>
        <Label className="text-sm font-semibold mb-3 flex items-center justify-between">
          Product Type
          <span className="text-primary">All</span>
        </Label>
      </div>

{/* Fulfilled by Trade Gate Store */}
      <div>
        <h4 className="text-sm font-semibold mb-3">Fulfilled by Trade Gate Store</h4>
        <div className="space-y-2">
          <div className="flex items-center space-x-2">
            <Checkbox
              id="fulfilled-tgs"
              checked={filters.fulfillment.includes("tgs")}
              onCheckedChange={() => handleFulfillmentToggle("tgs")}
            />
            <label htmlFor="fulfilled-tgs" className="text-sm cursor-pointer">
              Fulfilled by Trade Gate Store
            </label>
          </div>
          <div className="flex items-center space-x-2">
            <Checkbox
              id="fulfilled-dr-rasul"
              checked={filters.fulfillment.includes("dr-rasul")}
              onCheckedChange={() => handleFulfillmentToggle("dr-rasul")}
            />
            <label htmlFor="fulfilled-dr-rasul" className="text-sm cursor-pointer">
              Fulfilled by Dr. Rasul
            </label>
          </div>
        </div>
      </div>

{/* Delivery Day */}
      <div>
        <h4 className="text-sm font-semibold mb-3">Delivery Day</h4>
        <div className="flex items-center space-x-2">
          <Checkbox
            id="tomorrow"
            checked={filters.deliveryDay === "tomorrow"}
            onCheckedChange={(checked) => setFilters({ ...filters, deliveryDay: checked ? "tomorrow" : "" })}
          />
          <label htmlFor="tomorrow" className="text-sm cursor-pointer">
            Get it by Tomorrow
          </label>
        </div>
      </div>

{/* Free Shipping */}
      <div>
        <h4 className="text-sm font-semibold mb-3">Eligible for Free Shipping</h4>
        <div className="space-y-2">
          <div className="flex items-center space-x-2">
            <Checkbox
              id="free-shipping"
              checked={filters.freeShipping}
              onCheckedChange={(checked) => setFilters({ ...filters, freeShipping: checked as boolean })}
            />
            <label htmlFor="free-shipping" className="text-sm cursor-pointer">
              Free Shipping
            </label>
          </div>
          <p className="text-xs text-muted-foreground ml-6">Get FREE delivery on eligible orders shipped by TGS</p>
        </div>
      </div>

{/* Category */}
      <Collapsible open={isCategoryOpen} onOpenChange={setIsCategoryOpen}>
        <CollapsibleTrigger className="flex items-center justify-between w-full">
          <h4 className="text-sm font-semibold">Category</h4>
          {isCategoryOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
        </CollapsibleTrigger>
        <CollapsibleContent className="mt-3">
          <div className="space-y-2 max-h-64 overflow-y-auto">
            <RadioGroup
              value={filters.subcategory}
              onValueChange={(value) => setFilters({ ...filters, subcategory: value })}
            >
              {subcategories.map((cat) => (
                <div key={cat} className="flex items-center space-x-2">
                  <RadioGroupItem value={cat} id={cat} />
                  <label htmlFor={cat} className="text-sm cursor-pointer">
                    {cat}
                  </label>
                </div>
              ))}
            </RadioGroup>
          </div>
        </CollapsibleContent>
      </Collapsible>

{/* Brands */}
      <Collapsible open={isBrandsOpen} onOpenChange={setIsBrandsOpen}>
        <CollapsibleTrigger className="flex items-center justify-between w-full">
          <h4 className="text-sm font-semibold">Brands</h4>
          {isBrandsOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
        </CollapsibleTrigger>
        <CollapsibleContent className="mt-3">
          <div className="space-y-2">
            {brands.slice(0, showAllBrands ? brands.length : 5).map((brand) => (
              <div key={brand} className="flex items-center space-x-2">
                <Checkbox
                  id={brand}
                  checked={filters.brands.includes(brand)}
                  onCheckedChange={() => handleBrandToggle(brand)}
                />
                <label htmlFor={brand} className="text-sm cursor-pointer">
                  {brand}
                </label>
              </div>
            ))}
            <Button
              variant="link"
              size="sm"
              className="p-0 h-auto text-primary"
              onClick={() => setShowAllBrands(!showAllBrands)}
            >
              {showAllBrands ? "Show Less" : "More Brands..."}
            </Button>
          </div>
        </CollapsibleContent>
      </Collapsible>

{/* Price Range */}
      <div>
        <h4 className="text-sm font-semibold mb-3">Price</h4>
        <div className="space-y-4">
          <div className="text-sm text-muted-foreground">
            AED {filters.priceRange[0]} - AED {filters.priceRange[1]}
            {filters.priceRange[1] >= 5000 && " & above"}
          </div>
          <Slider
            value={filters.priceRange}
            onValueChange={(value) => setFilters({ ...filters, priceRange: value as [number, number] })}
            max={5000}
            step={100}
            className="w-full"
          />
          <div className="flex justify-between text-xs text-muted-foreground">
            <span>0</span>
            <span>2,500</span>
            <span>5,000+</span>
          </div>
        </div>
      </div>

{/* Deals & Discounts */}
      <div>
        <h4 className="text-sm font-semibold mb-3">Deals & Discounts</h4>
        <div className="space-y-2">
          <div className="flex items-center space-x-2">
            <Checkbox
              id="all-discounts"
              checked={filters.deals.includes("all")}
              onCheckedChange={() => handleDealToggle("all")}
            />
            <label htmlFor="all-discounts" className="text-sm cursor-pointer">
              All Discounts
            </label>
          </div>
          <div className="flex items-center space-x-2">
            <Checkbox
              id="today-deals"
              checked={filters.deals.includes("today")}
              onCheckedChange={() => handleDealToggle("today")}
            />
            <label htmlFor="today-deals" className="text-sm cursor-pointer">
              {"Today's Deals"}
            </label>
          </div>
        </div>
      </div>

{/* Seller */}
      <div>
        <h4 className="text-sm font-semibold mb-3">Seller</h4>
        <div className="space-y-2">
          <div className="flex items-center space-x-2">
            <Checkbox
              id="mahraz-stores"
              checked={filters.sellers.includes("mahraz")}
              onCheckedChange={() => handleSellerToggle("mahraz")}
            />
            <label htmlFor="mahraz-stores" className="text-sm cursor-pointer">
              Mahraz Stores
            </label>
          </div>
          <div className="flex items-center space-x-2">
            <Checkbox
              id="desertgate"
              checked={filters.sellers.includes("desertgate")}
              onCheckedChange={() => handleSellerToggle("desertgate")}
            />
            <label htmlFor="desertgate" className="text-sm cursor-pointer">
              DesertGateAE
            </label>
          </div>
        </div>
      </div>

{/* Ratings */}
      <div>
        <h4 className="text-sm font-semibold mb-3">Ratings</h4>
        <div className="space-y-2">
          {[4, 3, 2, 1].map((rating) => (
            <button
              key={rating}
              onClick={() => setFilters({ ...filters, rating })}
              className={`flex items-center gap-2 text-sm w-full text-left p-2 rounded hover:bg-muted transition-colors ${
                filters.rating === rating ? "bg-muted" : ""
              }`}
            >
              <div className="flex">
                {Array.from({ length: 5 }).map((_, i) => (
                  <span key={i} className={i < rating ? "text-yellow-500" : "text-gray-300"}>
                    ★
                  </span>
                ))}
              </div>
              <span className="text-muted-foreground">& Up</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}

function SlidersHorizontal({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <line x1="4" x2="4" y1="21" y2="14" />
      <line x1="4" x2="4" y1="10" y2="3" />
      <line x1="12" x2="12" y1="21" y2="12" />
      <line x1="12" x2="12" y1="8" y2="3" />
      <line x1="20" x2="20" y1="21" y2="16" />
      <line x1="20" x2="20" y1="12" y2="3" />
      <line x1="2" x2="6" y1="14" y2="14" />
      <line x1="10" x2="14" y1="8" y2="8" />
      <line x1="18" x2="22" y1="16" y2="16" />
    </svg>
  )
}
[V0_FILE]jpg:file="public/images/category-banner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/category-banner-mBHM5fRbkMAM6UtuWQhyvEJ3UmnaVA.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="lib/cart-context.tsx" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useState, useEffect } from "react"

export interface CartItem {
  id: string
  name: string
  price: number
  originalPrice?: number
  image: string
  quantity: number
  vendor: string
  category: string
}

interface CartContextType {
  items: CartItem[]
  addItem: (item: Omit<CartItem, "quantity">) => void
  removeItem: (id: string) => void
  updateQuantity: (id: string, quantity: number) => void
  clearCart: () => void
  totalItems: number
  totalPrice: number
  isOpen: boolean
  openCart: () => void
  closeCart: () => void
}

const CartContext = createContext<CartContextType | undefined>(undefined)

export function CartProvider({ children }: { children: React.ReactNode }) {
  const [items, setItems] = useState<CartItem[]>([])
  const [isOpen, setIsOpen] = useState(false)

// Load cart from localStorage on mount
  useEffect(() => {
    const savedCart = localStorage.getItem("tradegate-cart")
    if (savedCart) {
      try {
        setItems(JSON.parse(savedCart))
      } catch (error) {
        console.error("Failed to load cart:", error)
      }
    }
  }, [])

// Save cart to localStorage whenever it changes
  useEffect(() => {
    localStorage.setItem("tradegate-cart", JSON.stringify(items))
  }, [items])

const addItem = (item: Omit<CartItem, "quantity">) => {
    setItems((currentItems) => {
      const existingItem = currentItems.find((i) => i.id === item.id)
      if (existingItem) {
        return currentItems.map((i) => (i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i))
      }
      return [...currentItems, { ...item, quantity: 1 }]
    })
    setIsOpen(true)
  }

const removeItem = (id: string) => {
    setItems((currentItems) => currentItems.filter((item) => item.id !== id))
  }

const updateQuantity = (id: string, quantity: number) => {
    if (quantity <= 0) {
      removeItem(id)
      return
    }
    setItems((currentItems) => currentItems.map((item) => (item.id === id ? { ...item, quantity } : item)))
  }

const clearCart = () => {
    setItems([])
  }

const totalItems = items.reduce((sum, item) => sum + item.quantity, 0)
  const totalPrice = items.reduce((sum, item) => sum + item.price * item.quantity, 0)

const openCart = () => setIsOpen(true)
  const closeCart = () => setIsOpen(false)

return (
    <CartContext.Provider
      value={{
        items,
        addItem,
        removeItem,
        updateQuantity,
        clearCart,
        totalItems,
        totalPrice,
        isOpen,
        openCart,
        closeCart,
      }}
    >
      {children}
    </CartContext.Provider>
  )
}

export function useCart() {
  const context = useContext(CartContext)
  if (context === undefined) {
    throw new Error("useCart must be used within a CartProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="components/cart-drawer.tsx" isMerged="true"
"use client"

import { useCart } from "@/lib/cart-context"
import { Button } from "@/components/ui/button"
import { Minus, Plus, ShoppingBag, Trash2 } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"

export function CartDrawer() {
  const { items, removeItem, updateQuantity, totalItems, totalPrice, isOpen, closeCart } = useCart()

return (
    <Sheet open={isOpen} onOpenChange={closeCart}>
      <SheetContent className="w-full sm:max-w-lg">
        <SheetHeader>
          <SheetTitle className="flex items-center gap-2">
            <ShoppingBag className="h-5 w-5" />
            Shopping Cart ({totalItems})
          </SheetTitle>
        </SheetHeader>

{items.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-[calc(100vh-200px)] gap-4">
            <ShoppingBag className="h-16 w-16 text-muted-foreground" />
            <p className="text-lg font-medium text-muted-foreground">Your cart is empty</p>
            <Button onClick={closeCart} asChild>
              <Link href="/categories/all">Continue Shopping</Link>
            </Button>
          </div>
        ) : (
          <div className="flex flex-col h-[calc(100vh-120px)]">
            {/* Cart Items */}
            <div className="flex-1 overflow-y-auto py-4 space-y-4">
              {items.map((item) => (
                <div key={item.id} className="flex gap-4 p-4 border rounded-lg">
                  <div className="relative h-20 w-20 flex-shrink-0 rounded-md overflow-hidden bg-muted">
                    <Image src={item.image || "/placeholder.svg"} alt={item.name} fill className="object-cover" />
                  </div>

<div className="flex-1 min-w-0">
                    <h3 className="font-medium text-sm line-clamp-2">{item.name}</h3>
                    <p className="text-xs text-muted-foreground mt-1">{item.vendor}</p>

<div className="flex items-center justify-between mt-2">
                      <div className="flex items-center gap-2">
                        <Button
                          variant="outline"
                          size="icon"
                          className="h-7 w-7 bg-transparent"
                          onClick={() => updateQuantity(item.id, item.quantity - 1)}
                        >
                          <Minus className="h-3 w-3" />
                        </Button>
                        <span className="text-sm font-medium w-8 text-center">{item.quantity}</span>
                        <Button
                          variant="outline"
                          size="icon"
                          className="h-7 w-7 bg-transparent"
                          onClick={() => updateQuantity(item.id, item.quantity + 1)}
                        >
                          <Plus className="h-3 w-3" />
                        </Button>
                      </div>

<Button
                        variant="ghost"
                        size="icon"
                        className="h-7 w-7 text-destructive"
                        onClick={() => removeItem(item.id)}
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>

<div className="flex flex-col items-end justify-between">
                    <div className="text-right">
                      <p className="font-semibold">AED {item.price.toFixed(2)}</p>
                      {item.originalPrice && (
                        <p className="text-xs text-muted-foreground line-through">
                          AED {item.originalPrice.toFixed(2)}
                        </p>
                      )}
                    </div>
                    <p className="text-sm font-medium">AED {(item.price * item.quantity).toFixed(2)}</p>
                  </div>
                </div>
              ))}
            </div>

{/* Cart Summary */}
            <div className="border-t pt-4 space-y-4">
              <div className="space-y-2">
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">Subtotal</span>
                  <span className="font-medium">AED {totalPrice.toFixed(2)}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">Shipping</span>
                  <span className="font-medium text-green-600">Free</span>
                </div>
                <div className="flex justify-between text-base font-semibold pt-2 border-t">
                  <span>Total</span>
                  <span>AED {totalPrice.toFixed(2)}</span>
                </div>
              </div>

<div className="space-y-2">
                <Button className="w-full" size="lg" asChild>
                  <Link href="/checkout">Proceed to Checkout</Link>
                </Button>
                <Button variant="outline" className="w-full bg-transparent" onClick={closeCart} asChild>
                  <Link href="/categories/all">Continue Shopping</Link>
                </Button>
              </div>
            </div>
          </div>
        )}
      </SheetContent>
    </Sheet>
  )
}
[V0_FILE]png:file="public/skincare-product-display.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/skincare-product-display-Dsgm4aZYZ38Tee7DjcWXQbkWDKOmzN.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/order-confirmation/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/profile-sidebar.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { User, ShoppingBag, Wallet, Heart, Bell, Gift, Tag, MessageCircle, HelpCircle, LogOut } from "lucide-react"
import { createClient } from "@/lib/supabase/client"
import { useEffect, useState } from "react"

interface Profile {
  username: string | null
  avatar_url: string | null
}

export function ProfileSidebar() {
  const pathname = usePathname()
  const router = useRouter()
  const [profile, setProfile] = useState<Profile | null>(null)
  const supabase = createClient()

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

const loadProfile = async () => {
    const {
      data: { user },
    } = await supabase.auth.getUser()
    if (user) {
      const { data } = await supabase.from("profiles").select("username, avatar_url").eq("id", user.id).single()
      if (data) setProfile(data)
    }
  }

const handleLogout = async () => {
    await supabase.auth.signOut()
    router.push("/")
    router.refresh()
  }

const menuItems = [
    { href: "/profile", label: "Account Details", icon: User },
    { href: "/orders", label: "My Orders", icon: ShoppingBag },
    { href: "/wallet", label: "My Wallet", icon: Wallet },
    { href: "/wishlist", label: "Wish List", icon: Heart },
    { href: "/notifications", label: "Notification", icon: Bell },
    { href: "/refer", label: "Refer Friends", icon: Gift },
    { href: "/coupons", label: "Coupons", icon: Tag },
    { href: "/chat", label: "Chat", icon: MessageCircle },
  ]

return (
    <div className="bg-card rounded-lg shadow-sm border border-border overflow-hidden">
      {/* User Info */}
      <div className="p-6 border-b border-border">
        <div className="flex items-center gap-3">
          <Avatar className="h-12 w-12">
            <AvatarImage src={profile?.avatar_url || undefined} />
            <AvatarFallback className="bg-primary text-primary-foreground">
              {profile?.username?.charAt(0).toUpperCase() || "U"}
            </AvatarFallback>
          </Avatar>
          <div>
            <p className="font-semibold">{profile?.username || "User"}</p>
          </div>
        </div>
      </div>

{/* Menu Items */}
      <nav className="p-2">
        {menuItems.map((item) => {
          const Icon = item.icon
          const isActive = pathname === item.href
          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                "flex items-center gap-3 px-4 py-3 rounded-md transition-colors",
                isActive
                  ? "bg-primary/10 text-primary font-medium"
                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
              )}
            >
              <Icon className="h-4 w-4" />
              <span>{item.label}</span>
            </Link>
          )
        })}
      </nav>

{/* Help Center */}
      <div className="p-2 border-t border-border">
        <Link
          href="/help"
          className="flex items-center gap-3 px-4 py-3 rounded-md text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
        >
          <HelpCircle className="h-4 w-4" />
          <span>Help Center</span>
        </Link>
      </div>

{/* Logout */}
      <div className="p-4 border-t border-border">
        <Button variant="outline" className="w-full justify-start bg-transparent" onClick={handleLogout}>
          <LogOut className="h-4 w-4 mr-3" />
          Logout
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
  ({ className, ...props }, ref) => {
    return (
      <textarea
        className={cn(
          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
          className,
        )}
        ref={ref}
        {...props}
      />
    )
  },
)
Textarea.displayName = "Textarea"