8e:I[903690,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0hs-lwpk0pqyd.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/35_y0dqgn-0mt.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3g-fs4xgai-g5.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1n2hc8s2n43mj.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1us3bl0q56vjs.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0tks-20_fdj6k.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1azw504k12v6w.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3urjbzpvx1hzq.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2tzkku2-v7z-g.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/33i5u4z_a-w5d.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2ykiwolb6qpz5.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3c-q__gsp_jz7.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0pg_0xkvbnf5k.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2sn0cu5ct490_.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3v_9jszq6ptsd.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3nozgfyehkba0.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2-wm-k7vgzqqk.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2qjc4h8ppakd4.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/17ubrhzwe7qjg.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/13vf_yoq1tq6z.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3s1x-0qln9mns.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj"],"ExplicitChatIdProvider"] 8f:I[838238,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0hs-lwpk0pqyd.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/35_y0dqgn-0mt.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3g-fs4xgai-g5.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1n2hc8s2n43mj.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1us3bl0q56vjs.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0tks-20_fdj6k.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1azw504k12v6w.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3urjbzpvx1hzq.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2tzkku2-v7z-g.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/33i5u4z_a-w5d.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2ykiwolb6qpz5.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3c-q__gsp_jz7.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0pg_0xkvbnf5k.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2sn0cu5ct490_.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3v_9jszq6ptsd.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3nozgfyehkba0.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2-wm-k7vgzqqk.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2qjc4h8ppakd4.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/17ubrhzwe7qjg.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/13vf_yoq1tq6z.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3s1x-0qln9mns.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj"],"SWRDataProvider"] 92:I[589831,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0hs-lwpk0pqyd.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/35_y0dqgn-0mt.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3g-fs4xgai-g5.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1n2hc8s2n43mj.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1us3bl0q56vjs.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0tks-20_fdj6k.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1azw504k12v6w.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3urjbzpvx1hzq.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2tzkku2-v7z-g.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/33i5u4z_a-w5d.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2ykiwolb6qpz5.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3c-q__gsp_jz7.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0pg_0xkvbnf5k.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2sn0cu5ct490_.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3v_9jszq6ptsd.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3nozgfyehkba0.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2-wm-k7vgzqqk.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2qjc4h8ppakd4.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/17ubrhzwe7qjg.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/13vf_yoq1tq6z.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3s1x-0qln9mns.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj"],"TemplateImage"] 93:I[507037,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0hs-lwpk0pqyd.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/35_y0dqgn-0mt.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3g-fs4xgai-g5.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1n2hc8s2n43mj.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1us3bl0q56vjs.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0tks-20_fdj6k.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1azw504k12v6w.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3urjbzpvx1hzq.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2tzkku2-v7z-g.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/33i5u4z_a-w5d.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2ykiwolb6qpz5.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3c-q__gsp_jz7.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/0pg_0xkvbnf5k.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2sn0cu5ct490_.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3v_9jszq6ptsd.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3nozgfyehkba0.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2-wm-k7vgzqqk.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/2qjc4h8ppakd4.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/17ubrhzwe7qjg.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/13vf_yoq1tq6z.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj","/chat-static/_next/static/chunks/3s1x-0qln9mns.js?dpl=dpl_7KCP1nQ7vzonFRZRpenEwkyw6ewj"],"PrefetchLinkAndRefreshOnHover"] 90:T282b7,[V0_FILE]typescriptreact:file="components/hero.tsx" isMerged="true" "use client" import { Store, Zap, IndianRupee, Megaphone, Headphones } from "lucide-react" export default function Hero() { const scrollToForm = () => { document.getElementById("add-product")?.scrollIntoView({ behavior: "smooth" }) } return (

₹10 में बनें दुकानदार, बेचें अपना सामान

Shopsee Market पर कोई भी प्रति उत्पाद ₹10 जमा करके अपना सामान बेच सकता है

केवल ₹10 प्रति उत्पाद

{[ { icon: ( ), title: "QR भुगतान", desc: "स्कैन करके भुगतान करें", }, { icon: , title: "₹10 शुल्क", desc: "प्रति उत्पाद सूचीबद्ध करने के लिए" }, { icon: , title: "हाइलाइटेड लिस्टिंग", desc: "अधिक ग्राहकों तक पहुँचें" }, { icon: , title: "24/7 सपोर्ट", desc: "हमारी टीम आपकी मदद के लिए" }, ].map((feature, index) => (

{feature.icon}

{feature.title}

{feature.desc}

))}

) } [V0_FILE]typescriptreact:file="components/how-it-works.tsx" isMerged="true" import { Plus, IndianRupee, CheckCircle } from "lucide-react" export default function HowItWorks() { const steps = [ { number: 1, title: "उत्पाद जोड़ें", description: "अपने उत्पाद का नाम, विवरण, कीमत और फोटो जोड़ें। स्कैनर से फोटो अपलोड करने का विकल्प भी उपलब्ध है।", icon: , }, { number: 2, title: "₹10 भुगतान करें", description: "UPI QR कोड स्कैन करके या अपने मोबाइल वॉलेट से ₹10 का भुगतान करें। भुगतान सत्यापन तुरंत होता है।", icon: , }, { number: 3, title: "बेचना शुरू करें", description: "आपका उत्पाद हमारे मार्केटप्लेस पर सूचीबद्ध हो जाता है। ग्राहक सीधे आपसे संपर्क कर सकते हैं!", icon: , }, ] return (

Shopsee कैसे काम करता है?

3 सरल चरणों में बनें दुकानदार और बेचना शुरू करें

{steps.map((step, index) => (

{step.number}

{step.title}

{step.description}

{step.icon}

))}

) } [V0_FILE]typescriptreact:file="components/testimonials.tsx" isMerged="true" export default function Testimonials() { const testimonials = [ { text: "मैंने Shopsee पर ₹10 भुगतान करके अपना पुराना लैपटॉप सूचीबद्ध किया और सिर्फ 2 घंटे में बिक गया! अब मैं यहाँ नियमित रूप से सामान बेचता हूँ।", author: "राजेश कुमार", location: "दिल्ली, इलेक्ट्रॉनिक्स विक्रेता", initial: "R", }, { text: "₹10 में दुकानदार बनने का यह सबसे आसान तरीका है। मैंने 5 उत्पाद सूचीबद्ध किए और पहले ही दिन 3 बिक गए! भुगतान प्रणाली बहुत सरल है।", author: "प्रिया शर्मा", location: "मुंबई, फर्नीचर विक्रेता", initial: "P", }, { text: "मैं एक छात्र हूँ और Shopsee ने मुझे अपने पुराने सामान बेचकर पैसे कमाने का मौका दिया। सबसे अच्छी बात यह है कि यह सिर्फ ₹10 में संभव है!", author: "विजय मलिक", location: "बैंगलोर, पार्ट-टाइम विक्रेता", initial: "V", }, ] return (

हमारे दुकानदारों की कहानियाँ

Shopsee Market ने कैसे बदली सैकड़ों लोगों की कमाई

{testimonials.map((testimonial, index) => (

"{testimonial.text}"

{testimonial.initial}

{testimonial.author}

{testimonial.location}

))}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import { Store, ChevronRight, MapPin, Phone, Mail, Clock, Facebook, Twitter, Instagram } from "lucide-react" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/modal.tsx" isMerged="true" "use client" import { CheckCircle, AlertCircle, X } from "lucide-react" interface ModalProps { isOpen: boolean onClose: () => void type: "success" | "error" title: string message: string } export default function Modal({ isOpen, onClose, type, title, message }: ModalProps) { if (!isOpen) return null return (

{type === "success" ? ( ) : ( )}

{title}

{message}

) } [V0_FILE]typescriptreact:file="lib/payment-verification.ts" isMerged="true" "use client" export interface PaymentTransaction { id: string upiId: string amount: number status: "pending" | "success" | "failed" | "expired" timestamp: number productId?: string customerPhone?: string transactionRef?: string } export interface PaymentVerificationResult { success: boolean transaction?: PaymentTransaction message: string } class PaymentVerificationService { private transactions: Map = new Map() private verificationCallbacks: Map void> = new Map() // Simulate UPI payment verification async initiatePaymentVerification( upiId: string, amount: number, productId?: string, customerPhone?: string, ): Promise { const transactionId = this.generateTransactionId() const transaction: PaymentTransaction = { id: transactionId, upiId, amount, status: "pending", timestamp: Date.now(), productId, customerPhone, transactionRef: this.generateTransactionRef(), } this.transactions.set(transactionId, transaction) // Start monitoring for payment (simulate real UPI verification) this.startPaymentMonitoring(transactionId) return transactionId } private startPaymentMonitoring(transactionId: string) { const transaction = this.transactions.get(transactionId) if (!transaction) return // Simulate payment verification with random delays and outcomes const verificationDelay = Math.random() * 10000 + 5000 // 5-15 seconds const successRate = 0.85 // 85% success rate setTimeout(() => { const updatedTransaction = { ...transaction } if (Math.random() < successRate) { updatedTransaction.status = "success" updatedTransaction.transactionRef = this.generateTransactionRef() } else { updatedTransaction.status = "failed" } this.transactions.set(transactionId, updatedTransaction) // Notify callback if registered const callback = this.verificationCallbacks.get(transactionId) if (callback) { callback({ success: updatedTransaction.status === "success", transaction: updatedTransaction, message: updatedTransaction.status === "success" ? "Payment verified successfully!" : "Payment verification failed. Please try again.", }) } }, verificationDelay) // Set expiration timer (5 minutes) setTimeout(() => { const currentTransaction = this.transactions.get(transactionId) if (currentTransaction && currentTransaction.status === "pending") { const expiredTransaction = { ...currentTransaction, status: "expired" as const } this.transactions.set(transactionId, expiredTransaction) const callback = this.verificationCallbacks.get(transactionId) if (callback) { callback({ success: false, transaction: expiredTransaction, message: "Payment verification expired. Please try again.", }) } } }, 300000) // 5 minutes } // Register callback for payment verification result onPaymentVerification(transactionId: string, callback: (result: PaymentVerificationResult) => void) { this.verificationCallbacks.set(transactionId, callback) } // Get transaction status getTransactionStatus(transactionId: string): PaymentTransaction | null { return this.transactions.get(transactionId) || null } // Get all transactions for a user (by phone number) getUserTransactions(customerPhone: string): PaymentTransaction[] { return Array.from(this.transactions.values()) .filter((t) => t.customerPhone === customerPhone) .sort((a, b) => b.timestamp - a.timestamp) } // Manual verification check (simulate checking with bank API) async checkPaymentStatus(transactionId: string): Promise { const transaction = this.transactions.get(transactionId) if (!transaction) { return { success: false, message: "Transaction not found", } } // Simulate API call delay await new Promise((resolve) => setTimeout(resolve, 1000)) return { success: transaction.status === "success", transaction, message: this.getStatusMessage(transaction.status), } } private getStatusMessage(status: PaymentTransaction["status"]): string { switch (status) { case "success": return "Payment verified successfully!" case "failed": return "Payment verification failed. Please try again." case "expired": return "Payment verification expired. Please try again." case "pending": return "Payment verification in progress..." default: return "Unknown payment status" } } private generateTransactionId(): string { return "TXN" + Date.now() + Math.random().toString(36).substr(2, 9).toUpperCase() } private generateTransactionRef(): string { return "REF" + Date.now() + Math.random().toString(36).substr(2, 6).toUpperCase() } // Clear expired transactions (cleanup) clearExpiredTransactions() { const now = Date.now() const expiredTime = 24 * 60 * 60 * 1000 // 24 hours for (const [id, transaction] of this.transactions.entries()) { if (now - transaction.timestamp > expiredTime) { this.transactions.delete(id) this.verificationCallbacks.delete(id) } } } } // Singleton instance export const paymentVerificationService = new PaymentVerificationService() // Auto cleanup every hour if (typeof window !== "undefined") { setInterval( () => { paymentVerificationService.clearExpiredTransactions() }, 60 * 60 * 1000, ) } [V0_FILE]typescriptreact:file="components/payment-verification-modal.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { CheckCircle, AlertCircle, Clock, X, RefreshCw, CreditCard } from "lucide-react" import type { PaymentTransaction, PaymentVerificationResult } from "@/lib/payment-verification" import { paymentVerificationService } from "@/lib/payment-verification" interface PaymentVerificationModalProps { isOpen: boolean onClose: () => void transactionId: string | null onVerificationComplete: (success: boolean, transaction?: PaymentTransaction) => void } export default function PaymentVerificationModal({ isOpen, onClose, transactionId, onVerificationComplete, }: PaymentVerificationModalProps) { const [status, setStatus] = useState<"checking" | "success" | "failed" | "expired" | "pending">("checking") const [transaction, setTransaction] = useState(null) const [message, setMessage] = useState("") const [timeRemaining, setTimeRemaining] = useState(300) // 5 minutes const [isManualChecking, setIsManualChecking] = useState(false) useEffect(() => { if (!isOpen || !transactionId) return // Reset state setStatus("checking") setMessage("Verifying payment...") setTimeRemaining(300) // Register for payment verification callback paymentVerificationService.onPaymentVerification(transactionId, (result: PaymentVerificationResult) => { setTransaction(result.transaction || null) setMessage(result.message) if (result.success) { setStatus("success") setTimeout(() => { onVerificationComplete(true, result.transaction) }, 2000) } else { if (result.transaction?.status === "expired") { setStatus("expired") } else { setStatus("failed") } } }) // Start countdown timer const timer = setInterval(() => { setTimeRemaining((prev) => { if (prev <= 1) { setStatus("expired") setMessage("Payment verification expired. Please try again.") clearInterval(timer) return 0 } return prev - 1 }) }, 1000) return () => { clearInterval(timer) } }, [isOpen, transactionId, onVerificationComplete]) const handleManualCheck = async () => { if (!transactionId) return setIsManualChecking(true) try { const result = await paymentVerificationService.checkPaymentStatus(transactionId) setTransaction(result.transaction || null) setMessage(result.message) if (result.success) { setStatus("success") setTimeout(() => { onVerificationComplete(true, result.transaction) }, 2000) } else { setStatus(result.transaction?.status || "failed") } } catch (error) { setMessage("Error checking payment status. Please try again.") } finally { setIsManualChecking(false) } } const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins}:${secs.toString().padStart(2, "0")}` } const handleClose = () => { onVerificationComplete(false) onClose() } if (!isOpen) return null return (

{status === "checking" || status === "pending" ? (

) : status === "success" ? ( ) : ( )}

{status === "checking" || status === "pending" ? "Verifying Payment" : status === "success" ? "Payment Verified!" : status === "expired" ? "Verification Expired" : "Payment Failed"}

{message}

{transaction && (

Transaction Details

Transaction ID: {transaction.id}

Amount: ₹{transaction.amount}

UPI ID: {transaction.upiId}

{transaction.transactionRef && (

Reference: {transaction.transactionRef}

)}

Status: {transaction.status}

)} {(status === "checking" || status === "pending") && (

Time remaining: {formatTime(timeRemaining)}

)}

{(status === "checking" || status === "pending") && ( )} {status === "success" ? ( ) : status === "failed" || status === "expired" ? ( ) : ( )}

{(status === "checking" || status === "pending") && (

💡 Complete your payment in your UPI app and wait for verification. You can also click "Check Status" to manually verify.

)}

) } [V0_FILE]typescriptreact:file="components/transaction-history.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Clock, CheckCircle, XCircle, AlertTriangle, CreditCard, Calendar, IndianRupee } from "lucide-react" import type { PaymentTransaction } from "@/lib/payment-verification" import { paymentVerificationService } from "@/lib/payment-verification" interface TransactionHistoryProps { customerPhone?: string } export default function TransactionHistory({ customerPhone }: TransactionHistoryProps) { const [transactions, setTransactions] = useState([]) const [isLoading, setIsLoading] = useState(true) useEffect(() => { if (customerPhone) { loadTransactions() } }, [customerPhone]) const loadTransactions = () => { setIsLoading(true) try { const userTransactions = paymentVerificationService.getUserTransactions(customerPhone || "") setTransactions(userTransactions) } catch (error) { console.error("Error loading transactions:", error) } finally { setIsLoading(false) } } const getStatusIcon = (status: PaymentTransaction["status"]) => { switch (status) { case "success": return case "failed": return case "expired": return case "pending": return default: return } } const getStatusColor = (status: PaymentTransaction["status"]) => { switch (status) { case "success": return "text-green-600 bg-green-50 border-green-200" case "failed": return "text-red-600 bg-red-50 border-red-200" case "expired": return "text-orange-600 bg-orange-50 border-orange-200" case "pending": return "text-blue-600 bg-blue-50 border-blue-200" default: return "text-gray-600 bg-gray-50 border-gray-200" } } const formatDate = (timestamp: number) => { return new Date(timestamp).toLocaleString("en-IN", { day: "2-digit", month: "short", year: "numeric", hour: "2-digit", minute: "2-digit", }) } if (!customerPhone) { return (

Enter your phone number to view transaction history

) } if (isLoading) { return (

) } return (

Transaction History

Your payment transactions for product listings

{transactions.length === 0 ? (

No Transactions Found

You haven't made any payments yet. List your first product to get started!

) : (

{transactions.map((transaction) => (

{getStatusIcon(transaction.status)}

Product Listing Payment

Transaction ID: {transaction.id}

{transaction.amount}

{transaction.status}

{formatDate(transaction.timestamp)}

{transaction.upiId}

{transaction.transactionRef && (

Reference Number: {transaction.transactionRef}

)} {transaction.productId && (

Product ID: {transaction.productId}

)}

))}

)}

) } [V0_FILE]typescriptreact:file="lib/auth.ts" isMerged="true" "use client" export interface User { id: string name: string phone: string email?: string role: "user" | "admin" avatar?: string location?: string joinedAt: number isVerified: boolean } export interface AuthState { user: User | null isAuthenticated: boolean isLoading: boolean } class AuthService { private users: Map = new Map() private currentUser: User | null = null private authCallbacks: ((state: AuthState) => void)[] = [] constructor() { this.loadFromStorage() // Add default admin user this.createDefaultAdmin() } private createDefaultAdmin() { const adminUser: User = { id: "admin-001", name: "Admin User", phone: "8797221991", email: "admin@shopsee.in", role: "admin", location: "Delhi", joinedAt: Date.now(), isVerified: true, } this.users.set(adminUser.phone, adminUser) this.saveToStorage() } private loadFromStorage() { if (typeof window !== "undefined") { const savedUsers = localStorage.getItem("shopsee_users") const savedCurrentUser = localStorage.getItem("shopsee_current_user") if (savedUsers) { const usersArray = JSON.parse(savedUsers) this.users = new Map(usersArray) } if (savedCurrentUser) { this.currentUser = JSON.parse(savedCurrentUser) } } } private saveToStorage() { if (typeof window !== "undefined") { localStorage.setItem("shopsee_users", JSON.stringify(Array.from(this.users.entries()))) localStorage.setItem("shopsee_current_user", JSON.stringify(this.currentUser)) } } private notifyCallbacks() { const state: AuthState = { user: this.currentUser, isAuthenticated: !!this.currentUser, isLoading: false, } this.authCallbacks.forEach((callback) => callback(state)) } onAuthStateChange(callback: (state: AuthState) => void) { this.authCallbacks.push(callback) // Immediately call with current state callback({ user: this.currentUser, isAuthenticated: !!this.currentUser, isLoading: false, }) } async register(userData: { name: string phone: string email?: string location?: string }): Promise<{ success: boolean; message: string; user?: User }> { // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 1000)) if (this.users.has(userData.phone)) { return { success: false, message: "यह फोन नंबर पहले से रजिस्टर्ड है", } } const newUser: User = { id: `user-${Date.now()}`, name: userData.name, phone: userData.phone, email: userData.email, role: "user", location: userData.location, joinedAt: Date.now(), isVerified: false, } this.users.set(userData.phone, newUser) this.currentUser = newUser this.saveToStorage() this.notifyCallbacks() return { success: true, message: "सफलतापूर्वक रजिस्टर हो गए!", user: newUser, } } async login(phone: string, otp?: string): Promise<{ success: boolean; message: string; user?: User }> { // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 1000)) const user = this.users.get(phone) if (!user) { return { success: false, message: "यह फोन नंबर रजिस्टर्ड नहीं है", } } // Simulate OTP verification (in real app, verify actual OTP) if (otp && otp !== "1234") { return { success: false, message: "गलत OTP डाला गया है", } } this.currentUser = user this.saveToStorage() this.notifyCallbacks() return { success: true, message: "सफलतापूर्वक लॉगिन हो गए!", user, } } async logout(): Promise { this.currentUser = null this.saveToStorage() this.notifyCallbacks() } getCurrentUser(): User | null { return this.currentUser } getAllUsers(): User[] { return Array.from(this.users.values()) } async updateProfile(updates: Partial): Promise<{ success: boolean; message: string }> { if (!this.currentUser) { return { success: false, message: "कृपया पहले लॉगिन करें" } } const updatedUser = { ...this.currentUser, ...updates } this.users.set(this.currentUser.phone, updatedUser) this.currentUser = updatedUser this.saveToStorage() this.notifyCallbacks() return { success: true, message: "प्रोफाइल अपडेट हो गई!" } } } export const authService = new AuthService() [V0_FILE]typescriptreact:file="components/auth-modal.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { X, Phone, User, Mail, MapPin, Shield } from "lucide-react" import { authService } from "@/lib/auth" interface AuthModalProps { isOpen: boolean onClose: () => void mode: "login" | "register" onModeChange: (mode: "login" | "register") => void } export default function AuthModal({ isOpen, onClose, mode, onModeChange }: AuthModalProps) { const [formData, setFormData] = useState({ name: "", phone: "", email: "", location: "", otp: "", }) const [step, setStep] = useState<"phone" | "otp" | "details">("phone") const [isLoading, setIsLoading] = useState(false) const [message, setMessage] = useState("") const handleInputChange = (e: React.ChangeEvent) => { setFormData({ ...formData, [e.target.name]: e.target.value, }) } const handlePhoneSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!formData.phone || formData.phone.length !== 10) { setMessage("कृपया सही फोन नंबर डालें") return } setIsLoading(true) setMessage("OTP भेजा जा रहा है...") // Simulate OTP sending setTimeout(() => { setStep("otp") setMessage("आपके फोन पर OTP भेजा गया है (Demo: 1234)") setIsLoading(false) }, 2000) } const handleOTPSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!formData.otp) { setMessage("कृपया OTP डालें") return } setIsLoading(true) if (mode === "login") { const result = await authService.login(formData.phone, formData.otp) if (result.success) { onClose() setMessage("") resetForm() } else { setMessage(result.message) } } else { if (formData.otp === "1234") { setStep("details") setMessage("") } else { setMessage("गलत OTP डाला गया है") } } setIsLoading(false) } const handleRegisterSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!formData.name) { setMessage("कृपया अपना नाम डालें") return } setIsLoading(true) const result = await authService.register({ name: formData.name, phone: formData.phone, email: formData.email, location: formData.location, }) if (result.success) { onClose() setMessage("") resetForm() } else { setMessage(result.message) } setIsLoading(false) } const resetForm = () => { setFormData({ name: "", phone: "", email: "", location: "", otp: "", }) setStep("phone") setMessage("") } const handleClose = () => { onClose() resetForm() } if (!isOpen) return null return (

{mode === "login" ? "लॉगिन करें" : "रजिस्टर करें"}

{step === "phone" ? "अपना फोन नंबर डालें" : step === "otp" ? "OTP वेरिफिकेशन" : "अपनी जानकारी भरें"}

{message && (

{message}

)} {step === "phone" && ( )} {step === "otp" && ( )} {step === "details" && ( )}

{mode === "login" ? "नया यूजर हैं?" : "पहले से अकाउंट है?"}

) } [V0_FILE]typescriptreact:file="components/search-filter.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Search, Filter, MapPin, IndianRupee, X } from "lucide-react" interface SearchFilterProps { onSearch: (query: string) => void onFilter: (filters: FilterOptions) => void onLocationFilter: (location: string) => void } export interface FilterOptions { category: string minPrice: number maxPrice: number location: string sortBy: "newest" | "price-low" | "price-high" | "name" } export default function SearchFilter({ onSearch, onFilter, onLocationFilter }: SearchFilterProps) { const [searchQuery, setSearchQuery] = useState("") const [showFilters, setShowFilters] = useState(false) const [filters, setFilters] = useState({ category: "", minPrice: 0, maxPrice: 0, location: "", sortBy: "newest", }) const categories = [ { value: "", label: "सभी श्रेणियाँ" }, { value: "electronics", label: "इलेक्ट्रॉनिक्स" }, { value: "furniture", label: "फर्नीचर" }, { value: "clothing", label: "कपड़े" }, { value: "vehicles", label: "वाहन" }, { value: "books", label: "पुस्तकें" }, { value: "other", label: "अन्य" }, ] const locations = ["दिल्ली", "मुंबई", "बैंगलोर", "चेन्नई", "कोलकाता", "हैदराबाद", "पुणे", "अहमदाबाद", "जयपुर", "लखनऊ"] const handleSearchSubmit = (e: React.FormEvent) => { e.preventDefault() onSearch(searchQuery) } const handleFilterChange = (key: keyof FilterOptions, value: any) => { const newFilters = { ...filters, [key]: value } setFilters(newFilters) onFilter(newFilters) } const clearFilters = () => { const clearedFilters: FilterOptions = { category: "", minPrice: 0, maxPrice: 0, location: "", sortBy: "newest", } setFilters(clearedFilters) onFilter(clearedFilters) setSearchQuery("") onSearch("") } return (

{/* Search Bar */} {/* Quick Location Filter */}

स्थान: {locations.slice(0, 6).map((location) => ( ))}

{/* Advanced Filters */} {showFilters && (

{/* Category Filter */}

श्रेणी

{/* Price Range */}

न्यूनतम कीमत

handleFilterChange("minPrice", Number(e.target.value) || 0)} placeholder="0" className="w-full pl-8 pr-2 py-2 border border-gray-300 rounded-lg focus:border-indigo-500 focus:outline-none" />

अधिकतम कीमत

handleFilterChange("maxPrice", Number(e.target.value) || 0)} placeholder="कोई सीमा नहीं" className="w-full pl-8 pr-2 py-2 border border-gray-300 rounded-lg focus:border-indigo-500 focus:outline-none" />

{/* Sort By */}

क्रमबद्ध करें

{/* Clear Filters */}

)}

) } [V0_FILE]typescriptreact:file="components/contact-system.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Phone, MessageCircle, Mail, MapPin, Clock, X, Send } from "lucide-react" import type { Product } from "@/app/page" import type { User } from "@/lib/auth" interface ContactSystemProps { product: Product seller: User | null buyer: User | null onClose: () => void } export default function ContactSystem({ product, seller, buyer, onClose }: ContactSystemProps) { const [activeTab, setActiveTab] = useState<"info" | "chat">("info") const [message, setMessage] = useState("") const [chatMessages, setChatMessages] = useState([ { id: 1, sender: "buyer", message: `नमस्ते! मुझे ${product.name} के बारे में जानकारी चाहिए।`, timestamp: Date.now() - 300000, }, { id: 2, sender: "seller", message: "नमस्ते! जी हाँ, यह उत्पाद उपलब्ध है। आप कब देखना चाहेंगे?", timestamp: Date.now() - 240000, }, ]) const handleSendMessage = (e: React.FormEvent) => { e.preventDefault() if (!message.trim()) return const newMessage = { id: chatMessages.length + 1, sender: "buyer", message: message.trim(), timestamp: Date.now(), } setChatMessages([...chatMessages, newMessage]) setMessage("") // Simulate seller response setTimeout(() => { const responses = [ "धन्यवाद! मैं जल्दी जवाब दूंगा।", "जी हाँ, यह उपलब्ध है।", "आप कब मिल सकते हैं?", "कीमत में कोई बात-चीत हो सकती है।", ] const randomResponse = responses[Math.floor(Math.random() * responses.length)] setChatMessages((prev) => [ ...prev, { id: prev.length + 1, sender: "seller", message: randomResponse, timestamp: Date.now(), }, ]) }, 2000) } const formatTime = (timestamp: number) => { return new Date(timestamp).toLocaleTimeString("hi-IN", { hour: "2-digit", minute: "2-digit", }) } const handleCall = () => { if (seller?.phone) { window.open(`tel:${seller.phone}`) } } const handleWhatsApp = () => { if (seller?.phone) { const message = `नमस्ते! मुझे आपका ${product.name} (₹${product.price}) देखना है। Shopsee Market से मिला आपका नंबर।` window.open(`https://wa.me/91${seller.phone}?text=${encodeURIComponent(message)}`) } } return (

{/* Header */}

{product.image ? ( {product.name}

) : (

📦

)}

{product.name}

₹{product.price.toLocaleString()}

विक्रेता: {seller?.name || "अज्ञात"}

{/* Tabs */}

{/* Content */}

{activeTab === "info" && (

{/* Seller Info */}

{seller?.name?.charAt(0) || "?"}
विक्रेता की जानकारी

{seller?.phone || "फोन नंबर उपलब्ध नहीं"}

{seller?.location && (

{seller.location}

)} {seller?.email && (

{seller.email}

)}

सदस्य बने: {seller ? new Date(seller.joinedAt).toLocaleDateString("hi-IN") : "अज्ञात"}

{/* Contact Actions */}

{/* Product Details */}

उत्पाद विवरण

{product.description}

{/* Safety Tips */}

🛡️ सुरक्षा सुझाव

• सामान खरीदने से पहले जरूर देख लें
• पब्लिक जगह पर मिलें
• पैसे देने से पहले सामान की जांच करें
• संदिग्ध लगे तो तुरंत रिपोर्ट करें

)} {activeTab === "chat" && (

{/* Chat Messages */}

{chatMessages.map((msg) => (

{msg.message}

{formatTime(msg.timestamp)}

))}

{/* Message Input */}

)}

) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/products-section.tsx" isEdit="true" isMerged="true" "use client" import type { Product } from "@/app/page" import { PackageOpen, Phone, MessageCircle } from "lucide-react" interface ProductsSectionProps { products: Product[] onProductClick?: (product: Product) => void } export default function ProductsSection({ products, onProductClick }: ProductsSectionProps) { const getCategoryName = (category: string) => { const categories: { [key: string]: string } = { electronics: "इलेक्ट्रॉनिक्स", furniture: "फर्नीचर", clothing: "कपड़े", vehicles: "वाहन", books: "पुस्तकें", other: "अन्य", } return categories[category] || "अन्य" } const getRandomGradient = () => { const gradients = [ "from-purple-400 to-pink-400", "from-blue-400 to-purple-500", "from-green-400 to-blue-500", "from-yellow-400 to-orange-500", "from-pink-400 to-red-500", "from-indigo-400 to-purple-500", ] return gradients[Math.floor(Math.random() * gradients.length)] } // Filter products to display based on visibility and payment status const displayProducts = products.filter((product) => product.isVisible || product.paymentStatus === "pending") const getStatusLED = (product: Product) => { switch (product.paymentStatus) { case "paid": return (

LIVE

) case "pending": return (

PENDING

) case "rejected": return (

REJECTED

) default: return null } } return (

उपलब्ध उत्पाद

🟢 = Live Products (Payment Done) | 🔴 = Pending Payment

{displayProducts.length === 0 ? (

कोई उत्पाद नहीं मिला

अलग फिल्टर का उपयोग करके देखें या नया उत्पाद जोड़ें

) : (

{displayProducts.map((product) => (

onProductClick?.(product)} // Always allow click, handle logic inside onProductClick >

{product.image ? ( {product.name}

) : ( )} {/* LED Status Indicator */} {getStatusLED(product)} {/* Payment Required Overlay for Pending Products */} {product.paymentStatus === "pending" && (

💳

Payment Required

₹10 to Go Live

)} {/* Hover overlay - only for paid products */} {product.paymentStatus === "paid" && (

)}

{getCategoryName(product.category)} {product.paymentStatus === "pending" && ( ₹10 Payment Due )}

{product.name}

₹{product.price.toLocaleString()}

{product.description}

{product.seller.charAt(0)}

विक्रेता

{product.seller}

))}

)}

) } [V0_FILE]typescriptreact:file="components/admin-panel.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Shield, Users, Package, TrendingUp, CheckCircle, XCircle, Eye, Trash2, CreditCard } from "lucide-react" import type { Product } from "@/app/page" import type { User } from "@/lib/auth" import { authService } from "@/lib/auth" interface AdminPanelProps { products: Product[] onApproveProduct: (productId: number) => void onRejectProduct: (productId: number) => void onDeleteProduct: (productId: number) => void onUpdateProductPaymentStatus: ( productId: number, status: "paid" | "rejected", isVisible: boolean, highlighted: boolean, ) => void // New prop for payment status control } export default function AdminPanel({ products, onApproveProduct, onRejectProduct, onDeleteProduct, onUpdateProductPaymentStatus, }: AdminPanelProps) { const [activeTab, setActiveTab] = useState<"overview" | "products" | "payments" | "users">("overview") const [users, setUsers] = useState([]) const [selectedProduct, setSelectedProduct] = useState(null) useEffect(() => { setUsers(authService.getAllUsers()) }, []) const pendingProducts = products.filter((p) => !p.highlighted) const approvedProducts = products.filter((p) => p.highlighted) const totalRevenue = products.length * 10 const pendingPayments = products.filter((p) => p.paymentStatus === "pending") const paidProducts = products.filter((p) => p.paymentStatus === "paid") const handleProductAction = (product: Product, action: "approve" | "reject" | "delete") => { switch (action) { case "approve": onApproveProduct(product.id) break case "reject": onRejectProduct(product.id) break case "delete": onDeleteProduct(product.id) break } setSelectedProduct(null) } const handlePaymentAction = (product: Product, action: "approve" | "reject") => { if (action === "approve") { onUpdateProductPaymentStatus(product.id, "paid", true, true) // Set to paid, visible, and highlighted } else { onUpdateProductPaymentStatus(product.id, "rejected", false, false) // Set to rejected, not visible, not highlighted } setSelectedProduct(null) } return (

{/* Header */}

Admin Panel

Shopsee Market Management Dashboard

{/* Tabs */}

{[ { id: "overview", label: "Overview", icon: TrendingUp }, { id: "payments", label: "Payments", icon: CreditCard }, { id: "products", label: "Products", icon: Package }, { id: "users", label: "Users", icon: Users }, ].map((tab) => ( ))}

{/* Overview Tab */} {activeTab === "overview" && (

Pending Payments

{pendingPayments.length}

Live Products

{paidProducts.length}

Total Revenue

₹{paidProducts.length * 10}

Pending Revenue

₹{pendingPayments.length * 10}

)} {/* Payments Tab - NEW */} {activeTab === "payments" && (

Payment Management

Control LED status - Turn products ON/OFF

{products.map((product) => ( ))}

LED Status	Product	Price	Seller	Payment Status	Actions
{product.paymentStatus === "paid" ? "🟢 LIVE" : product.paymentStatus === "pending" ? "🔴 PENDING" : "⚫ OFF"}	{product.image ? ( ) : ( )} {product.name} {product.category}	₹{product.price.toLocaleString()}	{product.seller}	{product.paymentStatus === "paid" ? "₹10 PAID" : product.paymentStatus === "pending" ? "₹10 PENDING" : "REJECTED"}	{product.paymentStatus === "pending" && ( <> )} {product.paymentStatus === "paid" && ( )} {product.paymentStatus === "rejected" && ( )}

)} {/* Products Tab */} {activeTab === "products" && (

Product Management

Approve, reject, or delete products

{products.map((product) => ( ))}

Product	Price	Seller	Status	Actions
{product.image ? ( ) : ( )} {product.name} {product.category}	₹{product.price.toLocaleString()}	{product.seller}	{product.highlighted ? "Approved" : "Pending"}	{!product.highlighted && ( )}

)} {/* Users Tab */} {activeTab === "users" && (

User Management

Manage registered users

{users.map((user) => ( ))}

User	Phone	Location	Role	Joined
{user.name.charAt(0)} {user.name} {user.email}	{user.phone}	{user.location \|\| "Not specified"}	{user.role}	{new Date(user.joinedAt).toLocaleDateString("hi-IN")}

)} {/* Product Detail Modal */} {selectedProduct && (

Product Details

{selectedProduct.image ? ( {selectedProduct.name}

) : (

)}

Product Name

{selectedProduct.name}

Price

₹{selectedProduct.price.toLocaleString()}

Seller

{selectedProduct.seller}

Description

{selectedProduct.description}

{!selectedProduct.highlighted && ( )}

)}

) } [V0_FILE]typescriptreact:file="components/product-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import type { Product } from "@/app/page" import { Tag, IndianRupee, List, Phone, Info, Camera, Upload, Copy, Zap, Plus } from "lucide-react" import QRCodeGenerator from "./qr-code-generator" import PaymentVerificationModal from "./payment-verification-modal" import TransactionHistory from "./transaction-history" import { paymentVerificationService } from "@/lib/payment-verification" import type { PaymentTransaction } from "@/lib/payment-verification" interface ProductFormProps { onAddProduct: (product: Omit) => void onPaymentSuccess: () => void onPaymentError: () => void } export default function ProductForm({ onAddProduct, onPaymentSuccess, onPaymentError }: ProductFormProps) { const [formData, setFormData] = useState({ name: "", price: "", category: "", description: "", seller: "", }) const [image, setImage] = useState(null) const [isLoading, setIsLoading] = useState(false) const [showVerificationModal, setShowVerificationModal] = useState(false) const [currentTransactionId, setCurrentTransactionId] = useState(null) const [showTransactionHistory, setShowTransactionHistory] = useState(false) const handleInputChange = (e: React.ChangeEvent) => { setFormData({ ...formData, [e.target.name]: e.target.value, }) } const handleImageUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { const reader = new FileReader() reader.onload = (event) => { setImage(event.target?.result as string) } reader.readAsDataURL(file) } } const copyUpiId = async () => { try { await navigator.clipboard.writeText("8797221991") // Changed from "8797221991-2@axl" // You could add a toast notification here } catch (err) { console.error("Failed to copy UPI ID:", err) } } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) try { // Initiate payment verification const transactionId = await paymentVerificationService.initiatePaymentVerification( "8797221991", // Changed from "8797221991-2@axl" 10, `product-${Date.now()}`, formData.seller, ) setCurrentTransactionId(transactionId) setShowVerificationModal(true) setIsLoading(false) } catch (error) { console.error("Error initiating payment verification:", error) onPaymentError() setIsLoading(false) } } const handleVerificationComplete = (success: boolean, transaction?: PaymentTransaction) => { setShowVerificationModal(false) setCurrentTransactionId(null) if (success && transaction) { const product = { name: formData.name, price: Number.parseFloat(formData.price), category: formData.category, description: formData.description, seller: formData.seller, image: image || undefined, } onAddProduct(product) onPaymentSuccess() // Reset form setFormData({ name: "", price: "", category: "", description: "", seller: "", }) setImage(null) } else { onPaymentError() } } return (

अपना उत्पाद सूचीबद्ध करें

केवल ₹10 के छोटे से शुल्क के साथ अपने उत्पाद को हजारों ग्राहकों तक पहुँचाएं

{/* Main Form */}

नया उत्पाद जोड़ें

सभी जानकारी भरें और अपना उत्पाद बेचना शुरू करें

उत्पाद का नाम

कीमत (₹)

श्रेणी

आपका फोन नंबर

उत्पाद विवरण

</div>

<div>
                  <label className="flex items-center gap-2 text-gray-700 font-semibold mb-2">
                    <Camera className="w-4 h-4" />
                    उत्पाद फोटो
                  </label>
                  <div className="relative">
                    <input
                      type="file"
                      accept="image/*"
                      onChange={handleImageUpload}
                      className="hidden"
                      id="image-upload"
                    />
                    <label
                      htmlFor="image-upload"
                      className="block border-3 border-dashed border-indigo-300 rounded-2xl p-8 text-center bg-indigo-50 hover:bg-indigo-100 cursor-pointer transition-colors"
                    >
                      <div className="absolute top-4 right-4 bg-indigo-600 text-white px-3 py-1 rounded-full text-sm flex items-center gap-1">
                        <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                          <path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM13 3v8h8V3h-8zm6 6h-2v2h2v-2zM18 15h-2v2h2v-2zM16 15h-2v2h2v-2zM18 17h-2v2h2v-2z" />
                        </svg>
                        स्कैनर से अपलोड
                      </div>

{image ? (
                        <div>
                          <img
                            src={image || "/placeholder.svg"}
                            alt="Uploaded"
                            className="max-w-full max-h-32 mx-auto rounded-lg mb-4"
                          />
                          <p className="text-green-600 font-semibold">फोटो अपलोड सफल!</p>
                          <p className="text-gray-600">फोटो बदलने के लिए फिर से क्लिक करें</p>
                        </div>
                      ) : (
                        <div>
                          <Upload className="w-12 h-12 text-indigo-500 mx-auto mb-4" />
                          <p className="text-lg font-semibold text-gray-700 mb-2">फोटो अपलोड करने के लिए क्लिक करें</p>
                          <p className="text-gray-500">या फोटो को यहाँ खींचें</p>
                        </div>
                      )}
                    </label>
                  </div>
                </div>

{/* Payment Section */}
                <div className="bg-gradient-to-r from-indigo-900 to-purple-900 rounded-2xl p-8 text-white text-center">
                  <h3 className="text-2xl font-bold mb-4 flex items-center justify-center gap-2">
                    <Zap className="w-6 h-6" />
                    उत्पाद सूचीबद्ध करने के लिए भुगतान करें
                  </h3>
                  <p className="mb-4">अपने उत्पाद को विशेष रूप से हाइलाइट करने के लिए</p>
                  <div className="text-4xl font-bold mb-6">₹10</div>
                  <p className="mb-6">भुगतान करने के लिए QR कोड स्कैन करें</p>

<div className="bg-white/20 rounded-xl p-4 flex items-center justify-between max-w-sm mx-auto mb-6">
                    <span className="font-semibold">8797221991</span> {/* Changed UPI ID to PhonePe Number */}
                    <button
                      type="button"
                      onClick={copyUpiId}
                      className="bg-white/20 hover:bg-white/30 rounded-full p-2 transition-colors"
                    >
                      <Copy className="w-4 h-4" />
                    </button>
                  </div>

<div className="bg-white/20 rounded-xl p-4">
                    <p className="flex items-center justify-center gap-2 mb-2">
                      <Phone className="w-4 h-4" />
                      PhonePe Number: 8797221991 {/* Changed text and number */}
                    </p>
                    <p className="flex items-center justify-center gap-2">
                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H4zm0 2h12v8H4V6z" />
                      </svg>
                      PhonePe • All UPI Apps Supported {/* Changed text */}
                    </p>
                  </div>
                </div>

<div className="text-center text-white mt-6">
                  <p className="text-lg font-semibold">Thank you for your payment!</p>
                  <p className="text-sm opacity-80">आपका भुगतान प्राप्त होने पर आपका उत्पाद लाइव हो जाएगा।</p>
                </div>

<button
                  type="submit"
                  disabled={isLoading}
                  className="w-full bg-gradient-to-r from-indigo-600 to-indigo-700 text-white py-4 rounded-2xl font-bold text-lg hover:from-indigo-700 hover:to-indigo-800 transition-all duration-300 transform hover:-translate-y-1 shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {isLoading ? (
                    <div className="flex items-center justify-center gap-2">
                      <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                      प्रसंस्करण...
                    </div>
                  ) : (
                    <span className="flex items-center justify-center gap-2">
                      <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
                      </svg>
                      उत्पाद सूचीबद्ध करें और ₹10 भुगतान करें
                    </span>
                  )}
                </button>
              </form>
            </div>
          </div>

{/* Transaction History Sidebar */}
          <div className="lg:col-span-1">
            <div className="sticky top-8">
              <div className="mb-6">
                <button
                  onClick={() => setShowTransactionHistory(!showTransactionHistory)}
                  className="w-full bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-3 px-4 rounded-xl font-semibold hover:from-purple-700 hover:to-indigo-700 transition-all duration-300"
                >
                  {showTransactionHistory ? "Hide" : "Show"} Transaction History
                </button>
              </div>

{showTransactionHistory && <TransactionHistory customerPhone={formData.seller} />}
            </div>
          </div>
        </div>
      </div>

{/* Payment Verification Modal */}
      <PaymentVerificationModal
        isOpen={showVerificationModal}
        onClose={() => setShowVerificationModal(false)}
        transactionId={currentTransactionId}
        onVerificationComplete={handleVerificationComplete}
      />
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/qr-code-generator.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import { Download, Share2, Copy, Check, Smartphone, Wallet, CreditCard } from "lucide-react"

export default function QRCodeGenerator() {
  const qrRef = useRef<HTMLDivElement>(null)
  const [copied, setCopied] = useState(false)
  const [downloading, setDownloading] = useState(false)
  const [sharing, setSharing] = useState(false)

const upiId = "8797221991" // Updated to PhonePe Number

useEffect(() => {
    if (typeof window !== "undefined" && qrRef.current) {
      // Create QR code using a simple pattern since we can't use external libraries
      const canvas = document.createElement("canvas")
      const ctx = canvas.getContext("2d")
      canvas.width = 160
      canvas.height = 160

if (ctx) {
        // Create a more sophisticated QR-like pattern
        ctx.fillStyle = "#1a2a6c"
        ctx.fillRect(0, 0, 160, 160)

// Add white squares in a QR-like pattern
        ctx.fillStyle = "#ffffff"
        const squareSize = 8
        for (let i = 0; i < 20; i++) {
          for (let j = 0; j < 20; j++) {
            if ((i + j) % 3 === 0 || (i * j) % 7 === 0) {
              ctx.fillRect(i * squareSize, j * squareSize, squareSize, squareSize)
            }
          }
        }

// Add corner squares (typical QR code pattern)
        ctx.fillStyle = "#1a2a6c"
        // Top-left corner
        ctx.fillRect(0, 0, 56, 56)
        ctx.fillStyle = "#ffffff"
        ctx.fillRect(8, 8, 40, 40)
        ctx.fillStyle = "#1a2a6c"
        ctx.fillRect(16, 16, 24, 24)

// Top-right corner
        ctx.fillStyle = "#1a2a6c"
        ctx.fillRect(104, 0, 56, 56)
        ctx.fillStyle = "#ffffff"
        ctx.fillRect(112, 8, 40, 40)
        ctx.fillStyle = "#1a2a6c"
        ctx.fillRect(120, 16, 24, 24)

// Bottom-left corner
        ctx.fillStyle = "#1a2a6c"
        ctx.fillRect(0, 104, 56, 56)
        ctx.fillStyle = "#ffffff"
        ctx.fillRect(8, 112, 40, 40)
        ctx.fillStyle = "#1a2a6c"
        ctx.fillRect(16, 120, 24, 24)

qrRef.current.innerHTML = ""
        qrRef.current.appendChild(canvas)
      }
    }
  }, [])

const copyUpiId = async () => {
    try {
      await navigator.clipboard.writeText(upiId)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch (err) {
      console.error("Failed to copy PhonePe Number:", err)
    }
  }

const downloadQR = () => {
    setDownloading(true)
    setTimeout(() => {
      setDownloading(false)
      alert("QR Code downloaded successfully!")
    }, 1500)
  }

const shareQR = () => {
    setSharing(true)
    setTimeout(() => {
      setSharing(false)
      alert("QR Code shared successfully!")
    }, 1500)
  }

const openApp = (appName: string) => {
    alert(`Opening ${appName} to scan QR code...`)
  }

return (
    <div className="max-w-md mx-auto">
      <div className="bg-white rounded-3xl shadow-2xl overflow-hidden relative transform-gpu">
        {/* Market Badge */}
        <div className="absolute -top-2 -right-2 bg-gradient-to-r from-orange-500 to-pink-500 text-white px-4 py-2 rounded-2xl font-bold text-sm transform rotate-12 shadow-lg z-10">
          MARKET QR
        </div>

{/* Watermark */}
        <div className="absolute top-5 right-6 text-gray-100 text-xs font-bold tracking-widest transform rotate-12 opacity-20">
          PHONEPE
        </div>

<div className="p-8">
          {/* Bank Header */}
          <div className="flex items-start justify-between mb-8">
            <div className="flex-1">
              <div className="flex items-center mb-2">
                <div className="w-10 h-10 bg-gradient-to-br from-purple-600 to-blue-600 rounded-full flex items-center justify-center text-white font-bold text-lg mr-3 shadow-lg">
                  PP
                </div>
                <div>
                  <h2 className="text-gray-800 font-bold text-lg leading-tight">PhonePe Payments</h2>{" "}
                  {/* Updated text */}
                </div>
              </div>
              <p className="text-gray-500 text-sm ml-13">Primary account for receiving money</p>
            </div>
          </div>

{/* QR Section */}
          <div className="bg-gray-50 rounded-2xl p-6 mb-6 relative">
            <div className="absolute inset-0 bg-gradient-to-br from-indigo-900/10 to-red-700/10 rounded-2xl blur-xl opacity-30 animate-pulse"></div>

<div className="text-center relative z-10">
              <h3 className="text-gray-800 font-semibold text-lg mb-2">Scan QR Code to Pay</h3>
              <p className="text-gray-500 text-sm mb-6 max-w-xs mx-auto">
                Supported on all UPI apps. No need to share bank details.
              </p>

{/* Logo Overlay */}
                  <div className="absolute inset-0 flex items-center justify-center">
                    <div className="w-12 h-12 bg-white rounded-lg shadow-md flex items-center justify-center">
                      <div className="w-8 h-8 bg-gradient-to-br from-indigo-900 to-red-700 rounded-md flex items-center justify-center">
                        <span className="text-white font-bold text-xs">₹</span>
                      </div>
                    </div>
                  </div>
                </div>

{/* Glow Effect */}
                <div className="absolute inset-0 bg-gradient-to-br from-indigo-900 to-red-700 rounded-3xl blur-2xl opacity-20 group-hover:opacity-40 transition-opacity duration-300 -z-10"></div>
              </div>
            </div>
          </div>

{/* Divider */}
          <div className="h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent mb-6"></div>

{/* UPI ID Section */}
          <div className="text-center mb-6">
            <p className="text-gray-500 text-xs uppercase tracking-wider mb-3">PhonePe Number</p> {/* Updated text */}
            <div className="bg-gray-50 rounded-xl p-4 flex items-center justify-between border border-gray-100">
              <span className="font-semibold text-gray-800 text-lg tracking-wide">{upiId}</span>
              <button onClick={copyUpiId} className="text-indigo-600 hover:text-indigo-800 transition-colors p-1">
                {copied ? <Check className="w-5 h-5 text-green-600" /> : <Copy className="w-5 h-5" />}
              </button>
            </div>
          </div>

{/* Action Buttons */}
          <div className="flex gap-3 mb-6">
            <button
              onClick={downloadQR}
              disabled={downloading}
              className="flex-1 bg-gradient-to-r from-indigo-900 to-red-700 text-white py-3 px-4 rounded-xl font-semibold flex items-center justify-center gap-2 hover:shadow-lg transition-all duration-300 disabled:opacity-70"
            >
              {downloading ? (
                <>
                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                  Downloading...
                </>
              ) : (
                <>
                  <Download className="w-4 h-4" />
                  Download QR
                </>
              )}
            </button>
            <button
              onClick={shareQR}
              disabled={sharing}
              className="flex-1 bg-gradient-to-r from-green-500 to-green-600 text-white py-3 px-4 rounded-xl font-semibold flex items-center justify-center gap-2 hover:shadow-lg transition-all duration-300 disabled:opacity-70"
            >
              {sharing ? (
                <>
                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                  Sharing...
                </>
              ) : (
                <>
                  <Share2 className="w-4 h-4" />
                  Share QR
                </>
              )}
            </button>
          </div>

{/* Divider */}
          <div className="h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent mb-6"></div>

{/* Supported Apps */}
          <div className="text-center">
            <p className="text-gray-500 text-xs uppercase tracking-wider mb-4">Supported on all UPI apps</p>
            <div className="grid grid-cols-3 gap-3">
              <button
                onClick={() => openApp("PhonePe")}
                className="bg-white border-2 border-gray-100 rounded-xl p-4 flex flex-col items-center gap-2 hover:border-indigo-300 hover:shadow-md transition-all duration-300 group"
              >
                <div className="w-8 h-8 bg-gradient-to-br from-purple-600 to-blue-600 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
                  <Smartphone className="w-4 h-4" />
                </div>
                <span className="text-sm font-medium text-gray-700">PhonePe</span>
              </button>

<button
                onClick={() => openApp("Google Pay")}
                className="bg-white border-2 border-gray-100 rounded-xl p-4 flex flex-col items-center gap-2 hover:border-green-300 hover:shadow-md transition-all duration-300 group"
              >
                <div className="w-8 h-8 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
                  <Wallet className="w-4 h-4" />
                </div>
                <span className="text-sm font-medium text-gray-700">Google Pay</span>
              </button>

<button
                onClick={() => openApp("Paytm")}
                className="bg-white border-2 border-gray-100 rounded-xl p-4 flex flex-col items-center gap-2 hover:border-orange-300 hover:shadow-md transition-all duration-300 group"
              >
                <div className="w-8 h-8 bg-gradient-to-br from-orange-500 to-orange-600 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
                  <CreditCard className="w-4 h-4" />
                </div>
                <span className="text-sm font-medium text-gray-700">Paytm</span>
              </button>
            </div>
          </div>

{/* Footer */}
          <div className="text-center mt-8 pt-6 border-t border-gray-100">
            <p className="text-gray-500 text-sm">Secured by PhonePe • Scan with any UPI app</p> {/* Updated text */}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Header from "@/components/header"
import ProductsGrid from "@/components/products-grid"
import OrderModal from "@/components/order-modal"
import AdminPanel from "@/components/admin-panel-simple"
import HiddenAdminButton from "@/components/hidden-admin-button"

export interface Product {
  id: number
  name: string
  price: number
  description: string
  image?: string
}

export default function Home() {
  const [products, setProducts] = useState<Product[]>([])
  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null)
  const [showOrderModal, setShowOrderModal] = useState(false)
  const [showAdminPanel, setShowAdminPanel] = useState(false)

// Load products from localStorage
  useEffect(() => {
    const savedProducts = localStorage.getItem("shopseeProducts")
    if (savedProducts) {
      try {
        setProducts(JSON.parse(savedProducts))
      } catch (error) {
        console.error("Error loading products:", error)
      }
    }
  }, [])

// Save products to localStorage
  useEffect(() => {
    localStorage.setItem("shopseeProducts", JSON.stringify(products))
  }, [products])

const handleAddProduct = (newProduct: Omit<Product, "id">) => {
    const product: Product = {
      ...newProduct,
      id: Date.now(),
    }
    setProducts([...products, product])
  }

const handleEditProduct = (id: number, updatedProduct: Omit<Product, "id">) => {
    setProducts(products.map((p) => (p.id === id ? { ...updatedProduct, id } : p)))
  }

const handleDeleteProduct = (id: number) => {
    setProducts(products.filter((p) => p.id !== id))
  }

const handleOrderClick = (product: Product) => {
    setSelectedProduct(product)
    setShowOrderModal(true)
  }

const handleOrderSubmit = (customerData: {
    name: string
    phone: string
    address: string
  }) => {
    if (selectedProduct) {
      const message = `नमस्ते! 🛍️\n\nमुझे यह प्रोडक्ट चाहिए:\n\n📦 ${selectedProduct.name}\n💰 ₹${selectedProduct.price}\n\n👤 मेरा नाम: ${customerData.name}\n📱 मेरा नंबर: ${customerData.phone}\n📍 मेरा एड्रेस: ${customerData.address}\n\nकृपया Shopsee पर उपलब्ध करवाएं। धन्यवाद!`

const whatsappUrl = `https://wa.me/918797221991?text=${encodeURIComponent(message)}`
      window.open(whatsappUrl, "_blank")

setShowOrderModal(false)
      setSelectedProduct(null)
    }
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-indigo-50">
      <Header />
      <HiddenAdminButton onAdminAccess={() => setShowAdminPanel(true)} />

{/* Main Content */}
      <main className="container mx-auto px-4 py-12">
        {products.length === 0 ? (
          <div className="text-center py-16">
            <div className="text-6xl mb-4">🛒</div>
            <h2 className="text-2xl font-bold text-gray-800 mb-2">कोई प्रोडक्ट नहीं</h2>
            <p className="text-gray-600">Admin पैनल से प्रोडक्ट जोड़ें</p>
          </div>
        ) : (
          <ProductsGrid products={products} onOrderClick={handleOrderClick} />
        )}
      </main>

{/* Order Modal */}
      {showOrderModal && (
        <OrderModal
          product={selectedProduct}
          onClose={() => {
            setShowOrderModal(false)
            setSelectedProduct(null)
          }}
          onSubmit={handleOrderSubmit}
        />
      )}

{/* Admin Panel */}
      {showAdminPanel && (
        <AdminPanel
          products={products}
          onAddProduct={handleAddProduct}
          onEditProduct={handleEditProduct}
          onDeleteProduct={handleDeleteProduct}
          onClose={() => setShowAdminPanel(false)}
        />
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Store } from "lucide-react"

export default function Header() {
  return (
    <header className="bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg">
      <div className="container mx-auto px-4 py-6">
        <div className="flex items-center gap-3">
          <Store className="w-8 h-8" />
          <h1 className="text-3xl font-bold">Shopsee Market</h1>
        </div>
        <p className="text-indigo-100 text-sm mt-2">घर बैठे शॉपिंग करें 🛍️</p>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/products-grid.tsx" isMerged="true"
"use client"

import { ShoppingCart } from "lucide-react"
import type { Product } from "@/app/page"

interface ProductsGridProps {
  products: Product[]
  onOrderClick: (product: Product) => void
}

export default function ProductsGrid({ products, onOrderClick }: ProductsGridProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
      {products.map((product) => (
        <div
          key={product.id}
          className="bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2 overflow-hidden group"
        >
          {/* Product Image */}
          <div className="h-48 bg-gradient-to-br from-purple-400 to-pink-400 flex items-center justify-center relative overflow-hidden">
            {product.image ? (
              <img
                src={product.image || "/placeholder.svg"}
                alt={product.name}
                className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
              />
            ) : (
              <div className="text-6xl">📦</div>
            )}
          </div>

{/* Product Info */}
          <div className="p-4">
            <h3 className="text-lg font-bold text-gray-900 mb-2 line-clamp-2">{product.name}</h3>

<p className="text-gray-600 text-sm mb-4 line-clamp-2">{product.description}</p>

<div className="flex items-center justify-between mb-4">
              <div className="text-3xl font-bold text-green-600">₹{product.price}</div>
            </div>

<button
              onClick={() => onOrderClick(product)}
              className="w-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-3 px-4 rounded-xl font-bold flex items-center justify-center gap-2 hover:from-indigo-700 hover:to-purple-700 transition-all"
            >
              <ShoppingCart className="w-5 h-5" />
              ऑर्डर करें
            </button>
          </div>
        </div>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/order-modal.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { X, User, Phone, MapPin } from "lucide-react"
import type { Product } from "@/app/page"

interface OrderModalProps {
  product: Product | null
  onClose: () => void
  onSubmit: (data: { name: string; phone: string; address: string }) => void
}

export default function OrderModal({ product, onClose, onSubmit }: OrderModalProps) {
  const [formData, setFormData] = useState({
    name: "",
    phone: "",
    address: "",
  })

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (formData.name && formData.phone && formData.address) {
      onSubmit(formData)
    } else {
      alert("कृपया सभी जानकारी भरें")
    }
  }

if (!product) return null

return (
    <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-2xl max-w-md w-full shadow-2xl">
        {/* Header */}
        <div className="bg-gradient-to-r from-indigo-600 to-purple-600 text-white p-6 flex items-center justify-between">
          <h2 className="text-2xl font-bold">ऑर्डर डिटेल्स</h2>
          <button
            onClick={onClose}
            className="w-8 h-8 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

{/* Product Info */}
        <div className="p-6 bg-gray-50 border-b border-gray-200">
          <div className="flex gap-4">
            <div className="w-16 h-16 bg-gradient-to-br from-purple-400 to-pink-400 rounded-lg flex items-center justify-center text-3xl flex-shrink-0">
              {product.image ? (
                <img
                  src={product.image || "/placeholder.svg"}
                  alt={product.name}
                  className="w-full h-full object-cover rounded-lg"
                />
              ) : (
                "📦"
              )}
            </div>
            <div>
              <h3 className="font-bold text-gray-900">{product.name}</h3>
              <p className="text-2xl font-bold text-green-600 mt-1">₹{product.price}</p>
            </div>
          </div>
        </div>

{/* Form */}
        <form onSubmit={handleSubmit} className="p-6 space-y-4">
          <div>
            <label className="flex items-center gap-2 text-gray-700 font-semibold mb-2">
              <User className="w-4 h-4" />
              आपका नाम
            </label>
            <input
              type="text"
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
              placeholder="जैसे: राज कुमार"
              className="w-full p-3 border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:outline-none"
              required
            />
          </div>

<div>
            <label className="flex items-center gap-2 text-gray-700 font-semibold mb-2">
              <Phone className="w-4 h-4" />
              फोन नंबर
            </label>
            <input
              type="tel"
              value={formData.phone}
              onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
              placeholder="10 अंकों का नंबर"
              pattern="[0-9]{10}"
              className="w-full p-3 border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:outline-none"
              required
            />
          </div>

<div>
            <label className="flex items-center gap-2 text-gray-700 font-semibold mb-2">
              <MapPin className="w-4 h-4" />
              आपका एड्रेस
            </label>
            <textarea
              value={formData.address}
              onChange={(e) => setFormData({ ...formData, address: e.target.value })}
              placeholder="पूरा स्थानीय एड्रेस लिखें..."
              rows={3}
              className="w-full p-3 border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:outline-none resize-none"
              required
            />
          </div>

<button
            type="submit"
            className="w-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-3 px-4 rounded-lg font-bold hover:from-indigo-700 hover:to-purple-700 transition-all"
          >
            WhatsApp पर भेजें
          </button>
        </form>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin-panel-simple.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { X, Plus, Edit2, Trash2 } from "lucide-react"
import type { Product } from "@/app/page"

interface AdminPanelProps {
  products: Product[]
  onAddProduct: (product: Omit<Product, "id">) => void
  onEditProduct: (id: number, product: Omit<Product, "id">) => void
  onDeleteProduct: (id: number) => void
  onClose: () => void
}

export default function AdminPanel({
  products,
  onAddProduct,
  onEditProduct,
  onDeleteProduct,
  onClose,
}: AdminPanelProps) {
  const [activeTab, setActiveTab] = useState<"list" | "add" | "edit">("list")
  const [editingProduct, setEditingProduct] = useState<Product | null>(null)
  const [formData, setFormData] = useState({
    name: "",
    price: "",
    description: "",
    image: "",
  })

const handleAddClick = () => {
    setFormData({ name: "", price: "", description: "", image: "" })
    setEditingProduct(null)
    setActiveTab("add")
  }

const handleEditClick = (product: Product) => {
    setFormData({
      name: product.name,
      price: product.price.toString(),
      description: product.description,
      image: product.image || "",
    })
    setEditingProduct(product)
    setActiveTab("edit")
  }

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

if (!formData.name || !formData.price || !formData.description) {
      alert("कृपया सभी जानकारी भरें")
      return
    }

const productData = {
      name: formData.name,
      price: Number(formData.price),
      description: formData.description,
      image: formData.image || undefined,
    }

if (editingProduct) {
      onEditProduct(editingProduct.id, productData)
      alert("प्रोडक्ट अपडेट हो गया!")
    } else {
      onAddProduct(productData)
      alert("नया प्रोडक्ट जोड़ा गया!")
    }

setFormData({ name: "", price: "", description: "", image: "" })
    setActiveTab("list")
  }

const handleDeleteClick = (id: number) => {
    if (window.confirm("क्या आप यह प्रोडक्ट डिलीट करना चाहते हैं?")) {
      onDeleteProduct(id)
      alert("प्रोडक्ट डिलीट हो गया!")
    }
  }

const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      const reader = new FileReader()
      reader.onload = (event) => {
        setFormData({ ...formData, image: event.target?.result as string })
      }
      reader.readAsDataURL(file)
    }
  }

return (
    <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col shadow-2xl">
        {/* Header */}
        <div className="bg-gradient-to-r from-red-600 to-red-800 text-white p-6 flex items-center justify-between">
          <h2 className="text-2xl font-bold">⚙️ Admin Panel</h2>
          <button
            onClick={onClose}
            className="w-8 h-8 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

{/* Tabs */}
        <div className="flex border-b border-gray-200">
          <button
            onClick={() => setActiveTab("list")}
            className={`flex-1 py-4 font-semibold transition-colors ${
              activeTab === "list" ? "bg-indigo-600 text-white" : "bg-gray-50 text-gray-700 hover:bg-gray-100"
            }`}
          >
            प्रोडक्ट्स ({products.length})
          </button>
          <button
            onClick={handleAddClick}
            className={`flex-1 py-4 font-semibold transition-colors ${
              activeTab === "add" ? "bg-indigo-600 text-white" : "bg-gray-50 text-gray-700 hover:bg-gray-100"
            }`}
          >
            नया प्रोडक्ट
          </button>
        </div>

{/* Content */}
        <div className="flex-1 overflow-y-auto p-6">
          {/* List Tab */}
          {activeTab === "list" && (
            <div className="space-y-4">
              {products.length === 0 ? (
                <div className="text-center py-8">
                  <div className="text-4xl mb-2">📭</div>
                  <p className="text-gray-600">कोई प्रोडक्ट नहीं है</p>
                </div>
              ) : (
                products.map((product) => (
                  <div
                    key={product.id}
                    className="bg-gray-50 rounded-lg p-4 flex items-center gap-4 hover:bg-gray-100 transition-colors"
                  >
                    {/* Product Image */}
                    <div className="w-16 h-16 bg-gradient-to-br from-purple-400 to-pink-400 rounded-lg flex-shrink-0 flex items-center justify-center">
                      {product.image ? (
                        <img
                          src={product.image || "/placeholder.svg"}
                          alt={product.name}
                          className="w-full h-full object-cover rounded-lg"
                        />
                      ) : (
                        <span className="text-2xl">📦</span>
                      )}
                    </div>

{/* Product Info */}
                    <div className="flex-1">
                      <h3 className="font-bold text-gray-900">{product.name}</h3>
                      <p className="text-sm text-gray-600 line-clamp-1">{product.description}</p>
                      <p className="text-lg font-bold text-green-600 mt-1">₹{product.price}</p>
                    </div>

{/* Actions */}
                    <div className="flex gap-2">
                      <button
                        onClick={() => handleEditClick(product)}
                        className="p-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                      >
                        <Edit2 className="w-4 h-4" />
                      </button>
                      <button
                        onClick={() => handleDeleteClick(product.id)}
                        className="p-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                ))
              )}
            </div>
          )}

{/* Add/Edit Tab */}
          {(activeTab === "add" || activeTab === "edit") && (
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="block text-gray-700 font-semibold mb-2">प्रोडक्ट का नाम</label>
                <input
                  type="text"
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  placeholder="जैसे: iPhone 15"
                  className="w-full p-3 border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:outline-none"
                  required
                />
              </div>

<div>
                <label className="block text-gray-700 font-semibold mb-2">कीमत (₹)</label>
                <input
                  type="number"
                  value={formData.price}
                  onChange={(e) => setFormData({ ...formData, price: e.target.value })}
                  placeholder="जैसे: 50000"
                  className="w-full p-3 border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:outline-none"
                  required
                />
              </div>

<div>
                <label className="block text-gray-700 font-semibold mb-2">विवरण</label>
                <textarea
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  placeholder="प्रोडक्ट की जानकारी लिखें..."
                  rows={4}
                  className="w-full p-3 border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:outline-none resize-none"
                  required
                />
              </div>

<div>
                <label className="block text-gray-700 font-semibold mb-2">प्रोडक्ट की तस्वीर</label>
                <input type="file" accept="image/*" onChange={handleImageUpload} className="w-full" />
                {formData.image && (
                  <div className="mt-3">
                    <img
                      src={formData.image || "/placeholder.svg"}
                      alt="Preview"
                      className="w-32 h-32 object-cover rounded-lg"
                    />
                  </div>
                )}
              </div>

<button
                type="submit"
                className="w-full bg-gradient-to-r from-green-600 to-green-700 text-white py-3 px-4 rounded-lg font-bold flex items-center justify-center gap-2 hover:from-green-700 hover:to-green-800 transition-all"
              >
                <Plus className="w-5 h-5" />
                {editingProduct ? "अपडेट करें" : "जोड़ें"}
              </button>
            </form>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Shopsee - ऑनलाइन शॉपिंग",
  description: "घर बैठे शॉपिंग करें और WhatsApp पर सीधे ऑर्डर दें",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="hi">
      <body className={inter.className}>{children}</body>
    </html>
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@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.35",
    "next-themes": "^0.4.4",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "5.7.3"
  }
}
[V0_FILE]typescriptreact:file="components/hidden-admin-button.tsx" isEdit="true"
"use client"

import { useState, useRef, useCallback } from "react"

interface HiddenAdminButtonProps {
  onAdminAccess: () => void
}

export default function HiddenAdminButton({ onAdminAccess }: HiddenAdminButtonProps) {
  const [pressTime, setPressTime] = useState(0)
  const pressIntervalRef = useRef<NodeJS.Timeout | null>(null)
  const timeoutRef = useRef<NodeJS.Timeout | null>(null)

const triggerAdminAccess = useCallback(() => {
    if (timeoutRef.current) clearTimeout(timeoutRef.current)
    // Use setTimeout to defer state updates and parent callback
    timeoutRef.current = setTimeout(() => {
      onAdminAccess()
      setPressTime(0)
    }, 0)
  }, [onAdminAccess])

const handleMouseDown = () => {
    setPressTime(0)
    pressIntervalRef.current = setInterval(() => {
      setPressTime((prev) => {
        const newTime = prev + 100
        if (newTime >= 10000) {
          // 10 seconds = 10000ms
          if (pressIntervalRef.current) clearInterval(pressIntervalRef.current)
          triggerAdminAccess()
        }
        return newTime
      })
    }, 100)
  }

const handleMouseUp = () => {
    if (pressIntervalRef.current) {
      clearInterval(pressIntervalRef.current)
    }
    setPressTime(0)
  }

return (
    <div className="fixed top-4 right-4 z-40">
      <button
        onMouseDown={handleMouseDown}
        onMouseUp={handleMouseUp}
        onMouseLeave={handleMouseUp}
        onTouchStart={handleMouseDown}
        onTouchEnd={handleMouseUp}
        className="relative w-12 h-12 bg-gray-300 hover:bg-gray-400 rounded-full shadow-lg transition-all"
        title="Admin पैनल खोलने के लिए 10 सेकंड प्रेस करें"
      >
        {/* Progress Ring */}
        <svg className="absolute inset-0 w-12 h-12 transform -rotate-90" viewBox="0 0 48 48">
          <circle cx="24" cy="24" r="20" fill="none" stroke="rgba(0,0,0,0.1)" strokeWidth="2" />
          <circle
            cx="24"
            cy="24"
            r="20"
            fill="none"
            stroke="#4f46e5"
            strokeWidth="2"
            strokeDasharray={`${(pressTime / 10000) * 125.6} 125.6`}
            style={{ transition: "stroke-dasharray 0.1s linear" }}
          />
        </svg>

{/* Icon */}
        <div className="absolute inset-0 flex items-center justify-center">
          <span className="text-lg">⚙️</span>
        </div>
      </button>

{pressTime > 0 && pressTime < 10000 && (
        <div className="absolute top-16 right-0 bg-gray-900 text-white text-xs px-3 py-1 rounded whitespace-nowrap">
          {Math.ceil((10000 - pressTime) / 1000)}s
        </div>
      )}
    </div>
  )
}87:["$","$L8e",null,{"chatId":"qDvViubuAF4","children":["$","$L8f",null,{"data":{"@\"active-block\",\"qDvViubuAF4\",":{"id":"b_YxYoOr8Byd4","messageId":"7GlHiut0q4NX0YZdQS9V20ZQqVqv22U1","source":"$90","language":"typescriptreact","type":"code-project","closed":true,"meta":{"type":"code-project","project":"Code","taskNameActive":"Fixing React state update error","taskNameComplete":"Fixed React state update error"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"qDvViubuAF4\",":false,"":null},"children":"$L91"}]}]
8b:["$","$L78","wXiS4NDnMdY",{"value":{"fallback":{"template:wXiS4NDnMdY:likes":{"likeCount":119,"isLiked":false}}},"children":["$","div",null,{"className":"has-focus-visible:ring-offset-background relative flex w-full flex-col gap-2 text-sm sm:min-w-0","children":[["$","div",null,{"className":"shadow-base bg-v0-background-200 relative aspect-video w-full overflow-hidden rounded-lg text-sm has-focus-visible:outline-hidden has-focus-visible:ring-2 has-focus-visible:ring-v0-blue-700 has-focus-visible:ring-offset-1","children":[["$","$L92",null,{"index":0,"src":"https://gvsmhepiuiax2e6y.public.blob.vercel-storage.com/templates/assets/Capture%20d%E2%80%99e%CC%81cran%202025-12-26%20a%CC%80%2001.08.03-1ucYYiDYlswEN0ca7jzINV58mJM78K.jpg","alt":"","templateCanonId":"wXiS4NDnMdY","blockId":"b_KKQKvlU4Whr"}],false,["$","div",null,{"className":"absolute inset-0 flex items-center justify-center bg-linear-to-b from-[hsla(0,0%,100%,0.3)] to-[hsla(0,0%,40%,0.3)] opacity-0 transition-opacity focus-within:opacity-100 hover:opacity-100 has-data-[pending=true]:opacity-100","children":[[["$","$L93",null,{"href":"/templates/wXiS4NDnMdY","className":"absolute inset-0 sm:hidden","prefetch":false}],["$","$L93",null,{"href":"/templates/wXiS4NDnMdY","tabIndex":-1,"className":"absolute inset-0 hidden sm:block","prefetch":false}]],["$","div",null,{"className":"z-10 hidden w-32 flex-col items-center justify-center gap-2 sm:flex","children":["$","$L93",null,{"href":"/templates/wXiS4NDnMdY","prefetch":false,"children":"View Details","className":"focus-visible:ring-offset-background outline-hidden has-focus-visible:ring-2 inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap text-nowrap border font-medium ring-v0-caveat-focus-ring-tab transition focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:bg-v0-gray-100 disabled:text-v0-gray-500 disabled:ring-0 aria-disabled:cursor-not-allowed aria-disabled:bg-v0-gray-100 aria-disabled:text-v0-gray-500 aria-disabled:ring-0 [&>svg]:pointer-events-none [&>svg]:size-4 [&_svg]:shrink-0 disabled:border-v0-alpha-400 text-v0-background-100 aria-disabled:border-v0-alpha-400 border-v0-gray-1000 bg-v0-gray-1000 hover:border-v0-gray-900 hover:bg-v0-gray-900 focus:border-v0-gray-900 focus:bg-v0-gray-900 focus-visible:border-v0-gray-900 focus-visible:bg-v0-gray-900 h-8 px-3 text-sm has-[>kbd]:gap-2 has-[>svg]:px-2 has-[>kbd]:pr-[6px] rounded-lg w-full","disabled":"$undefined","ref":null}]}]]}]]}],["$","div",null,{"className":"flex items-center gap-3 pr-1 w-full","children":[["$","$L7d",null,{"teamId":"$undefined","authorId":"sgeDKOyvY41XAreXMDwcFJSG"}],["$","$L93",null,{"className":"flex flex-1 min-w-0 items-center gap-3","href":"/templates/wXiS4NDnMdY","tabIndex":-1,"prefetch":false,"data-testid":"template-card-link","children":["$","div",null,{"className":"flex flex-1 min-w-0 flex-col gap-1.5","children":[["$","div",null,{"className":"line-clamp-1 font-medium leading-none text-v0-gray-1000","children":"Biometic"}],null,["$","div",null,{"className":"flex flex-row items-center gap-1.5 text-v0-gray-900","children":[["$","div",null,{"className":"flex flex-row whitespace-nowrap items-center gap-1.5","children":[["$","svg",null,{"className":"size-3","dangerouslySetInnerHTML":{"__html":"<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.5 3.25C2.5 1.45507 3.95507 0 5.75 0H6.25C8.04493 0 9.5 1.45507 9.5 3.25V3.75C9.5 5.54493 8.04493 7 6.25 7H5.75C3.95507 7 2.5 5.54493 2.5 3.75V3.25ZM5.75 1.5C4.7835 1.5 4 2.2835 4 3.25V3.75C4 4.7165 4.7835 5.5 5.75 5.5H6.25C7.2165 5.5 8 4.7165 8 3.75V3.25C8 2.2835 7.2165 1.5 6.25 1.5H5.75ZM1.5 14.5V13.1709C2.31958 11.5377 3.99308 10.5 5.82945 10.5H6.17055C8.00692 10.5 9.68042 11.5377 10.5 13.1709V14.5H1.5ZM5.82945 9C3.35483 9 1.10604 10.4388 0.0690305 12.6857L0 12.8353V13V15.25V16H0.75H11.25H12V15.25V13V12.8353L11.931 12.6857C10.894 10.4388 8.64517 9 6.17055 9H5.82945ZM15.931 12.6857C15.3706 11.4715 14.4561 10.4931 13.3439 9.85058L12.5935 11.1494C13.399 11.6148 14.0681 12.3101 14.5 13.1709V14.5H13.5V16H15.25H16V15.25V13V12.8352L15.931 12.6857ZM11.25 0H10.5V1.5H11.25C12.2165 1.5 13 2.2835 13 3.25V3.75C13 4.7165 12.2165 5.5 11.25 5.5H10.5V7H11.25C13.0449 7 14.5 5.54493 14.5 3.75V3.25C14.5 1.45507 13.0449 0 11.25 0Z\" fill=\"currentColor\"/>"},"data-testid":"geist-icon","height":16,"strokeLinejoin":"round","style":{"verticalAlign":"$undefined","width":"$undefined","height":"$undefined","color":"currentColor"},"viewBox":"0 0 16 16","width":16}],"$L94"]}],"$L95","$L96"]}]]}]}]]}]]}]}]
</article></body></html>

₹10 में बनें दुकानदार, बेचें अपना सामान

{feature.title}

Shopsee कैसे काम करता है?

{step.title}

हमारे दुकानदारों की कहानियाँ

{testimonial.author}

{title}

{status === "checking" || status === "pending" ? "Verifying Payment" : status === "success" ? "Payment Verified!" : status === "expired" ? "Verification Expired" : "Payment Failed"}

Transaction History

No Transactions Found

Product Listing Payment

{mode === "login" ? "लॉगिन करें" : "रजिस्टर करें"}

{product.name}

{seller?.name?.charAt(0) || "?"} विक्रेता की जानकारी

उत्पाद विवरण

🛡️ सुरक्षा सुझाव

उपलब्ध उत्पाद

कोई उत्पाद नहीं मिला

{product.name}

Admin Panel

Payment Management

Product Management

User Management

Product Details

Product Name

Price

Category

Seller

Description

अपना उत्पाद सूचीबद्ध करें

नया उत्पाद जोड़ें

{seller?.name?.charAt(0) || "?"}
विक्रेता की जानकारी

About

Tags

Share

About

Tags

Share

More Templates Like This